@rogieking/figui3 8.9.11 → 8.9.13
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/.cursor/skills/figui3/SKILL.md +3 -3
- package/.cursor/skills/figui3/reference.md +4 -3
- package/README.md +24 -0
- package/components.css +96 -31
- package/dist/components.css +1 -1
- package/dist/fig-editor.css +1 -1
- package/dist/fig.css +1 -1
- package/dist/fig.js +162 -3
- package/fig-editor.css +2 -91
- package/fig.js +523 -121
- package/package.json +1 -1
package/fig-editor.css
CHANGED
|
@@ -748,97 +748,8 @@ fig-select::part(listbox) {
|
|
|
748
748
|
height: max-content;
|
|
749
749
|
}
|
|
750
750
|
|
|
751
|
-
/* Vertical option
|
|
752
|
-
fig-
|
|
753
|
-
.fig-menu-options {
|
|
754
|
-
--fig-vertical-overflow-size: var(--spacer-4);
|
|
755
|
-
|
|
756
|
-
box-sizing: border-box;
|
|
757
|
-
display: flex;
|
|
758
|
-
flex-direction: column;
|
|
759
|
-
gap: 0;
|
|
760
|
-
width: 100%;
|
|
761
|
-
max-width: 100%;
|
|
762
|
-
max-height: calc(100vh - 1rem);
|
|
763
|
-
/* No block padding — sticky overflow buttons must sit flush to the popup edges. */
|
|
764
|
-
padding: 0;
|
|
765
|
-
overflow: hidden auto;
|
|
766
|
-
scrollbar-width: none;
|
|
767
|
-
|
|
768
|
-
&::-webkit-scrollbar {
|
|
769
|
-
display: none;
|
|
770
|
-
}
|
|
771
|
-
|
|
772
|
-
& > :not(.fig-overflow) {
|
|
773
|
-
flex-shrink: 0;
|
|
774
|
-
}
|
|
775
|
-
|
|
776
|
-
/* List breathing room (not on the scroller itself). */
|
|
777
|
-
& > :nth-child(1 of :not(.fig-overflow)) {
|
|
778
|
-
margin-top: var(--spacer-2);
|
|
779
|
-
}
|
|
780
|
-
|
|
781
|
-
& > :not(.fig-overflow):last-child,
|
|
782
|
-
& > :not(.fig-overflow):has(+ .fig-overflow-end) {
|
|
783
|
-
margin-bottom: var(--spacer-2);
|
|
784
|
-
}
|
|
785
|
-
|
|
786
|
-
& > .fig-overflow {
|
|
787
|
-
position: sticky;
|
|
788
|
-
left: 0;
|
|
789
|
-
flex: 0 0 var(--fig-vertical-overflow-size);
|
|
790
|
-
width: 100%;
|
|
791
|
-
height: var(--fig-vertical-overflow-size);
|
|
792
|
-
margin: 0;
|
|
793
|
-
z-index: 3;
|
|
794
|
-
/* Menu chrome — not option hover (bg-menu-hover is brand blue). */
|
|
795
|
-
color: var(--figma-color-text-menu);
|
|
796
|
-
background: var(--figma-color-bg-menu) !important;
|
|
797
|
-
|
|
798
|
-
&::before {
|
|
799
|
-
inset: 0;
|
|
800
|
-
border-radius: 0;
|
|
801
|
-
background: var(--figma-color-bg-menu) !important;
|
|
802
|
-
}
|
|
803
|
-
|
|
804
|
-
&:hover::before {
|
|
805
|
-
background: light-dark(
|
|
806
|
-
rgba(0, 0, 0, 0.06),
|
|
807
|
-
rgba(255, 255, 255, 0.08)
|
|
808
|
-
)
|
|
809
|
-
!important;
|
|
810
|
-
}
|
|
811
|
-
|
|
812
|
-
&:hover {
|
|
813
|
-
color: var(--figma-color-text-menu);
|
|
814
|
-
}
|
|
815
|
-
}
|
|
816
|
-
|
|
817
|
-
& > .fig-overflow-start {
|
|
818
|
-
order: -1;
|
|
819
|
-
top: 0;
|
|
820
|
-
margin-block-end: calc(-1 * var(--fig-vertical-overflow-size));
|
|
821
|
-
|
|
822
|
-
&::before {
|
|
823
|
-
border-radius: var(--radius-large) var(--radius-large) 0 0;
|
|
824
|
-
}
|
|
825
|
-
|
|
826
|
-
.fig-overflow-chevron {
|
|
827
|
-
rotate: 180deg;
|
|
828
|
-
}
|
|
829
|
-
}
|
|
830
|
-
|
|
831
|
-
& > .fig-overflow-end {
|
|
832
|
-
order: 1;
|
|
833
|
-
bottom: 0;
|
|
834
|
-
margin-block-start: calc(-1 * var(--fig-vertical-overflow-size));
|
|
835
|
-
|
|
836
|
-
&::before {
|
|
837
|
-
border-radius: 0 0 var(--radius-large) var(--radius-large);
|
|
838
|
-
}
|
|
839
|
-
}
|
|
840
|
-
|
|
841
|
-
}
|
|
751
|
+
/* Vertical option-panel overflow chrome lives in fig.js (figVerticalOverflowSheet)
|
|
752
|
+
and is adopted on document + fig-menu shadow. */
|
|
842
753
|
|
|
843
754
|
fig-select-options > :is(fig-separator, fig-menu-separator) {
|
|
844
755
|
/* Align labels with select option text after the checkmark column. */
|