Add 'web/app/themes/badegg/' from commit 'b31aa7550b02a4516fdf161f53dc7666854c9a14'
git-subtree-dir: web/app/themes/badegg git-subtree-mainline:b862ff9755git-subtree-split:b31aa7550b
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
@use "../variables/colours";
|
||||
|
||||
@use "sass:color";
|
||||
|
||||
@mixin generate_button_colors($name, $hex) {
|
||||
|
||||
$buttons: (
|
||||
".button",
|
||||
"button",
|
||||
"input[type=submit]",
|
||||
);
|
||||
|
||||
@each $button in $buttons {
|
||||
#{$button}.#{$name} {
|
||||
color: colours.$white;
|
||||
background: $hex;
|
||||
border-color: $hex;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: colours.$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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@use "text-contrast";
|
||||
|
||||
@use "sass:color";
|
||||
|
||||
@mixin generate_colour_classes($name, $hex) {
|
||||
.#{$name} {
|
||||
color: $hex;
|
||||
}
|
||||
|
||||
.fill-#{$name} {
|
||||
fill: $hex;
|
||||
}
|
||||
|
||||
.border-#{$name} {
|
||||
border-color: $hex;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.bg-#{$name} {
|
||||
background-color: $hex;
|
||||
|
||||
::selection {
|
||||
@include text-contrast.text_contrast(color.invert($hex));
|
||||
background: color.invert($hex);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
// define as many $color-stops as needed
|
||||
@mixin linear-gradient($direction, $color-stops...) {
|
||||
background: list.nth(list.nth($color-stops, 1), 1);
|
||||
background: linear-gradient($direction, $color-stops);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@use "../variables/colours";
|
||||
|
||||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
|
||||
@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
|
||||
$brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
|
||||
$light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));
|
||||
|
||||
@if math.abs($brightness) < (math.div($light-color, $cutoff)) {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
@else {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user