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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|