scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-440) implemented changes to buttons according to figma

Browse Source
This commit is contained in:
Erik Tiekstra
2024-09-27 11:34:14 +02:00
parent d2121a3fed
commit ea1a175c41
6 changed files with 50 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/TempDesignSystem/Button/button.module.css
View File

@@ -1,7 +1,6 @@
.btn {
background: none;
/* No variable yet for radius 50px */
border-radius: 50px;
border-radius: var(--Corner-radius-Rounded);
cursor: pointer;
margin: 0;
padding: 0;
@@ -10,12 +9,12 @@
background-color 300ms ease,
color 300ms ease;
/* TODO: Waiting for variables for buttons from Design team */
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500;
line-height: 24px;
line-height: var(--typography-Body-Bold-lineHeight);
letter-spacing: 0.6%;
text-decoration: none;
}
.wrapping {
@@ -23,6 +22,10 @@
padding-right: 0 !important;
}
.fullWidth {
width: 100%;
}
/* INTENT */
.primary,
a.primary {
@@ -70,20 +73,32 @@ a.default {
/* SIZES */
.btn.small {
font-size: var(--typography-Caption-Bold-fontSize);
line-height: var(--typography-Caption-Bold-lineHeight);
gap: var(--Spacing-x-quarter);
height: 40px;
padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
}
.btn.small.secondary {
padding: var(--Spacing-x1) var(--Spacing-x2);
}
.btn.medium {
gap: var(--Spacing-x-half);
height: 48px;
padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
}
.medium.secondary {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
}
.btn.large {
gap: var(--Spacing-x-half);
height: 56px;
padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); /* Special case padding to adjust the missing border */
}
.large.secondary {
gap: var(--Spacing-x-half);
padding: var(--Spacing-x2) var(--Spacing-x3);
}