Add .ng-leave and .ng-enter rulesets for page transition
Adding ngAnimation dependency created added animation to pages during
route or location changes. Added transitions to create an elegant
transition.
Tested: I navigated to every page including logging in
and out in Chrome, Firefox and Safari to assure all
browsers handle the transition consistently.
Resolves openbmc/phosphor-webui#86
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I14fa1bd790e80f977b7a0ccceccc3eb20ce33ae6
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index e95d949..ead5924 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -1,24 +1,29 @@
//Breakpoints mixin
@mixin mediaQuery($breakpoint) {
@if $breakpoint == "x-small" {
- @media (min-width: 25.000em) { //400px
+ @media (min-width: 25em) {
+ //400px
@content;
}
}
@if $breakpoint == "small" {
- @media (min-width: 47.938em) { //767px
+ @media (min-width: 47.938em) {
+ //767px
@content;
}
} @else if $breakpoint == "medium" {
- @media (min-width: 64.000em) { //1024px
+ @media (min-width: 64em) {
+ //1024px
@content;
}
} @else if $breakpoint == "large" {
- @media (min-width: 85.375em) { //1366px
+ @media (min-width: 85.375em) {
+ //1366px
@content;
}
} @else if $breakpoint == "x-large" {
- @media (min-width: 100.000em) { //1600px
+ @media (min-width: 100em) {
+ //1600px
@content;
}
}
@@ -40,23 +45,31 @@
font-weight: 700;
}
-
//Transitions mixin
@mixin fastTransition-all {
- transition: all .5s ease;
+ transition: all 0.5s ease;
}
@mixin slowTransition-all {
transition: all 1.5s ease;
}
+@mixin page-transition {
+ transition: 110ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+
+@mixin page-transition-visibility {
+ visibility: hidden;
+ opacity: 0;
+}
+
//Custom SVG arrow
@mixin bgImage__arrowDown-primary {
background-image: url(../assets/images/icon-caret-down.svg);
background-size: 0.8em;
background-repeat: no-repeat;
background-position-y: center;
- background-position-x: calc(100% - .5em);
+ background-position-x: calc(100% - 0.5em);
}
@mixin bgImage__arrowDown-disabled {
@@ -64,23 +77,23 @@
background-size: 0.8em;
background-repeat: no-repeat;
background-position-y: center;
- background-position-x: calc(100% - .5em);
+ background-position-x: calc(100% - 0.5em);
}
@mixin calcColumn-5 {
- min-width: calc(100% * (1/5) - 5px);
+ min-width: calc(100% * (1 / 5) - 5px);
}
-@mixin calcColumn-4 ($offset: 0) {
- min-width: calc(100% * (1/4) - #{$offset});
+@mixin calcColumn-4($offset: 0) {
+ min-width: calc(100% * (1 / 4) - #{$offset});
}
@mixin calcColumn-3 {
- min-width: calc(100% * (1/3) - 5px);
+ min-width: calc(100% * (1 / 3) - 5px);
}
@mixin calcSplitColumn {
- min-width: calc(100% * (1/2) - 5px);
+ min-width: calc(100% * (1 / 2) - 5px);
}
@mixin vertCenter {
@@ -89,7 +102,13 @@
}
@mixin indeterminate-bar {
- background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
+ background-image: repeating-linear-gradient(
+ -45deg,
+ rgba(251, 234, 174, 0.35),
+ rgba(251, 234, 174, 0.35) 25px,
+ rgba(244, 176, 0, 0.45) 25px,
+ rgba(244, 176, 0, 0.45) 50px
+ );
-webkit-animation: progress 2s linear infinite;
-moz-animation: progress 2s linear infinite;
animation: progress 2s linear infinite;
@@ -134,25 +153,41 @@
@mixin table-row-save {
@-webkit-keyframes row-flash {
- from { background-color: $lightblue; }
- to { background-color: inherit; }
+ from {
+ background-color: $lightblue;
+ }
+ to {
+ background-color: inherit;
+ }
}
@-moz-keyframes row-flash {
- from { background-color: $lightblue; }
- to { background-color: inherit; }
+ from {
+ background-color: $lightblue;
+ }
+ to {
+ background-color: inherit;
+ }
}
@-o-keyframes row-flash {
- from { background-color: $lightblue; }
- to { background-color: inherit; }
+ from {
+ background-color: $lightblue;
+ }
+ to {
+ background-color: inherit;
+ }
}
@keyframes row-flash {
- from { background-color: $lightblue; }
- to { background-color: inherit; }
+ from {
+ background-color: $lightblue;
+ }
+ to {
+ background-color: inherit;
+ }
}
.row-flash {
-webkit-animation: row-flash 1s infinite; /* Safari 4+ */
- -moz-animation: row-flash 1s infinite; /* Fx 5+ */
- -o-animation: row-flash 1s infinite; /* Opera 12+ */
- animation: row-flash 1s infinite; /* IE 10+ */
+ -moz-animation: row-flash 1s infinite; /* Fx 5+ */
+ -o-animation: row-flash 1s infinite; /* Opera 12+ */
+ animation: row-flash 1s infinite; /* IE 10+ */
}
-}
\ No newline at end of file
+}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index bacb093..79229b6 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -7,21 +7,32 @@
width: 100%;
position: relative;
border-bottom: 1px solid $lightbg__grey;
- margin: .5em 0 2.2em;
+ margin: 0.5em 0 2.2em;
padding-left: 0;
}
+// Main element class
.content__container {
margin-left: $nav__toplvlWidth;
- padding: 1em .1em;
- transition: left 1s ease;
- @include mediaQuery(x-small){
+ padding: 1em 0.1em;
+
+ @include mediaQuery(x-small) {
padding: 1rem 2rem;
}
+
section.row,
- .column.row.row, .row.row.columns{
+ .column.row.row,
+ .row.row.columns {
margin-left: 0;
}
+
+ // Must be applied to the <main> element in the app
+ // Required to create an elegant page transition
+ @include page-transition;
+ &.ng-leave-active,
+ &.ng-enter {
+ @include page-transition-visibility;
+ }
}
.content-header {
@@ -30,16 +41,17 @@
margin-top: 2em;
}
-.content-label, label {
+.content-label,
+label {
color: $darkgrey;
text-transform: uppercase;
font-weight: 700;
- font-size: .75em;
+ font-size: 0.75em;
margin-bottom: 0;
}
.subhead {
width: 100%;
border-bottom: 1px solid $medgrey;
- padding-bottom: .5em;
+ padding-bottom: 0.5em;
}
diff --git a/app/login/styles/index.scss b/app/login/styles/index.scss
index 07d45bf..24df1b9 100644
--- a/app/login/styles/index.scss
+++ b/app/login/styles/index.scss
@@ -1,6 +1,6 @@
#login {
@include mediaQuery(medium) {
- background: linear-gradient(to right, #FFFFFF 49.999%, #e6e9ed 50%);
+ background: linear-gradient(to right, #ffffff 49.999%, #e6e9ed 50%);
@include fastTransition-all;
}
}
@@ -28,7 +28,14 @@
margin: 0 auto;
}
}
- @include fastTransition-all;
+
+ // Must be applied to the <main> element in the app
+ // Required to create an elegant page transition
+ @include page-transition;
+ &.ng-leave-active,
+ &.ng-enter {
+ @include page-transition-visibility;
+ }
}
#login__form {
@@ -98,4 +105,3 @@
color: $error-color;
}
}
-