github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-26 19:58:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 Style improvements in the swap panel (#7077)

Browse Source
This commit is contained in:
Luis de Dios 2025-08-07 07:40:38 +02:00 committed by GitHub
parent b91e955486
commit db9349e764
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/main/ui/components/search_bar.scss
View File

@ -56,6 +56,7 @@
@extend .button-tag;
border-radius: $br-8;
height: 100%;
padding-right: $s-8;
svg {
@extend .button-icon-small;
color: transparent;

13
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View File

@ -32,6 +32,11 @@
overflow: hidden;
cursor: pointer;
.variant-mark {
background-color: var(--color-background-tertiary);
border-radius: $br-8;
}
.cell-name {
@include bodySmallTypography;
@include textEllipsis;
@ -122,7 +127,7 @@
align-items: center;
column-gap: $s-8;
height: $s-44;
padding-right: $s-4;
padding: $s-2;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
@ -159,6 +164,7 @@
.enum-item-with-mark {
grid-template-columns: auto 1fr $s-24;
padding-right: $s-4;
}
.item-name {
@ -224,11 +230,6 @@
border: $s-2 solid var(--assets-item-border-color-drag);
}
.variant-mark {
background-color: var(--color-background-tertiary);
border-radius: $br-8;
}
.variant-mark-cell {
position: absolute;
right: $s-2;

35
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View File

@ -297,7 +297,7 @@
display: flex;
align-items: center;
margin-bottom: $s-4;
padding-right: $s-8;
padding-right: $s-4;
font-size: $s-12;
cursor: pointer;
width: 100%;
@ -306,6 +306,10 @@
background-color: var(--assets-item-background-color);
color: var(--assets-item-name-foreground-color);
.variant-icon {
background-color: none;
}
.component-name {
@include textEllipsis;
width: 80%;
@ -342,14 +346,14 @@
.component-grid {
display: grid;
grid-template-columns: repeat(2, $s-124);
grid-auto-rows: $s-124;
grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr));
gap: $s-4;
}
.grid-cell {
@include flexCenter;
place-items: center;
aspect-ratio: 1 / 1;
flex-wrap: wrap;
position: relative;
padding: $s-8;
@ -360,6 +364,10 @@
border: $s-4 solid var(--assets-component-current-border-color);
cursor: pointer;
.variant-icon {
background-color: var(--color-background-tertiary);
}
img {
height: auto;
width: auto;
@ -381,21 +389,24 @@
@include textEllipsis;
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: $s-2;
text-align: center;
left: $s-4;
bottom: $s-4;
height: calc($s-24 - $s-2);
width: calc(100% - 2 * $s-4);
padding: $s-2 $s-6;
column-gap: $s-4;
border-radius: $br-4;
background-color: var(--assets-item-name-background-color);
border: $s-1 solid transparent;
color: var(--assets-item-name-foreground-color);
direction: rtl;
}
&:hover {
background-color: var(--assets-item-background-color-hover);
.component-name {
display: block;
color: var(--assets-item-name-foreground-color-hover);
background: linear-gradient(to top, var(--assets-item-background-color-hover) 0%, transparent 100%);
background: var(--assets-item-background-color-hover);
}
}
@ -439,7 +450,6 @@
.component-swap {
padding-top: $s-12;
max-width: $s-248;
}
.component-swap-content {
@ -789,7 +799,6 @@
@include flexCenter;
height: $s-24;
width: $s-24;
background-color: var(--color-background-tertiary);
border-radius: $br-8;
order: 3;