]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | /*! |
2 | * Slider for Bootstrap | |
3 | * | |
4 | * Copyright 2012 Stefan Petre | |
5 | * Licensed under the Apache License v2.0 | |
6 | * http://www.apache.org/licenses/LICENSE-2.0 | |
7 | * | |
8 | */ | |
9 | .slider { | |
10 | display: block; | |
11 | vertical-align: middle; | |
12 | position: relative; | |
13 | ||
14 | } | |
15 | .slider.slider-horizontal { | |
16 | width: 100%; | |
17 | height: 20px; | |
18 | margin-bottom: 20px; | |
19 | } | |
20 | .slider.slider-horizontal:last-of-type { | |
21 | margin-bottom: 0; | |
22 | } | |
23 | .slider.slider-horizontal .slider-track { | |
24 | height: 10px; | |
25 | width: 100%; | |
26 | margin-top: -5px; | |
27 | top: 50%; | |
28 | left: 0; | |
29 | } | |
30 | .slider.slider-horizontal .slider-selection, | |
31 | .slider.slider-horizontal .slider-track-low, | |
32 | .slider.slider-horizontal .slider-track-high { | |
33 | height: 100%; | |
34 | top: 0; | |
35 | bottom: 0; | |
36 | } | |
37 | .slider.slider-horizontal .slider-tick, | |
38 | .slider.slider-horizontal .slider-handle { | |
39 | margin-left: -10px; | |
40 | margin-top: -5px; | |
41 | } | |
42 | .slider.slider-horizontal .slider-tick.triangle, | |
43 | .slider.slider-horizontal .slider-handle.triangle { | |
44 | border-width: 0 10px 10px 10px; | |
45 | width: 0; | |
46 | height: 0; | |
47 | border-bottom-color: #0480be; | |
48 | margin-top: 0; | |
49 | } | |
50 | .slider.slider-horizontal .slider-tick-label-container { | |
51 | white-space: nowrap; | |
52 | margin-top: 20px; | |
53 | } | |
54 | .slider.slider-horizontal .slider-tick-label-container .slider-tick-label { | |
55 | padding-top: 4px; | |
56 | display: inline-block; | |
57 | text-align: center; | |
58 | } | |
59 | .slider.slider-vertical { | |
60 | height: 230px; | |
61 | width: 20px; | |
62 | margin-right: 20px; | |
63 | display: inline-block; | |
64 | } | |
65 | .slider.slider-vertical:last-of-type { | |
66 | margin-right: 0; | |
67 | } | |
68 | .slider.slider-vertical .slider-track { | |
69 | width: 10px; | |
70 | height: 100%; | |
71 | margin-left: -5px; | |
72 | left: 50%; | |
73 | top: 0; | |
74 | } | |
75 | .slider.slider-vertical .slider-selection { | |
76 | width: 100%; | |
77 | left: 0; | |
78 | top: 0; | |
79 | bottom: 0; | |
80 | } | |
81 | .slider.slider-vertical .slider-track-low, | |
82 | .slider.slider-vertical .slider-track-high { | |
83 | width: 100%; | |
84 | left: 0; | |
85 | right: 0; | |
86 | } | |
87 | .slider.slider-vertical .slider-tick, | |
88 | .slider.slider-vertical .slider-handle { | |
89 | margin-left: -5px; | |
90 | margin-top: -10px; | |
91 | } | |
92 | .slider.slider-vertical .slider-tick.triangle, | |
93 | .slider.slider-vertical .slider-handle.triangle { | |
94 | border-width: 10px 0 10px 10px; | |
95 | width: 1px; | |
96 | height: 1px; | |
97 | border-left-color: #0480be; | |
98 | margin-left: 0; | |
99 | } | |
100 | .slider.slider-vertical .slider-tick-label-container { | |
101 | white-space: nowrap; | |
102 | } | |
103 | .slider.slider-vertical .slider-tick-label-container .slider-tick-label { | |
104 | padding-left: 4px; | |
105 | } | |
106 | .slider.slider-disabled .slider-handle { | |
107 | background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); | |
108 | background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); | |
109 | background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%); | |
110 | background-repeat: repeat-x; | |
111 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0); | |
112 | } | |
113 | .slider.slider-disabled .slider-track { | |
114 | background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); | |
115 | background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); | |
116 | background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%); | |
117 | background-repeat: repeat-x; | |
118 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0); | |
119 | cursor: not-allowed; | |
120 | } | |
121 | .slider input { | |
122 | display: none; | |
123 | } | |
124 | .slider .tooltip.top { | |
125 | margin-top: -36px; | |
126 | } | |
127 | .slider .tooltip-inner { | |
128 | white-space: nowrap; | |
129 | } | |
130 | .slider .hide { | |
131 | display: none; | |
132 | } | |
133 | .slider-track { | |
134 | position: absolute; | |
135 | cursor: pointer; | |
136 | background-color: #f7f7f7; | |
137 | background-image: -moz-linear-gradient(top, #f0f0f0, #f9f9f9); | |
138 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), to(#f9f9f9)); | |
139 | background-image: -webkit-linear-gradient(top, #f0f0f0, #f9f9f9); | |
140 | background-image: -o-linear-gradient(top, #f0f0f0, #f9f9f9); | |
141 | background-image: linear-gradient(to bottom, #f0f0f0, #f9f9f9); | |
142 | background-repeat: repeat-x; | |
143 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0f0f0', endColorstr='#fff9f9f9', GradientType=0); | |
144 | -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |
145 | -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |
146 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |
147 | -webkit-border-radius: 4px; | |
148 | -moz-border-radius: 4px; | |
149 | border-radius: 4px; | |
150 | } | |
151 | .slider-selection { | |
152 | position: absolute; | |
153 | background-color: #f7f7f7; | |
154 | background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5); | |
155 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5)); | |
156 | background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5); | |
157 | background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5); | |
158 | background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5); | |
159 | background-repeat: repeat-x; | |
160 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); | |
161 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
162 | -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
163 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
164 | -webkit-box-sizing: border-box; | |
165 | -moz-box-sizing: border-box; | |
166 | box-sizing: border-box; | |
167 | -webkit-border-radius: 4px; | |
168 | -moz-border-radius: 4px; | |
169 | border-radius: 4px; | |
170 | } | |
171 | .slider-selection.tick-slider-selection { | |
172 | background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%); | |
173 | background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%); | |
174 | background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%); | |
175 | background-repeat: repeat-x; | |
176 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0); | |
177 | } | |
178 | .slider-track-low, | |
179 | .slider-track-high { | |
180 | position: absolute; | |
181 | background: transparent; | |
182 | -webkit-box-sizing: border-box; | |
183 | -moz-box-sizing: border-box; | |
184 | box-sizing: border-box; | |
185 | border-radius: 4px; | |
186 | } | |
187 | .slider-handle { | |
188 | position: absolute; | |
189 | width: 20px; | |
190 | height: 20px; | |
191 | background-color: #444; | |
192 | -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); | |
193 | -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); | |
194 | box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); | |
195 | opacity: 1; | |
196 | border: 0px solid transparent; | |
197 | } | |
198 | .slider-handle.round { | |
199 | -webkit-border-radius: 20px; | |
200 | -moz-border-radius: 20px; | |
201 | border-radius: 20px; | |
202 | } | |
203 | .slider-handle.triangle { | |
204 | background: transparent none; | |
205 | } | |
206 | .slider-handle.custom { | |
207 | background: transparent none; | |
208 | } | |
209 | .slider-handle.custom::before { | |
210 | line-height: 20px; | |
211 | font-size: 20px; | |
212 | content: '\2605'; | |
213 | color: #726204; | |
214 | } | |
215 | .slider-tick { | |
216 | position: absolute; | |
217 | width: 20px; | |
218 | height: 20px; | |
219 | background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); | |
220 | background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); | |
221 | background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); | |
222 | background-repeat: repeat-x; | |
223 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); | |
224 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
225 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
226 | -webkit-box-sizing: border-box; | |
227 | -moz-box-sizing: border-box; | |
228 | box-sizing: border-box; | |
229 | filter: none; | |
230 | opacity: 0.8; | |
231 | border: 0px solid transparent; | |
232 | } | |
233 | .slider-tick.round { | |
234 | border-radius: 50%; | |
235 | } | |
236 | .slider-tick.triangle { | |
237 | background: transparent none; | |
238 | } | |
239 | .slider-tick.custom { | |
240 | background: transparent none; | |
241 | } | |
242 | .slider-tick.custom::before { | |
243 | line-height: 20px; | |
244 | font-size: 20px; | |
245 | content: '\2605'; | |
246 | color: #726204; | |
247 | } | |
248 | .slider-tick.in-selection { | |
249 | background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%); | |
250 | background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%); | |
251 | background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%); | |
252 | background-repeat: repeat-x; | |
253 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0); | |
254 | opacity: 1; | |
255 | } | |
256 | .slider-disabled .slider-selection { | |
257 | opacity: 0.5; | |
258 | } | |
259 | ||
260 | #red .slider-selection { | |
261 | background: #f56954; | |
262 | } | |
263 | ||
264 | #blue .slider-selection { | |
265 | background: #3c8dbc; | |
266 | } | |
267 | ||
268 | #green .slider-selection { | |
269 | background: #00a65a; | |
270 | } | |
271 | ||
272 | #yellow .slider-selection { | |
273 | background: #f39c12; | |
274 | } | |
275 | ||
276 | #aqua .slider-selection { | |
277 | background: #00c0ef; | |
278 | } | |
279 | ||
280 | #purple .slider-selection { | |
281 | background: #932ab6; | |
282 | } |