diff options
author | Guille Cura <cura.gf@gmail.com> | 2018-07-05 02:37:43 -0300 |
---|---|---|
committer | Guille Cura <cura.gf@gmail.com> | 2018-07-05 02:37:43 -0300 |
commit | 25c6cbd29aff90f694d72afe28ab56b0113fb16a (patch) | |
tree | 9907623b3a7b835e58b895d08b62c5339b8e0376 /src/styles/toggle.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/toggle.scss')
-rw-r--r-- | src/styles/toggle.scss | 79 |
1 files changed, 44 insertions, 35 deletions
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss index 5b47e6495..dc38e6c77 100644 --- a/src/styles/toggle.scss +++ b/src/styles/toggle.scss | |||
@@ -4,44 +4,53 @@ $toggle-size: 14px; | |||
4 | $toggle-width: 40px; | 4 | $toggle-width: 40px; |
5 | $toggle-button-size: 22px; | 5 | $toggle-button-size: 22px; |
6 | 6 | ||
7 | .franz-form { | 7 | .theme__dark .franz-form .franz-form__toggle-wrapper .franz-form__toggle { |
8 | .franz-form__toggle-wrapper { | 8 | background: $dark-theme-gray; |
9 | display: flex; | 9 | border-radius: $toggle-size / 2; |
10 | flex-direction: row; | 10 | width: $toggle-width * .85; |
11 | 11 | ||
12 | .franz-form__label { | 12 | .franz-form__toggle-button { |
13 | margin-left: 20px; | 13 | background: $dark-theme-gray-lighter; |
14 | box-shadow: 0 1px 4px rgba($dark-theme-black, .3); | ||
15 | height: $toggle-size - 2; | ||
16 | left: 1px; | ||
17 | top: 1px; | ||
18 | width: $toggle-size - 2; | ||
19 | } | ||
20 | |||
21 | &.is-active .franz-form__toggle-button { left: $toggle-width * .85 - $toggle-size - 3; } | ||
22 | } | ||
23 | |||
24 | .franz-form .franz-form__toggle-wrapper { | ||
25 | display: flex; | ||
26 | flex-direction: row; | ||
27 | |||
28 | .franz-form__label { margin-left: 20px; } | ||
29 | |||
30 | .franz-form__toggle { | ||
31 | background: $theme-gray-lighter; | ||
32 | border-radius: $theme-border-radius; | ||
33 | height: $toggle-size; | ||
34 | position: relative; | ||
35 | width: $toggle-width; | ||
36 | |||
37 | .franz-form__toggle-button { | ||
38 | background: $theme-gray-light; | ||
39 | border-radius: 100%; | ||
40 | box-shadow: 0 1px 4px rgba(0, 0, 0, .3); | ||
41 | height: $toggle-button-size; | ||
42 | left: 0; | ||
43 | position: absolute; | ||
44 | top: -($toggle-button-size - $toggle-size) / 2; | ||
45 | transition: all .5s; | ||
46 | width: $toggle-button-size; | ||
14 | } | 47 | } |
15 | 48 | ||
16 | .franz-form__toggle { | 49 | &.is-active .franz-form__toggle-button { |
17 | width: $toggle-width; | 50 | background: $theme-brand-primary; |
18 | height: $toggle-size; | 51 | left: $toggle-width - $toggle-button-size; |
19 | position: relative; | ||
20 | background: $theme-gray-lighter; | ||
21 | border-radius: $theme-border-radius; | ||
22 | |||
23 | .franz-form__toggle-button { | ||
24 | position: absolute; | ||
25 | left: 0; | ||
26 | top: -($toggle-button-size - $toggle-size) / 2; | ||
27 | width: $toggle-button-size; | ||
28 | height: $toggle-button-size; | ||
29 | background: $theme-gray-light; | ||
30 | border-radius: 100%; | ||
31 | transition: all 0.5s; | ||
32 | box-shadow: 0 1px 4px rgba(0,0,0,0.3); | ||
33 | } | ||
34 | |||
35 | &.is-active { | ||
36 | .franz-form__toggle-button { | ||
37 | left: $toggle-width - $toggle-button-size; | ||
38 | background: $theme-brand-primary; | ||
39 | } | ||
40 | } | ||
41 | |||
42 | input { | ||
43 | display: none; | ||
44 | } | ||
45 | } | 52 | } |
53 | |||
54 | input { display: none; } | ||
46 | } | 55 | } |
47 | } | 56 | } |