@yuva-devlab/ui 1.4.2 → 1.4.4
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.
- package/README.md +96 -136
- package/dist/components/button/button.css +5 -5
- package/dist/components/calendar/calendar.css +238 -0
- package/dist/components/copy-button/copy-button.css +2 -0
- package/dist/components/date-picker/date-picker.css +9 -3
- package/dist/components/input/input.css +1 -1
- package/dist/components/input-otp/input-otp.css +2 -2
- package/dist/components/popover/popover.css +5 -0
- package/dist/components/secret-reveal-card/secret-reveal-card.css +3 -0
- package/dist/components/select/select.css +33 -10
- package/dist/components.css +300 -21
- package/dist/index.cjs +61 -83
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.js +61 -83
- package/dist/index.js.map +1 -1
- package/dist/styles/components.css +300 -21
- package/package.json +21 -2
|
@@ -1,19 +1,25 @@
|
|
|
1
1
|
.dl-select-trigger {
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
width: 100%;
|
|
4
|
-
|
|
4
|
+
height: var(--control-height-md, 2.25rem);
|
|
5
|
+
min-height: var(--control-height-md, 2.25rem);
|
|
5
6
|
align-items: center;
|
|
6
7
|
justify-content: space-between;
|
|
7
8
|
white-space: nowrap;
|
|
8
9
|
border-radius: var(--radius-md, 0.375rem);
|
|
9
10
|
border: 1px solid var(--input);
|
|
10
11
|
background-color: transparent;
|
|
11
|
-
padding: 0 0.
|
|
12
|
-
font-size: 0.
|
|
12
|
+
padding: 0 0.75rem;
|
|
13
|
+
font-size: 0.875rem;
|
|
14
|
+
line-height: 1.25rem;
|
|
13
15
|
font-family: inherit;
|
|
16
|
+
font-weight: 400;
|
|
14
17
|
cursor: pointer;
|
|
15
18
|
color: var(--foreground);
|
|
16
19
|
box-shadow: 0 1px 2px rgb(0 0 0/0.05);
|
|
20
|
+
transition:
|
|
21
|
+
border-color 0.15s ease,
|
|
22
|
+
box-shadow 0.15s ease;
|
|
17
23
|
}
|
|
18
24
|
.dl-select-trigger[data-placeholder] {
|
|
19
25
|
color: var(--muted-foreground);
|
|
@@ -28,11 +34,25 @@
|
|
|
28
34
|
}
|
|
29
35
|
.dl-select-trigger > svg {
|
|
30
36
|
opacity: 0.5;
|
|
31
|
-
width:
|
|
32
|
-
height:
|
|
37
|
+
width: 1rem;
|
|
38
|
+
height: 1rem;
|
|
33
39
|
flex-shrink: 0;
|
|
34
40
|
}
|
|
35
41
|
|
|
42
|
+
/* Sizes */
|
|
43
|
+
.dl-select-trigger--sm {
|
|
44
|
+
height: var(--control-height-sm, 2rem);
|
|
45
|
+
min-height: var(--control-height-sm, 2rem);
|
|
46
|
+
padding: 0 0.5rem;
|
|
47
|
+
font-size: 0.75rem;
|
|
48
|
+
}
|
|
49
|
+
.dl-select-trigger--lg {
|
|
50
|
+
height: var(--control-height-lg, 2.5rem);
|
|
51
|
+
min-height: var(--control-height-lg, 2.5rem);
|
|
52
|
+
padding: 0 1rem;
|
|
53
|
+
font-size: 1rem;
|
|
54
|
+
}
|
|
55
|
+
|
|
36
56
|
.dl-select-content {
|
|
37
57
|
position: relative;
|
|
38
58
|
z-index: 50;
|
|
@@ -66,10 +86,13 @@
|
|
|
66
86
|
cursor: pointer;
|
|
67
87
|
align-items: center;
|
|
68
88
|
border-radius: var(--radius-sm, 0.25rem);
|
|
69
|
-
padding: 0.
|
|
70
|
-
font-size: 0.
|
|
89
|
+
padding: 0.375rem 0.625rem 0.375rem 2rem;
|
|
90
|
+
font-size: 0.875rem;
|
|
71
91
|
outline: none;
|
|
72
92
|
user-select: none;
|
|
93
|
+
transition:
|
|
94
|
+
background-color 0.15s ease,
|
|
95
|
+
color 0.15s ease;
|
|
73
96
|
}
|
|
74
97
|
.dl-select-item:focus,
|
|
75
98
|
.dl-select-item[data-highlighted] {
|
|
@@ -82,12 +105,12 @@
|
|
|
82
105
|
}
|
|
83
106
|
.dl-select-item__indicator {
|
|
84
107
|
position: absolute;
|
|
85
|
-
left: 0.
|
|
108
|
+
left: 0.625rem;
|
|
86
109
|
display: flex;
|
|
87
110
|
align-items: center;
|
|
88
111
|
justify-content: center;
|
|
89
|
-
width: 0.
|
|
90
|
-
height: 0.
|
|
112
|
+
width: 0.875rem;
|
|
113
|
+
height: 0.875rem;
|
|
91
114
|
}
|
|
92
115
|
.dl-select-label {
|
|
93
116
|
padding: 0.25rem 0.5rem;
|
package/dist/components.css
CHANGED
|
@@ -416,21 +416,21 @@
|
|
|
416
416
|
|
|
417
417
|
/* Sizes */
|
|
418
418
|
.dl-btn--sm {
|
|
419
|
-
height: 2rem;
|
|
419
|
+
height: var(--control-height-sm, 2rem);
|
|
420
420
|
padding: 0 0.75rem;
|
|
421
421
|
font-size: 0.75rem;
|
|
422
422
|
}
|
|
423
423
|
.dl-btn--md {
|
|
424
|
-
height: 2.25rem;
|
|
424
|
+
height: var(--control-height-md, 2.25rem);
|
|
425
425
|
padding: 0 1rem;
|
|
426
426
|
}
|
|
427
427
|
.dl-btn--lg {
|
|
428
|
-
height: 2.5rem;
|
|
428
|
+
height: var(--control-height-lg, 2.5rem);
|
|
429
429
|
padding: 0 2rem;
|
|
430
430
|
}
|
|
431
431
|
.dl-btn--icon {
|
|
432
|
-
width: 2.25rem;
|
|
433
|
-
height: 2.25rem;
|
|
432
|
+
width: var(--control-height-md, 2.25rem);
|
|
433
|
+
height: var(--control-height-md, 2.25rem);
|
|
434
434
|
padding: 0;
|
|
435
435
|
}
|
|
436
436
|
|
|
@@ -486,6 +486,246 @@
|
|
|
486
486
|
text-decoration: underline;
|
|
487
487
|
}
|
|
488
488
|
|
|
489
|
+
/* ── calendar ── */
|
|
490
|
+
.dl-calendar {
|
|
491
|
+
--cell-size: 2rem;
|
|
492
|
+
display: inline-block;
|
|
493
|
+
width: fit-content;
|
|
494
|
+
max-width: 100%;
|
|
495
|
+
padding: 0.75rem;
|
|
496
|
+
box-sizing: border-box;
|
|
497
|
+
color: var(--foreground);
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
.dl-calendar .rdp-root {
|
|
501
|
+
width: fit-content;
|
|
502
|
+
margin: 0 auto;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.dl-calendar .rdp-months {
|
|
506
|
+
position: relative;
|
|
507
|
+
display: flex;
|
|
508
|
+
flex-direction: column;
|
|
509
|
+
gap: 1rem;
|
|
510
|
+
width: calc(var(--cell-size, 2rem) * 7);
|
|
511
|
+
box-sizing: border-box;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.dl-calendar .rdp-month {
|
|
515
|
+
display: flex;
|
|
516
|
+
flex-direction: column;
|
|
517
|
+
gap: 0.75rem;
|
|
518
|
+
width: 100%;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
.dl-calendar .rdp-month_caption {
|
|
522
|
+
position: relative;
|
|
523
|
+
display: flex;
|
|
524
|
+
height: var(--cell-size, 2rem);
|
|
525
|
+
width: 100%;
|
|
526
|
+
align-items: center;
|
|
527
|
+
justify-content: center;
|
|
528
|
+
padding: 0 var(--cell-size, 2rem);
|
|
529
|
+
font-size: 0.875rem;
|
|
530
|
+
font-weight: 600;
|
|
531
|
+
color: var(--foreground);
|
|
532
|
+
box-sizing: border-box;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.dl-calendar .rdp-caption_label {
|
|
536
|
+
font-size: 0.875rem;
|
|
537
|
+
font-weight: 600;
|
|
538
|
+
color: var(--foreground);
|
|
539
|
+
line-height: 1;
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
/* Navigation prev / next arrows */
|
|
543
|
+
.dl-calendar .rdp-nav {
|
|
544
|
+
position: absolute;
|
|
545
|
+
top: 0;
|
|
546
|
+
left: 0;
|
|
547
|
+
right: 0;
|
|
548
|
+
display: flex;
|
|
549
|
+
align-items: center;
|
|
550
|
+
justify-content: space-between;
|
|
551
|
+
width: 100%;
|
|
552
|
+
height: var(--cell-size, 2rem);
|
|
553
|
+
pointer-events: none;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.dl-calendar .rdp-button_previous,
|
|
557
|
+
.dl-calendar .rdp-button_next {
|
|
558
|
+
pointer-events: auto;
|
|
559
|
+
width: var(--cell-size, 2rem) !important;
|
|
560
|
+
height: var(--cell-size, 2rem) !important;
|
|
561
|
+
min-width: var(--cell-size, 2rem) !important;
|
|
562
|
+
padding: 0 !important;
|
|
563
|
+
display: inline-flex !important;
|
|
564
|
+
align-items: center;
|
|
565
|
+
justify-content: center;
|
|
566
|
+
border-radius: var(--radius-md, 0.375rem) !important;
|
|
567
|
+
border: 1px solid var(--border);
|
|
568
|
+
background: var(--background);
|
|
569
|
+
color: var(--muted-foreground);
|
|
570
|
+
cursor: pointer;
|
|
571
|
+
transition: all 0.15s ease;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.dl-calendar .rdp-button_previous:hover,
|
|
575
|
+
.dl-calendar .rdp-button_next:hover {
|
|
576
|
+
background-color: var(--accent);
|
|
577
|
+
color: var(--accent-foreground);
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.dl-calendar .rdp-button_previous svg,
|
|
581
|
+
.dl-calendar .rdp-button_next svg {
|
|
582
|
+
width: 1rem;
|
|
583
|
+
height: 1rem;
|
|
584
|
+
flex-shrink: 0;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
/* Grid Table */
|
|
588
|
+
.dl-calendar table.rdp-month_grid,
|
|
589
|
+
.dl-calendar table {
|
|
590
|
+
width: 100%;
|
|
591
|
+
border-collapse: collapse;
|
|
592
|
+
table-layout: fixed;
|
|
593
|
+
margin: 0;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
/* Weekday header cells */
|
|
597
|
+
.dl-calendar th.rdp-weekday,
|
|
598
|
+
.dl-calendar th {
|
|
599
|
+
width: calc(100% / 7);
|
|
600
|
+
height: var(--cell-size, 2rem);
|
|
601
|
+
text-align: center;
|
|
602
|
+
vertical-align: middle;
|
|
603
|
+
font-size: 0.75rem;
|
|
604
|
+
font-weight: 500;
|
|
605
|
+
color: var(--muted-foreground);
|
|
606
|
+
padding: 0;
|
|
607
|
+
margin: 0;
|
|
608
|
+
box-sizing: border-box;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
/* Day table cells */
|
|
612
|
+
.dl-calendar td.rdp-day,
|
|
613
|
+
.dl-calendar td {
|
|
614
|
+
width: calc(100% / 7);
|
|
615
|
+
height: var(--cell-size, 2rem);
|
|
616
|
+
padding: 2px !important;
|
|
617
|
+
margin: 0;
|
|
618
|
+
text-align: center;
|
|
619
|
+
vertical-align: middle;
|
|
620
|
+
background: transparent !important;
|
|
621
|
+
background-color: transparent !important;
|
|
622
|
+
border: none !important;
|
|
623
|
+
box-sizing: border-box;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
/* Day Button inside td */
|
|
627
|
+
.dl-calendar button.rdp-day_button,
|
|
628
|
+
.dl-calendar .dl-calendar__day-button {
|
|
629
|
+
width: 100% !important;
|
|
630
|
+
height: 100% !important;
|
|
631
|
+
min-width: 0 !important;
|
|
632
|
+
min-height: 0 !important;
|
|
633
|
+
margin: 0 auto !important;
|
|
634
|
+
padding: 0 !important;
|
|
635
|
+
display: inline-flex !important;
|
|
636
|
+
align-items: center;
|
|
637
|
+
justify-content: center;
|
|
638
|
+
border-radius: var(--radius-md, 0.375rem) !important;
|
|
639
|
+
border: none !important;
|
|
640
|
+
font-size: 0.875rem;
|
|
641
|
+
font-weight: 400;
|
|
642
|
+
color: var(--foreground);
|
|
643
|
+
background: transparent;
|
|
644
|
+
cursor: pointer;
|
|
645
|
+
box-sizing: border-box;
|
|
646
|
+
transition: all 0.15s ease;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.dl-calendar button.rdp-day_button:hover:not(:disabled) {
|
|
650
|
+
background-color: var(--accent) !important;
|
|
651
|
+
color: var(--accent-foreground) !important;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
/* Selected Date Highlight */
|
|
655
|
+
.dl-calendar td[aria-selected="true"] button.rdp-day_button,
|
|
656
|
+
.dl-calendar td.rdp-selected button.rdp-day_button,
|
|
657
|
+
.dl-calendar button.rdp-day_button[data-selected="true"],
|
|
658
|
+
.dl-calendar button.rdp-day_button[data-selected-single="true"] {
|
|
659
|
+
background-color: var(--primary) !important;
|
|
660
|
+
color: var(--primary-foreground) !important;
|
|
661
|
+
border-radius: var(--radius-md, 0.375rem) !important;
|
|
662
|
+
font-weight: 600;
|
|
663
|
+
box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.dl-calendar td[aria-selected="true"] button.rdp-day_button:hover,
|
|
667
|
+
.dl-calendar td.rdp-selected button.rdp-day_button:hover,
|
|
668
|
+
.dl-calendar button.rdp-day_button[data-selected="true"]:hover,
|
|
669
|
+
.dl-calendar button.rdp-day_button[data-selected-single="true"]:hover {
|
|
670
|
+
background-color: color-mix(in oklch, var(--primary) 88%, black) !important;
|
|
671
|
+
color: var(--primary-foreground) !important;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
/* Today indicator (when not selected) */
|
|
675
|
+
.dl-calendar
|
|
676
|
+
td.rdp-today:not([aria-selected="true"]):not(.rdp-selected)
|
|
677
|
+
button.rdp-day_button {
|
|
678
|
+
background-color: color-mix(
|
|
679
|
+
in oklch,
|
|
680
|
+
var(--secondary) 60%,
|
|
681
|
+
transparent
|
|
682
|
+
) !important;
|
|
683
|
+
color: var(--foreground) !important;
|
|
684
|
+
font-weight: 600;
|
|
685
|
+
border: 1px solid var(--border) !important;
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
/* Range selection styles */
|
|
689
|
+
.dl-calendar td.rdp-range_start {
|
|
690
|
+
background-color: var(--accent) !important;
|
|
691
|
+
border-top-left-radius: var(--radius-md, 0.375rem) !important;
|
|
692
|
+
border-bottom-left-radius: var(--radius-md, 0.375rem) !important;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
.dl-calendar td.rdp-range_middle {
|
|
696
|
+
background-color: var(--accent) !important;
|
|
697
|
+
border-radius: 0 !important;
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
.dl-calendar td.rdp-range_middle button.rdp-day_button {
|
|
701
|
+
background: transparent !important;
|
|
702
|
+
color: var(--accent-foreground) !important;
|
|
703
|
+
border-radius: 0 !important;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
.dl-calendar td.rdp-range_end {
|
|
707
|
+
background-color: var(--accent) !important;
|
|
708
|
+
border-top-right-radius: var(--radius-md, 0.375rem) !important;
|
|
709
|
+
border-bottom-right-radius: var(--radius-md, 0.375rem) !important;
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
.dl-calendar td.rdp-outside button.rdp-day_button {
|
|
713
|
+
color: var(--muted-foreground) !important;
|
|
714
|
+
opacity: 0.35;
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
.dl-calendar button.rdp-day_button:disabled {
|
|
718
|
+
color: var(--muted-foreground) !important;
|
|
719
|
+
opacity: 0.25;
|
|
720
|
+
cursor: not-allowed;
|
|
721
|
+
pointer-events: none;
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
.dl-calendar td.rdp-hidden {
|
|
725
|
+
visibility: hidden;
|
|
726
|
+
pointer-events: none;
|
|
727
|
+
}
|
|
728
|
+
|
|
489
729
|
/* ── card ── */
|
|
490
730
|
.dl-card {
|
|
491
731
|
border-radius: var(--radius-lg, 0.5rem);
|
|
@@ -820,6 +1060,8 @@
|
|
|
820
1060
|
cursor: pointer;
|
|
821
1061
|
transition: all 0.15s ease;
|
|
822
1062
|
user-select: none;
|
|
1063
|
+
white-space: nowrap;
|
|
1064
|
+
flex-shrink: 0;
|
|
823
1065
|
}
|
|
824
1066
|
|
|
825
1067
|
.dl-copy-button:hover {
|
|
@@ -865,9 +1107,15 @@
|
|
|
865
1107
|
flex-shrink: 0;
|
|
866
1108
|
}
|
|
867
1109
|
|
|
868
|
-
.dl-date-picker-content
|
|
869
|
-
|
|
870
|
-
|
|
1110
|
+
.dl-date-picker-content,
|
|
1111
|
+
.dl-popover.dl-date-picker-content {
|
|
1112
|
+
width: fit-content !important;
|
|
1113
|
+
max-width: fit-content !important;
|
|
1114
|
+
padding: 0 !important;
|
|
1115
|
+
box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
|
|
1116
|
+
border-radius: var(--radius-lg, 0.5rem);
|
|
1117
|
+
border: 1px solid var(--border);
|
|
1118
|
+
background-color: var(--popover);
|
|
871
1119
|
}
|
|
872
1120
|
|
|
873
1121
|
/* ── dialog ── */
|
|
@@ -1247,7 +1495,7 @@
|
|
|
1247
1495
|
.dl-input {
|
|
1248
1496
|
display: block;
|
|
1249
1497
|
width: 100%;
|
|
1250
|
-
height: 2.25rem;
|
|
1498
|
+
height: var(--control-height-md, 2.25rem);
|
|
1251
1499
|
border-radius: var(--radius-md, 0.375rem);
|
|
1252
1500
|
border: 1px solid var(--input);
|
|
1253
1501
|
background-color: transparent;
|
|
@@ -1332,8 +1580,8 @@
|
|
|
1332
1580
|
display: flex;
|
|
1333
1581
|
align-items: center;
|
|
1334
1582
|
justify-content: center;
|
|
1335
|
-
width: 2.25rem;
|
|
1336
|
-
height: 2.25rem;
|
|
1583
|
+
width: var(--control-height-md, 2.25rem);
|
|
1584
|
+
height: var(--control-height-md, 2.25rem);
|
|
1337
1585
|
border-top: 1px solid var(--input);
|
|
1338
1586
|
border-bottom: 1px solid var(--input);
|
|
1339
1587
|
border-right: 1px solid var(--input);
|
|
@@ -1755,6 +2003,11 @@
|
|
|
1755
2003
|
animation: dl-fade-out 150ms ease;
|
|
1756
2004
|
}
|
|
1757
2005
|
|
|
2006
|
+
.dl-popover.dl-date-picker-content {
|
|
2007
|
+
width: auto;
|
|
2008
|
+
padding: 0;
|
|
2009
|
+
}
|
|
2010
|
+
|
|
1758
2011
|
/* ── progress ── */
|
|
1759
2012
|
.dl-progress {
|
|
1760
2013
|
position: relative;
|
|
@@ -2073,6 +2326,7 @@
|
|
|
2073
2326
|
border: 1px solid var(--border);
|
|
2074
2327
|
border-radius: calc(var(--radius, 0.5rem) - 2px);
|
|
2075
2328
|
padding: 0.5rem 0.75rem;
|
|
2329
|
+
flex-wrap: nowrap;
|
|
2076
2330
|
}
|
|
2077
2331
|
|
|
2078
2332
|
.dl-secret-reveal__code {
|
|
@@ -2081,25 +2335,33 @@
|
|
|
2081
2335
|
color: var(--primary);
|
|
2082
2336
|
word-break: break-all;
|
|
2083
2337
|
user-select: all;
|
|
2338
|
+
min-width: 0;
|
|
2339
|
+
flex: 1;
|
|
2084
2340
|
}
|
|
2085
2341
|
|
|
2086
2342
|
/* ── select ── */
|
|
2087
2343
|
.dl-select-trigger {
|
|
2088
2344
|
display: inline-flex;
|
|
2089
2345
|
width: 100%;
|
|
2090
|
-
|
|
2346
|
+
height: var(--control-height-md, 2.25rem);
|
|
2347
|
+
min-height: var(--control-height-md, 2.25rem);
|
|
2091
2348
|
align-items: center;
|
|
2092
2349
|
justify-content: space-between;
|
|
2093
2350
|
white-space: nowrap;
|
|
2094
2351
|
border-radius: var(--radius-md, 0.375rem);
|
|
2095
2352
|
border: 1px solid var(--input);
|
|
2096
2353
|
background-color: transparent;
|
|
2097
|
-
padding: 0 0.
|
|
2098
|
-
font-size: 0.
|
|
2354
|
+
padding: 0 0.75rem;
|
|
2355
|
+
font-size: 0.875rem;
|
|
2356
|
+
line-height: 1.25rem;
|
|
2099
2357
|
font-family: inherit;
|
|
2358
|
+
font-weight: 400;
|
|
2100
2359
|
cursor: pointer;
|
|
2101
2360
|
color: var(--foreground);
|
|
2102
2361
|
box-shadow: 0 1px 2px rgb(0 0 0/0.05);
|
|
2362
|
+
transition:
|
|
2363
|
+
border-color 0.15s ease,
|
|
2364
|
+
box-shadow 0.15s ease;
|
|
2103
2365
|
}
|
|
2104
2366
|
.dl-select-trigger[data-placeholder] {
|
|
2105
2367
|
color: var(--muted-foreground);
|
|
@@ -2114,11 +2376,25 @@
|
|
|
2114
2376
|
}
|
|
2115
2377
|
.dl-select-trigger > svg {
|
|
2116
2378
|
opacity: 0.5;
|
|
2117
|
-
width:
|
|
2118
|
-
height:
|
|
2379
|
+
width: 1rem;
|
|
2380
|
+
height: 1rem;
|
|
2119
2381
|
flex-shrink: 0;
|
|
2120
2382
|
}
|
|
2121
2383
|
|
|
2384
|
+
/* Sizes */
|
|
2385
|
+
.dl-select-trigger--sm {
|
|
2386
|
+
height: var(--control-height-sm, 2rem);
|
|
2387
|
+
min-height: var(--control-height-sm, 2rem);
|
|
2388
|
+
padding: 0 0.5rem;
|
|
2389
|
+
font-size: 0.75rem;
|
|
2390
|
+
}
|
|
2391
|
+
.dl-select-trigger--lg {
|
|
2392
|
+
height: var(--control-height-lg, 2.5rem);
|
|
2393
|
+
min-height: var(--control-height-lg, 2.5rem);
|
|
2394
|
+
padding: 0 1rem;
|
|
2395
|
+
font-size: 1rem;
|
|
2396
|
+
}
|
|
2397
|
+
|
|
2122
2398
|
.dl-select-content {
|
|
2123
2399
|
position: relative;
|
|
2124
2400
|
z-index: 50;
|
|
@@ -2152,10 +2428,13 @@
|
|
|
2152
2428
|
cursor: pointer;
|
|
2153
2429
|
align-items: center;
|
|
2154
2430
|
border-radius: var(--radius-sm, 0.25rem);
|
|
2155
|
-
padding: 0.
|
|
2156
|
-
font-size: 0.
|
|
2431
|
+
padding: 0.375rem 0.625rem 0.375rem 2rem;
|
|
2432
|
+
font-size: 0.875rem;
|
|
2157
2433
|
outline: none;
|
|
2158
2434
|
user-select: none;
|
|
2435
|
+
transition:
|
|
2436
|
+
background-color 0.15s ease,
|
|
2437
|
+
color 0.15s ease;
|
|
2159
2438
|
}
|
|
2160
2439
|
.dl-select-item:focus,
|
|
2161
2440
|
.dl-select-item[data-highlighted] {
|
|
@@ -2168,12 +2447,12 @@
|
|
|
2168
2447
|
}
|
|
2169
2448
|
.dl-select-item__indicator {
|
|
2170
2449
|
position: absolute;
|
|
2171
|
-
left: 0.
|
|
2450
|
+
left: 0.625rem;
|
|
2172
2451
|
display: flex;
|
|
2173
2452
|
align-items: center;
|
|
2174
2453
|
justify-content: center;
|
|
2175
|
-
width: 0.
|
|
2176
|
-
height: 0.
|
|
2454
|
+
width: 0.875rem;
|
|
2455
|
+
height: 0.875rem;
|
|
2177
2456
|
}
|
|
2178
2457
|
.dl-select-label {
|
|
2179
2458
|
padding: 0.25rem 0.5rem;
|