diff options
author | 2018-11-15 13:20:04 +0100 | |
---|---|---|
committer | 2018-11-15 13:20:04 +0100 | |
commit | 411a514a0b968cca650f00217ded4658c4239cec (patch) | |
tree | ddd3b065a7e229cb2621cb629385011e00466588 /src | |
parent | Merge remote-tracking branch 'origin/develop' into pr/1026 (diff) | |
download | ferdium-app-411a514a0b968cca650f00217ded4658c4239cec.tar.gz ferdium-app-411a514a0b968cca650f00217ded4658c4239cec.tar.zst ferdium-app-411a514a0b968cca650f00217ded4658c4239cec.zip |
Streamline toggle styling
Diffstat (limited to 'src')
-rw-r--r-- | src/styles/toggle.scss | 17 |
1 files changed, 5 insertions, 12 deletions
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss index dc38e6c77..0ce0c3379 100644 --- a/src/styles/toggle.scss +++ b/src/styles/toggle.scss | |||
@@ -7,18 +7,11 @@ $toggle-button-size: 22px; | |||
7 | .theme__dark .franz-form .franz-form__toggle-wrapper .franz-form__toggle { | 7 | .theme__dark .franz-form .franz-form__toggle-wrapper .franz-form__toggle { |
8 | background: $dark-theme-gray; | 8 | background: $dark-theme-gray; |
9 | border-radius: $toggle-size / 2; | 9 | border-radius: $toggle-size / 2; |
10 | width: $toggle-width * .85; | ||
11 | 10 | ||
12 | .franz-form__toggle-button { | 11 | .franz-form__toggle-button { |
13 | background: $dark-theme-gray-lighter; | 12 | background: $dark-theme-gray-lighter; |
14 | box-shadow: 0 1px 4px rgba($dark-theme-black, .3); | 13 | 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 | } | 14 | } |
20 | |||
21 | &.is-active .franz-form__toggle-button { left: $toggle-width * .85 - $toggle-size - 3; } | ||
22 | } | 15 | } |
23 | 16 | ||
24 | .franz-form .franz-form__toggle-wrapper { | 17 | .franz-form .franz-form__toggle-wrapper { |
@@ -38,17 +31,17 @@ $toggle-button-size: 22px; | |||
38 | background: $theme-gray-light; | 31 | background: $theme-gray-light; |
39 | border-radius: 100%; | 32 | border-radius: 100%; |
40 | box-shadow: 0 1px 4px rgba(0, 0, 0, .3); | 33 | box-shadow: 0 1px 4px rgba(0, 0, 0, .3); |
41 | height: $toggle-button-size; | 34 | height: $toggle-size - 2; |
42 | left: 0; | 35 | left: 1px; |
36 | top: 1px; | ||
43 | position: absolute; | 37 | position: absolute; |
44 | top: -($toggle-button-size - $toggle-size) / 2; | ||
45 | transition: all .5s; | 38 | transition: all .5s; |
46 | width: $toggle-button-size; | 39 | width: $toggle-size - 2; |
47 | } | 40 | } |
48 | 41 | ||
49 | &.is-active .franz-form__toggle-button { | 42 | &.is-active .franz-form__toggle-button { |
50 | background: $theme-brand-primary; | 43 | background: $theme-brand-primary; |
51 | left: $toggle-width - $toggle-button-size; | 44 | left: $toggle-width - $toggle-size - 3;; |
52 | } | 45 | } |
53 | 46 | ||
54 | input { display: none; } | 47 | input { display: none; } |