@rossigee/clarity-ui 18.2.1-fixed

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (219) hide show
  1. package/README.md +29 -0
  2. package/STYLES.md +1796 -0
  3. package/accordion/_accordion.clarity.scss +81 -0
  4. package/accordion/_properties.accordion.scss +45 -0
  5. package/accordion/_variables.accordion.scss +91 -0
  6. package/button/_buttons.clarity.scss +374 -0
  7. package/button/_mixins.buttons.scss +232 -0
  8. package/button/_properties.buttons.scss +325 -0
  9. package/button/_properties.toggles.scss +35 -0
  10. package/button/_variables.buttons.scss +843 -0
  11. package/button/_variables.toggles.scss +41 -0
  12. package/button/button-group/_button-group.clarity.scss +193 -0
  13. package/clr-ui.css +31728 -0
  14. package/clr-ui.css.map +1 -0
  15. package/clr-ui.min.css +52 -0
  16. package/clr-ui.min.css.map +1 -0
  17. package/collapsible-panel/_mixins.collapsible-panel.scss +189 -0
  18. package/collapsible-panel/_properties.collapsible-panel.scss +42 -0
  19. package/collapsible-panel/_variables.collapsible-panel.scss +40 -0
  20. package/data/_mixins.tables.scss +111 -0
  21. package/data/_properties.tables.scss +62 -0
  22. package/data/_tables.clarity.scss +120 -0
  23. package/data/_variables.tables.scss +42 -0
  24. package/data/datagrid/_datagrid.clarity.scss +1753 -0
  25. package/data/datagrid/_mixins.datagrid.scss +102 -0
  26. package/data/datagrid/_properties.datagrid.scss +90 -0
  27. package/data/datagrid/_variables.datagrid.scss +96 -0
  28. package/data/stack-view/_properties.stack-view.scss +50 -0
  29. package/data/stack-view/_stack-view.clarity.scss +267 -0
  30. package/data/stack-view/_variables.stack-view.scss +32 -0
  31. package/data/tree-view/_properties.tree-view.scss +41 -0
  32. package/data/tree-view/_tree-view.clarity.scss +281 -0
  33. package/data/tree-view/_variables.tree-view.scss +51 -0
  34. package/emphasis/alert/_alert.clarity.scss +467 -0
  35. package/emphasis/alert/_mixins.alert.scss +96 -0
  36. package/emphasis/alert/_properties.alert.scss +183 -0
  37. package/emphasis/alert/_variables.alert.scss +502 -0
  38. package/emphasis/badge/_badges.clarity.scss +61 -0
  39. package/emphasis/badge/_mixins.bades.scss +34 -0
  40. package/emphasis/badge/_properties.badges.scss +82 -0
  41. package/emphasis/badge/_variables.badges.scss +160 -0
  42. package/emphasis/label/_labels.clarity.scss +175 -0
  43. package/emphasis/label/_mixins.label.scss +76 -0
  44. package/emphasis/label/_properties.label.scss +105 -0
  45. package/emphasis/label/_variables.label.scss +181 -0
  46. package/forms/combobox/_combobox.clarity.scss +322 -0
  47. package/forms/combobox/_properties.combobox.scss +45 -0
  48. package/forms/combobox/_variables.combobox.scss +32 -0
  49. package/forms/datepicker/_datepicker.clarity.scss +259 -0
  50. package/forms/datepicker/_mixins.datepicker.scss +90 -0
  51. package/forms/datepicker/_properties.datepicker.scss +46 -0
  52. package/forms/datepicker/_variables.datepicker.scss +74 -0
  53. package/forms/styles/_checkbox.clarity.scss +193 -0
  54. package/forms/styles/_containers.clarity.scss +228 -0
  55. package/forms/styles/_datalist.clarity.scss +47 -0
  56. package/forms/styles/_file-input.clarity.scss +134 -0
  57. package/forms/styles/_file.clarity.scss +52 -0
  58. package/forms/styles/_form.clarity.scss +87 -0
  59. package/forms/styles/_input-group.clarity.scss +118 -0
  60. package/forms/styles/_input.clarity.scss +78 -0
  61. package/forms/styles/_mixins.forms.scss +173 -0
  62. package/forms/styles/_number-input.clarity.scss +58 -0
  63. package/forms/styles/_password.clarity.scss +26 -0
  64. package/forms/styles/_properties.forms.scss +121 -0
  65. package/forms/styles/_radio.clarity.scss +120 -0
  66. package/forms/styles/_range.clarity.scss +124 -0
  67. package/forms/styles/_select.clarity.scss +178 -0
  68. package/forms/styles/_textarea.clarity.scss +77 -0
  69. package/forms/styles/_toggles.clarity.scss +209 -0
  70. package/forms/styles/_variables.forms.scss +128 -0
  71. package/icon/icon.component.scss +242 -0
  72. package/image/_icons.clarity.scss +101 -0
  73. package/image/_images.clarity.scss +42 -0
  74. package/image/_mixins.images.scss +11 -0
  75. package/layout/_card.clarity.scss +311 -0
  76. package/layout/_login.clarity.scss +240 -0
  77. package/layout/_properties.card.scss +36 -0
  78. package/layout/_properties.login.scss +32 -0
  79. package/layout/_variables.card.scss +23 -0
  80. package/layout/_variables.login.scss +22 -0
  81. package/layout/breadcrumbs/_breadcrumbs.clarity.scss +60 -0
  82. package/layout/breadcrumbs/_properties.breadcrumbs.scss +18 -0
  83. package/layout/breadcrumbs/_variables.breadcrumbs.scss +11 -0
  84. package/layout/grid/_grid.scss +23 -0
  85. package/layout/grid/grid/_grid.scss +39 -0
  86. package/layout/grid/mixins/_breakpoint.scss +83 -0
  87. package/layout/grid/mixins/_clearfix.scss +13 -0
  88. package/layout/grid/mixins/_grid-framework.scss +91 -0
  89. package/layout/grid/mixins/_grid.scss +39 -0
  90. package/layout/grid/utilities/_align.scss +30 -0
  91. package/layout/grid/utilities/_clearfix.scss +12 -0
  92. package/layout/grid/utilities/_display.scss +18 -0
  93. package/layout/grid/utilities/_flex.scss +222 -0
  94. package/layout/grid/utilities/_float.scss +26 -0
  95. package/layout/grid/utilities/_visibility.scss +60 -0
  96. package/layout/main-container/_layout.clarity.scss +87 -0
  97. package/layout/main-container/_properties.header.scss +39 -0
  98. package/layout/main-container/_variables.header.scss +32 -0
  99. package/layout/nav/_header.clarity.scss +40 -0
  100. package/layout/nav/_links.clarity.scss +84 -0
  101. package/layout/nav/_mixins.header.scss +332 -0
  102. package/layout/nav/_mixins.responsive-nav.scss +75 -0
  103. package/layout/nav/_nav.clarity.scss +100 -0
  104. package/layout/nav/_properties.nav.scss +27 -0
  105. package/layout/nav/_properties.responsive-nav.scss +23 -0
  106. package/layout/nav/_properties.subnav.scss +19 -0
  107. package/layout/nav/_responsive-nav.clarity.scss +488 -0
  108. package/layout/nav/_subnav.clarity.scss +48 -0
  109. package/layout/nav/_variables.nav.scss +13 -0
  110. package/layout/nav/_variables.responsive-nav.scss +28 -0
  111. package/layout/nav/_variables.subnav.scss +21 -0
  112. package/layout/tabs/_mixins.tabs.scss +41 -0
  113. package/layout/tabs/_properties.tabs.scss +25 -0
  114. package/layout/tabs/_tabs.clarity.scss +110 -0
  115. package/layout/tabs/_variables.tabs.scss +17 -0
  116. package/layout/vertical-nav/_mixins.vertical-nav.scss +52 -0
  117. package/layout/vertical-nav/_properties.vertical-nav.scss +73 -0
  118. package/layout/vertical-nav/_variables.vertical-nav.scss +52 -0
  119. package/layout/vertical-nav/_vertical-nav.clarity.scss +469 -0
  120. package/main.scss +14 -0
  121. package/modal/_modal.clarity.scss +362 -0
  122. package/modal/_properties.modal.scss +45 -0
  123. package/modal/_variables.modal.scss +38 -0
  124. package/package.json +15 -0
  125. package/popover/common/_popover.clarity.scss +28 -0
  126. package/popover/dropdown/_dropdown.clarity.scss +326 -0
  127. package/popover/dropdown/_menu-mixins.clarity.scss +132 -0
  128. package/popover/dropdown/_properties.dropdown.scss +50 -0
  129. package/popover/dropdown/_variables.dropdown.scss +36 -0
  130. package/popover/signpost/_properties.signpost.scss +34 -0
  131. package/popover/signpost/_signposts.clarity.scss +414 -0
  132. package/popover/signpost/_variables.signpost.scss +21 -0
  133. package/popover/tooltip/_mixins.tooltip.scss +186 -0
  134. package/popover/tooltip/_properties.tooltip.scss +28 -0
  135. package/popover/tooltip/_tooltips.clarity.scss +122 -0
  136. package/popover/tooltip/_variables.tooltip.scss +20 -0
  137. package/progress/progress-bars/_progress-bars.clarity.scss +616 -0
  138. package/progress/progress-bars/_properties.progress-bars.scss +24 -0
  139. package/progress/progress-bars/_variables.progress-bars.scss +15 -0
  140. package/progress/progress-bars/utils/_mixins.clarity.scss +18 -0
  141. package/progress/spinner/_mixins.spinner.scss +30 -0
  142. package/progress/spinner/_properties.spinner.scss +37 -0
  143. package/progress/spinner/_spinner.clarity.scss +148 -0
  144. package/progress/spinner/_variables.spinner.scss +25 -0
  145. package/stepper/_properties.stepper.scss +29 -0
  146. package/stepper/_stepper.clarity.scss +184 -0
  147. package/stepper/_variables.stepper.scss +13 -0
  148. package/styles/_a11y.scss +14 -0
  149. package/styles/_close.clarity.scss +60 -0
  150. package/styles/_components.clarity.scss +183 -0
  151. package/styles/_mixins.scss +478 -0
  152. package/styles/_normalize.scss +292 -0
  153. package/styles/_reboot.clarity.scss +374 -0
  154. package/styles/_variables.clarity.scss +139 -0
  155. package/styles/core/base/base.element.scss +97 -0
  156. package/styles/core/global.scss +12 -0
  157. package/styles/core/layout/_alignments.scss +18 -0
  158. package/styles/core/layout/_container.scss +29 -0
  159. package/styles/core/layout/_display.scss +58 -0
  160. package/styles/core/layout/_optimize.scss +60 -0
  161. package/styles/core/layout/_shadow-dom.scss +47 -0
  162. package/styles/core/layout/_spacing.scss +31 -0
  163. package/styles/core/layout/_type-grid.scss +66 -0
  164. package/styles/core/layout/_type-horizontal.scss +33 -0
  165. package/styles/core/layout/_type-vertical.scss +26 -0
  166. package/styles/core/layout/mixins/_mixins.alignment.scss +35 -0
  167. package/styles/core/layout/mixins/_mixins.display.scss +23 -0
  168. package/styles/core/layout/mixins/_mixins.grid.scss +105 -0
  169. package/styles/core/layout/mixins/_mixins.scss +106 -0
  170. package/styles/core/layout/mixins/_mixins.shadow-dom.scss +106 -0
  171. package/styles/core/layout/mixins/_mixins.type-horizontal.scss +113 -0
  172. package/styles/core/layout/mixins/_mixins.type-vertical.scss +108 -0
  173. package/styles/core/module.layout.scss +22 -0
  174. package/styles/core/module.reset.scss +48 -0
  175. package/styles/core/module.typography.scss +9 -0
  176. package/styles/core/theme.dark.scss +266 -0
  177. package/styles/core/theme.high-contrast.scss +42 -0
  178. package/styles/core/theme.low-motion.scss +20 -0
  179. package/styles/core/tokens/_alias-interaction.scss +59 -0
  180. package/styles/core/tokens/_alias-object-background.scss +14 -0
  181. package/styles/core/tokens/_alias-object-border.scss +21 -0
  182. package/styles/core/tokens/_alias-object-container.scss +20 -0
  183. package/styles/core/tokens/_alias-object-opacity.scss +15 -0
  184. package/styles/core/tokens/_alias-object-shadow.scss +17 -0
  185. package/styles/core/tokens/_alias-status.scss +34 -0
  186. package/styles/core/tokens/_alias-typography.scss +101 -0
  187. package/styles/core/tokens/_alias-utility.scss +38 -0
  188. package/styles/core/tokens/_alias-viz-colors.scss +170 -0
  189. package/styles/core/tokens/_global-animation.scss +32 -0
  190. package/styles/core/tokens/_global-colors.scss +249 -0
  191. package/styles/core/tokens/_global-space.scss +52 -0
  192. package/styles/core/tokens/_internal-scale.scss +14 -0
  193. package/styles/core/tokens/_properties.tokens.scss +21 -0
  194. package/styles/core/tokens/_variables.tokens.scss +770 -0
  195. package/styles/core/typography/_legacy-typography.scss +328 -0
  196. package/styles/core/typography/_mixins.typography.scss +18 -0
  197. package/styles/core/typography/_typography.scss +321 -0
  198. package/styles/variables/_properties.density.scss +223 -0
  199. package/styles/variables/_properties.global.scss +51 -0
  200. package/styles/variables/_properties.layout.scss +21 -0
  201. package/styles/variables/_properties.scss +11 -0
  202. package/styles/variables/_properties.typography.scss +164 -0
  203. package/styles/variables/_variables.density.scss +114 -0
  204. package/styles/variables/_variables.global.scss +82 -0
  205. package/styles/variables/_variables.layout.scss +37 -0
  206. package/styles/variables/_variables.scss +11 -0
  207. package/styles/variables/_variables.typography.scss +156 -0
  208. package/timeline/_properties.timeline.scss +38 -0
  209. package/timeline/_timeline.clarity.scss +172 -0
  210. package/timeline/_variables.timeline.scss +29 -0
  211. package/typography/_code.scss +36 -0
  212. package/typography/_font-metropolis.scss +45 -0
  213. package/typography/_lists.scss +81 -0
  214. package/typography/_typography.scss +322 -0
  215. package/utils/animations/_animations.clarity.scss +44 -0
  216. package/utils/animations/_mixins.animations.scss +33 -0
  217. package/wizard/_properties.wizard.scss +53 -0
  218. package/wizard/_variables.wizard.scss +58 -0
  219. package/wizard/_wizard.clarity.scss +688 -0
package/STYLES.md ADDED
@@ -0,0 +1,1796 @@
1
+ # Accordion
2
+
3
+ ## CSS Custom Properties
4
+
5
+ | CSS Custom Property | Description |
6
+ | --------------------------------------------------- | ----------------------------------------------------------------- |
7
+ | --clr-accordion-text-color | Text color of the accordion component. |
8
+ | --clr-accordion-text-color-hover | Text color of the accordion header when hovered. |
9
+ | --clr-accordion-text-color-active | Text color of the accordion header when active. |
10
+ | --clr-accordion-text-color-selected | Text color of the accordion header when selected. |
11
+ | --clr-accordion-panel-disabled-color | Text color of the accordion header when disabled. |
12
+ | --clr-accordion-content-background-color | Background color of the accordion content area. |
13
+ | --clr-accordion-content-color | Color of the text in the accordion content area. |
14
+ | --clr-accordion-header-background-color | Background color of the accordion header. |
15
+ | --clr-accordion-header-disabled-background-color | Background color of the accordion header when disabled. |
16
+ | --clr-accordion-header-hover-background-color | Background color of the accordion header on hover. |
17
+ | --clr-accordion-header-active-background-color | Background color of the accordion header when active. |
18
+ | --clr-accordion-header-open-hover-background-color | Background color of the accordion header when opened and hovered. |
19
+ | --clr-accordion-header-open-active-background-color | Background color of the accordion header when opened and :active. |
20
+ | --clr-accordion-border-color | Color of the accordion border. |
21
+ | --clr-accordion-border-radius | Border radius of the accordion. |
22
+
23
+ ## CSS Classes
24
+
25
+ | Class Name | Description |
26
+ | ------------------------------------ | ----------------------------------------------------- |
27
+ | clr-accordion | Accordion component. |
28
+ | clr-accordion-panel | Panel within the accordion. |
29
+ | clr-accordion-header | Header section of an accordion panel. |
30
+ | clr-accordion-number | Number or step indicator within the accordion. |
31
+ | clr-accordion-header-button | Clickable button within the accordion header. |
32
+ | clr-accordion-status | Status indicator within the accordion header. |
33
+ | clr-accordion-title | Title text within the accordion header. |
34
+ | clr-accordion-header-has-description | Accordion header with a description. |
35
+ | clr-accordion-description | Description text within the accordion header. |
36
+ | clr-accordion-content | Content section of an accordion panel. |
37
+ | clr-accordion-content-region | Content region section of an accordion panel. |
38
+ | clr-accordion-inner-content | Inner content section within the accordion content. |
39
+ | clr-accordion-angle | Angle or arrow indicator within the accordion header. |
40
+ | clr-accordion-panel-open | Open or expanded accordion panel. |
41
+ | clr-accordion-panel-disabled | Disabled state of an accordion panel. |
42
+
43
+ # Alert
44
+
45
+ ## CSS Custom Properties
46
+
47
+ | CSS Custom Property | Description |
48
+ | ---------------------------------------------- | ----------------------------------------------------------------- |
49
+ | --clr-alert-action-color | Alerts action default font color |
50
+ | --clr-alert-action-active-color | Alerts action default font color on focus, hover, active |
51
+ | --clr-alert-close-icon-color | Close icon default color |
52
+ | --clr-alert-close-icon-hover-color | Close icon default color on hover |
53
+ | --clr-app-level-alert-color | Default font color for app level alerts |
54
+ | --clr-app-alert-close-icon-color | Close icon default color for app level alerts |
55
+ | --clr-alert-borderradius | Border radius |
56
+ | --clr-alert-info-bg-color | Info alert background color |
57
+ | --clr-alert-info-font-color | Info alert font color |
58
+ | --clr-alert-info-border-color | Info alert border color |
59
+ | --clr-alert-info-icon-color | Info alert icon color |
60
+ | --clr-alert-info-action-color | Info alert action font color |
61
+ | --clr-alert-info-action-active-color | Info alert action font color on focus, hover, active |
62
+ | --clr-alert-info-close-icon-color | Info alert close icon color |
63
+ | --clr-alert-info-close-icon-hover-color | Info alert close icon color on hover |
64
+ | --clr-alert-success-bg-color | Success alert background color |
65
+ | --clr-alert-success-font-color | Success alert font color |
66
+ | --clr-alert-success-border-color | Success alert border color |
67
+ | --clr-alert-success-icon-color | Success alert icon color |
68
+ | --clr-alert-success-action-color | Success alert action font color |
69
+ | --clr-alert-success-action-active-color | Success alert action font color on focus, hover, active |
70
+ | --clr-alert-success-close-icon-color | Success alert close icon color |
71
+ | --clr-alert-success-close-icon-hover-color | Success alert close icon color on hover |
72
+ | --clr-alert-warning-bg-color | Warning alert background color |
73
+ | --clr-alert-warning-font-color | Warning alert font color |
74
+ | --clr-alert-warning-border-color | Warning alert border color |
75
+ | --clr-alert-warning-icon-color | Warning alert icon color |
76
+ | --clr-alert-warning-action-color | Warning alert action font color |
77
+ | --clr-alert-warning-action-active-color | Warning alert action font color on focus, hover, active |
78
+ | --clr-alert-warning-close-icon-color | Warning alert close icon color |
79
+ | --clr-alert-warning-close-icon-hover-color | Warning alert close icon color on hover |
80
+ | --clr-alert-danger-bg-color | Danger alert background color |
81
+ | --clr-alert-danger-font-color | Danger alert font color |
82
+ | --clr-alert-danger-border-color | Danger alert border color |
83
+ | --clr-alert-danger-icon-color | Danger alert icon color |
84
+ | --clr-alert-danger-action-color | Danger alert action font color |
85
+ | --clr-alert-danger-action-active-color | Danger alert action font color on focus, hover, active |
86
+ | --clr-alert-danger-close-icon-color | Danger alert close icon color |
87
+ | --clr-alert-danger-close-icon-hover-color | Danger alert close icon color on hover |
88
+ | --clr-alert-neutral-bg-color | Neutral alert background color |
89
+ | --clr-alert-neutral-font-color | Neutral alert font color |
90
+ | --clr-alert-neutral-border-color | Neutral alert border color |
91
+ | --clr-alert-neutral-icon-color | Neutral alert icon color |
92
+ | --clr-alert-neutral-action-color | Neutral alert action font color |
93
+ | --clr-alert-neutral-action-active-color | Neutral alert action font color on focus, hover, active |
94
+ | --clr-alert-neutral-close-icon-color | Neutral alert close icon color |
95
+ | --clr-alert-neutral-close-icon-hover-color | Neutral alert close icon color on hover |
96
+ | --clr-app-alert-info-bg-color | App level info alert background color |
97
+ | --clr-app-alert-info-font-color | App level info alert font color |
98
+ | --clr-app-alert-info-border-color | App level info alert border color |
99
+ | --clr-app-alert-info-icon-color | App level info alert icon color |
100
+ | --clr-app-alert-info-action-color | App level info alert action font color |
101
+ | --clr-app-alert-info-action-active-color | App level info alert action font color on focus, hover, active |
102
+ | --clr-app-alert-info-close-icon-color | App level info alert close icon color |
103
+ | --clr-app-alert-info-close-icon-hover-color | App level info alert close icon color on hover |
104
+ | --clr-app-alert-warning-bg-color | App level warning alert background color |
105
+ | --clr-app-alert-warning-border-color | App level warning alert border color |
106
+ | --clr-app-alert-warning-icon-color | App level warning alert icon color |
107
+ | --clr-app-alert-warning-font-color | App level warning alert font color |
108
+ | --clr-app-alert-warning-action-color | App level warning alert action font color |
109
+ | --clr-app-alert-warning-action-active-color | App level warning alert action font color on focus, hover, active |
110
+ | --clr-app-alert-warning-close-icon-color | App level warning alert close icon color |
111
+ | --clr-app-alert-warning-close-icon-hover-color | App level warning alert close icon color on hover |
112
+ | --clr-app-alert-danger-bg-color | App level danger alert background color |
113
+ | --clr-app-alert-danger-border-color | App level danger alert border color |
114
+ | --clr-app-alert-danger-icon-color | App level danger alert icon color |
115
+ | --clr-app-alert-danger-font-color | App level danger alert font color |
116
+ | --clr-app-alert-danger-action-color | App level danger alert action font color |
117
+ | --clr-app-alert-danger-action-active-color | App level danger alert action font color on focus, hover, active |
118
+ | --clr-app-alert-danger-close-icon-color | App level danger alert close icon color |
119
+ | --clr-app-alert-danger-close-icon-hover-color | App level danger alert close icon color on hover |
120
+ | --clr-app-alert-success-border-color | App level success alert border color |
121
+ | --clr-app-alert-success-bg-color | App level success alert background color |
122
+ | --clr-app-alert-success-icon-color | App level success alert icon color |
123
+ | --clr-app-alert-success-font-color | App level success alert font color |
124
+ | --clr-app-alert-success-action-color | App level success alert action font color |
125
+ | --clr-app-alert-success-action-active-color | App level success alert action font color on focus, hover, active |
126
+ | --clr-app-alert-success-close-icon-color | App level success alert close icon color |
127
+ | --clr-app-alert-success-close-icon-hover-color | App level success alert close icon color on hover |
128
+ | --clr-app-alert-neutral-border-color | App level neutral alert border color |
129
+ | --clr-app-alert-neutral-bg-color | App level neutral alert background color |
130
+ | --clr-app-alert-neutral-icon-color | App level neutral alert icon color |
131
+ | --clr-app-alert-neutral-font-color | App level neutral alert font color |
132
+ | --clr-app-alert-neutral-action-color | App level neutral alert action font color |
133
+ | --clr-app-alert-neutral-action-active-color | App level neutral alert action font color on focus, hover, active |
134
+ | --clr-app-alert-neutral-close-icon-color | App level neutral alert close icon color |
135
+ | --clr-app-alert-neutral-close-icon-hover-color | App level neutral alert close icon color on hover |
136
+ | --clr-app-alert-pager-text-color | Alert pager default font color |
137
+ | --clr-app-alert-info-pager-bg-color | Info alert pager font color |
138
+ | --clr-app-alert-warning-pager-bg-color | Warning alert pager font color |
139
+ | --clr-app-alert-danger-pager-bg-color | Danger alert pager font color |
140
+ | --clr-app-alert-success-pager-bg-color | Danger success pager font color |
141
+ | --clr-app-alert-neutral-pager-bg-color | Danger neutral pager font color |
142
+ | --clr-lightweight-alert-info-icon-color | Lightweight alert info icon color |
143
+ | --clr-lightweight-alert-info-font-color | Lightweight alert info font color |
144
+ | --clr-lightweight-alert-warning-icon-color | Lightweight alert warning icon color |
145
+ | --clr-lightweight-alert-warning-font-color | Lightweight alert warning font color |
146
+ | --clr-lightweight-alert-danger-icon-color | Lightweight alert danger icon color |
147
+ | --clr-lightweight-alert-danger-font-color | Lightweight alert danger font color |
148
+ | --clr-lightweight-alert-success-icon-color | Lightweight alert success icon color |
149
+ | --clr-lightweight-alert-success-font-color | Lightweight alert success font color |
150
+ | --clr-lightweight-alert-neutral-icon-color | Lightweight alert neutral icon color |
151
+ | --clr-lightweight-alert-neutral-font-color | Lightweight alert neutral font color |
152
+
153
+ ## CSS Classes
154
+
155
+ | Class name | Description |
156
+ | -------------------- | -------------------------------------------------------------------------- |
157
+ | alert | Main alert element |
158
+ | alert-info | Addition to `alert` class to present it as info alert |
159
+ | alert-success | Addition to `alert` class to present it as success alert |
160
+ | alert-warning | Addition to `alert` class to present it as warning alert |
161
+ | alert-danger | Addition to `alert` class to present it as danger alert |
162
+ | alert-neutral | Addition to `alert` class to present it as neutral alert |
163
+ | alert-app-level | Addition to `alert` class to present it as app-level alert |
164
+ | alert-items | Wrapper for elements with class `alert-item` |
165
+ | alert-item | Element for messages in alert |
166
+ | alert-text | Text inside alert items |
167
+ | alert-actions | Wrapper for actions |
168
+ | alert-action | Action element |
169
+ | close | Close element `X` |
170
+ | alert-icon | Icon used in alert items |
171
+ | alert-icon-wrapper | Wrapper for icons |
172
+ | alert-sm | Alert with a smaller size |
173
+ | alert-lightweight | Light weight alert |
174
+ | alert-hidden | Hide alert |
175
+ | alerts | Main alerts element \*should be used with `alert-info` or equivalent class |
176
+ | alerts-pager | Alerts pager element |
177
+ | alerts-pager-button | Pager button |
178
+ | alerts-pager-control | Pager controls wrapper |
179
+ | alerts-page-down | Page down wrapper |
180
+ | alerts-page-up | Page up wrapper |
181
+ | alerts-pager-text | Page identifier in pager |
182
+ | alerts-spinner | Using spinner instead of an icon |
183
+
184
+ # Badge
185
+
186
+ ## CSS Custom Properties
187
+
188
+ | CSS Custom Property | Description |
189
+ | ------------------------------------------- | ------------------------------------------ |
190
+ | --clr-badge-background-color | Default badge background color |
191
+ | --clr-badge-border-color | Default badge border color |
192
+ | --clr-badge-color | Default badge text color |
193
+ | --clr-badge-outline-bg-color | Default badge outlined background color |
194
+ | --clr-badge-outline-border-color | Default badge outlined border color |
195
+ | --clr-badge-outline-color | Default badge outlined text color |
196
+ | --clr-badge-info-bg-color | Info badge background color |
197
+ | --clr-badge-info-border-color | Info badge border color |
198
+ | --clr-badge-info-color | Info badge text color |
199
+ | --clr-badge-info-outline-bg-color | Info badge outlined background color |
200
+ | --clr-badge-info-outline-border-color | Info badge outlined border color |
201
+ | --clr-badge-info-outline-color | Info badge outlined text color |
202
+ | --clr-badge-success-bg-color | Success badge background color |
203
+ | --clr-badge-success-border-color | Success badge border color |
204
+ | --clr-badge-success-color | Success badge text color |
205
+ | --clr-badge-success-outline-bg-color | Success badge outlined background color |
206
+ | --clr-badge-success-outline-border-color | Success badge outlined border color |
207
+ | --clr-badge-success-outline-color | Success badge outlined text color |
208
+ | --clr-badge-warning-bg-color | Warning badge background color |
209
+ | --clr-badge-warning-border-color | Warning badge border color |
210
+ | --clr-badge-warning-color | Warning badge text color |
211
+ | --clr-badge-warning-outline-bg-color | Warning badge outlined background color |
212
+ | --clr-badge-warning-outline-border-color | Warning badge outlined border color |
213
+ | --clr-badge-warning-outline-color | Warning badge outlined text color |
214
+ | --clr-badge-danger-bg-color | Danger badge background color |
215
+ | --clr-badge-danger-border-color | Danger badge border color |
216
+ | --clr-badge-danger-color | Danger badge text color |
217
+ | --clr-badge-danger-outline-bg-color | Danger badge outlined background color |
218
+ | --clr-badge-danger-outline-border-color | Danger badge outlined border color |
219
+ | --clr-badge-danger-outline-color | Danger badge outlined text color |
220
+ | --clr-badge-gray-bg-color | Gray badge background color |
221
+ | --clr-badge-gray-border-color | Gray badge border color |
222
+ | --clr-badge-gray-color | Gray badge text color |
223
+ | --clr-badge-gray-outline-bg-color | Gray badge outlined background color |
224
+ | --clr-badge-gray-outline-border-color | Gray badge outlined border color |
225
+ | --clr-badge-gray-outline-color | Gray badge outlined text color |
226
+ | --clr-badge-purple-bg-color | Purple badge background color |
227
+ | --clr-badge-purple-border-color | Purple badge border color |
228
+ | --clr-badge-purple-color | Purple badge text color |
229
+ | --clr-badge-purple-outline-bg-color | Purple badge outlined background color |
230
+ | --clr-badge-purple-outline-border-color | Purple badge outlined border color |
231
+ | --clr-badge-purple-outline-color | Purple badge outlined text color |
232
+ | --clr-badge-blue-bg-color | Blue badge background color |
233
+ | --clr-badge-blue-border-color | Blue badge border color |
234
+ | --clr-badge-blue-color | Blue badge text color |
235
+ | --clr-badge-blue-outline-bg-color | Blue badge outlined background color |
236
+ | --clr-badge-blue-outline-border-color | Blue badge outlined border color |
237
+ | --clr-badge-blue-outline-color | Blue badge outlined text color |
238
+ | --clr-badge-orange-bg-color | Orange badge background color |
239
+ | --clr-badge-orange-border-color | Orange badge border color |
240
+ | --clr-badge-orange-color | Orange badge text color |
241
+ | --clr-badge-orange-outline-bg-color | Orange badge outlined background color |
242
+ | --clr-badge-orange-outline-border-color | Orange badge outlined border color |
243
+ | --clr-badge-orange-outline-color | Orange badge outlined text color |
244
+ | --clr-badge-light-blue-bg-color | Light-blue badge background color |
245
+ | --clr-badge-light-blue-border-color | Light-blue badge border color |
246
+ | --clr-badge-light-blue-color | Light-blue badge text color |
247
+ | --clr-badge-light-blue-outline-bg-color | Light-blue badge outlined background color |
248
+ | --clr-badge-light-blue-outline-border-color | Light-blue badge outlined border color |
249
+ | --clr-badge-light-blue-outline-color | Light-blue badge outlined text color |
250
+
251
+ ## CSS Classes
252
+
253
+ | Class name | Description |
254
+ | ---------------- | ------------------------------------------------------------------- |
255
+ | badge | Main badge element. All of the following require this class as well |
256
+ | outlined | Outlined label class |
257
+ | badge-info | Info badge |
258
+ | badge-success | Success badge |
259
+ | badge-danger | Danger badge |
260
+ | badge-warning | Warning badge |
261
+ | badge-gray | Gray badge |
262
+ | badge-purple | Purple badge |
263
+ | badge-blue | Blue badge |
264
+ | badge-orange | Orange badge |
265
+ | badge-light-blue | Light-blue badge |
266
+
267
+ # Breadcrumbs
268
+
269
+ ## CSS Custom Properties
270
+
271
+ | CSS Custom Property | Description |
272
+ | --------------------------- | ----------------------- |
273
+ | --clr-breadcrumb-item-space | Breadcrumb item spacing |
274
+
275
+ ## CSS Classes
276
+
277
+ | Class name | Description |
278
+ | --------------------- | ------------------------- |
279
+ | clr-breadcrumb | Breadcrumb element |
280
+ | clr-breadcrumb-menu | Breadcrumb menu |
281
+ | clr-breadcrumb-item | Breadcrumb menu item |
282
+ | clr-breadcrumb-expand | Breadcrumb expand control |
283
+
284
+ # Button
285
+
286
+ ## CSS Custom Properties
287
+
288
+ | CSS Custom Property | Description |
289
+ | ----------------------------------------------- | -------------------------------------------------------------------------- |
290
+ | --clr-btn-vertical-margin | Button top and bottom margin |
291
+ | --clr-btn-horizontal-margin | Button left and right margin |
292
+ | --clr-btn-vertical-padding | Button top and bottom padding |
293
+ | --clr-btn-horizontal-padding | Button left and right padding |
294
+ | --clr-btn-padding | Button padding |
295
+ | --clr-btn-height | Button height |
296
+ | --clr-btn-height-sm | Small button height |
297
+ | --clr-btn-border-radius | Button border radius |
298
+ | --clr-btn-border-width | Button border width |
299
+ | --clr-btn-outline-bg-color | Base outline button background color |
300
+ | --clr-btn-default-color | Default button text color |
301
+ | --clr-btn-default-bg-color | Default button background color |
302
+ | --clr-btn-default-border-color | Default button border color |
303
+ | --clr-btn-default-hover-color | Default button `:hover` text color |
304
+ | --clr-btn-default-hover-bg-color | Default button `:hover` background color |
305
+ | --clr-btn-default-active-color | Default button `:active` text color |
306
+ | --clr-btn-default-active-bg-color | Default button `:active` background color |
307
+ | --clr-btn-default-disabled-color | Default button `disabled` text color |
308
+ | --clr-btn-default-disabled-bg-color | Default button `disabled` background color |
309
+ | --clr-btn-default-disabled-border-color | Default button `disabled` border color |
310
+ | --clr-btn-default-outline-color | Default outline button text color |
311
+ | --clr-btn-default-outline-bg-color | Default outline button background color |
312
+ | --clr-btn-default-outline-border-color | Default outline button border color |
313
+ | --clr-btn-default-outline-hover-color | Default outline button `:hover` text color |
314
+ | --clr-btn-default-outline-hover-bg-color | Default outline button `:hover` background color |
315
+ | --clr-btn-default-outline-active-color | Default outline button `:active` text color |
316
+ | --clr-btn-default-outline-active-bg-color | Default outline button `:active` background color |
317
+ | --clr-btn-default-outline-disabled-color | Default outline button `disabled` text color |
318
+ | --clr-btn-default-outline-disabled-bg-color | Default outline button `disabled` background color |
319
+ | --clr-btn-default-outline-disabled-border-color | Default outline button `disabled` border color |
320
+ | --clr-btn-primary-color | Primary button text color |
321
+ | --clr-btn-primary-bg-color | Primary button background color |
322
+ | --clr-btn-primary-border-color | Primary button border color |
323
+ | --clr-btn-primary-hover-color | Primary button `:hover` text color |
324
+ | --clr-btn-primary-hover-bg-color | Primary button `:hover` background color |
325
+ | --clr-btn-primary-active-color | Primary button `:active` text color |
326
+ | --clr-btn-primary-active-bg-color | Primary button `:active` background color |
327
+ | --clr-btn-primary-disabled-color | Primary button `disabled` text color |
328
+ | --clr-btn-primary-disabled-bg-color | Primary button `disabled` background color |
329
+ | --clr-btn-primary-disabled-border-color | Primary button `disabled` border color |
330
+ | --clr-btn-primary-outline-color | Primary outline button text color |
331
+ | --clr-btn-primary-outline-bg-color | Primary outline button background color |
332
+ | --clr-btn-primary-outline-border-color | Primary outline button border color |
333
+ | --clr-btn-primary-outline-hover-color | Primary outline button `:hover` text color |
334
+ | --clr-btn-primary-outline-hover-bg-color | Primary outline button `:hover` background color |
335
+ | --clr-btn-primary-outline-active-color | Primary outline button `:active` text color |
336
+ | --clr-btn-primary-outline-active-bg-color | Primary outline button `:active` background color |
337
+ | --clr-btn-primary-outline-disabled-color | Primary outline button `disabled` text color |
338
+ | --clr-btn-primary-outline-disabled-bg-color | Primary outline button `disabled` background color |
339
+ | --clr-btn-primary-outline-disabled-border-color | Primary outline button `disabled` border color |
340
+ | --clr-btn-success-color | Success button text color |
341
+ | --clr-btn-success-bg-color | Success button background color |
342
+ | --clr-btn-success-border-color | Success button border color |
343
+ | --clr-btn-success-hover-color | Success button `:hover` text color |
344
+ | --clr-btn-success-hover-bg-color | Success button `:hover` background color |
345
+ | --clr-btn-success-active-color | Success button `:active` text color |
346
+ | --clr-btn-success-active-bg-color | Success button `:active` background color |
347
+ | --clr-btn-success-disabled-color | Success button `disabled` text color |
348
+ | --clr-btn-success-disabled-bg-color | Success button `disabled` background color |
349
+ | --clr-btn-success-disabled-border-color | Success button `disabled` border color |
350
+ | --clr-btn-success-outline-color | Success outline button text color |
351
+ | --clr-btn-success-outline-bg-color | Success outline button background color |
352
+ | --clr-btn-success-outline-border-color | Success outline button border color |
353
+ | --clr-btn-success-outline-hover-color | Success outline button `:hover` text color |
354
+ | --clr-btn-success-outline-hover-bg-color | Success outline button `:hover` background color |
355
+ | --clr-btn-success-outline-active-color | Success outline button `:active` text color |
356
+ | --clr-btn-success-outline-active-bg-color | Success outline button `:active` background color |
357
+ | --clr-btn-success-outline-disabled-color | Success outline button `disabled` text color |
358
+ | --clr-btn-success-outline-disabled-bg-color | Success outline button `disabled` background color |
359
+ | --clr-btn-success-outline-disabled-border-color | Success outline button `disabled` border color |
360
+ | --clr-btn-danger-color | Danger button text color |
361
+ | --clr-btn-danger-bg-color | Danger button background color |
362
+ | --clr-btn-danger-border-color | Danger button border color |
363
+ | --clr-btn-danger-hover-color | Danger button `:hover` text color |
364
+ | --clr-btn-danger-hover-bg-color | Danger button `:hover` background color |
365
+ | --clr-btn-danger-active-color | Danger button `:active` text color |
366
+ | --clr-btn-danger-active-bg-color | Danger button `:active` background color |
367
+ | --clr-btn-danger-disabled-color | Danger button `disabled` text color |
368
+ | --clr-btn-danger-disabled-bg-color | Danger button `disabled` background color |
369
+ | --clr-btn-danger-disabled-border-color | Danger button `disabled` border color |
370
+ | --clr-btn-danger-outline-color | Danger outline button text color |
371
+ | --clr-btn-danger-outline-bg-color | Danger outline button background color |
372
+ | --clr-btn-danger-outline-border-color | Danger outline button border color |
373
+ | --clr-btn-danger-outline-hover-color | Danger outline button `:hover` text color |
374
+ | --clr-btn-danger-outline-hover-bg-color | Danger outline button `:hover` background color |
375
+ | --clr-btn-danger-outline-active-color | Danger outline button `:active` text color |
376
+ | --clr-btn-danger-outline-active-bg-color | Danger outline button `:active` background color |
377
+ | --clr-btn-danger-outline-disabled-color | Danger outline button `disabled` text color |
378
+ | --clr-btn-danger-outline-disabled-bg-color | Danger outline button `disabled` background color |
379
+ | --clr-btn-danger-outline-disabled-border-color | Danger outline button `disabled` border color |
380
+ | --clr-btn-warning-color | Warning button text color |
381
+ | --clr-btn-warning-bg-color | Warning button background color |
382
+ | --clr-btn-warning-border-color | Warning button border color |
383
+ | --clr-btn-warning-hover-color | Warning button `:hover` text color |
384
+ | --clr-btn-warning-hover-bg-color | Warning button `:hover` background color |
385
+ | --clr-btn-warning-active-color | Warning button `:active` text color |
386
+ | --clr-btn-warning-active-bg-color | Warning button `:active` background color |
387
+ | --clr-btn-warning-disabled-color | Warning button `disabled` text color |
388
+ | --clr-btn-warning-disabled-bg-color | Warning button `disabled` background color |
389
+ | --clr-btn-warning-disabled-border-color | Warning button `disabled` border color |
390
+ | --clr-btn-warning-outline-color | Warning outline button text color |
391
+ | --clr-btn-warning-outline-bg-color | Warning outline button background color |
392
+ | --clr-btn-warning-outline-border-color | Warning outline button border color |
393
+ | --clr-btn-warning-outline-hover-color | Warning outline button `:hover` text color |
394
+ | --clr-btn-warning-outline-hover-bg-color | Warning outline button `:hover` background color |
395
+ | --clr-btn-warning-outline-active-color | Warning outline button `:active` text color |
396
+ | --clr-btn-warning-outline-active-bg-color | Warning outline button `:active` background color |
397
+ | --clr-btn-warning-outline-disabled-color | Warning outline button `disabled` text color |
398
+ | --clr-btn-warning-outline-disabled-bg-color | Warning outline button `disabled` background color |
399
+ | --clr-btn-warning-outline-disabled-border-color | Warning outline button `disabled` border color |
400
+ | --clr-btn-neutral-color | Neutral button text color |
401
+ | --clr-btn-neutral-bg-color | Neutral button background color |
402
+ | --clr-btn-neutral-border-color | Neutral button border color |
403
+ | --clr-btn-neutral-hover-color | Neutral button `:hover` text color |
404
+ | --clr-btn-neutral-hover-bg-color | Neutral button `:hover` background color |
405
+ | --clr-btn-neutral-active-color | Neutral button `:active` text color |
406
+ | --clr-btn-neutral-active-bg-color | Neutral button `:active` background color |
407
+ | --clr-btn-neutral-disabled-color | Neutral button `disabled` text color |
408
+ | --clr-btn-neutral-disabled-bg-color | Neutral button `disabled` background color |
409
+ | --clr-btn-neutral-disabled-border-color | Neutral button `disabled` border color |
410
+ | --clr-btn-neutral-outline-color | Neutral outline button text color |
411
+ | --clr-btn-neutral-outline-bg-color | Neutral outline button background color |
412
+ | --clr-btn-neutral-outline-border-color | Neutral outline button border color |
413
+ | --clr-btn-neutral-outline-hover-color | Neutral outline button `:hover` text color |
414
+ | --clr-btn-neutral-outline-hover-bg-color | Neutral outline button `:hover` background color |
415
+ | --clr-btn-neutral-outline-active-color | Neutral outline button `:active` text color |
416
+ | --clr-btn-neutral-outline-active-bg-color | Neutral outline button `:active` background color |
417
+ | --clr-btn-neutral-outline-disabled-color | Neutral outline button `disabled` text color |
418
+ | --clr-btn-neutral-outline-disabled-bg-color | Neutral outline button `disabled` background color |
419
+ | --clr-btn-neutral-outline-disabled-border-color | Neutral outline button `disabled` border color |
420
+ | --clr-btn-link-color | Link button text color |
421
+ | --clr-btn-link-bg-color | Link button background color |
422
+ | --clr-btn-link-border-color | Link button border color |
423
+ | --clr-btn-link-hover-color | Link button `:hover` text color |
424
+ | --clr-btn-link-hover-bg-color | Link button `:hover` background color |
425
+ | --clr-btn-link-active-color | Link button `:active` text color |
426
+ | --clr-btn-link-active-bg-color | Link button `:active` background color |
427
+ | --clr-btn-link-disabled-color | Link button `disabled` text color |
428
+ | --clr-btn-link-disabled-bg-color | Link button `disabled` background color |
429
+ | --clr-btn-link-disabled-border-color | Link button `disabled` border color |
430
+ | --clr-btn-link-primary-color | Primary link button text color |
431
+ | --clr-btn-link-primary-bg-color | Primary link button background color |
432
+ | --clr-btn-link-primary-border-color | Primary link button border color |
433
+ | --clr-btn-link-primary-hover-color | Primary link button `:hover` text color |
434
+ | --clr-btn-link-primary-hover-bg-color | Primary link button `:hover` background color |
435
+ | --clr-btn-link-primary-active-color | Primary link button `:active` text color |
436
+ | --clr-btn-link-primary-active-bg-color | Primary link button `:active` background color |
437
+ | --clr-btn-link-primary-disabled-color | Primary link button `disabled` text color |
438
+ | --clr-btn-link-primary-disabled-bg-color | Primary link button `disabled` background color |
439
+ | --clr-btn-link-primary-disabled-border-color | Primary link button `disabled` border color |
440
+ | --clr-btn-link-success-color | Success link button text color |
441
+ | --clr-btn-link-success-bg-color | Success link button background color |
442
+ | --clr-btn-link-success-border-color | Success link button border color |
443
+ | --clr-btn-link-success-hover-color | Success link button `:hover` text color |
444
+ | --clr-btn-link-success-hover-bg-color | Success link button `:hover` background color |
445
+ | --clr-btn-link-success-active-color | Success link button `:active` text color |
446
+ | --clr-btn-link-success-active-bg-color | Success link button `:active` background color |
447
+ | --clr-btn-link-success-disabled-color | Success link button `disabled` text color |
448
+ | --clr-btn-link-success-disabled-bg-color | Success link button `disabled` background color |
449
+ | --clr-btn-link-success-disabled-border-color | Success link button `disabled` border color |
450
+ | --clr-btn-link-warning-color | Warning link button text color |
451
+ | --clr-btn-link-warning-bg-color | Warning link button background color |
452
+ | --clr-btn-link-warning-border-color | Warning link button border color |
453
+ | --clr-btn-link-warning-hover-color | Warning link button `:hover` text color |
454
+ | --clr-btn-link-warning-hover-bg-color | Warning link button `:hover` background color |
455
+ | --clr-btn-link-warning-active-color | Warning link button `:active` text color |
456
+ | --clr-btn-link-warning-active-bg-color | Warning link button `:active` background color |
457
+ | --clr-btn-link-warning-disabled-color | Warning link button `disabled` text color |
458
+ | --clr-btn-link-warning-disabled-bg-color | Warning link button `disabled` background color |
459
+ | --clr-btn-link-warning-disabled-border-color | Warning link button `disabled` border color |
460
+ | --clr-btn-link-danger-color | Danger link button text color |
461
+ | --clr-btn-link-danger-bg-color | Danger link button background color |
462
+ | --clr-btn-link-danger-border-color | Danger link button border color |
463
+ | --clr-btn-link-danger-hover-color | Danger link button `:hover` text color |
464
+ | --clr-btn-link-danger-hover-bg-color | Danger link button `:hover` background color |
465
+ | --clr-btn-link-danger-active-color | Danger link button `:active` text color |
466
+ | --clr-btn-link-danger-active-bg-color | Danger link button `:active` background color |
467
+ | --clr-btn-link-danger-disabled-color | Danger link button `disabled` text color |
468
+ | --clr-btn-link-danger-disabled-bg-color | Danger link button `disabled` background color |
469
+ | --clr-btn-link-danger-disabled-border-color | Danger link button `disabled` border color |
470
+ | --clr-btn-inverse-color | Inverse button text color |
471
+ | --clr-btn-inverse-bg-color | Inverse button background color |
472
+ | --clr-btn-inverse-border-color | Inverse button border color |
473
+ | --clr-btn-inverse-hover-color | Inverse button `:hover` text color |
474
+ | --clr-btn-inverse-hover-bg-color | Inverse button `:hover` background color |
475
+ | --clr-btn-inverse-active-color | Inverse button `:active` text color |
476
+ | --clr-btn-inverse-active-bg-color | Inverse button `:active` background color |
477
+ | --clr-btn-inverse-disabled-color | Inverse button `disabled` text color |
478
+ | --clr-btn-inverse-disabled-bg-color | Inverse button `disabled` background color |
479
+ | --clr-btn-inverse-disabled-border-color | Inverse button `disabled` border color |
480
+ | --clr-btn-icon-disabled-color | Icon button `disabled` text color |
481
+ | --clr-btn-group-focus-outline | `:focus` outline color of a checkbox or radio inside a button group button |
482
+ | --clr-btn-default-checked-color | Checked checkbox default button text color |
483
+ | --clr-btn-default-checked-bg-color | Checked checkbox default button background color |
484
+ | --clr-btn-default-outline-checked-color | Checked checkbox default outline button text color |
485
+ | --clr-btn-default-outline-checked-bg-color | Checked checkbox default outline button background color |
486
+ | --clr-btn-primary-checked-color | Checked checkbox primary button text color |
487
+ | --clr-btn-primary-checked-bg-color | Checked checkbox primary button background color |
488
+ | --clr-btn-success-checked-color | Checked checkbox success button text color |
489
+ | --clr-btn-success-checked-bg-color | Checked checkbox success button background color |
490
+ | --clr-btn-success-outline-checked-color | Checked checkbox success outline button text color |
491
+ | --clr-btn-success-outline-checked-bg-color | Checked checkbox success outline button background color |
492
+ | --clr-btn-danger-checked-color | Checked checkbox danger button text color |
493
+ | --clr-btn-danger-checked-bg-color | Checked checkbox danger button background color |
494
+ | --clr-btn-danger-outline-checked-color | Checked checkbox danger outline button text color |
495
+ | --clr-btn-danger-outline-checked-bg-color | Checked checkbox danger outline button background color |
496
+ | --clr-btn-warning-checked-color | Checked checkbox warning button text color |
497
+ | --clr-btn-warning-checked-bg-color | Checked checkbox warning button background color |
498
+ | --clr-btn-warning-outline-checked-color | Checked checkbox warning outline button text color |
499
+ | --clr-btn-warning-outline-checked-bg-color | Checked checkbox warning outline button background color |
500
+ | --clr-btn-link-checked-color | Checked checkbox link button text color |
501
+ | --clr-btn-link-checked-bg-color | Checked checkbox link button background color |
502
+ | --clr-btn-inverse-checked-color | Checked checkbox inverse button text color |
503
+ | --clr-btn-inverse-checked-bg-color | Checked checkbox inverse button background color |
504
+
505
+ ## CSS Classes
506
+
507
+ | Class name | Description |
508
+ | ------------------- | ------------------------------------------------------ |
509
+ | btn | Button All of the following require this class as well |
510
+ | btn-info | Info button |
511
+ | btn-primary | Primary button |
512
+ | btn-success | Success button |
513
+ | btn-warning | Warning button |
514
+ | btn-danger | Danger button |
515
+ | btn-neutral | Neutral button |
516
+ | btn-outline | Outline button |
517
+ | btn-info-outline | Outline info button |
518
+ | btn-success-outline | Outline success button |
519
+ | btn-warning-outline | Outline warning button |
520
+ | btn-danger-outline | Outline danger button |
521
+ | btn-neutral-outline | Outline neutral button |
522
+ | btn-sm | Small button |
523
+ | btn-block | Block, full-width button |
524
+ | btn-inverse | Inverse button |
525
+ | btn-icon | Icon button |
526
+ | btn-link | Link button |
527
+ | btn-link-primary | Link primary button |
528
+ | btn-link-success | Link success button |
529
+ | btn-link-warning | Link warning button |
530
+ | btn-link-danger | Link danger button |
531
+
532
+ # Button group
533
+
534
+ ## CSS Classes
535
+
536
+ | Class name | Description |
537
+ | --------------------- | ---------------------------------------------------------------------------------------------------------- |
538
+ | btn-group | Button group element class. |
539
+ | btn-group-overflow | Overflow class for button group element. |
540
+ | btn-link | Used with `btn-group` for flat buttons group. |
541
+ | btn-icon-link | Used with `btn-group` and `btn-link` for flat icon buttons group. |
542
+ | clr-icon-title | Button icon title. Visible inside a menu and hidden outside for a11y so it can be read from screen reader. |
543
+ | clr-button-group-menu | Internal class for button group menu content. |
544
+
545
+ # Card
546
+
547
+ ## CSS Custom Properties
548
+
549
+ | CSS Custom Property | Description |
550
+ | ------------------------------------- | ------------------------------------------------------ |
551
+ | --clr-card-bg-color | Card background color |
552
+ | --clr-card-divider-color | Card divider color |
553
+ | --clr-card-title-color | Card base title color |
554
+ | --clr-card-title-font-weight | Card thickness title |
555
+ | --clr-card-border-width | Card border width |
556
+ | --clr-card-border-radius | Card border radius |
557
+ | --clr-card-border-color | Card border color |
558
+ | --clr-card-box-shadow-color | Card background shadow color |
559
+ | --clr-card-clickable-border-color | DEPRECATED in favor of `clr-card-box-shadow` |
560
+ | --clr-card-clickable-box-shadow-color | DEPRECATED in favor of `clr-card-clickable-box-shadow` |
561
+ | clr-card-box-shadow | Card background shadow |
562
+ | clr-card-clickable-box-shadow | Clickable cards shadow |
563
+ | clr-card-header-title-color | Header title font color |
564
+ | clr-card-content-title-color | Content title font color |
565
+ | clr-card-text-color | Card text font color |
566
+
567
+ ## CSS Classes
568
+
569
+ | Class | Description |
570
+ | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
571
+ | card | A card presents high-level information and can guide the user toward related actions and details |
572
+ | clickable | Adding the `.clickable` to a card class makes the entire card clickable, initiating a single action |
573
+ | card-img | A `.card-img` can be placed anywhere in the card, or it can occupy the entire card |
574
+ | card-header | The card's heading element |
575
+ | card-block | The card's main content |
576
+ | card-title | A card block's heading element |
577
+ | card-text | A card block's text content |
578
+ | list | An ordered (`ol`) or unordered (`ul`) list within a card block |
579
+ | list-unstyled | List with no markers within a card block |
580
+ | list-group | Full-width list with dividers for each item within a card block |
581
+ | list-group-item | Item within a list group |
582
+ | card-divider | Divider within card block |
583
+ | card-media-block | A card media block contains and image and description |
584
+ | wrap | Adding the `wrap` class to a `.card-media-block` element causes the description to be below the image instead of to the right |
585
+ | card-media-image | An `img` within a card media block |
586
+ | card-media-description | The description within a card media block. It can contain a title and text |
587
+ | card-media-title | The title of a card media block description |
588
+ | card-media-text | Text within a card media block description |
589
+ | card-footer | The footer can contain two actions in form of a button or link. For more actions, use a dropdown |
590
+ | card-link | A link within a card footer |
591
+
592
+ # Checkbox
593
+
594
+ ## CSS Custom Properties
595
+
596
+ | CSS Custom Property | Description |
597
+ | ----------------------------------------------- | -------------------------------------- |
598
+ | --clr-forms-checkbox-label-color | Font color of checkbox label |
599
+ | --clr-forms-checkbox-background-color | Background color of checkbox |
600
+ | --clr-forms-checkbox-indeterminate-border-color | Border color of indeterminate checkbox |
601
+ | --clr-forms-checkbox-mark-color | Color of checkbox mark |
602
+ | --clr-forms-checkbox-disabled-background-color | Background color of disabled checkbox |
603
+ | --clr-forms-checkbox-disabled-mark-color | Color of disabled checkbox mark |
604
+ | --clr-forms-checkbox-border-radius | Border radius of checkbox |
605
+
606
+ ## CSS Classes
607
+
608
+ | Class name | Description |
609
+ | -------------------- | ---------------------------------------- |
610
+ | clr-checkbox-wrapper | Wrapper class for the checkbox component |
611
+
612
+ # Collapsible Panel
613
+
614
+ ## CSS Custom Properties
615
+
616
+ | CSS Custom Property | Description |
617
+ | ----------------------------------------------------------- | --------------------------------------------------------------- |
618
+ | --clr-collapsible-panel-text-color | Text color of the panel header. |
619
+ | --clr-collapsible-panel-text-color-hover | Text color of the panel header when hovered. |
620
+ | --clr-collapsible-panel-text-color-active | Text color of the panel header when active. |
621
+ | --clr-collapsible-panel-panel-disabled-color | Text color of the panel header when disabled. |
622
+ | --clr-collapsible-panel-content-background-color | Background color of the panel content area. |
623
+ | --clr-collapsible-panel-content-color | Text color of the panel content area. |
624
+ | --clr-collapsible-panel-header-background-color | Background color of the panel header. |
625
+ | --clr-collapsible-panel-header-disabled-background-color | Background color of the panel header when disabled. |
626
+ | --clr-collapsible-panel-header-hover-background-color | Background color of the panel header on hover. |
627
+ | --clr-collapsible-panel-header-active-background-color | Background color of the panel header when active. |
628
+ | --clr-collapsible-panel-header-open-background-color | Background color of the panel header when the panel is open. |
629
+ | --clr-collapsible-panel-header-open-hover-background-color | Background color of the panel header when open and hovered. |
630
+ | --clr-collapsible-panel-header-open-active-background-color | Background color of the panel header when open and active. |
631
+ | --clr-collapsible-panel-border-color | Color of the panel border. |
632
+ | --clr-collapsible-panel-border-radius | Border radius of the panel. |
633
+ | --clr-collapsible-panel-title-min-width | Minimum width of the panel title when a description is present. |
634
+
635
+ ## CSS Classes
636
+
637
+ | Class Name | Description |
638
+ | ------------------------------- | ------------------------------------------------------ |
639
+ | {prefix}-panel | Panel container element. |
640
+ | {prefix}-header | Header section of a panel. |
641
+ | {prefix}-header-button | Clickable button within the panel header. |
642
+ | {prefix}-status | Status indicator within the panel header. |
643
+ | {prefix}-title | Title text within the panel header. |
644
+ | {prefix}-header-has-description | Panel header that includes a description. |
645
+ | {prefix}-description | Description text within the panel header. |
646
+ | {prefix}-content | Content section of a panel. |
647
+ | {prefix}-content-region | Wrapper region for the panel content (animation host). |
648
+ | {prefix}-inner-content | Inner content section within the panel content. |
649
+ | {prefix}-angle | Chevron/angle indicator within the panel header. |
650
+ | {prefix}-panel-open | State class for an open/expanded panel. |
651
+ | {prefix}-panel-disabled | State class for a disabled panel. |
652
+
653
+ # Combobox
654
+
655
+ ## CSS Custom Properties
656
+
657
+ | CSS Custom Property | Description |
658
+ | -------------------------------------- | ---------------------------------------------------------------------- |
659
+ | --clr-combobox-border-color | Combobox border color |
660
+ | --clr-combobox-border-radius | Combobox corners radius |
661
+ | --clr-combobox-input-background-color | Combobox input background color |
662
+ | --clr-combobox-pill-background-color | Background color of the selected items pills in a multiselect combobox |
663
+ | --clr-combobox-pill-border-color | Border color of the selected items pills in a multiselect combobox |
664
+ | --clr-combobox-pill-border-radius | Border radius of the selected items pills in a multiselect combobox |
665
+ | --clr-combobox-pill-font-color | Text color of the selected items pills in a multiselect combobox |
666
+ | --clr-combobox-filter-highlight | Combobox filter highlight color |
667
+ | --clr-combobox-min-height | Minimal height of the combobox |
668
+ | --clr-combobox-min-width | Minimal width of the combobox |
669
+ | --clr-combobox-multi-min-width | Minimal width of the multi-select combobox |
670
+ | --clr-combobox-font-size | Combobox input font size |
671
+ | --clr-combobox-font-weight | Combobox input font weight |
672
+ | --clr-combobox-text-color | Text color for the combobox input |
673
+ | --clr-combobox-trigger-padding-left | Combobox trigger/caret left padding |
674
+ | --clr-combobox-trigger-padding-right | Combobox trigger/caret right padding |
675
+ | --clr-combobox-trigger-font-color | Combobox trigger/caret font color |
676
+ | --clr-combobox-hover-background-color | Background color when hovered or focused |
677
+ | --clr-combobox-active-background-color | Background color of the element selected by keyboard |
678
+ | --clr-combobox-pills | Combobox multiselect pills container |
679
+ | --clr-combobox-pill-padding | Combobox multiselect pills padding |
680
+ | --clr-combobox-pill-height | Height of the combobox pill element |
681
+ | --clr-combobox-pill-remove-icon-color | Color of the remove pill icon |
682
+ | --clr-combobox-caret-icon-size | Size of the combobox caret icon icon |
683
+
684
+ ## CSS Classes
685
+
686
+ | Class name | Description |
687
+ | ------------------------- | ----------------------------------------------------- |
688
+ | clr-combobox | Combobox element class |
689
+ | clr-combobox-container | Container class for the combobox |
690
+ | clr-combobox-input | Combobox input element |
691
+ | clr-combobox-options | List of combobox options |
692
+ | clr-combobox-option | An option form the combobox suggestion list |
693
+ | clr-combobox-trigger | Combobox trigger/caret button |
694
+ | label-combobox-pill | Combobox selection pill element |
695
+ | clr-combobox-remove-btn | Item remove button for multiselect combobox |
696
+ | clr-combobox-pill-content | Content of the combobox selection pill element |
697
+ | clr-combobox-disabled | Disabled combobox indicator |
698
+ | clr-combobox-wrapper | Internal wrapper class |
699
+ | clr-combobox-form-control | Internal class used for label positioning calculation |
700
+
701
+ # Datagrid
702
+
703
+ ## CSS Properties
704
+
705
+ | Property Name | Description |
706
+ | ---------------------------------------------------- | ------------------------------------------------------------------------ |
707
+ | --clr-datagrid-font-color | Not used. |
708
+ | --clr-datagrid-default-border-color | Default border color for datagrid detail pane. |
709
+ | --clr-datagrid-icon-color | Default color for expandable, detail caret icons and action toggle icon. |
710
+ | --clr-datagrid-row-hover-color | Background color for datagrid row on hover and active action items. |
711
+ | --clr-datagrid-action-toggle-color | Datagrid action toggle icon color when active. |
712
+ | --clr-datagrid-pagination-btn-color | Color for pagination buttons. |
713
+ | --clr-datagrid-pagination-btn-disabled-color | Color for disabled pagination buttons. |
714
+ | --clr-datagrid-pagination-btn-disabled-opacity | Opacity for disabled pagination buttons. |
715
+ | --clr-datagrid-pagination-input-border-color | Border color for the pagination input field. |
716
+ | --clr-datagrid-pagination-input-border-focus-color | Border color for the pagination input field when focused. |
717
+ | --clr-datagrid-popover-bg-color | Background color for popovers within the datagrid. |
718
+ | --clr-datagrid-popover-border-color | Border color for popovers within the datagrid. |
719
+ | --clr-datagrid-row-selected | Font color for selected rows. |
720
+ | --clr-datagrid-row-selected-background-color | Background color for selected rows. |
721
+ | --clr-datagrid-row-selected-active-background-color | Background color for active on selected rows. |
722
+ | --clr-datagrid-row-selected-hover-background-color | Background color for hover on selected rows. |
723
+ | --clr-datagrid-column-switch-header-font-color | Font color for column switch header button icons. |
724
+ | --clr-datagrid-column-switch-header-font-hover-color | Font color for column switch button icons on hover. |
725
+ | --clr-datagrid-detail-caret-icon-open-bg-color | Background color for opened detail caret button. |
726
+ | --clr-datagrid-detail-caret-icon-open-icon-color | Color of opened detail caret icon. |
727
+ | --clr-datagrid-loading-background | Background color for the loading state of the datagrid. |
728
+ | --clr-datagrid-column-toggle-border-color | Border color for column toggle buttons. |
729
+ | --clr-datagrid-column-toggle-fill-color | Background color for column toggle buttons. |
730
+ | --clr-datagrid-column-toggle-text-color | Text color for column toggle buttons. |
731
+ | --clr-datagrid-column-toggle-border-hover-color | Border color for column toggle buttons when hovered. |
732
+ | --clr-datagrid-column-toggle-fill-hover-color | Background color for column toggle buttons when hovered. |
733
+ | --clr-datagrid-column-toggle-text-hover-color | Text color for column toggle buttons when hovered. |
734
+ | --clr-datagrid-column-toggle-border-active-color | Border color for active column toggle buttons. |
735
+ | --clr-datagrid-column-toggle-fill-active-color | Background color for active column toggle buttons. |
736
+ | --clr-datagrid-column-toggle-text-active-color | Text color for active column toggle buttons. |
737
+ | --clr-datagrid-popovers-box-shadow-color | Not used. |
738
+ | --clr-datagrid-popover-font-color | Font color for popovers. |
739
+ | --clr-datagrid-detail-pane-content-padding | Padding for detail panel content |
740
+ | --clr-datagrid-detail-pane-close-icon-size | Width and Height for detail close icon |
741
+ | --clr-datagrid-detail-body-text-color | Font color for detail body |
742
+ | --clr-datagrid-detail-header-title-color | Font color for detail header title |
743
+ | --clr-datagrid-detail-pane-bg-color | Background color for detail panel |
744
+ | --clr-datagrid-detail-pane-open-row-bg-color | Background color for the row associated with the open detail panel. |
745
+ | --clr-datagrid-detail-pane-border-color | Border color for detail panel |
746
+ | --clr-datagrid-placeholder-background-color | Background color for placeholder |
747
+ | --clr-datagrid-column-separator-height | Height for column separator |
748
+ | --clr-datagrid-filter-toggle-size | Width and Height for filter toggle button |
749
+ | --clr-datagrid-row-active-color | Background color for active state on rows |
750
+ | --clr-datagrid-fixed-column-size | Size for fixed columns inside datagrid |
751
+
752
+ ## CSS Classes
753
+
754
+ | Class Name | Description |
755
+ | -------------------------------- | ---------------------------------------------------------------------------------------------- |
756
+ | action-item | Action item within the datagrid's overflow container. |
757
+ | clr-col-null | Prevents clr-col-\* classes inside clrForm wrapper. |
758
+ | datagrid-action-overflow | Overflow container for action items. |
759
+ | datagrid-cell | Single cell within a row of the datagrid. |
760
+ | datagrid-column | Main datagrid column element. |
761
+ | datagrid-column-flex | Flex container for the column content. |
762
+ | datagrid-column-handle | Button for resizing the column. |
763
+ | datagrid-column-resize-tracker | Visual indicator for column resizing. |
764
+ | datagrid-column-separator | Separator between columns. |
765
+ | datagrid-container | Internal class set if there are no datagrid cells inside row detail. |
766
+ | datagrid-detail-body | Main datagrid detail body element. |
767
+ | datagrid-detail-header | Main datagrid detail header element. |
768
+ | datagrid-empty | Internal class set on datagrid placeholder if datagrid is empty. |
769
+ | datagrid-expandable-caret | Container for the expandable rows caret button and for datagrid column header for carets. |
770
+ | datagrid-expandable-caret-button | Expandable caret button within the expandable cell. |
771
+ | datagrid-filter | Container for the filter popover. |
772
+ | datagrid-filter-close-wrapper | Wrapper for the close button in the filter popover. |
773
+ | datagrid-filter-open | Applied to the filter toggle button when open. |
774
+ | datagrid-filter-toggle | Toggle button for opening/closing the filter popover. |
775
+ | datagrid-filtered | Applied to the filter toggle button when active. |
776
+ | datagrid-fixed-column | Fixed column. |
777
+ | datagrid-footer | Main datagrid footer element. |
778
+ | datagrid-footer-description | Wrapper for datagrid footer content. |
779
+ | datagrid-footer-select | Select checkbox in the footer. |
780
+ | datagrid-header | Header section of the datagrid. |
781
+ | datagrid-calculate-mode | Internal class used while datagrid is in calculation mode. |
782
+ | datagrid-placeholder | Container for the datagrid placeholder image and content. |
783
+ | datagrid-placeholder-container | Main datagrid placholder element. |
784
+ | datagrid-placeholder-content | Wrapper for datagrid placeholder content. |
785
+ | datagrid-placeholder-image | Image in the placeholder. |
786
+ | datagrid-row | Main datagrid row element. |
787
+ | datagrid-row-actions | Container for the row actions. |
788
+ | datagrid-row-clickable | Internal class used for calculation mode and on wrapper element for the row in selection mode. |
789
+ | datagrid-row-detail | Main datagrid row detail element. |
790
+ | datagrid-row-flex | Internal class for adding flex layout to a row. |
791
+ | datagrid-row-master | Internal class used for calculcation mode and wrapper element for row content. |
792
+ | datagrid-row-scrollable | Scrollable container for the row. |
793
+ | datagrid-scrolling-cells | Container for the scrolling cells within the row. |
794
+ | datagrid-select | Container for the selection checkbox/radio buttons. |
795
+ | datagrid-signpost-trigger | Internal class for datagrid cells if there are signposts in it. |
796
+ | is-open | Applied to the detail caret button when detail row open. |
797
+ | is-replaced | Applied to the scrollable container when row replaced. |
798
+ | pagination | Pagination element. |
799
+ | pagination-current | Current page input. |
800
+ | pagination-description | Pagination description. |
801
+ | pagination-description-compact | The compact description when detail view is opened. |
802
+ | pagination-first | First page button. |
803
+ | pagination-last | Last page button. |
804
+ | pagination-list | Pagination buttons. |
805
+ | pagination-next | Next page button. |
806
+ | pagination-previous | Previous page button. |
807
+ | pagination-size | Wrapper for datagrid page size element. |
808
+ | sort-icon | Sort icon for sortable columns. |
809
+
810
+ # Datepicker
811
+
812
+ ## CSS Custom Properties
813
+
814
+ | CSS Custom Property | Description |
815
+ | ------------------------------------------------- | ----------------------------------------------- |
816
+ | --clr-calendar-background-color | Background color of the calendar |
817
+ | --clr-calendar-border-color | Border color of the calendar |
818
+ | --clr-calendar-btn-color | Calendar Buttons color |
819
+ | --clr-calendar-btn-hover-focus-color | Calendar Buttons hover and focus color |
820
+ | --clr-calendar-picker-btn-font-size | Font size for calendar month and year buttons |
821
+ | --clr-calendar-picker-btn-font-weight | Font weight for calendar month and year buttons |
822
+ | --clr-calendar-today-date-cell-color | Font color for today date |
823
+ | --clr-calendar-today-date-cell-font-weight | Font weight for today date |
824
+ | --clr-calendar-active-cell-background-color | Active cell background color |
825
+ | --clr-calendar-active-cell-color | Active cell font color |
826
+ | --clr-calendar-active-focus-cell-background-color | Focused cell background color |
827
+ | --clr-calendar-container-height | Calendar container height |
828
+ | --clr-calendar-weekday-font-size | Calendar week day font size |
829
+ | --clr-calendar-picker-btn-font-size | Calendar picker button font size |
830
+ | --clr-calendar-picker-btn-font-weight | Calendar picker button font weight |
831
+
832
+ ## CSS Classes
833
+
834
+ | Class name | Description |
835
+ | ------------------- | ------------------------------------------------ |
836
+ | datepicker | Main date picker element |
837
+ | calendar-header | Calendar header |
838
+ | calendar-table | Calendar table |
839
+ | calendar-row | Calendar row |
840
+ | calendar-cell | Calendar cell |
841
+ | calendar-btn | Calendar button |
842
+ | calendar-pickers | Month and year picker buttons wrapper |
843
+ | calendar-switchers | Month change and today buttons wrapper |
844
+ | daypicker | Main day picker element |
845
+ | day | Main element for day button |
846
+ | day-btn | Day button inside calendar |
847
+ | weekday | Weekday table heading |
848
+ | weekdays | Weekdays table row wrapper |
849
+ | month | Month buttons inside month picker |
850
+ | monthpicker | Main month picker element |
851
+ | monthpicker-trigger | Month picker button trigger |
852
+ | year | Year buttons inside year picker |
853
+ | years | Wrapper for year buttons inside year picker |
854
+ | yearpicker | Main year picker element |
855
+ | yearpicker-trigger | Year picker button trigger |
856
+ | is-today | Set on day button which is equal to current date |
857
+ | is-excluded | Set on day button if the date is excluded |
858
+ | is-selected | Selected day button |
859
+ | is-disabled | Disabled day button |
860
+ | switcher | Switcher button |
861
+ | year-switchers | Wrapper for switcher buttons inside year picker |
862
+
863
+ # Dropdown
864
+
865
+ ## CSS Custom Properties
866
+
867
+ | CSS Custom Property | Description |
868
+ | -------------------------------------------- | ----------------------------------------------------- |
869
+ | --clr-dropdown-active-text-color | The text color of the active dropdown item. |
870
+ | --clr-dropdown-bg-color | The background color of the dropdown menu. |
871
+ | --clr-dropdown-border-color | The border color of the dropdown. |
872
+ | --clr-dropdown-divider-color | The color of the divider between dropdown items. |
873
+ | --clr-dropdown-divider-border-width | Width of the dropdown items separator. |
874
+ | --clr-dropdown-child-border-color | The border color of child dropdown items. |
875
+ | --clr-dropdown-text-color | The text color of the dropdown. |
876
+ | --clr-dropdown-header-color | The color of the dropdown menu header. |
877
+ | --clr-dropdown-header-font-weight | Dropdown menu header font weight |
878
+ | --clr-dropdown-item-font-weight | Dropdown menu item font weight |
879
+ | --clr-dropdown-item-color | Text color of the dropdown item. |
880
+ | --clr-dropdown-item-bg-color | Background color of the dropdown item. |
881
+ | --clr-dropdown-item-hover-color | Text `:hover` color of the dropdown item. |
882
+ | --clr-dropdown-item-hover-bg-color | Background `:hover` color of the dropdown item. |
883
+ | --clr-dropdown-item-active-color | Text `:active` color of the dropdown item. |
884
+ | --clr-dropdown-item-active-bg-color | Background `:active` color of the dropdown item. |
885
+ | --clr-dropdown-item-selected-color | Text `selected` color of the dropdown item. |
886
+ | --clr-dropdown-item-selected-bg-color | Background `selected` color of the dropdown item. |
887
+ | --clr-dropdown-item-selected-hover-bg-color | Background `:hover` color of selected dropdown item. |
888
+ | --clr-dropdown-item-selected-active-bg-color | Background `:active` color of selected dropdown item. |
889
+ | --clr-dropdown-item-disabled-color | Text color of `disabled` dropdown item. |
890
+ | --clr-dropdown-item-disabled-bg-color | Background color of `disabled` dropdown item. |
891
+
892
+ ## CSS Classes
893
+
894
+ | Class | Description |
895
+ | ---------------- | ------------------------------------------------- |
896
+ | dropdown | The overall dropdown component. |
897
+ | dropdown-toggle | The toggle element inside the dropdown component. |
898
+ | dropdown-menu | The dropdown menu container. |
899
+ | dropdown-header | The header element inside the dropdown menu. |
900
+ | dropdown-item | The individual items in the dropdown menu. |
901
+ | expandable | The expandable dropdown item. |
902
+ | dropdown-divider | The divider element in the dropdown menu. |
903
+ | disabled | Applies the disabled state to the dropdown item. |
904
+
905
+ # File Input
906
+
907
+ ## CSS Classes
908
+
909
+ | Class name | Description |
910
+ | --------------------------------- | ------------------------- |
911
+ | clr-file-input-wrapper | Wrapper for input element |
912
+ | clr-file-input | Native file input element |
913
+ | clr-file-input-browse-button | Browse button |
914
+ | clr-file-input-browse-button-text | Browse button text span |
915
+ | clr-file-input-clear-button | Clear files button |
916
+
917
+ # Forms
918
+
919
+ ## CSS Custom Properties
920
+
921
+ | CSS Custom Property | Description |
922
+ | ------------------------------------------------------------ | ----------------------------------------------------- |
923
+ | --clr-form-disabled-background-color | Default background color for disabled forms |
924
+ | --clr-forms-label-color | Default font color of form labels |
925
+ | --clr-forms-text-color | Default font color for input text |
926
+ | --clr-forms-invalid-color | Invalid color for forms |
927
+ | --clr-forms-valid-color | Valid color for forms |
928
+ | --clr-forms-valid-text-color | Font color for subtext in success control containers |
929
+ | --clr-forms-subtext-color | Default font color for subtext in control containers |
930
+ | --clr-forms-placeholder-color | Font color for placeholders |
931
+ | --clr-forms-border-color | Border color for form controls |
932
+ | --clr-forms-focused-color | Focus color for forms |
933
+ | --clr-forms-subtext-disabled-color | Font color for disabled subtext in control containers |
934
+ | --clr-forms-border-disabled-color | Border color for disabled form controls |
935
+ | --clr-forms-text-disabled-color | Font color for disabled input text |
936
+ | --clr-forms-label-disabled-color | Font color for labels in disabled form controls |
937
+ | --clr-forms-label-font-weight | Font weight for form labels |
938
+ | --clr-forms-textarea-background-color | Background color of textarea |
939
+ | --clr-forms-select-hover-background | Background and border color of select on hover |
940
+ | --clr-forms-select-caret-hover-color | Color of select caret on hover |
941
+ | --clr-forms-select-caret-color | Color of select caret |
942
+ | --clr-forms-select-option-color | Font color of select options |
943
+ | --clr-forms-select-multiple-background-color | Background color of multiple select |
944
+ | --clr-forms-select-multiple-border-color | Border color of multiple select |
945
+ | --clr-forms-select-multiple-option-color | Font color of options in multiple select |
946
+ | --clr-forms-select-multiple-selected-option-background-color | Background color of selected multiple select option |
947
+ | --clr-forms-checkbox-label-color | Font color of checkbox label |
948
+ | --clr-forms-checkbox-background-color | Background color of checkbox |
949
+ | --clr-forms-checkbox-indeterminate-border-color | Border color of indeterminate checkbox |
950
+ | --clr-forms-checkbox-mark-color | Color of checkbox mark |
951
+ | --clr-forms-checkbox-disabled-background-color | Background color of disabled checkbox |
952
+ | --clr-forms-checkbox-disabled-mark-color | Color of disabled checkbox mark |
953
+ | --clr-forms-checkbox-border-radius | Border radius of checkbox |
954
+ | --clr-forms-radio-label-color | Font color of radio label |
955
+ | --clr-forms-radio-label-disabled-color | Font color of disabled radio label |
956
+ | --clr-forms-radio-disabled-background-color | Background color of disabled radio |
957
+ | --clr-forms-radio-disabled-mark-color | Color of disabled radio mark |
958
+ | --clr-forms-radio-selected-shadow | Shadow of selected radio |
959
+ | --clr-forms-radio-disabled-shadow | Shadow of disabled radio |
960
+ | --clr-forms-radio-focused-shadow | Shadow of focused radio |
961
+ | --clr-forms-range-progress-fill-color | Fill color of range progress |
962
+ | --clr-forms-range-track-color | Fill color of range track |
963
+ | --clr-forms-datalist-caret-color | Color of datalist caret |
964
+ | --clr-forms-datalist-caret-disabled-color | Color of disabled datalist caret |
965
+ | --clr-forms-datalist-caret-icon-size | Size of datalist caret |
966
+ | --clr-forms-input-group-icon-action-size | Size of action icon |
967
+ | --clr-forms-input-group-icon-disabled-color | Color for action icons in disabled input |
968
+
969
+ ## CSS Classes
970
+
971
+ | Class name | Description |
972
+ | ------------------- | ----------------------------------------------------- |
973
+ | clr-form | Main form element. |
974
+ | clr-form-group | Form group identifier. |
975
+ | clr-form-full-width | Make all controls to take 100% width of the container |
976
+ | clr-required-mark | Add required mark on the right side. |
977
+
978
+ # Grid layout
979
+
980
+ ## CSS Custom Properties
981
+
982
+ | CSS Custom Property | Description |
983
+ | ---------------------------- | -------------------------------------------------------------------------------------- |
984
+ | --clr-grid-gutter-width | Grid gutter width |
985
+ | --clr-grid-container-padding | Grid container padding size. ( Default value is half of --clr-grid-gutter-width) |
986
+ | --clr-grid-column-padding | Grid column padding size. ( Default value is half of --clr-grid-gutter-width) |
987
+ | --clr-grid-row-margin | Grid row margin size. ( Default value is half of --clr-grid-gutter-width and negative) |
988
+
989
+ ## CSS Classes
990
+
991
+ | Class name | Description |
992
+ | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
993
+ | clr-container | Styles a wrapper for row and columns |
994
+ | clr-row | Styles a flex row of columns |
995
+ | clr-justify-content-#{POSITION} | Sets justify-content property to #{POSITION}, POSITION is one of 'start', 'center', 'end' |
996
+ | clr-justify-content-between | Sets justify-content property to 'space-between' |
997
+ | clr-justify-content-around | Sets justify-content property to 'space-around' |
998
+ | clr-align-items-start | Horizontally aligns items in a row towards the beginning |
999
+ | clr-align-items-center | Centers items horizontally in a row |
1000
+ | clr-align-items-end | Aligns items in a row to the right end |
1001
+ | clr-align-items-baseline | Aligns items in a row based on their baselines |
1002
+ | clr-align-items-stretch | Expands and evenly distributes items in a row |
1003
+ | clr-align-content-#{POSITION} | Aligns content of multiline flex rows to #{POSITION}, POSITION is any of 'start', 'center', 'end' |
1004
+ | 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 |
1005
+ | clr-align-content-around | Evenly distributes the space around the flex columns in a multiline container, creating equal spacing between and around the lines |
1006
+ | clr-align-content-stretch | Stretches the flex columns in a multiline flex container, causing them to expand vertically and fill the available space |
1007
+ | clr-break-row | Breaks the columns in a row with a new line |
1008
+ | clr-clearfix | Clears floated content within a container |
1009
+ | clr-no-gutters | Removes gaps between column content in a row |
1010
+ | clr-col | Styles a column within a row |
1011
+ | 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 |
1012
+ | clr-col-#{BREAKPOINT} | Styles a column within a screen with width >= than #{BREAKPOINT}, BREAKPOINT is anything among 'sm', 'md', 'lg', 'xl' |
1013
+ | clr-col-#{BREAKPOINT}-#{SIZE} | Styles a column that spans to SIZE/12 of the row's width for a row with width >= BREAKPOINT |
1014
+ | clr-col-auto | Styles a column within a row to have auto width |
1015
+ | clr-col-#{BREAKPOINT}-auto | Styles a column within a row to have auto width for a small, medium, large and extra large screen |
1016
+ | 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 |
1017
+ | clr-offset-#{BREAKPOINT}-#{OFFSET_SIZE} | Sets the left offset of the column to #{OFFSET_SIZE}/12 for a screen larger than #{BREAKPOINT} |
1018
+ | clr-order-first | Sets the order of the column as first |
1019
+ | clr-order-last | Sets the order of the column as last |
1020
+ | clr-order-#{ORDER} | Sets the order of the column, ORDER is an integer in the interval [1,12] |
1021
+ | clr-order-#{BREAKPOINT}-#{ORDER} | Sets the order of the column |
1022
+ | clr-align-self-auto | Sets align-self property of a column to #{POSITION}, POSITION is one of 'auto', 'start', 'end', 'center', 'baseline', 'stretch' |
1023
+ | clr-invisible | Sets the visibility of element to hidden |
1024
+ | clr-display-#{DISPLAY_VALUE} | Sets the display property of an element to #{DISPLAY_VALUE}, DISPLAY_VALUE is one of 'block', 'inline-block', 'inline' |
1025
+ | clr-align-#{POSITION} | Sets vertical-align to #{POSITION}, POSITION is one of 'baseline', 'top', 'middle', 'bottom', 'text-bottom', 'text-top' |
1026
+ | clr-flex-#{DIRECTION} | Sets the flex-direction to #{DIRECTION} ('row', 'column', 'row-reverse' or 'column-reverse') |
1027
+ | clr-flex-#{FLEX_WRAP_VALUE} | Sets the flex-wrap to #{FLEX_WRAP_VALUE} ('wrap', 'nowrap', 'wrap-reverse') |
1028
+ | 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 |
1029
+ | clr-#{FLEXIBILITY}-#{SIZE} | Sets the flexibility (flex-grow or flex-shrink) to #{SIZE} (0 or 1) |
1030
+ | 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' |
1031
+
1032
+ ## Screen width breakpoints
1033
+
1034
+ | Breakpoint | Description |
1035
+ | ---------- | ----------- |
1036
+ | sm | >= 576px |
1037
+ | md | >= 768px |
1038
+ | lg | >= 992px |
1039
+ | xl | >= 1200px |
1040
+
1041
+ # Headers
1042
+
1043
+ ## CSS Custom Properties
1044
+
1045
+ | CSS Custom Property | Description |
1046
+ | ------------------------------------------ | ------------------------------------------------------ |
1047
+ | --clr-header-height | Header overall height |
1048
+ | --clr-header-bg-color | Header background color |
1049
+ | --clr-header-divider-color | Color of the header divider |
1050
+ | --clr-header-divider-opacity | Opacity of the header divider |
1051
+ | --clr-header-nav-opacity | Header nav item opacity |
1052
+ | --clr-header-nav-hover-opacity | Header nav item opacity on hover |
1053
+ | --clr-header-2-bg-color | Second version of header background color |
1054
+ | --clr-header-3-bg-color | Third version of header background color |
1055
+ | --clr-header-font-color | Header text color |
1056
+ | --clr-header-font-color-hover | Header hovered item color |
1057
+ | --clr-header-title-color | Header branding title text color |
1058
+ | --clr-header-title-font-weight | Header branding title text fort weight |
1059
+ | --clr-header-title-font-family | Header branding title font family |
1060
+ | --clr-header-nav-link-line-height | Header navigation buttons line-height |
1061
+ | --clr-header-nav-link-font-size | Header navigation buttons font size |
1062
+ | --clr-header-search-icon-size | Header search icon size |
1063
+ | --clr-header-search-margin-left | Header search field left margin |
1064
+ | --clr-header-search-margin-right | Header search field right margin |
1065
+ | --clr-header-search-gap | Gap between the subelements of the header search field |
1066
+ | --clr-header-search-input-font-color | Header search field text color |
1067
+ | --clr-header-search-border-active | Border of active/focused search field |
1068
+ | --clr-header-search-border-hover | Border of hovered search field |
1069
+ | --clr-header-search-placeholder-text-color | Text color of the header search placeholder |
1070
+
1071
+ ## CSS Classes
1072
+
1073
+ | Class name | Description |
1074
+ | ------------------------ | ------------------------------------ |
1075
+ | header | Application header element |
1076
+ | header > search | Header search field |
1077
+ | header-hamburger-trigger | Hamburger icon for responsive header |
1078
+ | header-actions | Responsive header actions |
1079
+
1080
+ # Input
1081
+
1082
+ ## CSS Custom properties
1083
+
1084
+ | Class name | Description |
1085
+ | -------------------------------- | -------------- |
1086
+ | --clr-forms-input-padding | Input padding |
1087
+ | --clr-forms-input-wrapper-height | Wrapper height |
1088
+
1089
+ ## CSS Classes
1090
+
1091
+ | Class name | Description |
1092
+ | --------------------------- | ------------------------------------------------------------- |
1093
+ | clr-input-wrapper | Wrapper for input element |
1094
+ | clr-input | Main input element |
1095
+ | clr-input-group | Wrapper for multiple form elements |
1096
+ | clr-input-group-addon | Input group addon (icon,text) |
1097
+ | clr-input-group-icon-action | Input group action. Used on button to add action on the input |
1098
+
1099
+ # Label
1100
+
1101
+ ## CSS Properties
1102
+
1103
+ | CSS Property Name | Description |
1104
+ | ----------------------------------------- | -------------------------------------------- |
1105
+ | --clr-label-font-color | Font color for default labels |
1106
+ | --clr-label-default-border-color | Border color for default labels |
1107
+ | --clr-label-default-bg-color | Background color for default labels |
1108
+ | --clr-label-font-solid-color | Font color for solid default labels |
1109
+ | --clr-label-default-solid-border-color | Border color for solid default labels |
1110
+ | --clr-label-default-solid-bg-color | Background color for solid default labels |
1111
+ | --clr-label-bg-hover-color | Background color on hover for labels |
1112
+ | --clr-label-gray-bg-color | Background color for gray labels |
1113
+ | --clr-label-gray-border-color | Border color for gray labels |
1114
+ | --clr-label-gray-color | Font color for gray labels |
1115
+ | --clr-label-gray-solid-bg-color | Background color for solid gray labels |
1116
+ | --clr-label-gray-solid-border-color | Border color for solid gray labels |
1117
+ | --clr-label-gray-solid-color | Font color for solid gray labels |
1118
+ | --clr-label-purple-bg-color | Background color for purple labels |
1119
+ | --clr-label-purple-border-color | Border color for purple labels |
1120
+ | --clr-label-purple-color | Font color for purple labels |
1121
+ | --clr-label-purple-solid-bg-color | Background color for solid purple labels |
1122
+ | --clr-label-purple-solid-border-color | Border color for solid purple labels |
1123
+ | --clr-label-purple-solid-color | Font color for solid purple labels |
1124
+ | --clr-label-blue-bg-color | Background color for blue labels |
1125
+ | --clr-label-blue-border-color | Border color for blue labels |
1126
+ | --clr-label-blue-color | Font color for blue labels |
1127
+ | --clr-label-blue-solid-bg-color | Background color for solid blue labels |
1128
+ | --clr-label-blue-solid-border-color | Border color for solid blue labels |
1129
+ | --clr-label-blue-solid-color | Font color for solid blue labels |
1130
+ | --clr-label-orange-bg-color | Background color for orange labels |
1131
+ | --clr-label-orange-border-color | Border color for orange labels |
1132
+ | --clr-label-orange-color | Font color for orange labels |
1133
+ | --clr-label-orange-solid-bg-color | Background color for solid orange labels |
1134
+ | --clr-label-orange-solid-border-color | Border color for solid orange labels |
1135
+ | --clr-label-orange-solid-color | Font color for solid orange labels |
1136
+ | --clr-label-light-blue-bg-color | Background color for light blue labels |
1137
+ | --clr-label-light-blue-border-color | Border color for light blue labels |
1138
+ | --clr-label-light-blue-color | Font color for light blue labels |
1139
+ | --clr-label-light-blue-solid-bg-color | Background color for solid light blue labels |
1140
+ | --clr-label-light-blue-solid-border-color | Border color for solid light blue labels |
1141
+ | --clr-label-light-blue-solid-color | Font color for solid light blue labels |
1142
+ | --clr-label-info-bg-color | Background color for info labels |
1143
+ | --clr-label-info-font-color | Font color for info labels |
1144
+ | --clr-label-info-border-color | Border color for info labels |
1145
+ | --clr-label-info-solid-bg-color | Background color for solid info labels |
1146
+ | --clr-label-info-solid-border-color | Border color for solid info labels |
1147
+ | --clr-label-info-solid-color | Font color for solid info labels |
1148
+ | --clr-label-success-bg-color | Background color for success labels |
1149
+ | --clr-label-success-font-color | Font color for success labels |
1150
+ | --clr-label-success-border-color | Border color for success labels |
1151
+ | --clr-label-success-solid-bg-color | Background color for solid success labels |
1152
+ | --clr-label-success-solid-border-color | Border color for solid success labels |
1153
+ | --clr-label-success-solid-color | Font color for solid success labels |
1154
+ | --clr-label-warning-bg-color | Background color for warning labels |
1155
+ | --clr-label-warning-font-color | Font color for warning labels |
1156
+ | --clr-label-warning-border-color | Border color for warning labels |
1157
+ | --clr-label-warning-solid-bg-color | Background color for solid warning labels |
1158
+ | --clr-label-warning-solid-border-color | Border color for solid warning labels |
1159
+ | --clr-label-warning-solid-color | Font color for solid warning labels |
1160
+ | --clr-label-danger-bg-color | Background color for danger labels |
1161
+ | --clr-label-danger-font-color | Font color for danger labels |
1162
+ | --clr-label-danger-border-color | Border color for danger labels |
1163
+ | --clr-label-danger-solid-bg-color | Background color for solid danger labels |
1164
+ | --clr-label-danger-solid-border-color | Border color for solid danger labels |
1165
+ | --clr-label-danger-solid-color | Font color for solid danger labels |
1166
+
1167
+ ## Classes
1168
+
1169
+ | Class Name | Description |
1170
+ | ------------- | ------------------------------- |
1171
+ | label | Default label class |
1172
+ | label-<color> | Label class with specific color |
1173
+ | solid | Solid label class |
1174
+ | clickable | Clickable label class |
1175
+ | text | Inner text class for the label |
1176
+
1177
+ # Layout
1178
+
1179
+ ## CSS Custom Properties
1180
+
1181
+ | CSS Custom Property | Description |
1182
+ | --------------------------- | ----------------------------------- |
1183
+ | --clr-global-app-background | Global application background color |
1184
+
1185
+ ## CSS Classes
1186
+
1187
+ | Class name | Description |
1188
+ | ----------------- | ---------------------------------- |
1189
+ | main-container | Main application container element |
1190
+ | alert-app-level | Application level alert slot |
1191
+ | header | Application header |
1192
+ | subnav, sub-nav | Secondary top navigation container |
1193
+ | content-container | Main content and nav container |
1194
+ | clr-vertical-nav | Left navigation container |
1195
+ | content-area | Pag content container |
1196
+
1197
+ # Lists
1198
+
1199
+ ## CSS Classes
1200
+
1201
+ | Class name | Description |
1202
+ | ------------- | ----------------------------------------------------- |
1203
+ | list | Sets default sizes to list |
1204
+ | compact | Makes a list to use less space, used with .list |
1205
+ | list-unstyled | Removes default bullet styling of list items |
1206
+ | list-spacer | Sets space before the list contents |
1207
+ | list-group | Removes bullets and reduces spacing used inside .card |
1208
+
1209
+ # Login
1210
+
1211
+ ## CSS Custom Properties
1212
+
1213
+ | CSS Custom Property | Description |
1214
+ | ---------------------------------- | -------------------------------------- |
1215
+ | --clr-login-title-color | Color of the title |
1216
+ | --clr-login-background-color | Background color |
1217
+ | --clr-login-background | Background image |
1218
+ | --clr-login-error-background-color | Error message background color |
1219
+ | --clr-login-error-border-radius | Error message border radius |
1220
+ | --clr-login-panel-line-color | Color of the divider line |
1221
+ | --clr-login-panel-line-opacity | Opacity to the divider line |
1222
+ | --clr-login-hint-color | Font color of the hint |
1223
+ | --clr-login-footer-gap | Gap size for the footer |
1224
+ | --clr-login-copyright-color | Font color for the copyright thumbnail |
1225
+ | --clr-login-welcome-color | Font color for welcome |
1226
+ | --clr-login-error-icon-color | Color for error icon |
1227
+ | --clr-login-logo-color | Color of VMware logo |
1228
+
1229
+ ## CSS Classes
1230
+
1231
+ | Class | Description |
1232
+ | ------------- | -------------------------------------------------------------------------------- |
1233
+ | login | The login form is a predefined form for applications that require authentication |
1234
+ | login-body | Wrapper for login content |
1235
+ | login-header | Wrapper for login header elements |
1236
+ | login-footer | Wrapper for login footer elements |
1237
+ | logo | VMware logo |
1238
+ | actions | Wrapper for header actions |
1239
+ | copyright | Copyright label |
1240
+ | login-wrapper | Wrapper element |
1241
+ | title | The title `section` of the login form |
1242
+ | welcome | The heading of the login form |
1243
+ | hint | Hint/helper text within the title of the login form |
1244
+ | login-group | Contains the login form controls |
1245
+ | error | Error messageThe error message is hidden by default |
1246
+ | active | Adding the `active` class to the `.error` element makes the error message appear |
1247
+
1248
+ # Modal
1249
+
1250
+ ## CSS Custom Properties
1251
+
1252
+ | CSS Custom Property | Description |
1253
+ | -------------------------------- | ---------------------------------------- |
1254
+ | --clr-modal-close-color | Fill color of modal close icon |
1255
+ | --clr-modal-bg-color | Background color of modal |
1256
+ | --clr-modal-backdrop-color | Color of modal backdrop |
1257
+ | --clr-modal-border-radius | Border radius of a modal |
1258
+ | --clr-modal-title-color | Font color of modal title |
1259
+ | --clr-modal-title-font-family | Font family of modal title |
1260
+ | --clr-modal-title-font-weight | Font weight of modal title |
1261
+ | --clr-modal-title-font-size | Font size for modal title |
1262
+ | --clr-modal-title-line-height | Line height for modal title |
1263
+ | --clr-modal-title-letter-spacing | Letter spacing for modal title |
1264
+ | --clr-modal-sm-width | Width of the modal on small layout |
1265
+ | --clr-modal-md-width | Width of the modal on medium layout |
1266
+ | --clr-modal-lg-width | Width of the modal on large layout |
1267
+ | --clr-modal-xl-width | Width of the modal on extra large layout |
1268
+ | --clr-modal-content-box-shadow | Shadow of modal content |
1269
+
1270
+ ## CSS Classes
1271
+
1272
+ | Class name | Description |
1273
+ | ------------------- | -------------------------------------------------- |
1274
+ | modal | Modal element class (positioning focused) |
1275
+ | modal-dialog | Modal dialog box class |
1276
+ | modal-sm | Sets `modal-dialog` to use small width |
1277
+ | modal-lg | Sets `modal-dialog` to use large width |
1278
+ | modal-xl | Sets `modal-dialog` to use extra-large width |
1279
+ | modal-content | Content class \*should be used in `modal-dialog` |
1280
+ | modal-header | Header class |
1281
+ | modal-title | Title class \*should be used inside `modal-header` |
1282
+ | modal-title-wrapper | Title wrapper |
1283
+ | modal-body-wrapper | Body wrapper |
1284
+ | modal-footer | Footer wrapper |
1285
+ | modal-backdrop | Backdrop class |
1286
+ | modal-nav | Modal nav class used only in wizards |
1287
+
1288
+ # Password
1289
+
1290
+ ## CSS Custom Properties
1291
+
1292
+ | CSS Custom Property | Description |
1293
+ | -------------------------------------------- | ------------------------------------ |
1294
+ | --clr-forms-password-eye-icon-color | Color of show/hide eye icon |
1295
+ | --clr-forms-password-disabled-eye-icon-color | Color of disabled show/hide eye icon |
1296
+
1297
+ # Progress bar
1298
+
1299
+ ## CSS Custom Properties
1300
+
1301
+ | CSS Custom Property | Description |
1302
+ | ---------------------------- | ---------------- |
1303
+ | --clr-progress-default-color | Default color |
1304
+ | --clr-progress-alt-color-1 | Success color |
1305
+ | --clr-progress-alt-color-2 | Danger color |
1306
+ | --clr-progress-alt-color-3 | Warning color |
1307
+ | --clr-progress-bg-color | Background color |
1308
+ | --clr-progress-label-color | Label color |
1309
+
1310
+ ## CSS Classes
1311
+
1312
+ | Class name | Description |
1313
+ | --------------- | ------------------------------------------------------------------------ |
1314
+ | progress | Main progress bar element |
1315
+ | progress-static | Main static progress bar element |
1316
+ | progress-fade | Fade out animation for progress bar |
1317
+ | progress-meter | The bar element in a static progress bar |
1318
+ | progress-group | Layout element for multiple progress bars |
1319
+ | progress-block | Layout element for progress bar groups |
1320
+ | flash | Sets the bar color to success once value of 100 is reached |
1321
+ | flash-danger | Sets the bar color to danger once value of 100 is reached |
1322
+ | labeled | Used with `progress` to show display value next to the bar |
1323
+ | loop | Loop animation for non-static progress bars |
1324
+ | danger | Combined with `progress loop` or `progress-static` to set progress color |
1325
+ | warning | Combined with `progress loop` or `progress-static` to set progress color |
1326
+ | success | Combined with `progress loop` or `progress-static` to set progress color |
1327
+ | compact | Used with `progress` or `progress-static` to minify the bar |
1328
+
1329
+ # Radio
1330
+
1331
+ ## CSS Custom Properties
1332
+
1333
+ | CSS Custom Properties | Description |
1334
+ | ------------------------------------------- | -------------------------------------------------------- |
1335
+ | --clr-forms-radio-label-color | Color of the label for radio buttons |
1336
+ | --clr-forms-radio-disabled-background-color | Background color of disabled radio buttons |
1337
+ | --clr-forms-radio-disabled-mark-color | Color of the mark (indicator) for disabled radio buttons |
1338
+ | --clr-forms-radio-label-disabled-color | Font color of disabled radio label |
1339
+ | --clr-forms-radio-selected-shadow | Shadow of selected radio |
1340
+ | --clr-forms-radio-disabled-shadow | Shadow of disabled radio |
1341
+ | --clr-forms-radio-focused-shadow | Shadow of focused radio |
1342
+
1343
+ ## CSS Classes
1344
+
1345
+ | Class | Description |
1346
+ | ----------------- | -------------------------------------------------------- |
1347
+ | clr-radio-wrapper | The wrapper container for the radio button and its label |
1348
+ | clr-control-label | The label element of the radio button |
1349
+
1350
+ # Range
1351
+
1352
+ ## CSS Custom Properties
1353
+
1354
+ | CSS Custom Property | Description |
1355
+ | ---------------------------------------------- | --------------------------------------------- |
1356
+ | --clr-forms-range-progress-fill-color | The color of the range fill progress. |
1357
+ | --clr-forms-range-track-color | The background color of the range track. |
1358
+ | --clr-forms-range-track-border-color | The border color of the range track. |
1359
+ | --clr-forms-range-thumb-height | The height and width of the range thumb. |
1360
+ | --clr-forms-range-track-height | The height of the range track. |
1361
+ | --clr-forms-range-track-border-radius | The border radius of the range track. |
1362
+ | --clr-forms-range-progress-fill-color-disabled | The color of disabled range fill progress. |
1363
+ | --clr-forms-range-track-color-disabled | The background color of disabled range track. |
1364
+ | --clr-forms-range-track-border-color-disabled | The border color of disabled range. |
1365
+
1366
+ ## CSS Classes
1367
+
1368
+ | Class Name | Description |
1369
+ | ----------------- | ----------------------------------------------------------- |
1370
+ | clr-range-wrapper | Represents the wrapper element for the range input. |
1371
+ | fill-input | Represents the progress bar element inside the range input. |
1372
+ | clr-range | Represents the range input element. |
1373
+
1374
+ # Select
1375
+
1376
+ ## CSS Custom Properties
1377
+
1378
+ | CSS Custom Property | Description |
1379
+ | -------------------------------------------- | ------------------------------------------------------- |
1380
+ | --clr-forms-select-option-color | Text color used in the options of a single select |
1381
+ | --clr-forms-select-option-background-color | Background color used in the options of a single select |
1382
+ | --clr-forms-select-multiple-background-color | Background color used in a multiple select |
1383
+ | --clr-forms-select-multiple-border-color | Border color used by multiple select options |
1384
+ | --clr-forms-select-multiple-option-color | Text color used by the multiple select options |
1385
+ | --clr-forms-select-hover-background | Background color used when select is hovered |
1386
+ | --clr-forms-select-hover-border-color | Border color used when select is hovered |
1387
+ | --clr-forms-select-disabled-border-color | Border color used when select is disabled |
1388
+ | --clr-forms-select-disabled-color | Text color used when select option is disabled |
1389
+
1390
+ ## CSS Classes
1391
+
1392
+ | Class name | Description |
1393
+ | ----------------------- | ---------------------------------------------- |
1394
+ | clr-select | Select element class |
1395
+ | clr-multiselect-wrapper | Internal class that wraps the single selects |
1396
+ | clr-select-wrapper | Internal class that wraps the multiple selects |
1397
+
1398
+ # Signpost
1399
+
1400
+ ## CSS Custom Properties
1401
+
1402
+ | CSS Custom Property | Description |
1403
+ | --------------------------------------- | ---------------------------------- |
1404
+ | --clr-signpost-content-color | Signpost content color. |
1405
+ | --clr-signpost-content-bg-color | Signpost content background color. |
1406
+ | --clr-signpost-content-border-color | Signpost content border color. |
1407
+ | --clr-signpost-content-border-color | Signpost content border color. |
1408
+ | --clr-signpost-action-color | Signpost action color. |
1409
+ | --clr-signpost-action-hover-color | Signpost action hover color. |
1410
+ | --clr-signpost-action-active-color | Signpost action active color. |
1411
+ | --clr-signpost-pointer-border | Signpost pointer border. |
1412
+ | --clr-signpost-pointer-invisible-border | Signpost pointer invisible border. |
1413
+ | --clr-signpost-pointer-pseudo-border | Signpost pointer pseudo border. |
1414
+
1415
+ ## CSS Classes
1416
+
1417
+ | Class name | Description |
1418
+ | ----------------------- | ------------------------------------------------------------- |
1419
+ | signpost | Signpost element class. |
1420
+ | signpost-content | Content class for the signpost. |
1421
+ | signpost-content-header | Content header class for the signpost. |
1422
+ | signpost-content-body | Content body class for the signpost. |
1423
+ | signpost-trigger | Internal class for opening the signpost. |
1424
+ | signpost-wrap | Internal wrapper class. |
1425
+ | signpost-action | Internal action class. Used with content close action button. |
1426
+
1427
+ # Spinner
1428
+
1429
+ ## CSS Custom Properties
1430
+
1431
+ | CSS Custom Property | Description |
1432
+ | ----------------------------------- | ------------------------------------------------ |
1433
+ | --clr-spinner-default-size | Size (diameter) of large spinner |
1434
+ | --clr-spinner-medium-size | Size of medium spinner |
1435
+ | --clr-spinner-small-size | Size of small spinner |
1436
+ | --clr-spinner-margin-right | Spacing between spinner and text next to it |
1437
+ | --clr-spinner-default-stroke-width | Width (thickness) of stroke of large spinner |
1438
+ | --clr-spinner-medium-stroke-width | Width of medium spinner |
1439
+ | --clr-spinner-small-stroke-width | Width of small spinner |
1440
+ | --clr-spinner-fill-bg-color | Spinner background color |
1441
+ | --clr-spinner-fill-inverse-bg-color | Spinner background color for inversed background |
1442
+ | --clr-spinner-fill-color | Color of rotating part of spinner |
1443
+ | --clr-spinner-fill-inverse-color | Spinner color for inversed background |
1444
+ | --clr-spinner-border-radius | Spinner border radius |
1445
+
1446
+ ## CSS Classes
1447
+
1448
+ | Class Name | Description |
1449
+ | --------------- | ------------------------------------- |
1450
+ | spinner | Default class for all spinners. |
1451
+ | spinner-inline | Display the spinner inline. |
1452
+ | spinner-inverse | Display the spinner in inverse mode. |
1453
+ | spinner-sm | Display the spinner with small size. |
1454
+ | spinner-md | Display the spinner with medium size. |
1455
+ | spinner-check | Display a checkmark icon spinner. |
1456
+
1457
+ # Stack view
1458
+
1459
+ ## CSS Custom Properties
1460
+
1461
+ | CSS Custom Property | Description |
1462
+ | --------------------------------------------- | ----------------------------------------------------------- |
1463
+ | --clr-stack-view-border-width | Stack view border width |
1464
+ | --clr-stack-view-border-radius | Border radius of stack view |
1465
+ | --clr-stack-view-border-color | Border color of stack view |
1466
+ | --clr-stack-block-changed-border-top-color | Changed stack block border top color |
1467
+ | --clr-stack-view-title-color | Stack view title color |
1468
+ | --clr-stack-view-row-color | Text and caret color of not expandable stack view row |
1469
+ | --clr-stack-view-row-bg-color | Background color of not expandable stack view row |
1470
+ | --clr-stack-view-expandable-row-color | Text and caret color of expandable stack view row |
1471
+ | --clr-stack-view-expandable-row-bg-color | Background color of expandable stack view row |
1472
+ | --clr-stack-view-expandable-row-hover | Text and caret `:hover` color of expandable stack view row |
1473
+ | --clr-stack-view-expandable-row-bg-hover | Background `:hover` color of expandable stack view row |
1474
+ | --clr-stack-view-expandable-row-active | Text and caret` :active` color of expandable stack view row |
1475
+ | --clr-stack-view-expandable-row-bg-active | Background `:active` color of expandable stack view row |
1476
+ | --clr-stack-view-expanded-row-color | Text and caret color of expanded stack view row |
1477
+ | --clr-stack-view-expanded-row-bg-color | Background color of expanded stack view row |
1478
+ | --clr-stack-view-expanded-row-bg-color-hover | Background color of hover on expanded stack view row |
1479
+ | --clr-stack-view-expanded-row-bg-color-active | Background color of active on expanded stack view row |
1480
+ | --clr-stack-view-row-font-size | Font size for stack view row |
1481
+ | --clr-stack-view-row-font-weight | Font weight for stack view row |
1482
+ | --clr-stack-view-row-line-height | Line height for stack view row |
1483
+ | --clr-stack-view-row-letter-spacing | Letter spacing for stack view row |
1484
+
1485
+ ## CSS Classes
1486
+
1487
+ | Class name | Description |
1488
+ | ---------------------- | ---------------------------------------------------- |
1489
+ | stack-view | Main stack view element |
1490
+ | stack-header | Main stack header element |
1491
+ | stack-title | Stack view header title |
1492
+ | stack-actions | Wrapper for stack view header actions |
1493
+ | stack-action | Main header stack action class |
1494
+ | stack-block | Main stack block element |
1495
+ | stack-block-changed | Marks a stack block as changed |
1496
+ | stack-block-label | Wrapper for stack block label and content |
1497
+ | stack-view-key | Stack block view key element |
1498
+ | stack-block-content | Stack block content element |
1499
+ | stack-block-caret | Stack block caret icon element |
1500
+ | stack-children | Wrapper for stack block child blocks |
1501
+ | stack-block-expandable | Used with `stack-block` to add expandable caret icon |
1502
+ | stack-block-expanded | Stack block caret icon in expanded state |
1503
+
1504
+ # Table
1505
+
1506
+ ## CSS Custom Properties
1507
+
1508
+ | CSS Custom Property | Description |
1509
+ | -------------------------------------- | --------------------------------------------------------- |
1510
+ | --clr-table-bgcolor | Background color of a table |
1511
+ | --clr-table-margin | Margin of a table |
1512
+ | --clr-thead-bgcolor | Background color of table header |
1513
+ | --clr-table-header-border-bottom-color | Not used |
1514
+ | --clr-table-footer-border-top-color | Not used in tables. Used for datagrid footer border color |
1515
+ | --clr-table-border-color | Border color of a table |
1516
+ | --clr-tablerow-bordercolor | Border color for table rows |
1517
+ | --clr-table-border-radius | Border radius for а table |
1518
+ | --clr-table-borderwidth | Border width for а table |
1519
+ | --clr-table-cornercellradius | Border radius for corner cells |
1520
+ | --clr-table-font-color | Font color for table rows |
1521
+ | --clr-thead-color | Font color for table header |
1522
+
1523
+ ## CSS Classes
1524
+
1525
+ All other table classes like `table, thead, tbody, th, td` are not specific to Clarity so they are not included.
1526
+
1527
+ | Class name | Description |
1528
+ | -------------- | ------------------------ |
1529
+ | table-vertical | Vertical table |
1530
+ | table-noborder | Table with no borders |
1531
+ | table-compact | Table with less paddings |
1532
+
1533
+ # Tabs
1534
+
1535
+ ## CSS Custom Properties
1536
+
1537
+ | CSS Custom Property | Description |
1538
+ | ----------------------------------------- | ------------------------------------------------ |
1539
+ | --clr-nav-link-color | Tabs nav link color |
1540
+ | --clr-nav-link-active-color | Tabs nav link active color |
1541
+ | --clr-nav-hover-bg-color | Tabs nav hover background color |
1542
+ | --clr-nav-active-bg-color | Tabs nav active background color |
1543
+ | --clr-nav-selected-bg-color | Tabs nav selected background color |
1544
+ | --clr-nav-selected-hover-bg-color | Tabs nav hover background color on selected tab |
1545
+ | --clr-nav-selected-active-bg-color | Tabs nav active background color on selected tab |
1546
+ | --clr-nav-box-shadow-color | Tabs nav box shadow color |
1547
+ | --clr-vertical-nav-header-font-weight | Vertical nav header font weight |
1548
+ | --clr-nav-selected-hover-background-color | Tabs nav selected background color on hover |
1549
+
1550
+ ## CSS Classes
1551
+
1552
+ | Class name | Description |
1553
+ | ------------- | --------------------------------------------- |
1554
+ | tabs-overflow | Used to grouping tabs in overflow tab. |
1555
+ | tabs-vertical | Used to display tabs in vertical orientation. |
1556
+ | tab-content | Inner class for the content of the tab. |
1557
+
1558
+ # Textarea
1559
+
1560
+ ## CSS Custom Properties
1561
+
1562
+ | CSS Custom Property | Description |
1563
+ | ---------------------------------------- | -------------------------------------- |
1564
+ | --clr-forms-textarea-background-color | Background color for textarea. |
1565
+ | --clr-forms-textarea-border-radius | Border radius for textarea. |
1566
+ | --clr-forms-textarea-disabled-background | Background color of disabled textarea. |
1567
+
1568
+ ## CSS Classes
1569
+
1570
+ | Class Name | Description |
1571
+ | -------------------- | ------------------------------ |
1572
+ | clr-textarea-wrapper | Wrapper class for the textarea |
1573
+ | clr-textarea | Class for the textarea element |
1574
+
1575
+ # Timeline
1576
+
1577
+ ## CSS Custom Properties
1578
+
1579
+ | CSS Custom Property | Description |
1580
+ | ------------------------------------- | ------------------------------------- |
1581
+ | --clr-timeline-line-color | Timeline line color |
1582
+ | --clr-timeline-step-header-color | Timeline step header text color |
1583
+ | --clr-timeline-step-title-color | Timeline step title text color |
1584
+ | --clr-timeline-step-description-color | Timeline step description text color |
1585
+ | --clr-timeline-incomplete-step-color | Incomplete timeline step circle color |
1586
+ | --clr-timeline-current-step-color | Current timeline step circle color |
1587
+ | --clr-timeline-success-step-color | Successful timeline step circle color |
1588
+ | --clr-timeline-error-step-color | Failed timeline step circle color |
1589
+ | --clr-timeline-step-title-font-weight | Timeline step title font weight |
1590
+
1591
+ ## CSS Classes
1592
+
1593
+ | Class name | Description |
1594
+ | ----------------------------- | ------------------------------- |
1595
+ | clr-timeline | Main Timeline element |
1596
+ | clr-timeline-step | Timeline step element |
1597
+ | clr-timeline-step-header | Timeline step header |
1598
+ | clr-timeline-step-body | Timeline step body |
1599
+ | clr-timeline-step-title | Timeline step title |
1600
+ | clr-timeline-step-description | Timeline step description |
1601
+ | clr-timeline-vertical | Switches timeline vertical mode |
1602
+
1603
+ # Toggle
1604
+
1605
+ ## CSS Custom Properties
1606
+
1607
+ | CSS Custom Property | Description |
1608
+ | --------------------------------------------- | ----------------------------------------------------- |
1609
+ | --clr-toggle-bg-color-off | Background color for toggle that is off |
1610
+ | --clr-toggle-bg-color-on | Background color for toggle that is on |
1611
+ | --clr-toggle-handle-bg-color | Background color of the handle of the toggle |
1612
+ | --clr-toggle-disabled-default-border-color | Border color for a disabled toggle |
1613
+ | --clr-toggle-disabled-off-border-color | Border color for disabled toggle that is off |
1614
+ | --clr-toggle-disabled-off-bg-color | Background color for a disabled toggle that is off |
1615
+ | --clr-toggle-disabled-off-handle-border-color | Handle border color for a disabled toggle that is off |
1616
+ | --clr-toggle-disabled-on-border-color | Border color for disabled toggle that is on |
1617
+ | --clr-toggle-disabled-on-bg-color | Background color for disabled toggle that is on |
1618
+ | --clr-toggle-disabled-on-handle-border-color | Handle border color for disabled toggle that is on |
1619
+
1620
+ ## CSS Classes
1621
+
1622
+ | Class name | Description |
1623
+ | ------------------ | ----------------------------------------------------------------- |
1624
+ | clr-toggle-wrapper | Wrapper class for the toggle switch component |
1625
+ | clr-toggle-right | Class that aligns the toggle switch to the right in the container |
1626
+
1627
+ # Tooltip
1628
+
1629
+ ## CSS Custom Properties
1630
+
1631
+ | CSS Custom Property | Description |
1632
+ | ------------------------------ | ------------------------------- |
1633
+ | --clr-tooltip-background-color | Tooltip background color |
1634
+ | --clr-tooltip-border-radius | Tooltip element corner radius |
1635
+ | --clr-tooltip-color | Color of the tooltip text |
1636
+ | --clr-tooltip-font-weight | Font weight of the tooltip text |
1637
+
1638
+ ## CSS Classes
1639
+
1640
+ | Class name | Description |
1641
+ | ------------------- | ---------------------------------------------------------------------- |
1642
+ | tooltip | Main tooltip component element |
1643
+ | tooltip-content | Tooltip content container |
1644
+ | tooltip-trigger | Tooltip trigger element |
1645
+ | tooltip-#{POSITION} | Tooltip position identifier (top, bottom, left, right, top-left, etc.) |
1646
+ | tooltip-#{SIZE} | Tooltip size identifier (sizes: xs, sm, md, lg) |
1647
+
1648
+ # Tree view
1649
+
1650
+ ## CSS Custom Properties
1651
+
1652
+ | CSS Custom Property | Description |
1653
+ | ------------------------------------------------ | ----------------------------------------------------- |
1654
+ | --clr-tree-border-radius | Tree node content border radius |
1655
+ | --clr-tree-node-caret-color | Tree node caret color |
1656
+ | --clr-tree-node-caret-hover-color | Tree node caret hover color |
1657
+ | --clr-tree-node-caret-active-color | Tree node caret active color |
1658
+ | --clr-tree-node-caret-disabled-color | Tree node caret disabled color |
1659
+ | --clr-tree-node-content-text-only-color | Tree node content text only color |
1660
+ | --clr-tree-node-content-color | Tree node content color |
1661
+ | --clr-tree-node-content-bg-color | Tree node content background color |
1662
+ | --clr-tree-node-content-hover-color | Tree node content hover color |
1663
+ | --clr-tree-node-content-bg-hover-color | Tree node content background hover color |
1664
+ | --clr-tree-node-content-color | Tree node content selected color |
1665
+ | --clr-tree-node-content-bg-selected-color | Tree node content background selected color |
1666
+ | --clr-tree-node-content-bg-selected-hover-color | Tree node content background hover color on selected |
1667
+ | --clr-tree-node-content-bg-selected-active-color | Tree node content background active color on selected |
1668
+ | --clr-tree-node-content-disabled-color | Tree node content disabled color |
1669
+ | --clr-tree-node-content-bg-disabled-color | Tree node content background disabled color |
1670
+
1671
+ ## CSS Classes
1672
+
1673
+ | Class name | Description |
1674
+ | ------------------------------- | ------------------------------------------- |
1675
+ | clr-tree-node | Main tree node element |
1676
+ | clr-tree-node-content-container | Wrapper for tree content and caret elements |
1677
+ | clr-treenode-content | Content wrapper for tree node |
1678
+ | clr-treenode-caret | Tree node caret button |
1679
+ | clr-tree-node-caret-icon | Tree node caret icon |
1680
+ | clr-treenode-spinner-container | Wrapper for tree node spinner |
1681
+ | clr-treenode-spinner | Tree node spinner |
1682
+ | clr-treenode-children | Wrapper for nested child tree nodes |
1683
+ | clr-treenode-link | Tree node link |
1684
+
1685
+ # Vertical Nav
1686
+
1687
+ ## CSS Custom Properties
1688
+
1689
+ | CSS Custom Property | Description |
1690
+ | ----------------------------------------------- | ----------------------------------------- |
1691
+ | --clr-vertical-nav-icon-active-color | Vertical nav active icon color |
1692
+ | --clr-vertical-nav-toggle-icon-color | Vertical nav toggle icon color |
1693
+ | --clr-vertical-nav-item-color | Vertical nav item font color |
1694
+ | --clr-vertical-nav-item-active-color | Vertical nav item active font color |
1695
+ | --clr-vertical-nav-bg-color | Vertical nav background color |
1696
+ | --clr-vertical-nav-selected-bg-color | Vertical nav selected background color |
1697
+ | --clr-vertical-nav-hover-bg-color | Vertical nav hover background color |
1698
+ | --clr-vertical-nav-trigger-divider-border-width | Vertical nav trigger divider border width |
1699
+ | --clr-vertical-nav-trigger-divider-border-color | Vertical nav trigger divider border color |
1700
+ | --clr-vertical-nav-active-bg-color | Vertical nav active background color |
1701
+ | --clr-vertical-nav-active-color | Vertical nav active color |
1702
+ | --clr-vertical-nav-toggle-icon-hover-color | Vertical nav trigger icon hover color |
1703
+ | --clr-vertical-nav-toggle-icon-active-color | Vertical nav trigger icon active color |
1704
+ | --clr-vertical-nav-toggle-icon-disabled-color | Vertical nav trigger icon disabled color |
1705
+ | --clr-vertical-nav-item-padding | Vertical nav item padding |
1706
+ | --clr-vertical-nav-item-child-padding | Vertical nav sub items padding |
1707
+ | --clr-vertical-nav-item-height | Vertical nav item height |
1708
+ | --clr-vertical-nav-toggle-button-size | Vertical nav toggle buton size |
1709
+ | --clr-vertical-nav-header-padding | Vertical nav header padding |
1710
+ | --clr-vertical-nav-item-active-font-weight | Vertical nav item active font weight |
1711
+
1712
+ ## CSS Classes
1713
+
1714
+ | Class name | Description |
1715
+ | ---------------------- | --------------------------------------------------------------- |
1716
+ | clr-vertical-nav | Vertical nav element |
1717
+ | nav-content | Navigation content |
1718
+ | nav-divider | Navigation content separator |
1719
+ | nav-trigger | Navigation trigger button for collapse/expand state |
1720
+ | nav-trigger-icon | Navigation trigger icon |
1721
+ | nav-trigger--bottom | Move navigation trigger at the bottom |
1722
+ | nav-group | main vertical navigation group element |
1723
+ | nav-group-content | Wrapper for navigation group content |
1724
+ | nav-group-text | Navigation group content wrapper text |
1725
+ | nav-group-children | Wrapper for navigation group children elements |
1726
+ | nav-group-trigger | Navigation group trigger button for open/close group |
1727
+ | nav-group-trigger-icon | Navigation group trigger button icon |
1728
+ | nav-btn | Button to expand vertical nav when collapsed |
1729
+ | has-icons | Internal class showing if vertical nav has icons |
1730
+ | has-nav-groups | Internal class showing if vertical nav has at least 1 nav group |
1731
+
1732
+ # Wizard
1733
+
1734
+ ## CSS Custom Properties
1735
+
1736
+ | CSS Custom Property | Description |
1737
+ | ----------------------------------------------- | ------------------------------------------------------------------------------ |
1738
+ | --clr-wizard-footer-vertical-space | Vertical spacing for footer buttons |
1739
+ | --clr-wizard-main-bgcolor | Wizard background color |
1740
+ | --clr-wizard-stepnav-bgcolor | Wizard navigation background color |
1741
+ | --clr-wizard-main-text-color | Wizard text color |
1742
+ | --clr-wizard-stepnav-text | Wizard navigation text color |
1743
+ | --clr-wizard-stepnav-text-active | Wizard navigation item color when active |
1744
+ | --clr-wizard-stepnav-text-hover | Wizard navigation item color when hovered |
1745
+ | --clr-wizard-stepnav-text-selected | Wizard navigation item color when selected |
1746
+ | --clr-wizard-stepnav-text-disabled | Wizard navigation item color when disabled |
1747
+ | --clr-wizard-title-text | Wizard title text color |
1748
+ | --clr-wizard-stepnav-border-size | Wizard navigation border size |
1749
+ | --clr-wizard-stepnav-item-border-color | Wizard navigation border color |
1750
+ | --clr-wizard-stepnav-item-complete-border-color | Wizard navigation item complete border color |
1751
+ | --clr-wizard-stepnav-selected-border-color | Wizard navigation border color of current not completed step |
1752
+ | --clr-wizard-stepnav-selected-bgcolor | Wizard navigation background color for the currently selected element |
1753
+ | --clr-wizard-stepnav-selected-error-bgcolor | Wizard navigation background color for the currently selected element if error |
1754
+ | --clr-wizard-stepnav-selected-hover-bgcolor | Wizard navigation background color for the currently hovered selected element |
1755
+ | --clr-wizard-stepnav-selected-active-bgcolor | Wizard navigation background color for the currently active selected element |
1756
+ | --clr-wizard-header-action-color | Wizard header actions color |
1757
+ | --clr-wizard-header-action-color--hovered | Wizard header actions color on hover |
1758
+ | --clr-wizard-border-radius | Wizard border radius |
1759
+ | --clr-wizard-stepnav-border-color | Wizard navigation border color |
1760
+ | --clr-wizard-box-shadow | Wizard highlight indication |
1761
+ | --clr-wizard-stepnav-link-font-size | Wizard navigation item font size |
1762
+ | --clr-wizard-stepnav-link-line-height | Wizard navigation item line height |
1763
+ | --clr-wizard-stepnav-link-error-icon-color | Wizard navigation item button error icon color |
1764
+ | --clr-wizard-stepnav-item-error-border-color | Wizard navigation item error border color |
1765
+ | --clr-wizard-stepnav-link-complete-icon-color | Wizard navigation item button complete icon color |
1766
+ | --clr-wizard-footer-height | Wizard page footer height |
1767
+ | --clr-wizard-stepnav-active-bgcolor | Wizard navigation item button background color when active |
1768
+ | --clr-wizard-stepnav-hover-bgcolor | Wizard navigation item button background color when hovered |
1769
+ | --clr-wizard-title-font-size | Wizard title font size |
1770
+ | --clr-wizard-title-line-height | Wizard title line height |
1771
+ | --clr-wizard-content-background-color | Wizard content background color |
1772
+
1773
+ ## CSS Classes
1774
+
1775
+ | Class name | Description |
1776
+ | ----------------------------------- | ---------------------------------------------- |
1777
+ | clr-wizard | Main wizard element |
1778
+ | clr-wizard-content | Wizard content container |
1779
+ | clr-wizard-page | Wizard page container |
1780
+ | wizard-#{SIZE} | Wizard size; sizes: [md, lg, xl] |
1781
+ | clr-wizard-btn | Wizard control button |
1782
+ | clr-wizard-title | Wizard title element |
1783
+ | clr-wizard-header-action | Wizard header action |
1784
+ | clr-wizard-stepnav | Wizard navigation container |
1785
+ | clr-wizard-stepnav-list | Wizard navigation list |
1786
+ | clr-wizard-stepnav-item | Wizard navigation item |
1787
+ | clr-wizard-stepnav-link | Wizard navigation item link |
1788
+ | clr-wizard-stepnav-link-icon | Wizard navigation item icon wrapper |
1789
+ | clr-wizard-stepnav-item-page-number | Wizard navigation item page number |
1790
+ | clr-wizard-footer | Wizard footer |
1791
+ | clr-wizard-footer-buttons | Wizard footer buttons container |
1792
+ | clr-wizard--no-title | Remove wizard dialog title |
1793
+ | clr-wizard--no-shadow | Remove wizard dialog shadow |
1794
+ | clr-wizard-stepnav-wrapper | Internal wrapper for the wizard navigation |
1795
+ | clr-wizard-footer-buttons-wrapper | Internal wrapper for the wizard footer buttons |
1796
+ | clr-wizard-btn-wrapper | Internal wrapper for wizard control buttons |