Alerts

mixins

alert-variant

Deprecated!

use the mixin clay-alert-variant instead

@mixin alert-variant($background, $border, $color) { ... }

Description

This is Bootstrap 4's Alert Variant Mixin.

Parameters

NameDescriptionTypeDefault value
$background—Color—
$border—Color—
$color—Color—

Requires

clay-alert-variant

@mixin clay-alert-variant($map) { ... }

Description

A mixin to create alert variants.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
	// .alert
	first-child: (
		// .alert:first-child
	),
	last-child: (
		// .alert:last-child
	),
	hr: (
		// .alert hr
	),
	alert-dismissible: (
		// .alert.alert-dismissible
		container-fluid: (
			// .alert.alert-dismissible .container, .alert.alert-dismissible .container-fluid
		),
	),
	alert-indicator: (
		// .alert .alert-indicator
		lexicon-icon: (
			// .alert .alert-indicator .lexicon-icon
		),
		lead: (
			// .alert .alert-indicator + .lead
		),
	),
	alert-btn: (
		// .alert .alert-btn
	),
	btn-group: (
		// .alert .btn-group
	),
	btn-group-item: (
		// .alert .btn-group-item
	),
	close: (
		// .alert .close
	),
	container-fluid: (
		// .alert .container, .alert .container-fluid
	),
	lead: (
		// .alert .lead
	),
	alert-link: (
		// .alert .alert-link
	),
	component-title: (
		// .alert .component-title
	),
	component-subtitle: (
		// .alert .component-subtitle
	),
	custom-selectors: (
		// add custom selectors here, see examples below
		btn-primary: (
			// .alert .btn-primary
		),
		btn-secondary: (
			// .alert .btn-secondary
		),
		'#custom-alert-btn': (
			// .alert #custom-alert-btn
		),
	),
)

Requires

Used by

variables

alert-close-font-size

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-font-size: 0.875rem !default;

alert-close-height

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-height: 2rem !default;

alert-close-line-height

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-line-height: null !default;

alert-close-opacity

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-opacity: null !default;

alert-close-margin-left

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-margin-left: null !default;

alert-close-padding-bottom

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-padding-bottom: 0 !default;

alert-close-padding-left

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-padding-left: 0 !default;

alert-close-padding-right

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-padding-right: 0 !default;

alert-close-padding-top

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-padding-top: 0 !default;

alert-close-position-right

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-position-right: 0.5rem !default;

alert-close-position-top

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-position-top: 0.75rem !default;

alert-close-width

Deprecated!

as of v2.12.0 use the Sass map $alert-close instead

$alert-close-width: $alert-close-height !default;

alert-fluid-border-bottom-width

Deprecated!

use the Sass map $alert-fluid instead

$alert-fluid-border-bottom-width: 1px !default;

alert-fluid-border-left-width

Deprecated!

use the Sass map $alert-fluid instead

$alert-fluid-border-left-width: 0 !default;

alert-fluid-border-right-width

Deprecated!

use the Sass map $alert-fluid instead

$alert-fluid-border-right-width: 0 !default;

alert-fluid-border-top-width

Deprecated!

use the Sass map $alert-fluid instead

$alert-fluid-border-top-width: 0 !default;

alert-fluid-border-width

Deprecated!

use the Sass map $alert-fluid instead

$alert-fluid-border-width: $alert-fluid-border-top-width
	$alert-fluid-border-right-width $alert-fluid-border-bottom-width
	$alert-fluid-border-left-width !default;

alert-fluid-container

Deprecated!

use the Sass map $alert-fluid instead

$alert-fluid-container: () !default;

alert-fluid-dismissible-container

Deprecated!

use the Sass map $alert-fluid instead

$alert-fluid-dismissible-container: () !default;

alert-fluid-close

Deprecated!

use the Sass map $alert-fluid instead

$alert-fluid-close: () !default;

alert-bg-level

Deprecated!

as of v3.x with no replacement, this color modifier is too specific to support a variety of colors

$alert-bg-level: -10 !default;

alert-border-level

Deprecated!

as of v3.x with no replacement, this color modifier is too specific to support a variety of colors

$alert-border-level: -9 !default;

alert-color-level

Deprecated!

as of v3.x with no replacement, this color modifier is too specific to support a variety of colors

$alert-color-level: 6 !default;

Aspect Ratio

mixins

clay-aspect-ratio

@mixin clay-aspect-ratio($width: 1, $height: 1) { ... }

Description

A mixin that sets the width to height ratio of an element using padding-bottom. This element must be position: relative and items nested inside this element must use position: absolute.

Parameters

NameDescriptionTypeDefault value
$width

The ratio width (e.g., 16)

Number1
$height

The ratio height (e.g., 9)

Number1

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-aspect-ratio-item-variant

@mixin clay-aspect-ratio-item-variant($map) { ... }

Description

A mixin that helps style a custom aspect-ratio-item component.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
bottom: {Number | String | Null},
color: {Color | String | Null},
display: {String | Null},
height: {Number | String | Null},
left: {Number | String | Null},
max-height: {Number | String | Null},
max-width: {Number | String | Null},
overflow: {String | Null},
position: {String | Null},
right: {Number | String | Null},
top: {Number | String | Null},
width: {Number | String | Null},
word-wrap: {String | Null},

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-aspect-ratio-variant

@mixin clay-aspect-ratio-variant($map) { ... }

Description

A mixin that styles an aspect ratio container.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
horizontal: {Number | Null}, // Sets the `clay-aspect-ratio` `$width` (e.g., 16)
vertical: {Number | Null}, // Sets the `clay-aspect-ratio` `$height` (e.g., 9)
lexicon-icon-height: {Number | String | Null}, // deprecated use Sass map `lexicon-icon` instead
lexicon-icon-margin-top: {Number | String | Null}, // deprecated use Sass map `lexicon-icon` instead
lexicon-icon-width: {Number | String | Null}, // deprecated use Sass map `lexicon-icon` instead

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

Badges

mixins

clay-badge-size

@mixin clay-badge-size($map) { ... }

Description

A mixin for creating custom badge sizes.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

border-width: {List | Number}, // Default: $badge-border-width
font-size: {Number | String | Null},
height: {Number | String | Null},
padding-x: {Number | String | Null},
padding-y: {Number | String}, // Default: 0
lexicon-icon-height: {Number | String | Null},
lexicon-icon-margin-top: {Number | String | Null},
lexicon-icon-width: {Number | String | Null},

Requires

TODO's

    • Update or Deprecate this mixin in favor of a clay-badge-variant mixin

badge-variant

@mixin badge-variant() { ... }

Description

Bootstrap 4's Badge Variant Mixin

Parameters

None.

Requires

Breakpoints

mixins

media-breakpoint-up

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { ... }

Description

A Bootstrap 4 mixin that outputs a minimum width media query based on the $grid-breakpoints Sass map. The output is not wrapped in a media query if the minimum value is 0.

Parameters

NameDescriptionTypeDefault value
$name

The breakpoint name or keys in $grid-breakpoints (e.g., xs, sm, md, lg, xl)

Key—
$breakpoints

A map that defines the breakpoints

Map$grid-breakpoints

Requires

Used by

media-breakpoint-down

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { ... }

Description

A Bootstrap 4 mixin that outputs a maximum width media query based on the $grid-breakpoints Sass map. The output is not wrapped in a media query if $name is the last breakpoint in $breakpoints.

Parameters

NameDescriptionTypeDefault value
$name

The breakpoint name or keys in $grid-breakpoints(e.g., xs, sm, md, lg, xl)

Key—
$breakpoints

A map that defines the breakpoints

Map$grid-breakpoints

Requires

Used by

media-breakpoint-between

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { ... }

Description

A Bootstrap 4 mixin that outputs a minimum and maximum width media query based on the $grid-breakpoints Sass map. If the minimum width breakpoint exists and the maximum width breakpoint is null, this outputs a maximum width media query. If the minimum width breakpoint is null and the maximum width breakpoint exists, a minimum width breakpoint is output.

Parameters

NameDescriptionTypeDefault value
$lower

The lower bound breakpoint name or keys in $grid-breakpoints (e.g., xs, sm, md, lg, xl)

Key—
$upper

The upper bound breakpoint name or keys in $grid-breakpoints (e.g., xs, sm, md, lg, xl)

Key—
$breakpoints

A map that defines the breakpoints

Map$grid-breakpoints

Requires

media-breakpoint-only

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { ... }

Description

A Bootstrap 4 mixin that outputs a minimum and maximum width media query based on the $grid-breakpoints Sass map. No minimum for the smallest breakpoint, and no maximum for the largest one.

Parameters

NameDescriptionTypeDefault value
$name

The breakpoint name or keys in $grid-breakpoints (e.g., xs, sm, md, lg, xl)

Key—
$breakpoints

A map that defines the breakpoints

Map$grid-breakpoints

Requires

Buttons

mixins

clay-button-size

Deprecated!

use the mixin clay-button-variant instead

@mixin clay-button-size($map) { ... }

Description

A mixin that helps create custom button sizes

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs.

Map—

Requires

clay-button-variant

@mixin clay-button-variant($map) { ... }

Description

A mixin to create button variants, use this instead of clay-button-size(). You can base your variant off Bootstrap's .btn class or create your own base class (e.g., <button class="btn my-custom-btn-primary"></button> or <button class="my-custom-btn my-custom-btn-primary"></button>).

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
	breakpoint-down: {String}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
	loading-animation: {String}, // The placeholder name 'loading-animation' or 'loading-animation-light'
	mobile: (
		c-inner: (
		),
	),
	before: (
		// .btn::before
	),
	after: (
		// .btn::after
	),
	hover: (
		// .btn:hover
		before: (
			// .btn:hover::before
		),
		after: (
			// .btn:hover::after
		),
		inline-item: (
			// .btn:hover .inline-item
		),
		inline-item:-before (
			// .btn:hover .inline-item-before
		),
		inline-item-middle: (
			// .btn:hover .inline-item-middle
		),
		inline-item-after: (
			// .btn:hover .inline-item-after
		),
	),
	focus: (
		// .btn:focus, .btn.focus
		before: (
			// .btn:focus::before
		),
		after: (
			// .btn:focus::after
		),
		inline-item: (
			// .btn:focus .inline-item
		),
		inline-item:-before (
			// .btn:focus .inline-item-before
		),
		inline-item-middle: (
			// .btn:focus .inline-item-middle
		),
		inline-item-after: (
			// .btn:focus .inline-item-after
		),
	),
	active: (
		// .btn:active
		before: (
			// .btn:active::before
		),
		after: (
			// .btn:active::after
		),
		focus: (
			// .btn:active:focus
			before: (
				// .btn:active:focus::before
			),
			after: (
				// .btn:active:focus::after
			),
		),
		inline-item: (
			// .btn:active .inline-item
		),
		inline-item:-before (
			// .btn:active .inline-item-before
		),
		inline-item-middle: (
			// .btn:active .inline-item-middle
		),
		inline-item-after: (
			// .btn:active .inline-item-after
		),
	),
	active-class: (
		// .btn.active
		before: (
			// .btn.active::before
		),
		after: (
			// .btn.active::after
		),
		inline-item: (
			// .btn.active .inline-item
		),
		inline-item:-before (
			// .btn.active .inline-item-before
		),
		inline-item-middle: (
			// .btn.active .inline-item-middle
		),
		inline-item-after: (
			// .btn.active .inline-item-after
		),
	),
	disabled: (
		// .btn:disabled, .btn.disabled
		before: (
			// .btn:disabled::before, .btn.disabled::before
		),
		after: (
			// .btn:disabled::after, .btn.disabled::after
		),
		focus: (
			// .btn:disabled:focus, .btn.disabled:focus
			before: (
				// .btn:disabled:focus::before, .btn.disabled:focus::before
			),
			after: (
				// .btn:disabled:focus::after, .btn.disabled:focus::after
			),
		),
		active: (
			// .btn:disabled:active, .btn.disabled:active
			before: (
				// .btn:disabled:active::before, .btn.disabled:active::before
			),
			after: (
				// .btn:disabled:active::after, .btn.disabled:active::after
			),
		),
		inline-item: (
			// .btn:disabled .inline-item, .btn.disabled .inline-item
		),
		inline-item:-before (
			// .btn:disabled .inline-item-before, .btn.disabled .inline-item-before
		),
		inline-item-middle: (
			// .btn:disabled .inline-item-middle, .btn.disabled .inline-item-middle
		),
		inline-item-after: (
			// .btn:disabled .inline-item-after, .btn.disabled .inline-item-after
		),
	),
	show: (
		// .btn[aria-expanded='true'], .btn.show
		before: (
			// .btn[aria-expanded='true']::before, .btn.show::before
		),
		after: (
			// .btn[aria-expanded='true']::after, .btn.show::after
		),
	),
	c-inner: (
		// .btn .c-inner
	),
	lexicon-icon: (
		// .btn .lexicon-icon
	),
	inline-item: (
		// .btn .inline-item
	),
	inline-item-before: (
		// .btn .inline-item-before
	),
	inline-item-middle: (
		// .btn .inline-item-middle
		inline-item-middle: (
			// .btn .inline-item-middle + .inline-item-middle
		),
	),
	inline-item-after: (
		// .btn .inline-item-after
	),
	btn-section: (
		// .btn .btn-section
	),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null}, // deprecated after 3.9.0
hover-bg: {Color | String | Null}, // deprecated after 3.9.0
hover-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
hover-color: {Color | String | Null}, // deprecated after 3.9.0
hover-opacity: {Number | String | Null}, // deprecated after 3.9.0
hover-text-decoration: {String | Null}, // deprecated after 3.9.0
hover-z-index: {Number | String | Null}, // deprecated after 3.9.0
focus-bg: {Color | String | Null}, // deprecated after 3.9.0
focus-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
focus-box-shadow: {String | List | Null}, // deprecated after 3.9.0
focus-color: {Color | String | Null}, // deprecated after 3.9.0
focus-opacity: {Number | String | Null}, // deprecated after 3.9.0
focus-outline: {Number | String | Null}, // deprecated after 3.9.0
focus-z-index: {Number | String | Null}, // deprecated after 3.9.0
disabled-bg: {Color | String | Null}, // deprecated after 3.9.0
disabled-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
disabled-box-shadow: {String | List | Null}, // deprecated after 3.9.0
disabled-color: {Color | String | Null}, // deprecated after 3.9.0
disabled-cursor: {String | Null}, // deprecated after 3.9.0
disabled-opacity: {Number | String | Null}, // deprecated after 3.9.0
disabled-z-index: {Number | String | Null}, // deprecated after 3.9.0
active-bg: {Color | String | Null}, // deprecated after 3.9.0
active-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
active-box-shadow: {String | List | Null}, // deprecated after 3.9.0
active-color: {Color | String | Null}, // deprecated after 3.9.0
active-opacity: {Number | String | Null}, // deprecated after 3.9.0
active-z-index: {Number | String | Null}, // deprecated after 3.9.0
active-focus-box-shadow: {String | List}, // deprecated after 3.9.0, Default: $focus-box-shadow
active-focus: {Map | Null}, // deprecated after 3.39.0
lexicon-icon-font-size: {Number | String | Null}, // deprecated after 3.9.0
lexicon-icon-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
lexicon-icon-margin-right: {Number | String | Null}, // deprecated after 3.9.0
lexicon-icon-margin-left: {Number | String | Null}, // deprecated after 3.9.0
lexicon-icon-margin-top: {Number | String | Null}, // deprecated after 3.9.0
inline-item-font-size: {Number | String | Null}, // deprecated after 3.9.0
section-font-size: {Number | String | Null}, // deprecated after 3.9.0
section-font-weight: {Number | String | Null}, // deprecated after 3.9.0
section-line-height: {Number | String | Null}, // deprecated after 3.9.0
section: {Map | Null}, // deprecated after 3.39.0
font-size-mobile: {Number | String | Null}, // deprecated after 3.9.0
height-mobile: {Number | String | Null}, // deprecated after 3.9.0
padding-bottom-mobile: {Number | String | Null}, // deprecated after 3.9.0
padding-left-mobile: {Number | String | Null}, // deprecated after 3.9.0
padding-right-mobile: {Number | String | Null}, // deprecated after 3.9.0
padding-top-mobile: {Number | String | Null}, // deprecated after 3.9.0
width-mobile: {Number | String | Null}, // deprecated after 3.9.0

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

button-variant

Deprecated!

use the mixin clay-button-variant instead

@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { ... }

Description

Bootstrap 4's Button Variant Mixin. This is deprecated use the mixin clay-button-variant instead.

Parameters

NameDescriptionTypeDefault value
$background—Color—
$border—Color—
$hover-background—Colordarken($background, 7.5%)
$hover-border—Colordarken($border, 10%)
$active-background—Colordarken($background, 10%)
$active-border—Colordarken($border, 12.5%)

Requires

button-outline-variant

Deprecated!

use the mixin clay-button-variant instead

@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { ... }

Description

Bootstrap 4's Button Outline Variant Mixin. This is deprecated use the mixin clay-button-variant instead.

Parameters

NameDescriptionTypeDefault value
$color—Color—
$color-hover—Colorcolor-yiq($color)
$active-background—Color$color
$active-border—Color$color

Requires

button-size

Deprecated!

use the mixin clay-button-variant instead

@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { ... }

Description

This is Bootstrap 4's Button Size Mixin. This is deprecated use the mixin clay-button-variant instead.

Parameters

NameDescriptionTypeDefault value
$padding-y—Number—
$padding-x—Number—
$font-size—Number—
$line-height—Number—
$border-radius—Number—

Cards

mixins

clay-card-section-variant

@mixin clay-card-section-variant($map) { ... }

Description

A mixin that styles a Card Section (e.g., .card-header, .card-body, .card-footer or .card-row). This mixin is used by clay-card-variant.

Parameters

NameDescriptionTypeDefault value
$map

A map of key-value pairs. The keys are defined in the mixin. Example below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
	// .card-section
	before: (
		// .card-section::before
	),
	after: (
		// .card-section::after
	),
	first-child: (
		// .card-section:first-child
	),
	last-child: (
		// .card-section:last-child
	),
	autofit-col: (
		// .card-section .autofit-col
	),

)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null}, // deprecated after 3.9.0
autofit-col-padding-left: {Number | String | Null},
autofit-col-padding-right: {Number | String | Null},

Requires

Used by

clay-card-variant

@mixin clay-card-variant($map) { ... }

Description

A mixin that styles a custom Card.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
	hover: (
		// .card:hover, .card.hover
		after: (
			// .card:hover::after, .card.hover::after
		),
		card-title: (
			// .card:hover .card-title, .card.hover .card-title
		),
		card-subtitle: (
			// .card:hover .card-subtitle, .card.hover .card-subtitle
		),
		card-text: (
			// .card:hover .card-text, .card.hover .card-text
		),
		card-link: (
			// .card:hover .card-link, .card.hover .card-link
		),
	),
	focus: (
		// .card:focus, .card.focus
		after: (
			// .card:focus::after, .card.focus::after
		),
		card-title: (
			// .card:focus .card-title, .card.focus .card-title
		),
		card-subtitle: (
			// .card:focus .card-subtitle, .card.focus .card-subtitle
		),
		card-text: (
			// .card:focus .card-text, .card.focus .card-text
		),
		card-link: (
			// .card:focus .card-link, .card.focus .card-link
		),
	),
	active: (
		// .card:active, .card.active
		after: (
			// .card:active::after, .card.active::after
		),
		card-title: (
			// .card:active .card-title, .card.active .card-title
		),
		card-subtitle: (
			// .card:active .card-subtitle, .card.active .card-subtitle
		),
		card-text: (
			// .card:active .card-text, .card.active .card-text
		),
		card-link: (
			// .card:active .card-link, .card.active .card-link
		),
	),
	disabled: (
		// .card:disabled, .card.disabled
		after: (
			// .card:disabled::after, .card.disabled::after
		),
		card-title: (
			// .card:disabled .card-title, .card.disabled .card-title
		),
		card-subtitle: (
			// .card:disabled .card-subtitle, .card.disabled .card-subtitle
		),
		card-text: (
			// .card:disabled .card-text, .card.disabled .card-text
		),
		card-link: (
			// .card:disabled .card-link, .card.disabled .card-link
		),
	),
	after: (
		// .card::after
	),
	aspect-ratio: (
		// .card .aspect-ratio
		custom-control: (
			label: (
				// .card .custom-control label, .card .form-check-label
			),
		),
		label: (
			// .card .aspect-ratio .label
		),
	),
	aspect-ratio-item: (
		// .card .aspect-ratio-item
	),
	aspect-ratio-item-top-left: (
		// .card .aspect-ratio-item-top-left
	),
	aspect-ratio-item-top-center: (
		// .card .aspect-ratio-item-top-center
	),
	aspect-ratio-item-top-right: (
		// .card .aspect-ratio-item-top-right
	),
	aspect-ratio-item-right-middle: (
		// .card .aspect-ratio-item-right-middle
	),
	aspect-ratio-item-bottom-right: (
		// .card .aspect-ratio-item-bottom-right
	),
	aspect-ratio-item-bottom-center: (
		// .card .aspect-ratio-item-bottom-center
	),
	aspect-ratio-item-bottom-left: (
		// .card .aspect-ratio-item-bottom-left
	),
	hr: (
		// .card > hr
		before: (
			// .card > hr::before
		),
		after: (
			// .card > hr::after
		),
	),
	sticker: (
		// .card .sticker
	),
	card: (
		// .card .card
	),
	card-header: (
		// .card .card-header
	),
	card-body: (
		// .card .card-body
	),
	card-footer: (
		// .card .card-footer
	),
	card-row: (
		// .card .card-row
		autofit-col: (
			// .card .card-row .autofit-col
		),
	),
	card-title: (
		// .card .card-title
	),
	card-subtitle: (
		// .card .card-subtitle
	),
	card-text: (
		// .card .card-text
	),
	card-link: (
		// .card .card-link
	),
	card-divider: (
		// .card .card-divider
	),
	card-type-asset-icon: (
		// .card .card-type-asset-icon
		inline-item: (
			// .card .card-type-asset-icon .inline-item
		),
		lexicon-icon: (
			// .card .card-type-asset-icon > .lexicon-icon
		),
		sticker: (
			// .card .card-type-asset-icon > .sticker
			sticker-overlay: (
				// .card .card-type-asset-icon > .sticker .sticker-overlay
			),
		),
	),
	dropdown-action: (
		// .card .dropdown-action
	),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null},
hover-bg: {Color | String | Null},
hover-border-color: {Color | String | List | Null},
hover-box-shadow: {String | List | Null},
hover-color: {Color | String | Null},
hover-text-decoration: {String | Null},
hover-card-title: {Map | Null},
hover-card-subtitle: {Map | Null},
hover-card-text: {Map | Null},
hover-card-link: {Map | Null},
focus-bg: {Color | String | Null},
focus-border-color: {Color | String | List | Null},
focus-box-shadow: {String | List | Null},
focus-color: {Color | String | Null},
focus-text-decoration: {String | Null},
focus-card-title: {Map | Null},
focus-card-subtitle: {Map | Null},
focus-card-text: {Map | Null},
focus-card-link: {Map | Null},
active-bg: {Color | String | Null},
active-border-color: {Color | String | List | Null},
active-color: {Color | String | Null},
active-card-title: {Map | Null},
active-card-subtitle: {Map | Null},
active-card-text: {Map | Null},
active-card-link: {Map | Null},
after-highlight: {Map | Null},

Requires

Used by

clay-card-type-asset

Deprecated!

use the mixin clay-card-variant instead

@mixin clay-card-type-asset($map) { ... }

Description

A mixin for creating the base component .card-type-asset that is used with .image-card, .file-card, .user-card.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
aspect-ratio-border-color: {Color | String | List | Null}, // Default: $card-border-color
aspect-ratio-border-style: {String | List | Null}, // Default: solid
aspect-ratio-border-bottom-width: {Number | List | Null}, // deprecated as of v2.5.1 use `aspect-ratio-border-width` instead. Default: 0 0 0.0625rem 0
aspect-ratio-border-width: {Number | List | Null}, // Default: $aspect-ratio-border-width
aspect-ratio-horizontal: {Number | Null}, // Sets the `clay-aspect-ratio` `$width`. Default: 16
aspect-ratio-vertical: {Number | Null}, // Sets the `clay-aspect-ratio` `$height`. Default: 9
card-body-padding-bottom: {Number | String | Null},
card-body-padding-left: {Number | String | Null},
card-body-padding-right: {Number | String | Null},
card-body-padding-top: {Number | String | Null},
card-row-align-items: {String | Null}, // Default: flex-start
checkbox-cursor: {String | Null}, // Default: $link-cursor
asset-icon-color: {Color | String | Null},
asset-icon-width: {Number | String | Null}, // Default: 22.225%
asset-icon-sticker-border-radius: {Number | List | Null}, // Default: 50%
asset-icon-sticker-font-size: {Number | String | Null}, // Default: 2vw
dropdown-action-offset-bottom: {Number | String | Null},
dropdown-action-offset-left: {Number | String | Null},
dropdown-action-offset-right: {Number | String | Null}, // Default: -0.5rem
dropdown-action-offset-top: {Number | String | Null}, // Default: -0.1875rem

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-card-type-asset-variant

Deprecated!

use the mixin clay-card-variant instead

@mixin clay-card-type-asset-variant($map) { ... }

Description

A mixin to create .card-type-asset variants. This mixin is used by .image-card, .file-card, .user-card.

Parameters

NameDescriptionTypeDefault value
$map

A map of key-value pairs. The keys are defined in the mixin. Example below:

Map—

Example

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
aspect-ratio-bg: {Color | String | Null},
aspect-ratio-checkered-fg: {Color | Null}, // Pass parameter to `clay-bg-checkered` mixin
aspect-ratio-checkered-bg: {Color},
asset-icon-color: {Color | String | Null},
asset-icon-max-width: {Number | String | Null},
asset-icon-min-width: {Number | String | Null},
asset-icon-width: {Number | String | Null},
asset-icon-lexicon-icon-height: {Number | String | Null},
asset-icon-lexicon-icon-width: {Number | String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-card-type-directory

Deprecated!

use the mixin clay-card-variant instead

@mixin clay-card-type-directory($map) { ... }

Description

A mixin for creating the base component .card-type-directory.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
card-body-padding-bottom: {Number | String | Null},
card-body-padding-left: {Number | String | Null},
card-body-padding-right: {Number | String | Null},
card-body-padding-top: {Number | String | Null},
sticker-font-size: {Number | String | Null},
sticker-line-height: {Number | String | Null},
sticker-size: {Number | String | Null},
dropdown-action-offset-bottom: {Number | String | Null},
dropdown-action-offset-left: {Number | String | Null},
dropdown-action-offset-right: {Number | String | Null}, // Default: -0.5rem
dropdown-action-offset-top: {Number | String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-form-check-card-variant

@mixin clay-form-check-card-variant($map) { ... }

Description

A mixin to help create form-check-card variants.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
	// .form-check-card
	hover: (
		// .form-check-card:hover
		card: (
			// .form-check-card:hover .card
			//     @include clay-card-variant();
		),
	),
	focus: (
		// .form-check-card.focus
		card: (
			// .form-check-card.focus .card
			//     @include clay-card-variant();
		),
	),
	active: (
		// .form-check-card.active
		card: (
			// .form-check-card.active .card
			//     @include clay-card-variant();
		),
	),
	checked: (
		// .form-check-card.checked
		card: (
			// .form-check-card.checked .card
			//     @include clay-card-variant();
		),
	),
	indeterminate: (
		// .form-check-card.indeterminate
		card: (
			// .form-check-card.indeterminate .card
			//     @include clay-card-variant();
		),
	),
	card: (
		// .form-check-card .card
		//     @include clay-card-variant();
	),
	form-check-input: (
		// .form-check-card .form-check-input
	),
	form-check-label: (
		// .form-check-card .form-check-label
	),
	custom-control: (
		// .form-check-card .custom-control
		//     @include clay-custom-control-variant();
	),
)

Requires

Used by

Caret

mixins

caret-down

Deprecated!
@mixin caret-down() { ... }

Description

Bootstrap 4's Caret Down Mixin. This is deprecated and will be removed.

Parameters

None.

Requires

Used by

caret-up

Deprecated!
@mixin caret-up() { ... }

Description

Bootstrap 4's Caret Up Mixin. This is deprecated and will be removed.

Parameters

None.

Requires

Used by

caret-right

Deprecated!
@mixin caret-right() { ... }

Description

Bootstrap 4's Caret Right Mixin. This is deprecated and will be removed.

Parameters

None.

Requires

Used by

caret-left

Deprecated!
@mixin caret-left() { ... }

Description

Bootstrap 4's Caret Left Mixin. This is deprecated and will be removed.

Parameters

None.

Requires

Used by

caret

Deprecated!
@mixin caret($direction) { ... }

Description

Bootstrap 4's Caret Mixin. This is deprecated and will be removed.

Parameters

NameDescriptionTypeDefault value
$direction

up, down, left, or right

String—

Requires

Clearfix

mixins

clearfix

Deprecated!
@mixin clearfix() { ... }

Description

Bootstrap 4's Clearfix Mixin. This is deprecated and will be removed.

Parameters

None.

deprecate

@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { ... }

Description

Bootstrap 4's Deprecate Mixin. This mixin can be used to deprecate mixins or functions. $enable-deprecation-messages is a global variable, $ignore-warning is a variable that can be passed to some deprecated mixins to suppress the warning

Parameters

NameDescriptionTypeDefault value
$name

The name of the function or mixin

String—
$deprecate-version

The version of the project where the item was deprecated

String—
$remove-version

The version of the project where the item will be removed

String—
$ignore-warning

Optional boolean parameter to suppress warning message

Boolfalse

Used by

colors

functions

clay-color-functions-process-fallback

@function clay-color-functions-process-fallback() { ... }

Description

A function that checks if the user prefers having Sass process CSS Custom Property fallback colors or if they prefer returning the CSS Custom Property as is. It returns false if the variables $enable-clay-color-functions-process-fallback and $cadmin-enable-clay-color-functions-process-fallback do not exist.

Parameters

None.

Requires

is-css-var

@function is-css-var($var) { ... }

Description

A function that checks the value of a Sass variable and returns true if the value is a CSS Custom Property.

Parameters

NameDescriptionTypeDefault value
$var

The variable to check

Color or List or Map or Null or Number or String—

Used by

clay-darken

@function clay-darken($color, $amount, $fallback: $enable-clay-color-functions-process-fallback) { ... }

Description

An alias for the Sass darken function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.

Parameters

NameDescriptionTypeDefault value
$color

The color to darken

Color—
$amount

A number between 0% and 100%

Number—
$fallback

Force Sass to process the CSS Custom Property fallback colors

Bool$enable-clay-color-functions-process-fallback

Requires

Used by

clay-lighten

@function clay-lighten($color, $amount, $fallback: $enable-clay-color-functions-process-fallback) { ... }

Description

An alias for the Sass lighten function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.

Parameters

NameDescriptionTypeDefault value
$color

The color to lighten

Color—
$amount

A number between 0% and 100%

Number—
$fallback

Force Sass to process the CSS Custom Property fallback colors

Bool$enable-clay-color-functions-process-fallback

Requires

Used by

clay-adjust-hue

@function clay-adjust-hue($color, $degrees, $fallback: $enable-clay-color-functions-process-fallback) { ... }

Description

An alias for the Sass adjust-hue function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.

Parameters

NameDescriptionTypeDefault value
$color

The color to adjust

Color—
$degrees

A number between -360deg and 360deg

Number—
$fallback

Force Sass to process the CSS Custom Property fallback colors

Bool$enable-clay-color-functions-process-fallback

Requires

clay-desaturate

@function clay-desaturate($color, $amount, $fallback: $enable-clay-color-functions-process-fallback) { ... }

Description

An alias for the Sass desaturate function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.

Parameters

NameDescriptionTypeDefault value
$color

The color to desaturate

Color—
$amount

A number between 0% and 100%

Number—
$fallback

Force Sass to process the CSS Custom Property fallback colors

Bool$enable-clay-color-functions-process-fallback

Requires

clay-saturate

@function clay-saturate($color, $amount, $fallback: $enable-clay-color-functions-process-fallback) { ... }

Description

An alias for the Sass saturate function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.

Parameters

NameDescriptionTypeDefault value
$color

The color to saturate

Color—
$amount

A number between 0% and 100%

Number—
$fallback

Force Sass to process the CSS Custom Property fallback colors

Bool$enable-clay-color-functions-process-fallback

Requires

clay-mix

@function clay-mix($color1, $color2, $weight, $fallback: $enable-clay-color-functions-process-fallback) { ... }

Description

An alias for the Sass mix function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.

Parameters

NameDescriptionTypeDefault value
$color1

The first color to mix

Color—
$color2

The second color to mix

Color—
$weight

A number between 0% and 100%

Number—
$fallback

Force Sass to process the CSS Custom Property fallback colors

Bool$enable-clay-color-functions-process-fallback

Requires

Used by

clay-blue

@function clay-blue($color, $fallback: $enable-clay-color-functions-process-fallback) { ... }

Description

An alias for the Sass blue function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.

Parameters

NameDescriptionTypeDefault value
$color

The color to get the blue channel from

Color—
$fallback

Force Sass to process the CSS Custom Property fallback colors

Bool$enable-clay-color-functions-process-fallback

Requires

Used by

clay-green

@function clay-green($color, $fallback: $enable-clay-color-functions-process-fallback) { ... }

Description

An alias for the Sass green function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.

Parameters

NameDescriptionTypeDefault value
$color

The color to get the green channel from

Color—
$fallback

Force Sass to process the CSS Custom Property fallback colors

Bool$enable-clay-color-functions-process-fallback

Requires

Used by

clay-red

@function clay-red($color, $fallback: $enable-clay-color-functions-process-fallback) { ... }

Description

An alias for the Sass red function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.

Parameters

NameDescriptionTypeDefault value
$color

The color to get the red channel from

Color—
$fallback

Force Sass to process the CSS Custom Property fallback colors

Bool$enable-clay-color-functions-process-fallback

Requires

Used by

Custom Forms

mixins

clay-custom-control-input-variant

@mixin clay-custom-control-input-variant($map) { ... }

Description

A mixin to help create custom-control-input variants.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

$var: (
    enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
    custom-control-label: ( // N/A
        before: (), // Pseudo element that contains the checkbox/radio
        after: (), // Pseudo element that contains the checkbox/radio icon
    ),
    hover: ( // N/A
        custom-control-label: ( // N/A
            before: (),
            after: (),
        ),
    ),
    focus: ( // N/A
        custom-control-label: ( // N/A
            before: (),
            after: (),
        ),
    ),
    active: ( // N/A
        custom-control-label: ( // N/A
            before: (),
            after: (),
        ),
    ),
    disabled: (
        // &:disabled
        custom-control-label: (
            // &:disabled ~ .custom-control-label
            before: (),
            after: (),
        ),
    ),
    checked: ( // N/A
        custom-control-label: ( // N/A
            before: (),
            after: (),
        ),
        hover: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
        focus: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
        active: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
        disabled: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
    ),
    indeterminate: ( // N/A
        custom-control-label: ( // N/A
            before: (),
            after: (),
        ),
        hover: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
        focus: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
        active: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
        disabled: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
    ),
);

Requires

Used by

clay-custom-control-variant

@mixin clay-custom-control-variant($map) { ... }

Description

A mixin to help create custom-control variants. This is used by custom-checkbox and custom-radio.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

$var: (
    enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
    label: (
        // .your-variant-name label
    ),
    custom-control-label: (
        before: (), // Pseudo element that contains the checkbox/radio
        after: (), // Pseudo element that contains the checkbox/radio icon
    ),
    custom-control-label-text: (
        // .your-variant-name .custom-control-label-text
        small: (
            // .your-variant-name .custom-control-label-text small,
            // .your-variant-name .custom-control-label-text .small
        ),
    ),
    custom-control-input: (
        // The map `custom-control-input` is passed to the `clay-custom-control-input-variant` mixin.
        // .your-variant-name .custom-control-input
        enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
        custom-control-label: ( // N/A
            before: (),
            after: (),
        ),
        hover: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
        focus: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
        active: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
        ),
        disabled: (
            // &:disabled
            custom-control-label: (
                // &:disabled ~ .custom-control-label
                before: (),
                after: (),
            ),
        ),
        checked: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
            hover: ( // N/A
                custom-control-label: ( // N/A
                    before: (),
                    after: (),
                ),
            ),
            focus: ( // N/A
                custom-control-label: ( // N/A
                    before: (),
                    after: (),
                ),
            ),
            active: ( // N/A
                custom-control-label: ( // N/A
                    before: (),
                    after: (),
                ),
            ),
            disabled: ( // N/A
                custom-control-label: ( // N/A
                    before: (),
                    after: (),
                ),
            ),
        ),
        indeterminate: ( // N/A
            custom-control-label: ( // N/A
                before: (),
                after: (),
            ),
            hover: ( // N/A
                custom-control-label: ( // N/A
                    before: (),
                    after: (),
                ),
            ),
            focus: ( // N/A
                custom-control-label: ( // N/A
                    before: (),
                    after: (),
                ),
            ),
            active: ( // N/A
                custom-control-label: ( // N/A
                    before: (),
                    after: (),
                ),
            ),
            disabled: ( // N/A
                custom-control-label: ( // N/A
                    before: (),
                    after: (),
                ),
            ),
        ),
    ),
);

Requires

Used by

variables

custom-control-indicator-active-checked-bg

Deprecated!

as of v2.2.1 use $custom-control-indicator-checked-active-bg instead

$custom-control-indicator-active-checked-bg: null !default;

custom-control-indicator-active-checked-border-color

Deprecated!

as of v2.2.1 use $custom-control-indicator-checked-active-border-color instead

$custom-control-indicator-active-checked-border-color: null !default;

custom-control-indicator-disabled-checked-bg

Deprecated!

as of v2.2.1 use $custom-control-indicator-checked-disabled-bg instead

$custom-control-indicator-disabled-checked-bg: rgba($primary, 0.5) !default;

custom-control-indicator-disabled-checked-border-color

Deprecated!

as of v2.2.1 use $custom-control-indicator-checked-disabled-border-color instead

$custom-control-indicator-disabled-checked-border-color: null !default;

custom-control-margin-bottom

Deprecated!

after of v3.5.0 use the Sass map $custom-control instead

$custom-control-margin-bottom: null !default;

custom-control-margin-top

Deprecated!

after of v3.5.0 use the Sass map $custom-control instead

$custom-control-margin-top: null !default;

custom-control-min-height

Deprecated!

after of v3.5.0 use the Sass map $custom-control instead

$custom-control-min-height: $custom-control-indicator-size +
	($custom-control-indicator-position-top * 2) !default;

custom-control-description-cursor

Deprecated!

as of v2.19.0 use the Sass map $custom-control-label instead

$custom-control-description-cursor: if(
	variable-exists(form-check-label-cursor),
	$form-check-label-cursor,
	$link-cursor
) !default;

custom-control-description-font-size

Deprecated!

as of v2.19.0 use the Sass map $custom-control-label instead

$custom-control-description-font-size: 1rem !default;

custom-control-description-font-weight

Deprecated!

as of v2.19.0 use the Sass map $custom-control-label instead

$custom-control-description-font-weight: null !default;

custom-control-description-line-height

Deprecated!

as of v2.19.0 use the Sass map $custom-control-label instead

$custom-control-description-line-height: $custom-control-min-height !default;

custom-control-description-padding-left

Deprecated!

as of v2.19.0 use the Sass map $custom-control-label-text instead

$custom-control-description-padding-left: 0.5rem !default;

custom-control-description-disabled-cursor

Deprecated!

as of v2.19.0 use the Sass map $custom-control-label-disabled instead

$custom-control-description-disabled-cursor: $disabled-cursor !default;

custom-control-description-small-font-size

Deprecated!

as of v2.19.0 use the Sass map $custom-control-label-text-small instead

$custom-control-description-small-font-size: null !default;

custom-radio-indicator-disabled-checked-border-color

Deprecated!

as of v2.2.1 use $custom-radio-indicator-checked-disabled-border-color instead

$custom-radio-indicator-disabled-checked-border-color: null !default;

custom-switch-width

Deprecated!

as of v3.x with no replacement

$custom-switch-width: $custom-control-indicator-size * 1.75 !default;

custom-switch-indicator-border-radius

Deprecated!

as of v3.x with no replacement

$custom-switch-indicator-border-radius: $custom-control-indicator-size * 0.5 !default;

custom-switch-indicator-size

Deprecated!

as of v3.x with no replacement

$custom-switch-indicator-size: $custom-control-indicator-size -
	($custom-control-indicator-border-width * 4) !default;

custom-select-bg

Deprecated!

as of v3.x with no replacement

$custom-select-bg: if(variable-exists(input-bg), $input-bg, $white) !default;

Used by

custom-select-bg-size

Deprecated!

as of v3.x with no replacement

$custom-select-bg-size: 8px 10px !default;

custom-select-border-color

Deprecated!

as of v3.x with no replacement

$custom-select-border-color: if(
	variable-exists(input-border-color),
	$input-border-color,
	$gray-400
) !default;

custom-select-border-radius

Deprecated!

as of v3.x with no replacement

$custom-select-border-radius: $border-radius !default;

custom-select-border-width

Deprecated!

as of v3.x with no replacement

$custom-select-border-width: if(
	variable-exists(input-border-width),
	$input-border-width,
	0.0625rem
) !default;

custom-select-box-shadow

Deprecated!

as of v3.x with no replacement

$custom-select-box-shadow: inset 0 1px 2px rgba($black, 0.075) !default;

custom-select-color

Deprecated!

as of v3.x with no replacement

$custom-select-color: if(
	variable-exists(input-color),
	$input-color,
	$gray-700
) !default;

custom-select-font-family

Deprecated!

as of v3.x with no replacement

$custom-select-font-family: if(
	variable-exists(input-font-family),
	$input-font-family,
	null
) !default;

custom-select-font-size

Deprecated!

as of v3.x with no replacement

$custom-select-font-size: if(
	variable-exists(input-font-size),
	$input-font-size,
	$font-size-base
) !default;

custom-select-font-weight

Deprecated!

as of v3.x with no replacement

$custom-select-font-weight: if(
	variable-exists(input-font-weight),
	$input-font-weight,
	$font-weight-base
) !default;

custom-select-height

Deprecated!

as of v3.x with no replacement

$custom-select-height: if(
	variable-exists(input-height),
	$input-height,
	2.375rem
) !default;

custom-select-indicator-padding

Deprecated!

as of v3.x with no replacement

$custom-select-indicator-padding: 1rem !default;

custom-select-line-height

Deprecated!

as of v3.x with no replacement

$custom-select-line-height: if(
	variable-exists(input-line-height),
	$input-line-height,
	$line-height-base
) !default;

custom-select-padding-x

Deprecated!

as of v3.x with no replacement

$custom-select-padding-x: if(
	variable-exists(input-padding-x),
	$input-padding-x,
	0.75rem
) !default;

custom-select-padding-y

Deprecated!

as of v3.x with no replacement

$custom-select-padding-y: if(
	variable-exists(input-padding-y),
	$input-padding-y,
	0.375rem
) !default;

custom-select-indicator-color

Deprecated!

as of v3.x with no replacement

$custom-select-indicator-color: $gray-800 !default;

custom-select-indicator

Deprecated!

as of v3.x with no replacement

$custom-select-indicator: clay-svg-url(
	"<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>"
) !default;

custom-select-background

Deprecated!

as of v3.x with no replacement

$custom-select-background: $custom-select-indicator no-repeat right
	$custom-select-padding-x center / $custom-select-bg-size !default;

Used by

custom-select-focus-border-color

Deprecated!

as of v3.x with no replacement

$custom-select-focus-border-color: if(
	variable-exists(input-focus-border-color),
	$input-focus-border-color,
	clay-lighten($component-active-bg, 25%)
) !default;

custom-select-focus-width

Deprecated!

as of v3.x with no replacement

$custom-select-focus-width: if(
	variable-exists(input-focus-width),
	$input-focus-width,
	0.2rem
) !default;

custom-select-focus-box-shadow

Deprecated!

as of v3.x with no replacement

$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width
	$custom-select-focus-border-color !default;

custom-select-disabled-bg

Deprecated!

as of v3.x with no replacement

$custom-select-disabled-bg: $gray-200 !default;

custom-select-disabled-color

Deprecated!

as of v3.x with no replacement

$custom-select-disabled-color: $gray-600 !default;

custom-select-feedback-icon-padding-right

Deprecated!

as of v3.x with no replacement

$custom-select-feedback-icon-padding-right: calc(
	(1em * 0.75) + (2 * #{$custom-select-padding-y} * 0.75) + #{$custom-select-padding-x} +
		#{$custom-select-indicator-padding}
) !default;

Used by

custom-select-feedback-icon-position

Deprecated!

as of v3.x with no replacement

$custom-select-feedback-icon-position: center right
	($custom-select-padding-x + $custom-select-indicator-padding) !default;

Used by

custom-select-feedback-icon-size

Deprecated!

as of v3.x with no replacement

$custom-select-feedback-icon-size: 18px 18px !default;

Used by

custom-select-font-size-lg

Deprecated!

as of v3.x with no replacement

$custom-select-font-size-lg: if(
	variable-exists(input-font-size-lg),
	$input-font-size-lg,
	$font-size-lg
) !default;

custom-select-height-lg

Deprecated!

as of v3.x with no replacement

$custom-select-height-lg: if(
	variable-exists(input-height-lg),
	$input-height-lg,
	3rem
) !default;

custom-select-padding-x-lg

Deprecated!

as of v3.x with no replacement

$custom-select-padding-x-lg: if(
	variable-exists(input-padding-x-lg),
	$input-padding-x-lg,
	1rem
) !default;

custom-select-padding-y-lg

Deprecated!

as of v3.x with no replacement

$custom-select-padding-y-lg: if(
	variable-exists(input-padding-y-lg),
	$input-padding-y-lg,
	0.5rem
) !default;

custom-select-font-size-sm

Deprecated!

as of v3.x with no replacement

$custom-select-font-size-sm: if(
	variable-exists(input-font-size-sm),
	$input-font-size-sm,
	$font-size-sm
) !default;

custom-select-height-sm

Deprecated!

as of v3.x with no replacement

$custom-select-height-sm: if(
	variable-exists(input-height-sm),
	$input-height-sm,
	1.9375rem
) !default;

custom-select-padding-x-sm

Deprecated!

as of v3.x with no replacement

$custom-select-padding-x-sm: if(
	variable-exists(input-padding-x-sm),
	$input-padding-x-sm,
	0.5rem
) !default;

custom-select-padding-y-sm

Deprecated!

as of v3.x with no replacement

$custom-select-padding-y-sm: if(
	variable-exists(input-padding-y-sm),
	$input-padding-y-sm,
	0.25rem
) !default;

custom-range-track-bg

Deprecated!

as of v3.x with no replacement

$custom-range-track-bg: $gray-300 !default;

custom-range-track-border-radius

Deprecated!

as of v3.x with no replacement

$custom-range-track-border-radius: 1rem !default;

custom-range-track-box-shadow

Deprecated!

as of v3.x with no replacement

$custom-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default;

custom-range-track-cursor

Deprecated!

as of v3.x with no replacement

$custom-range-track-cursor: pointer !default;

custom-range-track-height

Deprecated!

as of v3.x with no replacement

$custom-range-track-height: 0.5rem !default;

custom-range-track-width

Deprecated!

as of v3.x with no replacement

$custom-range-track-width: 100% !default;

custom-range-thumb-bg

Deprecated!

as of v3.x with no replacement

$custom-range-thumb-bg: $component-active-bg !default;

custom-range-thumb-border

Deprecated!

as of v3.x with no replacement

$custom-range-thumb-border: 0 !default;

custom-range-thumb-border-radius

Deprecated!

as of v3.x with no replacement

$custom-range-thumb-border-radius: 1rem !default;

custom-range-thumb-box-shadow

Deprecated!

as of v3.x with no replacement

$custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;

custom-range-thumb-width

Deprecated!

as of v3.x with no replacement

$custom-range-thumb-width: 1rem !default;

custom-range-thumb-height

Deprecated!

as of v3.x with no replacement

$custom-range-thumb-height: $custom-range-thumb-width !default;

custom-range-thumb-focus-box-shadow

Deprecated!

as of v3.x with no replacement

$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,
	if(
		variable-exists(input-focus-box-shadow),
		$input-focus-box-shadow,
		$component-focus-box-shadow
	) !default;

custom-range-thumb-focus-box-shadow-width

Deprecated!

as of v3.x with no replacement

$custom-range-thumb-focus-box-shadow-width: if(
	variable-exists(input-focus-width),
	$input-focus-width,
	0.2rem
) !default;

custom-range-thumb-active-bg

Deprecated!

as of v3.x with no replacement

$custom-range-thumb-active-bg: clay-lighten($component-active-bg, 35%) !default;

custom-range-thumb-disabled-bg

Deprecated!

as of v3.x with no replacement

$custom-range-thumb-disabled-bg: $gray-500 !default;

custom-file-bg

Deprecated!

as of v3.x with no replacement

$custom-file-bg: if(variable-exists(input-bg), $input-bg, $white) !default;

custom-file-border-color

Deprecated!

as of v3.x with no replacement

$custom-file-border-color: if(
	variable-exists(input-border-color),
	$input-border-color,
	$gray-400
) !default;

custom-file-border-width

Deprecated!

as of v3.x with no replacement

$custom-file-border-width: if(
	variable-exists(input-border-width),
	$input-border-width,
	0.0625rem
) !default;

custom-file-border-radius

Deprecated!

as of v3.x with no replacement

$custom-file-border-radius: if(
	variable-exists(input-border-radius),
	$input-border-radius,
	$border-radius
) !default;

custom-file-box-shadow

Deprecated!

as of v3.x with no replacement

$custom-file-box-shadow: if(
	variable-exists(input-box-shadow),
	$input-box-shadow,
	inset 0 1px 1px rgba($black, 0.075)
) !default;

custom-file-color

Deprecated!

as of v3.x with no replacement

$custom-file-color: if(
	variable-exists(input-color),
	$input-color,
	$gray-700
) !default;

custom-file-font-family

Deprecated!

as of v3.x with no replacement

$custom-file-font-family: if(
	variable-exists(input-font-family),
	$input-font-family,
	null
) !default;

custom-file-font-weight

Deprecated!

as of v3.x with no replacement

$custom-file-font-weight: if(
	variable-exists(input-font-weight),
	$input-font-weight,
	$font-weight-base
) !default;

custom-file-height-inner

Deprecated!

as of v3.x with no replacement

$custom-file-height-inner: 36px !default;

custom-file-height

Deprecated!

as of v3.x with no replacement

$custom-file-height: if(
	variable-exists(input-height),
	$input-height,
	2.375rem
) !default;

custom-file-line-height

Deprecated!

as of v3.x with no replacement

$custom-file-line-height: if(
	variable-exists(input-line-height),
	$input-line-height,
	$line-height-base
) !default;

custom-file-padding-x

Deprecated!

as of v3.x with no replacement

$custom-file-padding-x: if(
	variable-exists(input-padding-x),
	$input-padding-x,
	0.75rem
) !default;

custom-file-padding-y

Deprecated!

as of v3.x with no replacement

$custom-file-padding-y: if(
	variable-exists(input-padding-y),
	$input-padding-y,
	0.375rem
) !default;

custom-file-focus-border-color

Deprecated!

as of v3.x with no replacement

$custom-file-focus-border-color: if(
	variable-exists(input-focus-border-color),
	$input-focus-border-color,
	clay-lighten($component-active-bg, 25%)
) !default;

custom-file-focus-box-shadow

Deprecated!

as of v3.x with no replacement

$custom-file-focus-box-shadow: if(
	variable-exists(input-focus-box-shadow),
	$input-focus-box-shadow,
	$component-focus-box-shadow
) !default;

custom-file-disabled-bg

Deprecated!

as of v3.x with no replacement

$custom-file-disabled-bg: if(
	variable-exists(input-disabled-bg),
	$input-disabled-bg,
	$gray-200
) !default;

custom-file-button-bg

Deprecated!

as of v3.x with no replacement

$custom-file-button-bg: if(
	variable-exists(input-group-addon-bg),
	$input-group-addon-bg,
	$gray-200
) !default;

custom-file-button-color

Deprecated!

as of v3.x with no replacement

$custom-file-button-color: $custom-file-color !default;

custom-file-label-after-content

Deprecated!

as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457 and https://github.com/sass/sass/issues/1395

$custom-file-label-after-content: unquote("'\\FEFF Browse'") !default;

custom-file-text

Deprecated!

as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457 and https://github.com/sass/sass/issues/1395

$custom-file-text: map-deep-merge(
	(
		en: unquote("'\\FEFF Browse'"),
	),
	$custom-file-text
);

custom-file-text-data-browse

Deprecated!

as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457.

$custom-file-text-data-browse: unquote("'\\FEFF' attr(data-browse)") !default;

Dropdowns

mixins

clay-dropdown-menu-variant

@mixin clay-dropdown-menu-variant($map) { ... }

Description

A mixin to create Dropdown Menu variants. You can base your variant off Bootstrap's .dropdown-menu class or create your own base class (e.g., <div class="dropdown-menu my-custom-dropdown-menu"></div> or <div class="my-custom-dropdown-menu"></div>).

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
	breakpoint-down: {String}, // The breakpoint to use in `media-breakpoint-down`
	mobile: (
		// .dropdown-menu { @include media-breakpoint-down(breakpoint-down) {} }
	),
	before: (
		// .dropdown-menu::before
	),
	after: (
		// .dropdown-menu::after
	),
	show: (
		// .dropdown-menu.show
	),
	dropdown-item: (
		// .dropdown-menu .dropdown-item
	),
	alert: (
		// .dropdown-menu .alert
	),
	alert-fluid: (
		// .dropdown-menu .alert-fluid
	),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null}, // deprecated after 3.9.0
bg-clip: {String | Null}, // deprecated after 3.9.0
font-size-mobile: {Number | String | Null}, // deprecated after 3.9.0
max-height-mobile: {Number | String | Null}, // deprecated after 3.9.0
max-width-mobile: {Number | String | Null}, // deprecated after 3.9.0

Requires

Used by

clay-dropdown-item-variant

@mixin clay-dropdown-item-variant($map) { ... }

Description

A mixin to create Dropdown Item variants. You can base your variant off Bootstrap's .dropdown-item class or create your own base class (e.g., <a class="dropdown-item my-custom-dropdown-item" href="/"></a> or <a class="my-custom-dropdown-item" href="/"></a>).

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
	hover: (
		// .dropdown-item:hover
		c-kbd-inline: (
			// .dropdown-item:hover .c-kbd-inline
		),
	),
	focus: (
		// .dropdown-item:focus
		c-kbd-inline: (
			// .dropdown-item:focus .c-kbd-inline
		),
	),
	active: (
		// .dropdown-item:active
		c-kbd-inline: (
			// .dropdown-item:active .c-kbd-inline
		),
	),
	active-class: (
		// .dropdown-item.active
		c-kbd-inline: (
			// .dropdown-item.active .c-kbd-inline
		),
	),
	disabled: (
		c-kbd-inline: (
			// .dropdown-item:disabled .c-kbd-inline
		),
		active: (
			// .dropdown-item:disabled:active
		),
	),
	c-inner: (
		enabled: {Bool}, // Set to false to prevent .c-inner styles from being output. Default: true
		// .dropdown-item .c-inner
	),
	'&.autofit-row': (
		// .dropdown-item.autofit-row
		autofit-col: (
			// .dropdown-item.autofit-row > .autofit-col
		),
		autofit-col-expand: (
			// .dropdown-item.autofit-row > .autofit-col-expand
		),
	),
	autofit-row: (
		// .dropdown-item .autofit-row
		autofit-col: (
			// .dropdown-item .autofit-row > .autofit-col
		),
		autofit-col-expand: (
			// .dropdown-item .autofit-row > .autofit-col-expand
		),
	),
	c-kbd-inline: (
		// .dropdown-item .c-kbd-inline
	),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null}, // deprecated after 3.9.0
hover-bg: {Color | String | Null}, // deprecated after 3.9.0
hover-color: {Color | String | Null}, // deprecated after 3.9.0
hover-opacity: {Number | String | Null}, // deprecated after 3.9.0
hover-text-decoration: {String | Null}, // deprecated after 3.9.0
hover-c-kbd-inline: {Map},
focus-bg: {Color | String | Null}, // deprecated after 3.9.0
focus-border-radius: {Number | String | List | Null}, // deprecated after 3.9.0
focus-box-shadow: {String | List | Null}, // deprecated after 3.9.0
focus-color: {Color | String | Null}, // deprecated after 3.9.0
focus-opacity: {Number | String | Null}, // deprecated after 3.9.0
focus-outline: {Number | String | Null}, // deprecated after 3.9.0
focus-text-decoration: {String | Null}, // deprecated after 3.9.0
focus-c-kbd-inline: {Map},
active-bg: {Color | String | Null}, // deprecated after 3.9.0
active-border-color: {String | List | Null}, // deprecated after 3.9.0
active-color: {Color | String | Null}, // deprecated after 3.9.0
active-font-weight: {Number | String | Null}, // deprecated after 3.9.0
active-text-decoration: {String | Null}, // deprecated after 3.9.0
active-c-kbd-inline: {Map},
active-class-bg: {Color | String | Null}, // deprecated after 3.9.0
active-class-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
active-class-color: {Color | String | Null}, // deprecated after 3.9.0
active-class-font-weight: {Number | String | Null}, // deprecated after 3.9.0
active-class-text-decoration: {String | Null}, // deprecated after 3.9.0
active-class-c-kbd-inline: {Map},
disabled-bg: {Color | String | Null}, // deprecated after 3.9.0
disabled-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
disabled-box-shadow: {String | List | Null}, // deprecated after 3.9.0
disabled-color: {Color | String | Null}, // deprecated after 3.9.0
disabled-cursor: {String | Null}, // deprecated after 3.9.0
disabled-opacity: {Number | String | Null}, // deprecated after 3.9.0
disabled-outline: {Number | String | Null}, // deprecated after 3.9.0
disabled-pointer-events: {String | Null}, // deprecated after 3.9.0
disabled-text-decoration: {String | Null}, // deprecated after 3.9.0
disabled-c-kbd-inline: {Map},
disabled-active-pointer-events: {String | Null}, // deprecated after 3.9.0
disabled-active: {Map},

Requires

Used by

Float

mixins

float-left

Deprecated!
@mixin float-left() { ... }

Description

Bootstrap 4's Float Left Mixin. This is deprecated and will be removed.

Parameters

None.

Requires

float-right

Deprecated!
@mixin float-right() { ... }

Description

Bootstrap 4's Float Right Mixin. This is deprecated and will be removed.

Parameters

None.

Requires

float-none

Deprecated!
@mixin float-none() { ... }

Description

Bootstrap 4's Float None Mixin. This is deprecated and will be removed.

Parameters

None.

Requires

Forms

mixins

form-control-focus

Deprecated!
@mixin form-control-focus() { ... }

Description

Bootstrap 4's Form Control Focus Mixin. This is deprecated and will be removed.

Parameters

None.

Requires

form-validation-state-selector

@mixin form-validation-state-selector($state) { ... }

Description

Bootstrap 4's Form Validation State Selector Mixin. This mixin uses an if() technique to be compatible with Dart Sass. See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details

Parameters

NameDescriptionTypeDefault value
$state

Invalid or Valid

String—

Used by

form-validation-state

@mixin form-validation-state($state, $color, $icon) { ... }

Description

Bootstrap 4's Form Validation State Mixin.

Parameters

NameDescriptionTypeDefault value
$state—String—
$color—Color—
$icon—String—

Requires

clay-form-control-variant

@mixin clay-form-control-variant($map) { ... }

Description

A mixin to create Form Control variants. You can base your variant off Bootstrap's .form-control class or create your own base class (e.g., <input class="form-control my-custom-form-control" type="text" /> or <input class="my-custom-form-control" type="text" />).

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
	// .form-control
	placeholder: (
		// .form-control::placeholder
	),
	selection: (
		// .form-control::-moz-selection, .form-control::selection
	),
	input-group-inset-item: (
		// .form-control ~ .input-group-inset-item
	),
	hover: (
		// .form-control:hover
		placeholder: (
			// .form-control:hover::placeholder
		),
		input-group-inset-item: (
			// .form-control:hover ~ .input-group-inset-item
		),
	),
	focus: (
		// .form-control:focus, .form-control.focus
		placeholder: (
			// .form-control:focus::placeholder,
			// .form-control.focus::placeholder
		),
		input-group-inset-item: (
			// .form-control:focus ~ .input-group-inset-item,
			// .form-control.focus ~ .input-group-inset-item
		),
	),
	disabled: (
		// .form-control:disabled, .form-control.disabled
		placeholder: (
			// .form-control:disabled::placeholder,
			// .form-control.disabled::placeholder
		),
		input-group-inset-item: (
			// .form-control:disabled ~ .input-group-inset-item,
			// .form-control.disabled ~ .input-group-inset-item
		),
	),
	inline-item: (
		// .form-control .inline-item
	),
	label: (
		// .form-control .label
	),
	form-control-inset: (
		// .form-control .form-control-inset
	),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
placeholder-color: {Color | String | Null}, // deprecated after 3.7.0
placeholder-opacity: {Number | String | Null}, // deprecated after 3.7.0
selection-bg: {Color | String | Null}, // deprecated after 3.7.0
selection-color: {Color | String | Null}, // deprecated after 3.7.0
hover-bg: {Color | String | Null}, // deprecated after 3.7.0
hover-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
hover-box-shadow: {String | List | Null}, // deprecated after 3.7.0
hover-color: {Color | String | Null}, // deprecated after 3.7.0
hover-placeholder-color: {Color | String | Null}, // deprecated after 3.7.0
focus-bg: {Color | String | Null}, // deprecated after 3.7.0
focus-bg-image: {String | List | Null}, // deprecated after 3.7.0
focus-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
focus-box-shadow: {String | List | Null}, // deprecated after 3.7.0
focus-color: {Color | String | Null}, // deprecated after 3.7.0
focus-placeholder-color: {Color | String | Null}, // deprecated after 3.7.0
focus-placeholder: {Map | Null}, // See Mixin `clay-css` for available keys
readonly-bg: {Color | String | Null}, // deprecated after v2.18.0
readonly-bg-image: {String | List | Null}, // deprecated after v2.18.0
readonly-border-color: {Color | String | List | Null}, // deprecated after v2.18.0
readonly-box-shadow: {String | List | Null}, // deprecated after v2.18.0
readonly-color: {Color | String | Null}, // deprecated after v2.18.0
readonly-cursor: {String | Null}, // deprecated after v2.18.0
readonly-opacity: {Number | String | Null}, // deprecated after v2.18.0
readonly-placeholder-color: {Color | String | Null}, // deprecated after v2.18.0
disabled-bg: {Color | String | Null}, // deprecated after 3.7.0
disabled-bg-image: {String | List | Null}, // deprecated after 3.7.0
disabled-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
disabled-box-shadow: {String | List | Null}, // deprecated after 3.7.0
disabled-color: {Color | String | Null}, // deprecated after 3.7.0
disabled-cursor: {String | Null}, // deprecated after 3.7.0
disabled-opacity: {Number | String | Null}, // deprecated after 3.7.0
disabled-placeholder-color: {Color | String | Null}, // deprecated after 3.7.0
disabled-placeholder: {Map | Null}, // See Mixin `clay-css` for available keys

Requires

Used by

clay-select-variant

@mixin clay-select-variant($map) { ... }

Description

A mixin to create Select Form Control variants. You can base your variant off Bootstrap's select.form-control selector or create your own base class (e.g., <select class="form-control my-custom-form-control"></select> or <select class="my-custom-form-control"></select>).

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
	// select.form-control
	hover: (
		// select.form-control:hover
		option: (
			// select.form-control:hover > option
			checked: (
				// select.form-control:hover > option:checked
			),
		),
	),
	focus: (
		// select.form-control:focus,
		// select.form-control.focus
		option: (
			// select.form-control:focus > option,
			// select.form-control.focus > option
			checked: (
				// select.form-control:focus > option:checked,
				// select.form-control.focus > option:checked
			),
		),
	),
	disabled: (
		// select.form-control:disabled,
		// select.form-control.disabled
		option: (
			// select.form-control:disabled > option,
			// select.form-control.disabled > option
			checked: (
				// select.form-control:disabled > option:checked,
				// select.form-control.disabled > option:checked
			),
		),
	),
	option: (
		// select.form-control option
		checked: (
			// select.form-control option:checked
		),
	),
	firefox-only: (
		// Same selectors as above scoped only for firefox browsers
	),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
hover-bg: {Color | String | Null}, // deprecated after 3.7.0
hover-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
hover-box-shadow: {String | List | Null}, // deprecated after 3.7.0
hover-color: {Color | String | Null}, // deprecated after 3.7.0
focus-bg: {Color | String | Null}, // deprecated after 3.7.0
focus-bg-image: {String | List | Null}, // deprecated after 3.7.0
focus-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
focus-box-shadow: {String | List | Null}, // deprecated after 3.7.0
focus-color: {Color | String | Null}, // deprecated after 3.7.0
disabled-bg: {Color | String | Null}, // deprecated after 3.7.0
disabled-bg-image: {String | List | Null}, // deprecated after 3.7.0
disabled-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
disabled-box-shadow: {String | List | Null}, // deprecated after 3.7.0
disabled-color: {Color | String | Null}, // deprecated after 3.7.0
disabled-cursor: {String | Null}, // deprecated after 3.7.0
disabled-opacity: {Number | String | Null}, // deprecated after 3.7.0

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-form-validation-variant

@mixin clay-form-validation-variant($map) { ... }

Description

A mixin to create Form Validation variants (e.g., .has-error).

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
	label: (
		// .has-error label
	),
	custom-control-label: (
		// .has-error .custom-control-label, .has-error .form-check-label
	),
	form-control: (
		// .has-error .form-control
		readonly: (
			// .has-error .form-control[readonly]
		),
	),
	form-feedback-group: (
		// .has-error .form-feedback-group
	),
	form-feedback-item: (
		// .has-error .form-feedback-item
	),
	form-feedback-indicator: (
		// .has-error .form-feedback-indicator
	),
	form-feedback-text: (
		// .has-error .form-feedback-text
	),
	select: (
		// N/A
		form-control: (
			// .has-error select.form-control
			multiple: (
				// .has-error select.form-control[multiple]
			),
			size: (
				// .has-error select.form-control[size]
			),
		),
	),
	input-group-item: (
		// .has-error .input-group-item
		hover: (
			// .has-error .input-group-item:hover
			input-group-inset: (
				// .has-error .input-group-item:hover .input-group-inset
				input-group-inset-item: (
					// .has-error .input-group-item:hover .input-group-inset ~ .input-group-inset-item
				),
			),
		),
		focus: (
			// .has-error .input-group-item.focus
			input-group-inset: (
				// .has-error .input-group-item.focus .input-group-inset
				input-group-inset-item: (
					// .has-error .input-group-item.focus .input-group-inset ~ .input-group-inset-item
				),
			),
		),
		input-group-inset: (
			// .has-error .input-group-inset
			input-group-inset-item: (
				// .has-error .input-group-inset ~ .input-group-inset-item
			),
			hover: (
				// .has-error .input-group-inset:hover
				input-group-inset-item: (
					// .has-error .input-group-inset:hover ~ .input-group-inset-item
				),
			),
			focus: (
				// .has-error .input-group-inset:focus
				input-group-inset-item: (
					// .has-error .input-group-inset:focus ~ .input-group-inset-item
				),
			),
		),
	),
)

Requires

clay-range-input-variant

@mixin clay-range-input-variant($map) { ... }

Description

A mixin to create Clay Range variants.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs. The keys and value types are listed below:

Map—

Example

(
	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
	// .clay-range-input
	tooltip: (
		// .clay-range-input .tooltip
	),
	tooltip-inner: (
		// .clay-range-input .tooltip-inner
	),
	tooltip-arrow: (
		// .clay-range-input .tooltip-arrow
	),
	clay-tooltip-bottom: (
		// .clay-range-input .clay-tooltip-bottom
		tooltip-arrow: (
			// .clay-range-input .clay-tooltip-bottom .tooltip-arrow
		),
	),
	clay-tooltip-top: (
		// .clay-range-input .clay-tooltip-top
		tooltip-arrow: (
			// .clay-range-input .clay-tooltip-top .tooltip-arrow
		),
	),
	clay-range-track: (
		// .clay-range-input .clay-range-track
	),
	clay-range-progress: (
		// .clay-range-input .clay-range-progress
	),
	clay-range-thumb: (
		// This styles the shared styles between ::-moz-range-thumb, ::-ms-thumb, and ::-webkit-slider-thumb
		// .clay-range-input .clay-range-thumb
	),
	form-control-range: (
		moz-range-thumb: (
			// .clay-range-input .form-control-range::-moz-range-thumb
		),
		ms-thumb: (
			// .clay-range-input .form-control-range::-ms-thumb
		),
		webkit-slider-thumb: (
			// .clay-range-input .form-control-range::-webkit-slider-thumb
		),
		hover: (
			// .clay-range-input .form-control-range:hover
			clay-range-track: (
				// .clay-range-input .form-control-range:hover ~ .clay-range-track
			),
			clay-range-progress: (
				// .clay-range-input .form-control-range:hover ~ .clay-range-progress
			),
			clay-range-thumb: (
				// This styles :hover::-moz-range-thumb, :hover::-ms-thumb, and :hover::-webkit-slider-thumb
				// .clay-range-input .form-control-range:hover ~ .clay-range-progress .clay-range-thumb
			),
		),
		focus: (
			// .clay-range-input .form-control-range:focus
			clay-range-track: (
				// .clay-range-input .form-control-range:focus ~ .clay-range-track
			),
			clay-range-progress: (
				// .clay-range-input .form-control-range:focus ~ .clay-range-progress
			),
			clay-range-thumb: (
				// This styles :focus::-moz-range-thumb, :focus::-ms-thumb, and :focus::-webkit-slider-thumb
				// .clay-range-input .form-control-range:focus ~ .clay-range-progress .clay-range-thumb
			),
		),
		disabled: (
			// .clay-range-input .form-control-range:disabled
			clay-range-track: (
				// .clay-range-input .form-control-range:focus ~ .clay-range-track
			),
			clay-range-progress: (
				// .clay-range-input .form-control-range:focus ~ .clay-range-progress
			),
			clay-range-thumb: (
				// This styles :disabled::-moz-range-thumb, :disabled::-ms-thumb, and :disabled::-webkit-slider-thumb
				// .clay-range-input .form-control-range:focus ~ .clay-range-progress .clay-range-thumb
			),
		),
		before-after: (
			// .clay-range-input::before, .clay-range-input::after
		),
		data-label-min-max: (
			// .clay-range-input[data-label-min], .clay-range-input[data-label-max]
		),
		data-label-min: (
			before: (
				// .clay-range-input[data-label-min]::before
			),
		),
		data-label-max: (
			after: (
				// .clay-range-input[data-label-max]::after
			),
		),
	),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
thumb-bg: {Color | String | Null},
thumb-bg-image: {String | List | Null},
thumb-border-radius: {Number | String | List | Null},
thumb-border-color: {Color | String | List | Null},
thumb-border-style: {String | List | Null},
thumb-border-width: {Number | String | List | Null},
thumb-box-shadow: {String | List | Null},
thumb-height: {Number | String | Null},
thumb-width: {Number | String | Null},
track-bg: {Color | String | Null},
track-bg-image: {String | List | Null},
track-border-color: {Color | String | List | Null},
track-border-radius: {Number | String | List | Null},
track-border-style: {String | List | Null},
track-border-width: {Number | String | List | Null},
track-height: {Number | String | Null},
track-margin-top: {Number | String | Null},
track-position: {String | Null},
track-top: {Number | String | Null},
track-width: {Number | String | Null},
progress-bg: {Color | String | Null},
progress-bg-image: {String | List | Null},
progress-border-color: {Color | String | Null},
progress-border-radius: {Number | String | List | Null},
progress-border-style: {String | List | Null},
progress-border-width: {Number | String | Null},
progress-height: {Number | String | Null},
progress-margin-top: {Number | String | Null},
progress-position: {String | Null},
progress-top: {Number | String | Null},
progress-width: {Number | String | Null},
tooltip-bg: {Color | String | Null},
tooltip-color: {Color | String | Null},
tooltip-line-height: {Number | String | Null},
tooltip-padding: {Number | String | List | Null},
tooltip-padding-bottom: {Number | String | Null},
tooltip-padding-left: {Number | String | Null},
tooltip-padding-right: {Number | String | Null},
tooltip-padding-top: {Number | String | Null},
tooltip-spacer-x: {Number | String | Null},
tooltip-spacer-y: {Number | String | Null},
tooltip-transition: {String | List | Null},
tooltip-visibility: {String | Null},
tooltip-white-space: {String | Null},
tooltip-arrow-border-color: {Color | String | List | Null},
tooltip-arrow-border-style: {String | List | Null},
tooltip-arrow-border-width: {Number | String | List | Null},
tooltip-arrow-offset: {Number | String | Null},
tooltip-arrow-size: {Number | String | Null},
form-control-appearance: {String | Null},
form-control-bg: {Color | String | Null},
form-control-height: {Number | String | Null},
form-control-position: {String | Null},
form-control-z-index: {Number | String | Null},
data-label-font-size: {Number | String | Null},
data-label-font-weight: {Number | String | Null},
data-label-line-height: {Number | String | Null},
data-label-margin-top: {Number | String | Null},
data-label-position: {String | Null},
data-label-spacer: {Number | String | Null},
data-label-text-align: {String | Null},
data-label-top: {Number | String | Null},
data-label-width: {Number | String | Null},
data-label-before-content: {Number | String | Null},
data-label-before-left: {Number | String | Null},
data-label-after-content: {Number | String | Null},
data-label-after-right: {Number | String | Null},
hover-cursor: {String | Null},
hover-thumb-bg: {Color | String | Null},
focus-outline: {Number | String | List | Null},
focus-thumb-box-shadow: {String | List | Null},
disabled-color: {Color | String | Null},
disabled-cursor: {String | Null},
disabled-thumb-bg: {Color | String | Null},
disabled-thumb-box-shadow: {String | List | Null},
disabled-progress-bg: {Color | String | Null},
disabled-track-bg: {Color | String | Null},

Requires

Globals

functions

clay-is-map-unset

@function clay-is-map-unset($value) { ... }

Description

A function that checks if the value contains the key word c-unset or clay-unset

Parameters

NameDescriptionTypeDefault value
$value

The value to check

Any—

Used by

clay-data-label-text-position

@function clay-data-label-text-position($toggle-switch-width, $toggle-switch-padding, $label-spacer-x: 8px) { ... }

Description

A helper function that calculates text-indent of data-label-on and data-label-off in a .toggle-switch.

Parameters

NameDescriptionTypeDefault value
$toggle-switch-width

Width of switch bar

Number—
$toggle-switch-padding

Space between button and bar

Number—
$label-spacer-x

Space between toggle-switch-bar and data-label

Number8px

clay-map-merge

@function clay-map-merge() { ... }

Description

A function that combines two maps. It adds new key value pairs to the end of the map.

Parameters

None.

map-deep-merge

@function map-deep-merge($map1: (), $map2: ()) { ... }

Description

A function that returns a new map with all the keys and values including nested keys and values from both $map1 and $map2. If both $map1 and $map2 have the same key, $map2’s value takes precedence. The key value pair merge: false, will skip merging maps. This allows component properties to be reset to a blank state.

Parameters

NameDescriptionTypeDefault value
$map1—Map, null()
$map2—Map, null()

Requires

Used by

setter

@function setter($vars...) { ... }

Description

A helper function for setting default values in variables inside mixins if no value is declared. If the value of a variable is clay-unset, setter returns a value of null which prevents Sass from outputting the CSS property. If all the values in the arglist $vars... is null, setter returns null.

Parameters

NameDescriptionTypeDefault value
$vars

A list of comma-delimited variables (e.g., $var1, $var2, $var3).

Arglist—

Used by

math-sign

@function math-sign($num) { ... }

Description

A helper function that returns the opposite of a number, generally used for null values so Sass doesn't output a value -null. Returns null if $num is not a number.

Parameters

NameDescriptionTypeDefault value
$num

The variable

Any—

Requires

Used by

clay-parent

@function clay-parent($selector) { ... }

Description

A function that returns the direct parent selector (e.g., clay-parent('#wrapper .container .row')) will return .row.

Parameters

NameDescriptionTypeDefault value
$selector

The full selector

String—

Requires

Used by

clay-insert-after

@function clay-insert-after($location, $insert, $selector) { ... }

Description

A function that appends to a specific place in a CSS selector (e.g., clay-insert-after('.container ', '.myselector ', '.container .row .col-md-12')) will return .container .myselector .row .col-md-12.

Parameters

NameDescriptionTypeDefault value
$location

The string to target

String—
$insert

The string to insert after the location

String—
$selector

The full selector

String—

Requires

clay-insert-before

@function clay-insert-before($location, $insert, $selector) { ... }

Description

A function that prepends to a specific place in a CSS selector (e.g., clay-insert-before('.container ', '.myselector ', '.container .row .col-md-12')) will return .myselector .container .row .col-md-12.

Parameters

NameDescriptionTypeDefault value
$location

The string to target

String—
$insert

The string to insert before the location

String—
$selector

The full selector

String—

Requires

Used by

required

@function required($var, $msg: 'This value is required!') { ... }

Description

A helper function for displaying warning messages for required variables.

Parameters

NameDescriptionTypeDefault value
$var

The variable to check

Any—
$msg

The error message to display

String'This value is required!'

Used by

clay-enable-gradients

@function clay-enable-gradients($gradient, $custom-gradient: false) { ... }

Description

A function that returns a CSS gradient for use with the background-image property. This function returns null if $enable-gradients is set to false. This is a workaround for complying with Bootstrap's $enable-gradients setting.

Parameters

NameDescriptionTypeDefault value
$gradient

The CSS gradient or HEX color to generate the default gradient.

String—
$custom-gradient

Pass in true as the second parameter to this function if using a custom gradient.

Boolfalse

Requires

clay-enable-rounded

@function clay-enable-rounded($radius) { ... }

Description

A function that returns a number for use with the border-radius property. This function returns null if $enable-rounded is set to false. This is a workaround for complying with Bootstrap's $enable-rounded setting.

Parameters

NameDescriptionTypeDefault value
$radius

The border radius.

Number—

Used by

clay-enable-shadows

@function clay-enable-shadows($shadows) { ... }

Description

A function that returns a shadow for use with the box-shadow property. This function returns null if $enable-shadows is set to false. This is a workaround for complying with Bootstrap's $enable-shadows setting.

Parameters

NameDescriptionTypeDefault value
$shadows

The box shadow. Pass in a single shadow or two shadows using [$shadow1, $shadow2] if you need a default shadow even if $enable-shadows is false. A focus shadow for example.

List—

clay-enable-transitions

@function clay-enable-transitions($transitions) { ... }

Description

A function that returns a transition for use with the transition property. This function returns null if $enable-transitions is set to false. This is a workaround for complying with Bootstrap's $enable-transitions setting.

Parameters

NameDescriptionTypeDefault value
$transitions

The transitions.

List—

clay-get-fallback

@function clay-get-fallback($var) { ... }

Description

A function that returns the fallback value of a CSS Custom Property (CSS variable).

Parameters

NameDescriptionTypeDefault value
$var

The CSS Custom Property to evaluate.

String—

Requires

Used by

breakpoint-next

@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { ... }

Description

A Bootstrap 4 function that returns the name of the next breakpoint relative to the breakpoint passed in through $name in the Sass map $grid-breakpoints. If the breakpoint does not exist in the Sass map, it returns the first breakpoint key.

Parameters

NameDescriptionTypeDefault value
$name

The breakpoint name or keys in $grid-breakpoints (e.g., xs, sm, md, lg, xl)

Key—
$breakpoints

A map that defines the breakpoints

Map$grid-breakpoints
$breakpoint-names

A list of all the keys in $breakpoints

Listmap-keys($breakpoints)

Requires

Used by

clay-breakpoint-prev

@function clay-breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { ... }

Description

A function that returns the name of the previous breakpoint relative to the breakpoint passed in through $name in the Sass map $grid-breakpoints. If the breakpoint does not exist in the Sass map, it returns the first breakpoint key.

Parameters

NameDescriptionTypeDefault value
$name

The breakpoint name or keys in $grid-breakpoints (e.g., xs, sm, md, lg, xl)

Key—
$breakpoints

A map that defines the breakpoints

Map$grid-breakpoints
$breakpoint-names

A list of all the keys in $breakpoints

Listmap-keys($breakpoints)

Requires

Used by

breakpoint-min

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { ... }

Description

A Bootstrap 4 function that returns the minimum breakpoint width; returns null for the first breakpoint.

breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) => 576px

Parameters

NameDescriptionTypeDefault value
$name

The breakpoint name or keys in $grid-breakpoints (e.g., xs, sm, md, lg, xl)

Key—
$breakpoints

A map that defines the breakpoints

Map$grid-breakpoints

Requires

Used by

breakpoint-max

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { ... }

Description

A Bootstrap 4 function that returns the maximum breakpoint width; returns null for the last breakpoint. Maximum breakpoint width. Null for the largest (last) breakpoint. The maximum value is calculated as the minimum of the next one less 0.02px to work around the limitations of min- and max- prefixes and viewports with fractional widths. See https://www.w3.org/TR/mediaqueries-4/#mq-min-max Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. See https://bugs.webkit.org/show_bug.cgi?id=178261

breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) => 767.98px

Parameters

NameDescriptionTypeDefault value
$name

The breakpoint name or keys in $grid-breakpoints (e.g., xs, sm, md, lg, xl)

Key—
$breakpoints

A map that defines the breakpoints

Map$grid-breakpoints

Requires

Used by

breakpoint-infix

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { ... }

Description

A Bootstrap 4 function that returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.

breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) => '' (Returns a blank string) breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) => '-sm'

Parameters

NameDescriptionTypeDefault value
$name

The breakpoint name or keys in $grid-breakpoints (e.g., xs, sm, md, lg, xl)

Key—
$breakpoints

A map that defines the breakpoints

Map$grid-breakpoints

Requires

Used by

color-yiq

@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light, $fallback: $enable-clay-color-functions-process-fallback) { ... }

Description

A Bootstrap 4 function that converts a color into the YIQ color space and returns 1 of 2 colors depending on $yiq-contrasted-threshold. This is a quick way to meet WCAG 2.0 contrast requirements.

Parameters

NameDescriptionTypeDefault value
$color

The color to convert

Color—
$dark

The color to return if $color >= $yiq-contrasted-threshold

Color$yiq-text-dark
$light

The color to return if $color < $yiq-contrasted-threshold

Color$yiq-text-light
$fallback

Force Sass to process the CSS Custom Property fallback colors

Bool$enable-clay-color-functions-process-fallback

Requires

Used by

color

Deprecated!

just use map-get($colors, 'blue')

@function color($key: 'blue') { ... }

Description

A Bootstrap 4 function that returns a value inside the $colors Sass map.

Parameters

NameDescriptionTypeDefault value
$key

The name of the color

String'blue'

theme-color

Deprecated!

just use map-get($theme-colors, 'primary')

@function theme-color($key: 'primary') { ... }

Description

A Bootstrap 4 function that returns a value inside the $theme-colors Sass map.

Parameters

NameDescriptionTypeDefault value
$key

The name of the color

String'primary'

Used by

gray

Deprecated!

just use map-get($grays, '100')

@function gray($key: '100') { ... }

Description

A Bootstrap 4 function that returns a value inside the $grays Sass map.

Parameters

NameDescriptionTypeDefault value
$key

The name of the color

String'100'

theme-color-level

Deprecated!

not useful unless you don't care about colors and just want something lighter or darker

@function theme-color-level($color-name: 'primary', $level: 0) { ... }

Description

A Bootstrap 4 function that returns a lighter or darker color based on $theme-colors and an arbitrary scale $level.

Parameters

NameDescriptionTypeDefault value
$color-name

A key in the Sass map $theme-colors

String'primary'
$level—Number0

Requires

add

Deprecated!

Clay CSS allows customizing of any CSS property. If the output isn't a valid calc value, just replace the property with a calc value that works.

@function add($value1, $value2, $return-calc: true) { ... }

Description

A Bootstrap 4 function that returns a CSS calc addition expression. This is their workaround for returning a valid calc value with null variables.

Parameters

NameDescriptionTypeDefault value
$value1

The first value

Number—
$value2

The second value

Number—
$return-calc

Use false to return without the calc() wrapper

Booltrue

subtract

Deprecated!

Clay CSS allows customizing of any CSS property. If the output isn't a valid calc value, just replace the property with a calc value that works.

@function subtract($value1, $value2, $return-calc: true) { ... }

Description

A Bootstrap 4 function that returns a CSS calc subtraction expression. This is their workaround for returning a valid calc value with null variables.

Parameters

NameDescriptionTypeDefault value
$value1

The first value

Number—
$value2

The second value

Number—
$return-calc

Use false to return without the calc() wrapper

Booltrue

clay-max

@function clay-max($val1, $val2) { ... }

Description

A function that returns the largest of two numbers. This returns null if either number is null.

Parameters

NameDescriptionTypeDefault value
$val1

The first number.

Number—
$val2

The second number.

Number—

starts-with

@function starts-with($str1, $str2) { ... }

Description

A function that determines whether the string $str1 begins with the characters of the specified string $str2. This returns true if $str1 begins with $str2.

Parameters

NameDescriptionTypeDefault value
$str1

The string to search.

String—
$str2

The search parameter.

String—

Used by

map-deep-get

@function map-deep-get($map, $keys...) { ... }

Description

A function that fetches deeply nested values from a Sass map.

Parameters

NameDescriptionTypeDefault value
$map

The Sass map to fetch from

Map—
$keys

The keys to loop through

Arglist—

Used by