text-color-variant()
The mixin contains the two CSS classes, the class of the name prefixed with text-
, and prefixed #{$prefix}-text-
with the given color $name
that includes the color
style of the given $color
CSS variable name, also the class of the same name assigned to tag a
.
By default, $prefix
is equal to the globally customizable $var-prefix
.
@mixin text-color-variant(
$name: 'primary',
$color: 'primary-color',
$prefix: $var-prefix
) {
.text-#{$name}, .#{$prefix}-text-#{$name} {
color: color($color) !important;
}
a.text-#{$name}, a.#{$prefix}-text-#{$name} {
&:focus,
&:hover {
color: color($color, $lightness: -5%);
}
&:visited {
color: color($color, $lightness: +5%);
}
}
}
Last updated