3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-20 12:56:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 allow colorpicker to fill inline space

Browse source
This commit is contained in:
Xaviju 2024-11-18 15:11:05 +01:00
parent 16a90f5e17
commit a77dd138b8
3 changed files with 26 additions and 24 deletions
frontend/src/app/main/ui/workspace/colorpicker
ramp.scssslider_selector.cljsslider_selector.scss

4
frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
View file

@ -47,5 +47,7 @@
} }
.sliders-wrapper { .sliders-wrapper {
@include flexColumn; display: flex;
flex-direction: column;
flex: 1;
} }

4
frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
View file

@ -51,7 +51,7 @@
value (+ min-value (* unit-value (- max-value min-value)))] value (+ min-value (* unit-value (- max-value min-value)))]
(on-change value))))] (on-change value))))]
[:div {:class (stl/css-case :opacity-wrapper (= type :opacity))}
[:div {:class (dm/str class (stl/css-case :vertical vertical? [:div {:class (dm/str class (stl/css-case :vertical vertical?
:slider-selector true :slider-selector true
:hue (= type :hue) :hue (= type :hue)
@ -74,4 +74,4 @@
style-horizontal (obj/merge! #js {:left value-percent-str} style-common) style-horizontal (obj/merge! #js {:left value-percent-str} style-common)
style-vertical (obj/merge! #js {:bottom value-percent-str} style-common)] style-vertical (obj/merge! #js {:bottom value-percent-str} style-common)]
[:div {:class (stl/css :handler) [:div {:class (stl/css :handler)
:style (if vertical? style-vertical style-horizontal)}])]])) :style (if vertical? style-vertical style-horizontal)}])]))

2
frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
View file

@ -17,7 +17,7 @@
position: relative; position: relative;
align-self: center; align-self: center;
height: $s-24; height: $s-24;
width: $s-200; inline-size: 100%;
border: $s-2 solid var(--colorpicker-details-color); border: $s-2 solid var(--colorpicker-details-color);
border-radius: $br-6; border-radius: $br-6;
background: linear-gradient( background: linear-gradient(