mirror of
https://github.com/danog/sass-site.git
synced 2024-12-12 09:29:58 +01:00
52 lines
1.1 KiB
SCSS
52 lines
1.1 KiB
SCSS
@use 'sass:color';
|
|
@use '../functions';
|
|
@use '../visual-design/theme';
|
|
|
|
.sl-c-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
border: 0 {
|
|
/* stylelint-disable-next-line property-no-unknown */
|
|
radius: functions.sl-px-to-rem(4px);
|
|
}
|
|
padding: functions.sl-px-to-rem(12px) functions.sl-px-to-rem(16px);
|
|
background: theme.$sl-color--iron;
|
|
box-shadow: 0 2px 1px rgba(theme.$sl-color--midnight-blue, 0.125);
|
|
color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: color.adjust(theme.$sl-color--bouquet, $lightness: -10%);
|
|
}
|
|
|
|
&:active {
|
|
color: color.adjust(theme.$sl-color--venus, $lightness: -10%);
|
|
}
|
|
|
|
&--primary {
|
|
background-color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);
|
|
|
|
&,
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: theme.$sl-color--white;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: color.adjust(
|
|
theme.$sl-color--bouquet,
|
|
$lightness: -10%
|
|
);
|
|
}
|
|
|
|
&:active {
|
|
background-color: color.adjust(theme.$sl-color--venus, $lightness: -10%);
|
|
}
|
|
}
|
|
}
|