74 lines
1.5 KiB
SCSS
74 lines
1.5 KiB
SCSS
@import '../../styles/variables';
|
|
|
|
.button {
|
|
border: 0;
|
|
cursor: pointer;
|
|
outline: 0;
|
|
margin: 0;
|
|
display: inline-block;
|
|
width: fit-content;
|
|
padding: $spacer / 4 $spacer;
|
|
font-size: $font-size-base;
|
|
font-family: $font-family-base;
|
|
font-weight: $font-weight-bold;
|
|
text-transform: uppercase;
|
|
border-radius: 2px;
|
|
transition: .2s ease-out;
|
|
color: $brand-white;
|
|
background: $brand-grey-light;
|
|
box-shadow: 0 9px 18px 0 rgba(0, 0, 0, .1);
|
|
min-height: 45px;
|
|
user-select: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $brand-white;
|
|
background: $brand-grey-light;
|
|
text-decoration: none;
|
|
transform: translate3d(0, -.05rem, 0);
|
|
box-shadow: 0 12px 30px 0 rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
&:active {
|
|
background: $brand-grey-light;
|
|
transition: none;
|
|
transform: none;
|
|
box-shadow: 0 5px 18px 0 rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
opacity: .5;
|
|
}
|
|
}
|
|
|
|
.buttonPrimary {
|
|
composes: button;
|
|
background: $brand-gradient;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: $brand-gradient;
|
|
}
|
|
|
|
&:active {
|
|
background: $brand-gradient;
|
|
}
|
|
}
|
|
|
|
.link {
|
|
border: 0;
|
|
outline: 0;
|
|
display: inline-block;
|
|
width: fit-content;
|
|
background: 0;
|
|
padding: 0;
|
|
color: $brand-pink;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-base;
|
|
font-family: inherit;
|
|
box-shadow: none;
|
|
cursor: pointer;
|
|
}
|