diff options
author | sdtsui <szehungdanieltsui@gmail.com> | 2017-08-07 03:09:17 +0800 |
---|---|---|
committer | sdtsui <szehungdanieltsui@gmail.com> | 2017-08-07 03:09:17 +0800 |
commit | 3f222854e439e0cf94242e32e54d9c36126d94d5 (patch) | |
tree | 143ad25e07f1fea320eda875da93bd4057fc1662 /ui/app/css/transitions.scss | |
parent | f7f9f87ef7850ae94595a5366d269d169139c127 (diff) | |
download | tangerine-wallet-browser-3f222854e439e0cf94242e32e54d9c36126d94d5.tar.gz tangerine-wallet-browser-3f222854e439e0cf94242e32e54d9c36126d94d5.tar.zst tangerine-wallet-browser-3f222854e439e0cf94242e32e54d9c36126d94d5.zip |
Migrate from css to scss + autoprefixer
Diffstat (limited to 'ui/app/css/transitions.scss')
-rw-r--r-- | ui/app/css/transitions.scss | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/ui/app/css/transitions.scss b/ui/app/css/transitions.scss new file mode 100644 index 000000000..5f9f31ed7 --- /dev/null +++ b/ui/app/css/transitions.scss @@ -0,0 +1,47 @@ +/* universal */ +.app-primary .main-enter { + position: absolute; + width: 100%; +} + +/* center position */ +.app-primary.from-right .main-enter-active, +.app-primary.from-left .main-enter-active { + overflow-x: hidden; + transform: translateX(0px); + transition: transform 300ms ease-in; +} + +/* exited positions */ +.app-primary.from-left .main-leave-active { + transform: translateX(360px); + transition: transform 300ms ease-in; +} +.app-primary.from-right .main-leave-active { + transform: translateX(-360px); + transition: transform 300ms ease-in; +} + +.sidebar.from-left { + transform: translateX(-320px); + transition: transform 300ms ease-in; +} + +/* loader transitions */ +.loader-enter, .loader-leave-active { + opacity: 0.0; + transition: opacity 150 ease-in; +} +.loader-enter-active, .loader-leave { + opacity: 1.0; + transition: opacity 150 ease-in; +} + +/* entering positions */ +.app-primary.from-right .main-enter:not(.main-enter-active) { + transform: translateX(360px); +} +.app-primary.from-left .main-enter:not(.main-enter-active) { + transform: translateX(-360px); +} + |