app/assets/stylesheets/mixins/buttons.scss
@import "mixins/colors";
@mixin base-button {
@include button-base;
font-size: $base-font-size;
&:focus,
&:hover {
text-decoration: none !important;
}
&[disabled] {
@include button-disabled;
}
}
@mixin regular-button($color: $brand) {
@include base-button;
@if $color == $brand {
@include brand-background;
} @else {
@include background-with-text-contrast($color);
}
&:hover,
&:focus {
@include background-with-text-contrast($button-background-hover, button-background-hover);
}
}
%button {
@include regular-button;
}
@mixin hollow-button($color: $anchor-color) {
@include normal-selection;
@include base-button;
border-color: currentcolor;
color: $color;
margin-bottom: 0;
@if $color == $anchor-color {
@include anchor-color;
} @else if $color == $brand {
@include brand-color;
}
&:hover,
&:focus {
$hover-color: scale-color($color, $lightness: $button-hollow-hover-lightness);
color: $hover-color;
@if $color == $anchor-color {
color: var(--anchor-color-hover, $hover-color);
}
}
}
@mixin link {
@include anchor-color;
cursor: pointer;
&:hover,
&:active,
&:focus {
@include anchor-color-hover;
}
&:hover,
&:active {
text-decoration: underline;
}
}
@mixin text-colored-link {
color: inherit;
&:hover {
@include anchor-color;
}
}
@mixin switch {
@include regular-button;
border-radius: $line-height;
font-weight: bold;
min-width: rem-calc(100);
position: relative;
&::after {
background: color-pick-contrast($primary-color);
border-radius: 100%;
content: "";
display: block;
height: 1.75em;
position: absolute;
transform: translateY(-50%);
top: 50%;
width: 1.75em;
}
&[aria-pressed=true] {
background: $primary-color;
padding-right: 2.5em;
text-align: left;
&::after {
right: 0.5em;
}
}
&[aria-pressed=false] {
background: $dark-gray;
padding-left: 2.5em;
text-align: right;
&::after {
left: 0.5em;
}
}
}