notes/_sass/buttons.scss

119 lines
2.3 KiB
SCSS

//
// Buttons and things that look like buttons
//
// stylelint-disable color-named
.btn {
display: inline-block;
box-sizing: border-box;
padding-top: 0.3em;
padding-right: 1em;
padding-bottom: 0.3em;
padding-left: 1em;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: 500;
line-height: 1.5;
color: $link-color;
text-decoration: none;
vertical-align: baseline;
cursor: pointer;
background-color: $base-button-color;
border-width: 0;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
appearance: none;
&:focus {
text-decoration: none;
outline: none;
box-shadow: 0 0 0 3px rgba(blue, 0.25);
}
&:focus:hover,
&.selected:focus {
box-shadow: 0 0 0 3px rgba(blue, 0.25);
}
&:hover,
&.zeroclipboard-is-hover {
color: darken($link-color, 2%);
}
&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
text-decoration: none;
background-color: darken($base-button-color, 1%);
}
&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: darken($base-button-color, 3%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
&.selected:hover {
background-color: darken(#dcdcdc, 5%);
}
&:disabled,
&.disabled {
&,
&:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
box-shadow: none;
}
}
}
.btn-outline {
color: $link-color;
background: transparent;
box-shadow: inset 0 0 0 2px $grey-lt-300;
&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
color: darken($link-color, 4%);
text-decoration: none;
background-color: transparent;
box-shadow: inset 0 0 0 3px $grey-lt-300;
}
&:focus {
text-decoration: none;
outline: none;
box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
}
&:focus:hover,
&.selected:focus {
box-shadow: inset 0 0 0 2px $grey-dk-100;
}
}
.btn-primary {
@include btn-color($white, $btn-primary-color);
}
.btn-purple {
@include btn-color($white, $purple-100);
}
.btn-blue {
@include btn-color($white, $blue-000);
}
.btn-green {
@include btn-color($white, $green-100);
}