LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Replace mobile detail-view transitions 

Minor adjustments to layout
pull/91/head
Benoit Favreault 2015-03-26 14:39:44 -04:00 committed by Francis Lachapelle
parent 2bc44dec9b
commit 05e58b30cc
9 changed files with 66 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
View File

@ -16,7 +16,7 @@
vs-scroll-parent="#messagesList">
<md-item ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
ng-class="{unread: !currentMessage.isread}">
<md-item-content ui-sref-active="_selected" ng-click="toggleDetailView()">
<md-item-content ui-sref-active="_selected">
<div class="md-tile-left">
<!--avatar-->
</div>
@ -42,6 +42,6 @@
</md-content>
<!-- This extra container is used to animate views transitions
double quotes in ng-animate is not a typo -->
<div id="detailView" class="view-detail" layout="column" ui-view="message"><!-- message view --></div>
<div id="detailView" class="view-detail ng-cloak" layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
</container>

2
UI/Templates/MailerUI/UIxMailViewTemplate.wox
View File

@ -7,7 +7,7 @@
xmlns:label="OGo:label"
xmlns:uix="OGo:uix">
<md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1">
<md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1" ng-class="">
<md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-arrow-back"><!--icon--></i></md-button>
<header class="msg-header">

10
UI/WebServerResources/css/ng-tags-input.bootstrap.css
View File

@ -60,6 +60,16 @@ tags-input.ng-invalid .tags {
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
tags-input[disabled] .tags {
background-color: #eeeeee;
}
tags-input[disabled] .tags .tag-item {
background: #337ab7;
opacity: 0.65;
}
tags-input[disabled] .tags .input {
background-color: #eeeeee;
}
.input-group tags-input {
padding: 0;

2
UI/WebServerResources/css/ng-tags-input.bootstrap.min.css vendored
View File

@ -1 +1 @@
tags-input{box-shadow:none;border:none;padding:0;min-height:34px}tags-input .host{margin:0}tags-input .tags{-moz-appearance:none;-webkit-appearance:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-moz-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}tags-input .tags .tag-item{color:#fff;background:#428bca;border:1px solid #357ebd;border-radius:4px}tags-input .tags .tag-item.selected{color:#fff;background:#d9534f;border:1px solid #d43f3a}tags-input .tags .tag-item .remove-button:hover{text-decoration:none}tags-input .tags.focused{border:1px solid #66afe9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}tags-input .autocomplete{border-radius:4px}tags-input .autocomplete .suggestion-item.selected,tags-input .autocomplete .suggestion-item.selected em{color:#262626;background-color:#f5f5f5}tags-input .autocomplete .suggestion-item em{color:#000;background-color:#fff}tags-input.ng-invalid .tags{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.input-group tags-input{padding:0;display:table-cell}.input-group tags-input:not(:first-child) .tags{border-top-left-radius:0;border-bottom-left-radius:0}.input-group tags-input:not(:last-child) .tags{border-top-right-radius:0;border-bottom-right-radius:0}.input-group-lg tags-input:first-child .tags{border-top-left-radius:6px;border-bottom-left-radius:6px}.input-group-lg tags-input:last-child .tags{border-top-right-radius:6px;border-bottom-right-radius:6px}.input-group-sm tags-input:first-child .tags{border-top-left-radius:3px;border-bottom-left-radius:3px}.input-group-sm tags-input:last-child .tags{border-top-right-radius:3px;border-bottom-right-radius:3px}.input-group-lg tags-input,tags-input.ti-input-lg{min-height:46px}.input-group-lg tags-input .tags,tags-input.ti-input-lg .tags{border-radius:6px}.input-group-lg tags-input .tags .tag-item,tags-input.ti-input-lg .tags .tag-item{height:38px;line-height:37px;font-size:18px;border-radius:6px}.input-group-lg tags-input .tags .tag-item .remove-button,tags-input.ti-input-lg .tags .tag-item .remove-button{font-size:20px}.input-group-lg tags-input .tags .input,tags-input.ti-input-lg .tags .input{height:38px;font-size:18px}.input-group-sm tags-input,tags-input.ti-input-sm{min-height:30px}.input-group-sm tags-input .tags,tags-input.ti-input-sm .tags{border-radius:3px}.input-group-sm tags-input .tags .tag-item,tags-input.ti-input-sm .tags .tag-item{height:22px;line-height:21px;font-size:12px;border-radius:3px}.input-group-sm tags-input .tags .tag-item .remove-button,tags-input.ti-input-sm .tags .tag-item .remove-button{font-size:16px}.input-group-sm tags-input .tags .input,tags-input.ti-input-sm .tags .input{height:22px;font-size:12px}.has-feedback tags-input .tags{padding-right:30px}.has-success tags-input .tags{border-color:#3c763d}.has-success tags-input .tags.focused{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-error tags-input .tags{border-color:#a94442}.has-error tags-input .tags.focused{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-warning tags-input .tags{border-color:#8a6d3b}.has-warning tags-input .tags.focused{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}
tags-input{box-shadow:none;border:none;padding:0;min-height:34px}tags-input .host{margin:0}tags-input .tags{-moz-appearance:none;-webkit-appearance:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-moz-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}tags-input .tags .tag-item{color:#fff;background:#428bca;border:1px solid #357ebd;border-radius:4px}tags-input .tags .tag-item.selected{color:#fff;background:#d9534f;border:1px solid #d43f3a}tags-input .tags .tag-item .remove-button:hover{text-decoration:none}tags-input .tags.focused{border:1px solid #66afe9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}tags-input .autocomplete{border-radius:4px}tags-input .autocomplete .suggestion-item.selected,tags-input .autocomplete .suggestion-item.selected em{color:#262626;background-color:#f5f5f5}tags-input .autocomplete .suggestion-item em{color:#000;background-color:#fff}tags-input.ng-invalid .tags{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}tags-input[disabled] .tags{background-color:#eee}tags-input[disabled] .tags .tag-item{background:#337ab7;opacity:.65}tags-input[disabled] .tags .input{background-color:#eee}.input-group tags-input{padding:0;display:table-cell}.input-group tags-input:not(:first-child) .tags{border-top-left-radius:0;border-bottom-left-radius:0}.input-group tags-input:not(:last-child) .tags{border-top-right-radius:0;border-bottom-right-radius:0}.input-group-lg tags-input:first-child .tags{border-top-left-radius:6px;border-bottom-left-radius:6px}.input-group-lg tags-input:last-child .tags{border-top-right-radius:6px;border-bottom-right-radius:6px}.input-group-sm tags-input:first-child .tags{border-top-left-radius:3px;border-bottom-left-radius:3px}.input-group-sm tags-input:last-child .tags{border-top-right-radius:3px;border-bottom-right-radius:3px}.input-group-lg tags-input,tags-input.ti-input-lg{min-height:46px}.input-group-lg tags-input .tags,tags-input.ti-input-lg .tags{border-radius:6px}.input-group-lg tags-input .tags .tag-item,tags-input.ti-input-lg .tags .tag-item{height:38px;line-height:37px;font-size:18px;border-radius:6px}.input-group-lg tags-input .tags .tag-item .remove-button,tags-input.ti-input-lg .tags .tag-item .remove-button{font-size:20px}.input-group-lg tags-input .tags .input,tags-input.ti-input-lg .tags .input{height:38px;font-size:18px}.input-group-sm tags-input,tags-input.ti-input-sm{min-height:30px}.input-group-sm tags-input .tags,tags-input.ti-input-sm .tags{border-radius:3px}.input-group-sm tags-input .tags .tag-item,tags-input.ti-input-sm .tags .tag-item{height:22px;line-height:21px;font-size:12px;border-radius:3px}.input-group-sm tags-input .tags .tag-item .remove-button,tags-input.ti-input-sm .tags .tag-item .remove-button{font-size:16px}.input-group-sm tags-input .tags .input,tags-input.ti-input-sm .tags .input{height:22px;font-size:12px}.has-feedback tags-input .tags{padding-right:30px}.has-success tags-input .tags{border-color:#3c763d}.has-success tags-input .tags.focused{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-error tags-input .tags{border-color:#a94442}.has-error tags-input .tags.focused{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-warning tags-input .tags{border-color:#8a6d3b}.has-warning tags-input .tags.focused{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}

25
UI/WebServerResources/css/ng-tags-input.css
View File

@ -90,6 +90,28 @@ tags-input.ng-invalid .tags {
-moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
}
tags-input[disabled] .host:focus {
outline: none;
}
tags-input[disabled] .tags {
background-color: #eeeeee;
cursor: default;
}
tags-input[disabled] .tags .tag-item {
opacity: 0.65;
background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
}
tags-input[disabled] .tags .tag-item .remove-button {
cursor: default;
}
tags-input[disabled] .tags .tag-item .remove-button:active {
color: #585858;
}
tags-input[disabled] .tags .input {
background-color: #eeeeee;
cursor: default;
}
tags-input .autocomplete {
margin-top: 5px;
@ -107,6 +129,9 @@ tags-input .autocomplete .suggestion-list {
margin: 0;
padding: 0;
list-style-type: none;
max-height: 280px;
overflow-y: auto;
position: relative;
}
tags-input .autocomplete .suggestion-item {
padding: 5px 10px;

2
UI/WebServerResources/css/ng-tags-input.min.css vendored
View File

@ -1 +1 @@
tags-input{display:block}tags-input *,tags-input :after,tags-input :before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}tags-input .host{position:relative;margin-top:5px;margin-bottom:5px;height:100%}tags-input .host:active{outline:0}tags-input .tags{-moz-appearance:textfield;-webkit-appearance:textfield;padding:1px;overflow:hidden;word-wrap:break-word;cursor:text;background-color:#fff;border:1px solid #a9a9a9;box-shadow:1px 1px 1px 0 #d3d3d3 inset;height:100%}tags-input .tags.focused{outline:0;-webkit-box-shadow:0 0 3px 1px rgba(5,139,242,.6);-moz-box-shadow:0 0 3px 1px rgba(5,139,242,.6);box-shadow:0 0 3px 1px rgba(5,139,242,.6)}tags-input .tags .tag-list{margin:0;padding:0;list-style-type:none}tags-input .tags .tag-item{margin:2px;padding:0 5px;display:inline-block;float:left;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif;height:26px;line-height:25px;border:1px solid #acacac;border-radius:3px;background:-webkit-linear-gradient(top,#f0f9ff 0,#cbebff 47%,#a1dbff 100%);background:linear-gradient(to bottom,#f0f9ff 0,#cbebff 47%,#a1dbff 100%)}tags-input .tags .tag-item.selected{background:-webkit-linear-gradient(top,#febbbb 0,#fe9090 45%,#ff5c5c 100%);background:linear-gradient(to bottom,#febbbb 0,#fe9090 45%,#ff5c5c 100%)}tags-input .tags .tag-item .remove-button{margin:0 0 0 5px;padding:0;border:none;background:0 0;cursor:pointer;vertical-align:middle;font:700 16px Arial,sans-serif;color:#585858}tags-input .tags .tag-item .remove-button:active{color:red}tags-input .tags .input{border:0;outline:0;margin:2px;padding:0;padding-left:5px;float:left;height:26px;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif}tags-input .tags .input.invalid-tag{color:red}tags-input .tags .input::-ms-clear{display:none}tags-input.ng-invalid .tags{-webkit-box-shadow:0 0 3px 1px rgba(255,0,0,.6);-moz-box-shadow:0 0 3px 1px rgba(255,0,0,.6);box-shadow:0 0 3px 1px rgba(255,0,0,.6)}tags-input .autocomplete{margin-top:5px;position:absolute;padding:5px 0;z-index:999;width:100%;background-color:#fff;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}tags-input .autocomplete .suggestion-list{margin:0;padding:0;list-style-type:none}tags-input .autocomplete .suggestion-item{padding:5px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background-color:#fff}tags-input .autocomplete .suggestion-item.selected,tags-input .autocomplete .suggestion-item.selected em{color:#fff;background-color:#0097cf}tags-input .autocomplete .suggestion-item em{font:normal bold 16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background-color:#fff}
tags-input{display:block}tags-input *,tags-input :after,tags-input :before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}tags-input .host{position:relative;margin-top:5px;margin-bottom:5px;height:100%}tags-input .host:active{outline:0}tags-input .tags{-moz-appearance:textfield;-webkit-appearance:textfield;padding:1px;overflow:hidden;word-wrap:break-word;cursor:text;background-color:#fff;border:1px solid #a9a9a9;box-shadow:1px 1px 1px 0 #d3d3d3 inset;height:100%}tags-input .tags.focused{outline:0;-webkit-box-shadow:0 0 3px 1px rgba(5,139,242,.6);-moz-box-shadow:0 0 3px 1px rgba(5,139,242,.6);box-shadow:0 0 3px 1px rgba(5,139,242,.6)}tags-input .tags .tag-list{margin:0;padding:0;list-style-type:none}tags-input .tags .tag-item{margin:2px;padding:0 5px;display:inline-block;float:left;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif;height:26px;line-height:25px;border:1px solid #acacac;border-radius:3px;background:-webkit-linear-gradient(top,#f0f9ff 0,#cbebff 47%,#a1dbff 100%);background:linear-gradient(to bottom,#f0f9ff 0,#cbebff 47%,#a1dbff 100%)}tags-input .tags .tag-item.selected{background:-webkit-linear-gradient(top,#febbbb 0,#fe9090 45%,#ff5c5c 100%);background:linear-gradient(to bottom,#febbbb 0,#fe9090 45%,#ff5c5c 100%)}tags-input .tags .tag-item .remove-button{margin:0 0 0 5px;padding:0;border:none;background:0 0;cursor:pointer;vertical-align:middle;font:700 16px Arial,sans-serif;color:#585858}tags-input .tags .tag-item .remove-button:active{color:red}tags-input .tags .input{border:0;outline:0;margin:2px;padding:0;padding-left:5px;float:left;height:26px;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif}tags-input .tags .input.invalid-tag{color:red}tags-input .tags .input::-ms-clear{display:none}tags-input.ng-invalid .tags{-webkit-box-shadow:0 0 3px 1px rgba(255,0,0,.6);-moz-box-shadow:0 0 3px 1px rgba(255,0,0,.6);box-shadow:0 0 3px 1px rgba(255,0,0,.6)}tags-input[disabled] .host:focus{outline:0}tags-input[disabled] .tags{background-color:#eee;cursor:default}tags-input[disabled] .tags .tag-item{opacity:.65;background:-webkit-linear-gradient(top,#f0f9ff 0,rgba(203,235,255,.75)47%,rgba(161,219,255,.62)100%);background:linear-gradient(to bottom,#f0f9ff 0,rgba(203,235,255,.75)47%,rgba(161,219,255,.62)100%)}tags-input[disabled] .tags .tag-item .remove-button{cursor:default}tags-input[disabled] .tags .tag-item .remove-button:active{color:#585858}tags-input[disabled] .tags .input{background-color:#eee;cursor:default}tags-input .autocomplete{margin-top:5px;position:absolute;padding:5px 0;z-index:999;width:100%;background-color:#fff;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}tags-input .autocomplete .suggestion-list{margin:0;padding:0;list-style-type:none;max-height:280px;overflow-y:auto;position:relative}tags-input .autocomplete .suggestion-item{padding:5px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background-color:#fff}tags-input .autocomplete .suggestion-item.selected,tags-input .autocomplete .suggestion-item.selected em{color:#fff;background-color:#0097cf}tags-input .autocomplete .suggestion-item em{font:normal bold 16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background-color:#fff}

7
UI/WebServerResources/js/Common/ui.js
View File

@ -117,6 +117,7 @@
})
.controller('navController', ['$scope', '$timeout', '$interval', '$http', '$mdSidenav', '$mdBottomSheet', '$mdMedia', '$log', 'sgConstant', function ($scope, $timeout, $interval, $http, $mdSidenav, $mdBottomSheet, $mdMedia, $log, sgConstant) {
// Show current day in top bar
$scope.currentDay = window.currentDay;
$timeout(function() {
@ -147,10 +148,8 @@
});
};
$scope.toggleDetailView = function() {
$timeout(function() {
var view = angular.element(document.getElementById('detailView'));
view.toggleClass('sg-open');
})
var detail = angular.element(document.getElementById('detailView'));
detail.toggleClass('sg-close');
};
$scope.$watch(function() {
return $mdMedia(sgConstant['gt-md']);

5
UI/WebServerResources/scss/components/button/_button.scss
View File

@ -100,11 +100,14 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
.sg-icon-bar--vertical {
display: flex;
flex-direction: column;
margin: 0 ($iconButton-padding * -1) 0 $mg;
margin: ($iconButton-padding * -1) ($iconButton-padding * -1) 0 $mg;
font-size: $sg-font-size-3;
align-items: center;
// Containers have padding, we compensate to align according to specs
justify-content: space-between;
@include at(sm) {
margin-left: $iconButton-padding;
}
}
// NiceToHave: some horizontal or left hand side variant

22
UI/WebServerResources/scss/views/_view.scss
View File

@ -61,11 +61,27 @@ $detailView-width: grid-step(8) !global;
width: 100%;
min-width: 100%;
background-color: sg-color($sogoPaper, 50);
transform: translateX(0);
transition: all 0.25s $swift-ease-in-out-timing-function;
&.sg-open {
transform: translateX(-100%);
transition: all 0.2s $swift-ease-in-out-timing-function;
&.sg-close {
transition-delay: 0.2s;
transform: translateX(-200%);
&.ng-enter {
filter: opacity(0);
}
}
&.ng-enter {
transform: translateX(0);
}
&.ng-enter.ng-enter-active,
&.ng-leave {
filter: opacity(1);
transform: translateX(-100%);
}
&.ng-leave.ng.leave-active {
filter: opacity(1);
transform: translateX(-200%);
}
[class *= md-whiteframe-] {
box-shadow: none;
}