diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/styles/toggle.scss | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/styles/toggle.scss')
-rw-r--r-- | src/styles/toggle.scss | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss new file mode 100644 index 000000000..5b47e6495 --- /dev/null +++ b/src/styles/toggle.scss | |||
@@ -0,0 +1,47 @@ | |||
1 | @import './config.scss'; | ||
2 | |||
3 | $toggle-size: 14px; | ||
4 | $toggle-width: 40px; | ||
5 | $toggle-button-size: 22px; | ||
6 | |||
7 | .franz-form { | ||
8 | .franz-form__toggle-wrapper { | ||
9 | display: flex; | ||
10 | flex-direction: row; | ||
11 | |||
12 | .franz-form__label { | ||
13 | margin-left: 20px; | ||
14 | } | ||
15 | |||
16 | .franz-form__toggle { | ||
17 | width: $toggle-width; | ||
18 | height: $toggle-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 | } | ||
46 | } | ||
47 | } | ||