github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-09 05:28:43 +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; @extend .button-tag;
border-radius: $br-8; border-radius: $br-8;
height: 100%; height: 100%;
padding-right: $s-8;
svg { svg {
@extend .button-icon-small; @extend .button-icon-small;
color: transparent; color: transparent;

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

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

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

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