// Color utilities // stylelint-disable block-opening-brace-space-before, comment-empty-line-before
// background colors /* Set the background to $bg-white */ .bg-white {
background-color: $bg-white !important;
} /* Set the background to $bg-blue */ .bg-blue {
background-color: $bg-blue !important;
} /* Set the background to $bg-blue-light */ .bg-blue-light {
background-color: $bg-blue-light !important;
} /* Set the background to $bg-gray-dark */ .bg-gray-dark {
background-color: $bg-gray-dark !important;
} /* Set the background to $bg-gray */ .bg-gray {
background-color: $bg-gray !important;
} /* Set the background to $bg-gray-light */ .bg-gray-light {
background-color: $bg-gray-light !important;
} /* Set the background to $bg-green */ .bg-green {
background-color: $bg-green !important;
} /* Set the background to $bg-green-light */ .bg-green-light {
background-color: $bg-green-light !important;
} /* Set the background to $bg-red */ .bg-red {
background-color: $bg-red !important;
} /* Set the background to $bg-red-light */ .bg-red-light {
background-color: $bg-red-light !important;
} /* Set the background to $bg-yellow */ .bg-yellow {
background-color: $bg-yellow !important;
} /* Set the background to $bg-yellow-light */ .bg-yellow-light {
background-color: $bg-yellow-light !important;
} /* Set the background to $bg-yellow-dark */ .bg-yellow-dark {
background-color: $bg-yellow-dark !important;
} /* Set the background to $bg-purple */ .bg-purple {
background-color: $bg-purple !important;
} /* Set the background to $bg-pink */ .bg-pink {
background-color: $bg-pink !important;
} /* Set the background to $bg-purple-light */ .bg-purple-light {
background-color: $bg-purple-light !important;
} /* Set the background to $bg-orange */ .bg-orange {
background-color: $bg-orange !important;
}
// Generate a foreground and background utility for every shade of every hue @each $hue, $shades in $hue-maps {
@each $index, $color in $shades { .color-#{$hue}-#{$index} { color: $color !important; } .bg-#{$hue}-#{$index} { background-color: $color !important; } }
}
.bg-shade-gradient {
background-image: linear-gradient( 180deg, rgba($black, 0.065), rgba($black, 0) ) !important; background-repeat: no-repeat !important; background-size: 100% 200px !important;
}
// text colors /* Set the text color to $text-blue */ .text-blue {
color: $text-blue !important;
} /* Set the text color to $text-red */ .text-red {
color: $text-red !important;
} /* Set the text color to $text-gray-light */ .text-gray-light {
color: $text-gray-light !important;
} /* Set the text color to $text-gray */ .text-gray {
color: $text-gray !important;
} /* Set the text color to $text-gray-dark */ .text-gray-dark {
color: $text-gray-dark !important;
} /* Set the text color to $text-green */ .text-green {
color: $text-green !important;
} /* Set the text color to $text-yellow */ .text-yellow {
color: $text-yellow !important;
} /* Set the text color to $text-orange */ .text-orange {
color: $text-orange !important;
} /* Set the text color to $text-orange-light */ .text-orange-light {
color: $text-orange-light !important;
} /* Set the text color to $text-purple */ .text-purple {
color: $text-purple !important;
} /* Set the text color to $text-pink */ .text-pink {
color: $text-pink !important;
} /* Set the text color to $text-white */ .text-white {
color: $text-white !important;
} /* Set the text color to inherit */ .text-inherit {
color: inherit !important;
}
// Link colors // Sets the links color to $text-gray and $text-blue on hover .link-gray {
color: $text-gray !important; &:hover { color: $text-blue !important; }
}
// Sets the links color to $text-gray-dark and $text-blue on hover .link-gray-dark {
color: $text-gray-dark !important; &:hover { color: $text-blue !important; }
}
/* Set the link color to $text-blue on hover
Useful when you want only part of a link to turn blue on hover */
.link-hover-blue {
&:hover { color: $text-blue !important; }
}
/* Make a link $text-gray, then $text-blue on hover and removes the underline */ .muted-link {
color: $text-gray !important; &:hover { color: $text-blue !important; text-decoration: none; }
}