Clay CSS
(
2.1.12
)
Navigation
home
globals
grid
typography
icons
links
utilities
alert
label
badge
sticker
button
breadcrumb
card
dropdown
input
input custom
input group
input validation
list group
loading animations
menubar
modal
nav
nav pills
nav tabs
nav underline
navbar
navbar application bar
navbar management bar
navbar navigation bar
pagination
panel
popover
progress bar
multi step nav
sheet
sidebar
table
tbar
tooltip
timeline
toggle switch
Switch Themes
Add New Theme
Add
Options
Import
Export
Delete Current Theme
Delete Everything
Use Clay Base
Custom Control Description
Sets the `font-size` for Custom Checkbox / Radio labels.
custom-control-description-font-size
px/rem
Sets the space between the Custom Checkbox / Radio and label.
custom-control-description-padding-left
px/rem
custom-control-description-line-height
custom-control-description-cursor
Custom Control Description Disabled
custom-control-label-disabled-color
custom-control-description-disabled-cursor
Custom Control
Sets the space between each `.custom-control-inline`.
custom-control-spacer-x
px/rem
custom-control-gutter
px/rem
Custom Control Indicator
Sets the `width` and `height` of the Custom Checkbox / Radio.
custom-control-indicator-size
px/rem
custom-control-indicator-border-width
px/rem
custom-control-indicator-border-style
custom-control-indicator-border-color
Sets the `background-color` on the unchecked state of a Custom Checkbox / Radio.
custom-control-indicator-bg
custom-control-indicator-bg-size
Sets the `box-shadow` on the unchecked state of a Custom Checkbox / Radio.
custom-control-indicator-box-shadow
Custom Control Indicator Focus
custom-control-indicator-focus-box-shadow
Custom Control Indicator Active
Sets the `border-color` on the unchecked active state (mousedown) of a Custom Checkbox / Radio.
custom-control-indicator-active-border-color
Sets the `color` on the unchecked active state (mousedown) of a Custom Checkbox / Radio.
custom-control-indicator-active-color
Sets the `background-color` on the unchecked active state (mousedown) of a Custom Checkbox / Radio.
custom-control-indicator-active-bg
Sets the `box-shadow` on the unchecked active state (mousedown) of a Custom Checkbox / Radio.
custom-control-indicator-active-box-shadow
Custom Control Indicator Indeterminate
custom-control-indicator-indeterminate-border-color
Custom Control Indicator Disabled
Sets the `border-color` on the unchecked disabled state of a Custom Checkbox / Radio.
custom-control-indicator-disabled-border-color
Sets the `background-color` on the unchecked disabled state of a Custom Checkbox / Radio.
custom-control-indicator-disabled-bg
custom-control-indicator-disabled-cursor
Custom Control Indicator Checked
Sets the `border-color` on the checked state of a Custom Checkbox / Radio.
custom-control-indicator-checked-border-color
Sets the `color` on the checked state of a Custom Checkbox / Radio.
custom-control-indicator-checked-color
custom-control-indicator-checked-bg
custom-control-indicator-checked-box-shadow
Custom Control Indicator Checked Active
Sets the `border-color` on the checked active state (checked mousedown) of a Custom Checkbox / Radio.
custom-control-indicator-active-checked-border-color
Sets the `background-color` on the checked active state (checked mousedown) of a Custom Checkbox / Radio.
custom-control-indicator-active-checked-bg
Custom Control Indicator Checked Disabled
custom-control-indicator-checked-disabled-bg
Sets the `border-color` on the checked disabled state of a Custom Checkbox / Radio.
custom-control-indicator-disabled-checked-border-color
Custom Checkbox Indicator
Sets the `border-radius` on a Custom Checkbox.
custom-checkbox-indicator-border-radius
px/rem
Custom Checkbox Indicator Indeterminate
Sets the `background-image` on the indeterminate state of a Custom Checkbox.
custom-checkbox-indicator-icon-indeterminate
Sets the `background-size` on the indeterminate state of a Custom Checkbox.
custom-checkbox-indicator-icon-indeterminate-bg-size
Sets the `color` on the indeterminate state of a Custom Checkbox.
custom-checkbox-indicator-indeterminate-color
Sets the `background-color` on the indeterminate state of a Custom Checkbox.
custom-checkbox-indicator-indeterminate-bg
custom-checkbox-indicator-indeterminate-box-shadow
Custom Checkbox Indicator Checked
Sets the `background-image` on the checked state of a Custom Checkbox.
custom-checkbox-indicator-icon-checked
Sets the `background-size` on the checked state of a Custom Checkbox.
custom-checkbox-indicator-icon-checked-bg-size
Custom Radio Indicator
Sets the `border-radius` of a Custom Radio.
custom-radio-indicator-border-radius
px/rem
Custom Radio Indicator Disabled
Sets the `border-color` on the unchecked disabled state of a Custom Radio.
custom-radio-indicator-disabled-border-color
Custom Radio Indicator Checked
Sets the `background-image` on the checked state of a Custom Radio.
custom-radio-indicator-icon-checked
Sets the `background-size` on the checked state of a Custom Radio.
custom-radio-indicator-icon-checked-bg-size
Custom Radio Indicator Checked Disabled
Sets the `border-color` on the checked disabled state of a Custom Radio.
custom-radio-indicator-disabled-checked-border-color
input
input group
Custom Checkbox
Unchecked
Checked
Indeterminate
Unchecked Disabled
Checked Disabled
Indeterminate Disabled
Custom Radio
Toggle this custom radio
Or toggle this other custom radio
Custom Controls Inline
Toggle this custom radio
Or toggle this other custom radio
input
input group