diff options
| author | Derick Montague <derick.montague@ibm.com> | 2019-05-23 21:32:28 -0500 |
|---|---|---|
| committer | Gunnar Mills <gmills@us.ibm.com> | 2019-05-29 01:01:31 +0000 |
| commit | 1a606bee74ab53f2d9c18b38bbc637620260799b (patch) | |
| tree | cbb571fbd79f4fd5eb0fcf951979200b75008c4b /app/login | |
| parent | 7920baeb036d499203d8b59516a2355eab9aba79 (diff) | |
| download | phosphor-webui-1a606bee74ab53f2d9c18b38bbc637620260799b.tar.gz phosphor-webui-1a606bee74ab53f2d9c18b38bbc637620260799b.zip | |
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
Diffstat (limited to 'app/login')
| -rw-r--r-- | app/login/styles/index.scss | 12 |
1 files changed, 9 insertions, 3 deletions
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; } } - |
