mirror of
https://github.com/danog/sass-site.git
synced 2024-12-04 10:28:22 +01:00
60 lines
1.8 KiB
SCSS
60 lines
1.8 KiB
SCSS
@use 'sass:color';
|
|
@use '../visual-design/typography';
|
|
|
|
.sl-c-button {
|
|
align-items: center;
|
|
border: 0;
|
|
border-radius: var(--sl-radius--button, var(--sl-border-radius--large));
|
|
background: var(--sl-background--button, var(--sl-color--iron));
|
|
box-shadow: 0 2px 1px var(--sl-color--shadow);
|
|
color: var(--sl-color--button, var(--sl-color--highlight));
|
|
cursor: pointer;
|
|
display: var(--sl-display--button, inline-block);
|
|
font-weight: var(--sl-font-weight--button);
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: var(--sl-gutter--minus) var(--sl-gutter);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: var(
|
|
--sl-background--button-state,
|
|
var(--sl-background--button, var(--sl-color--link-action))
|
|
);
|
|
|
|
--sl-color--button: var(--sl-color--action);
|
|
|
|
color: var(--sl-color--button-state, var(--sl-color--button));
|
|
}
|
|
|
|
&:active {
|
|
background: var(
|
|
--sl-background--button-active,
|
|
var(--sl-color--link-action)
|
|
);
|
|
color: var(--sl-color--button-active, var(--sl-color--highlight));
|
|
}
|
|
|
|
&--primary {
|
|
--sl-background--button: var(--sl-color--highlight);
|
|
--sl-background--button-active: var(--sl-color--active);
|
|
--sl-background--button-state: var(--sl-color--action);
|
|
--sl-color--button: var(--sl-color--white);
|
|
--sl-color--button-active: var(--sl-color--white);
|
|
--sl-color--button-state: var(--sl-color--white);
|
|
}
|
|
|
|
&--tab {
|
|
--sl-background--button: var(--sl-color--code-background-darker);
|
|
--sl-background--button-active: var(--sl-background--button-state);
|
|
--sl-background--button-state: transparent;
|
|
--sl-color--button: var(--sl-color--highlight);
|
|
--sl-color--button-active: var(--sl-color--midnight-blue);
|
|
--sl-color--button-state: var(--sl-color--midnight-blue);
|
|
--sl-font-weight--button: #{typography.$sl-font-weight--bold};
|
|
--sl-radius--button: 0;
|
|
|
|
box-shadow: none;
|
|
}
|
|
}
|