diff options
author | 2018-07-05 02:37:43 -0300 | |
---|---|---|
committer | 2018-07-05 02:37:43 -0300 | |
commit | 25c6cbd29aff90f694d72afe28ab56b0113fb16a (patch) | |
tree | 9907623b3a7b835e58b895d08b62c5339b8e0376 /src/styles/animations.scss | |
parent | 5.0.0 beta.18 (diff) | |
download | ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.gz ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.zst ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.zip |
Update stylesheets and added darkMode variable and toggle.
Diffstat (limited to 'src/styles/animations.scss')
-rw-r--r-- | src/styles/animations.scss | 54 |
1 files changed, 22 insertions, 32 deletions
diff --git a/src/styles/animations.scss b/src/styles/animations.scss index 1e49af207..b121af7d2 100644 --- a/src/styles/animations.scss +++ b/src/styles/animations.scss | |||
@@ -1,49 +1,41 @@ | |||
1 | // FadeIn | 1 | // FadeIn |
2 | .fadeIn-appear { | 2 | .fadeIn-appear { opacity: .01; } |
3 | opacity: 0.01; | ||
4 | } | ||
5 | 3 | ||
6 | .fadeIn-appear.fadeIn-appear-active { | 4 | .fadeIn-appear.fadeIn-appear-active { |
7 | opacity: 1; | 5 | opacity: 1; |
8 | transition: opacity 0.5s ease-out; | 6 | transition: opacity .5s ease-out; |
9 | } | 7 | } |
10 | 8 | ||
11 | .fadeIn-enter { | 9 | .fadeIn-enter { |
12 | opacity: 0.01; | 10 | opacity: .01; |
13 | transition: opacity 0.5s ease-out; | 11 | transition: opacity .5s ease-out; |
14 | } | 12 | } |
15 | 13 | ||
16 | .fadeIn-leave { | 14 | .fadeIn-leave { opacity: 1; } |
17 | opacity: 1; | ||
18 | } | ||
19 | 15 | ||
20 | .fadeIn-leave.fadeIn-leave-active { | 16 | .fadeIn-leave.fadeIn-leave-active { |
21 | opacity: 0.01; | 17 | opacity: .01; |
22 | transition: opacity 300ms ease-in; | 18 | transition: opacity 300ms ease-in; |
23 | } | 19 | } |
24 | 20 | ||
25 | // FadeIn Fast | 21 | // FadeIn Fast |
26 | .fadeIn-fast-appear { | 22 | .fadeIn-fast-appear { opacity: .01; } |
27 | opacity: 0.01; | ||
28 | } | ||
29 | 23 | ||
30 | .fadeIn-fast-appear.fadeIn-fast-appear-active { | 24 | .fadeIn-fast-appear.fadeIn-fast-appear-active { |
31 | opacity: 1; | 25 | opacity: 1; |
32 | transition: opacity 0.25s ease-out; | 26 | transition: opacity .25s ease-out; |
33 | } | 27 | } |
34 | 28 | ||
35 | .fadeIn-fast-enter { | 29 | .fadeIn-fast-enter { |
36 | opacity: 0.01; | 30 | opacity: .01; |
37 | transition: opacity 0.25s ease-out; | 31 | transition: opacity .25s ease-out; |
38 | } | 32 | } |
39 | 33 | ||
40 | .fadeIn-fast-leave { | 34 | .fadeIn-fast-leave { opacity: 1; } |
41 | opacity: 1; | ||
42 | } | ||
43 | 35 | ||
44 | .fadeIn-fast-leave.fadeIn-fast-leave-active { | 36 | .fadeIn-fast-leave.fadeIn-fast-leave-active { |
45 | opacity: 0.01; | 37 | opacity: .01; |
46 | transition: opacity 0.25s ease-in; | 38 | transition: opacity .25s ease-in; |
47 | } | 39 | } |
48 | 40 | ||
49 | // Slide down | 41 | // Slide down |
@@ -54,37 +46,35 @@ | |||
54 | 46 | ||
55 | .slideDown-appear.slideDown-appear-active { | 47 | .slideDown-appear.slideDown-appear-active { |
56 | max-height: 500px; | 48 | max-height: 500px; |
57 | transition: max-height 0.5s ease-out; | 49 | transition: max-height .5s ease-out; |
58 | } | 50 | } |
59 | 51 | ||
60 | .slideDown-enter { | 52 | .slideDown-enter { |
61 | max-height: 0; | 53 | max-height: 0; |
62 | transition: max-height 0.5s ease-out; | 54 | transition: max-height .5s ease-out; |
63 | } | 55 | } |
64 | 56 | ||
65 | // Slide up | 57 | // Slide up |
66 | .slideUp-appear { | 58 | .slideUp-appear { |
67 | transform: translateY(20px); | ||
68 | opacity: 0; | 59 | opacity: 0; |
60 | transform: translateY(20px); | ||
69 | } | 61 | } |
70 | 62 | ||
71 | .slideUp-appear.slideUp-appear-active { | 63 | .slideUp-appear.slideUp-appear-active { |
72 | transform: translateY(0px); | ||
73 | opacity: 1; | 64 | opacity: 1; |
74 | transition: all 0.3s ease-out; | 65 | transform: translateY(0px); |
66 | transition: all .3s ease-out; | ||
75 | } | 67 | } |
76 | 68 | ||
77 | .slideUp-enter { | 69 | .slideUp-enter { |
78 | transform: translateY(20px); | ||
79 | opacity: 0; | 70 | opacity: 0; |
80 | transition: all 0.3s ease-out; | 71 | transform: translateY(20px); |
72 | transition: all .3s ease-out; | ||
81 | } | 73 | } |
82 | 74 | ||
83 | .slideUp-leave { | 75 | .slideUp-leave { opacity: 1; } |
84 | opacity: 1; | ||
85 | } | ||
86 | 76 | ||
87 | .slideUp-leave.slideUp-leave-active { | 77 | .slideUp-leave.slideUp-leave-active { |
88 | opacity: 0.01; | 78 | opacity: .01; |
89 | transition: opacity 300ms ease-in; | 79 | transition: opacity 300ms ease-in; |
90 | } | 80 | } |