diff options
Diffstat (limited to 'src/styles/slider.scss')
-rw-r--r-- | src/styles/slider.scss | 29 |
1 files changed, 15 insertions, 14 deletions
diff --git a/src/styles/slider.scss b/src/styles/slider.scss index 8bb771586..85b31660f 100644 --- a/src/styles/slider.scss +++ b/src/styles/slider.scss | |||
@@ -3,43 +3,44 @@ | |||
3 | .theme__dark .franz-form .franz-form__slider-wrapper .slider { | 3 | .theme__dark .franz-form .franz-form__slider-wrapper .slider { |
4 | border: 1px solid $dark-theme-gray; | 4 | border: 1px solid $dark-theme-gray; |
5 | background: $dark-theme-gray; | 5 | background: $dark-theme-gray; |
6 | |||
7 | } | 6 | } |
8 | 7 | ||
9 | |||
10 | .franz-form { | 8 | .franz-form { |
11 | .franz-form__slider-wrapper { | 9 | .franz-form__slider-wrapper { |
12 | display: flex; | 10 | display: flex; |
13 | flex-direction: row; | 11 | flex-direction: row; |
14 | 12 | ||
15 | .franz-form__label { margin-left: 20px; } | 13 | .franz-form__label { |
14 | margin-left: 20px; | ||
15 | } | ||
16 | 16 | ||
17 | .slider-container { | 17 | .slider-container { |
18 | width: 100%; /* Width of the outside container */ | 18 | width: 100%; /* Width of the outside container */ |
19 | } | 19 | } |
20 | 20 | ||
21 | /* The slider itself */ | 21 | /* The slider itself */ |
22 | .slider { | 22 | .slider { |
23 | -webkit-appearance: none; | 23 | -webkit-appearance: none; |
24 | width: 100%; | 24 | width: 100%; |
25 | height: 14px; | 25 | height: 14px; |
26 | border-radius: $theme-border-radius; | 26 | border-radius: $theme-border-radius; |
27 | background: $theme-gray-lighter; | 27 | background: $theme-gray-lighter; |
28 | outline: none; | 28 | outline: none; |
29 | opacity: 1.0; | 29 | opacity: 1; |
30 | -webkit-transition: .2s; | 30 | @media (prefers-reduced-motion: no-preference) { |
31 | transition: opacity .2s; | 31 | transition: opacity 0.2s; |
32 | } | ||
32 | } | 33 | } |
33 | 34 | ||
34 | .slider::-webkit-slider-thumb { | 35 | .slider::-webkit-slider-thumb { |
35 | -webkit-appearance: none; | 36 | -webkit-appearance: none; |
36 | appearance: none; | 37 | appearance: none; |
37 | width: 14px; | 38 | width: 14px; |
38 | height: 14px; | 39 | height: 14px; |
39 | border-radius: 50%; | 40 | border-radius: 50%; |
40 | background: $theme-brand-primary; | 41 | background: $theme-brand-primary; |
41 | box-shadow: 0 1px 4px rgba(0, 0, 0, .3); | 42 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); |
42 | cursor: pointer; | 43 | cursor: pointer; |
43 | } | 44 | } |
44 | } | 45 | } |
45 | } | 46 | } |