mirror of
https://github.com/penpot/penpot.git
synced 2025-01-10 08:50:57 -05:00
add color palette slider scss
This commit is contained in:
parent
3f1ae0feaa
commit
bb28ab78d6
2 changed files with 17 additions and 8 deletions
|
@ -85,6 +85,14 @@
|
||||||
.color-palette-content {
|
.color-palette-content {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-palette-inside {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
transition: all .6s ease;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -38,14 +38,15 @@
|
||||||
(st/emit! (uds/update-selected-shapes-stroke {:color color}))
|
(st/emit! (uds/update-selected-shapes-stroke {:color color}))
|
||||||
(st/emit! (uds/update-selected-shapes-fill {:color color}))))]
|
(st/emit! (uds/update-selected-shapes-fill {:color color}))))]
|
||||||
[:div.color-palette-content
|
[:div.color-palette-content
|
||||||
(for [hex-color colors
|
[:div.color-palette-inside
|
||||||
:let [rgb-vec (hex->rgb hex-color)
|
(for [hex-color colors
|
||||||
rgb-color (apply str "" (interpose ", " rgb-vec))]]
|
:let [rgb-vec (hex->rgb hex-color)
|
||||||
[:div.color-cell {:key (str hex-color)
|
rgb-color (apply str "" (interpose ", " rgb-vec))]]
|
||||||
:on-click #(select-color % hex-color)}
|
[:div.color-cell {:key (str hex-color)
|
||||||
[:span.color {:style {:background hex-color}}]
|
:on-click #(select-color % hex-color)}
|
||||||
[:span.color-text hex-color]
|
[:span.color {:style {:background hex-color}}]
|
||||||
[:span.color-text rgb-color]])]))
|
[:span.color-text hex-color]
|
||||||
|
[:span.color-text rgb-color]])]]))
|
||||||
|
|
||||||
(mx/defcs palette
|
(mx/defcs palette
|
||||||
{:mixins [mx/static mx/reactive (mx/local)]}
|
{:mixins [mx/static mx/reactive (mx/local)]}
|
||||||
|
|
Loading…
Reference in a new issue