risadmin_prod
/
Icard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Icard/angular-clarity-master(work.../node_modules/@clr/ui/STYLES.md

1651 lines
145 KiB
Markdown
Raw Normal View History

frontend
2024-07-16 14:55:36 +00:00
# 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-<color> | 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 |