67 lines
1.3 KiB
SCSS
67 lines
1.3 KiB
SCSS
@use "sass:color";
|
|
|
|
@mixin generate_button_colors($name, $hex) {
|
|
|
|
$buttons: (
|
|
".button",
|
|
"button",
|
|
"input[type=submit]",
|
|
);
|
|
|
|
@each $button in $buttons {
|
|
#{$button}.#{$name} {
|
|
color: $white;
|
|
background: $hex;
|
|
border-color: $hex;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $white;
|
|
background: color.adjust($hex, $lightness: 10%);
|
|
border-color: color.adjust($hex, $lightness: 10%);
|
|
}
|
|
}
|
|
|
|
#{$button}.#{$name}.inverted {
|
|
color: $hex;
|
|
background: transparent;
|
|
border-color: $hex;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: white;
|
|
background: #{$hex};
|
|
border-color: #{$hex};
|
|
}
|
|
}
|
|
|
|
@media screen {
|
|
*:not(.bg-#{$name}) #{$button}.#{$name} {
|
|
color: white;
|
|
background-color: $hex;
|
|
border-color: $hex;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: white;
|
|
background-color: color.adjust($hex, $lightness: 10%);
|
|
border-color: color.adjust($hex, $lightness: 10%);
|
|
}
|
|
}
|
|
|
|
.bg-#{$name} #{$button}.#{$name} {
|
|
color: $hex;
|
|
background: white;
|
|
border-color: white;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: white;
|
|
background: transparent;
|
|
border-color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|