3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-30 16:47:01 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Add new css styles

Browse source
This commit is contained in:
elhombretecla 2025-03-11 14:38:12 +01:00 • committed by Marina López
parent 0ae57a017e
commit fd753fb262
1 changed files with 25 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/app/main/ui/dashboard/templates.scss
View file

@ -88,26 +88,30 @@
.arrow-icon { .arrow-icon {
@extend .button-icon; @extend .button-icon;
stroke: var(--icon-foreground); stroke: var(--color-foreground-primary);
} }
.move-button { .move-button {
position: absolute; position: absolute;
top: $s-136; top: $s-80;
border: $s-2 solid var(--color-foreground-secondary); border: $s-2 solid var(--button-secondary-background-color-rest);
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
width: $s-36; width: $s-36;
height: $s-36; height: $s-36;
cursor: pointer; cursor: pointer;
background-color: var(--color-foreground-primary); background-color: var(--button-secondary-background-color-rest);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
pointer-events: all; pointer-events: all;
&:hover { &:hover {
border: $s-2 solid var(--color-accent-tertiary); border: $s-2 solid var(--color-background-tertiary);
background-color: var(--color-accent-primary);
.arrow-icon {
stroke: var(--color-background-tertiary);
}
} }
} }
@ -160,18 +164,24 @@
font-size: $fs-16; font-size: $fs-16;
cursor: pointer; cursor: pointer;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
padding: $s-3 $s-6 $s-16 $s-6; padding: 0 $s-4 $s-8 $s-4;
border-radius: $br-8; border-radius: $br-8;
border: $s-2 solid transparent;
&:hover { &:hover {
background-color: var(--color-background-tertiary); border-color: var(--color-accent-primary);
.download-icon {
stroke: var(--color-accent-primary);
}
.card-text {
color: var(--color-accent-primary);
}
} }
} }
.img-container { .img-container {
width: 100%; width: 100%;
height: $s-136; height: $s-136;
margin-bottom: $s-16; margin-bottom: $s-8;
border-radius: $br-5; border-radius: $br-5;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -191,8 +201,13 @@
} }
.card-text { .card-text {
font-weight: $fw500; font-weight: $fw400;
font-size: $fs-16; font-size: $fs-16;
white-space: nowrap;
overflow: hidden;
width: 90%;
text-overflow: ellipsis;
text-align: left;
} }
.download-icon { .download-icon {