Introduce relaxed, regular and condensed button for specify height

This commit is contained in:
Jean-Baptiste Bellet
2023-08-16 11:27:00 +02:00
parent 5de0d79ca2
commit f5e7738c78
5 changed files with 20 additions and 14 deletions

View File

@@ -104,8 +104,8 @@
}
#sort {
line-height: $btn-medium-height;
height: $btn-medium-height;
line-height: $btn-relaxed-height;
height: $btn-relaxed-height;
.with-dropdown {
display: flex;
@@ -150,8 +150,8 @@
background-color: $lighter-grey;
border: 1px solid $lighter-grey;
border-radius: 4px;
height: $btn-height;
line-height: $btn-height;
height: $btn-relaxed-height;
line-height: $btn-relaxed-height;
&:has(input:focus),
&:has(input:active) {
@@ -176,7 +176,7 @@
.categories {
select {
width: 150px;
height: $btn-height;
height: $btn-relaxed-height;
}
}

View File

@@ -12,8 +12,8 @@ button:not(.plain):not(.trix-button),
border: 1px solid $color-btn-bg;
color: $color-btn-text;
text-transform: uppercase;
line-height: 40px;
height: 40px;
line-height: $btn-regular-height - 2px; // remove 2px to compensate for border
height: $btn-regular-height;
font-weight: bold;
&:before {
@@ -79,9 +79,14 @@ button:not(.plain):not(.trix-button),
}
}
&.medium {
line-height: $btn-medium-height;
height: $btn-medium-height;
&.condensed {
line-height: $btn-condensed-height - 2px; // remove 2px to compensate for border
height: $btn-condensed-height;
}
&.relaxed {
line-height: $btn-relaxed-height - 2px; // remove 2px to compensate for border
height: $btn-relaxed-height;
}
.badge {

View File

@@ -155,5 +155,6 @@ $border-radius: 4px !default;
$font-weight-bold: 600 !default;
$font-weight-normal: 400 !default;
$btn-height: 40px !default;
$btn-medium-height: 32px !default;
$btn-relaxed-height: 40px !default;
$btn-regular-height: 32px !default;
$btn-condensed-height: 26px !default;