76 lines
1.6 KiB
SCSS
76 lines
1.6 KiB
SCSS
.button {
|
|
appearance: none;
|
|
padding: 0.5rem 1.5rem;
|
|
border-radius: 4px;
|
|
transition: background linear 0.15s;
|
|
|
|
--btn-background: transparent;
|
|
--btn-color: #000;
|
|
--btn-border: #ddd;
|
|
|
|
color: var(--btn-color);
|
|
background: var(--btn-background);
|
|
border: 1px solid var(--btn-border);
|
|
|
|
&:not([disabled]) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.default {
|
|
--btn-color: var(--button-default-color);
|
|
--btn-border: var(--button-default-border);
|
|
--btn-background: var(--button-default-background);
|
|
|
|
&[disabled] {
|
|
--btn-background: var(--button-default-disabled);
|
|
--btn-color: var(--button-default-disabled-color);
|
|
}
|
|
|
|
&:not([disabled]) {
|
|
&:hover,
|
|
&:focus-visible {
|
|
--btn-background: var(--button-default-hover);
|
|
}
|
|
|
|
&:active {
|
|
--btn-background: var(--button-default-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.primary {
|
|
--btn-color: var(--button-primary-color);
|
|
--btn-border: 1px solid var(--button-primary-border);
|
|
--btn-background: var(--button-primary-background);
|
|
|
|
&[disabled] {
|
|
--btn-background: var(--button-primary-disabled);
|
|
--btn-color: var(--button-primary-disabled-color);
|
|
}
|
|
|
|
&:not([disabled]) {
|
|
&:hover,
|
|
&:focus-visible {
|
|
--btn-background: var(--button-primary-hover);
|
|
}
|
|
|
|
&:active {
|
|
--btn-background: var(--button-primary-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.link {
|
|
--btn-border: transparent;
|
|
--btn-background: transparent;
|
|
--btn-color: var(--button-link-color);
|
|
|
|
&:not([disabled]) {
|
|
&:hover,
|
|
&:focus-visible {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|