Newer
Older
.button {
color: $blue;
background-color: transparent;
border-radius: 1rem;
border: 2px solid $blue;
font-size: ms(-2);
font-weight: 600;
padding: 0.325rem 0.675rem;
background-color: $blue;
color: $white;
&:disabled {
opacity: 0.5;
border-color: $faint;
background-color: $faint;
color: $grey;
}
text-transform: none;
border: 0;
border-radius: 2px;
color: $black;
background-size: auto 0.675rem;
background-position: left center;
background-repeat: no-repeat;
background-color: transparent;
padding: 0 0 0 0.925rem;
&:hover {
opacity: 0.625;
background-color: transparent;
}
opacity: 0.75;
background-color: transparent;
}
&.-reload {
background-image: url('./assets/img/icons/reload.svg');
&.-utility {
font-size: ms(-3);
border-width: 0;
background-color: $faint;
padding: 0.175rem 0.325rem 0.125rem;
opacity: 0.8;
border-radius: 1rem;
&:hover {
opacity: 0.9;
}
&:active {
&.-good {
background-color: $green;
color: $white;
}
&.-bad {
background-color: $red;
color: $white;
}
font-size: ms(-2);
border-width: 0;
background-color: $faint;
padding: 0.25rem 0.75rem;
opacity: 0.8;
border-radius: 1rem;
&:hover {
opacity: 0.9;
}
&:active {
}
}
&.-icon {
text-indent: -9999rem;
background-size: ms(-1) auto;
background-position: center center;
background-repeat: no-repeat;
border-radius: 0;
border: 0;
&:hover {
background-color: transparent;
}
&:active {
background-color: transparent;
opacity: 1;
}
&.-clear {
background-image: url('./assets/img/icons/close.svg');