On this page
Options
Quickly customize CoreUI for Angular with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
Global options
Customize CoreUI for Angular with our built-in custom variables file and easily toggle global CSS preferences with new$enable-* Sass variables. Override a variable's value and recompile withnpm run test as needed.
You can find and customize these variables for key global options in CoreUI@coreui/coreui/scss/_variables.scss file.
| Variable | Values | Description |
|---|---|---|
$spacer | 1rem (default), or any value > 0 | Specifies the default spacer value to programmatically generate ourspacer utilities. |
$enable-rounded | true (default) orfalse | Enables predefinedborder-radius styles on various components. |
$enable-shadows | true orfalse (default) | Enables predefined decorativebox-shadow styles on various components. Does not affectbox-shadows used for focus states. |
$enable-gradients | true orfalse (default) | Enables predefined gradients viabackground-image styles on various components. |
$enable-transitions | true (default) orfalse | Enables predefinedtransitions on various components. |
$enable-reduced-motion | true (default) orfalse | Enables theprefers-reduced-motion media query, which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
$enable-grid-classes | true (default) orfalse | Enables the generation of CSS classes for the grid system (e.g..row,.col-md-1, etc.). |
$enable-container-classes | true (default) orfalse | Enables the generation of CSS classes for layout containers. (New in v4.2.0) |
$enable-caret | true (default) orfalse | Enables pseudo element caret on.dropdown-toggle. |
$enable-button-pointers | true (default) orfalse | Add "hand" cursor to non-disabled button elements. |
$enable-rfs | true (default) orfalse | Globally enablesRFS. |
$enable-validation-icons | true (default) orfalse | Enablesbackground-image icons within textual inputs and some custom forms for validation states. |
$enable-negative-margins | true orfalse (default) | Enables the generation ofnegative margin utilities. |
$enable-deprecation-messages | true (default) orfalse | Set tofalse to hide warnings when using any of the deprecated mixins and functions that are planned to be removed inv6. |
$enable-important-utilities | true (default) orfalse | Enables the!important suffix in utility classes. |
$enable-smooth-scroll | true (default) orfalse | Appliesscroll-behavior: smooth globally, except for users asking for reduced motion throughprefers-reduced-motion media query |
$enable-ltr | false orfalse (default) | Enables Left-to-Right |
$enable-rtl | true (default) orfalse | Enables Right-to-Left |