Skip to Content

add-color-class()

Add more Bootstrap-style button and background color class names.

Sass August 7, 2020

Usage

Sass
@include add-color-class($name, $bg, $text, $active_bg, $active_text)

Parameters

$name
(Required) (String) The name that appears on the class
Default: None

$bg
(Required) (Color) The background color of the element
Default: None

$fg
(Optional) (Color) The color of the foreground (usually text)
Default: Readable color based on the background

$active_bg
(Optional) (Color) The background color of the element when active
Default: $bg

$active_fg
(Optional) (Color) The color of the foreground when active (usually text)
Default: Readable color based on the active background

Request or provide clarification »

Examples

Sass
@include add-color-class("accent", cyan);
Sass
@include add-color-class("accent", purple, white);

Override a pre-defined Nebula class name (for example: to force a text color) by making the selector more specific.

Sass
html {
  @include add-color-class("brand", $primary_color, #fff); //Force white text on brand color
}

This can also be used to override Bootstrap color classes.

Sass
@include add-color-class('primary', 'green');

Additional Notes

This mixin creates 4 classes to use with or without Bootstrap elements (where “name” below is replaced with the first parameter):

  • Bootstrap elements:
    • .btn-name
    • .btn-outline-name
    • .bg-name
  • Additional helper classes:
    • .border-name
    • .name-color

Source File

Located in /assets/scss/partials/_mixins.scss on line 45.

Sass
@mixin add-color-class($name, $bg, $fg: null, $active_bg: null, $active_fg: null){
    @if ( $fg == null ){
        $fg: readable-color($bg);
    }

    @if ( $active_bg == null ){
        $active_bg: $bg;
    }

    @if ( $active_fg == null ){
        $active_fg: readable-color($active_bg);
    }

    .btn.btn-#{$name},
    .btn.btn-#{$name}:visited {background-color: $bg; border-color: $bg; color: $fg;
        &:hover, &:focus {background: darken($bg, 10%); border-color: darken($bg, 10%); color: $fg;}
        &:focus {box-shadow: 0 0 0 0.2rem rgba($bg, 0.25);}
        &:active,
        &.active {background: $active_bg; border-color: $active_bg; color: $active_fg;}
    }

    .btn.btn-outline-#{$name},
    .btn.btn-outline-#{$name}:visited {color: $bg; background-color: transparent; background-image: none; border-color: $bg;
        &:hover, &:focus {color: #fff; background-color: $bg; border-color: $bg;}
        &:active,
        &.active {background-color: $active_bg; border-color: $active_bg;}
    }

    .bg-#{$name} {background-color: $bg !important;}
    .border-#{$name} {border-color: $bg !important;}
    .#{$name}-color {color: $bg !important;}
}

Override

To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

Sass
@mixin add-color-class($name, $bg, $fg, $active_bg, $active_fg){
    //Write your own code here, leave it blank, or return false.
}