# Accordion ## CSS Custom Properties | CSS Custom Property | Description | | ------------------------------------------------ | -------------------------------------------------------------------- | | --clr-accordion-text-color | Text color of the accordion component. | | --clr-accordion-text-color-hover | Text color of the accordion header when hovered. | | --clr-accordion-text-color-active | Text color of the accordion header when active. | | --clr-accordion-text-color-selected | Text color of the accordion header when selected. | | --clr-accordion-active-background-color | Background color of the active accordion panel. | | --clr-accordion-content-background-color | Background color of the accordion content area. | | --clr-accordion-content-color | Color of the text in the accordion content area. | | --clr-accordion-content-font-size | Font size of the text in the accordion content area. | | --clr-accordion-header-background-color | Background color of the accordion header. | | --clr-accordion-header-disabled-background-color | Background color of the accordion header when disabled. | | --clr-accordion-header-hover-background-color | Background color of the accordion header on hover. | | --clr-accordion-header-active-background-color | Background color of the accordion header when active. | | --clr-accordion-header-font-size | Font size of the accordion header | | --clr-accordion-header-button-font-size | Font size of the accordion header button | | --clr-accordion-header-button-padding | Padding surrounded button used for the header. | | --clr-accordion-title-font-weight | Font weight of the accordion title | | --clr-accordion-title-font-size | Font size of the accordion title | | --clr-accordion-error-color | Color representing an error state in the accordion. | | --clr-accordion-complete-color | Color representing a completed state in the accordion. | | --clr-accordion-border-color | Color of the accordion border. | | --clr-accordion-border-radius | Border radius of the accordion. | | --clr-accordion-border-left-color | Color of the left border in the accordion. | | --clr-accordion-border-left-width | Width of the left border in the accordion. | | --clr-accordion-border-left-color-complete | Color of the left border in the accordion for the complete state. | | --clr-accordion-border-left-color-error | Color of the left border in the accordion for the error state. | | --clr-accordion-header-left-indicator | Left indicator style for the accordion header. | | --clr-accordion-header-left-current-indicator | Left indicator style for the accordion header when on current step. | | --clr-accordion-header-left-complete-indicator | Left indicator style for the accordion header in the complete state. | | --clr-accordion-header-left-error-indicator | Left indicator style for the accordion header in the error state. | | --clr-accordion-header-button-line-height | Line height of the button used for the header. | | --clr-accordion-header-gap | Gap between the icon and title text in the accordion header. | | --clr-accordion-status-icon-width | Width of the icon used for the accordion arrow. | | --clr-accordion-number-padding | Padding for the step number. | | --clr-accordion-step-title-min-width | Sets the min-width for the step title. | | --clr-accordion-step-title-font-weight | Font weight for the step title and number. | | --clr-accordion-header-font-size | Header font size. | | --clr-accordion-step-status-margin-left | Left margin of the status container | | --clr-accordion-step-title-margin-left | Left margin of the title container | ## CSS Classes | Class Name | Description | | ------------------------------------ | ----------------------------------------------------- | | clr-accordion | Accordion component. | | clr-accordion-panel | Panel within the accordion. | | clr-accordion-header | Header section of an accordion panel. | | clr-accordion-number | Number or step indicator within the accordion. | | clr-accordion-header-button | Clickable button within the accordion header. | | clr-accordion-status | Status indicator within the accordion header. | | clr-accordion-title | Title text within the accordion header. | | clr-accordion-header-has-description | Accordion header with a description. | | clr-accordion-description | Description text within the accordion header. | | clr-accordion-content | Content section of an accordion panel. | | clr-accordion-content-region | Content region section of an accordion panel. | | clr-accordion-inner-content | Inner content section within the accordion content. | | clr-accordion-angle | Angle or arrow indicator within the accordion header. | | clr-accordion-error-icon | Error icon within the accordion header. | | clr-accordion-complete-icon | Complete icon within the accordion header. | | clr-accordion-panel-open | Open or expanded accordion panel. | | clr-accordion-panel-complete | Complete state of an accordion panel. | | clr-accordion-panel-error | Error state of an accordion panel. | | clr-accordion-panel-disabled | Disabled state of an accordion panel. | | clr-stepper-forms | Stepper forms mode for the accordion. | | clr-step-button | Step button within the accordion. | # Alert ## CSS Custom Properties | CSS Custom Property | Description | | ------------------------------------------------ | ----------------------------------------------------------------- | | --clr-alert-action-color | Alerts action default font color | | --clr-alert-action-active-color | Alerts action default font color on focus, hover, active | | --clr-alert-close-icon-color | Close icon default color | | --clr-alert-close-icon-hover-color | Close icon default color on hover | | --clr-alert-close-icon-opacity | Close icon default opacity | | --clr-alert-close-icon-hover-opacity | Close icon default opacity on hover | | --clr-app-level-alert-color | Default font color for app level alerts | | --clr-app-alert-close-icon-color | Close icon default color for app level alerts | | --clr-app-alert-close-icon-opacity | Close icon default opacity for app level alerts | | --clr-app-alert-close-icon-hover-opacity | Close icon default opacity on hover for app level alerts | | --clr-alert-borderradius | Border radius | | --clr-alert-info-bg-color | Info alert background color | | --clr-alert-info-font-color | Info alert font color | | --clr-alert-info-border-color | Info alert border color | | --clr-alert-info-icon-color | Info alert icon color | | --clr-alert-info-action-color | Info alert action font color | | --clr-alert-info-action-active-color | Info alert action font color on focus, hover, active | | --clr-alert-info-close-icon-color | Info alert close icon color | | --clr-alert-info-close-icon-opacity | Info alert close icon opacity | | --clr-alert-info-close-icon-hover-color | Info alert close icon color on hover | | --clr-alert-info-close-icon-hover-opacity | Info alert close icon opacity on hover | | --clr-alert-success-bg-color | Info alert background color | | --clr-alert-success-font-color | Info alert font color | | --clr-alert-success-border-color | Info alert border color | | --clr-alert-success-icon-color | Info alert icon color | | --clr-alert-success-action-color | Success alert action font color | | --clr-alert-success-action-active-color | Success alert action font color on focus, hover, active | | --clr-alert-success-close-icon-color | Success alert close icon color | | --clr-alert-success-close-icon-opacity | Success alert close icon opacity | | --clr-alert-success-close-icon-hover-color | Success alert close icon color on hover | | --clr-alert-success-close-icon-hover-opacity | Success alert close icon opacity on hover | | --clr-alert-warning-bg-color | Info alert background color | | --clr-alert-warning-font-color | Info alert font color | | --clr-alert-warning-border-color | Info alert border color | | --clr-alert-warning-icon-color | Info alert icon color | | --clr-alert-warning-action-color | Warning alert action font color | | --clr-alert-warning-action-active-color | Warning alert action font color on focus, hover, active | | --clr-alert-warning-close-icon-color | Warning alert close icon color | | --clr-alert-warning-close-icon-opacity | Warning alert close icon opacity | | --clr-alert-warning-close-icon-hover-color | Warning alert close icon color on hover | | --clr-alert-warning-close-icon-hover-opacity | Warning alert close icon opacity on hover | | --clr-alert-danger-bg-color | Info alert background color | | --clr-alert-danger-font-color | Info alert font color | | --clr-alert-danger-border-color | Info alert border color | | --clr-alert-danger-icon-color | Info alert icon color | | --clr-alert-danger-action-color | Danger alert action font color | | --clr-alert-danger-action-active-color | Danger alert action font color on focus, hover, active | | --clr-alert-danger-close-icon-color | Danger alert close icon color | | --clr-alert-danger-close-icon-opacity | Danger alert close icon opacity | | --clr-alert-danger-close-icon-hover-color | Danger alert close icon color on hover | | --clr-alert-danger-close-icon-hover-opacity | Danger alert close icon opacity on hover | | --clr-app-alert-info-bg-color | App level info alert background color | | --clr-app-alert-info-font-color | App level info alert font color | | --clr-app-alert-info-border-color | App level info alert border color | | --clr-app-alert-info-icon-color | App level info alert icon color | | --clr-app-alert-info-action-color | App level info alert action font color | | --clr-app-alert-info-action-active-color | App level info alert action font color on focus, hover, active | | --clr-app-alert-info-close-icon-color | App level info alert close icon color | | --clr-app-alert-info-close-icon-opacity | App level info alert close icon opacity | | --clr-app-alert-info-close-icon-hover-color | App level info alert close icon color on hover | | --clr-app-alert-info-close-icon-hover-opacity | App level info alert close icon opacity on hover | | --clr-app-alert-warning-bg-color | App level warning alert background color | | --clr-app-alert-warning-border-color | App level warning alert border color | | --clr-app-alert-warning-icon-color | App level warning alert icon color | | --clr-app-alert-warning-font-color | App level warning alert font color | | --clr-app-alert-warning-action-color | App level warning alert action font color | | --clr-app-alert-warning-action-active-color | App level warning alert action font color on focus, hover, active | | --clr-app-alert-warning-close-icon-color | App level info alert close icon color | | --clr-app-alert-warning-close-icon-opacity | App level info alert close icon opacity | | --clr-app-alert-warning-close-icon-hover-color | App level info alert close icon color on hover | | --clr-app-alert-warning-close-icon-hover-opacity | App level info alert close icon opacity on hover | | --clr-app-alert-danger-bg-color | App level danger alert background color | | --clr-app-alert-danger-border-color | App level danger alert border color | | --clr-app-alert-danger-icon-color | App level danger alert icon color | | --clr-app-alert-danger-font-color | App level danger alert font color | | --clr-app-alert-danger-action-color | App level danger alert action font color | | --clr-app-alert-danger-action-active-color | App level danger alert action font color on focus, hover, active | | --clr-app-alert-danger-close-icon-color | App level info alert close icon color | | --clr-app-alert-danger-close-icon-opacity | App level info alert close icon opacity | | --clr-app-alert-danger-close-icon-hover-color | App level info alert close icon color on hover | | --clr-app-alert-danger-close-icon-hover-opacity | App level info alert close icon opacity on hover | | --clr-app-alert-success-border-color | App level success alert border color | | --clr-app-alert-success-bg-color | App level success alert background color | | --clr-app-alert-success-icon-color | App level success alert icon color | | --clr-app-alert-success-font-color | App level success alert font color | | --clr-app-alert-success-action-color | App level success alert action font color | | --clr-app-alert-success-action-active-color | App level success alert action font color on focus, hover, active | | --clr-app-alert-success-close-icon-color | App level info alert close icon color | | --clr-app-alert-success-close-icon-opacity | App level info alert close icon opacity | | --clr-app-alert-success-close-icon-hover-color | App level info alert close icon color on hover | | --clr-app-alert-success-close-icon-hover-opacity | App level info alert close icon opacity on hover | | --clr-app-alert-pager-text-color | Alert pager default font color | | --clr-app-alert-info-pager-bg-color | Info alert pager font color | | --clr-app-alert-warning-pager-bg-color | Warning alert pager font color | | --clr-app-alert-danger-pager-bg-color | Danger alert pager font color | | --clr-app-alert-success-pager-bg-color | Danger success pager font color | | --clr-alert-padding | Padding of the alert | | --clr-alert-borderradius | Alert border radius | | --clr-alert-actions-spacing | Alert actions spacing | | --clr-alert-item-margin-bottom | Alert item margin bottom | | --clr-alert-line-height | Alert line height | | --clr-alert-sm-line-height | Alert small line height | | --clr-alert-app-padding | App level alert padding | | --clr-alert-items-gap | Gap between items in the alert | | --clr-alert-sm-line-height | Small alert line height | | --clr-alert-sm-font-size | Small alert font size | | --clr-alert-sm-letter-spacing | Small alert letter spacing | | --clr-alert-sm-font-weight | Small alert font weight | | --clr-alert-sm-icon-size | Small alert icon size | ## CSS Classes | Class name | Description | | -------------------- | -------------------------------------------------------------------------- | | alert | Main alert element | | alert-info | Addition to `alert` class to present it as info alert | | alert-success | Addition to `alert` class to present it as success alert | | alert-warning | Addition to `alert` class to present it as warning alert | | alert-danger | Addition to `alert` class to present it as danger alert | | alert-app-level | Addition to `alert` class to present it as app-level alert | | alert-items | Wrapper for elements with class `alert-item` | | alert-item | Element for messages in alert | | alert-text | Text inside alert items | | alert-actions | Wrapper for actions | | alert-action | Action element | | close | Close element `X` | | alert-icon | Icon used in alert items | | alert-icon-wrapper | Wrapper for icons | | alert-sm | Alert with a smaller size | | alert-hidden | Hide alert | | alerts | Main alerts element \*should be used with `alert-info` or equivalent class | | alerts-pager | Alerts pager element | | alerts-pager-button | Pager button | | alerts-pager-control | Pager controls wrapper | | alerts-page-down | Page down wrapper | | alerts-page-up | Page up wrapper | | alerts-pager-text | Page identifier in pager | # Badge ## CSS Custom Properties | CSS Custom Property | Description | | ------------------------------- | --------------------------------- | | --clr-badge-background-color | Background color | | --clr-badge-color | Font color | | --clr-badge-info-bg-color | Info badge background color | | --clr-badge-info-color | Info badge text color | | --clr-badge-success-bg-color | Success badge background color | | --clr-badge-success-color | Success badge text color | | --clr-badge-warning-bg-color | Warning badge background color | | --clr-badge-warning-color | Warning badge text color | | --clr-badge-danger-bg-color | Danger badge background color | | --clr-badge-danger-color | Danger badge text color | | --clr-badge-gray-bg-color | Gray badge background color | | --clr-badge-gray-color | Gray badge text color | | --clr-badge-purple-bg-color | Purple badge background color | | --clr-badge-purple-color | Purple badge text color | | --clr-badge-blue-bg-color | Blue badge background color | | --clr-badge-blue-color | Blue badge text color | | --clr-badge-orange-bg-color | Orange badge background color | | --clr-badge-orange-color | Orange badge text color | | --clr-badge-light-blue-bg-color | Light-blue badge background color | | --clr-badge-light-blue-color | Light-blue badge text color | | --clr-badge-padding | Padding | | --clr-badge-height | Height | | --clr-badge-min-width | Min width | | --clr-badge-border-radius | Border radius | | --clr-badge-font-size | Font size | | --clr-badge-font-weight | Font weight | | --clr-badge-letter-spacing | Letter spacing | | --clr-badge-line-height | Line height | | --clr-badge-font-family | Font family | ## CSS Classes | Class name | Description | | ---------------- | ------------------------------------------------------------------- | | badge | Main badge element. All of the following require this class as well | | badge-info | Info badge | | badge-success | Success badge | | badge-danger | Danger badge | | badge-warning | Warning badge | | badge-gray | Gray badge | | badge-purple | Purple badge | | badge-blue | Blue badge | | badge-orange | Orange badge | | badge-light-blue | Light-blue badge | # Button ## CSS Custom Properties | CSS Custom Property | Description | | ----------------------------------------------- | --------------------------------------------------------------------------- | | --clr-btn-vertical-margin | Button top and bottom margin. | | --clr-btn-horizontal-margin | Button left and right margin. | | --clr-btn-vertical-padding | Button top and bottom padding. | | --clr-btn-horizontal-padding | Button left and right padding. | | --clr-btn-padding | Button padding. | | --clr-btn-height | Button height. | | --clr-btn-height-sm | Small button height. | | --clr-btn-font-weight | Button text font weight. | | --clr-btn-border-radius | Button border radius. | | --clr-btn-border-width | Button border width. | | --clr-btn-outline-bg-color | Default outline button background color. | | --clr-btn-default-color | Default button text color. | | --clr-btn-default-bg-color | Default button background color. | | --clr-btn-default-border-color | Default button border color. | | --clr-btn-default-hover-color | Default button `:hover` text color. | | --clr-btn-default-hover-bg-color | Default button `:hover` background color. | | --clr-btn-default-box-shadow-color | Default button `:active` box shadow. | | --clr-btn-default-disabled-color | Default button `disabled` text color. | | --clr-btn-default-disabled-bg-color | Default button `disabled` background color. | | --clr-btn-default-disabled-border-color | Default button `disabled` border color. | | --clr-btn-default-outline-color | Default outline button text color. | | --clr-btn-default-outline-bg-color | Default outline button background color. | | --clr-btn-default-outline-border-color | Default outline button border color. | | --clr-btn-default-outline-hover-color | Default outline button `:hover` text color. | | --clr-btn-default-outline-hover-bg-color | Default outline button `:hover` background color. | | --clr-btn-default-outline-box-shadow-color | Default outline button `:active` box shadow. | | --clr-btn-default-outline-disabled-color | Default outline button `disabled` text color. | | --clr-btn-default-outline-disabled-bg-color | Default outline button `disabled` background color. | | --clr-btn-default-outline-disabled-border-color | Default outline button `disabled` border color. | | --clr-btn-primary-color | Primary button text color. | | --clr-btn-primary-bg-color | Primary button background color. | | --clr-btn-primary-border-color | Primary button border color. | | --clr-btn-primary-hover-color | Primary button `:hover` text color. | | --clr-btn-primary-hover-bg-color | Primary button `:hover` background color. | | --clr-btn-primary-box-shadow-color | Primary button `:active` box shadow. | | --clr-btn-primary-disabled-color | Primary button `disabled` text color. | | --clr-btn-primary-disabled-bg-color | Primary button `disabled` color. | | --clr-btn-primary-disabled-border-color | Primary button `disabled` border color. | | --clr-btn-success-color | Success button text color. | | --clr-btn-success-bg-color | Success button background color. | | --clr-btn-success-border-color | Success button border color. | | --clr-btn-success-hover-color | Success button `:hover` text color. | | --clr-btn-success-hover-bg-color | Success button `:hover` background color. | | --clr-btn-success-box-shadow-color | Success button `:active` box shadow. | | --clr-btn-success-disabled-color | Success button `disabled` text color. | | --clr-btn-success-disabled-bg-color | Success button `disabled` color. | | --clr-btn-success-disabled-border-color | Success button `disabled` border color. | | --clr-btn-success-outline-color | Success outline button text color. | | --clr-btn-success-outline-bg-color | Success outline button background color. | | --clr-btn-success-outline-border-color | Success outline button border color. | | --clr-btn-success-outline-hover-color | Success outline button `:hover` text color. | | --clr-btn-success-outline-hover-bg-color | Success outline button `:hover` background color. | | --clr-btn-success-outline-box-shadow-color | Success outline button `:active` box shadow. | | --clr-btn-success-outline-disabled-color | Success outline button `disabled` text color. | | --clr-btn-success-outline-disabled-bg-color | Success outline button `disabled` background color. | | --clr-btn-success-outline-disabled-border-color | Success outline button `disabled` border color. | | --clr-btn-danger-color | Danger button text color. | | --clr-btn-danger-bg-color | Danger button background color. | | --clr-btn-danger-border-color | Danger button border color. | | --clr-btn-danger-hover-color | Danger button `:hover` text color. | | --clr-btn-danger-hover-bg-color | Danger button `:hover` background color. | | --clr-btn-danger-box-shadow-color | Danger button `:active` box shadow. | | --clr-btn-danger-disabled-color | Danger button `disabled` text color. | | --clr-btn-danger-disabled-bg-color | Danger button `disabled` color. | | --clr-btn-danger-disabled-border-color | Danger button `disabled` border color. | | --clr-btn-danger-outline-color | Danger outline button text color. | | --clr-btn-danger-outline-bg-color | Danger outline button background color. | | --clr-btn-danger-outline-border-color | Danger outline button border color. | | --clr-btn-danger-outline-hover-color | Danger outline button `:hover` text color. | | --clr-btn-danger-outline-hover-bg-color | Danger outline button `:hover` background color. | | --clr-btn-danger-outline-box-shadow-color | Danger outline button `:active` box shadow. | | --clr-btn-danger-outline-disabled-color | Danger outline button `disabled` text color. | | --clr-btn-danger-outline-disabled-bg-color | Danger outline button `disabled` background color. | | --clr-btn-danger-outline-disabled-border-color | Danger outline button `disabled` border color. | | --clr-btn-warning-color | Warning button text color. | | --clr-btn-warning-bg-color | Warning button background color. | | --clr-btn-warning-border-color | Warning button border color. | | --clr-btn-warning-hover-color | Warning button `:hover` text color. | | --clr-btn-warning-hover-bg-color | Warning button `:hover` background color. | | --clr-btn-warning-box-shadow-color | Warning button `:active` box shadow. | | --clr-btn-warning-disabled-color | Warning button `disabled` text color. | | --clr-btn-warning-disabled-bg-color | Warning button `disabled` color. | | --clr-btn-warning-disabled-border-color | Warning button `disabled` border color. | | --clr-btn-warning-outline-color | Warning outline button text color. | | --clr-btn-warning-outline-bg-color | Warning outline button background color. | | --clr-btn-warning-outline-border-color | Warning outline button border color. | | --clr-btn-warning-outline-hover-color | Warning outline button `:hover` text color. | | --clr-btn-warning-outline-hover-bg-color | Warning outline button `:hover` background color. | | --clr-btn-warning-outline-box-shadow-color | Warning outline button `:active` box shadow. | | --clr-btn-warning-outline-disabled-color | Warning outline button `disabled` text color. | | --clr-btn-warning-outline-disabled-bg-color | Warning outline button `disabled` background color. | | --clr-btn-warning-outline-disabled-border-color | Warning outline button `disabled` border color. | | --clr-btn-link-color | Link button text color. | | --clr-btn-link-bg-color | Link button background color. | | --clr-btn-link-border-color | Link button border color. | | --clr-btn-link-hover-color | Link button `:hover` text color. | | --clr-btn-link-hover-bg-color | Link button `:hover` background color. | | --clr-btn-link-disabled-color | Link button `disabled` text color. | | --clr-btn-link-disabled-bg-color | Link button `disabled` background color. | | --clr-btn-link-disabled-border-color | Link button `disabled` border color. | | --clr-btn-inverse-color | Inverse button text color. | | --clr-btn-inverse-bg-color | Inverse button background color. | | --clr-btn-inverse-border-color | Inverse button border color. | | --clr-btn-inverse-hover-color | Inverse button `:hover` text color. | | --clr-btn-inverse-hover-bg-color | Inverse button `:hover` background color. | | --clr-btn-inverse-box-shadow-color | Inverse button `:active` box shadow. | | --clr-btn-inverse-disabled-color | Inverse button `disabled` text color. | | --clr-btn-inverse-disabled-bg-color | Inverse button `disabled` background color. | | --clr-btn-inverse-disabled-border-color | Inverse button `disabled` border color. | | --clr-btn-icon-disabled-color | Icon button `disabled` text color. | | --clr-btn-group-focus-outline | `:focus` outline color of a checkbox or radio inside a button group button. | | --clr-btn-default-checked-color | Checked checkbox default button text color. | | --clr-btn-default-checked-bg-color | Checked checkbox default button background color. | | --clr-btn-default-outline-checked-color | Checked checkbox default outline button text color. | | --clr-btn-default-outline-checked-bg-color | Checked checkbox default outline button background color. | | --clr-btn-primary-checked-color | Checked checkbox primary button text color. | | --clr-btn-primary-checked-bg-color | Checked checkbox primary button background color. | | --clr-btn-success-checked-color | Checked checkbox success button text color. | | --clr-btn-success-checked-bg-color | Checked checkbox success button background color. | | --clr-btn-success-outline-checked-color | Checked checkbox success outline button text color. | | --clr-btn-success-outline-checked-bg-color | Checked checkbox success outline button background color. | | --clr-btn-danger-checked-color | Checked checkbox danger button text color. | | --clr-btn-danger-checked-bg-color | Checked checkbox danger button background color. | | --clr-btn-danger-outline-checked-color | Checked checkbox danger outline button text color. | | --clr-btn-danger-outline-checked-bg-color | Checked checkbox danger outline button background color. | | --clr-btn-warning-checked-color | Checked checkbox warning button text color. | | --clr-btn-warning-checked-bg-color | Checked checkbox warning button background color. | | --clr-btn-warning-outline-checked-color | Checked checkbox warning outline button text color. | | --clr-btn-warning-outline-checked-bg-color | Checked checkbox warning outline button background color. | | --clr-btn-link-checked-color | Checked checkbox link button text color. | | --clr-btn-link-checked-bg-color | Checked checkbox link button background color. | | --clr-btn-inverse-checked-color | Checked checkbox inverse button text color. | | --clr-btn-inverse-checked-bg-color | Checked checkbox inverse button background color. | ## CSS Classes | Class name | Description | | ------------------- | -------------------------------------------------------- | | btn | Button. All of the following require this class as well. | | btn-info | Info button. | | btn-primary | Primary button. | | btn-success | Success button. | | btn-warning | Warning button. | | btn-danger | Danger button. | | btn-outline | Outline button. | | btn-info-outline | Outline info button. | | btn-success-outline | Outline success button. | | btn-warning-outline | Outline warning button. | | btn-danger-outline | Outline danger button. | | btn-small | Small button. | | btn-block | Block, full-width button. | | btn-inverse | Inverse button. | | btn-icon | Icon button. | | btn-link | Link button. | # Button group ## CSS Classes | Class name | Description | | --------------------- | ---------------------------------------------------------------------------------------------------------- | | btn-group | Button group element class. | | btn-group-overflow | Overflow class for button group element. | | btn-link | Used with `btn-group` for flat buttons group. | | btn-icon-link | Used with `btn-group` and `btn-link` for flat icon buttons group. | | clr-icon-title | Button icon title. Visible inside a menu and hidden outside for a11y so it can be read from screen reader. | | clr-button-group-menu | Internal class for button group menu content. | # Card ## CSS Custom Properties | CSS Custom Property | Description | | ------------------------------------- | --------------------------------- | | --clr-card-bg-color | Card background color. | | --clr-card-divider-color | Card divider color. | | --clr-card-title-color | Card text color header. | | --clr-card-title-font-weight | Card thickness title. | | --clr-card-border-width | Card border width. | | --clr-card-border-radius | Card border radius. | | --clr-card-border-color | Card border color. | | --clr-card-box-shadow-color | Card background shadow color. | | --clr-card-clickable-border-color | Clickable cards background color. | | --clr-card-clickable-box-shadow-color | Clickable cards shadow color. | ## CSS Classes | Class | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | card | A card presents high-level information and can guide the user toward related actions and details. | | clickable | Adding the `.clickable` to a card class makes the entire card clickable, initiating a single action. | | card-img | A `.card-img` can be placed anywhere in the card, or it can occupy the entire card. | | card-header | The card's heading element. | | card-block | The card's main content. | | card-title | A card block's heading element. | | card-text | A card block's text content. | | list | An ordered (`ol`) or unordered (`ul`) list within a card block. | | list-unstyled | List with no markers within a card block. | | list-group | Full-width list with dividers for each item within a card block. | | list-group-item | Item within a list group. | | card-divider | Divider within card block. | | card-media-block | A card media block contains and image and description. | | wrap | Adding the `wrap` class to a `.card-media-block` element causes the description to be below the image instead of to the right. | | card-media-image | An `img` within a card media block. | | card-media-description | The description within a card media block. It can contain a title and text. | | card-media-title | The title of a card media block description. | | card-media-text | Text within a card media block description. | | card-footer | The footer can contain two actions in form of a button or link. For more actions, use a dropdown. | | card-link | A link within a card footer. | # Checkbox ## CSS Custom Properties | CSS Custom Property | Description | | ----------------------------------------------- | ------------------------------------------ | | --clr-forms-checkbox-label-color | Font color of checkbox label | | --clr-forms-checkbox-background-color | Background color of checkbox | | --clr-forms-checkbox-indeterminate-border-color | Border color of indeterminate checkbox | | --clr-forms-checkbox-mark-color | Color of checkbox mark | | --clr-forms-checkbox-disabled-background-color | Background color of disabled checkbox | | --clr-forms-checkbox-disabled-mark-color | Color of disabled checkbox mark | | --clr-forms-checkbox-border-radius | Border radius of checkbox | | --clr-forms-checkbox-line-height | Line height of the checkbox button wrapper | | --clr-forms-checkbox-padding-left | Left padding for checkbox label element | | --clr-forms-checkbox-label-height | Height of the checkbox label element | ## CSS Classes | Class name | Description | | -------------------- | ---------------------------------------- | | clr-checkbox-wrapper | Wrapper class for the checkbox component | # Combobox ## CSS Custom Properties | CSS Custom Property | Description | | -------------------------------------- | ---------------------------------------------------------------------- | | --clr-combobox-trigger-color | Combobox trigger color | | --clr-combobox-font-size | Combobox font size | | --clr-combobox-border-color | Combobox border color | | --clr-combobox-border-radius | Combobox corners radius | | --clr-combobox-input-background-color | Combobox input background color | | --clr-combobox-pill-background-color | Background color of the selected items pills in a multiselect combobox | | --clr-combobox-pill-border-color | Border color of the selected items pills in a multiselect combobox | | --clr-combobox-pill-border-radius | Border radius of the selected items pills in a multiselect combobox | | --clr-combobox-pill-font-color | Text color of the selected items pills in a multiselect combobox | | --clr-combobox-filter-highlight | Combobox filter highlight color | | --clr-combobox-min-height | Minimal height of the combobox | | --clr-combobox-font-size | Combobox input font size | | --clr-combobox-font-weight | Combobox input font weight | | --clr-combobox-line-height | Combobox input line height | | --clr-combobox-text-color | Text color for the combobox input | | --clr-combobox-border-radius | Combobox border radius | | --clr-combobox-padding-left | Combobox input left padding | | --clr-combobox-trigger-padding-left | Combobox trigger/caret left padding | | --clr-combobox-trigger-padding-right | Combobox trigger/caret right padding | | --clr-combobox-trigger-gap | Gap between the input and caret | | --clr-combobox-trigger-font-color | Combobox trigger/caret font color | | --clr-combobox-hover-background-color | Background color when hovered or focused | | --clr-combobox-active-background-color | Background color of the element selected by keyboard | | --clr-combobox-pill-padding | Combobox multiselect pills padding | | --clr-combobox-pill-margin | Margin for the combobox multiselection pill element | | --clr-combobox-pill-height | Height of the combobox pill element | | --clr-combobox-pill-remove-icon-color | Color of the remove pill icon | | --clr-combobox-caret-icon-size | Size of the combobox caret icon icon | ## CSS Classes | Class name | Description | | -------------------------- | ----------------------------------------------------- | | clr-combobox | Combobox element class | | clr-combobox-container | Container class for the combobox | | clr-combobox-input | Combobox input element | | clr-combobox-options | List of combobox options | | clr-combobox-option | An option form the combobox suggestion list | | clr-combobox-trigger | Combobox trigger/caret button | | label-combobox-pill | Combobox selection pill element | | clr-combobox-remove-btn | Item remove button for multiselect combobox | | clr-combobox-pill-content | Content of the combobox selection pill element | | clr-combobox-disabled | Disabled combobox indicator | | clr-combobox-wrapper | Internal wrapper class | | clr-combobox-input-wrapper | Internal input wrapper class | | clr-combobox-form-control | Internal class used for label positioning calculation | # Datagrid ## CSS Properties | Property Name | Description | | ---------------------------------------------------- | ------------------------------------------------------------------------ | | --clr-datagrid-font-color | Not used. | | --clr-datagrid-default-border-color | Default border color for datagrid detail pane. | | --clr-datagrid-icon-color | Default color for expandable, detail caret icons and action toggle icon. | | --clr-datagrid-row-hover-color | Background color for datagrid row on hover and active action items. | | --clr-datagrid-row-hover-font-color | Font color for active action items. | | --clr-datagrid-action-toggle-color | Datagrid action toggle icon color when active. | | --clr-datagrid-pagination-btn-color | Color for pagination buttons. | | --clr-datagrid-pagination-btn-disabled-color | Color for disabled pagination buttons. | | --clr-datagrid-pagination-btn-disabled-opacity | Opacity for disabled pagination buttons. | | --clr-datagrid-pagination-input-border-color | Border color for the pagination input field. | | --clr-datagrid-pagination-input-border-focus-color | Border color for the pagination input field when focused. | | --clr-datagrid-popover-bg-color | Background color for popovers within the datagrid. | | --clr-datagrid-popover-border-color | Border color for popovers within the datagrid. | | --clr-datagrid-action-popover-hover-color | Background color of action items on hover and focus. | | --clr-datagrid-row-selected | Font color for selected rows. | | --clr-datagrid-column-switch-header-font-color | Font color for column switch header button icons. | | --clr-datagrid-column-switch-header-font-hover-color | Font color for column switch button icons on hover. | | --clr-datagrid-detail-caret-icon-open-bg-color | Background color for opened detail caret button. | | --clr-datagrid-detail-caret-icon-open-icon-color | Color of opened detail caret icon. | | --clr-datagrid-placeholder-color | Font color for empty datagrid placeholder. | | --clr-datagrid-placeholder-font-size | Font size for empty datagrid placeholder. | | --clr-datagrid-loading-background | Background color for the loading state of the datagrid. | | --clr-datagrid-column-toggle-border-color | Border color for column toggle buttons. | | --clr-datagrid-column-toggle-fill-color | Background color for column toggle buttons. | | --clr-datagrid-column-toggle-text-color | Text color for column toggle buttons. | | --clr-datagrid-column-toggle-border-hover-color | Border color for column toggle buttons when hovered. | | --clr-datagrid-column-toggle-fill-hover-color | Background color for column toggle buttons when hovered. | | --clr-datagrid-column-toggle-text-hover-color | Text color for column toggle buttons when hovered. | | --clr-datagrid-column-toggle-border-active-color | Border color for active column toggle buttons. | | --clr-datagrid-column-toggle-fill-active-color | Background color for active column toggle buttons. | | --clr-datagrid-column-toggle-text-active-color | Text color for active column toggle buttons. | | --clr-datagrid-popovers-box-shadow-color | Not used. | | --clr-datagrid-popover-padding | Padding for popovers | | --clr-datagrid-popover-font-color | Font color for popovers. | | --clr-datagrid-pagination-input-size | Width and Height for pagination input | | --clr-datagrid-detail-header-padding | Padding for detail header | | --clr-datagrid-detail-header-title-padding | Padding for detail header title | | --clr-datagrid-detail-pane-close-btn-margin | Margin for detail close button | | --clr-datagrid-detail-pane-close-padding | Padding for detail heade close wrapper | | --clr-datagrid-detail-body-padding | Padding for detail content body | | --clr-datagrid-detail-pane-close-btn-min-width | Minimal width for detail close button | | --clr-datagrid-detail-pane-content-padding | Padding for detail panel content | | --clr-datagrid-detail-pane-close-icon-size | Width and Height for detail close icon | | --clr-datagrid-detail-body-text-color | Font color for detail body | | --clr-datagrid-detail-header-title-color | Font color for detail header title | | --clr-datagrid-detail-pane-bg-color | Background color for detail panel | | --clr-datagrid-detail-pane-border-color | Border color for detail panel | | --clr-datagrid-footer-padding | Footer padding | | --clr-datagrid-placeholder-padding | Placeholder padding | | --clr-datagrid-placeholder-gap | Gap size for placeholder elements | | --clr-datagrid-placeholder-font-weight | Font weight for placeholder | | --clr-datagrid-placeholder-line-height | Line height for placeholder | | --clr-datagrid-placeholder-letter-spacing | Letter spacing for placeholder | | --clr-datagrid-placeholder-background-color | Background color for placeholder | | --clr-datagrid-column-separator-height | Height for column separator | | --clr-datagrid-filter-toggle-size | Width and Height for filter toggle button | | --clr-datagrid-row-active-color | Background color for active state on rows | | --clr-datagrid-footer-line-height | Line height for footer | | --clr-datagrid-fixed-column-size | Size for fixed columns inside datagrid | ## CSS Classes | Class Name | Description | | -------------------------------- | ---------------------------------------------------------------------------------------------- | | action-item | Action item within the datagrid's overflow container. | | clr-col-null | Prevents clr-col-\* classes inside clrForm wrapper. | | datagrid-action-overflow | Overflow container for action items. | | datagrid-cell | Single cell within a row of the datagrid. | | datagrid-column | Main datagrid column element. | | datagrid-column-flex | Flex container for the column content. | | datagrid-column-handle | Button for resizing the column. | | datagrid-column-resize-tracker | Visual indicator for column resizing. | | datagrid-column-separator | Separator between columns. | | datagrid-container | Internal class set if there are no datagrid cells inside row detail. | | datagrid-detail-body | Main datagrid detail body element. | | datagrid-detail-header | Main datagrid detail header element. | | datagrid-empty | Internal class set on datagrid placeholder if datagrid is empty. | | datagrid-expandable-caret | Container for the expandable rows caret button and for datagrid column header for carets. | | datagrid-expandable-caret-button | Expandable caret button within the expandable cell. | | datagrid-filter | Container for the filter popover. | | datagrid-filter-close-wrapper | Wrapper for the close button in the filter popover. | | datagrid-filter-open | Applied to the filter toggle button when open. | | datagrid-filter-toggle | Toggle button for opening/closing the filter popover. | | datagrid-filtered | Applied to the filter toggle button when active. | | datagrid-fixed-column | Fixed column. | | datagrid-footer | Main datagrid footer element. | | datagrid-footer-description | Wrapper for datagrid footer content. | | datagrid-footer-select | Select checkbox in the footer. | | datagrid-header | Header section of the datagrid. | | datagrid-calculate-mode | Internal class used while datagrid is in calculation mode. | | datagrid-placeholder | Container for the datagrid placeholder image and content. | | datagrid-placeholder-container | Main datagrid placholder element. | | datagrid-placeholder-content | Wrapper for datagrid placeholder content. | | datagrid-placeholder-image | Image in the placeholder. | | datagrid-row | Main datagrid row element. | | datagrid-row-actions | Container for the row actions. | | datagrid-row-clickable | Internal class used for calculation mode and on wrapper element for the row in selection mode. | | datagrid-row-detail | Main datagrid row detail element. | | datagrid-row-flex | Internal class for adding flex layout to a row. | | datagrid-row-master | Internal class used for calculcation mode and wrapper element for row content. | | datagrid-row-scrollable | Scrollable container for the row. | | datagrid-scrolling-cells | Container for the scrolling cells within the row. | | datagrid-select | Container for the selection checkbox/radio buttons. | | datagrid-signpost-trigger | Internal class for datagrid cells if there are signposts in it. | | is-open | Applied to the detail caret button when detail row open. | | is-replaced | Applied to the scrollable container when row replaced. | | pagination | Pagination element. | | pagination-current | Current page input. | | pagination-description | Pagination description. | | pagination-description-compact | The compact description when detail view is opened. | | pagination-first | First page button. | | pagination-last | Last page button. | | pagination-list | Pagination buttons. | | pagination-next | Next page button. | | pagination-previous | Previous page button. | | pagination-size | Wrapper for datagrid page size element. | | sort-icon | Sort icon for sortable columns. | # Datepicker ## CSS Custom Properties | CSS Custom Property | Description | | ------------------------------------------------- | ------------------------------------------------------------------- | | --clr-calendar-background-color | Background color of the calendar | | --clr-calendar-border-color | Border color of the calendar | | --clr-datepicker-trigger-color | Used in legacy layout which was removed | | --clr-datepicker-trigger-hover-color | Used in legacy layout which was removed | | --clr-calendar-btn-color | Calendar Buttons color | | --clr-calendar-btn-hover-focus-color | Calendar Buttons hover and focus color | | --clr-calendar-picker-btn-font-size | Font size for calendar month and year buttons | | --clr-calendar-picker-btn-font-weight | Font weight for calendar month and year buttons | | --clr-calendar-today-date-cell-color | Font color for today date | | --clr-calendar-today-date-cell-font-weight | Font weight for today date | | --clr-calendar-active-cell-background-color | Active cell background color | | --clr-calendar-active-cell-color | Active cell font color | | --clr-calendar-active-focus-cell-background-color | Focused cell background color | | --clr-day-font-size | Week day font size. Depricated use `clr-calendar-weekday-font-size` | | --clr-calendar-container-border-width | Calendar container border width | | --clr-calendar-container-border-radius | Calendar container border radius | | --clr-calendar-container-padding | Calendar container padding | | --clr-calendar-container-margin-top | Calendar container margin top | | --clr-calendar-container-width | Calendar container width | | --clr-calendar-container-height | Calendar container height | | --clr-calendar-cell-border-radius | Calendar cell border radius | | --clr-calendar-cell-width-height | Calendar cell width and height | | --clr-calendar-month-year-button-width | Calendar month and year button width | | --clr-calendar-month-year-cell-height | Calendar month and year cell height | | --clr-calendar-month-year-cell-width | Calendar month and year cell width | | --clr-calendar-year-picker-gap | Calendar year picker gap | | --clr-calendar-weekday-font-size | Calendar week day font size | | --clr-calendar-weekday-font-weight | Calendar week day font weight | | --clr-calendar-weekday-line-height | Calendar week day line height | | --clr-calendar-weekday-letter-spacing | Calendar week day letter spacing | | --clr-calendar-day-font-size | Calendar day font size | | --clr-calendar-day-font-weight | Calendar day font weight | | --clr-calendar-day-line-height | Calendar day line height | | --clr-calendar-day-letter-spacing | Calendar day letter spacing | | --clr-calendar-today-date-cell-font-weight | Calendar toady font weight | | --clr-calendar-month-year-font-size- | Calendar month year font size | | --clr-calendar-month-year-font-weight | Calendar month year font weight | | --clr-calendar-month-year-line-height | Calendar month year line height | | --clr-calendar-month-year-letter-spacing | Calendar month year letter spacing | | --clr-calendar-picker-btn-font-size | Calendar picker button font size | | --clr-calendar-picker-btn-font-weight | Calendar picker button font weight | | --clr-calendar-picker-btn-line-height | Calendar picker button line height | | --clr-calendar-picker-btn-letter-spacing | Calendar picker button letter spacing | ## CSS Classes | Class name | Description | | ----------------------- | ------------------------------------------------ | | datepicker | Main date picker element | | date-container | Not used | | datepicker-trigger | Not used. Marked as legacy and to be removed | | datepicker-trigger-icon | Not used. Marked as legacy and to be removed | | date-input | Not used | | calendar-header | Calendar header | | calendar-table | Calendar table | | calendar-row | Calendar row | | calendar-cell | Calendar cell | | calendar-btn | Calendar button | | calendar-pickers | Month and year picker buttons wrapper | | calendar-switchers | Month change and today buttons wrapper | | daypicker | Main day picker element | | day | Main element for day button | | day-btn | Day button inside calendar | | weekday | Weekday table heading | | weekdays | Weekdays table row wrapper | | month | Month buttons inside month picker | | monthpicker | Main month picker element | | monthpicker-trigger | Month picker button trigger | | year | Year buttons inside year picker | | years | Wrapper for year buttons inside year picker | | yearpicker | Main year picker element | | yearpicker-trigger | Year picker button trigger | | is-today | Set on day button which is equal to current date | | is-excluded | Set on day button if the date is excluded | | is-selected | Selected day button | | is-disabled | Disabled day button | | switcher | Switcher button | | year-switchers | Wrapper for switcher buttons inside year picker | # Dropdown ## CSS Custom Properties | CSS Custom Property | Description | | -------------------------------------- | -------------------------------------------------- | | --clr-dropdown-active-text-color | The text color of the active dropdown item. | | --clr-dropdown-active-background-color | The background color of the active dropdown item. | | --clr-dropdown-bg-color | The background color of the dropdown. | | --clr-dropdown-border-color | The border color of the dropdown. | | --clr-dropdown-divider-color | The color of the divider between dropdown items. | | --clr-dropdown-divider-border-width | Width of the dropdown items separator. | | --clr-dropdown-divider-margin | Margin of the dropdown divider. | | --clr-dropdown-child-border-color | The border color of child dropdown items. | | --clr-dropdown-bg-hover-color | The background color of the hovered dropdown item. | | --clr-dropdown-selection-color | The color of the selected dropdown item. | | --clr-dropdown-box-shadow | The box shadow of the dropdown. | | --clr-dropdown-text-color | The text color of the dropdown. | | --clr-dropdown-header-color | The color of the dropdown menu header. | | --clr-dropdown-header-font-weight | Font weight of the dropdown menu header. | | --clr-dropdown-header-font-size | Font size of the dropdown menu header. | | --clr-dropdown-header-line-height | Line height of the dropdown menu header. | | --clr-dropdown-header-padding | Padding of the dropdown menu header. | | --clr-dropdown-header-letter-spacing | Letter spacing of the dropdown menu header. | | --clr-dropdown-item-color | The color of the dropdown item. | | --clr-dropdown-item-font-weight | Font weight of the dropdown item. | | --clr-dropdown-item-padding | Single menu item padding | | --clr-dropdown-items-padding | Menu items list overall padding | | --clr-dropdown-border-radius | Menu items list border radius | | --clr-dropdown-caret-icon-size | Size of the dropdown menu expander caret. | | --clr-dropdown-subsection-offset | Offset of elements in menu with header. | ## CSS Classes | Class | Description | | ---------------- | ------------------------------------------------- | | dropdown | The overall dropdown component. | | dropdown-toggle | The toggle element inside the dropdown component. | | dropdown-menu | The dropdown menu container. | | dropdown-header | The header element inside the dropdown menu. | | dropdown-item | The individual items in the dropdown menu. | | expandable | The expandable dropdown item. | | dropdown-divider | The divider element in the dropdown menu. | | disabled | Applies the disabled state to the dropdown item. | # Grid layout ## CSS Classes | Class name | Description | | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | clr-row | Styles a flex row of columns | | clr-justify-content-#{POSITION} | Sets justify-content property to #{POSITION}, POSITION is one of 'start', 'center', 'end' | | clr-justify-content-between | Sets justify-content property to 'space-between' | | clr-justify-content-around | Sets justify-content property to 'space-around' | | clr-align-items-start | Horizontally aligns items in a row towards the beginning | | clr-align-items-center | Centers items horizontally in a row | | clr-align-items-end | Aligns items in a row to the right end | | clr-align-items-baseline | Aligns items in a row based on their baselines | | clr-align-items-stretch | Expands and evenly distributes items in a row | | clr-align-content-#{POSITION} | Aligns content of multiline flex rows to #{POSITION}, POSITION is any of 'start', 'center', 'end' | | clr-align-content-between | Evenly distributes the space between the flex columns in a multiline container, leaving no space at the beginning or end of the container | | clr-align-content-around | Evenly distributes the space around the flex columns in a multiline container, creating equal spacing between and around the lines | | clr-align-content-stretch | Stretches the flex columns in a multiline flex container, causing them to expand vertically and fill the available space | | clr-break-row | Breaks the columns in a row with a new line | | clr-clearfix | Clears floated content within a container | | clr-no-gutters | Removes gaps between column content in a row | | clr-col | Styles a column within a row | | clr-col-#{SIZE} | Styles a column that spans to #{SIZE}/12 of the row's width, SIZE is an integer in the [1,12] interval | | clr-col-#{BREAKPOINT} | Styles a column within a screen with width >= than #{BREAKPOINT}, BREAKPOINT is anything among 'sm', 'md', 'lg', 'xl' | | clr-col-#{BREAKPOINT}-#{SIZE} | Styles a column that spans to SIZE/12 of the row's width for a row with width >= BREAKPOINT | | clr-col-auto | Styles a column within a row to have auto width | | clr-col-#{BREAKPOINT}-auto | Styles a column within a row to have auto width for a small, medium, large and extra large screen | | clr-offset-#{OFFSET_SIZE} | Sets left offset to #{OFFSET_SIZE}/12 of the row's width, OFFSET_SIZE is an integer in the [1,11] interval | | clr-offset-#{BREAKPOINT}-#{OFFSET_SIZE} | Sets the left offset of the column to #{OFFSET_SIZE}/12 for a screen larger than #{BREAKPOINT} | | clr-order-first | Sets the order of the column as first | | clr-order-last | Sets the order of the column as last | | clr-order-#{ORDER} | Sets the order of the column, ORDER is an integer in the interval [1,12] | | clr-order-#{BREAKPOINT}-#{ORDER} | Sets the order of the column | | clr-align-self-auto | Sets align-self property of a column to #{POSITION}, POSITION is one of 'auto', 'start', 'end', 'center', 'baseline', 'stretch' | | clr-invisible | Sets the visibility of element to hidden | | clr-display-#{DISPLAY_VALUE} | Sets the display property of an element to #{DISPLAY_VALUE}, DISPLAY_VALUE is one of 'block', 'inline-block', 'inline' | | clr-align-#{POSITION} | Sets vertical-align to #{POSITION}, POSITION is one of 'baseline', 'top', 'middle', 'bottom', 'text-bottom', 'text-top' | | clr-flex-#{DIRECTION} | Sets the flex-direction to #{DIRECTION} ('row', 'column', 'row-reverse' or 'column-reverse') | | clr-flex-#{FLEX_WRAP_VALUE} | Sets the flex-wrap to #{FLEX_WRAP_VALUE} ('wrap', 'nowrap', 'wrap-reverse') | | clr-flex-fill | Makes a flex item expand to fill any remaining space within a flex container, distributing the available space evenly among the flex items | | clr-#{FLEXIBILITY}-#{SIZE} | Sets the flexibility (flex-grow or flex-shrink) to #{SIZE} (0 or 1) | | clr-float-#{BREAKPOINT}-#{DIRECTION} | Sets the float property to #{DIRECTION}('left', 'right' or 'none') for screens with width bigger than the #{BREAKPOINT} value for 'sm', 'md' or 'lg' | ## Screen width breakpoints | Breakpoint | Description | | ---------- | ----------- | | sm | >= 576px | | md | >= 768px | | lg | >= 992px | | xl | >= 1200px | # Headers ## CSS Custom Properties | CSS Custom Property | Description | | ------------------------------------------- | ------------------------------------------------------ | | --clr-header-height | Header overall height | | --clr-header-bg-color | Header background color | | --clr-header-divider-opacity | Opacity of the header divider | | --clr-header-divider-width | Width of the header divider | | --clr-header-divider-height | Height of the header divider | | --clr-header-nav-opacity | Header nav item opacity | | --clr-header-nav-hover-opacity | Header nav item opacity on hover | | --clr-header-2-bg-color | Second version of header background color | | --clr-header-3-bg-color | Third version of header background color | | --clr-header-4-bg-color | Fourth version of header background color | | --clr-header-5-bg-color | Fifth version of header background color | | --clr-header-6-bg-color | Sixth version of header background color | | --clr-header-7-bg-color | Seventh version of header background color | | --clr-header-8-bg-color | Eighth version of header background color | | --clr-header-font-color | Header text color | | --clr-header-font-color-hover | Header hovered item color | | --clr-header-title-color | Header branding title text color | | --clr-header-title-font-weight | Header branding title text fort weight | | --clr-header-title-font-family | Header branding title font family | | --clr-header-title-font-size | Header branding title font size | | --clr-header-title-line-height | Header branding title line height | | --clr-header-title-letter-spacing | Header branding title letter spacing | | --clr-header-branding-min-width | Header branding minimal width | | --clr-header-branding-padding | Header branding padding | | --clr-header-branding-icon-gap | Gap between icon and text in header branding section | | --clr-header-branding-logo-size | Size of the logo image in header branding section | | --clr-header-nav-link-padding | Header navigation buttons padding | | --clr-header-nav-link-line-height | Header navigation buttons line-height | | --clr-header-nav-link-font-size | Header navigation buttons font size | | --clr-header-nav-text-font-weight | Header navigation buttons font weight | | --clr-header-nav-text-font-weight-active | Active header navigation buttons font weight | | --clr-header-action-caret-right | Right margin of the header nav action caret | | --clr-header-search-height | Header search input height | | --clr-header-search-icon-size | Header search icon size | | --clr-header-search-margin-left | Header search field left margin | | --clr-header-search-margin-right | Header search field right margin | | --clr-header-search-gap | Gap between the subelements of the header search field | | --clr-header-search-input-font-size | Header search field font size | | --clr-header-search-input-font-color | Header search field text color | | --clr-header-search-border-active | Border of active/focused search field | | --clr-header-search-border-hover | Border of hovered search field | | --clr-header-search-placeholder-font-weight | Font weight of the header search placeholder | | --clr-header-search-placeholder-text-color | Text color of the header search placeholder | ## CSS Classes | Class name | Description | | ------------------------ | ------------------------------------ | | clr-header | Application header element | | header-hamburger-trigger | Hamburger icon for responsive header | | header-actions | Responsive header actions | # Input ## CSS Custom properties | Class name | Description | | -------------------------------- | -------------- | | --clr-forms-input-padding | Input padding | | --clr-forms-input-wrapper-height | Wrapper height | ## CSS Classes | Class name | Description | | --------------------------- | ------------------------------------------------------------- | | clr-input-wrapper | Wrapper for input element | | clr-input | Main input element | | clr-input-group | Wrapper for multiple form elements | | clr-input-group-addon | Input group addon (icon,text) | | clr-input-group-icon-action | Input group action. Used on button to add action on the input | # Label ## CSS Properties | CSS Property Name | Description | | ------------------------------------ | -------------------------------------- | | --clr-label-font-color-light | Font color for light labels | | --clr-label-font-color-dark | Font color for dark labels | | --clr-label-default-border-color | Default border color for labels | | --clr-label-bg-hover-color | Background color on hover for labels | | --clr-label-gray-bg-color | Not used | | --clr-label-gray-color | Not used | | --clr-label-purple-bg-color | Background color for purple labels | | --clr-label-purple-color | Font color for purple labels | | --clr-label-blue-bg-color | Background color for blue labels | | --clr-label-blue-color | Font color for blue labels | | --clr-label-orange-bg-color | Background color for orange labels | | --clr-label-orange-color | Font color for orange labels | | --clr-label-light-blue-bg-color | Background color for light blue labels | | --clr-label-light-blue-color | Font color for light blue labels | | --clr-label-info-bg-color | Background color for info labels | | --clr-label-info-font-color | Font color for info labels | | --clr-label-info-border-color | Border color for info labels | | --clr-label-success-bg-color | Background color for success labels | | --clr-label-success-font-color | Font color for success labels | | --clr-label-success-border-color | Border color for success labels | | --clr-label-warning-bg-color | Background color for warning labels | | --clr-label-warning-font-color | Font color for warning labels | | --clr-label-warning-border-color | Border color for warning labels | | --clr-label-danger-bg-color | Background color for danger labels | | --clr-label-danger-font-color | Font color for danger labels | | --clr-label-danger-border-color | Border color for danger labels | | --clr-label-font-size | Font size for labels | | --clr-label-font-weight | Font weight for label | | --clr-label-letter-spacing | Letter spacing for label | | --clr-label-border-radius | Border radius for label | | --clr-label-padding | Padding for labels | | --clr-label-gap-size | Gap size for labels | | --clr-label-line-height | Line height for labels | | --clr-label-clickable-font-size | Font size for clickable labels | | --clr-label-clickable-font-weight | Font weight for clickable labels | | --clr-label-clickable-letter-spacing | Letter spacing for clickable labels | | --clr-label-clickable-line-height | Line Height for clickable labels | ## Classes | Class Name | Description | | ------------- | ------------------------------- | | label | Default label class | | label- | Label class with specific color | | clickable | Clickable label class | # Layout ## CSS Custom Properties | CSS Custom Property | Description | | --------------------------- | ----------------------------------- | | --clr-global-app-background | Global application background color | ## CSS Classes | Class name | Description | | ----------------- | ---------------------------------- | | main-container | Main application container element | | alert-app-level | Application level alert slot | | header | Application header | | subnav, sub-nav | Secondary top navigation container | | content-container | Main content and nav container | | clr-vertical-nav | Left navigation container | | content-area | Pag content container | # Lists ## CSS Classes | Class name | Description | | ------------- | ----------------------------------------------------- | | list | Sets default sizes to list | | compact | Makes a list to use less space, used with .list | | list-unstyled | Removes default bullet styling of list items | | list-spacer | Sets space before the list contents | | list-group | Removes bullets and reduces spacing used inside .card | # Login ## CSS Custom Properties | CSS Custom Property | Description | | ---------------------------------- | ------------------------------- | | --clr-login-title-color | Color of the title. | | --clr-login-title-font-weight | Font weight of the title. | | --clr-login-title-font-family | Font family of the title. | | --clr-login-background-color | Background color. | | --clr-login-background | Background image. | | --clr-login-error-background-color | Error message background color. | | --clr-login-error-border-radius | Error message border radius. | | --clr-login-panel-line-color | Color of the divider line. | | --clr-login-panel-line-opacity | Opacity to the divider line. | ## CSS Classes | Class | Description | | ------------- | --------------------------------------------------------------------------------- | | login | The login form is a predefined form for applications that require authentication. | | login-wrapper | Wrapper element. | | title | The title `section` of the login form. | | welcome | The heading of the login form. | | hint | Hint/helper text within the title of the login form. | | login-group | Contains the login form controls. | | error | Error message. The error message is hidden by default. | | active | Adding the `active` class to the `.error` element makes the error message appear. | # Modal ## CSS Custom Properties | CSS Custom Property | Description | | ------------------------------------ | ---------------------------------------- | | --clr-modal-close-color | Fill color of modal close icon | | --clr-modal-bg-color | Background color of modal | | --clr-modal-content-box-shadow-color | Shadow color of modal content | | --clr-modal-backdrop-color | Color of modal backdrop | | --clr-modal-backdrop-opacity | Opacity of modal backdrop | | --clr-modal-border-radius | Border radius of a modal | | --clr-modal-title-color | Font color of modal title | | --clr-modal-title-font-family | Font family of modal title | | --clr-modal-title-font-weight | Font weight of modal title | | --clr-modal-sm-width | Width of the modal on small layout | | --clr-modal-md-width | Width of the modal on medium layout | | --clr-modal-lg-width | Width of the modal on large layout | | --clr-modal-xl-width | Width of the modal on extra large layout | | --clr-modal-text-color | Font color for modal content | | --clr-modal-content-box-shadow | Shadow of modal content | | --clr-modal-content-border-style | Border style of modal content | | --clr-modal-content-border-color | Border color of modal content | | --clr-modal-content-border-width | Border width of modal content | | --clr-modal-content-border-radius | Border radius of modal content | | --clr-modal-title-font-size | Font size for modal title | | --clr-modal-title-line-height | Line height for modal title | | --clr-modal-footer-gap | Gap size for footer content | | --clr-modal-close-icon-size | Size for modal close icon | ## CSS Classes | Class name | Description | | ------------------- | -------------------------------------------------- | | modal | Modal element class (positioning focused) | | modal-dialog | Modal dialog box class | | modal-sm | Sets `modal-dialog` to use small width | | modal-lg | Sets `modal-dialog` to use large width | | modal-xl | Sets `modal-dialog` to use extra-large width | | modal-content | Content class \*should be used in `modal-dialog` | | modal-header | Header class | | modal-title | Title class \*should be used inside `modal-header` | | modal-title-wrapper | Title wrapper | | modal-body-wrapper | Body wrapper | | modal-footer | Footer wrapper | | modal-backdrop | Backdrop class | | modal-nav | Modal nav class used only in wizards | # Password ## CSS Custom Properties | CSS Custom Property | Description | | -------------------------------------------- | ------------------------------------ | | --clr-forms-password-eye-icon-color | Color of show/hide eye icon | | --clr-forms-password-disabled-eye-icon-color | Color of disabled show/hide eye icon | # Progress bar ## CSS Custom Properties | CSS Custom Property | Description | | ---------------------------- | ---------------- | | --clr-progress-default-color | Default color | | --clr-progress-alt-color-1 | Success color | | --clr-progress-alt-color-2 | Danger color | | --clr-progress-alt-color-3 | Warning color | | --clr-progress-bg-color | Background color | ## CSS Classes | Class name | Description | | --------------- | ------------------------------------------------------------------------ | | progress | Main progress bar element | | progress-static | Main static progress bar element | | progress-fade | Fade out animation for progress bar | | progress-meter | The bar element in a static progress bar | | progress-group | Layout element for multiple progress bars | | progress-block | Layout element for progress bar groups | | flash | Sets the bar color to success once value of 100 is reached | | flash-danger | Sets the bar color to danger once value of 100 is reached | | labeled | Used with `progress` to show display value next to the bar | | loop | Loop animation for non-static progress bars | | danger | Combined with `progress loop` or `progress-static` to set progress color | | warning | Combined with `progress loop` or `progress-static` to set progress color | | success | Combined with `progress loop` or `progress-static` to set progress color | # Radio ## CSS Custom Properties | CSS Custom Properties | Description | | ------------------------------------------- | -------------------------------------------------------- | | --clr-forms-radio-label-color | Color of the label for radio buttons | | --clr-forms-radio-disabled-background-color | Background color of disabled radio buttons | | --clr-forms-radio-disabled-mark-color | Color of the mark (indicator) for disabled radio buttons | | --clr-forms-radio-line-height | Line height of the radio button wrapper | | --clr-forms-radio-padding-left | Left padding for radio label element | | --clr-forms-radio-label-height | Height of the radio label element | ## CSS Classes | Class | Description | | ----------------- | -------------------------------------------------------- | | clr-radio-wrapper | The wrapper container for the radio button and its label | | clr-control-label | The label element of the radio button | # Range ## CSS Custom Properties | CSS Custom Property | Description | | ---------------------------------------------- | --------------------------------------------- | | --clr-forms-range-progress-fill-color | The color of the range fill progress. | | --clr-forms-range-track-color | The background color of the range track. | | --clr-forms-range-track-border-color | The border color of the range track. | | --clr-forms-range-thumb-height | The height and width of the range thumb. | | --clr-forms-range-track-height | The height of the range track. | | --clr-forms-range-track-border-radius | The border radius of the range track. | | --clr-forms-range-progress-fill-color-disabled | The color of disabled range fill progress. | | --clr-forms-range-track-color-disabled | The background color of disabled range track. | | --clr-forms-range-track-border-color-disabled | The border color of disabled range. | ## CSS Classes | Class Name | Description | | ----------------- | ----------------------------------------------------------- | | clr-range-wrapper | Represents the wrapper element for the range input. | | fill-input | Represents the progress bar element inside the range input. | | clr-range | Represents the range input element. | # Select ## CSS Custom Properties | CSS Custom Property | Description | | -------------------------------------------- | ------------------------------------------------- | | --clr-forms-select-option-color | Text color used in the options of a single select | | --clr-forms-select-multiple-background-color | Background color used in a multiple select | | --clr-forms-select-multiple-border-color | Border color used by multiple select options | | --clr-forms-select-multiple-option-color | Text color used by the multiple select options | | --clr-forms-select-hover-background | Background color used when select is hovered. | | --clr-forms-select-hover-border-color | Border color used when select is hovered. | | --clr-forms-select-disabled-border-color | Border color used when select is disabled. | ## CSS Classes | Class name | Description | | ----------------------- | ---------------------------------------------- | | clr-select | Select element class | | clr-multiselect-wrapper | Internal class that wraps the single selects | | clr-select-wrapper | Internal class that wraps the multiple selects | # Signpost ## CSS Custom Properties | CSS Custom Property | Description | | --------------------------------------- | ---------------------------------- | | --clr-signpost-content-bg-color | Signpost content background color. | | --clr-signpost-content-border-color | Signpost content border color. | | --clr-signpost-border-color | Signpost border color. | | --clr-signpost-action-color | Signpost action color. | | --clr-signpost-action-hover-color | Signpost action hover color. | | --clr-signpost-pointer-border | Signpost pointer border. | | --clr-signpost-pointer-invisible-border | Signpost pointer invisible border. | | --clr-signpost-pointer-psuedo-border | Signpost pointer pseudo border. | | --clr-signpost-content-padding | Signpost content padding. | | --clr-signpost-content-color | Signpost content color. | | --clr-signpost-content-header-position | Signpost content header position. | | --clr-signpost-content-header-padding | Signpost content header padding. | ## CSS Classes | Class name | Description | | ----------------------- | ------------------------------------------------------------- | | signpost | Signpost element class. | | signpost-content | Content class for the signpost. | | signpost-content-header | Content header class for the signpost. | | signpost-content-body | Content body class for the signpost. | | signpost-trigger | Internal class for opening the signpost. | | signpost-wrap | Internal wrapper class. | | signpost-action | Internal action class. Used with content close action button. | # Spinner ## CSS Custom Properties | CSS Custom Property | Description | | ----------------------------------- | -------------------------------------------- | | --clr-spinner-default-size | Size (diameter) of large spinner | | --clr-spinner-medium-size | Size of medium spinner | | --clr-spinner-small-size | Size of small spinner | | --clr-spinner-margin-right | Spacing between spinner and text next to it | | --clr-spinner-default-stroke-width | Width (thickness) of stroke of large spinner | | --clr-spinner-medium-stroke-width | Width of medium spinner | | --clr-spinner-small-stroke-width | Width of small spinner | | --clr-spinner-fill-bg-color | Spinner background color | | --clr-spinner-fill-inverse-bg-color | Spinner background color for dark background | | --clr-spinner-fill-color | Color of rotating part of spinner | | --clr-spinner-fill-inverse-color | Spinner background color for dark background | | --clr-spinner-border-radius | Spinner border radius | ## CSS Classes | Class Name | Description | | --------------- | ------------------------------------- | | spinner | Default class for all spinners. | | spinner-inline | Display the spinner inline. | | spinner-inverse | Display the spinner in inverse mode. | | spinner-sm | Display the spinner with small size. | | spinner-md | Display the spinner with medium size. | | spinner-check | Display a checkmark icon spinner. | # Stack view ## CSS Custom Properties | CSS Custom Property | Description | | ---------------------------------------------------------------------- | --------------------------------------------------------------------- | | --clr-stack-view-border-radius | Border radius of stack view | | --clr-stack-view-border-color | Border color of stack view | | --clr-stack-view-bg-color | Background color of stack view | | --clr-stack-view-color | Font color of stack view | | --clr-stack-view-stack-block-border-bottom | Bottom border color of stack block | | --clr-stack-view-stack-block-label-text-color | Font color of stack block label | | --clr-stack-view-border-box-color | Last stack block element shadow color | | --clr-stack-block-changed-border-top-color | Changed stack block border top color | | --clr-stack-view-stack-block-label-and-content-bg-color | Background color of stack block label and content | | --clr-stack-view-stack-children-stack-block-border-bottom-color | Bottom border color of stack block children | | --clr-stack-view-stack-children-stack-block-label-and-content-bg-color | Background color of stack block children's label and content | | --clr-stack-view-stack-block-expanded-bg-color | Background color of expanded stack block label and content | | --clr-stack-view-stack-block-expandable-hover | Background color of expandable stack block label and content on hover | | --clr-stack-view-stack-block-content-text-color | Font color of stack block content | | --clr-stack-view-stack-block-expanded-text-color | Font color of expanded stack block label and content | | --clr-stack-view-stack-block-caret-color | Color of stack block caret | | --clr-stack-view-title-color | Stack view title color | | --clr-stack-view-stack-block-expandable-bg-hover | Stack view stack block expandable background color | | --clr-stack-view-stack-block-expandable-active | Stack view stack block expandable active (opened) color | | --clr-stack-view-stack-block-expandable-bg-active | Stack view stack-block expandable active background color | | --clr-stack-view-border-width | Stack view border width | | --clr-stack-view-stack-block-label-padding | Stack view stack block label padding | | --clr-stack-view-key-margin | Stack view key block margin | | --clr-stack-view-border-radius | Stack view border radius | | --clr-stack-view-stack-block-caret-dimension | Stack view stack block caret dimension | | --clr-stack-view-stack-children-block-label-padding-left | Stack view stack children block label padding | | --clr-stack-view-stack-title-padding | Stack view stack title padding | ## CSS Classes | Class name | Description | | ---------------------- | ---------------------------------------------------- | | stack-view | Main stack view element | | stack-header | Main stack header element | | stack-title | Stack view header title | | stack-actions | Wrapper for stack view header actions | | stack-action | Main header stack action class | | stack-block | Main stack block element | | stack-block-changed | Marks a stack block as changed | | stack-block-label | Wrapper for stack block label and content | | stack-view-key | Stack block view key element | | stack-block-content | Stack block content element | | stack-block-caret | Stack block caret icon element | | stack-children | Wrapper for stack block child blocks | | stack-block-expandable | Used with `stack-block` to add expandable caret icon | | stack-block-expanded | Stack block caret icon in expanded state | # Table ## CSS Custom Properties | CSS Custom Property | Description | | -------------------------------------- | --------------------------------------------------------- | | --clr-table-bgcolor | Background color of a table | | --clr-table-margin | Margin of a table | | --clr-thead-bgcolor | Background color of table header | | --clr-table-header-border-bottom-color | Not used | | --clr-table-footer-border-top-color | Not used in tables. Used for datagrid footer border color | | --clr-table-border-color | Border color of a table | | --clr-tablerow-bordercolor | Border color for table rows | | --clr-table-border-radius | Border radius for а table | | --clr-table-borderwidth | Border width for а table | | --clr-table-cornercellradius | Border radius for corner cells | | --clr-table-font-color | Font color for table rows | | --clr-thead-color | Font color for table header | ## CSS Classes All other table classes like `table, thead, tbody, th, td` are not specific to Clarity so they are not included. | Class name | Description | | -------------- | ------------------------ | | table-vertical | Vertical table | | table-noborder | Table with no borders | | table-compact | Table with less paddings | # Tabs ## CSS Custom Properties | CSS Custom Property | Description | | ----------------------------------------- | ------------------------------------------- | | --clr-nav-link-active-font-weight | Tabs nav link active font weight | | --clr-nav-link-font-weight | Tabs nav link font weight | | --clr-nav-link-color | Tabs nav link color | | --clr-nav-link-active-color | Tabs nav link active color | | --clr-nav-hover-bg-color | Tabs nav hover background color | | --clr-nav-active-bg-color | Tabs nav active background color | | --clr-nav-selected-bg-color | Tabs nav selected background color | | --clr-nav-box-shadow-color | Tabs nav box shadow color | | --clr-nav-active-box-shadow-color | Tabs nav active box shadow color | | --clr-nav-active-border-color | Tabs nav active border color | | --clr-nav-active-border-width | Tabs nav active border width | | --clr-nav-selected-hover-background-color | Tabs nav selected background color on hover | | --clr-nav-horizontal-gap-size | Tabs nav horizontal gap size | | --clr-nav-vertical-gap-size | Tabs nav vertical gap size | | --clr-nav-link-dropdown-toggle-padding | Tabs nav dropdown toggle padding | | --clr-nav-horizontal-link-padding | Tabs nav horizontal link padding | | --clr-nav-vertical-link-padding | Tabs nav vertical link padding | | --clr-nav-link-font-size | Tabs nav link font size | | --clr-nav-link-line-height | Tabs nav link line height | ## Class names | Class name | Description | | ------------- | --------------------------------------------- | | tabs-overflow | Used to grouping tabs in overflow tab. | | tabs-vertical | Used to display tabs in vertical orientation. | | tab-content | Inner class for the content of the tab. | # Textarea ## CSS Custom Properties | CSS Custom Property | Description | | ---------------------------------------- | ----------------------------------------- | | --clr-forms-textarea-background-color | Background color for textarea. | | --clr-forms-textarea-border-radius | Border radius for textarea. | | --clr-forms-textarea-padding | Textarea padding all sides. | | --clr-forms-textarea-wrapper-margin-top | Parent container of text area margin top. | | --clr-forms-textarea-disabled-background | Background color of disabled textarea. | ## CSS Classes | Class Name | Description | | -------------------- | ------------------------------ | | clr-textarea-wrapper | Wrapper class for the textarea | | clr-textarea | Class for the textarea element | # Timeline ## CSS Custom Properties | CSS Custom Property | Description | | ------------------------------------------- | ------------------------------------- | | --clr-timeline-line-color | Timeline line color | | --clr-timeline-step-header-color | Timeline step header text color | | --clr-timeline-step-title-color | Timeline step title text color | | --clr-timeline-step-description-color | Timeline step description text color | | --clr-timeline-incomplete-step-color | Incomplete timeline step circle color | | --clr-timeline-current-step-color | Current timeline step circle color | | --clr-timeline-success-step-color | Successful timeline step circle color | | --clr-timeline-error-step-color | Failed timeline step circle color | | --clr-timeline-step-title-font-weight | Timeline step title font weight | | --clr-timeline-step-title-font-size | Timeline step title font size | | --clr-timeline-step-title-line-height | Timeline step title line height | | --clr-timeline-step-header-font-weight | Timeline step header font weight | | --clr-timeline-step-header-font-size | Timeline step header font size | | --clr-timeline-step-header-line-height | Timeline step header line height | | --clr-timeline-step-description-font-weight | Timeline step description font weight | | --clr-timeline-step-description-font-size | Timeline step description font size | | --clr-timeline-step-description-line-height | Timeline step description line height | | --clr-timeline-horizontal-line-length | Timeline horizontal line length | | --clr-timeline-vertical-line-position | Timeline vertical line position | | --clr-timeline-vertical-line-length | Timeline vertical line length | | --clr-timeline-vertical-step-body-margin | Timeline vertical step body margin | | --clr-timeline-icon-size | Timeline icon size | | --clr-timeline-line-width | Timeline line width | | --clr-timeline-step-margin | Timeline step outer margin | ## CSS Classes | Class name | Description | | ----------------------------- | ------------------------------- | | clr-timeline | Main Timeline element | | clr-timeline-step | Timeline step element | | clr-timeline-step-header | Timeline step header | | clr-timeline-step-body | Timeline step body | | clr-timeline-step-title | Timeline step title | | clr-timeline-step-description | Timeline step description | | clr-timeline-vertical | Switches timeline vertical mode | # Toggle ## CSS Custom Properties | CSS Custom Property | Description | | --------------------------------------------- | ----------------------------------------------------- | | --clr-toggle-bg-color-off | Background color for toggle that is off | | --clr-toggle-bg-color-on | Background color for toggle that is on | | --clr-toggle-handle-bg-color | Background color of the handle of the toggle | | --clr-toggle-disabled-default-border-color | Border color for a disabled toggle | | --clr-toggle-disabled-off-border-color | Border color for disabled toggle that is off | | --clr-toggle-disabled-off-bg-color | Background color for a disabled toggle that is off | | --clr-toggle-disabled-off-handle-border-color | Handle border color for a disabled toggle that is off | | --clr-toggle-disabled-on-border-color | Border color for disabled toggle that is on | | --clr-toggle-disabled-on-bg-color | Background color for disabled toggle that is on | | --clr-toggle-disabled-on-handle-border-color | Handle border color for disabled toggle that is on | ## CSS Classes | Class name | Description | | ------------------ | ----------------------------------------------------------------- | | clr-toggle-wrapper | Wrapper class for the toggle switch component | | clr-toggle-right | Class that aligns the toggle switch to the right in the container | # Tooltip ## CSS Custom Properties | CSS Custom Property | Description | | ----------------------------------- | ------------------------------- | | --clr-tooltip-background-color | Tooltip background color | | --clr-tooltip-border-radius | Tooltip element corner radius | | --clr-tooltip-color | Color of the tooltip text | | --clr-tooltip-font-weight | Font weight of the tooltip text | | --clr-tooltip-content-padding | Padding of tooltip content | | --clr-tooltip-content-line-height | Tooltip content line height | | --clr-tooltip-content-margin | Tooltip content margin | | --clr-tooltip-arrow-width | Tooltip arrow width | | --clr-tooltip-arrow-height | Tooltip arrow height | | --clr-tooltip-arrow-horizontal-size | Tooltip arrow horizontal size | | --clr-tooltip-arrow-vertical-size | Tooltip arrow vertical size | ## CSS Classes | Class name | Description | | ------------------- | ---------------------------------------------------------------------- | | tooltip | Main tooltip component element | | tooltip-content | Tooltip content container | | tooltip-trigger | Tooltip trigger element | | tooltip-#{POSITION} | Tooltip position identifier (top, bottom, left, right, top-left, etc.) | | tooltip-#{SIZE} | Tooltip size identifier (sizes: xs, sm, md, lg) | # Tree view ## CSS Custom Properties | CSS Custom Property | Description | | -------------------------------------- | ---------------------------------------- | | --clr-tree-border-radius | Tree node content border radius | | --clr-tree-node-caret-link-hover-color | Caret hover color | | --clr-tree-link-hover-color | Tree link hover color | | --clr-tree-link-selection-color | Selected link background color | | --clr-tree-link-text-color | Tree link default font color | | --clr-tree-node-caret-color | Tree link caret color | | --clr-tree-node-font-size | Font size of the text | | --clr-tree-node-font-weight | Font weight of the text | | --clr-tree-node-line-height | Node line height | | --clr-tree-node-letter-spacing | Letter spacing of the text | | --clr-treenode-content-padding | Deprecated. Padding of tree node content | | --clr-tree-node-content-padding | Padding of tree node content | ## CSS Classes | Class name | Description | | ------------------------------- | ------------------------------------------- | | clr-tree-node | Main tree node element | | clr-tree-node-content-container | Wrapper for tree content and caret elements | | clr-treenode-content | Content wrapper for tree node | | clr-treenode-caret | Tree node caret button | | clr-tree-node-caret-icon | Tree node caret icon | | clr-treenode-spinner-container | Wrapper for tree node spinner | | clr-treenode-spinner | Tree node spinner | | clr-treenode-children | Wrapper for nested child tree nodes | | clr-treenode-link | Tree node link | # Vertical Nav ## CSS Custom Properties | CSS Custom Property | Description | | ----------------------------------------------- | ----------------------------------------- | | --clr-vertical-nav-icon-active-color | Vertical nav active icon color | | --clr-vertical-nav-toggle-icon-color | Vertical nav toggle icon color | | --clr-vertical-nav-item-color | Vertical nav item font color | | --clr-vertical-nav-item-active-color | Vertical nav item active font color | | --clr-vertical-nav-bg-color | Vertical nav background color | | --clr-vertical-nav-selected-bg-color | Vertical nav selected background color | | --clr-vertical-nav-hover-bg-color | Vertical nav hover background color | | --clr-vertical-nav-trigger-divider-border-width | Vertical nav trigger divider border width | | --clr-vertical-nav-trigger-divider-border-color | Vertical nav trigger divider border color | | --clr-vertical-nav-header-font-weight | Vertical nav header font weight | | --clr-vertical-nav-active-bg-color | Vertical nav active background color | | --clr-vertical-nav-active-color | Vertical nav active color | | --clr-vertical-nav-toggle-icon-hover-color | Vertical nav trigger icon hover color | | --clr-vertical-nav-toggle-icon-active-color | Vertical nav trigger icon active color | | --clr-vertical-nav-toggle-icon-disabled-color | Vertical nav trigger icon disabled color | | --clr-vertical-nav-item-padding | Vertical nav item padding | | --clr-vertical-nav-item-child-padding | Vertical nav sub items padding | | --clr-vertical-nav-item-height | Vertical nav item height | | --clr-vertical-nav-item-line-height | Vertical nav item line height | | --clr-vertical-nav-item-font-size | Vertical nav item font size | | --clr-vertical-nav-item-font-weight | Vertical nav item font weight | | --clr-vertical-nav-content-gap | Vertical nav content gap | | --clr-vertical-nav-toggle-button-size | Vertical nav toggle buton size | | --clr-vertical-nav-header-padding | Vertical nav header padding | | --clr-vertical-nav-header-font-size | Vertical nav header font size | | --clr-vertical-nav-header-line-height | Vertical nav header line height | ## CSS Classes | Class name | Description | | ---------------------- | --------------------------------------------------------------- | | clr-vertical-nav | Vertical nav element | | nav-content | Navigation content | | nav-divider | Navigation content separator | | nav-trigger | Navigation trigger button for collapse/expand state | | nav-trigger-icon | Navigation trigger icon | | nav-trigger--bottom | Move navigation trigger at the bottom | | nav-group | main vertical navigation group element | | nav-group-content | Wrapper for navigation group content | | nav-group-text | Navigation group content wrapper text | | nav-group-children | Wrapper for navigation group children elements | | nav-group-trigger | Navigation group trigger button for open/close group | | nav-group-trigger-icon | Navigation group trigger button icon | | nav-btn | Button to expand vertical nav when collapsed | | has-icons | Internal class showing if vertical nav has icons | | has-nav-groups | Internal class showing if vertical nav has at least 1 nav group | # Wizard ## CSS Custom Properties | CSS Custom Property | Description | | ---------------------------------------------- | ------------------------------------------------------------------- | | --clr-wizard-main-bgcolor | Wizard background color | | --clr-wizard-stepnav-bgcolor | Wizard navigation background color | | --clr-wizard-main-text-color | Wizard text color | | --clr-wizard-stepnav-text | Wizard navigation text color | | --clr-wizard-stepnav-text--active | Wizard navigation text color of the currently active element | | --clr-wizard-title-text | Wizard title text color | | --clr-wizard-stepnav-border-size | Wizard navigation border size | | --clr-wizard-stepnav-item-border-color | Wizard navigation border color | | --clr-wizard-stepnav-item-border-color--active | Wizard navigation border color for the currently active element | | --clr-wizard-stepnav-active-bgcolor | Wizard navigation background color for the currently active element | | --clr-wizard-header-action-color | Wizard header actions color | | --clr-wizard-header-action-color--hovered | Wizard header actions color on hover | | --clr-wizard-border-radius | Wizard border radius | | --clr-wizard-stepnav-active-border-radius | Wizard active navigation element border radius | | --clr-wizard-stepnav-border-color | Wizard navigation border color | | --clr-wizard-box-shadow | Wizard highlight indication | | --clr-wizard-stepnav-link-font-size | Wizard navigation item font size | | --clr-wizard-stepnav-link-line-height | Wizard navigation item line height | | --clr-wizard-stepnav-item-padding | Wizard navigation item padding | | --clr-wizard-stepnav-padding | Wizard navigation padding | | --clr-wizard-stepnav-link-padding | Wizard navigation item button padding | | --clr-wizard-stepnav-link-suffix-padding | Wizard navigation item button suffix padding | | --clr-wizard-stepnav-link-error-icon-color | Wizard navigation item button error icon color | | --clr-wizard-stepnav-item-error-border-color | Wizard navigation item error border color | | --clr-wizard-page-padding | Wizard page content padding | | --clr-wizard-footer-padding | Wizard page footer padding | | --clr-wizard-footer-height | Wizard page footer height | | --clr-wizard-stepnav-link-hover-bg-color | Wizard navigation item button background color on hover | | --clr-wizard-title-padding | Wizard title padding | | --clr-wizard-title-font-size | Wizard title font size | | --clr-wizard-title-line-height | Wizard title line height | | --clr-wizard-content-background-color | Wizard content background color | | --clr-wizard-header-padding | Wizard page header padding | | --clr-wizard-footer-buttons-wrapper-gap | Wizard page footer gap size between buttons | ## CSS Classes | Class name | Description | | ---------------------------------- | ---------------------------------------------- | | clr-wizard | Main wizard element | | clr-wizard-content | Wizard content container | | clr-wizard-page | Wizard page container | | wizard-#{SIZE} | Wizard size; sizes: [md, lg, xl] | | clr-wizard-btn | Wizard control button | | clr-wizard-title | Wizard title elelment | | clr-wizard-header-action | Wizard header action | | clr-wizard-stepnav | Wizard navigation container | | clr-wizard-stepnav-list | Wizard navigation list | | clr-wizard-stepnav-item | Wizard navigation item | | clr-wizard-stepnav-link | Wizard navigation item link indicator | | clr-wizard-stepnav-link-suffix | Wizard navigation item link state indicator | | clr-wizard-stepnav-item-error-icon | Wizard navigation item error icon | | clr-wizard-footer | Wizard footer | | clr-wizard-footer-buttons | Wizard footer buttons container | | clr-wizard--no-title | Remove wizard dialog title | | clr-wizard--no-shadow | Remove wizard dialog shadow | | clr-wizard-stepnav-wrapper | Internal wrapper for the wizard navigation | | clr-wizard-footer-buttons-wrapper | Internal wrapper for the wizard footer buttons | | clr-wizard-btn-wrapper | Internal wrapper for wizard control buttons |