aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/toggle.scss18
1 files changed, 12 insertions, 6 deletions
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss
index 52675ceed..5cd9e4526 100644
--- a/src/styles/toggle.scss
+++ b/src/styles/toggle.scss
@@ -1,3 +1,5 @@
1@use "sass:math";
2
1@import './config.scss'; 3@import './config.scss';
2 4
3$toggle-size: 14px; 5$toggle-size: 14px;
@@ -6,11 +8,11 @@ $toggle-button-size: 22px;
6 8
7.theme__dark .franz-form .franz-form__toggle-wrapper .franz-form__toggle { 9.theme__dark .franz-form .franz-form__toggle-wrapper .franz-form__toggle {
8 background: $dark-theme-gray; 10 background: $dark-theme-gray;
9 border-radius: $toggle-size / 2; 11 border-radius: math.div($toggle-size, 2);
10 12
11 .franz-form__toggle-button { 13 .franz-form__toggle-button {
12 background: $dark-theme-gray-lighter; 14 background: $dark-theme-gray-lighter;
13 box-shadow: 0 1px 4px rgba($dark-theme-black, .3); 15 box-shadow: 0 1px 4px rgba($dark-theme-black, 0.3);
14 } 16 }
15} 17}
16 18
@@ -18,7 +20,9 @@ $toggle-button-size: 22px;
18 display: flex; 20 display: flex;
19 flex-direction: row; 21 flex-direction: row;
20 22
21 .franz-form__label { margin-left: 20px; } 23 .franz-form__label {
24 margin-left: 20px;
25 }
22 26
23 .franz-form__toggle { 27 .franz-form__toggle {
24 background: $theme-gray-lighter; 28 background: $theme-gray-lighter;
@@ -30,12 +34,12 @@ $toggle-button-size: 22px;
30 .franz-form__toggle-button { 34 .franz-form__toggle-button {
31 background: $theme-gray-light; 35 background: $theme-gray-light;
32 border-radius: 100%; 36 border-radius: 100%;
33 box-shadow: 0 1px 4px rgba(0, 0, 0, .3); 37 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
34 height: $toggle-size - 2; 38 height: $toggle-size - 2;
35 left: 1px; 39 left: 1px;
36 top: 1px; 40 top: 1px;
37 position: absolute; 41 position: absolute;
38 transition: all .5s; 42 transition: all 0.5s;
39 width: $toggle-size - 2; 43 width: $toggle-size - 2;
40 } 44 }
41 45
@@ -44,6 +48,8 @@ $toggle-button-size: 22px;
44 left: $toggle-width - $toggle-size - 3; 48 left: $toggle-width - $toggle-size - 3;
45 } 49 }
46 50
47 input { display: none; } 51 input {
52 display: none;
53 }
48 } 54 }
49} 55}