Add light color helpers

This commit is contained in:
Jeremy Thomas
2020-05-10 22:10:51 +01:00
parent f18da99551
commit 7224fc260c
26 changed files with 3110 additions and 2052 deletions

View File

@@ -2,4 +2,3 @@
@import "minireset.sass"
@import "generic.sass"
@import "helpers.sass"

View File

@@ -8,6 +8,27 @@
color: bulmaDarken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
// Light
.has-text-#{$name}-light
color: $color-light !important
a.has-text-#{$name}-light
&:hover,
&:focus
color: bulmaDarken($color-light, 10%) !important
.has-background-#{$name}-light
background-color: $color-light !important
// Dark
.has-text-#{$name}-dark
color: $color-dark !important
a.has-text-#{$name}-dark
&:hover,
&:focus
color: bulmaLighten($color-dark, 10%) !important
.has-background-#{$name}-dark
background-color: $color-dark !important
@each $name, $shade in $shades
.has-text-#{$name}

View File

@@ -108,3 +108,8 @@
@if type-of($color) != 'color'
@return $color
@return darken($color, $amount)
@function bulmaLighten($color, $amount)
@if type-of($color) != 'color'
@return $color
@return lighten($color, $amount)