@rogieking/figui3 1.4.6 → 1.4.8
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/example.html +12 -0
- package/fig.css +59 -15
- package/package.json +1 -1
package/example.html
CHANGED
|
@@ -32,11 +32,23 @@
|
|
|
32
32
|
<legend>Numbers</legend>
|
|
33
33
|
<option>One</option>
|
|
34
34
|
<option>Two</option>
|
|
35
|
+
<option>One</option>
|
|
36
|
+
<option>Two</option>
|
|
37
|
+
<option>One</option>
|
|
38
|
+
<option>Two</option>
|
|
35
39
|
</optgroup>
|
|
36
40
|
<optgroup label="Fruits">
|
|
37
41
|
<legend>Fruits</legend>
|
|
38
42
|
<option>Apple</option>
|
|
39
43
|
<option>Banana</option>
|
|
44
|
+
<option>Apple</option>
|
|
45
|
+
<option>Banana</option>
|
|
46
|
+
<option>Apple</option>
|
|
47
|
+
<option>Banana</option>
|
|
48
|
+
<option>Apple</option>
|
|
49
|
+
<option>Banana</option>
|
|
50
|
+
<option>Apple</option>
|
|
51
|
+
<option>Banana</option>
|
|
40
52
|
</optgroup>
|
|
41
53
|
</select>
|
|
42
54
|
|
package/fig.css
CHANGED
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
--figma-color-border-danger-strong: #dc3412;
|
|
54
54
|
--figma-color-border-disabled: #e6e6e6;
|
|
55
55
|
--figma-color-border-disabled-strong: #0000004d;
|
|
56
|
+
--figma-color-border-menu: #383838;
|
|
56
57
|
--figma-color-border-onbrand: #007be5;
|
|
57
58
|
--figma-color-border-onbrand-strong: #ffffff;
|
|
58
59
|
--figma-color-border-oncomponent: #8638e5;
|
|
@@ -437,7 +438,7 @@
|
|
|
437
438
|
color-scheme: light dark;
|
|
438
439
|
/* Icons */
|
|
439
440
|
--icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(0 0 0 / 90%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
|
|
440
|
-
|
|
441
|
+
--icon-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7773 4.08403C12.0071 4.2372 12.0692 4.54764 11.916 4.7774L7.91603 10.7774C7.83293 10.902 7.69834 10.9829 7.54927 10.9976C7.4002 11.0124 7.25237 10.9595 7.14645 10.8536L4.14645 7.85361C3.95118 7.65834 3.95118 7.34176 4.14645 7.1465C4.34171 6.95124 4.65829 6.95124 4.85355 7.1465L7.42229 9.71523L11.084 4.2227C11.2372 3.99294 11.5476 3.93085 11.7773 4.08403Z' fill='white'/%3E%3C/svg%3E%0A");
|
|
441
442
|
/* Elevations */
|
|
442
443
|
--figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.3),
|
|
443
444
|
0px 1px 3px 0px rgba(0, 0, 0, 0.15);
|
|
@@ -460,7 +461,7 @@
|
|
|
460
461
|
--figma-elevation-400-menu-panel: 0px 0.5px 0px 0px
|
|
461
462
|
rgba(255, 255, 255, 0.08) inset,
|
|
462
463
|
0px 10px 16px 0px rgba(0, 0, 0, 0.35),
|
|
463
|
-
|
|
464
|
+
inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
|
|
464
465
|
0px 2px 5px 0px rgba(0, 0, 0, 0.35);
|
|
465
466
|
|
|
466
467
|
--figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
|
|
@@ -641,31 +642,75 @@ input[type="text"][list] {
|
|
|
641
642
|
@supports (appearance: base-select) {
|
|
642
643
|
select {
|
|
643
644
|
appearance: base-select;
|
|
645
|
+
|
|
644
646
|
option::checkmark {
|
|
645
|
-
content:
|
|
647
|
+
content: var(--icon-checkmark);
|
|
646
648
|
display: block;
|
|
647
649
|
width: 1rem;
|
|
648
650
|
height: 1rem;
|
|
649
651
|
}
|
|
652
|
+
|
|
650
653
|
option {
|
|
651
654
|
display: flex;
|
|
652
655
|
gap: var(--spacer-1);
|
|
653
|
-
padding: 0 var(--spacer-
|
|
654
|
-
border-radius: var(--radius-medium);
|
|
655
|
-
min-width: 5rem;
|
|
656
|
+
padding: 0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
|
|
656
657
|
font-weight: var(--body-medium-fontWeight);
|
|
657
658
|
color: var(--figma-color-text-menu);
|
|
658
|
-
|
|
659
|
-
|
|
659
|
+
position: relative;
|
|
660
|
+
&[hidden] {
|
|
661
|
+
display: none;
|
|
662
|
+
}
|
|
663
|
+
&:not(:checked):before {
|
|
664
|
+
content: "";
|
|
665
|
+
display: block;
|
|
666
|
+
position: absolute;
|
|
667
|
+
inset: 0 var(--spacer-2);
|
|
668
|
+
border-radius: var(--radius-medium);
|
|
669
|
+
z-index: -1;
|
|
670
|
+
background-color: transparent;
|
|
671
|
+
}
|
|
672
|
+
&:hover,
|
|
673
|
+
&:active,
|
|
674
|
+
&:focus {
|
|
675
|
+
background-color: transparent;
|
|
676
|
+
outline: 0;
|
|
677
|
+
&:before {
|
|
678
|
+
background-color: var(--figma-color-bg-menu-hover);
|
|
679
|
+
}
|
|
660
680
|
}
|
|
661
681
|
}
|
|
662
682
|
optgroup {
|
|
663
683
|
color: var(--figma-color-text-menu-secondary);
|
|
664
684
|
text-align: left;
|
|
685
|
+
position: relative;
|
|
686
|
+
padding: 0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
|
|
665
687
|
font-weight: var(--body-medium-fontWeight);
|
|
688
|
+
&::-internal-optgroup-label {
|
|
689
|
+
display: none;
|
|
690
|
+
}
|
|
666
691
|
legend {
|
|
667
692
|
padding: var(--spacer-1, 0.3rem) var(--spacer-1, 1rem);
|
|
668
693
|
}
|
|
694
|
+
option {
|
|
695
|
+
margin: 0 calc(var(--spacer-1) * -1);
|
|
696
|
+
margin-left: calc((var(--spacer-1) * 2 + var(--spacer-1)) * -1);
|
|
697
|
+
}
|
|
698
|
+
&:not(:first-child) {
|
|
699
|
+
margin-top: var(--spacer-2);
|
|
700
|
+
padding-top: var(--spacer-2);
|
|
701
|
+
|
|
702
|
+
&:before {
|
|
703
|
+
content: "";
|
|
704
|
+
display: block;
|
|
705
|
+
position: absolute;
|
|
706
|
+
left: 0;
|
|
707
|
+
right: 0;
|
|
708
|
+
top: 1px;
|
|
709
|
+
height: 1px;
|
|
710
|
+
background-color: var(--figma-color-border-menu);
|
|
711
|
+
margin-bottom: var(--spacer-2);
|
|
712
|
+
}
|
|
713
|
+
}
|
|
669
714
|
}
|
|
670
715
|
}
|
|
671
716
|
::picker-icon {
|
|
@@ -674,18 +719,17 @@ input[type="text"][list] {
|
|
|
674
719
|
|
|
675
720
|
::picker(select) {
|
|
676
721
|
appearance: base-select;
|
|
722
|
+
scrollbar-width: thin;
|
|
723
|
+
outline: 0;
|
|
724
|
+
scrollbar-color: var(--figma-color-text-menu-tertiary)
|
|
725
|
+
var(--figma-color-bg-menu);
|
|
677
726
|
border-radius: var(--radius-large);
|
|
678
|
-
background-color: var(--figma-color-bg-menu);
|
|
679
|
-
color: var(--figma-color-text-menu);
|
|
680
727
|
border: 0;
|
|
681
|
-
|
|
728
|
+
background-color: var(--figma-color-bg-menu);
|
|
729
|
+
padding: var(--spacer-2) 0;
|
|
682
730
|
box-shadow: var(--figma-elevation-400-menu-panel);
|
|
683
|
-
option {
|
|
684
|
-
background-color: red !important;
|
|
685
|
-
}
|
|
686
731
|
}
|
|
687
732
|
}
|
|
688
|
-
|
|
689
733
|
input[type="text"][list]:hover,
|
|
690
734
|
input[type="text"][list]:active,
|
|
691
735
|
input[type="text"][list]:focus,
|