Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-25 22:39:36 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add more CSS variables with fallback

Browse Source
This commit is contained in:
Jeremy Thomas
2020-08-27 09:57:33 +02:00
parent 42815a783d
commit 9f3adb4930
10 changed files with 63 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
sass/helpers/color.sass
View File

@@ -1,37 +1,37 @@
@each $name, $pair in $colors
$color: nth($pair, 1)
.has-text-#{$name}
color: $color !important
color: var(--#{$name}, #{$color}) !important
a.has-text-#{$name}
&:hover,
&:focus
color: bulmaDarken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important
background-color: var(--#{$name}, #{$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
color: var(--#{$name}-light, #{$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
background-color: var(--#{$name}-light, #{$color-light}) !important
// Dark
.has-text-#{$name}-dark
color: $color-dark !important
color: var(--#{$name}-dark, #{$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
background-color: var(--#{$name}-dark, #{$color-dark}) !important
@each $name, $shade in $shades
.has-text-#{$name}
color: $shade !important
color: var(--#{$name}, #{$shade}) !important
.has-background-#{$name}
background-color: $shade !important
background-color: var(--#{$name}, #{$shade}) !important