35 lines
948 B
SCSS
35 lines
948 B
SCSS
// Use :is to give the sub-selectors 0 specificity, allowing the whole thing to be
|
|
// overridden by anything with element-selector specificity or higher
|
|
// https://css-tricks.com/using-the-specificity-of-where-as-a-css-reset/
|
|
:is(
|
|
// skip React Button element
|
|
button:where(:not(.btn, [type=checkbox], [type=radio])),
|
|
input:where([type=button], [type=submit])
|
|
) {
|
|
@include windows-form-element;
|
|
|
|
padding: 4px 11px 6px 11px;
|
|
|
|
&[default] {
|
|
color: var(--accent-white);
|
|
|
|
&:not([disabled]) {
|
|
--color-form-element-background: var(--accent-blue);
|
|
|
|
&:hover {
|
|
--color-form-element-background: rgba(64, 114, 229, 0.9);
|
|
}
|
|
|
|
&:active {
|
|
--color-form-element-background: rgba(64, 114, 229, 0.8);
|
|
}
|
|
|
|
@include focus-ring;
|
|
}
|
|
|
|
&[disabled] {
|
|
@include light-dark(--color-form-element-background, var(--fill-tertiary), var(--fill-quaternary));
|
|
--color-form-element-border: linear-gradient(transparent, transparent);
|
|
}
|
|
}
|
|
}
|