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;
&:active {
background-color: darken($blue,2.5%);
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;
color: rgba($black,0.75);
padding: 0.175rem 0.325rem 0.125rem;
opacity: 0.8;
border-radius: 1rem;
&:hover {
opacity: 0.9;
}
&:active {
opacity: 1.0;
}
}
font-size: ms(-2);
border-width: 0;
background-color: $faint;
color: rgba($black,0.75);
padding: 0.25rem 0.75rem;
opacity: 0.8;
border-radius: 1rem;
&:hover {
opacity: 0.9;
}
&:active {
opacity: 1.0;
}
}