Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-15 11:38:24 -05:00
Code Issues Activity

🐛 Fix visual problem with gradient stops

Browse source
This commit is contained in:
alonso.torres 2024-02-02 15:36:18 +01:00 • committed by Andrey Antukh
parent e97245c762
commit 769aa16cc4
2 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
View file

@ -32,8 +32,7 @@
:selected (= editing-stop offset)) :selected (= editing-stop offset))
:data-value (str offset) :data-value (str offset)
:on-click on-select-stop :on-click on-select-stop
:style {:left (dm/str (* offset 100) "%") :style {:left (dm/str (* offset 100) "%")}
:backgroundColor hex}
:key (dm/str offset)} :key (dm/str offset)}
[:div {:class (stl/css :gradient-stop-color) [:div {:class (stl/css :gradient-stop-color)

15
frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
View file

@ -32,22 +32,31 @@
.gradient-stop-wrapper { .gradient-stop-wrapper {
position: absolute; position: absolute;
width: calc(100% - 2rem); width: calc(100% - $s-40);
left: $s-20;
} }
.gradient-stop { .gradient-stop {
position: absolute; position: absolute;
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
padding: 0;
width: $s-16; width: $s-16;
height: $s-24; height: $s-24;
border-radius: $br-4; border-radius: $br-4;
margin-top: calc(-1 * $s-2); margin-top: calc(-1 * $s-2);
margin-left: calc(-1 * $s-8); margin-left: calc(-1 * $s-8);
border: $s-2 solid var(--colorpicker-handlers-color); border: $s-2 solid var(--colorpicker-handlers-color);
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=");
left center; background-position: left center;
background-size: 8px;
&.selected { &.selected {
border: $s-2 solid var(--colorpicker-details-color-selected); border: $s-2 solid var(--colorpicker-details-color-selected);
} }
} }
.gradient-stop-color,
.gradient-stop-alpha {
width: 100%;
height: 100%;
}