Add large size buttons variant and make disabled state global

This commit is contained in:
2021-10-18 11:14:02 +02:00
parent 7ca8366cd5
commit d9648f7513
5 changed files with 36 additions and 22 deletions

View File

@@ -23,7 +23,7 @@ strong {
em {
font-style: normal;
}
figure, p, dl, dt, dd, ul, li {
figure, p, dl, dt, dd, ul, ol, li {
margin: 0;
padding: 0;
}
@@ -37,6 +37,10 @@ button {
background: none;
border: none;
cursor: pointer;
&[disabled] {
cursor: not-allowed;
}
}
// Accessibility outline

View File

@@ -22,7 +22,10 @@
margin-right: 12px;
}
// Size variants
/*
** Size variants
*/
// Small
&--small {
height: 40px;
@@ -34,10 +37,34 @@
}
}
// Color Variants
// Large
&--large {
height: 56px;
font-size: rem(16px);
@include bp (sm) {
height: 72px;
height: 72px;
padding: 0 40px;
font-size: rem(18px);
}
}
/*
** Color Variants
*/
// Pink
&--pink {
background: $color-secondary-light;
}
&--beige {
$color-button: #F2D3B8;
background: $color-button;
&[disabled] {
background: none;
border: 2px solid darken($color-button, 2);
}
}
}

View File

@@ -257,11 +257,6 @@
&__more {
color: $color-secondary !important;
}
// Disabled state
&[disabled] {
cursor: not-allowed;
}
}
// Message

View File

@@ -388,25 +388,12 @@
// See More Photos
.button {
$color-button: #F2D3B8;
grid-column: span var(--columns);
grid-row: 1;
margin: 0 auto;
height: 56px;
background-color: $color-button;
font-size: rem(16px);
border: none;
@include bp (sm) {
grid-column: 6 / span 12;
height: 72px;
padding: 0 40px;
font-size: rem(18px);
}
&[disabled] {
background: none;
border: 2px solid darken($color-button, 2);
}
}