Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-10 14:51:37 -05:00
Code Issues Activity

🐛 Fix gradient background image

Browse source
This commit is contained in:
Eva Marco 2024-03-11 11:41:49 +01:00
parent d860eac59f
commit 4ffaf6f996
5 changed files with 5 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/main-default.scss
View file

@ -62,6 +62,5 @@
@import "main/partials/tab-container";
@import "main/partials/user-settings";
@import "main/partials/workspace";
@import "main/partials/color-bullet";
@import "main/partials/exception-page";
@import "main/partials/signup-questions";

209
frontend/resources/styles/main/partials/color-bullet.scss
View file

@ -1,209 +0,0 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
.color-bullet {
border: 2px solid $color-gray-30;
position: relative;
width: var(--bullet-size);
height: var(--bullet-size);
&:hover {
border-color: $color-primary;
}
}
.color-cell {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr auto;
height: 100%;
justify-items: center;
width: 65px;
.color-bullet {
border: 2px solid $color-gray-30;
position: relative;
width: var(--bullet-size);
height: var(--bullet-size);
&:hover {
border-color: $color-primary;
}
}
& > * {
overflow: hidden;
}
}
.color-cell.current {
.color-bullet {
border-color: $color-gray-30;
}
}
ul.palette-menu .color-bullet {
width: 20px;
height: 20px;
border: 1px solid $color-gray-30;
margin-right: 5px;
background-size: 8px;
}
.color-cell.add-color .color-bullet {
align-items: center;
background-color: $color-gray-50;
border: 3px dashed $color-gray-30;
cursor: pointer;
display: flex;
justify-content: center;
margin-bottom: 1rem;
padding: 0.6rem;
svg {
fill: $color-gray-10;
height: 30px;
width: 30px;
}
}
.colorpicker-content .color-bullet {
grid-area: color;
width: 20px;
height: 20px;
border: 1px solid $color-gray-30;
background-size: 8px;
overflow: hidden;
}
.asset-section .asset-list-item .color-bullet {
border: 1px solid $color-gray-30;
height: 20px;
margin-right: $size-1;
width: 20px;
}
.tool-window-content .asset-list .asset-list-item {
&:hover {
.color-bullet {
border: 1px solid $color-primary;
}
}
}
.color-cell.add-color:hover .color-bullet {
border-color: $color-gray-30;
svg {
fill: $color-gray-30;
}
}
.color-bullet {
display: flex;
flex-direction: row;
border-radius: 50%;
& .color-bullet-wrapper {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
left center;
background-color: $color-white;
clip-path: circle(50%);
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
&.is-gradient {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
left center;
background-color: $color-white;
}
& .color-bullet-wrapper > * {
width: 100%;
height: 100%;
}
}
.color-data .color-bullet.multiple {
background: transparent;
&::before {
content: "?";
}
}
.color-data .color-bullet {
border: 1px solid $color-gray-30;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: $color-gray-10;
flex-shrink: 0;
height: 20px;
margin: 5px 4px 0 0;
width: 20px;
&.palette-th {
align-items: center;
border: 1px solid $color-gray-30;
display: flex;
justify-content: center;
svg {
fill: $color-gray-30;
height: 16px;
width: 16px;
}
&:hover {
border-color: $color-primary;
svg {
fill: $color-primary;
}
}
}
}
.colorpicker-content .libraries .selected-colors .color-bullet {
grid-area: auto;
margin-bottom: 0.25rem;
cursor: pointer;
&:hover {
border-color: $color-primary;
z-index: 10;
}
&.button {
background: $color-white;
display: flex;
align-items: center;
justify-content: center;
}
&.button svg {
width: 12px;
height: 12px;
fill: $color-gray-30;
}
&.plus-button svg {
width: 8px;
height: 8px;
fill: $color-black;
}
}
.color-bullet.is-not-library-color {
border-radius: $br3;
overflow: hidden;
& .color-bullet-wrapper {
clip-path: none;
}
}

4
frontend/src/app/main/ui/components/color_bullet.scss
View file

@ -39,13 +39,13 @@
}
}
&.is-gradient {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
left center;
background-color: var(--color-bullet-background-color);
transform: rotate(-90deg);
}
&.is-transparent {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
left center;
background-color: var(--color-bullet-background-color);
}

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

@ -19,7 +19,7 @@
height: 100%;
width: 100%;
border-radius: $br-6;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
left center;
}

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

@ -54,12 +54,13 @@
}
&.opacity {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
var(--background-repeat) center;
&::after {
content: "";
position: absolute;
border-radius: $br-6;
width: 100%;
height: 100%;
background: linear-gradient(