Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 02:28:18 -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))
:data-value (str offset)
:on-click on-select-stop
:style {:left (dm/str (* offset 100) "%")
:backgroundColor hex}
:style {:left (dm/str (* offset 100) "%")}
:key (dm/str offset)}
[: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 {
position: absolute;
width: calc(100% - 2rem);
width: calc(100% - $s-40);
left: $s-20;
}
.gradient-stop {
position: absolute;
display: grid;
grid-template-columns: 50% 50%;
padding: 0;
width: $s-16;
height: $s-24;
border-radius: $br-4;
margin-top: calc(-1 * $s-2);
margin-left: calc(-1 * $s-8);
border: $s-2 solid var(--colorpicker-handlers-color);
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
left center;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=");
background-position: left center;
background-size: 8px;
&.selected {
border: $s-2 solid var(--colorpicker-details-color-selected);
}
}
.gradient-stop-color,
.gradient-stop-alpha {
width: 100%;
height: 100%;
}