toast-variant()

The mixin includes an extension class of name prefixed with toast- with a given color name that includes a toast variant of the given $color.

The mixin includes toast background and border of a given $color CSS variable name.

@mixin toast-variant(
  $name: 'dark',
  $color: 'dark',
  $font-color: 'light',
) {
  &.toast-#{$name} {
    @include background($color, $alpha: 0.95);
    border-color: color($color);
    // Font color.
    @include color($font-color);
    a:active,
    a:visited,
    a:link {
      @include color($font-color);
    }
  }
}

Last updated