maxbuttons / assets / scss / _input_range.scss

_input_range.scss in MaxButtons – Create buttons 7.13, at assets/scss/_input_range.scss

127 lines 3.2 KB

Raw Download Zip

1	// Styling Cross-Browser Compatible Range Inputs with Sass
2	// Github: https://github.com/darlanrod/input-range-sass
3	// Author: Darlan Rod https://github.com/darlanrod
4	// Version 1.4.1
5	// MIT License
6
7	$track-color: #fff !default;
8	$thumb-color: #179588 !default;
9
10	$thumb-radius: 12px !default;
11	$thumb-height: 20px !default;
12	$thumb-width: 20px !default;
13	$thumb-shadow-size: 0px !default;
14	$thumb-shadow-blur: 0px !default;
15	$thumb-shadow-color: rgba(0, 0, 0, .2) !default;
16	$thumb-border-width: 0px !default;
17	$thumb-border-color: #eceff1 !default;
18
19	$track-width: 250px !default;
20	$track-height: 5px !default;
21	$track-shadow-size: 0px !default;
22	$track-shadow-blur: 0px !default;
23	$track-shadow-color: rgba(0, 0, 0, .2) !default;
24	$track-border-width: 1px !default;
25	$track-border-color: #cfd8dc !default;
26
27	$track-radius: 10px !default;
28	$contrast: 5% !default;
29
30	@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
31	//box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
32	}
33
34	@mixin track {
35	cursor: pointer;
36	height: $track-height;
37	transition: all .2s ease;
38	width: $track-width;
39	}
40
41	@mixin thumb {
42	@include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
43	background: $thumb-color;
44	border: $thumb-border-width solid $thumb-border-color;
45	border-radius: $thumb-radius;
46	cursor: pointer;
47	height: $thumb-height;
48	width: $thumb-width;
49
50	}
51
52	[type='range']='range'] {
53	-webkit-appearance: none;
54	//margin: $thumb-height / 2 0;
55	width: $track-width;
56	margin-top: 8px;
57
58	&:focus {
59	outline: 0;
60
61	&::-webkit-slider-runnable-track {
62	background: lighten($track-color, $contrast);
63	}
64
65	&::-ms-fill-lower {
66	background: $track-color;
67	}
68
69	&::-ms-fill-upper {
70	background: lighten($track-color, $contrast);
71	}
72	}
73
74	&::-webkit-slider-runnable-track {
75	@include track;
76	@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
77	background: $track-color;
78	border: $track-border-width solid $track-border-color;
79	border-radius: $track-radius;
80	}
81
82	&::-webkit-slider-thumb {
83	@include thumb;
84	-webkit-appearance: none;
85	margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
86	}
87
88	&::-moz-range-track {
89	@include track;
90	@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
91	background: $track-color;
92	border: $track-border-width solid $track-border-color;
93	border-radius: $track-radius;
94	}
95
96	&::-moz-range-thumb {
97	@include thumb;
98	}
99
100	&::-ms-track {
101	@include track;
102	background: transparent;
103	border-color: transparent;
104	border-width: ($thumb-height / 2) 0;
105	color: transparent;
106	}
107
108	&::-ms-fill-lower {
109	@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
110	background: darken($track-color, $contrast);
111	border: $track-border-width solid $track-border-color;
112	border-radius: $track-radius * 2;
113	}
114
115	&::-ms-fill-upper {
116	@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
117	background: $track-color;
118	border: $track-border-width solid $track-border-color;
119	border-radius: $track-radius * 2;
120	}
121
122	&::-ms-thumb {
123	@include thumb;
124	margin-top: 0;
125	}
126	}
127