maxbuttons / assets / scss / _input_range.scss

_input_range.scss in MaxButtons – Create buttons 7.1.2, 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: 24px !default;
12	$thumb-width: 24px !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: 12px !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
57	&:focus {
58	outline: 0;
59
60	&::-webkit-slider-runnable-track {
61	background: lighten($track-color, $contrast);
62	}
63
64	&::-ms-fill-lower {
65	background: $track-color;
66	}
67
68	&::-ms-fill-upper {
69	background: lighten($track-color, $contrast);
70	}
71	}
72
73	&::-webkit-slider-runnable-track {
74	@include track;
75	@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
76	background: $track-color;
77	border: $track-border-width solid $track-border-color;
78	border-radius: $track-radius;
79	}
80
81	&::-webkit-slider-thumb {
82	@include thumb;
83	-webkit-appearance: none;
84	margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
85	}
86
87	&::-moz-range-track {
88	@include track;
89	@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
90	background: $track-color;
91	border: $track-border-width solid $track-border-color;
92	border-radius: $track-radius;
93	}
94
95	&::-moz-range-thumb {
96	@include thumb;
97	}
98
99	&::-ms-track {
100	@include track;
101	background: transparent;
102	border-color: transparent;
103	border-width: ($thumb-height / 2) 0;
104	color: transparent;
105	}
106
107	&::-ms-fill-lower {
108	@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
109	background: darken($track-color, $contrast);
110	border: $track-border-width solid $track-border-color;
111	border-radius: $track-radius * 2;
112	}
113
114	&::-ms-fill-upper {
115	@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
116	background: $track-color;
117	border: $track-border-width solid $track-border-color;
118	border-radius: $track-radius * 2;
119	}
120
121	&::-ms-thumb {
122	@include thumb;
123	margin-top: 0;
124	}
125	}
126
127