Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-07 23:08:24 -05:00
Code Issues 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
Show stats 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)
:on-close close-dropdown}
[:ul {:class (stl/css :custom-select-dropdown)
:ref font-size-wrapper-ref}
[:div {:class (stl/css :custom-select-dropdown)
:ref select-wrapper-ref}
[:ul {:class (stl/css :custom-select-dropdown-list)}
(for [[index item] (map-indexed vector options)]
(if (= :separator item)
[:li {:class (stl/css :separator)
@ -199,5 +200,6 @@
:data-value value
:on-click select-item}
[:span {:class (stl/css :label)} label]
[:span {:class (stl/css :value)} value]
[: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 {
@extend .dropdown-wrapper;
max-height: $s-320;
width: auto;
margin-top: $s-4;
right: 0;
left: auto;
left: unset;
.separator {
margin: 0;
height: $s-12;
}
.dropdown-element {
@extend .dropdown-element-base;
color: var(--menu-foreground-color-rest);
padding: 0;
display: flex;
.label,
.value {
width: fit-content;
}
.label {
flex-grow: 1;
width: 100%;
text-transform: unset;
flex: 1;
}
.value {
flex: 0.2;
text-align: right;
}
.check-icon {