johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🐛 Fix underline text in template card at carrusel

Browse Source
This commit is contained in:
Juan de la Cruz
2025-09-26 09:56:05 +02:00
committed by GitHub
parent bd665f70bf
commit a39a127f03
1 changed files with 84 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
frontend/src/app/main/ui/dashboard/templates.scss
View File

@@ -4,32 +4,35 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated; @use "ds/_borders.scss" as *;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as t;
.dashboard-templates-section { .dashboard-templates-section {
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
bottom: 0; inset-block-end: 0;
border-bottom-left-radius: deprecated.$br-8; border-end-start-radius: $br-8;
border-bottom-right-radius: deprecated.$br-8; border-end-end-radius: $br-8;
border-top-right-radius: deprecated.$br-8; border-start-end-radius: $br-8;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: deprecated.$s-244; height: px2rem(244);
justify-content: flex-end; justify-content: flex-end;
margin-left: deprecated.$s-6; margin-inline-start: px2rem(6);
margin-right: deprecated.$s-6; margin-inline-end: px2rem(6);
margin-bottom: deprecated.$s-6; margin-block-end: px2rem(6);
position: absolute; position: absolute;
transition: bottom 300ms; transition: bottom 300ms;
width: calc(100% - deprecated.$s-12); width: calc(100% - $sz-12);
pointer-events: none; pointer-events: none;
&.collapsed { &.collapsed {
bottom: calc(-1 * deprecated.$s-228); inset-block-end: calc(-1 * px2rem(228));
background-color: transparent; background-color: transparent;
transition: bottom 300ms; transition: bottom 300ms;
.title-btn { .title-btn {
border-bottom-right-radius: deprecated.$br-8; border-end-end-radius: $br-8;
border-bottom-left-radius: deprecated.$br-8; border-end-start-radius: $br-8;
} }
.content, .content,
.content-description { .content-description {
@@ -40,56 +43,54 @@
.title { .title {
pointer-events: all; pointer-events: all;
width: deprecated.$s-420; width: px2rem(420);
top: calc(-1 * deprecated.$s-40); inset-block-start: calc(-1 * $sz-40);
text-align: right; text-align: right;
height: deprecated.$s-56; height: px2rem(56);
position: absolute; position: absolute;
} }
.title-btn { .title-btn {
border: none; border: none;
cursor: pointer; cursor: pointer;
height: deprecated.$s-56; height: px2rem(56);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border-top-left-radius: deprecated.$br-8; border-start-start-radius: $br-8;
border-top-right-radius: deprecated.$br-8; border-start-end-radius: $br-8;
position: relative; position: relative;
z-index: deprecated.$z-index-1; z-index: var(--z-index-auto);
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
width: 100%; width: 100%;
} }
.title-text { .title-text {
@include t.use-typography("body-large");
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
line-height: 1.2; margin-inline-start: var(--sp-m);
font-size: deprecated.$fs-16; margin-inline-end: var(--sp-s);
margin-left: deprecated.$s-12;
margin-right: deprecated.$s-8;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
font-weight: deprecated.$fw400;
} }
.title-icon-container { .title-icon-container {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: auto; margin-inline-start: auto;
margin-right: deprecated.$s-8; margin-inline-end: var(--sp-s);
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
} }
.title-icon { .title-icon {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: auto; margin-inline-start: auto;
margin-right: deprecated.$s-8; margin-inline-end: var(--sp-s);
transform: rotate(90deg); transform: rotate(90deg);
} }
.title-icon-text { .title-icon-text {
margin-right: deprecated.$s-8; margin-inline-end: var(--sp-s);
} }
.title-icon-collapsed { .title-icon-collapsed {
@@ -97,27 +98,34 @@
} }
.arrow-icon { .arrow-icon {
@extend .button-icon; display: flex;
justify-content: center;
align-items: center;
height: $sz-16;
width: $sz-16;
color: transparent;
fill: none;
stroke-width: $b-1;
stroke: var(--color-foreground-secondary); stroke: var(--color-foreground-secondary);
} }
.move-button { .move-button {
position: absolute; position: absolute;
top: deprecated.$s-96; inset-block-start: px2rem(96);
border: deprecated.$s-2 solid var(--color-foreground-secondary); border: $b-2 solid var(--color-foreground-secondary);
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
width: deprecated.$s-36; width: $sz-36;
height: deprecated.$s-36; height: $sz-36;
cursor: pointer; cursor: pointer;
background-color: var(--button-secondary-background-color-rest); background-color: var(--color-background-tertiary);
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: deprecated.$s-2 solid var(--color-background-tertiary); border: $b-2 solid var(--color-background-tertiary);
background-color: var(--color-accent-primary); background-color: var(--color-accent-primary);
.arrow-icon { .arrow-icon {
stroke: var(--color-background-tertiary); stroke: var(--color-background-tertiary);
@@ -126,31 +134,31 @@
} }
.move-left { .move-left {
left: 0; inset-inline-start: 0;
margin-left: deprecated.$s-44; margin-inline-start: px2rem(44);
transform: rotate(180deg); transform: rotate(180deg);
} }
.move-right { .move-right {
right: 0; inset-inline-end: 0;
margin-right: deprecated.$s-44; margin-inline-end: px2rem(44);
} }
.content-description { .content-description {
font-size: deprecated.$fs-14; @include t.use-typography("body-medium");
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
margin-bottom: -8px; margin-block-end: calc(-1 * var(--sp-s));
margin-top: deprecated.$s-16; margin-block-start: var(--sp-l);
margin-left: deprecated.$s-16; margin-inline-start: var(--sp-l);
visibility: visible; visibility: visible;
} }
.content { .content {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-276, deprecated.$s-276)); grid-template-columns: repeat(auto-fill, minmax(px2rem(276), px2rem(276)));
grid-auto-flow: column; grid-auto-flow: column;
pointer-events: all; pointer-events: all;
height: deprecated.$s-228; height: px2rem(228);
overflow: scroll hidden; overflow: scroll hidden;
scroll-behavior: smooth; scroll-behavior: smooth;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
@@ -159,8 +167,8 @@
} }
.card-container { .card-container {
width: deprecated.$s-276; width: px2rem(276);
margin-top: deprecated.$s-20; margin-block-start: var(--sp-xl);
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
background-color: transparent; background-color: transparent;
@@ -170,15 +178,16 @@
} }
.template-card { .template-card {
@include t.use-typography("body-large");
display: inline-block; display: inline-block;
width: deprecated.$s-256; width: px2rem(256);
font-size: deprecated.$fs-16;
cursor: pointer; cursor: pointer;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
padding: 0 deprecated.$s-4 deprecated.$s-8 deprecated.$s-4; padding: 0 var(--sp-xs) var(--sp-s) var(--sp-xs);
border-radius: deprecated.$br-8; border-radius: $br-8;
border: deprecated.$s-2 solid transparent; border: $b-2 solid transparent;
&:hover { &:hover {
text-decoration: none;
border-color: var(--color-accent-primary); border-color: var(--color-accent-primary);
.download-icon { .download-icon {
stroke: var(--color-accent-primary); stroke: var(--color-accent-primary);
@@ -191,29 +200,28 @@
.img-container { .img-container {
width: 100%; width: 100%;
height: deprecated.$s-136; height: px2rem(136);
margin-bottom: deprecated.$s-8; margin-block-end: var(--sp-s);
border-radius: deprecated.$br-5; border-radius: px2rem(5);
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
img { img {
border-radius: deprecated.$br-4; border-radius: $br-4;
} }
} }
.card-name { .card-name {
padding: 0 deprecated.$s-6; padding: 0 px2rem(6);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: deprecated.$s-24; height: $sz-24;
align-items: center; align-items: center;
} }
.card-text { .card-text {
font-weight: deprecated.$fw400; @include t.use-typography("body-large");
font-size: deprecated.$fs-16;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
width: 90%; width: 90%;
@@ -222,24 +230,30 @@
} }
.download-icon { .download-icon {
@extend .button-icon; display: flex;
justify-content: center;
align-items: center;
height: $sz-16;
width: $sz-16;
color: transparent;
fill: none;
stroke-width: $b-1;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
.template-link { .template-link {
border: deprecated.$s-2 solid transparent; border: $b-2 solid transparent;
margin: deprecated.$s-32; margin: var(--sp-xxxl);
padding: deprecated.$s-32 0; padding: var(--sp-xxxl) 0;
} }
.template-link-title { .template-link-title {
font-size: deprecated.$fs-14; @include t.use-typography("body-medium");
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
font-weight: deprecated.$fw400;
} }
.template-link-text { .template-link-text {
font-size: deprecated.$fs-12; @include t.use-typography("body-small");
margin-top: deprecated.$s-8; margin-block-start: var(--sp-s);
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
} }