1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | .ui.range {
|
7 | width: 100%;
|
8 | height: 20px;
|
9 | }
|
10 |
|
11 | .ui.range .inner {
|
12 | margin: 0 10px 0 10px;
|
13 | height: 20px;
|
14 | position: relative;
|
15 | }
|
16 |
|
17 | .ui.range .inner:hover {
|
18 | cursor: pointer;
|
19 | }
|
20 |
|
21 | .ui.range .inner .track {
|
22 | position: absolute;
|
23 | width: 100%;
|
24 | height: 4px;
|
25 | border-radius: 4px;
|
26 | top: 9px;
|
27 | left: 0;
|
28 | background-color: rgba(0,0,0,.05);
|
29 | }
|
30 |
|
31 | .ui.inverted.range .inner .track {
|
32 | background-color: rgba(255,255,255,.08);
|
33 | }
|
34 |
|
35 | .ui.range .inner .track-fill {
|
36 | position: absolute;
|
37 | width: 0;
|
38 | height: 4px;
|
39 | border-radius: 4px;
|
40 | top: 9px;
|
41 | left: 0;
|
42 | background-color: #1b1c1d;
|
43 | }
|
44 |
|
45 | .ui.inverted.range .inner .track-fill {
|
46 | background-color: #545454;
|
47 | }
|
48 |
|
49 | .ui.range .inner .thumb {
|
50 | position: absolute;
|
51 | top: 0;
|
52 | left: 0;
|
53 | height: 20px;
|
54 | width: 20px;
|
55 | background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
56 | background: #fff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
57 | background: #fff -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
58 | background: #fff -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
59 | border-radius: 100%;
|
60 | box-shadow: 0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset;
|
61 | }
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 | .ui.red.range .inner .track-fill {
|
69 | background-color: #DB2828;
|
70 | }
|
71 | .ui.red.inverted.range .inner .track-fill {
|
72 | background-color: #FF695E;
|
73 | }
|
74 |
|
75 |
|
76 | .ui.orange.range .inner .track-fill {
|
77 | background-color: #F2711C;
|
78 | }
|
79 | .ui.orange.inverted.range .inner .track-fill {
|
80 | background-color: #FF851B;
|
81 | }
|
82 |
|
83 |
|
84 | .ui.yellow.range .inner .track-fill {
|
85 | background-color: #FBBD08;
|
86 | }
|
87 | .ui.yellow.inverted.range .inner .track-fill {
|
88 | background-color: #FFE21F;
|
89 | }
|
90 |
|
91 |
|
92 | .ui.olive.range .inner .track-fill {
|
93 | background-color: #B5CC18;
|
94 | }
|
95 | .ui.olive.inverted.range .inner .track-fill {
|
96 | background-color: #D9E778;
|
97 | }
|
98 |
|
99 |
|
100 | .ui.green.range .inner .track-fill {
|
101 | background-color: #21BA45;
|
102 | }
|
103 | .ui.green.inverted.range .inner .track-fill {
|
104 | background-color: #2ECC40;
|
105 | }
|
106 |
|
107 |
|
108 | .ui.teal.range .inner .track-fill {
|
109 | background-color: #00B5AD;
|
110 | }
|
111 | .ui.teal.inverted.range .inner .track-fill {
|
112 | background-color: #6DFFFF;
|
113 | }
|
114 |
|
115 |
|
116 | .ui.blue.range .inner .track-fill {
|
117 | background-color: #2185D0;
|
118 | }
|
119 | .ui.blue.inverted.range .inner .track-fill {
|
120 | background-color: #54C8FF;
|
121 | }
|
122 |
|
123 |
|
124 | .ui.violet.range .inner .track-fill {
|
125 | background-color: #6435C9;
|
126 | }
|
127 | .ui.violet.inverted.range .inner .track-fill {
|
128 | background-color: #A291FB;
|
129 | }
|
130 |
|
131 |
|
132 | .ui.purple.range .inner .track-fill {
|
133 | background-color: #A333C8;
|
134 | }
|
135 | .ui.purple.inverted.range .inner .track-fill {
|
136 | background-color: #DC73FF;
|
137 | }
|
138 |
|
139 |
|
140 | .ui.pink.range .inner .track-fill {
|
141 | background-color: #E03997;
|
142 | }
|
143 | .ui.pink.inverted.range .inner .track-fill {
|
144 | background-color: #FF8EDF;
|
145 | }
|
146 |
|
147 |
|
148 | .ui.brown.range .inner .track-fill {
|
149 | background-color: #A5673F;
|
150 | }
|
151 | .ui.brown.inverted.range .inner .track-fill {
|
152 | background-color: #D67C1C;
|
153 | }
|
154 |
|
155 |
|
156 | .ui.grey.range .inner .track-fill {
|
157 | background-color: #767676;
|
158 | }
|
159 | .ui.grey.inverted.range .inner .track-fill {
|
160 | background-color: #DCDDDE;
|
161 | }
|
162 |
|
163 |
|
164 | .ui.black.range .inner .track-fill {
|
165 | background-color: #1b1c1d;
|
166 | }
|
167 | .ui.black.inverted.range .inner .track-fill {
|
168 | background-color: #545454;
|
169 | }
|
170 |
|
171 |
|
172 |
|
173 |
|
174 | .ui.range.disabled {
|
175 | opacity: .5;
|
176 | }
|
177 |
|
178 | .ui.range.disabled .inner:hover {
|
179 | cursor: auto;
|
180 | }
|
181 |
|
182 | .ui.range.disabled .inner .track-fill {
|
183 | background: #ccc;
|
184 | }
|