3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-27 01:47:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

Style select

Browse source
This commit is contained in:
Florian Schroedl 2024-05-17 09:05:18 +02:00
parent 8dd2ba7d78
commit e69bfb8c54
2 changed files with 40 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
View file

@ -185,8 +185,9 @@
[:& dropdown {:show (or is-open? false) [:& dropdown {:show (or is-open? false)
:on-close close-dropdown} :on-close close-dropdown}
[:ul {:class (stl/css :custom-select-dropdown) [:div {:class (stl/css :custom-select-dropdown)
:ref font-size-wrapper-ref} :ref select-wrapper-ref}
[:ul {:class (stl/css :custom-select-dropdown-list)}
(for [[index item] (map-indexed vector options)] (for [[index item] (map-indexed vector options)]
(if (= :separator item) (if (= :separator item)
[:li {:class (stl/css :separator) [:li {:class (stl/css :separator)
@ -199,5 +200,6 @@
:data-value value :data-value value
:on-click select-item} :on-click select-item}
[:span {:class (stl/css :label)} label] [:span {:class (stl/css :label)} label]
[:span {:class (stl/css :value)} value]
[:span {:class (stl/css :check-icon)} [:span {:class (stl/css :check-icon)}
i/tick]])))]]])) i/tick]])))]]]]))

25
frontend/src/app/main/ui/workspace/tokens/editable_select.scss
View file

@ -31,25 +31,44 @@
} }
} }
.custom-select-dropdown-list {
width: 100%;
max-width: 180px;
margin-bottom: 0;
}
.custom-select-dropdown { .custom-select-dropdown {
@extend .dropdown-wrapper; @extend .dropdown-wrapper;
max-height: $s-320; max-height: $s-320;
width: auto; width: auto;
margin-top: $s-4; margin-top: $s-4;
right: 0; right: 0;
left: auto; left: unset;
.separator { .separator {
margin: 0; margin: 0;
height: $s-12; height: $s-12;
} }
.dropdown-element { .dropdown-element {
@extend .dropdown-element-base; @extend .dropdown-element-base;
color: var(--menu-foreground-color-rest); color: var(--menu-foreground-color-rest);
padding: 0;
display: flex;
.label,
.value {
width: fit-content;
}
.label { .label {
flex-grow: 1;
width: 100%;
text-transform: unset; text-transform: unset;
flex: 1;
}
.value {
flex: 0.2;
text-align: right;
} }
.check-icon { .check-icon {