43 lines
1.1 KiB
SCSS
43 lines
1.1 KiB
SCSS
/* Button extends */
|
||
// Button Placeholder style
|
||
// - Since buttons appear in various blocks,
|
||
// let’s use a placeholder to keep them all
|
||
// in-sync
|
||
%button-style {
|
||
@include crop-text(var(--button--line-height));
|
||
color: var(--button--color-text);
|
||
cursor: pointer;
|
||
font-weight: var(--button--font-weight);
|
||
font-family: var(--button--font-family);
|
||
font-size: var(--button--font-size);
|
||
background-color: var(--button--color-background);
|
||
border-radius: var(--button--border-radius);
|
||
border: var(--button--border-width) solid var(--button--color-background);
|
||
text-decoration: none;
|
||
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
|
||
|
||
&:active {
|
||
color: var(--button--color-text-active);
|
||
background-color: var(--button--color-background-active);
|
||
}
|
||
|
||
&:hover {
|
||
color: var(--button--color-text-hover);
|
||
background: transparent;
|
||
}
|
||
|
||
&:focus,
|
||
&.has-focus {
|
||
outline-offset: -6px;
|
||
outline: 2px dotted currentColor;
|
||
}
|
||
|
||
&:disabled {
|
||
background-color: var(--global--color-white-50);
|
||
border-color: var(--global--color-white-50);
|
||
color: var(--button--color-text-active);
|
||
}
|
||
|
||
}
|
||
|