@rogieking/figui3 1.4.6 → 1.4.7
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 +8 -8
- 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
|
@@ -437,7 +437,7 @@
|
|
|
437
437
|
color-scheme: light dark;
|
|
438
438
|
/* Icons */
|
|
439
439
|
--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
|
-
|
|
440
|
+
--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
441
|
/* Elevations */
|
|
442
442
|
--figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.3),
|
|
443
443
|
0px 1px 3px 0px rgba(0, 0, 0, 0.15);
|
|
@@ -641,12 +641,14 @@ input[type="text"][list] {
|
|
|
641
641
|
@supports (appearance: base-select) {
|
|
642
642
|
select {
|
|
643
643
|
appearance: base-select;
|
|
644
|
+
|
|
644
645
|
option::checkmark {
|
|
645
|
-
content:
|
|
646
|
+
content: var(--icon-checkmark);
|
|
646
647
|
display: block;
|
|
647
648
|
width: 1rem;
|
|
648
649
|
height: 1rem;
|
|
649
650
|
}
|
|
651
|
+
|
|
650
652
|
option {
|
|
651
653
|
display: flex;
|
|
652
654
|
gap: var(--spacer-1);
|
|
@@ -674,18 +676,16 @@ input[type="text"][list] {
|
|
|
674
676
|
|
|
675
677
|
::picker(select) {
|
|
676
678
|
appearance: base-select;
|
|
679
|
+
scrollbar-width: thin;
|
|
680
|
+
scrollbar-color: var(--figma-color-text-menu-tertiary)
|
|
681
|
+
var(--figma-color-bg-menu);
|
|
677
682
|
border-radius: var(--radius-large);
|
|
678
|
-
background-color: var(--figma-color-bg-menu);
|
|
679
|
-
color: var(--figma-color-text-menu);
|
|
680
683
|
border: 0;
|
|
684
|
+
background-color: var(--figma-color-bg-menu);
|
|
681
685
|
padding: var(--spacer-2);
|
|
682
686
|
box-shadow: var(--figma-elevation-400-menu-panel);
|
|
683
|
-
option {
|
|
684
|
-
background-color: red !important;
|
|
685
|
-
}
|
|
686
687
|
}
|
|
687
688
|
}
|
|
688
|
-
|
|
689
689
|
input[type="text"][list]:hover,
|
|
690
690
|
input[type="text"][list]:active,
|
|
691
691
|
input[type="text"][list]:focus,
|