mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
improve color tiles
This commit is contained in:
parent
beb38babd9
commit
37f660f065
2 changed files with 3 additions and 1 deletions
|
@ -12,7 +12,7 @@ $dark-blue: #0b3b5a;
|
|||
// for the style guide:
|
||||
|
||||
@function contrast-color($color, $dark, $light) {
|
||||
@if (lightness($color) > 50) {
|
||||
@if (lightness(scale-color($color, $green: 50%)) > 50) { // Green is perceptually about twice as bright as other primary colors
|
||||
@return $dark; // Lighter backgorund, return dark color
|
||||
} @else {
|
||||
@return $light; // Darker background, return light color
|
||||
|
@ -34,5 +34,6 @@ $color:
|
|||
.color__tile--#{$name}-bg {
|
||||
background-color: $bgcolor;
|
||||
color: contrast-color($bgcolor, #000, #fff);
|
||||
box-shadow: 0 0 10px -4px contrast-color($bgcolor, #000, #fff);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -15,5 +15,6 @@
|
|||
padding: 20px;
|
||||
text-align: center;
|
||||
width: 10em;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue