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