bulma/sass/helpers/color.sass
2020-08-27 14:23:14 +02:00

41 lines
1.5 KiB
Sass

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