@rogieking/figui3 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/example.html +15 -0
- package/fig.css +60 -4
- package/package.json +1 -1
package/example.html
CHANGED
|
@@ -19,12 +19,27 @@
|
|
|
19
19
|
</head>
|
|
20
20
|
|
|
21
21
|
<body>
|
|
22
|
+
|
|
23
|
+
|
|
22
24
|
<fig-header>
|
|
23
25
|
|
|
24
26
|
<h2><label>Effects/</label>UI3 Components</h2>
|
|
25
27
|
</fig-header>
|
|
26
28
|
<fig-content>
|
|
27
29
|
|
|
30
|
+
<select>
|
|
31
|
+
<optgroup label="Numbers">
|
|
32
|
+
<legend>Numbers</legend>
|
|
33
|
+
<option>One</option>
|
|
34
|
+
<option>Two</option>
|
|
35
|
+
</optgroup>
|
|
36
|
+
<optgroup label="Fruits">
|
|
37
|
+
<legend>Fruits</legend>
|
|
38
|
+
<option>Apple</option>
|
|
39
|
+
<option>Banana</option>
|
|
40
|
+
</optgroup>
|
|
41
|
+
</select>
|
|
42
|
+
|
|
28
43
|
<fig-slider min="-1"
|
|
29
44
|
max="1"
|
|
30
45
|
name="u_thickness"
|
package/fig.css
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--figma-color-bg: #ffffff;
|
|
3
3
|
--figma-color-bg-brand: #0d99ff;
|
|
4
|
-
|
|
4
|
+
--figma-color-bg-menu: #1e1e1e;
|
|
5
|
+
--figma-color-bg-menu-hover: #0c8ce9;
|
|
5
6
|
--figma-color-bg-brand-hover: #007be5;
|
|
6
7
|
--figma-color-bg-brand-pressed: #007be5;
|
|
7
8
|
--figma-color-bg-brand-secondary: #0768cf;
|
|
@@ -424,6 +425,9 @@
|
|
|
424
425
|
--elevation-500-modal-window: 0px 0px 0.5px rgba(0, 0, 0, 0.08),
|
|
425
426
|
0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15);
|
|
426
427
|
|
|
428
|
+
--figma-elevation-400-menu-panel: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.12),
|
|
429
|
+
0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
|
|
430
|
+
|
|
427
431
|
--figma-elevation-500-modal-window: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
|
|
428
432
|
0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
|
|
429
433
|
|
|
@@ -450,6 +454,12 @@
|
|
|
450
454
|
0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
|
|
451
455
|
--figma-color-bg-ghost-hover: rgba(255, 255, 255, 0.05);
|
|
452
456
|
--figma-color-bordertranslucent: rgba(255, 255, 255, 0.1);
|
|
457
|
+
--figma-elevation-400-menu-panel: 0px 0.5px 0px 0px
|
|
458
|
+
rgba(255, 255, 255, 0.08) inset,
|
|
459
|
+
0px 10px 16px 0px rgba(0, 0, 0, 0.35),
|
|
460
|
+
0px 0px 0.5px 0px rgba(255, 255, 255, 0.35) inset,
|
|
461
|
+
0px 2px 5px 0px rgba(0, 0, 0, 0.35);
|
|
462
|
+
|
|
453
463
|
--figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
|
|
454
464
|
0px 3px 5px rgba(0, 0, 0, 0.35),
|
|
455
465
|
inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
|
|
@@ -601,9 +611,9 @@ select,
|
|
|
601
611
|
input[type="text"][list] {
|
|
602
612
|
height: var(--spacer-4);
|
|
603
613
|
padding: 0 calc(var(--spacer-2) - 1px);
|
|
604
|
-
appearance: none;
|
|
605
614
|
border-radius: var(--radius-medium);
|
|
606
615
|
display: flex;
|
|
616
|
+
appearance: none;
|
|
607
617
|
align-items: center;
|
|
608
618
|
flex: 1 0 0;
|
|
609
619
|
border: 0;
|
|
@@ -625,6 +635,53 @@ input[type="text"][list] {
|
|
|
625
635
|
}
|
|
626
636
|
}
|
|
627
637
|
|
|
638
|
+
@supports (appearance: base-select) {
|
|
639
|
+
select {
|
|
640
|
+
appearance: base-select;
|
|
641
|
+
option::checkmark {
|
|
642
|
+
content: 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");
|
|
643
|
+
display: block;
|
|
644
|
+
width: 1rem;
|
|
645
|
+
height: 1rem;
|
|
646
|
+
}
|
|
647
|
+
option {
|
|
648
|
+
display: flex;
|
|
649
|
+
gap: var(--spacer-1);
|
|
650
|
+
padding: 0 var(--spacer-2) 0 var(--spacer-1);
|
|
651
|
+
border-radius: var(--radius-medium);
|
|
652
|
+
min-width: 5rem;
|
|
653
|
+
font-weight: var(--body-medium-fontWeight);
|
|
654
|
+
color: var(--figma-color-text);
|
|
655
|
+
&:hover {
|
|
656
|
+
background-color: var(--figma-color-bg-menu-hover);
|
|
657
|
+
}
|
|
658
|
+
}
|
|
659
|
+
optgroup {
|
|
660
|
+
color: var(--figma-color-text-secondary);
|
|
661
|
+
font-weight: var(--body-medium-fontWeight);
|
|
662
|
+
legend {
|
|
663
|
+
padding: var(--spacer-1, 0.3rem) var(--spacer-1, 1rem);
|
|
664
|
+
}
|
|
665
|
+
}
|
|
666
|
+
}
|
|
667
|
+
::picker-icon {
|
|
668
|
+
display: none;
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
::picker(select) {
|
|
672
|
+
appearance: base-select;
|
|
673
|
+
border-radius: var(--radius-large);
|
|
674
|
+
background-color: var(--figma-color-bg-menu);
|
|
675
|
+
color: var(--figma-color-text);
|
|
676
|
+
border: 0;
|
|
677
|
+
padding: var(--spacer-2);
|
|
678
|
+
box-shadow: var(--figma-elevation-400-menu-panel);
|
|
679
|
+
option {
|
|
680
|
+
background-color: red !important;
|
|
681
|
+
}
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
|
|
628
685
|
input[type="text"][list]:hover,
|
|
629
686
|
input[type="text"][list]:active,
|
|
630
687
|
input[type="text"][list]:focus,
|
|
@@ -2255,8 +2312,7 @@ fig-segmented-control {
|
|
|
2255
2312
|
display: inline-flex;
|
|
2256
2313
|
align-items: stretch;
|
|
2257
2314
|
|
|
2258
|
-
&
|
|
2259
|
-
& > label {
|
|
2315
|
+
& fig-segment {
|
|
2260
2316
|
flex: 1;
|
|
2261
2317
|
display: flex;
|
|
2262
2318
|
align-items: center;
|