Add large size buttons variant and make disabled state global
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -257,11 +257,6 @@
|
||||
&__more {
|
||||
color: $color-secondary !important;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// Message
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user