1 | .rc-slider {
|
2 | position: relative;
|
3 | width: 100%;
|
4 | height: 14px;
|
5 | padding: 5px 0;
|
6 | border-radius: 6px;
|
7 | touch-action: none;
|
8 | box-sizing: border-box;
|
9 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
10 | }
|
11 | .rc-slider * {
|
12 | box-sizing: border-box;
|
13 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
14 | }
|
15 | .rc-slider-rail {
|
16 | position: absolute;
|
17 | width: 100%;
|
18 | height: 4px;
|
19 | background-color: #e9e9e9;
|
20 | border-radius: 6px;
|
21 | }
|
22 | .rc-slider-track {
|
23 | position: absolute;
|
24 | height: 4px;
|
25 | background-color: #abe2fb;
|
26 | border-radius: 6px;
|
27 | }
|
28 | .rc-slider-track-draggable {
|
29 | z-index: 1;
|
30 | box-sizing: content-box;
|
31 | background-clip: content-box;
|
32 | border-top: 5px solid rgba(0, 0, 0, 0);
|
33 | border-bottom: 5px solid rgba(0, 0, 0, 0);
|
34 | transform: translateY(-5px);
|
35 | }
|
36 | .rc-slider-handle {
|
37 | position: absolute;
|
38 | z-index: 1;
|
39 | width: 14px;
|
40 | height: 14px;
|
41 | margin-top: -5px;
|
42 | background-color: #fff;
|
43 | border: solid 2px #96dbfa;
|
44 | border-radius: 50%;
|
45 | cursor: pointer;
|
46 | cursor: -webkit-grab;
|
47 | cursor: grab;
|
48 | opacity: 0.8;
|
49 | touch-action: pan-x;
|
50 | }
|
51 | .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
|
52 | border-color: #57c5f7;
|
53 | box-shadow: 0 0 0 5px #96dbfa;
|
54 | }
|
55 | .rc-slider-handle:focus {
|
56 | outline: none;
|
57 | box-shadow: none;
|
58 | }
|
59 | .rc-slider-handle:focus-visible {
|
60 | border-color: #2db7f5;
|
61 | box-shadow: 0 0 0 3px #96dbfa;
|
62 | }
|
63 | .rc-slider-handle-click-focused:focus {
|
64 | border-color: #96dbfa;
|
65 | box-shadow: unset;
|
66 | }
|
67 | .rc-slider-handle:hover {
|
68 | border-color: #57c5f7;
|
69 | }
|
70 | .rc-slider-handle:active {
|
71 | border-color: #57c5f7;
|
72 | box-shadow: 0 0 5px #57c5f7;
|
73 | cursor: -webkit-grabbing;
|
74 | cursor: grabbing;
|
75 | }
|
76 | .rc-slider-mark {
|
77 | position: absolute;
|
78 | top: 18px;
|
79 | left: 0;
|
80 | width: 100%;
|
81 | font-size: 12px;
|
82 | }
|
83 | .rc-slider-mark-text {
|
84 | position: absolute;
|
85 | display: inline-block;
|
86 | color: #999;
|
87 | text-align: center;
|
88 | vertical-align: middle;
|
89 | cursor: pointer;
|
90 | }
|
91 | .rc-slider-mark-text-active {
|
92 | color: #666;
|
93 | }
|
94 | .rc-slider-step {
|
95 | position: absolute;
|
96 | width: 100%;
|
97 | height: 4px;
|
98 | background: transparent;
|
99 | }
|
100 | .rc-slider-dot {
|
101 | position: absolute;
|
102 | bottom: -2px;
|
103 | width: 8px;
|
104 | height: 8px;
|
105 | vertical-align: middle;
|
106 | background-color: #fff;
|
107 | border: 2px solid #e9e9e9;
|
108 | border-radius: 50%;
|
109 | cursor: pointer;
|
110 | }
|
111 | .rc-slider-dot-active {
|
112 | border-color: #96dbfa;
|
113 | }
|
114 | .rc-slider-dot-reverse {
|
115 | margin-right: -4px;
|
116 | }
|
117 | .rc-slider-disabled {
|
118 | background-color: #e9e9e9;
|
119 | }
|
120 | .rc-slider-disabled .rc-slider-track {
|
121 | background-color: #ccc;
|
122 | }
|
123 | .rc-slider-disabled .rc-slider-handle,
|
124 | .rc-slider-disabled .rc-slider-dot {
|
125 | background-color: #fff;
|
126 | border-color: #ccc;
|
127 | box-shadow: none;
|
128 | cursor: not-allowed;
|
129 | }
|
130 | .rc-slider-disabled .rc-slider-mark-text,
|
131 | .rc-slider-disabled .rc-slider-dot {
|
132 | cursor: not-allowed !important;
|
133 | }
|
134 | .rc-slider-vertical {
|
135 | width: 14px;
|
136 | height: 100%;
|
137 | padding: 0 5px;
|
138 | }
|
139 | .rc-slider-vertical .rc-slider-rail {
|
140 | width: 4px;
|
141 | height: 100%;
|
142 | }
|
143 | .rc-slider-vertical .rc-slider-track {
|
144 | bottom: 0;
|
145 | left: 5px;
|
146 | width: 4px;
|
147 | }
|
148 | .rc-slider-vertical .rc-slider-track-draggable {
|
149 | border-top: 0;
|
150 | border-bottom: 0;
|
151 | border-right: 5px solid rgba(0, 0, 0, 0);
|
152 | border-left: 5px solid rgba(0, 0, 0, 0);
|
153 | transform: translateX(-5px);
|
154 | }
|
155 | .rc-slider-vertical .rc-slider-handle {
|
156 | position: absolute;
|
157 | z-index: 1;
|
158 | margin-top: 0;
|
159 | margin-left: -5px;
|
160 | touch-action: pan-y;
|
161 | }
|
162 | .rc-slider-vertical .rc-slider-mark {
|
163 | top: 0;
|
164 | left: 18px;
|
165 | height: 100%;
|
166 | }
|
167 | .rc-slider-vertical .rc-slider-step {
|
168 | width: 4px;
|
169 | height: 100%;
|
170 | }
|
171 | .rc-slider-vertical .rc-slider-dot {
|
172 | margin-left: -2px;
|
173 | }
|
174 | .rc-slider-tooltip-zoom-down-enter,
|
175 | .rc-slider-tooltip-zoom-down-appear {
|
176 | display: block !important;
|
177 | animation-duration: 0.3s;
|
178 | animation-fill-mode: both;
|
179 | animation-play-state: paused;
|
180 | }
|
181 | .rc-slider-tooltip-zoom-down-leave {
|
182 | display: block !important;
|
183 | animation-duration: 0.3s;
|
184 | animation-fill-mode: both;
|
185 | animation-play-state: paused;
|
186 | }
|
187 | .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
|
188 | .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
|
189 | animation-name: rcSliderTooltipZoomDownIn;
|
190 | animation-play-state: running;
|
191 | }
|
192 | .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
|
193 | animation-name: rcSliderTooltipZoomDownOut;
|
194 | animation-play-state: running;
|
195 | }
|
196 | .rc-slider-tooltip-zoom-down-enter,
|
197 | .rc-slider-tooltip-zoom-down-appear {
|
198 | transform: scale(0, 0);
|
199 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
200 | }
|
201 | .rc-slider-tooltip-zoom-down-leave {
|
202 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
203 | }
|
204 | @keyframes rcSliderTooltipZoomDownIn {
|
205 | 0% {
|
206 | transform: scale(0, 0);
|
207 | transform-origin: 50% 100%;
|
208 | opacity: 0;
|
209 | }
|
210 | 100% {
|
211 | transform: scale(1, 1);
|
212 | transform-origin: 50% 100%;
|
213 | }
|
214 | }
|
215 | @keyframes rcSliderTooltipZoomDownOut {
|
216 | 0% {
|
217 | transform: scale(1, 1);
|
218 | transform-origin: 50% 100%;
|
219 | }
|
220 | 100% {
|
221 | transform: scale(0, 0);
|
222 | transform-origin: 50% 100%;
|
223 | opacity: 0;
|
224 | }
|
225 | }
|
226 | .rc-slider-tooltip {
|
227 | position: absolute;
|
228 | top: -9999px;
|
229 | left: -9999px;
|
230 | visibility: visible;
|
231 | box-sizing: border-box;
|
232 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
233 | }
|
234 | .rc-slider-tooltip * {
|
235 | box-sizing: border-box;
|
236 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
237 | }
|
238 | .rc-slider-tooltip-hidden {
|
239 | display: none;
|
240 | }
|
241 | .rc-slider-tooltip-placement-top {
|
242 | padding: 4px 0 8px 0;
|
243 | }
|
244 | .rc-slider-tooltip-inner {
|
245 | min-width: 24px;
|
246 | height: 24px;
|
247 | padding: 6px 2px;
|
248 | color: #fff;
|
249 | font-size: 12px;
|
250 | line-height: 1;
|
251 | text-align: center;
|
252 | text-decoration: none;
|
253 | background-color: #6c6c6c;
|
254 | border-radius: 6px;
|
255 | box-shadow: 0 0 4px #d9d9d9;
|
256 | }
|
257 | .rc-slider-tooltip-arrow {
|
258 | position: absolute;
|
259 | width: 0;
|
260 | height: 0;
|
261 | border-color: transparent;
|
262 | border-style: solid;
|
263 | }
|
264 | .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
|
265 | bottom: 4px;
|
266 | left: 50%;
|
267 | margin-left: -4px;
|
268 | border-width: 4px 4px 0;
|
269 | border-top-color: #6c6c6c;
|
270 | }
|