Skip to Content
Menu

add-color-class()

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

Sass August 7, 2020
  1. Nebula
  2. /
  3. Functions
  4. /
  5. add-color-class()

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
Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    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 rgb($bg, 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.
}

    « Back to functions & variables list