1 | @prefix-cls: rc-picker;
|
2 |
|
3 | @background-color: rgb(255, 240, 255);
|
4 |
|
5 | @input-placeholder-color: hsv(0, 0, 75%);
|
6 |
|
7 | @time-panel-padding-total: 180px;
|
8 |
|
9 | @time-panel-padding-top: 0;
|
10 |
|
11 | .placeholder(@color: @input-placeholder-color) {
|
12 |
|
13 | &::-moz-placeholder {
|
14 | opacity: 1;
|
15 | }
|
16 |
|
17 | &::placeholder {
|
18 | color: @color;
|
19 | }
|
20 |
|
21 | &:placeholder-shown {
|
22 | text-overflow: ellipsis;
|
23 | }
|
24 | }
|
25 |
|
26 | .@{prefix-cls} {
|
27 | position: relative;
|
28 | display: inline-flex;
|
29 |
|
30 | &-rtl {
|
31 | direction: rtl;
|
32 | }
|
33 |
|
34 | &-focused {
|
35 | border: 1px solid blue;
|
36 | }
|
37 | &-invalid {
|
38 | box-shadow: 0 0 2px red;
|
39 | }
|
40 | &-panel {
|
41 | display: inline-block;
|
42 | vertical-align: top;
|
43 | background: @background-color;
|
44 | border: 1px solid #666;
|
45 |
|
46 | &-focused {
|
47 | border-color: blue;
|
48 | }
|
49 |
|
50 | &-rtl {
|
51 | direction: rtl;
|
52 | }
|
53 | }
|
54 |
|
55 |
|
56 | &-decade-panel,
|
57 | &-year-panel,
|
58 | &-month-panel,
|
59 | &-week-panel,
|
60 | &-date-panel,
|
61 | &-time-panel {
|
62 | display: flex;
|
63 | flex-direction: column;
|
64 |
|
65 | table {
|
66 | text-align: center;
|
67 | border-collapse: collapse;
|
68 | }
|
69 | }
|
70 |
|
71 |
|
72 | &-header {
|
73 | display: flex;
|
74 |
|
75 | > * {
|
76 | flex: none;
|
77 | }
|
78 |
|
79 | &-view {
|
80 | flex: auto;
|
81 | text-align: center;
|
82 |
|
83 | > button {
|
84 | padding: 0;
|
85 | border: 0;
|
86 | }
|
87 | }
|
88 | }
|
89 |
|
90 |
|
91 | &-cell {
|
92 | color: #aaa;
|
93 |
|
94 | &-disabled {
|
95 | opacity: 0.2;
|
96 | }
|
97 |
|
98 | &-inner {
|
99 | display: inline-block;
|
100 | box-sizing: border-box;
|
101 | width: 100%;
|
102 | height: 20px;
|
103 | margin: 0;
|
104 | padding: 0;
|
105 | font-size: 12px;
|
106 | line-height: 20px;
|
107 | background: transparent;
|
108 | border: 0;
|
109 | border: none;
|
110 | outline: none;
|
111 | cursor: pointer;
|
112 | transition: background 0.3s, border 0.3s;
|
113 |
|
114 | &:hover {
|
115 | background: fade(blue, 30%);
|
116 | }
|
117 | }
|
118 |
|
119 | &-in-view {
|
120 | color: #333;
|
121 | }
|
122 |
|
123 | &-in-range > &-inner {
|
124 | background: fade(blue, 5%);
|
125 | }
|
126 |
|
127 | &-hover > &-inner {
|
128 | background: orange;
|
129 | }
|
130 |
|
131 | &-range-hover-start,
|
132 | &-range-hover-end,
|
133 | &-range-hover {
|
134 | position: relative;
|
135 | &::after {
|
136 | position: absolute;
|
137 | top: 3px;
|
138 | right: 0;
|
139 | bottom: 0;
|
140 | left: 0;
|
141 | border: 1px solid green;
|
142 | border-right: 0;
|
143 | border-left: 0;
|
144 | content: '';
|
145 | pointer-events: none;
|
146 | }
|
147 | }
|
148 |
|
149 | &-range-hover-start::after {
|
150 | border-left: 1px solid green !important;
|
151 | }
|
152 | &-range-hover-end::after {
|
153 | border-right: 1px solid green !important;
|
154 | }
|
155 |
|
156 | &-today > &-inner {
|
157 | border: 1px solid blue;
|
158 | }
|
159 | &-range-start > &-inner,
|
160 | &-range-end > &-inner,
|
161 | &-selected > &-inner {
|
162 | background: fade(blue, 20%);
|
163 | }
|
164 | }
|
165 |
|
166 |
|
167 | &-presets {
|
168 | background: #ccccff;
|
169 |
|
170 | ul {
|
171 | margin: 0;
|
172 | padding: 0;
|
173 | list-style: none;
|
174 | }
|
175 | }
|
176 |
|
177 | &-footer,
|
178 | &-picker-footer {
|
179 | background: green;
|
180 | }
|
181 |
|
182 | &-ranges {
|
183 | margin: 0;
|
184 | padding: 0;
|
185 | overflow: hidden;
|
186 | list-style: none;
|
187 |
|
188 | > li {
|
189 | display: inline-block;
|
190 | }
|
191 | }
|
192 |
|
193 | &-ok {
|
194 | float: right;
|
195 | }
|
196 |
|
197 |
|
198 | &-year-panel,
|
199 | &-month-panel {
|
200 | .@{prefix-cls}-cell-inner {
|
201 | width: 80px;
|
202 | }
|
203 | }
|
204 |
|
205 |
|
206 | &-week-panel {
|
207 | &-row {
|
208 | &:hover {
|
209 | .@{prefix-cls}-cell {
|
210 | background: red;
|
211 | }
|
212 | }
|
213 |
|
214 | &-selected {
|
215 | .@{prefix-cls}-cell {
|
216 | background: rgba(0, 0, 255, 0.3);
|
217 | }
|
218 | }
|
219 |
|
220 | &-range {
|
221 | &-hover {
|
222 | .@{prefix-cls}-cell {
|
223 | background: rgba(0, 255, 0, 0.1);
|
224 | }
|
225 | }
|
226 |
|
227 | &-start,
|
228 | &-end {
|
229 | .@{prefix-cls}-cell {
|
230 | background: rgba(0, 255, 0, 0.3);
|
231 | }
|
232 | }
|
233 | }
|
234 | }
|
235 |
|
236 | .@{prefix-cls}-cell,
|
237 | .@{prefix-cls}-cell-inner {
|
238 | width: 20px;
|
239 | }
|
240 |
|
241 | .@{prefix-cls}-cell-week {
|
242 | color: #999;
|
243 | font-weight: bold;
|
244 | font-size: 12px;
|
245 | }
|
246 |
|
247 | .@{prefix-cls}-cell:hover > .@{prefix-cls}-cell-inner,
|
248 | .@{prefix-cls}-cell-selected > .@{prefix-cls}-cell-inner {
|
249 | background: transparent;
|
250 | }
|
251 | }
|
252 |
|
253 |
|
254 | &-date-panel {
|
255 | .@{prefix-cls}-cell-inner {
|
256 | width: 20px;
|
257 | }
|
258 | }
|
259 |
|
260 |
|
261 | &-time-panel {
|
262 | width: auto;
|
263 |
|
264 | .@{prefix-cls}-content {
|
265 | position: relative;
|
266 | display: flex;
|
267 | max-height: 200px;
|
268 |
|
269 |
|
270 |
|
271 |
|
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 |
|
278 |
|
279 | }
|
280 |
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 |
|
287 | &-column-title {
|
288 | font-size: 14px;
|
289 | line-height: 20px;
|
290 | }
|
291 |
|
292 | &-column {
|
293 | flex: auto;
|
294 | width: 50px;
|
295 | margin: 0;
|
296 |
|
297 | padding: @time-panel-padding-top 0 (@time-panel-padding-total - @time-panel-padding-top);
|
298 | overflow-x: hidden;
|
299 | overflow-y: hidden;
|
300 | font-size: 12px;
|
301 | text-align: left;
|
302 | list-style: none;
|
303 | transition: background 0.3s;
|
304 |
|
305 | &-active {
|
306 | background: rgba(0, 0, 255, 0.1);
|
307 | }
|
308 |
|
309 | &:hover {
|
310 | overflow-y: auto;
|
311 | }
|
312 |
|
313 | > li {
|
314 | width: 50px;
|
315 | margin: 0;
|
316 | padding: 0;
|
317 | cursor: pointer;
|
318 |
|
319 | &.@{prefix-cls}-time-panel-cell {
|
320 | &-disabled {
|
321 | opacity: 0.5;
|
322 | }
|
323 |
|
324 | &-selected {
|
325 | background: rgba(0, 0, 255, 0.5);
|
326 | }
|
327 | }
|
328 |
|
329 | .@{prefix-cls}-time-panel-cell-inner {
|
330 | display: block;
|
331 | width: 100%;
|
332 | height: 20px;
|
333 | margin: 0;
|
334 |
|
335 | color: #333;
|
336 | line-height: 20px;
|
337 | text-align: center;
|
338 |
|
339 | .@{prefix-cls}-panel-rtl & {
|
340 | padding: 0 12px 0 0;
|
341 | text-align: right;
|
342 | }
|
343 | }
|
344 | }
|
345 | }
|
346 | }
|
347 |
|
348 |
|
349 | &-datetime-panel {
|
350 | display: flex;
|
351 |
|
352 | .@{prefix-cls}-time-panel {
|
353 | border-left: 1px solid #999;
|
354 | }
|
355 |
|
356 | .@{prefix-cls}-date-panel,
|
357 | .@{prefix-cls}-time-panel {
|
358 | transition: opacity 0.3s;
|
359 | }
|
360 |
|
361 |
|
362 | &-active {
|
363 | .@{prefix-cls}-date-panel,
|
364 | .@{prefix-cls}-time-panel {
|
365 | opacity: 0.3;
|
366 |
|
367 | &-active {
|
368 | opacity: 1;
|
369 | }
|
370 | }
|
371 | }
|
372 | }
|
373 |
|
374 |
|
375 | &-input {
|
376 | position: relative;
|
377 | display: inline-flex;
|
378 | width: 100%;
|
379 |
|
380 | .@{prefix-cls}-rtl & {
|
381 | text-align: right;
|
382 | }
|
383 |
|
384 | &-active {
|
385 | > input {
|
386 | background: rgba(0, 0, 255, 0.05);
|
387 | }
|
388 | }
|
389 |
|
390 | > input {
|
391 | width: 100%;
|
392 | .placeholder();
|
393 | }
|
394 |
|
395 | &-placeholder {
|
396 | > input {
|
397 | color: @input-placeholder-color;
|
398 | }
|
399 | }
|
400 | }
|
401 |
|
402 | &-clear {
|
403 | position: absolute;
|
404 | top: 0;
|
405 | right: 4px;
|
406 | cursor: pointer;
|
407 |
|
408 | .@{prefix-cls}-rtl & {
|
409 | right: auto;
|
410 | left: 4px;
|
411 | }
|
412 |
|
413 | &-btn::after {
|
414 | content: '×';
|
415 | }
|
416 | }
|
417 |
|
418 |
|
419 | &-dropdown {
|
420 | position: absolute;
|
421 | box-shadow: 0 0 1px red;
|
422 | pointer-events: none;
|
423 |
|
424 | &-range {
|
425 | padding: 10px 0;
|
426 | }
|
427 |
|
428 | &-hidden {
|
429 | display: none;
|
430 | }
|
431 |
|
432 |
|
433 | @arrow-size: 10px;
|
434 |
|
435 | &-placement-topLeft,
|
436 | &-placement-topRight {
|
437 | .@{prefix-cls}-range-arrow {
|
438 | bottom: @arrow-size / 2 + 1px;
|
439 | transform: rotate(135deg);
|
440 | }
|
441 | }
|
442 | &-placement-bottomLeft,
|
443 | &-placement-bottomright {
|
444 | .@{prefix-cls}-range-arrow {
|
445 | top: (@arrow-size / 2 + 1px);
|
446 | transform: rotate(-45deg);
|
447 | }
|
448 | }
|
449 |
|
450 | .@{prefix-cls}-range-arrow {
|
451 | position: absolute;
|
452 | left: @arrow-size;
|
453 | z-index: 1;
|
454 | width: @arrow-size;
|
455 | height: @arrow-size;
|
456 | margin-left: 10px;
|
457 | transition: all 0.3s;
|
458 |
|
459 | .@{prefix-cls}-dropdown-rtl& {
|
460 | right: @arrow-size;
|
461 | left: auto;
|
462 | margin-right: 10px;
|
463 | margin-left: 0;
|
464 | }
|
465 |
|
466 | &::before,
|
467 | &::after {
|
468 | position: absolute;
|
469 | top: 50%;
|
470 | left: 50%;
|
471 | box-sizing: border-box;
|
472 | transform: translate(-50%, -50%);
|
473 | content: '';
|
474 |
|
475 | .@{prefix-cls}-dropdown-rtl& {
|
476 | right: 50%;
|
477 | left: auto;
|
478 | transform: translate(50%, -50%);
|
479 | }
|
480 | }
|
481 |
|
482 | &::before {
|
483 | width: @arrow-size;
|
484 | height: @arrow-size;
|
485 | border: (@arrow-size / 2) solid blue;
|
486 | border-color: blue blue transparent transparent;
|
487 | }
|
488 | &::after {
|
489 | width: @arrow-size - 2px;
|
490 | height: @arrow-size - 2px;
|
491 | border: (@arrow-size - 2px) / 2 solid blue;
|
492 | border-color: @background-color @background-color transparent transparent;
|
493 | }
|
494 | }
|
495 | }
|
496 |
|
497 |
|
498 |
|
499 |
|
500 | &-range {
|
501 | position: relative;
|
502 | display: inline-flex;
|
503 |
|
504 | &-wrapper {
|
505 | display: flex;
|
506 | }
|
507 |
|
508 | .@{prefix-cls}-active-bar {
|
509 | bottom: 0;
|
510 | height: 3px;
|
511 | background: green;
|
512 | opacity: 0;
|
513 | transition: all 0.3s;
|
514 | pointer-events: none;
|
515 | }
|
516 |
|
517 | &.@{prefix-cls}-focused {
|
518 | .@{prefix-cls}-active-bar {
|
519 | opacity: 1;
|
520 | }
|
521 | }
|
522 | }
|
523 |
|
524 | &-panel-container {
|
525 | display: inline-block;
|
526 | vertical-align: top;
|
527 | transition: margin 0.3s;
|
528 | pointer-events: all;
|
529 | }
|
530 |
|
531 | &-panel-layout {
|
532 | display: flex;
|
533 | flex-wrap: nowrap;
|
534 | align-items: stretch;
|
535 | }
|
536 |
|
537 |
|
538 |
|
539 |
|
540 | &-selector {
|
541 | width: 100%;
|
542 | }
|
543 |
|
544 | &-selection-overflow {
|
545 | display: flex;
|
546 | flex-wrap: wrap;
|
547 | box-sizing: border-box;
|
548 | width: 100%;
|
549 | border: 1px solid green;
|
550 |
|
551 | &-item {
|
552 | flex: none;
|
553 | max-width: 100%;
|
554 | }
|
555 | }
|
556 |
|
557 | &-selection-item {
|
558 | border: 1px solid blue;
|
559 | }
|
560 |
|
561 | &-multiple-input {
|
562 | width: 10px;
|
563 | opacity: 0.1;
|
564 | }
|
565 | }
|