Included in:
Not included in any file!
Depends from:
BuilderMixins.build-classes($background-prefix, background-color, $contrast-colors-map)
BuilderMixins.build-classes($background-prefix, background-color, $danger-colors-map)
BuilderMixins.build-classes($background-prefix, background-color, $info-colors-map)
BuilderMixins.build-classes($background-prefix, background-color, $primary-colors-map)
BuilderMixins.build-classes($background-prefix, background-color, $secondary-colors-map)
BuilderMixins.build-classes($background-prefix, background-color, $success-colors-map)
BuilderMixins.build-classes($background-prefix, background-color, $warning-colors-map)
BuilderMixins.build-classes($background-prefix, background-color, $white-colors-map)
BuilderMixins.build-classes($color-prefix, color, $contrast-colors-map)
BuilderMixins.build-classes($color-prefix, color, $danger-colors-map)
BuilderMixins.build-classes($color-prefix, color, $info-colors-map)
BuilderMixins.build-classes($color-prefix, color, $primary-colors-map)
BuilderMixins.build-classes($color-prefix, color, $secondary-colors-map)
BuilderMixins.build-classes($color-prefix, color, $success-colors-map)
BuilderMixins.build-classes($color-prefix, color, $warning-colors-map)
BuilderMixins.build-classes($color-prefix, color, $white-colors-map)
Local variables:
$color-prefix: 'is-color'
$background-prefix: 'has-background'
$contrast-colors-map: Functions.key-value-to-css-var(ColorCustomizer.$contrast-colors-map, 'color')
$primary-colors-map: Functions.key-value-to-css-var(ColorCustomizer.$primary-colors-map, 'color')
$secondary-colors-map: Functions.key-value-to-css-var(ColorCustomizer.$secondary-colors-map, 'color')
$white-colors-map: Functions.key-value-to-css-var(ColorCustomizer.$white-colors-map, 'color')
$danger-colors-map: Functions.key-value-to-css-var(ColorCustomizer.$danger-colors-map, 'color')
$warning-colors-map: Functions.key-value-to-css-var(ColorCustomizer.$warning-colors-map, 'color')
$success-colors-map: Functions.key-value-to-css-var(ColorCustomizer.$success-colors-map, 'color')
$info-colors-map: Functions.key-value-to-css-var(ColorCustomizer.$info-colors-map, 'color')
component
Color Helpers
The following color helper classes are bonded to it respective color variable available at the customize color section.
You can use your custom colors pallete for interact with the CSS properties color and background-color using their respective prefix: is-color-<color> for the color property and has-background-<color> when you want to set a background-color to an element.
Contrast Colors
| Class | Color |
|---|---|
<prefix>-contrast-darker |
|
<prefix>-contrast-dark |
|
<prefix>-contrast |
|
<prefix>-contrast-lower |
|
<prefix>-contrast-light |
|
<prefix>-contrast-light-lower |
|
<prefix>-contrast-lighter |
|
<prefix>-contrast |
|
<prefix>-contrast-light |
Primary Colors
| Class | Color |
|---|---|
<prefix>-primary-dark |
|
<prefix>-primary |
|
<prefix>-primary-light |
|
<prefix>-primary-lighter |
Secondary Colors
| Class | Color |
|---|---|
<prefix>-secondary-dark |
|
<prefix>-secondary |
|
<prefix>-secondary-light |
|
<prefix>-secondary-lighter |
Accent Colors
| Class | Color |
|---|---|
<prefix>-accent-dark |
|
<prefix>-accent |
|
<prefix>-accent-light |
|
<prefix>-accent-lighter |
Danger Colors
| Class | Color |
|---|---|
<prefix>-danger |
|
<prefix>-danger-light |
|
<prefix>-danger-background |
Warning Colors
| Class | Color |
|---|---|
<prefix>-warning |
|
<prefix>-warning-light |
|
<prefix>-warning-background |
Success Colors
| Class | Color |
|---|---|
<prefix>-success |
|
<prefix>-success-light |
|
<prefix>-success-background |
Info Colors
| Class | Color |
|---|---|
<prefix>-info |
|
<prefix>-info-light |
|
<prefix>-info-background |