86 lines
1.7 KiB
SCSS
86 lines
1.7 KiB
SCSS
a,
|
|
.clickable {
|
|
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
|
|
outline 0.2s ease-in-out;
|
|
|
|
&:active:not(&:disabled) {
|
|
scale: 0.95;
|
|
}
|
|
}
|
|
|
|
.button-base {
|
|
@extend .clickable;
|
|
font-weight: 500;
|
|
border: none;
|
|
outline: 2px solid transparent;
|
|
|
|
&:focus-visible:not(&:disabled),
|
|
&:hover:not(&:disabled) {
|
|
cursor: pointer;
|
|
filter: brightness(0.85);
|
|
}
|
|
|
|
&:active:not(&:disabled) {
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
&:disabled.quiet-disabled {
|
|
cursor: unset;
|
|
}
|
|
|
|
&:disabled:not(.quiet-disabled),
|
|
&[disabled]:not(.quiet-disabled) {
|
|
cursor: not-allowed;
|
|
filter: grayscale(50%);
|
|
opacity: 0.5;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.standard-button {
|
|
box-sizing: border-box;
|
|
|
|
color: var(--color-contrast);
|
|
background-color: var(--color-button-bg);
|
|
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.standard-body {
|
|
:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.button-within {
|
|
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
|
|
outline 0.2s ease-in-out;
|
|
|
|
&:focus-visible:not(&.disabled),
|
|
&:hover:not(&.disabled) {
|
|
filter: brightness(0.85);
|
|
}
|
|
|
|
&:active:not(&.disabled) {
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
// For some reason this within the above block makes it universal and not only applied to children. SCSS bug maybe?
|
|
&:active:not(&.disabled) button:not(&:disabled) {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
&.disabled {
|
|
cursor: not-allowed;
|
|
filter: grayscale(50%);
|
|
opacity: 0.5;
|
|
box-shadow: none;
|
|
|
|
&disabled,
|
|
&[disabled] {
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|