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