joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve color tiles

Browse source
This commit is contained in:
Joshua Seigler 2016-07-23 01:50:04 -04:00
parent beb38babd9
commit 37f660f065
2 changed files with 3 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
_sass/_colors.scss
View file

@ -12,7 +12,7 @@ $dark-blue: #0b3b5a;
// for the style guide: // for the style guide:
@function contrast-color($color, $dark, $light) { @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 @return $dark; // Lighter backgorund, return dark color
} @else { } @else {
@return $light; // Darker background, return light color @return $light; // Darker background, return light color
@ -34,5 +34,6 @@ $color:
.color__tile--#{$name}-bg { .color__tile--#{$name}-bg {
background-color: $bgcolor; background-color: $bgcolor;
color: contrast-color($bgcolor, #000, #fff); color: contrast-color($bgcolor, #000, #fff);
box-shadow: 0 0 10px -4px contrast-color($bgcolor, #000, #fff);
} }
} }

1
_sass/_styleguide.scss
View file

@ -15,5 +15,6 @@
padding: 20px; padding: 20px;
text-align: center; text-align: center;
width: 10em; width: 10em;
border-radius: 10px;
} }
} }