@blueking/date-picker 0.0.21 → 0.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/vue2-full.css +1 -2491
  2. package/dist/vue2-full.js +454 -0
  3. package/dist/vue2-light.css +1 -2491
  4. package/dist/vue2-light.js +454 -0
  5. package/dist/vue3-full.css +1 -2491
  6. package/dist/vue3-full.js +454 -0
  7. package/dist/vue3-light.css +1 -619
  8. package/dist/vue3-light.js +1 -0
  9. package/package.json +17 -7
  10. package/dist/vue2-full.es.js +0 -56657
  11. package/dist/vue2-light.es.js +0 -56053
  12. package/dist/vue3-full.es.js +0 -48012
  13. package/dist/vue3-light.es.js +0 -3102
package/dist/vue3-light.css CHANGED
@@ -1,619 +1 @@
1
- .common-panel-tab .scoped-tab-header,
2
- .common-panel-tab .bk-tab-header {
3
- /* stylelint-disable-next-line declaration-no-important */
4
- line-height: 20px !important;
5
- /* stylelint-disable-next-line declaration-no-important */
6
- border-bottom: 0 !important;
7
- }
8
- .common-panel-tab .scoped-tab-header .scoped-tab-header-item,
9
- .common-panel-tab .scoped-tab-header .bk-tab-header-item,
10
- .common-panel-tab .bk-tab-header .scoped-tab-header-item,
11
- .common-panel-tab .bk-tab-header .bk-tab-header-item {
12
- padding: 0;
13
- padding-bottom: 4px;
14
- margin-right: 28px;
15
- }
16
- .common-panel-tab .scoped-tab-header--active,
17
- .common-panel-tab .bk-tab-header--active {
18
- font-weight: 700;
19
- color: #63656e;
20
- }
21
- .common-panel-tab .scoped-tab-content,
22
- .common-panel-tab .bk-tab-content {
23
- display: none;
24
- width: 0;
25
- height: 0;
26
- }.common-submit {
27
- flex: 0 0 64px;
28
- width: 64px;
29
- margin-left: 8px;
30
- }
31
- .common-favorite {
32
- display: flex;
33
- flex: 0 0 32px;
34
- align-items: center;
35
- justify-content: center;
36
- width: 32px;
37
- height: 32px;
38
- margin-left: 8px;
39
- cursor: pointer;
40
- background: #f5f7fa;
41
- border-radius: 2px;
42
- }
43
- .common-favorite:hover svg path {
44
- fill: #3a84ff;
45
- }/* stylelint-disable declaration-no-important */
46
- .date-panel {
47
- display: flex;
48
- flex-direction: column;
49
- width: 220px;
50
- user-select: none;
51
- background: #fff;
52
- border: 1px solid #dcdee5;
53
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1019607843);
54
- }
55
- .date-panel-title {
56
- display: flex;
57
- flex: 0 0 40px;
58
- align-items: center;
59
- height: 40px;
60
- padding: 0 12px;
61
- color: #63656e;
62
- border-bottom: 1px solid #dcdee5;
63
- }
64
- .date-panel-title .title-check {
65
- margin-left: auto;
66
- }
67
- .date-panel-main {
68
- display: flex;
69
- flex: 1;
70
- flex-direction: column;
71
- padding: 8px 0 12px 0;
72
- }
73
- .date-panel-main .date-header {
74
- display: flex;
75
- align-items: center;
76
- width: 100%;
77
- height: 24px;
78
- }
79
- .date-panel-main .date-header-center {
80
- display: flex;
81
- flex: 1;
82
- align-items: center;
83
- justify-content: center;
84
- height: 100%;
85
- font-size: 14px;
86
- font-weight: 700;
87
- }
88
- .date-panel-main .date-header-center .date-split {
89
- width: 5px;
90
- height: 2px;
91
- margin: 0 10px;
92
- background-color: #63656e;
93
- }
94
- .date-panel-main .date-header-right, .date-panel-main .date-header-left {
95
- display: flex;
96
- align-items: center;
97
- height: 100%;
98
- padding: 0 6px;
99
- font-size: 16px;
100
- }
101
- .date-panel-main .date-header-right .hand-icon, .date-panel-main .date-header-left .hand-icon {
102
- display: flex;
103
- align-items: center;
104
- justify-content: center;
105
- font-size: 16px;
106
- font-weight: bold;
107
- color: #979ba5;
108
- }
109
- .date-panel-main .date-header-right .hand-icon svg, .date-panel-main .date-header-left .hand-icon svg {
110
- width: 20px !important;
111
- height: 20px !important;
112
- font-weight: bold;
113
- }
114
- .date-panel-main .date-header-right .hand-icon:hover, .date-panel-main .date-header-left .hand-icon:hover {
115
- color: #3a84ff;
116
- cursor: pointer;
117
- }
118
- .date-panel-main .date-header-right .hand-icon:hover svg, .date-panel-main .date-header-left .hand-icon:hover svg {
119
- fill: #3a84ff;
120
- }
121
- .date-panel-main .date-header-right {
122
- margin-left: auto;
123
- }
124
- .date-panel-main .date-content {
125
- display: flex;
126
- flex-direction: column;
127
- }
128
- .date-panel-main .date-content .date-grid {
129
- display: flex;
130
- align-items: center;
131
- width: 100%;
132
- padding: 0 12px;
133
- margin: 0;
134
- }
135
- .date-panel-main .date-content .date-grid-item {
136
- display: flex;
137
- flex: 0 0 14.285%;
138
- align-items: center;
139
- justify-content: center;
140
- width: 14.285%;
141
- min-width: 28px;
142
- height: 24px;
143
- }
144
- .date-panel-main .date-content .date-grid-item:not(.not-click):hover {
145
- cursor: pointer;
146
- background-color: #f0f1f5;
147
- }
148
- .date-panel-main .date-content .date-grid-item.is-today {
149
- color: #3a84ff;
150
- border: 1px solid #a3c5fd;
151
- border-radius: 2px;
152
- }
153
- .date-panel-main .date-content .date-grid-item.is-last-month {
154
- color: #c4c6cc;
155
- background-color: #f0f1f5;
156
- }
157
- .date-panel-main .date-content .date-grid-item.is-next-month {
158
- color: #c4c6cc;
159
- }
160
- .date-panel-main .date-content .date-grid-item.is-disabled {
161
- color: #c4c6cc !important;
162
- cursor: not-allowed !important;
163
- background-color: #f0f1f5 !important;
164
- }
165
- .date-panel-main .date-content .date-grid-item.is-selected {
166
- color: #fff !important;
167
- background-color: #3a84ff !important;
168
- border-radius: 2px;
169
- }/* stylelint-disable declaration-no-important */
170
- .date-wrapper {
171
- display: flex;
172
- flex-direction: column;
173
- }
174
- .date-wrapper .date-input {
175
- display: flex;
176
- align-items: center;
177
- width: 100%;
178
- min-height: 56px;
179
- }
180
- .date-wrapper .date-input .date-picker {
181
- display: flex;
182
- align-items: center;
183
- width: 100%;
184
- min-width: 360px;
185
- height: 32px;
186
- background: #fff;
187
- border: 1px solid #c4c6cc;
188
- border-radius: 2px;
189
- }
190
- .date-wrapper .date-input .date-picker-icon {
191
- display: flex;
192
- align-items: center;
193
- justify-content: center;
194
- margin-right: 6px;
195
- margin-left: 8px;
196
- }
197
- .date-wrapper .date-input .date-picker-start, .date-wrapper .date-input .date-picker-end {
198
- width: 160px;
199
- height: 24px;
200
- padding: 0 4px;
201
- font-size: 12px;
202
- color: #63656e;
203
- border: none;
204
- border-radius: 2px;
205
- }
206
- .date-wrapper .date-input .date-picker-start:focus, .date-wrapper .date-input .date-picker-end:focus {
207
- background: #e1ecff;
208
- border: none;
209
- outline: none;
210
- box-shadow: none;
211
- }
212
- .date-wrapper .date-input .date-picker-split {
213
- display: flex;
214
- align-items: center;
215
- justify-content: center;
216
- padding: 0 8px;
217
- color: #979ba5;
218
- }
219
- .date-wrapper .date-input .date-picker-clear {
220
- display: none !important;
221
- flex: 0 0 32px;
222
- align-items: center;
223
- justify-content: center;
224
- width: 32px;
225
- height: 32px;
226
- font-size: 14px;
227
- color: #c4c6cc;
228
- }
229
- .date-wrapper .date-input .date-picker-clear:hover {
230
- color: #63656e;
231
- cursor: pointer;
232
- }
233
- .date-wrapper .date-input .date-picker:hover .date-picker-clear {
234
- display: flex !important;
235
- }
236
- .date-wrapper .show-format {
237
- display: flex;
238
- align-items: center;
239
- width: 100%;
240
- min-width: 100%;
241
- margin-top: -8px;
242
- margin-bottom: 12px;
243
- color: #979ba5;
244
- }
245
- .date-wrapper .show-format .format-button {
246
- margin-left: 8px;
247
- }
248
- .date-format-wrapper {
249
- display: flex;
250
- flex-direction: column;
251
- width: 520px;
252
- padding: 12px 15px;
253
- margin: -7px -14px;
254
- }
255
- .date-format-wrapper .content-title {
256
- margin-bottom: 12px;
257
- font-weight: bold;
258
- line-height: 20px;
259
- }
260
- .date-format-wrapper .content-table {
261
- display: flex;
262
- flex-direction: column;
263
- width: 100%;
264
- border-collapse: collapse;
265
- background-color: #fff;
266
- border: 1px solid #eaeefb;
267
- border-top: 0;
268
- border-left: 0;
269
- }
270
- .date-format-wrapper .content-table th,
271
- .date-format-wrapper .content-table td {
272
- height: 42px;
273
- padding: 8px 16px;
274
- color: #63656e;
275
- text-align: left;
276
- border: 1px solid #eaeefb;
277
- border-right: 0;
278
- border-bottom: 0;
279
- }
280
- .date-format-wrapper .content-table thead,
281
- .date-format-wrapper .content-table tr {
282
- display: flex;
283
- align-items: center;
284
- width: 100%;
285
- }
286
- .date-format-wrapper .content-table thead th,
287
- .date-format-wrapper .content-table tr th {
288
- flex: 1;
289
- background-color: #fafbfd;
290
- }
291
- .date-format-wrapper .content-table tbody {
292
- display: block;
293
- width: 100%;
294
- max-height: 300px;
295
- overflow: auto;
296
- }
297
- .date-format-wrapper .content-table tbody td {
298
- display: flex;
299
- flex: 1;
300
- align-items: center;
301
- }.natural-picker {
302
- display: flex;
303
- align-items: center;
304
- min-height: 56px;
305
- }
306
- .natural-picker .natural-unit {
307
- width: 118px;
308
- margin-left: 8px;
309
- }.recent-picker {
310
- display: flex;
311
- align-items: center;
312
- min-height: 56px;
313
- }
314
- .recent-picker .recent-unit {
315
- width: 164px;
316
- }
317
- .recent-picker .recent-unit .scoped-input,
318
- .recent-picker .recent-unit .bk-input {
319
- height: 30px;
320
- border: none;
321
- border-left: 1px solid #c4c6cc;
322
- border-radius: 0;
323
- }
324
- .recent-picker .recent-unit .scoped-input--text,
325
- .recent-picker .recent-unit .bk-input--text {
326
- border-radius: 0;
327
- }.timezone-picker {
328
- width: 100%;
329
- }
330
- .timezone-picker-option {
331
- display: flex;
332
- align-items: center;
333
- width: 100%;
334
- color: #63656e;
335
- }
336
- .timezone-picker-option .option-name {
337
- flex: 1;
338
- }
339
- .timezone-picker-option .option-country {
340
- display: flex;
341
- width: 100%;
342
- margin-left: 6px;
343
- color: #999;
344
- }
345
- .timezone-picker-option .option-utc {
346
- display: inline-flex;
347
- align-items: center;
348
- justify-content: center;
349
- height: 20px;
350
- padding: 0 8px;
351
- background: #f0f1f5;
352
- border-radius: 2px;
353
- }
354
- .timezone-picker-option.is-selected {
355
- color: #3a84ff;
356
- }
357
- .timezone-picker-option.is-selected .option-country {
358
- color: #699df4;
359
- }
360
- .timezone-picker-option.is-selected .option-utc {
361
- color: white;
362
- background-color: #699df4;
363
- }.panel-wrapper {
364
- width: 510px;
365
- padding: 12px 16px 0 16px;
366
- background: #fff;
367
- border: 1px solid #dcdee5;
368
- border-radius: 2px;
369
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1019607843);
370
- }
371
- .panel-wrapper .common-date-list {
372
- height: 136px;
373
- max-height: 136px;
374
- padding: 0;
375
- padding-bottom: 4px;
376
- margin: 12px -10px 0 0;
377
- overflow: auto;
378
- }
379
- .panel-wrapper .common-date-list .list-item {
380
- display: inline-flex;
381
- align-items: center;
382
- min-width: calc(33.33% - 8px);
383
- height: 28px;
384
- padding: 0 8px;
385
- margin-right: 8px;
386
- margin-bottom: 8px;
387
- color: #313238;
388
- cursor: pointer;
389
- background: #f5f7fa;
390
- border-radius: 2px;
391
- }
392
- .panel-wrapper .common-date-list .list-item.is-recent-item {
393
- min-width: inherit;
394
- height: 24px;
395
- padding: 0 6px;
396
- color: #63656e;
397
- }
398
- .panel-wrapper .common-date-list .list-item:hover {
399
- color: #3a84ff;
400
- background: #e1ecff;
401
- }
402
- .panel-wrapper .date-pick-tab {
403
- padding-top: 12px;
404
- border-top: 1px solid #eaebf0;
405
- }
406
- .panel-wrapper .date-pick-tab .scoped-tab-header-item,
407
- .panel-wrapper .date-pick-tab .bk-tab-header-item {
408
- /* stylelint-disable-next-line declaration-no-important */
409
- margin-right: 20px !important;
410
- }
411
- .panel-wrapper .time-zone-panel {
412
- display: flex;
413
- align-items: center;
414
- height: 45px;
415
- padding: 0 16px;
416
- margin: 0 -16px;
417
- color: #313238;
418
- background: #fafbfd;
419
- border-top: 1px solid #dcdee5;
420
- }
421
- .panel-wrapper .time-zone-panel .time-zone {
422
- display: flex;
423
- align-items: center;
424
- margin: 0 8px;
425
- }
426
- .panel-wrapper .time-zone-panel .time-zone-area {
427
- display: flex;
428
- align-items: center;
429
- margin-left: 8px;
430
- color: #979ba5;
431
- }
432
- .panel-wrapper .time-zone-panel .time-zone-tag {
433
- display: flex;
434
- align-items: center;
435
- justify-content: center;
436
- width: 79px;
437
- height: 20px;
438
- margin-right: 8px;
439
- margin-left: auto;
440
- color: #63656e;
441
- background: #f0f1f5;
442
- border-radius: 2px;
443
- }
444
- .panel-wrapper .time-zone-picker {
445
- margin: 8px 0;
446
- }
447
- .panel-wrapper .common-wrapper {
448
- display: flex;
449
- flex-direction: column;
450
- height: 139px;
451
- max-height: 139px;
452
- overflow: auto;
453
- }
454
- .panel-wrapper .common-wrapper .empty-content {
455
- height: 100px;
456
- max-height: 100px;
457
- }
458
- .panel-wrapper .common-wrapper .empty-tips {
459
- display: flex;
460
- align-items: center;
461
- justify-content: center;
462
- }.__bk_date_picker__ {
463
- box-sizing: border-box;
464
- display: inline-flex;
465
- align-items: center;
466
- min-width: 140px;
467
- height: 32px;
468
- padding: 0 4px;
469
- font-size: 12px;
470
- color: #63656e;
471
- border: 1px solid #c4c6cc;
472
- border-radius: 2px;
473
- /* stylelint-disable-next-line no-descending-specificity */
474
- }
475
- .__bk_date_picker__ div::-webkit-scrollbar,
476
- .__bk_date_picker__ ul::-webkit-scrollbar,
477
- .__bk_date_picker__ section::-webkit-scrollbar,
478
- .__bk_date_picker__ article::-webkit-scrollbar {
479
- width: 4px;
480
- height: 4px;
481
- }
482
- .__bk_date_picker__ div::-webkit-scrollbar-thumb,
483
- .__bk_date_picker__ ul::-webkit-scrollbar-thumb,
484
- .__bk_date_picker__ section::-webkit-scrollbar-thumb,
485
- .__bk_date_picker__ article::-webkit-scrollbar-thumb {
486
- background: #ddd;
487
- border-radius: 20px;
488
- box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
489
- }
490
- .__bk_date_picker__ .date-icon {
491
- display: flex;
492
- align-items: center;
493
- justify-content: center;
494
- width: 24px;
495
- height: 24px;
496
- font-size: 20px;
497
- font-weight: bold;
498
- color: #989ca7;
499
- background: #f5f7fa;
500
- border-radius: 2px;
501
- }
502
- .__bk_date_picker__ .date-icon-left, .__bk_date_picker__ .date-icon-right {
503
- display: inline-flex;
504
- }
505
- .__bk_date_picker__ .date-icon-left svg, .__bk_date_picker__ .date-icon-right svg {
506
- /* stylelint-disable-next-line declaration-no-important */
507
- width: 20px !important;
508
- /* stylelint-disable-next-line declaration-no-important */
509
- height: 20px !important;
510
- }
511
- .__bk_date_picker__ .date-icon:hover {
512
- cursor: pointer;
513
- background-color: #f0f1f5;
514
- }
515
- .__bk_date_picker__.is-simplicity {
516
- border-color: transparent;
517
- }
518
- .__bk_date_picker__.is-simplicity .date-icon {
519
- background-color: transparent;
520
- }
521
- .__bk_date_picker__.is-simplicity .date-icon:hover {
522
- cursor: pointer;
523
- background-color: #f0f1f5;
524
- }
525
- .__bk_date_picker__.is-disabled {
526
- color: #c4c6cc;
527
- cursor: not-allowed;
528
- /* stylelint-disable-next-line no-descending-specificity */
529
- }
530
- .__bk_date_picker__.is-disabled .date-icon {
531
- color: #c4c6cc;
532
- pointer-events: none;
533
- }
534
- .__bk_date_picker__.is-disabled .date-content {
535
- pointer-events: none;
536
- cursor: not-allowed;
537
- }
538
- .__bk_date_picker__ .date-content {
539
- display: flex;
540
- align-items: center;
541
- height: 24px;
542
- padding: 0 6px;
543
- margin: 0 4px;
544
- user-select: none;
545
- border-radius: 2px;
546
- }
547
- .__bk_date_picker__ .date-content-icon {
548
- margin-right: 4px;
549
- }
550
- .__bk_date_picker__ .date-content-utc {
551
- display: flex;
552
- align-items: center;
553
- margin-left: 4px;
554
- font-weight: 700;
555
- color: #ff9c01;
556
- }
557
- .__bk_date_picker__ .date-content:hover {
558
- cursor: pointer;
559
- background: #f5f7fa;
560
- }
561
- .__bk-date-picker-popover__ {
562
- /* stylelint-disable-next-line declaration-no-important */
563
- padding: 0 !important;
564
- /* stylelint-disable-next-line declaration-no-important */
565
- margin: 0 !important;
566
- /* stylelint-disable-next-line declaration-no-important */
567
- color: #63656e !important;
568
- }
569
- .__bk-date-picker-popover__ div::-webkit-scrollbar,
570
- .__bk-date-picker-popover__ ul::-webkit-scrollbar,
571
- .__bk-date-picker-popover__ section::-webkit-scrollbar,
572
- .__bk-date-picker-popover__ article::-webkit-scrollbar {
573
- width: 4px;
574
- height: 4px;
575
- }
576
- .__bk-date-picker-popover__ div::-webkit-scrollbar-thumb,
577
- .__bk-date-picker-popover__ ul::-webkit-scrollbar-thumb,
578
- .__bk-date-picker-popover__ section::-webkit-scrollbar-thumb,
579
- .__bk-date-picker-popover__ article::-webkit-scrollbar-thumb {
580
- background: #ddd;
581
- border-radius: 20px;
582
- box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
583
- }
584
- .__bk-date-picker-popover__ ul {
585
- padding: 0;
586
- margin: 0;
587
- }
588
- .__bk-date-picker-popover__ ul li {
589
- list-style: none;
590
- }
591
- .__date-tooltips__ {
592
- display: flex;
593
- flex-direction: column;
594
- align-items: center;
595
- justify-content: center;
596
- max-width: 156px;
597
- line-height: 20px;
598
- }
599
- .__date-tooltips__ div::-webkit-scrollbar,
600
- .__date-tooltips__ ul::-webkit-scrollbar,
601
- .__date-tooltips__ section::-webkit-scrollbar,
602
- .__date-tooltips__ article::-webkit-scrollbar {
603
- width: 4px;
604
- height: 4px;
605
- }
606
- .__date-tooltips__ div::-webkit-scrollbar-thumb,
607
- .__date-tooltips__ ul::-webkit-scrollbar-thumb,
608
- .__date-tooltips__ section::-webkit-scrollbar-thumb,
609
- .__date-tooltips__ article::-webkit-scrollbar-thumb {
610
- background: #ddd;
611
- border-radius: 20px;
612
- box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
613
- }
614
- .__date-tooltips__ .date-tooltips-timezone {
615
- display: flex;
616
- align-items: center;
617
- margin-top: 4px;
618
- color: #ff9c01;
619
- }
1
+ .common-panel-tab .scoped-tab-header,.common-panel-tab .bk-tab-header{line-height:20px!important;border-bottom:0!important}.common-panel-tab .scoped-tab-header .scoped-tab-header-item,.common-panel-tab .scoped-tab-header .bk-tab-header-item,.common-panel-tab .bk-tab-header .scoped-tab-header-item,.common-panel-tab .bk-tab-header .bk-tab-header-item{padding:0 0 4px;margin-right:28px}.common-panel-tab .scoped-tab-header--active,.common-panel-tab .bk-tab-header--active{font-weight:700;color:#63656e}.common-panel-tab .scoped-tab-content,.common-panel-tab .bk-tab-content{display:none;width:0;height:0}.common-submit{flex:0 0 64px;width:64px;margin-left:8px}.common-favorite{display:flex;flex:0 0 32px;align-items:center;justify-content:center;width:32px;height:32px;margin-left:8px;cursor:pointer;background:#f5f7fa;border-radius:2px}.common-favorite:hover svg path{fill:#3a84ff}.date-panel{display:flex;flex-direction:column;width:220px;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #dcdee5;box-shadow:0 2px 6px #0000001a}.date-panel-title{display:flex;flex:0 0 40px;align-items:center;height:40px;padding:0 12px;color:#63656e;border-bottom:1px solid #dcdee5}.date-panel-title .title-check{margin-left:auto}.date-panel-main{display:flex;flex:1;flex-direction:column;padding:8px 0 12px}.date-panel-main .date-header{display:flex;align-items:center;width:100%;height:24px}.date-panel-main .date-header-center{display:flex;flex:1;align-items:center;justify-content:center;height:100%;font-size:14px;font-weight:700}.date-panel-main .date-header-center .date-split{width:5px;height:2px;margin:0 10px;background-color:#63656e}.date-panel-main .date-header-right,.date-panel-main .date-header-left{display:flex;align-items:center;height:100%;padding:0 6px;font-size:16px}.date-panel-main .date-header-right .hand-icon,.date-panel-main .date-header-left .hand-icon{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#979ba5}.date-panel-main .date-header-right .hand-icon svg,.date-panel-main .date-header-left .hand-icon svg{width:20px!important;height:20px!important;font-weight:700}.date-panel-main .date-header-right .hand-icon:hover,.date-panel-main .date-header-left .hand-icon:hover{color:#3a84ff;cursor:pointer}.date-panel-main .date-header-right .hand-icon:hover svg,.date-panel-main .date-header-left .hand-icon:hover svg{fill:#3a84ff}.date-panel-main .date-header-right{margin-left:auto}.date-panel-main .date-content{display:flex;flex-direction:column}.date-panel-main .date-content .date-grid{display:flex;align-items:center;width:100%;padding:0 12px;margin:0}.date-panel-main .date-content .date-grid-item{display:flex;flex:0 0 14.285%;align-items:center;justify-content:center;width:14.285%;min-width:28px;height:24px}.date-panel-main .date-content .date-grid-item:not(.not-click):hover{cursor:pointer;background-color:#f0f1f5}.date-panel-main .date-content .date-grid-item.is-today{color:#3a84ff;border:1px solid #a3c5fd;border-radius:2px}.date-panel-main .date-content .date-grid-item.is-last-month{color:#c4c6cc;background-color:#f0f1f5}.date-panel-main .date-content .date-grid-item.is-next-month{color:#c4c6cc}.date-panel-main .date-content .date-grid-item.is-disabled{color:#c4c6cc!important;cursor:not-allowed!important;background-color:#f0f1f5!important}.date-panel-main .date-content .date-grid-item.is-selected{color:#fff!important;background-color:#3a84ff!important;border-radius:2px}.date-wrapper{display:flex;flex-direction:column}.date-wrapper .date-input{display:flex;align-items:center;width:100%;min-height:56px}.date-wrapper .date-input .date-picker{display:flex;align-items:center;width:100%;min-width:360px;height:32px;background:#fff;border:1px solid #c4c6cc;border-radius:2px}.date-wrapper .date-input .date-picker-icon{display:flex;align-items:center;justify-content:center;margin-right:6px;margin-left:8px}.date-wrapper .date-input .date-picker-start,.date-wrapper .date-input .date-picker-end{width:160px;height:24px;padding:0 4px;font-size:12px;color:#63656e;border:none;border-radius:2px}.date-wrapper .date-input .date-picker-start:focus,.date-wrapper .date-input .date-picker-end:focus{background:#e1ecff;border:none;outline:none;box-shadow:none}.date-wrapper .date-input .date-picker-split{display:flex;align-items:center;justify-content:center;padding:0 8px;color:#979ba5}.date-wrapper .date-input .date-picker-clear{display:none!important;flex:0 0 32px;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;color:#c4c6cc}.date-wrapper .date-input .date-picker-clear:hover{color:#63656e;cursor:pointer}.date-wrapper .date-input .date-picker:hover .date-picker-clear{display:flex!important}.date-wrapper .show-format{display:flex;align-items:center;width:100%;min-width:100%;margin-top:-8px;margin-bottom:12px;color:#979ba5}.date-wrapper .show-format .format-button{margin-left:8px}.date-format-wrapper{display:flex;flex-direction:column;width:520px;padding:12px 15px;margin:-7px -14px}.date-format-wrapper .content-title{margin-bottom:12px;font-weight:700;line-height:20px}.date-format-wrapper .content-table{display:flex;flex-direction:column;width:100%;border-collapse:collapse;background-color:#fff;border:1px solid #eaeefb;border-top:0;border-left:0}.date-format-wrapper .content-table th,.date-format-wrapper .content-table td{height:42px;padding:8px 16px;color:#63656e;text-align:left;border:1px solid #eaeefb;border-right:0;border-bottom:0}.date-format-wrapper .content-table thead,.date-format-wrapper .content-table tr{display:flex;align-items:center;width:100%}.date-format-wrapper .content-table thead th,.date-format-wrapper .content-table tr th{flex:1;background-color:#fafbfd}.date-format-wrapper .content-table tbody{display:block;width:100%;max-height:300px;overflow:auto}.date-format-wrapper .content-table tbody td{display:flex;flex:1;align-items:center}.natural-picker{display:flex;align-items:center;min-height:56px}.natural-picker .natural-unit{width:118px;margin-left:8px}.recent-picker{display:flex;align-items:center;min-height:56px}.recent-picker .recent-unit{width:164px}.recent-picker .recent-unit .scoped-input,.recent-picker .recent-unit .bk-input{height:30px;border:none;border-left:1px solid #c4c6cc;border-radius:0}.recent-picker .recent-unit .scoped-input--text,.recent-picker .recent-unit .bk-input--text{border-radius:0}.timezone-picker{width:100%}.timezone-picker-option{display:flex;align-items:center;width:100%;color:#63656e}.timezone-picker-option .option-name{flex:1}.timezone-picker-option .option-country{display:flex;width:100%;margin-left:6px;color:#999}.timezone-picker-option .option-utc{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 8px;background:#f0f1f5;border-radius:2px}.timezone-picker-option.is-selected{color:#3a84ff}.timezone-picker-option.is-selected .option-country{color:#699df4}.timezone-picker-option.is-selected .option-utc{color:#fff;background-color:#699df4}.panel-wrapper{width:510px;padding:12px 16px 0;background:#fff;border:1px solid #dcdee5;border-radius:2px;box-shadow:0 2px 6px #0000001a}.panel-wrapper .common-date-list{height:136px;max-height:136px;padding:0 0 4px;margin:12px -10px 0 0;overflow:auto}.panel-wrapper .common-date-list .list-item{display:inline-flex;align-items:center;min-width:calc(33.33% - 8px);height:28px;padding:0 8px;margin-right:8px;margin-bottom:8px;color:#313238;cursor:pointer;background:#f5f7fa;border-radius:2px}.panel-wrapper .common-date-list .list-item.is-recent-item{min-width:inherit;height:24px;padding:0 6px;color:#63656e}.panel-wrapper .common-date-list .list-item:hover{color:#3a84ff;background:#e1ecff}.panel-wrapper .date-pick-tab{padding-top:12px;border-top:1px solid #eaebf0}.panel-wrapper .date-pick-tab .scoped-tab-header-item,.panel-wrapper .date-pick-tab .bk-tab-header-item{margin-right:20px!important}.panel-wrapper .time-zone-panel{display:flex;align-items:center;height:45px;padding:0 16px;margin:0 -16px;color:#313238;background:#fafbfd;border-top:1px solid #dcdee5}.panel-wrapper .time-zone-panel .time-zone{display:flex;align-items:center;margin:0 8px}.panel-wrapper .time-zone-panel .time-zone-area{display:flex;align-items:center;margin-left:8px;color:#979ba5}.panel-wrapper .time-zone-panel .time-zone-tag{display:flex;align-items:center;justify-content:center;width:79px;height:20px;margin-right:8px;margin-left:auto;color:#63656e;background:#f0f1f5;border-radius:2px}.panel-wrapper .time-zone-picker{margin:8px 0}.panel-wrapper .common-wrapper{display:flex;flex-direction:column;height:139px;max-height:139px;overflow:auto}.panel-wrapper .common-wrapper .empty-content{height:100px;max-height:100px}.panel-wrapper .common-wrapper .empty-tips{display:flex;align-items:center;justify-content:center}.__bk_date_picker__{box-sizing:border-box;display:inline-flex;align-items:center;min-width:140px;height:32px;padding:0 4px;font-size:12px;color:#63656e;border:1px solid #c4c6cc;border-radius:2px}.__bk_date_picker__ div::-webkit-scrollbar,.__bk_date_picker__ ul::-webkit-scrollbar,.__bk_date_picker__ section::-webkit-scrollbar,.__bk_date_picker__ article::-webkit-scrollbar{width:4px;height:4px}.__bk_date_picker__ div::-webkit-scrollbar-thumb,.__bk_date_picker__ ul::-webkit-scrollbar-thumb,.__bk_date_picker__ section::-webkit-scrollbar-thumb,.__bk_date_picker__ article::-webkit-scrollbar-thumb{background:#ddd;border-radius:20px;box-shadow:inset 0 0 6px #cccccc4d}.__bk_date_picker__ .date-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:20px;font-weight:700;color:#989ca7;background:#f5f7fa;border-radius:2px}.__bk_date_picker__ .date-icon-left,.__bk_date_picker__ .date-icon-right{display:inline-flex}.__bk_date_picker__ .date-icon-left svg,.__bk_date_picker__ .date-icon-right svg{width:20px!important;height:20px!important}.__bk_date_picker__ .date-icon:hover{cursor:pointer;background-color:#f0f1f5}.__bk_date_picker__.is-simplicity{border-color:transparent}.__bk_date_picker__.is-simplicity .date-icon{background-color:transparent}.__bk_date_picker__.is-simplicity .date-icon:hover{cursor:pointer;background-color:#f0f1f5}.__bk_date_picker__.is-disabled{color:#c4c6cc;cursor:not-allowed}.__bk_date_picker__.is-disabled .date-icon{color:#c4c6cc;pointer-events:none}.__bk_date_picker__.is-disabled .date-content{pointer-events:none;cursor:not-allowed}.__bk_date_picker__ .date-content{display:flex;align-items:center;height:24px;padding:0 6px;margin:0 4px;-webkit-user-select:none;user-select:none;border-radius:2px}.__bk_date_picker__ .date-content-icon{margin-right:4px}.__bk_date_picker__ .date-content-utc{display:flex;align-items:center;margin-left:4px;font-weight:700;color:#ff9c01}.__bk_date_picker__ .date-content:hover{cursor:pointer;background:#f5f7fa}.__bk-date-picker-popover__{padding:0!important;margin:0!important;color:#63656e!important}.__bk-date-picker-popover__ div::-webkit-scrollbar,.__bk-date-picker-popover__ ul::-webkit-scrollbar,.__bk-date-picker-popover__ section::-webkit-scrollbar,.__bk-date-picker-popover__ article::-webkit-scrollbar{width:4px;height:4px}.__bk-date-picker-popover__ div::-webkit-scrollbar-thumb,.__bk-date-picker-popover__ ul::-webkit-scrollbar-thumb,.__bk-date-picker-popover__ section::-webkit-scrollbar-thumb,.__bk-date-picker-popover__ article::-webkit-scrollbar-thumb{background:#ddd;border-radius:20px;box-shadow:inset 0 0 6px #cccccc4d}.__bk-date-picker-popover__ ul{padding:0;margin:0}.__bk-date-picker-popover__ ul li{list-style:none}.__date-tooltips__{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:156px;line-height:20px}.__date-tooltips__ div::-webkit-scrollbar,.__date-tooltips__ ul::-webkit-scrollbar,.__date-tooltips__ section::-webkit-scrollbar,.__date-tooltips__ article::-webkit-scrollbar{width:4px;height:4px}.__date-tooltips__ div::-webkit-scrollbar-thumb,.__date-tooltips__ ul::-webkit-scrollbar-thumb,.__date-tooltips__ section::-webkit-scrollbar-thumb,.__date-tooltips__ article::-webkit-scrollbar-thumb{background:#ddd;border-radius:20px;box-shadow:inset 0 0 6px #cccccc4d}.__date-tooltips__ .date-tooltips-timezone{display:flex;align-items:center;margin-top:4px;color:#ff9c01}