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

Links

Author

  • Hugo Giraudel

clay-str-replace

@function clay-str-replace($string, $search, $replace: '') { ... }

Description

A function to replace all instances of a specific character in a string.

Parameters

NameDescriptionTypeDefault value
$string

The string to operate on

String—
$search

The character to replace

String—
$replace

The character to replace $search with

String''

Used by

Links

Author

  • Hugo Giraudel

str-replace

@function str-replace($string, $search, $replace: '') { ... }

Description

Bootstrap 4's str-replace function that is mapped to clay-str-replace, use that instead.

Parameters

NameDescriptionTypeDefault value
$string

The string to operate on

String—
$search

The character to replace

String—
$replace

The character to replace $search with

String''

Requires

Used by

Links

Author

  • Hugo Giraudel

clay-svg-url

@function clay-svg-url($svg) { ... }

Description

A function to encode an SVG and provide back a data URI to be used in background-image. If the SVG uses double quotes to delimit attribute names and values, wrap the SVG in single quotes or vice versa.

Parameters

NameDescriptionTypeDefault value
$svg

The SVG markup to encode

String—

Requires

Used by

Links

escape-svg

Deprecated!

use clay-svg-url($svg) instead.

@function escape-svg($string, $escaped) { ... }

Description

A Bootstrap 4 function that converts ASCII characters in SVG's to URL encoded characters.

Parameters

NameDescriptionTypeDefault value
$string

The SVG to URL encode

String—
$escaped

The characters to escape

Map—

Requires

Used by

clay-icon

@function clay-icon($name, $color) { ... }

Description

A function that returns a specific Lexicon Icon with a specific color as a data URI to be used in background-image.

Parameters

NameDescriptionTypeDefault value
$name

The Lexicon Icon name (e.g., angle-right)

String—
$color

The color of the Lexicon Icon

Color—

Requires

clay-border-radius-inner

@function clay-border-radius-inner($radius, $width) { ... }

Description

A function that returns the inner border radius based on the outer border radius minus the border width.

Parameters

NameDescriptionTypeDefault value
$radius

The outer border-radius

Number or String—
$width

The outer border-width

Number or String—

Throws

  • The parameter $radius in the function clay-border-radius-inner cannot be a #{type-of($radius)}. It must be a number or a string.

  • The parameter $width in the function clay-border-radius-inner cannot be a #{type-of($width)}. It must be a number or a string.

mixins

[private] _assert-ascending

@mixin _assert-ascending($map, $map-name) { ... }

Description

A Bootstrap 4 function that warns the user if values in key value pairs are not in ascending order. Used to evaluate Sass maps $grid-breakpoints and $container-max-widths.

Parameters

NameDescriptionTypeDefault value
$map

The map to evaluate

Map—
$map-name

The name of the map

String—

Requires

[private] _assert-starts-at-zero

@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') { ... }

Description

A Bootstrap 4 function that warns the user if the first value in a Sass map is not 0. Used to evalute the Sass map $grid-breakpoints.

Parameters

NameDescriptionTypeDefault value
$map

The map to evaluate

Map—
$map-name

The name of the map

String'$grid-breakpoints'

clay-css

@mixin clay-css($map) { ... }

Description

A mixin that outputs a CSS property based on the key: value pair passed to the mixin. Outputs nothing if no key: value pairs are passed. Prevent a Clay CSS Sass map from outputting properties with $the-variable: (enabled: false);

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs.

Map—

Requires

Used by

clay-map-to-css

@mixin clay-map-to-css($map) { ... }

Description

A mixin that outputs CSS based on the structure of a Sass map.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs.

Map—

Requires

Used by

variables

clay-unset

$clay-unset: clay-unset !default;

Description

The keyword clay-unset allows unsetting a Sass variable value so it doesn't get output in the final CSS file.

c-unset

$c-unset: $clay-unset !default;

Description

An alias for $clay-unset

enable-clay-color-functions-process-fallback

$enable-clay-color-functions-process-fallback: false !default;

Description

This enables Clay color functions to get the fallback color of a CSS Custom Property, convert it to the correct Sass type color, then process it using the corresponding Sass color function. The Clay color function will return a CSS color value. Set this variable to false if you want the Clay color function to return the CSS Custom Property without any modifications.

Used by

Links

escaped-characters

Deprecated!

as of v3.x with no replacement

$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23')) !default;

Description

Characters which are escaped by the escape-svg function

Used by

caret-width

Deprecated!

as of v3.x with no replacement, Clay CSS inlines SVG icons for dropdown-toggle carets

$caret-width: 0.3em !default;

Used by

caret-vertical-align

Deprecated!

as of v3.x with no replacement, Clay CSS inlines SVG icons for dropdown-toggle carets

$caret-vertical-align: $caret-width * 0.85 !default;

Used by

caret-spacing

Deprecated!

as of v3.x with no replacement, Clay CSS inlines SVG icons for dropdown-toggle carets

$caret-spacing: $caret-width * 0.85 !default;

Used by

emphasized-link-hover-darken-percentage

Deprecated!

as of v3.x with no replacement, fixed percentages do not propagate well for all colors; manually define them for each theme color in $text-theme-colors.

$emphasized-link-hover-darken-percentage: 15% !default;

Description

Darken percentage for links with .text-* class (e.g. .text-success)

Used by

Gradients

mixins

gradient-bg

Deprecated!

Mixins don't work inside variables, use the function clay-enable-gradients() instead.

@mixin gradient-bg($color) { ... }

Description

A Bootstrap 4 mixin that outputs a gradient if the setting $enable-gradients is true.

Parameters

NameDescriptionTypeDefault value
$color

The color to convert into a gradient

Color—

Requires

Used by

gradient-x

@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent, $end-percent) { ... }

Description

A Bootstrap 4 mixin that outputs a horizontal gradient (left to right). This creates two color stops, start and end, by specifying a color and position for each color stop.

Parameters

NameDescriptionTypeDefault value
$start-color

The starting color

Color$gray-700
$end-color

The ending color

Color$gray-800
$start-percent—Number—
$end-percent—Number—

gradient-y

@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent, $end-percent) { ... }

Description

A Bootstrap 4 mixin that outputs a vertical gradient (top to bottom). This creates two color stops, start and end, by specifying a color and position for each color stop.

Parameters

NameDescriptionTypeDefault value
$start-color

The starting color

Color$gray-700
$end-color

The ending color

Color$gray-800
$start-percent—Number—
$end-percent—Number—

gradient-directional

@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { ... }

Description

A Bootstrap 4 mixin that outputs a directional gradient (left to right).

Parameters

NameDescriptionTypeDefault value
$start-color

The starting color

Color$gray-700
$end-color

The ending color

Color$gray-800
$deg

The direction parameter of the CSS linear-gradient function (e.g., to right, to bottom, or 45deg).

String45deg

gradient-x-three-colors

@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { ... }

Description

A Bootstrap 4 mixin that outputs a horizontal gradient (left to right). This creates three color stops, start, mid, and end, by specifying a color and position for each color stop.

Parameters

NameDescriptionTypeDefault value
$start-color

The starting color

Color$blue
$mid-color

The middle color

Color$purple
$color-stop—Number50%
$end-color

The ending color

Color$red

gradient-y-three-colors

@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { ... }

Description

A Bootstrap 4 mixin that outputs a vertical gradient (top to bottom). This creates three color stops, start, mid, and end, by specifying a color and position for each color stop.

Parameters

NameDescriptionTypeDefault value
$start-color

The starting color

Color$blue
$mid-color

The middle color

Color$purple
$color-stop—Number50%
$end-color

The ending color

Color$red

gradient-radial

@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { ... }

Description

A Bootstrap 4 mixin that outputs a radial gradient (circle).

Parameters

NameDescriptionTypeDefault value
$inner-color—Color$gray-700
$outer-color—Color$gray-800

gradient-striped

@mixin gradient-striped($color: rgba($white, 0.15), $angle: 45deg) { ... }

Description

A Bootstrap 4 mixin that outputs a striped gradient.

Parameters

NameDescriptionTypeDefault value
$color—Colorrgba($white, 0.15)
$angle—Number45deg

Grid

mixins

clay-container-no-gutters

@mixin clay-container-no-gutters() { ... }

Description

A general mixin used to remove gutters on a container (e.g., .container or .container-fluid). This removes the gutter and the offset.

Parameters

None.

clay-container

@mixin clay-container($map) { ... }

Description

A general mixin used for component containers (e.g., .container, .container-fluid, .form-group, .input-group-inset-item)

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-up: {String | Null}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead
breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
See Mixin `clay-css` for available keys to pass into the base selector
mobile: {Map | Null},  // See Mixin `clay-css` for available keys
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null}, // deprecated after 3.9.0
bg-image: {String | List | Null}, // deprecated after 3.9.0
bg-position: {String | List | Null}, // deprecated after 3.9.0
bg-size: {Number | String | List | 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

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-row

@mixin clay-row($map) { ... }

Description

A general mixin to create custom .row elements. .row's in Bootstrap have negative margin-left and margin-right values to offset the padding inside the columns so content will be positioned flush, vertically, with the rest of the page's content.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Example

See Mixin `clay-css` for available keys to pass into the base selector

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-generate-media-breakpoints

@mixin clay-generate-media-breakpoints($map) { ... }

Description

A mixin that generates media-breakpoint-{up|down} styles from a Sass map.

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs that is passed to the clay-css mixin

Map—

Requires

Used by

make-grid-columns

Deprecated!
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { ... }

Description

A Bootstrap 4 mixin that generates the correct number of grid classes given any value of $grid-columns. This mixin is deprecated. This has been inlined into components/_grid.scss.

Parameters

NameDescriptionTypeDefault value
$columns—Number$grid-columns
$gutter—Number$grid-gutter-width
$breakpoints—Map$grid-breakpoints

Requires

make-container

Deprecated!
@mixin make-container($gutter: $grid-gutter-width) { ... }

Description

A Bootstrap 4 mixin that generates basic container styles. This mixin is deprecated. This has been inlined into components/_grid.scss.

Parameters

NameDescriptionTypeDefault value
$gutter—Number$grid-gutter-width

make-container-max-widths

Deprecated!
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { ... }

Description

A Bootstrap 4 mixin that generates container max-widths at each breakpoint. This mixin is deprecated. This has been inlined into components/_grid.scss.

Parameters

NameDescriptionTypeDefault value
$max-widths—Number$container-max-widths
$breakpoints—Number$grid-breakpoints

Requires

make-row

Deprecated!
@mixin make-row($gutter: $grid-gutter-width) { ... }

Description

A Bootstrap 4 mixin that generates basic .row styles. This mixin is deprecated. This has been inlined into components/_grid.scss.

Parameters

NameDescriptionTypeDefault value
$gutter—Number$grid-gutter-width

Requires

make-col-ready

Deprecated!
@mixin make-col-ready($gutter: $grid-gutter-width) { ... }

Description

A Bootstrap 4 mixin. This mixin is deprecated, not used in Bootstrap 4.

Parameters

NameDescriptionTypeDefault value
$gutter—Number$grid-gutter-width

make-col

Deprecated!
@mixin make-col($size, $columns: $grid-columns) { ... }

Description

A Bootstrap 4 mixin that generates the width of each .col-{bp}-* class. This mixin is deprecated. This has been inlined into components/_grid.scss.

Parameters

NameDescriptionTypeDefault value
$size—Number—
$columns—Number$grid-columns

Used by

make-col-auto

Deprecated!
@mixin make-col-auto($size, $columns: $grid-columns) { ... }

Description

A Bootstrap 4 mixin that generates styles for .col-{bp}-auto classes. This mixin is deprecated. This has been inlined into components/_grid.scss.

Parameters

NameDescriptionTypeDefault value
$size—Number—
$columns—Number$grid-columns

Used by

make-col-offset

Deprecated!
@mixin make-col-offset($size, $columns: $grid-columns) { ... }

Description

A Bootstrap 4 mixin that generates styles for .col-{bp}-auto classes. This mixin is deprecated. This has been inlined into components/_grid.scss.

Parameters

NameDescriptionTypeDefault value
$size—Number—
$columns—Number$grid-columns

Used by

row-cols

Deprecated!
@mixin row-cols($count) { ... }

Description

A Bootstrap 4 mixin that generates styles for .row-cols-{bp}-* classes. This mixin is deprecated. This has been inlined into components/_grid.scss.

Parameters

NameDescriptionTypeDefault value
$count—Number—

Used by

Hover

mixins

hover

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

Description

A Boostrap 4 mixin designed to prevent :hover stickiness on iOS, an issue where hover styles would persist after initial touch. https://github.com/twbs/bootstrap/issues/25195

Parameters

None.

Used by

hover-focus

Deprecated!
@mixin hover-focus() { ... }

Description

A Boostrap 4 mixin designed to prevent :hover stickiness on iOS, an issue where hover styles would persist after initial touch.

Parameters

None.

plain-hover-focus

Deprecated!
@mixin plain-hover-focus() { ... }

Description

A Boostrap 4 mixin designed to prevent :hover stickiness on iOS, an issue where hover styles would persist after initial touch.

Parameters

None.

hover-focus-active

Deprecated!
@mixin hover-focus-active() { ... }

Description

A Boostrap 4 mixin designed to prevent :hover stickiness on iOS, an issue where hover styles would persist after initial touch.

Parameters

None.

Image

mixins

img-fluid

@mixin img-fluid() { ... }

Description

A Bootstrap 4 mixin that keeps images from scaling beyond the width of their parent.

Parameters

None.

img-retina

Deprecated!
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { ... }

Description

A Bootstrap 4 mixin for setting background-image and background-size.

Parameters

NameDescriptionTypeDefault value
$file-1x—String—
$file-2x—String—
$width-1x—Number—
$height-1x—Number—

Requires

Input Groups

mixins

clay-input-group-stacked

@mixin clay-input-group-stacked($map) { ... }

Description

A mixin that stacks an .input-group that uses an .input-group-item at a specific max-width breakpoint. This sets the .input-group-item width to 100% and .input-group-item-shrink width to auto at the max-width breakpoint.

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: {String | Null}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead. // Default: md
See Mixin `clay-css` for available keys to pass into the base selector
item: {Map | Null}, // See Mixin `clay-css` for available keys
item-shrink: {Map | Null}, // See Mixin `clay-css` for available keys
-=-=-=-=-=- Deprecated -=-=-=-=-=-
breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
item-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
item-margin-left: {Number | String | Null}, // deprecated after 3.9.0
item-margin-right: {Number | String | Null}, // deprecated after 3.9.0
item-margin-top: {Number | String | Null}, // deprecated after 3.9.0
shrink-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
shrink-margin-left: {Number | String | Null}, // deprecated after 3.9.0
shrink-margin-right: {Number | String | Null}, // deprecated after 3.9.0
shrink-margin-top: {Number | String | Null}, // deprecated after 3.9.0

Requires

clay-input-group-text-variant

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

Description

A mixin to create input-group-item 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
	// .input-group-text
	label: (
		// .input-group-text label
	),
	custom-control: (
		// .input-group-text .custom-control
		//     @include clay-custom-control-variant();
	),
	form-check: (
		// .input-group-text .form-check
		input: (
			// .input-group-text .form-check input[type='radio'],
			// .input-group-text .form-check input[type='checkbox']
		),
	),
	lexicon-icon: (
		// .input-group-text .lexicon-icon
	),
	media-breakpoint-down: (
		xs: (
			// @include media-breakpoint-down(xs) {
			//      @include clay-input-group-text-variant();
			// }
		),
		sm: (
			// @include media-breakpoint-down(sm) {
			//      @include clay-input-group-text-variant();
			// }
		),
		md: (
			// @include media-breakpoint-down(md) {
			//      @include clay-input-group-text-variant();
			// }
		),
		lg: (
			// @include media-breakpoint-down(lg) {
			//      @include clay-input-group-text-variant();
			// }
		),
	),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null}, // deprecated after 3.9.0

Requires

Used by

clay-input-group-item-variant

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

Description

A mixin to create input-group-item 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
	// .input-group-item
	focus: (
		// .input-group-item.focus
		//     @include clay-input-group-item-variant();
	),
	first-child: (
		// .input-group-item:first-child
	),
	input-group-prepend: (
		// .input-group-item.input-group-prepend
	),
	input-group-append: (
		// .input-group-item.input-group-append
	),
	btn: (
		// .input-group-item > .btn
		//     @include clay-button-variant();
	),
	btn-monospaced: (
		// .input-group-item > .btn-monospaced
		//     @include clay-button-variant();
	),
	dropdown: (
		// .input-group-item > .dropdown
	),
	form-control: (
		// .input-group-item > .form-control
		//     @include clay-form-control-variant();
		label: (
			// .input-group-item > .form-control .label
			//     @include clay-label-variant();
		),
	),
	form-file: (
		// .input-group-item > .form-file
		btn: (
			// .input-group-item > .form-file .btn
			//     @include clay-button-variant();
		),
	),
	textarea: (
		// .input-group-item > textarea.form-control,
		// .input-group-item > .form-control-textarea
		//     @include clay-form-control-variant();
	),
	form-control-plaintext: (
		// .input-group-item > .form-control-plaintext
		//     @include clay-form-control-variant();
	),
	input-group-text: (
		// .input-group-item > .input-group-text
		//     @include clay-input-group-text-variant();
	),
	input-group-inset-item: (
		// .input-group-item > .input-group-inset-item
		btn: (
			// .input-group-item > .input-group-inset-item > .btn
			//     @include clay-button-variant();
		),
		btn-monospaced: (
			// .input-group-item > .input-group-inset-item > .btn-monospaced
			//     @include clay-button-variant();
		),
		form-file: (
			// .input-group-item > .input-group-inset-item > .form-file
			btn: (
				// .input-group-item > .input-group-inset-item > .form-file .btn
				//     @include clay-button-variant();
			),
		),
	),
	form-control-inset: (
		// .input-group-item .form-control-inset
	),
)

Requires

Used by

clay-input-group-variant

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

Description

A mixin to create input-group 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
	// .input-group
	input-group-item: (
		// .input-group > .input-group-item
		//     @include clay-input-group-item-variant();
	),
	input-group-item-shrink: (
		// .input-group > .input-group-item-shrink
		//     @include clay-input-group-item-variant();
	),
	btn-primary: (
		// .input-group .btn-primary
		//     @include clay-button-variant();
	),
	btn-secondary: (
		// .input-group .btn-secondary
		//     @include clay-button-variant();
	),
	btn-unstyled: (
		// .input-group .btn-unstyled
		//     @include clay-button-variant();
	),
	media-breakpoint-down: (
		xs: (
			// @include media-breakpoint-down(xs) {
			//     @include clay-input-group-variant();
			// }
		),
		sm: (
			// @include media-breakpoint-down(sm) {
			//     @include clay-input-group-variant();
			// }
		),
		md: (
			// @include media-breakpoint-down(md) {
			//     @include clay-input-group-variant();
			// }
		),
		lg: (
			// @include media-breakpoint-down(lg) {
			//     @include clay-input-group-variant();
			// }
		),
	),
)

Requires

Used by

Labels

mixins

clay-label-size

Deprecated!

use clay-label-variant instead

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

Description

A mixin for creating .label size variants.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Example

border-width: {Number | String | List | Null}, // Default: $label-border-width
font-size: {Number | String | Null},
height: {Number | String | Null},
line-height: {Number | String | Null},
margin-bottom: {Number | String | Null},
margin-left: {Number | String | Null},
margin-right: {Number | String | Null},
margin-top: {Number | String | Null},
padding-x: {Number | String | Null},
padding-y: {Number | String | Null},
text-transform: {String | List | Null},
item-spacer-x: {Number | String | Null},
item-spacer-y: {Number | String | Null},
lexicon-icon-height: {Number | String | Null}, // Default: map-get($map, lexicon-icon-width)
lexicon-icon-margin-top: {Number | String | Null},
lexicon-icon-width: {Number | String | Null},
sticker-border-radius: {Number | String | List | Null},
sticker-size: {Number | String | Null},
close: {Map | Null}, // Pass parameters to `clay-close` mixin
c-inner: {Map | Null}, // Pass parameters to `clay-css` mixin

Requires

Used by

clay-label-variant

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

Description

A mixin for creating .label 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
	disabled: (
		// .your-variant-name:disabled, .your-variant-name.disabled
	),
	href: (
		// .your-variant-name[href], .your-variant-name[type], .your-variant-name[tabindex='0']
	),
	lexicon-icon: (
		// .your-variant-name .lexicon-icon
	),
	label-item: (
		// .your-variant-name .label-item
		lexicon-icon: (
			// This inherits from `lexicon-icon` unless you overwrite or unset it
			// .your-variant-name .label-item .lexicon-icon
		),
	),
	label-item-before: (
		// .your-variant-name .label-item-before
	),
	label-item-after: (
		// .your-variant-name .label-item-after
	),
	link: (
		// .your-variant-name a, .your-variant-name .btn-unstyled
		hover: (),
		focus: (),
		active: (),
		active-class: (),
		show: (),
		disabled: (
			active: (),
		),
		c-inner: (),
		lexicon-icon: (),
	),
	close: (
		hover: (),
		focus: (),
		active: (),
		active-class: (),
		disabled: (
			active: (),
		),
		c-inner: (),
		lexicon-icon: (),
	),
	sticker: (
		// .your-variant-name .sticker
	),
	sticker-overlay: (
		// .your-variant-name .sticker-overlay
	),
	c-inner: (),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {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-color: {Color | String | Null}, // deprecated after 3.7.0
hover-text-decoration: {String | Null}, // deprecated after 3.7.0
focus-bg: {Color | String | 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-outline: {Number | String | Null}, // deprecated after 3.7.0
focus-text-decoration: {String | Null}, // deprecated after 3.7.0
disabled-bg: {Color | String | 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
link-color: {Color | String | Null}, // deprecated after 3.7.0
link-text-decoration: {String | Null}, // deprecated after 3.7.0
link-hover-color: {Color | String | Null}, // deprecated after 3.7.0
link-hover-text-decoration: {String | Null}, // deprecated after 3.7.0
link-hover: {Map | Null}, // deprecated after 3.38.0

Requires

Used by

variables

label-primary-color

Deprecated!

as of v2.4.1 use the Sass map $label-primary instead

$label-primary-color: $primary !default;

label-primary-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-primary instead

$label-primary-hover-color: clay-darken($label-primary-color, 10%) !default;

label-primary-bg

Deprecated!

as of v2.4.1 use the Sass map $label-primary instead

$label-primary-bg: $white !default;

label-primary-hover-bg

Deprecated!

as of v2.4.1 use the Sass map $label-primary instead

$label-primary-hover-bg: null !default;

label-primary-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-primary instead

$label-primary-border-color: $label-primary-color !default;

label-primary-hover-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-primary instead

$label-primary-hover-border-color: $label-primary-hover-color !default;

label-primary-link-color

Deprecated!

as of v2.4.1 use the Sass map $label-primary instead

$label-primary-link-color: null !default;

label-primary-link-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-primary instead

$label-primary-link-hover-color: $label-primary-hover-color !default;

label-secondary-color

Deprecated!

as of v2.4.1 use the Sass map $label-secondary instead

$label-secondary-color: $secondary !default;

label-secondary-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-secondary instead

$label-secondary-hover-color: clay-darken($label-secondary-color, 10%) !default;

label-secondary-bg

Deprecated!

as of v2.4.1 use the Sass map $label-secondary instead

$label-secondary-bg: $white !default;

label-secondary-hover-bg

Deprecated!

as of v2.4.1 use the Sass map $label-secondary instead

$label-secondary-hover-bg: null !default;

label-secondary-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-secondary instead

$label-secondary-border-color: $label-secondary-color !default;

label-secondary-hover-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-secondary instead

$label-secondary-hover-border-color: $label-secondary-hover-color !default;

label-secondary-link-color

Deprecated!

as of v2.4.1 use the Sass map $label-secondary instead

$label-secondary-link-color: null !default;

label-secondary-link-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-secondary instead

$label-secondary-link-hover-color: $label-secondary-hover-color !default;

label-success-color

Deprecated!

as of v2.4.1 use the Sass map $label-success instead

$label-success-color: $success !default;

label-success-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-success instead

$label-success-hover-color: clay-darken($label-success-color, 10%) !default;

label-success-bg

Deprecated!

as of v2.4.1 use the Sass map $label-success instead

$label-success-bg: $white !default;

label-success-hover-bg

Deprecated!

as of v2.4.1 use the Sass map $label-success instead

$label-success-hover-bg: null !default;

label-success-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-success instead

$label-success-border-color: $label-success-color !default;

label-success-hover-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-success instead

$label-success-hover-border-color: $label-success-hover-color !default;

label-success-link-color

Deprecated!

as of v2.4.1 use the Sass map $label-success instead

$label-success-link-color: null !default;

label-success-link-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-success instead

$label-success-link-hover-color: $label-success-hover-color !default;

label-info-color

Deprecated!

as of v2.4.1 use the Sass map $label-info instead

$label-info-color: $info !default;

label-info-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-info instead

$label-info-hover-color: clay-darken($label-info-color, 10%) !default;

label-info-bg

Deprecated!

as of v2.4.1 use the Sass map $label-info instead

$label-info-bg: $white !default;

label-info-hover-bg

Deprecated!

as of v2.4.1 use the Sass map $label-info instead

$label-info-hover-bg: null !default;

label-info-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-info instead

$label-info-border-color: $label-info-color !default;

label-info-hover-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-info instead

$label-info-hover-border-color: $label-info-hover-color !default;

label-info-link-color

Deprecated!

as of v2.4.1 use the Sass map $label-info instead

$label-info-link-color: null !default;

label-info-link-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-info instead

$label-info-link-hover-color: $label-info-hover-color !default;

label-warning-color

Deprecated!

as of v2.4.1 use the Sass map $label-warning instead

$label-warning-color: $warning !default;

label-warning-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-warning instead

$label-warning-hover-color: clay-darken($label-warning-color, 10%) !default;

label-warning-bg

Deprecated!

as of v2.4.1 use the Sass map $label-warning instead

$label-warning-bg: $white !default;

label-warning-hover-bg

Deprecated!

as of v2.4.1 use the Sass map $label-warning instead

$label-warning-hover-bg: null !default;

label-warning-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-warning instead

$label-warning-border-color: $label-warning-color !default;

label-warning-hover-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-warning instead

$label-warning-hover-border-color: $label-warning-hover-color !default;

label-warning-link-color

Deprecated!

as of v2.4.1 use the Sass map $label-warning instead

$label-warning-link-color: null !default;

label-warning-link-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-warning instead

$label-warning-link-hover-color: $label-warning-hover-color !default;

label-danger-color

Deprecated!

as of v2.4.1 use the Sass map $label-danger instead

$label-danger-color: $danger !default;

label-danger-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-danger instead

$label-danger-hover-color: clay-darken($label-danger-color, 10%) !default;

label-danger-bg

Deprecated!

as of v2.4.1 use the Sass map $label-danger instead

$label-danger-bg: $white !default;

label-danger-hover-bg

Deprecated!

as of v2.4.1 use the Sass map $label-danger instead

$label-danger-hover-bg: null !default;

label-danger-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-danger instead

$label-danger-border-color: $label-danger-color !default;

label-danger-hover-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-danger instead

$label-danger-hover-border-color: $label-danger-hover-color !default;

label-danger-link-color

Deprecated!

as of v2.4.1 use the Sass map $label-danger instead

$label-danger-link-color: null !default;

label-danger-link-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-danger instead

$label-danger-link-hover-color: $label-danger-hover-color !default;

label-light-color

Deprecated!

as of v2.4.1 use the Sass map $label-light instead

$label-light-color: $light !default;

label-light-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-light instead

$label-light-hover-color: clay-darken($label-light-color, 10%) !default;

label-light-bg

Deprecated!

as of v2.4.1 use the Sass map $label-light instead

$label-light-bg: $gray-800 !default;

label-light-hover-bg

Deprecated!

as of v2.4.1 use the Sass map $label-light instead

$label-light-hover-bg: null !default;

label-light-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-light instead

$label-light-border-color: $label-light-color !default;

label-light-hover-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-light instead

$label-light-hover-border-color: $label-light-hover-color !default;

label-light-link-color

Deprecated!

as of v2.4.1 use the Sass map $label-light instead

$label-light-link-color: null !default;

label-light-link-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-light instead

$label-light-link-hover-color: $label-light-hover-color !default;

label-dark-color

Deprecated!

as of v2.4.1 use the Sass map $label-dark instead

$label-dark-color: $dark !default;

label-dark-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-dark instead

$label-dark-hover-color: clay-darken($label-dark-color, 10%) !default;

label-dark-bg

Deprecated!

as of v2.4.1 use the Sass map $label-dark instead

$label-dark-bg: $white !default;

label-dark-hover-bg

Deprecated!

as of v2.4.1 use the Sass map $label-dark instead

$label-dark-hover-bg: null !default;

label-dark-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-dark instead

$label-dark-border-color: $label-dark-color !default;

label-dark-hover-border-color

Deprecated!

as of v2.4.1 use the Sass map $label-dark instead

$label-dark-hover-border-color: $label-dark-hover-color !default;

label-dark-link-color

Deprecated!

as of v2.4.1 use the Sass map $label-dark instead

$label-dark-link-color: null !default;

label-dark-link-hover-color

Deprecated!

as of v2.4.1 use the Sass map $label-dark instead

$label-dark-link-hover-color: $label-dark-hover-color !default;

Line Clamp

mixins

clay-line-clamp

@mixin clay-line-clamp($lines: 3, $line-height: $line-height-base, $font-size: 1em) { ... }

Description

A mixin for truncating text to a specific number of lines. Browsers that support -webkit-line-clamp (Chrome, Safari, and Firefox 68+) will show an ellipsis to indicate truncated text. Browsers that don't support it will be missing the ellipsis (IE, Edge, Firefox 67 and below).

Parameters

NameDescriptionTypeDefault value
$lines

The number of lines to clamp

Number3
$line-height

The element's line-height

Number$line-height-base
$font-size

The font-size of the element

Number1em

Links

mixins

clay-link

@mixin clay-link($map) { ... }

Description

A mixin for creating a link component. This generally should be used with the a or button element.

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
	before: (
		// .link::before
	),
	after: (
		// .link::after
	),
	link: (
		// .link:link
		before: (
			// .link:link::before
		),
		after: (
			// .link:link::after
		),
		inline-item: (
			// .link:link .inline-item
		),
		inline-item:-before (
			// .link:link .inline-item-before
		),
		inline-item-middle: (
			// .link:link .inline-item-middle
		),
		inline-item-after: (
			// .link:link .inline-item-after
		),
	),
	visited: (
		// .link:visited
		before: (
			// .link:visited::before
		),
		after: (
			// .link:visited::after
		),
		inline-item: (
			// .link:visited .inline-item
		),
		inline-item:-before (
			// .link:visited .inline-item-before
		),
		inline-item-middle: (
			// .link:visited .inline-item-middle
		),
		inline-item-after: (
			// .link:visited .inline-item-after
		),
	),
	hover: (
		// .link:hover
		before: (
			// .link:hover::before
		),
		after: (
			// .link:hover::after
		),
		inline-item: (
			// .link:hover .inline-item
		),
		inline-item:-before (
			// .link:hover .inline-item-before
		),
		inline-item-middle: (
			// .link:hover .inline-item-middle
		),
		inline-item-after: (
			// .link:hover .inline-item-after
		),
	),
	focus: (
		// .link:focus
		before: (
			// .link:focus::before
		),
		after: (
			// .link:focus::after
		),
		inline-item: (
			// .link:focus .inline-item
		),
		inline-item:-before (
			// .link:focus .inline-item-before
		),
		inline-item-middle: (
			// .link:focus .inline-item-middle
		),
		inline-item-after: (
			// .link:focus .inline-item-after
		),
	),
	active: (
		// .link:active
		before: (
			// .link:active::before
		),
		after: (
			// .link:active::after
		),
		inline-item: (
			// .link:active .inline-item
		),
		inline-item:-before (
			// .link:active .inline-item-before
		),
		inline-item-middle: (
			// .link:active .inline-item-middle
		),
		inline-item-after: (
			// .link:active .inline-item-after
		),
	),
	active-class: (
		// .link.active
		before: (
			// .link.active::before
		),
		after: (
			// .link.active::after
		),
		inline-item: (
			// .link.active .inline-item
		),
		inline-item:-before (
			// .link.active .inline-item-before
		),
		inline-item-middle: (
			// .link.active .inline-item-middle
		),
		inline-item-after: (
			// .link.active .inline-item-after
		),
	),
	disabled: (
		// .link:disabled, .link.disabled
		before: (
			// .link:disabled::before, .link.disabled::before
		),
		after: (
			// .link:disabled::after, .link.disabled::after
		),
		active: (
			// .link:disabled:active, .link.disabled:active
			before: (
				// .link:disabled:active::before, .link.disabled:active::before
			),
			after: (
				// .link:disabled:active::after, .link.disabled:active::after
			),
		),
		inline-item: (
			// .link:disabled .inline-item
		),
		inline-item:-before (
			// .link:disabled .inline-item-before
		),
		inline-item-middle: (
			// .link:disabled .inline-item-middle
		),
		inline-item-after: (
			// .link:disabled .inline-item-after
		),
	),
	btn-focus: (
		// .link[type]:focus
	),
	show: (
		// .link[aria-expanded='true'], .link.show, .show .link
		before: (
			// .link.show::before
		),
		after: (
			// .link.show::after, .link.disabled::after
		),
	),
	c-inner: (
		enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
		// .link > .c-inner
	),
	inline-item: (
		// .link .inline-item
	),
	inline-item-before: (
		// .link .inline-item-before
	),
	inline-item-middle: (
		// .link .inline-item-middle
		inline-item-middle: (
			// .link .inline-item-middle + .inline-item-middle
		),
	),
	inline-item-after: (
		// .link .inline-item-after
	),
	lexicon-icon: (
		// .link .lexicon-icon
	),
)
-=-=-=-=-=- 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-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-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-color: {Color | String | Null}, // deprecated after 3.9.0
active-font-weight: {Number | String | Null}, // deprecated after 3.9.0
active-z-index: {Number | String | Null}, // deprecated after 3.9.0
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-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-pointer-events: {String | Null}, // deprecated after 3.9.0
disabled-text-decoration: {String | Null}, // deprecated after 3.9.0
disabled-active: {Map | Null}, // deprecated after 3.39.0
btn-focus-box-shadow: {String | List | Null}, // deprecated after 3.9.0
btn-focus-outline: {Number | String | Null}, // deprecated after 3.9.0
btn-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-left: {Number | String | Null}, // deprecated after 3.9.0
lexicon-icon-margin-right: {Number | String | Null}, // deprecated after 3.9.0
lexicon-icon-margin-top: {Number | String | Null}, // deprecated after 3.9.0

Requires

Used by

clay-text-typography

@mixin clay-text-typography($map) { ... }

Description

A mixin for styling a text element (e.g., h1, div, span). This is used in Clay CSS for *-title, *-subtitle, and *-tertiary-title elements.

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
See Mixin `clay-css` for available keys to pass into the base selector
link: {Map | Null},  // See Mixin `clay-css` for available keys
-=-=-=-=-=- Deprecated -=-=-=-=-=-
clay-link: {Map | Null}, // deprecated after 3.9.0 maps to link

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-title

@mixin clay-title($map) { ... }

Description

Shortcut for mixin clay-text-typography

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs.

Map—

Requires

variables

link-outline-border-radius

Deprecated!

as of v3.4.0 use the Sass map $link-outline instead

$link-outline-border-radius: if(
	variable-exists(btn-border-radius),
	$btn-border-radius,
	$border-radius
) !default;

link-outline-border-width

Deprecated!

as of v3.4.0 use the Sass map $link-outline instead

$link-outline-border-width: if(
	variable-exists(btn-border-width),
	$btn-border-width,
	$border-width
) !default;

link-outline-font-size

Deprecated!

as of v3.4.0 use the Sass map $link-outline instead

$link-outline-font-size: if(
	variable-exists(btn-font-size-sm),
	$btn-font-size-sm,
	$font-size-sm
) !default;

link-outline-font-weight

Deprecated!

as of v3.4.0 use the Sass map $link-outline instead

$link-outline-font-weight: $font-weight-semi-bold !default;

link-outline-line-height

Deprecated!

as of v3.4.0 use the Sass map $link-outline instead

$link-outline-line-height: if(
	variable-exists(btn-line-height-sm),
	$btn-line-height-sm,
	$line-height-sm
) !default;

link-outline-padding-x

Deprecated!

as of v3.4.0 use the Sass map $link-outline instead

$link-outline-padding-x: if(
	variable-exists(btn-padding-x-sm),
	$btn-padding-x-sm,
	0.5rem
) !default;

link-outline-padding-y

Deprecated!

as of v3.4.0 use the Sass map $link-outline instead

$link-outline-padding-y: if(
	variable-exists(btn-padding-x-sm),
	$btn-padding-y-sm,
	0.25rem
) !default;

link-outline-transition

Deprecated!

as of v3.4.0 use the Sass map $link-outline instead

$link-outline-transition: $component-transition !default;

link-monospaced-size

Deprecated!

as of v3.4.0 use the Sass map $link-monospaced instead

$link-monospaced-size: if(
	variable-exists(btn-monospaced-size-sm),
	$btn-monospaced-size-sm,
	1.9375rem
) !default;

List Group

mixins

list-unstyled

@mixin list-unstyled() { ... }

Description

A Bootstrap 4 mixin for removing symbols from list elements.

Parameters

None.

list-group-item-variant

Deprecated!
@mixin list-group-item-variant($state, $background, $color) { ... }

Description

A Bootstrap 4 Mixin for creating .list-group-item-{state} variants.

Parameters

NameDescriptionTypeDefault value
$state

The state name

String—
$background

The background-color

Color—
$color

The text color

Color—

Requires

clay-list-group-notification-item-variant

@mixin clay-list-group-notification-item-variant($map) { ... }

Description

A mixin for creating .list-group-notification .list-group-item variants.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Example

bg: {Color | String | Null}, // Default: $list-group-bg
border-bottom-color: {Color | Null}, // Default: $list-group-notification-item-border-bottom-color
border-left-color: {Color | Null}, // Default: $list-group-notification-item-border-left-color
border-right-color: {Color | Null}, // Default: $list-group-notification-item-border-right-color
border-top-color: {Color | Null}, // Default: $list-group-notification-item-border-top-color
border-bottom-width: {Number | Null}, // Default: $list-group-notification-item-border-bottom-width
border-left-width: {Number | Null}, // Default: $list-group-notification-item-border-left-width
border-right-width: {Number | Null}, // Default: $list-group-notification-item-border-right-width
border-top-width: {Number | Null}, // Default: $list-group-notification-item-border-top-width
border-bottom-left-radius: {Number | String | Null},
border-bottom-right-radius: {Number | String | Null},
border-top-left-radius: {Number | String | Null},
border-top-right-radius: {Number | String | Null},
color: {Color | String | Null},
active-bg: {Color | String | Null}, // Default: $list-group-active-bg
active-border-bottom-color: {Color | Null}, // Default: $list-group-notification-item-active-border-bottom-color
active-border-left-color: {Color | Null}, // Default: $list-group-notification-item-active-border-left-color
active-border-right-color: {Color | Null}, // Default: $list-group-notification-item-active-border-right-color
active-border-top-color: {Color | Null}, // Default: $list-group-notification-item-active-border-top-color

Requires

TODO's

    • Add @example
    • Add @link to documentation

Loaders

mixins

clay-loading-animation-variant

Deprecated!

The dotted spinner was replaced by the circular spinner with gradient.

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

Description

A mixin for creating and customizing the Clay CSS Loading Indicator.

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
border-radius: {Number | String | List | Null}, // Default: 50%
color: {Color}, // Default: $secondary
transform: {String | List | Null}, // Default: scale(0.33334)
animation: {String | List | Null}, // Default: 1.2s ease-out infinite
animation-name: {String}, // *required
ball-0-scale: {Number}, // Default: 0
ball-1-scale: {Number}, // Default: -0.10em
ball-2-scale: {Number}, // Default: -0.15em
ball-3-scale: {Number}, // Default: -0.20em
ball-4-scale: {Number}, // Default: -0.25em
ball-5-scale: {Number}, // Default: -0.35em
ball-0-alpha: {Number}, // Default: 1
ball-1-alpha: {Number}, // Default: 0.80
ball-2-alpha: {Number}, // Default: 0.60
ball-3-alpha: {Number}, // Default: 0.40
ball-4-alpha: {Number}, // Default: 0.20
ball-5-alpha: {Number}, // Default: 0.10
ball-0-color: {Color} // Default: rgba($color, $ball-0-alpha)
ball-1-color: {Color}, // Default: rgba($color, $ball-1-alpha)
ball-2-color: {Color}, // Default: rgba($color, $ball-2-alpha)
ball-3-color: {Color}, // Default: rgba($color, $ball-3-alpha)
ball-4-color: {Color}, // Default: rgba($color, $ball-4-alpha)
ball-5-color: {Color}, // Default: rgba($color, $ball-5-alpha)

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-spinner-variant

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

Description

A mixin for creating and customizing the Clay CSS Spinners.

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
	mixin-name: {String}, // Accepts the string 'clay-loading-animation-variant' to revert to the old mixin
	// .loading-animation
	before: (
		// .loading-animation::before
	),
	after: (
		// .loading-animation::after
	),
)

Requires

Menubar

mixins

clay-menubar-vertical-expand

@mixin clay-menubar-vertical-expand($map) { ... }

Description

A mixin for creating alternate breakpoints for .menubar-vertical-expand-{breakpoint}.

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-up: {String}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead
breakpoint-down: {String}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
border-color: {Color | String | List | Null},
border-style: {String | List | Null},
border-width: {Number | String | List | Null},
max-width: {String | Number}, // Default: 15.625rem
border-color-mobile: {Color | String | List}, // Default: transparent
border-style-mobile: {String | List}, // Default: solid
border-width-mobile: {Number | String | List}, // Default: 0.0625rem
margin-bottom-mobile: {Number | String | Null},
margin-left-mobile: {Number | String | Null},
margin-right-mobile: {Number | String | Null},
margin-top-mobile: {Number | String | Null},
max-width-mobile: {Number | String}, // Default: none
min-height-mobile: {Number | String}, // Default: 3rem
padding-x-mobile: {Number | String}, // Default: 0.5rem
padding-y-mobile: {Number | String | Null},
collapse-border-color-mobile: {Color | String}, // Default: transparent
collapse-border-style-mobile: {String | List}, // Default: solid
collapse-border-width-mobile: {Number | String | List}, // Default: 0.0625rem
collapse-inner-spacer-y-mobile: {Number | String}, // Default: 0.5rem
collapse-margin-top-mobile: {Number | String | Null},
collapse-max-width-mobile: {Number | String | Null},
collapse-left-mobile: {Number | String}, // Default: -0.0625rem
collapse-right-mobile: {Number | String}, // Default: -0.0625rem
collapse-z-index-mobile: {Number | String | Null},
toggler-border-color-mobile: {Color | String | List}, // Default: transparent
toggler-border-style-mobile: {String | List}, // Default: solid
toggler-border-width-mobile: {Number | String | List}, // Default: 0.0625rem
toggler-height-mobile: {Number | String}, // Default: 2rem
toggler-padding-x-mobile: {Number | String}, // Default: 0.5rem
toggler-padding-y-mobile: {Number | String | Null},
toggler-c-inner: {Map | Null}, // Pass parameters to `clay-css` mixin

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-menubar-vertical-variant

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

Description

A mixin that creates a menubar-vertical-expand-{breakpoint} variant.

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-up: {String}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead
breakpoint-down: {String}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
// `bg` is deprecated use `background-color` instead
bg: {Color | String | Null},
border-color: {Color | String | List | Null},
border-style: {String | List | Null},
// `bg-mobile` is deprecated use Sass map `mobile` instead
bg-mobile: {Color | String | Null},
// `border-color-mobile` is deprecated use Sass map `mobile` instead
border-color-mobile: {Color | String | List | Null},
// `border-style-mobile` is deprecated use Sass map `mobile` instead
border-style-mobile: {String | List | Null},
// `link-bg` is deprecated use Sass map `link` instead
link-bg: {Color | String | Null},
// `link-border-radius` is deprecated use Sass map `link` instead
link-border-radius: {Number | String | List | Null},
// `link-color` is deprecated use Sass map `link` instead
link-color: {Color | String},
// `link-hover-bg` is deprecated use Sass map `link` instead
link-hover-bg: {Color | String | Null},
// `link-hover-color` is deprecated use Sass map `link` instead
link-hover-color: {Color | String},
// `link-active-bg` is deprecated use Sass map `link` instead
link-active-bg: {Color | String | Null},
// `link-active-color` is deprecated use Sass map `link` instead
link-active-color: {Color | String},
// `link-active-font-weight` is deprecated use Sass map `link` instead
link-active-font-weight: {Number | String | Null},
// `link-disabled-bg` is deprecated use Sass map `link` instead
link-disabled-bg: {Color | String | Null},
// `link-disabled-color` is deprecated use Sass map `link` instead
link-disabled-color: {Color | String},
link: {Map | Null}, // Pass parameters to `clay-link` mixin
// `link-border-radius-mobile` is deprecated use Sass map `link-mobile` instead
link-border-radius-mobile: {Number | String | List | Null},
// `link-color-mobile` is deprecated use Sass map `link-mobile` instead
link-color-mobile: {Color | String},
// `link-hover-bg-mobile` is deprecated use Sass map `link-mobile` instead
link-hover-bg-mobile: {Color | String},
// `link-hover-color-mobile` is deprecated use Sass map `link-mobile` instead
link-hover-color-mobile: {Color | String},
// `link-active-bg-mobile` is deprecated use Sass map `link-mobile` instead
link-active-bg-mobile: {Color | String},
// `link-active-font-weight-mobile` is deprecated use Sass map `link-mobile` instead
link-active-font-weight-mobile: {Number | String},
// `link-active-color-mobile` is deprecated use Sass map `link-mobile` instead
link-active-color-mobile: {Color | String},
// `link-disabled-bg-mobile` is deprecated use Sass map `link-mobile` instead
link-disabled-bg-mobile: {Color | String},
// `link-disabled-color-mobile` is deprecated use Sass map `link-mobile` instead
link-disabled-color-mobile: {Color | String},
link-mobile: {Map | Null}, // Pass parameters to `clay-link` mixin
collapse: {Map | Null}, // Pass parameters to `clay-css` mixin
// `collapse-bg-mobile` is deprecated use Sass map `collapse-mobile` instead
collapse-bg-mobile: {Color | String},
// `collapse-border-color-mobile` is deprecated use Sass map `collapse-mobile` instead
collapse-border-color-mobile: {Color | String},
// `collapse-border-radius-mobile` is deprecated use Sass map `collapse-mobile` instead
collapse-border-radius-mobile: {Number | String | List},
// `collapse-border-style-mobile` is deprecated use Sass map `collapse-mobile` instead
collapse-border-style-mobile: {String | List | Null},
// `collapse-box-shadow-mobile` is deprecated use Sass map `collapse-mobile` instead
collapse-box-shadow-mobile: {String | List},
collapse-mobile: {Map | Null}, // Pass parameters to `clay-css` mixin
nav-nested-margins-item: {Map | Null}, // Pass parameters to `clay-css` mixin
nav-nested-margins-item-mobile: {Map | Null}, // Pass parameters to `clay-css` mixin
// `toggler-border-color-mobile` is deprecated use Sass map `toggler-mobile` instead
toggler-border-color-mobile: {Color | String | Null},
// `toggler-border-style-mobile` is deprecated use Sass map `toggler-mobile` instead
toggler-border-style-mobile: {String | List | Null},
// `toggler-color-mobile` is deprecated use Sass map `toggler-mobile` instead
toggler-color-mobile: {Color | String},
// `toggler-font-size-mobile` is deprecated use Sass map `toggler-mobile` instead
toggler-font-size-mobile: {Number | String | Null},
// `toggler-font-weight-mobile` is deprecated use Sass map `toggler-mobile` instead
toggler-font-weight-mobile: {Number | String | Null},
toggler-mobile: {Map | Null}, // Pass parameters to `clay-button-variant` mixin

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

Modals

mixins

clay-modal-variant

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

Description

A mixin to create a Modal color variant. This is used in .modal-danger, .modal-info, .modal-success, and .modal-warning.

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
header: {Map | Null}, // See Mixin `clay-css` for available keys
header-close: {Map | Null}, // See Mixin `clay-close` for available keys
body: {Map | Null}, // See Mixin `clay-css` for available keys
footer: {Map | Null}, // See Mixin `clay-css` for available keys
-=-=-=-=-=- Deprecated -=-=-=-=-=-
header-bg: {Color | String | Null}, // deprecated after 3.9.0
header-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
header-color: {Color | String | Null}, // deprecated after 3.9.0
header-close-color: {Color | String}, // deprecated in v2.0.0-rc.12
body-bg: {Color | String | Null}, // deprecated after 3.9.0
body-color: {Color | String | Null}, // deprecated after 3.9.0
footer-bg: {Color | String | Null}, // deprecated after 3.9.0
footer-border-color: {Color | String | List | Null}, // deprecated after 3.9.0

Requires

Used by

Nav

mixins

clay-nav-nested

@mixin clay-nav-nested($indent: 15px, $nest-level: 15, $nav-class: ".nav", $i: 1) { ... }

Description

A mixin to indent each nested navigation using padding-left.

Parameters

NameDescriptionTypeDefault value
$indent

The amount to indent in pixels

Number15px
$nest-level

The number of times to iterate

Number15
$nav-class

The class name of nav the element

String".nav"
$i

The starting loop index

Number1

TODO's

    • Add @example
    • Add @link to documentation

nav-divider

Deprecated!
@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) { ... }

Description

A Bootstrap 4 mixin for generating a .nav-divider. Used within dropdowns and nav lists.

Parameters

NameDescriptionTypeDefault value
$color—Color$nav-divider-color
$margin-y—Number$nav-divider-margin-y
$ignore-warning—Boolfalse

Requires

clay-nav-variant

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

Description

A mixin to create a .nav color variant.

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
	// .nav
	nav-link: (
		// .nav .nav-link
		// See clay-link for additional selectors
	),
	nav-link-monospaced: (
		// .nav .nav-link-monospaced
		// See clay-link for additional selectors
	),
	nav-btn: (
		// .nav .nav-btn
		// See clay-button-variant for additional selectors
	),
	nav-btn-monospaced: (
		// .nav .nav-btn-monospaced
		// See clay-button-variant for additional selectors
	),
	nav-item: (
		// .nav .nav-item
		before: (
			// .nav .nav-item::before
		),
		after: (
			// .nav .nav-item::after
		),
	),
	nav-divider: (
		// .nav .nav-divider
		before: (
			// .nav .nav-divider::before
		),
		after: (
			// .nav .nav-divider::after
		),
	),
	nav-form: (
		// .nav .nav-form
	),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null},
link-bg: {Color | String | Null},
link-border-radius: {Number | String | List | Null},
link-color: {Color | String | Null},
link-font-weight: {Number | String | Null},
link-hover-bg: {Color | String | Null},
link-hover-color: {Color | String | Null},
link-focus-bg: {Color | String | Null},
link-focus-color: {Color | String | Null},
link-disabled-bg: {Color | String}, // Default: transparent
link-disabled-color: {Color | String}, // Default: $nav-link-disabled-color
link-disabled-opacity: {Number | String | Null},
link-active-bg: {Color | String | Null},
link-active-color: {Color | String | Null},
link-active-font-weight: {Number | String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

Pagination

mixins

pagination-size

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

Description

A Bootstrap 4 mixin for generating larger or smaller pagination component.

Parameters

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

clay-pagination-items-per-page-variant

@mixin clay-pagination-items-per-page-variant($map) { ... }

Description

A mixin to help create .pagination-items-per-page 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
	// .pagination-items-per-page
	link: (
		// .pagination-items-per-page > a, .pagination-items-per-page > button
		hover: (
			// .pagination-items-per-page > a:hover, .pagination-items-per-page > button:hover
		),
		focus: (
			// .pagination-items-per-page > a:focus, .pagination-items-per-page > a.focus,
			// .pagination-items-per-page > button:focus, .pagination-items-per-page > button.focus
		),
		active: (
			// .pagination-items-per-page > a:active, .pagination-items-per-page > a.active,
			// .pagination-items-per-page > button:active, .pagination-items-per-page > button.active,
			// .pagination-items-per-page.active > a, .pagination-items-per-page.active > button
		),
		show: (
			// .pagination-items-per-page > a[aria-expanded='true'],
			// .pagination-items-per-page > a.show,
			// .pagination-items-per-page > button[aria-expanded='true'],
			// .pagination-items-per-page > button.show
		),
		disabled: (
			// .pagination-items-per-page > a:disabled, .pagination-items-per-page > a.disabled,
			// .pagination-items-per-page > button:disabled, .pagination-items-per-page > button.disabled,
			// .pagination-items-per-page.disabled > a, .pagination-items-per-page.disabled > button
		),
	),
	dropdown-menu: (
		// .pagination-items-per-page .dropdown-menu
		// See `clay-dropdown-menu-variant`
	),
	lexicon-icon: (
		// .pagination-items-per-page .lexicon-icon
	),
	pagination-results: (
		// .pagination-items-per-page + .pagination-results
	),
	media-breakpoint-down: (
		xs: (
			// @include media-breakpoint-down(xs) {
			//     See above.
			// }
		),
		sm: (
			// @include media-breakpoint-down(sm) {
			//     See above.
			// }
		),
		md: (
			// @include media-breakpoint-down(md) {
			//     See above.
			// }
		),
		lg: (
			// @include media-breakpoint-down(lg) {
			//     See above.
			// }
		),
	),
)

Requires

Used by

clay-pagination-variant

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

Description

A mixin to help create .pagination 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
	// .pagination
	page-item: (
		// .pagination .page-item
	),
	page-link: (
		// .pagination .page-link
		hover: (
			// .pagination .page-link:hover
		),
		focus: (
			// .pagination .page-link:focus, .pagination .page-link.focus
		),
		active: (
			// .pagination .page-link:active, .pagination .page-item.active .page-link
		),
		show: (
			// .pagination .page-link[aria-expanded='true'], .pagination .page-link.show
		),
		disabled: (
			// .pagination .page-link:disabled, .pagination .page-link.disabled,
			// .pagination .page-item.disabled .page-link
		),
	),
	page-link-first: (
		// .pagination .page-item:first-child .page-link, .page-link-first
	),
	page-link-last: (
		// .pagination .page-item:last-child .page-link, .page-link-last
	),
	pagination: (
		// Used for .pagination-bar
		// .pagination-bar .pagination
		// See `clay-pagination-variant`
	),
	pagination-items-per-page: (
		// Used for .pagination-bar
		// .pagination-bar .pagination-items-per-page
		// See `clay-pagination-items-per-page-variant`
	),
	media-breakpoint-down: (
		xs: (
			// @include media-breakpoint-down(xs) {
			//     See above.
			// }
		),
		sm: (
			// @include media-breakpoint-down(sm) {
			//     See above.
			// }
		),
		md: (
			// @include media-breakpoint-down(md) {
			//     See above.
			// }
		),
		lg: (
			// @include media-breakpoint-down(lg) {
			//     See above.
			// }
		),
	),
)

Requires

variables

pagination-item-margin-x

Deprecated!

as of v2 use the Sass map $pagination-item instead

$pagination-item-margin-x: -0.5px !default;

pagination-item-margin-y

Deprecated!

as of v2 use the Sass map $pagination-item instead

$pagination-item-margin-y: null !default;

pagination-link-border-radius

Deprecated!

as of v2 use the Sass map $pagination-link instead

$pagination-link-border-radius: 0px !default;

pagination-link-cursor

Deprecated!

as of v2 use the Sass map $pagination-link instead

$pagination-link-cursor: pointer !default;

pagination-link-transition

Deprecated!

as of v2 use the Sass map $pagination-link instead

$pagination-link-transition: null !default;

pagination-disabled-cursor

Deprecated!

as of v2 use the Sass map $pagination-link-disabled instead

$pagination-disabled-cursor: $disabled-cursor !default;

pagination-disabled-opacity

Deprecated!

as of v2 use the Sass map $pagination-link-disabled instead

$pagination-disabled-opacity: 1 !default;

pagination-disabled-pointer-events

Deprecated!

as of v2 use the Sass map $pagination-link-disabled instead

$pagination-disabled-pointer-events: auto !default;

pagination-items-per-page-bg

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link instead

$pagination-items-per-page-bg: null !default;

pagination-items-per-page-border-color

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link instead

$pagination-items-per-page-border-color: $pagination-border-color !default;

pagination-items-per-page-border-radius

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link instead

$pagination-items-per-page-border-radius: $border-radius !default;

pagination-items-per-page-color

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link instead

$pagination-items-per-page-color: $pagination-color !default;

pagination-items-per-page-transition

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link instead

$pagination-items-per-page-transition: $pagination-link-transition !default;

pagination-items-per-page-hover-bg

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link-hover instead

$pagination-items-per-page-hover-bg: $pagination-hover-bg !default;

pagination-items-per-page-hover-border-color

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link-hover instead

$pagination-items-per-page-hover-border-color: $pagination-hover-border-color !default;

pagination-items-per-page-hover-color

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link-hover instead

$pagination-items-per-page-hover-color: $pagination-hover-color !default;

pagination-items-per-page-focus-box-shadow

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link-focus instead

$pagination-items-per-page-focus-box-shadow: $pagination-focus-box-shadow !default;

pagination-items-per-page-focus-outline

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link-focus instead

$pagination-items-per-page-focus-outline: 0 !default;

pagination-items-per-page-lexicon-icon-margin-left

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link instead

$pagination-items-per-page-lexicon-icon-margin-left: 0.125rem !default;

pagination-items-per-page-lexicon-icon-margin-top

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link instead

$pagination-items-per-page-lexicon-icon-margin-top: 0.125rem !default;

Panels

mixins

clay-panel-variant

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

Description

A mixin to create Panel variants. You can base your variant off .panel or create your own base class (e.g., <div class="panel my-custom-panel-variant"></div> or <div class="my-custom-panel"></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 mixin styles from being output. Default: true
See Mixin `clay-css` for available keys to pass into the base selector
header: {Map | Null}, // See Mixin `clay-css` for available keys
header-collapsed: {Map | Null}, // See Mixin `clay-css` for available keys
header-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
header-link: {Map | Null}, // See Mixin `clay-link` for available keys
title: {Map | Null}, // See Mixin `clay-css` for available keys
collapse-icon: {Map | Null}, // See Mixin `clay-css` for available keys
body: {Map | Null}, // See Mixin `clay-css` for available keys
footer: {Map | Null}, // See Mixin `clay-css` for available keys
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null}, // deprecated after 3.9.0
header-bg: {Color | String | Null}, // deprecated after 3.9.0
header-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
header-border-style: {String | List | Null}, // deprecated after 3.9.0
header-border-width: {Number | String | List | Null}, // deprecated after 3.9.0
header-color: {Color | String | Null}, // deprecated after 3.9.0
header-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
header-margin-left: {Number | String | Null}, // deprecated after 3.9.0
header-margin-right: {Number | String | Null}, // deprecated after 3.9.0
header-margin-top: {Number | String | Null}, // deprecated after 3.9.0
header-padding-bottom: {Number | String | Null}, // deprecated after 3.9.0
header-padding-left: {Number | String | Null}, // deprecated after 3.9.0
header-padding-right: {Number | String | Null}, // deprecated after 3.9.0
header-padding-top: {Number | String | Null}, // deprecated after 3.9.0
header-transition: {String | List | Null}, // deprecated after 3.9.0
header-collapsed-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
title-font-size: {Number | String | Null}, // deprecated after 3.9.0
title-font-weight: {Number | String | Null}, // deprecated after 3.9.0
title-text-transform: {String | List | Null}, // deprecated after 3.9.0
collapse-icon-bottom: {Number | String | Null}, // deprecated after 3.9.0
collapse-icon-font-size: {Number | String | Null}, // deprecated after 3.9.0
collapse-icon-left: {Number | String | Null}, // deprecated after 3.9.0
collapse-icon-right: {Number | String | Null}, // deprecated after 3.9.0
collapse-icon-top: {Number | String | Null}, // deprecated after 3.9.0
body-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
body-margin-left: {Number | String | Null}, // deprecated after 3.9.0
body-margin-right: {Number | String | Null}, // deprecated after 3.9.0
body-margin-top: {Number | String | Null}, // deprecated after 3.9.0
body-padding-bottom: {Number | String | Null}, // deprecated after 3.9.0
body-padding-left: {Number | String | Null}, // deprecated after 3.9.0
body-padding-right: {Number | String | Null}, // deprecated after 3.9.0
body-padding-top: {Number | String | Null}, // deprecated after 3.9.0
footer-bg: {Color | String | Null}, // deprecated after 3.9.0
footer-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
footer-color: {Color | String | Null}, // deprecated after 3.9.0

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

polyfills

functions

clay-div

@function clay-div($numerator, $denominator) { ... }

Description

A function that uses / as a division operation if the function div() does not exist. Dart Sass 1.33.0 changed / from a division operation to a list separator. Clay CSS will default to to using / as a division operation unless @use 'sass:math' as *; is declared to load the math module.

Parameters

NameDescriptionTypeDefault value
$numerator

The number to divide or dividend

Number—
$denominator

The number that divides the $numerator or divisor

Number—

Used by

Popovers

mixins

clay-popover-header-variant

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

Description

A mixin to help create .popover-header 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
	// .popover-header
	before: (
		// .popover-header::before
	),
	after: (
		// .popover-header::after
	),
	empty: (
		// .popover-header:empty
	),
	close: (
		// .popover-header .close
	),
)

Requires

Used by

clay-popover-variant

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

Description

A mixin to help create .popover 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
	// .popover
	arrow: (
		// .popover .arrow
		before: (
			// .popover .arrow::before
		),
		after: (
			// .popover .arrow::after
		),
	),
	popover-header: (
		// .popover .popover-header
		before: (
			// .popover .popover-header::before
		),
		after: (
			// .popover .popover-header::after
		),
		empty: (
			// .popover .popover-header:empty
		),
	),
	popover-body: (
		// .popover .popover-body
	),
	inline-scroller: (
		// .popover .inline-scroller
	),
	close: (
		// .popover .close
	),
)

Requires

Sheet

css

.sheet-lg

Deprecated!

as of v3.x use .container .sheet instead

.sheet-lg { ... }

mixins

sheet-footer-btn-block

@mixin sheet-footer-btn-block($map) { ... }

Description

A mixin to force .btn or .btn-group into block level elements at a max-width breakpoint.

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, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
btn-margin-bottom-mobile: {Number | String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

variables

sheet-lg-max-width

Deprecated!

as of 3.x.

$sheet-lg-max-width: 800px !default;

Sidebar

mixins

clay-sidebar-variant

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

Description

A mixin to create Sidebar color variants (e.g., <div class="sidebar my-custom-sidebar-variant"></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 mixin styles from being output. Default: true
	// .sidebar
	component-link: (
		// .sidebar .component-link
	),
	close: (
		// .sidebar .close
	),
	sidenav-start: (
		// .sidenav-start .sidebar, .sidenav-left .sidebar
	),
	sidenav-end: (
		// .sidenav-end .sidebar, .sidenav-right .sidebar
	),
	sidebar-header: (
		// .sidebar .sidebar-header
		component-title: (
			// .sidebar .sidebar-header .component-title
		),
		component-subtitle: (
			// .sidebar .sidebar-header .component-subtitle
		),
	),
	sidebar-body: (
		// .sidebar .sidebar-body
	),
	sidebar-footer: (
		// .sidebar .sidebar-footer
	),
	nav-nested: (
		// .sidebar .nav-nested
		nav-link: (
			// .sidebar .nav-nested .nav-link
		),
	),
	sidebar-list-group: (
		// .sidebar .sidebar-list-group
		list-group-item: (
			// .sidebar .sidebar-list-group .list-group-item
		),
		list-group-title: (
			// .sidebar .sidebar-list-group .list-group-title
		),
		list-group-subtitle: (
			// .sidebar .sidebar-list-group .list-group-subtitle
		),
		list-group-text: (
			// .sidebar .sidebar-list-group .list-group-text
		),
		list-group-subtext: (
			// .sidebar .sidebar-list-group .list-group-subtext
		),
		sticker: (
			// .sidebar .sidebar-list-group .sticker
		),
		sticker-secondary: (
			// .sidebar .sidebar-list-group .sticker-secondary
		),
	),
	sidebar-panel: (
		// .sidebar .sidebar-panel
	),
	sidebar-dt: (
		// .sidebar .sidebar-dt
	),
	sidebar-dd: (
		// .sidebar .sidebar-dd
	),
	panel-unstyled: (
		// .sidebar .panel-unstyled
	),
	component-navigation-bar: (
		// .sidebar .component-navigation-bar
	),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null},
panel-bg: {Color | String | Null},
component-header-title: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
component-header-subtitle: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
component-link: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
dt: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
dd: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
sidebar-list-group-item-bg: {Color | String | Null},
sidebar-list-group-item-border-color: {Color | String | List | Null},
sidebar-list-group-title: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
sidebar-list-group-subtitle: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
sidebar-list-group-text: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
sidebar-list-group-subtext: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
panel-unstyled: {Map | Null}, // Pass parameters to `clay-panel-variant` mixin

Requires

TODO's

    • Add @example
    • Add @link to documentation

Slideout

mixins

clay-slideout-variant

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

Description

A mixin to create .c-slideout 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
c-slideout-shown: {Map | Null}, // Pass parameters to `clay-css` mixin
c-slideout-tbar-shown: {Map | Null}, // Pass parameters to `clay-css` mixin
c-slideout-tbar-shown-sidebar: {Map | Null}, // Pass parameters to `clay-css` mixin
sidebar: {Map | Null}, // Pass parameters to `clay-css` mixin
sidebar-c-slideout-show: {Map | Null}, // Pass parameters to `clay-css` mixin
sidebar-c-slideout-transition: {Map | Null}, // Pass parameters to `clay-css` mixin
tbar-stacked: {Map | Null}, // Pass parameters to `clay-css` mixin
tbar-stacked-c-slideout-show: {Map | Null}, // Pass parameters to `clay-css` mixin
tbar-stacked-c-slideout-transition: {Map | Null}, // Pass parameters to `clay-css` mixin

Requires

Stickers

mixins

clay-sticker-size

Deprecated!

after 3.9.0 use clay-sticker-variant instead

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

Description

A mixin that helps create custom Sticker sizes.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Example

font-size: {Number | String | Null},
inline-item-font-size: {Number | String | Null},
outside-offset: {Number | String}, // Default: -(map-get($map, size) * 0.5)
size: {Number | String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-sticker-variant

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

Description

A mixin to create sticker variants. You can base your variant off .sticker or create your own base class (e.g., <span class="sticker my-custom-sticker-variant"></span> or <span class="my-custom-sticker"></span>).

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
    inline-item: (
        // .your-variant-name > .inline-item
        lexicon-icon: (
            // .your-variant-name > .inline-item .lexicon-icon
        ),
    ),
    lexicon-icon: (
        // .your-variant-name .lexicon-icon
    ),
    sticker-img: (
        // .your-variant-name .sticker-img
    ),
    sticker-overlay: (
        // .your-variant-name .sticker-overlay
    ),
    rounded: (
        // .your-variant-name.rounded
        sticker-overlay: (
            // .your-variant-name.rounded .sticker-overlay
        ),
    ),
    rounded-circle: (
        // .your-variant-name.rounded-circle
        sticker-overlay: (
            // .your-variant-name.rounded-circle .sticker-overlay
        ),
    ),
    rounded-0: (
        // .your-variant-name.rounded-0
        sticker-overlay: (
            // .your-variant-name.rounded-0 .sticker-overlay
        ),
    ),
    sticker-outside: (
        // .your-variant-name.sticker-outside
        sticker-bottom-left: (
            // .your-variant-name.sticker-outside.sticker-bottom-left
        ),
        sticker-bottom-right: (
            // .your-variant-name.sticker-outside.sticker-bottom-right
        ),
        sticker-top-right: (
            // .your-variant-name.sticker-outside.sticker-top-right
        ),
    ),
)
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null}, // deprecated after 3.9.0

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

Tables

mixins

table-row-variant

@mixin table-row-variant($state, $background, $border) { ... }

Description

A Bootstrap 4 mixin to help create table row variants.

Parameters

NameDescriptionTypeDefault value
$state

The name of the state

String—
$background

The background-color

Color—
$border

The border-color

Color—

Requires

clay-table-variant

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

Description

A mixin to help create table variants.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Requires

clay-table-drag-variant

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

Description

A mixin to help create table-drag variants.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Example

See Mixin `clay-css` for available keys to pass into the base selector
c-dragging-before: {Map | Null}, // See Mixin `clay-css` for available keys. This is an extra pseudo element if you need.
c-dragging-after: {Map | Null}, // See Mixin `clay-css` for available keys. This styles the overlay on the original column when dragging.
c-droppable-before: {Map | Null}, // See Mixin `clay-css` for available keys. This styles the left border (background-image) on `c-droppable` columns when dragging
c-droppable-after: {Map | Null}, // See Mixin `clay-css` for available keys. This is an extra pseudo element if you need.

Requires

clay-table-clone-variant

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

Description

A mixin to help create table-clone variants.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Example

See Mixin `clay-css` for available keys to pass into the base selector
before: {Map | Null}, // See Mixin `clay-css` for available keys. This styles the left border on the `table-clone` variant.
after: {Map | Null}, // See Mixin `clay-css` for available keys. This styles the right border on the `table-clone` variant.
cell: {Map | Null}, // See Mixin `clay-css` for available keys. This styles the table cell (th and td) in the `table-clone` variant.

Requires

Tbar

mixins

clay-tbar-variant

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

Description

A mixin to create tbar variants, must be based off .tbar (e.g., <nav class="tbar my-custom-tbar-variant"></nav>).

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Example

See Mixin `clay-css` for available keys to pass into the base selector
strong: {Map | Null}, // See Mixin `clay-css` for available keys
nav: {Map | Null}, // See Mixin `clay-css` for available keys
item: {Map | Null}, // See Mixin `clay-css` for available keys
item-expand: {Map | Null}, // See Mixin `clay-css` for available keys
divider-before: {Map | Null}, // See Mixin `clay-css` for available keys
divider-after: {Map | Null}, // See Mixin `clay-css` for available keys
btn: {Map | Null}, // See Mixin `clay-button-variant` for available keys
btn-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
btn-monospaced: {Map | Null}, // See Mixin `clay-button-variant` for available keys
btn-monospaced-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
link: {Map | Null}, // See Mixin `clay-link` for available keys
link-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
link-monospaced: {Map | Null}, // See Mixin `clay-link` for available keys
link-monospaced-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
section: {Map | Null}, // See Mixin `clay-css` for available keys
component-action: {Map | Null}, // See Mixin `clay-link` for available keys
component-link: {Map | Null}, // See Mixin `clay-link` for available keys
component-title: {Map | Null}, // See Mixin `clay-text-typography` for available keys
component-text: {Map | Null}, // See Mixin `clay-text-typography` for available keys
component-label: {Map | Null}, // See Mixin `clay-label-variant` for available keys
tbar-label-size: {Map | Null}, // See Mixin `clay-label-size` for available keys
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg-color: {Color | String | Null}, // deprecated after 3.9.0
padding-x: {Number | String | Null}, // deprecated after 3.9.0
padding-y: {Number | String | Null}, // deprecated after 3.9.0
strong-font-weight: {Number | String | Null}, // deprecated after 3.9.0
item-justify-content: {String | Null}, // deprecated after 3.9.0
item-padding-x: {Number | String | Null}, // deprecated after 3.9.0
item-padding-y: {Number | String | Null}, // deprecated after 3.9.0
btn-height: {Number | String | Null}, // deprecated after 3.9.0
btn-font-size: {Number | String | Null}, // deprecated after 3.9.0
btn-font-weight: {Number | String | Null}, // deprecated after 3.9.0
btn-line-height: {Number | String | Null}, // deprecated after 3.9.0
btn-margin-x: {Number | String | Null}, // deprecated after 3.9.0
btn-margin-y: {Number | String | Null}, // deprecated after 3.9.0
btn-padding-x: {Number | String | Null}, // deprecated after 3.9.0
btn-padding-y: {Number | String | Null}, // deprecated after 3.9.0
btn-monospaced-border-radius: {Number | String | List | Null}, // deprecated after 3.9.0
btn-monospaced-border-width: {Number | String | List | Null}, // deprecated after 3.9.0
btn-monospaced-font-size: {Number | String | Null}, // deprecated after 3.9.0
btn-monospaced-margin-x: {Number | String | Null}, // deprecated after 3.9.0
btn-monospaced-margin-y: {Number | String | Null}, // deprecated after 3.9.0
btn-monospaced-padding: {Number | String | List | Null}, // deprecated after 3.9.0
btn-monospaced-size: {Number | String | Null}, // deprecated after 3.9.0
link-margin-x: {Number | String | Null}, // deprecated after 3.9.0
link-margin-y: {Number | String | Null}, // deprecated after 3.9.0
link-padding-x: {Number | String | Null}, // deprecated after 3.9.0
link-padding-y: {Number | String | Null}, // deprecated after 3.9.0
link-monospaced-border-radius: {Number | String | List | Null}, // deprecated after 3.9.0
link-monospaced-border-width: {Number | String | List | Null}, // deprecated after 3.9.0
link-monospaced-font-size: {Number | String | Null}, // deprecated after 3.9.0
link-monospaced-margin-x: {Number | String | Null}, // deprecated after 3.9.0
link-monospaced-margin-y: {Number | String | Null}, // deprecated after 3.9.0
link-monospaced-padding: {Number | String | List | Null}, // deprecated after 3.9.0
link-monospaced-size: {Number | String | Null}, // deprecated after 3.9.0
section-text-align: {String | Null}, // deprecated after 3.9.0

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-tbar-inline-down

@mixin clay-tbar-inline-down($map) { ... }

Description

A mixin for tbar to force tbar-nav, tbar-item, tbar-section, and component-title inline at specific breakpoints. This mixin is used in .tbar-inline-xs-down, .tbar-inline-sm-down, .tbar-inline-md-down, .tbar-inline-lg-down, and .tbar-inline-xl-down.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Example

breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
item-padding-left: {Number | String | Null},
item-padding-right: {Number | String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

Timelines

mixins

clay-timeline-item-reverse

@mixin clay-timeline-item-reverse() { ... }

Description

A mixin that places the .timeline-item::before element on the right side. This mixin is used in .timeline-right.

Parameters

None.

TODO's

    • Add @link to documentation

clay-timeline-spacing

@mixin clay-timeline-spacing($outer-spacing, $inner-spacing, $item-padding-y: 10px) { ... }

Description

A mixin that helps with spacing in a .timeline.

Parameters

NameDescriptionTypeDefault value
$outer-spacing

Sets padding-left or padding-right on .timeline relative to where the increments are positioned.

Number—
$inner-spacing

Sets padding-left on .timeline-item if the .panel is positioned on the right and padding-right if .panel is positioned on the left.

Number—
$item-padding-y

Sets padding-top and padding-bottom on .timeline-item.

Number10px

Requires

TODO's

    • Add @link to documentation

Toggle Switch

mixins

clay-toggle-switch-bar-variant

@mixin clay-toggle-switch-bar-variant($map) { ... }

Description

A mixin to help create .toggle-switch-bar 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
	// .toggle-switch-bar
	before: (
		// .toggle-switch-bar::before
	),
	after: (
		// .toggle-switch-bar::after
	),
	toggle-switch-handle: (
		// .toggle-switch-bar .toggle-switch-handle
		before: (
			// .toggle-switch-bar .toggle-switch-handle::before
		),
		after: (
			// .toggle-switch-bar .toggle-switch-handle::after
		),
	),
	toggle-switch-icon: (
		// .toggle-switch-bar .toggle-switch-icon
		lexicon-icon: (
			// .toggle-switch-bar .toggle-switch-icon .lexicon-icon
		),
	),
	toggle-switch-icon-on: (
		// .toggle-switch-bar .toggle-switch-icon-on
		lexicon-icon: (
			// .toggle-switch-bar .toggle-switch-icon-on .lexicon-icon
		),
	),
	toggle-switch-icon-off: (
		// .toggle-switch-bar .toggle-switch-icon-off
		lexicon-icon: (
			// .toggle-switch-bar .toggle-switch-icon-off .lexicon-icon
		),
	),
	button-icon: (
		// .toggle-switch-bar .button-icon
		lexicon-icon: (
			// .toggle-switch-bar .button-icon .lexicon-icon
		),
	),
	button-icon-on: (
		// .toggle-switch-bar .button-icon-on
		lexicon-icon: (
			// .toggle-switch-bar .button-icon-on .lexicon-icon
		),
	),
	button-icon-off: (
		// .toggle-switch-bar .button-icon-off
		lexicon-icon: (
			// .toggle-switch-bar .button-icon-off .lexicon-icon
		),
	),
)

Requires

Used by

clay-toggle-switch-check-variant

@mixin clay-toggle-switch-check-variant($map) { ... }

Description

A mixin to help create .toggle-switch-check 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
	breakpoint-down: {String},
	// .toggle-switch-check
	toggle-switch-bar: (
		// .toggle-switch-check ~ .toggle-switch-bar
		before: (
			// .toggle-switch-check ~ .toggle-switch-bar::before
		),
		after: (
			// .toggle-switch-check ~ .toggle-switch-bar::after
		),
		toggle-switch-handle: (
			// .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle
			before: (
				// .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::before
			),
			after: (
				// .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after
			),
		),
		toggle-switch-icon: (
			// .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon
			lexicon-icon: (
				// .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon .lexicon-icon
			),
		),
		toggle-switch-icon-on: (
			// .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-on
			lexicon-icon: (
				// .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-on .lexicon-icon
			),
		),
		toggle-switch-icon-off: (
			// .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off
			lexicon-icon: (
				// .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off .lexicon-icon
			),
		),
		button-icon: (
			// .toggle-switch-check ~ .toggle-switch-bar .button-icon
			lexicon-icon: (
				// .toggle-switch-check ~ .toggle-switch-bar .button-icon .lexicon-icon
			),
		),
		button-icon-on: (
			// .toggle-switch-check ~ .toggle-switch-bar .button-icon-on
			lexicon-icon: (
				// .toggle-switch-check ~ .toggle-switch-bar .button-icon-on .lexicon-icon
			),
		),
		button-icon-off: (
			// .toggle-switch-check ~ .toggle-switch-bar .button-icon-off
			lexicon-icon: (
				// .toggle-switch-check ~ .toggle-switch-bar .button-icon-off .lexicon-icon
			),
		),
	),
	hover: (
		// N/A
		toggle-switch-bar: (
			// .toggle-switch-check:hover ~ .toggle-switch-bar
			before: (),
			after: (),
			toggle-switch-handle: (
				before: (),
				after: (),
			),
			toggle-switch-icon: (
				lexicon-icon: (),
			),
			toggle-switch-icon-on: (
				lexicon-icon: (),
			),
			toggle-switch-icon-off: (
				lexicon-icon: (),
			),
			button-icon: (
				lexicon-icon: (),
			),
			button-icon-on: (
				lexicon-icon: (),
			),
			button-icon-off: (
				lexicon-icon: (),
			),
		),
	),
	focus: (
		// N/A
		toggle-switch-bar: (
			// .toggle-switch-check:focus ~ .toggle-switch-bar
			before: (),
			after: (),
			toggle-switch-handle: (
				before: (),
				after: (),
			),
			toggle-switch-icon: (
				lexicon-icon: (),
			),
			toggle-switch-icon-on: (
				lexicon-icon: (),
			),
			toggle-switch-icon-off: (
				lexicon-icon: (),
			),
			button-icon: (
				lexicon-icon: (),
			),
			button-icon-on: (
				lexicon-icon: (),
			),
			button-icon-off: (
				lexicon-icon: (),
			),
		),
	),
	active: (
		// N/A
		toggle-switch-bar: (
			// .toggle-switch-check:active ~ .toggle-switch-bar
			before: (),
			after: (),
			toggle-switch-handle: (
				before: (),
				after: (),
			),
			toggle-switch-icon: (
				lexicon-icon: (),
			),
			toggle-switch-icon-on: (
				lexicon-icon: (),
			),
			toggle-switch-icon-off: (
				lexicon-icon: (),
			),
			button-icon: (
				lexicon-icon: (),
			),
			button-icon-on: (
				lexicon-icon: (),
			),
			button-icon-off: (
				lexicon-icon: (),
			),
		),
	),
	disabled: (
		// N/A
		toggle-switch-bar: (
			// .toggle-switch-check[disabled] ~ .toggle-switch-bar,
			// .toggle-switch-check:disabled ~ .toggle-switch-bar
			before: (),
			after: (),
			toggle-switch-handle: (
				before: (),
				after: (),
			),
			toggle-switch-icon: (
				lexicon-icon: (),
			),
			toggle-switch-icon-on: (
				lexicon-icon: (),
			),
			toggle-switch-icon-off: (
				lexicon-icon: (),
			),
			button-icon: (
				lexicon-icon: (),
			),
			button-icon-on: (
				lexicon-icon: (),
			),
			button-icon-off: (
				lexicon-icon: (),
			),
		),
	),
	checked: (
		// N/A
		toggle-switch-bar: (
			// .toggle-switch-check:checked ~ .toggle-switch-bar
			before: (),
			after: (),
			toggle-switch-handle: (
				before: (),
				after: (),
			),
			toggle-switch-icon: (
				lexicon-icon: (),
			),
			toggle-switch-icon-on: (
				lexicon-icon: (),
			),
			toggle-switch-icon-off: (
				lexicon-icon: (),
			),
			button-icon: (
				lexicon-icon: (),
			),
			button-icon-on: (
				lexicon-icon: (),
			),
			button-icon-off: (
				lexicon-icon: (),
			),
		),
		hover: (
			// N/A
			toggle-switch-bar: (
				// .toggle-switch-check:checked:hover ~ .toggle-switch-bar
				before: (),
				after: (),
				toggle-switch-handle: (
					before: (),
					after: (),
				),
				toggle-switch-icon: (
					lexicon-icon: (),
				),
				toggle-switch-icon-on: (
					lexicon-icon: (),
				),
				toggle-switch-icon-off: (
					lexicon-icon: (),
				),
				button-icon: (
					lexicon-icon: (),
				),
				button-icon-on: (
					lexicon-icon: (),
				),
				button-icon-off: (
					lexicon-icon: (),
				),
			),
		),
		focus: (
			// N/A
			toggle-switch-bar: (
				// .toggle-switch-check:checked:focus ~ .toggle-switch-bar
				before: (),
				after: (),
				toggle-switch-handle: (
					before: (),
					after: (),
				),
				toggle-switch-icon: (
					lexicon-icon: (),
				),
				toggle-switch-icon-on: (
					lexicon-icon: (),
				),
				toggle-switch-icon-off: (
					lexicon-icon: (),
				),
				button-icon: (
					lexicon-icon: (),
				),
				button-icon-on: (
					lexicon-icon: (),
				),
				button-icon-off: (
					lexicon-icon: (),
				),
			),
		),
		active: (
			// N/A
			toggle-switch-bar: (
				// .toggle-switch-check:checked:active ~ .toggle-switch-bar
				before: (),
				after: (),
				toggle-switch-handle: (
					before: (),
					after: (),
				),
				toggle-switch-icon: (
					lexicon-icon: (),
				),
				toggle-switch-icon-on: (
					lexicon-icon: (),
				),
				toggle-switch-icon-off: (
					lexicon-icon: (),
				),
				button-icon: (
					lexicon-icon: (),
				),
				button-icon-on: (
					lexicon-icon: (),
				),
				button-icon-off: (
					lexicon-icon: (),
				),
			),
		),
		disabled: (
			// N/A
			toggle-switch-bar: (
				// .toggle-switch-check:checked[disabled] ~ .toggle-switch-bar,
				// .toggle-switch-check:checked:disabled ~ .toggle-switch-bar
				before: (),
				after: (),
				toggle-switch-handle: (
					before: (),
					after: (),
				),
				toggle-switch-icon: (
					lexicon-icon: (),
				),
				toggle-switch-icon-on: (
					lexicon-icon: (),
				),
				toggle-switch-icon-off: (
					lexicon-icon: (),
				),
				button-icon: (
					lexicon-icon: (),
				),
				button-icon-on: (
					lexicon-icon: (),
				),
				button-icon-off: (
					lexicon-icon: (),
				),
			),
		),
	),
	indeterminate: (
		// N/A
		toggle-switch-bar: (
			// .toggle-switch-check:indeterminate ~ .toggle-switch-bar
			before: (),
				after: (),
				toggle-switch-handle: (
					before: (),
					after: (),
				),
				toggle-switch-icon: (
					lexicon-icon: (),
				),
				toggle-switch-icon-on: (
					lexicon-icon: (),
				),
				toggle-switch-icon-off: (
					lexicon-icon: (),
				),
				button-icon: (
					lexicon-icon: (),
				),
				button-icon-on: (
					lexicon-icon: (),
				),
				button-icon-off: (
					lexicon-icon: (),
				),
		),
		hover: (
			// N/A
			toggle-switch-bar: (
				// .toggle-switch-check:indeterminate:hover ~ .toggle-switch-bar
				before: (),
				after: (),
				toggle-switch-handle: (
					before: (),
					after: (),
				),
				toggle-switch-icon: (
					lexicon-icon: (),
				),
				toggle-switch-icon-on: (
					lexicon-icon: (),
				),
				toggle-switch-icon-off: (
					lexicon-icon: (),
				),
				button-icon: (
					lexicon-icon: (),
				),
				button-icon-on: (
					lexicon-icon: (),
				),
				button-icon-off: (
					lexicon-icon: (),
				),
			),
		),
		focus: (
			// N/A
			toggle-switch-bar: (
				// .toggle-switch-check:indeterminate:focus ~ .toggle-switch-bar
				before: (),
				after: (),
				toggle-switch-handle: (
					before: (),
					after: (),
				),
				toggle-switch-icon: (
					lexicon-icon: (),
				),
				toggle-switch-icon-on: (
					lexicon-icon: (),
				),
				toggle-switch-icon-off: (
					lexicon-icon: (),
				),
				button-icon: (
					lexicon-icon: (),
				),
				button-icon-on: (
					lexicon-icon: (),
				),
				button-icon-off: (
					lexicon-icon: (),
				),
			),
		),
		active: (
			// N/A
			toggle-switch-bar: (
				// .toggle-switch-check:indeterminate:active ~ .toggle-switch-bar
				before: (),
				after: (),
				toggle-switch-handle: (
					before: (),
					after: (),
				),
				toggle-switch-icon: (
					lexicon-icon: (),
				),
				toggle-switch-icon-on: (
					lexicon-icon: (),
				),
				toggle-switch-icon-off: (
					lexicon-icon: (),
				),
				button-icon: (
					lexicon-icon: (),
				),
				button-icon-on: (
					lexicon-icon: (),
				),
				button-icon-off: (
					lexicon-icon: (),
				),
			),
		),
		disabled: (
			// N/A
			toggle-switch-bar: (
				// .toggle-switch-check:indeterminate[disabled] ~ .toggle-switch-bar,
				// .toggle-switch-check:indeterminate:disabled ~ .toggle-switch-bar
				before: (),
				after: (),
				toggle-switch-handle: (
					before: (),
					after: (),
				),
				toggle-switch-icon: (
					lexicon-icon: (),
				),
				toggle-switch-icon-on: (
					lexicon-icon: (),
				),
				toggle-switch-icon-off: (
					lexicon-icon: (),
				),
				button-icon: (
					lexicon-icon: (),
				),
				button-icon-on: (
					lexicon-icon: (),
				),
				button-icon-off: (
					lexicon-icon: (),
				),
			),
		),
	),
)

Requires

Used by

clay-toggle-switch-variant

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

Description

A mixin to help create .toggle-switch 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
	breakpoint-down: {String},
	// .toggle-switch
	toggle-switch-check-bar: (
		// .toggle-switch .toggle-switch-check-bar
		before: (
			// .toggle-switch .toggle-switch-check-bar::before
		),
		after: (
			// .toggle-switch .toggle-switch-check-bar::after
		),
	),
	toggle-switch-check: (
		// .toggle-switch .toggle-switch-check
		// See clay-toggle-switch-check-variant
	),
	toggle-switch-label: (
		// .toggle-switch .toggle-switch-label
	),
	toggle-switch-text: (
		// .toggle-switch .toggle-switch-text
	),
	toggle-switch-text-left: (
		// .toggle-switch .toggle-switch-text-left
	),
	toggle-switch-text-right: (
		// .toggle-switch .toggle-switch-text-right
	),
	disabled: (
		// .toggle-switch.disabled
		toggle-switch-label: (
			// .toggle-switch.disabled .toggle-switch-label
		),
		toggle-switch-text: (
			// .toggle-switch.disabled .toggle-switch-text
		),
		toggle-switch-text-left: (
			// .toggle-switch.disabled .toggle-switch-text-left
		),
		toggle-switch-text-right: (
			// .toggle-switch.disabled .toggle-switch-text-right
		),
	),
	mobile: (
		toggle-switch-check-bar: (
			before: (),
			after: (),
		),
		toggle-switch-check: (),
		toggle-switch-label: (),
		toggle-switch-text: (),
		toggle-switch-text-left: (),
		toggle-switch-text-right: (),
		disabled: (
			toggle-switch-label: (),
			toggle-switch-text: (),
			toggle-switch-text-left: (),
			toggle-switch-text-right: (),
		),
	),
)

Requires

Tooltip

mixins

clay-tooltip-variant

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

Description

A mixin to help create .tooltip 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
	// .tooltip
	show: (
		// .tooltip.show
	),
	arrow: (
		// .tooltip .arrow
		before: (
			// .tooltip .arrow::before
		),
		after: (
			// .tooltip .arrow::after
		),
	),
	tooltip-inner: (
		// .tooltip .tooltip-inner
	),
)

Requires

Type

mixins

text-emphasis-variant

Deprecated!
@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) { ... }

Description

A Bootstrap 4 mixin for generating text color variants.

Parameters

NameDescriptionTypeDefault value
$parent

The CSS selector

String—
$color

The text-color

Color—
$ignore-warning

Supress deprecating warning

Boolfalse

Requires

text-hide

Deprecated!
@mixin text-hide($ignore-warning: false) { ... }

Description

A Bootstrap 4 mixin for hiding text without using display: none.

Parameters

NameDescriptionTypeDefault value
$ignore-warning

Suppress deprecation warning

Boolfalse

Requires

text-truncate

@mixin text-truncate() { ... }

Description

A Bootstrap 4 mixin for displaying ellipsis if text overflows its container. Requires other CSS properties to function properly depending on the display property. Clay CSS truncate-text-inline with text-truncate is a more fail safe pattern.

Parameters

None.

Requires

clay-highlight-text

Deprecated!
@mixin clay-highlight-text($bg-color, $color) { ... }

Description

A mixin for highlighting inline text.

Parameters

NameDescriptionTypeDefault value
$bg-color

Color of the highlight

Color—
$color

Colors the text

Color—

Clay CSS

variables

dropdown-link-color

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-color: $gray-600 !default;

Used by

dropdown-link-font-weight

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-font-weight: $font-weight-normal !default;

dropdown-link-hover-color

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-hover-color: $gray-900 !default;

Used by

dropdown-link-hover-bg

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-hover-bg: clay-lighten($component-active-bg, 44.9) !default;

Used by

dropdown-link-active-color

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-active-color: $dropdown-link-hover-color !default;

Used by

dropdown-link-active-bg

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-active-bg: $dropdown-link-hover-bg !default;

Used by

dropdown-link-active-font-weight

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-active-font-weight: null !default;

Used by

dropdown-link-disabled-color

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-disabled-color: $gray-500 !default;

Used by

dropdown-action-toggle-disabled-opacity

Deprecated!

as of v3.x use map $dropdown-action instead

$dropdown-action-toggle-disabled-opacity: $component-disabled-opacity !default;

pagination-items-per-page-focus-box-shadow

Deprecated!

as of v2 use the Sass map $pagination-items-per-page-link-focus instead

$pagination-items-per-page-focus-box-shadow: c-unset !default;

cadmin-loading-icon-font-size

Deprecated!

as of v3.x with no replacement

$cadmin-loading-icon-font-size: 40px !default;

cadmin-loading-icon-font-size-sm

Deprecated!

as of v3.x with no replacement

$cadmin-loading-icon-font-size-sm: 16px !default;

c-root

$c-root: () !default;

Description

This map outputs custom properties in the :root selector, use the Sass map-merge function to add additional custom properties to :root.

card-img-overlay-padding

Deprecated!

as of v3.x with no replacement

$card-img-overlay-padding: 1.25rem !default;

card-group-margin

Deprecated!

as of v3.x with no replacement

$card-group-margin: $grid-gutter-width * 0.5 !default;

card-deck-margin

Deprecated!

as of v3.x with no replacement

$card-deck-margin: $card-group-margin !default;

card-columns-count

Deprecated!

as of v3.x with no replacement

$card-columns-count: 3 !default;

card-columns-gap

Deprecated!

as of v3.x with no replacement

$card-columns-gap: 1.25rem !default;

card-columns-margin

Deprecated!

as of v3.x with no replacement

$card-columns-margin: $card-spacer-y !default;

carousel-indicator-height

Deprecated!

as of v3.x with no replacement

$carousel-indicator-height: 3px !default;

carousel-indicator-hit-area-height

Deprecated!

as of v3.x with no replacement

$carousel-indicator-hit-area-height: 10px !default;

carousel-indicator-spacer

Deprecated!

as of v3.x with no replacement

$carousel-indicator-spacer: 3px !default;

carousel-indicator-transition

Deprecated!

as of v3.x with no replacement

$carousel-indicator-transition: opacity 0.6s ease !default;

carousel-indicator-width

Deprecated!

as of v3.x with no replacement

$carousel-indicator-width: 30px !default;

carousel-indicator-active-bg

Deprecated!

as of v3.x with no replacement

$carousel-indicator-active-bg: $white !default;

carousel-control-color

Deprecated!

as of v3.x with no replacement

$carousel-control-color: $white !default;

carousel-control-opacity

Deprecated!

as of v3.x with no replacement

$carousel-control-opacity: 0.5 !default;

carousel-control-transition

Deprecated!

as of v3.x with no replacement

$carousel-control-transition: opacity 0.15s ease !default;

carousel-control-width

Deprecated!

as of v3.x with no replacement

$carousel-control-width: 15% !default;

carousel-control-hover-opacity

Deprecated!

as of v3.x with no replacement

$carousel-control-hover-opacity: 0.9 !default;

carousel-control-icon-width

Deprecated!

as of v3.x with no replacement

$carousel-control-icon-width: 20px !default;

carousel-control-next-icon-bg

Deprecated!

as of v3.x with no replacement

$carousel-control-next-icon-bg: clay-svg-url(
	"<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>"
) !default;

carousel-control-prev-icon-bg

Deprecated!

as of v3.x with no replacement

$carousel-control-prev-icon-bg: clay-svg-url(
	"<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>"
) !default;

carousel-transition-duration

Deprecated!

as of v3.x with no replacement

$carousel-transition-duration: 0.6s !default;

carousel-transition

Deprecated!

as of v3.x with no replacement

$carousel-transition: transform $carousel-transition-duration ease-in-out !default;

carousel-caption-color

Deprecated!

as of v3.x with no replacement

$carousel-caption-color: $white !default;

carousel-caption-width

Deprecated!

as of v3.x with no replacement

$carousel-caption-width: 70% !default;

dropdown-bg

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-bg: $white !default;

Used by

dropdown-border-color

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-border-color: rgba($black, 0.15) !default;

Used by

dropdown-border-style

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-border-style: solid !default;

dropdown-border-width

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-border-width: $border-width !default;

dropdown-border-radius

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-border-radius: $border-radius !default;

dropdown-inner-border-radius

Deprecated!

as of v3.x with no replacement

$dropdown-inner-border-radius: $dropdown-border-radius
	math-sign($dropdown-border-width) !default;

dropdown-box-shadow

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default;

Used by

dropdown-color

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-color: $body-color !default;

dropdown-font-size

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-font-size: $font-size-base !default;

dropdown-max-height

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-max-height: 500px !default;

dropdown-max-width

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-max-width: 260px !default;

dropdown-min-height

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-min-height: null !default;

dropdown-min-width

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-min-width: 10rem !default;

dropdown-font-size-mobile

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-font-size-mobile: null !default;

dropdown-max-height-mobile

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-max-height-mobile: 295px !default;

dropdown-max-width-mobile

Deprecated!

as of v3.x use map $dropdown-menu instead

$dropdown-max-width-mobile: 230px !default;

dropdown-item-disabled-cursor

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-item-disabled-cursor: $disabled-cursor !default;

dropdown-link-color

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-color: $gray-900 !default;

dropdown-link-font-weight

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-font-weight: null !default;

dropdown-link-hover-bg

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-hover-bg: $gray-100 !default;

dropdown-link-hover-color

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-hover-color: clay-darken($gray-900, 5%) !default;

dropdown-link-active-bg

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-active-bg: $component-active-bg !default;

dropdown-link-active-color

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-active-color: $component-active-color !default;

dropdown-link-active-font-weight

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-active-font-weight: null !default;

dropdown-link-disabled-color

Deprecated!

as of v3.x use map $dropdown-item instead

$dropdown-link-disabled-color: $gray-600 !default;

dropdown-header-color

Deprecated!

as of v3.x use map $dropdown-header instead

$dropdown-header-color: $gray-600 !default;

dropdown-header-font-size

Deprecated!

as of v3.x use map $dropdown-header instead

$dropdown-header-font-size: null !default;

dropdown-header-margin-bottom

Deprecated!

as of v3.x use map $dropdown-header instead

$dropdown-header-margin-bottom: null !default;

dropdown-header-margin-top

Deprecated!

as of v3.x use map $dropdown-header instead

$dropdown-header-margin-top: null !default;

dropdown-header-padding-x

Deprecated!

as of v3.x use map $dropdown-header instead

$dropdown-header-padding-x: $dropdown-item-padding-x !default;

dropdown-header-padding-y

Deprecated!

as of v3.x use map $dropdown-header instead

$dropdown-header-padding-y: $dropdown-padding-y !default;

dropdown-header-text-transform

Deprecated!

as of v3.x use map $dropdown-header instead

$dropdown-header-text-transform: null !default;

dropdown-header-font-size-mobile

Deprecated!

as of v3.x use map $dropdown-header instead

$dropdown-header-font-size-mobile: null !default;

dropdown-subheader-color

Deprecated!

as of v3.x use map $dropdown-subheader instead

$dropdown-subheader-color: $dropdown-header-color !default;

dropdown-subheader-font-size

Deprecated!

as of v3.x use map $dropdown-subheader instead

$dropdown-subheader-font-size: 0.75rem !default;

dropdown-subheader-font-weight

Deprecated!

as of v3.x use map $dropdown-subheader instead

$dropdown-subheader-font-weight: $font-weight-semi-bold !default;

dropdown-subheader-margin-bottom

Deprecated!

as of v3.x use map $dropdown-subheader instead

$dropdown-subheader-margin-bottom: null !default;

dropdown-subheader-margin-top

Deprecated!

as of v3.x use map $dropdown-subheader instead

$dropdown-subheader-margin-top: null !default;

dropdown-subheader-padding-x

Deprecated!

as of v3.x use map $dropdown-subheader instead

$dropdown-subheader-padding-x: $dropdown-header-padding-x !default;

dropdown-subheader-padding-y

Deprecated!

as of v3.x use map $dropdown-subheader instead

$dropdown-subheader-padding-y: $dropdown-header-padding-y !default;

dropdown-subheader-text-transform

Deprecated!

as of v3.x use map $dropdown-subheader instead

$dropdown-subheader-text-transform: uppercase !default;

dropdown-caption-color

Deprecated!

as of v3.x use map $dropdown-caption instead

$dropdown-caption-color: $dropdown-header-color !default;

dropdown-caption-font-size

Deprecated!

as of v3.x use map $dropdown-caption instead

$dropdown-caption-font-size: 0.875rem !default;

dropdown-caption-font-weight

Deprecated!

as of v3.x use map $dropdown-caption instead

$dropdown-caption-font-weight: null !default;

dropdown-divider-bg

Deprecated!

as of v3.x use map $dropdown-divider instead

$dropdown-divider-bg: $gray-200 !default;

dropdown-divider-margin-y

Deprecated!

as of v3.x use map $dropdown-divider instead

$dropdown-divider-margin-y: 0.5rem !default;

dropdown-section-custom-control

Deprecated!

as of v3.x use map $dropdown-section instead

$dropdown-section-custom-control: () !default;

dropdown-section-custom-control-label

Deprecated!

as of v3.x use map $dropdown-section instead

$dropdown-section-custom-control-label: () !default;

dropdown-section-custom-control-label-text

Deprecated!

as of v3.x use map $dropdown-section instead

$dropdown-section-custom-control-label-text: () !default;

dropdown-section-active-custom-control-label

Deprecated!

as of v3.x use map $dropdown-section instead

$dropdown-section-active-custom-control-label: () !default;

dropdown-action-toggle-border-radius

Deprecated!

as of v3.x use map $dropdown-action instead

$dropdown-action-toggle-border-radius: $border-radius !default;

dropdown-action-toggle-font-size

Deprecated!

as of v3.x use map $dropdown-action instead

$dropdown-action-toggle-font-size: null !default;

dropdown-action-toggle-disabled-cursor

Deprecated!

as of v3.x use map $dropdown-action instead

$dropdown-action-toggle-disabled-cursor: $disabled-cursor !default;

dropdown-action-toggle-disabled-opacity

Deprecated!

as of v3.x use map $dropdown-action instead

$dropdown-action-toggle-disabled-opacity: 0.65 !default;

input-height-border

Deprecated!

with no replacement

$input-height-border: calc(
	#{$input-border-top-width} + #{$input-border-bottom-width}
) !default;

input-height-inner

Deprecated!

with no replacement

$input-height-inner: 36px !default;

Used by

input-height-inner-half

Deprecated!

with no replacement

$input-height-inner-half: 18px 18px !default;

Used by

input-height-inner-quarter

Deprecated!

with no replacement

$input-height-inner-quarter: 9px !default;

Used by

input-readonly-bg

Deprecated!

after v2.18.0 use the Sass map $input-readonly instead

$input-readonly-bg: $input-disabled-bg !default;

input-readonly-border-color

Deprecated!

after v2.18.0 use the Sass map $input-readonly instead

$input-readonly-border-color: null !default;

input-readonly-color

Deprecated!

after v2.18.0 use the Sass map $input-readonly instead

$input-readonly-color: null !default;

input-readonly-cursor

Deprecated!

after v2.18.0 use the Sass map $input-readonly instead

$input-readonly-cursor: null !default;

input-readonly-focus-bg

Deprecated!

after v2.18.0 use the Sass map $input-readonly instead

$input-readonly-focus-bg: null !default;

input-readonly-focus-border-color

Deprecated!

after v2.18.0 use the Sass map $input-readonly instead

$input-readonly-focus-border-color: null !default;

input-readonly-focus-color

Deprecated!

after v2.18.0 use the Sass map $input-readonly instead

$input-readonly-focus-color: null !default;

form-grid-gutter-width

Deprecated!

as of v3.x with no replacement

$form-grid-gutter-width: 10px !default;

form-feedback-icon-valid-color

Deprecated!

as of v3.x with no replacement

$form-feedback-icon-valid-color: $form-feedback-valid-color !default;

form-feedback-icon-valid

Deprecated!

as of v3.x with no replacement

$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;

form-feedback-icon-invalid-color

Deprecated!

as of v3.x with no replacement

$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;

form-feedback-icon-invalid

Deprecated!

as of v3.x with no replacement

$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;

form-validation-states

Deprecated!

as of v3.x with no replacement

$form-validation-states: () !default;

jumbotron-bg

Deprecated!

as of v3.x with no replacement

$jumbotron-bg: $gray-200 !default;

jumbotron-color

Deprecated!

as of v3.x with no replacement

$jumbotron-color: null !default;

jumbotron-padding

Deprecated!

as of v3.x with no replacement

$jumbotron-padding: 2rem !default;

loading-icon-font-size

Deprecated!

as of v3.x with no replacement

$loading-icon-font-size: 2.5rem !default;

loading-icon-font-size-sm

Deprecated!

as of v3.x with no replacement

$loading-icon-font-size-sm: map-get($font-scale, 4) !default;

nav-btn-margin-x

Deprecated!

after v3.4.0 use the Sass map $nav-btn instead

$nav-btn-margin-x: 0.25rem !default;

nav-btn-margin-y

Deprecated!

after v3.4.0 use the Sass map $nav-btn instead

$nav-btn-margin-y: calc(
	(
			(#{$line-height-base} * #{$font-size-base}) +
				(#{$nav-link-padding-y} * 2) - #{$nav-item-monospaced-size}
		) * 0.5
) !default;

nav-btn-padding-x

Deprecated!

after v3.4.0 use the Sass map $nav-btn instead

$nav-btn-padding-x: 0.5rem !default;

nav-btn-padding-y

Deprecated!

after v3.4.0 use the Sass map $nav-btn instead

$nav-btn-padding-y: 0 !default;

nav-pills-border-radius

Deprecated!

as of v3.x with no replacement

$nav-pills-border-radius: $border-radius !default;

nav-pills-link-active-bg

Deprecated!

as of v3.x with no replacement

$nav-pills-link-active-bg: $component-active-bg !default;

nav-pills-link-active-color

Deprecated!

as of v3.x with no replacement

$nav-pills-link-active-color: $component-active-color !default;

spinner-border-width

Deprecated!

as of v3.x with no replacement

$spinner-border-width: 0.25em !default;

spinner-width

Deprecated!

as of v3.x with no replacement

$spinner-width: 2rem !default;

spinner-height

Deprecated!

as of v3.x with no replacement

$spinner-height: $spinner-width !default;

spinner-border-width-sm

Deprecated!

as of v3.x with no replacement

$spinner-border-width-sm: 0.2em !default;

spinner-width-sm

Deprecated!

as of v3.x with no replacement

$spinner-width-sm: 1rem !default;

spinner-height-sm

Deprecated!

as of v3.x with no replacement

$spinner-height-sm: $spinner-width-sm !default;

table-bg-level

Deprecated!

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

$table-bg-level: -9 !default;

table-border-level

Deprecated!

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

$table-border-level: -6 !default;

toast-background-color

Deprecated!

as of v3.x with no replacement

$toast-background-color: rgba($white, 0.85) !default;

toast-border-color

Deprecated!

as of v3.x with no replacement

$toast-border-color: rgba(0, 0, 0, 0.1) !default;

toast-border-width

Deprecated!

as of v3.x with no replacement

$toast-border-width: 1px !default;

toast-border-radius

Deprecated!

as of v3.x with no replacement

$toast-border-radius: 0.25rem !default;

toast-box-shadow

Deprecated!

as of v3.x with no replacement

$toast-box-shadow: 0 0.25rem 0.75rem rgba($black, 0.1) !default;

toast-color

Deprecated!

as of v3.x with no replacement

$toast-color: null !default;

toast-font-size

Deprecated!

as of v3.x with no replacement

$toast-font-size: 0.875rem !default;

toast-max-width

Deprecated!

as of v3.x with no replacement

$toast-max-width: 350px !default;

toast-padding-x

Deprecated!

as of v3.x with no replacement

$toast-padding-x: 0.75rem !default;

toast-padding-y

Deprecated!

as of v3.x with no replacement

$toast-padding-y: 0.25rem !default;

toast-header-background-color

Deprecated!

as of v3.x with no replacement

$toast-header-background-color: rgba($white, 0.85) !default;

toast-header-border-color

Deprecated!

as of v3.x with no replacement

$toast-header-border-color: rgba(0, 0, 0, 0.05) !default;

toast-header-color

Deprecated!

as of v3.x with no replacement

$toast-header-color: $gray-600 !default;

css

// // Generate semantic grid columns with these mixins. @mixin make-container($gutter: $grid-gutter-width)

//
// Generate semantic grid columns with these mixins.

@mixin make-container($gutter: $grid-gutter-width) { ... }

Description

Grid system

.btn-group-item

Deprecated!

as of v3.113.0 replace .btn-group with .btn-group-spaced instead

.btn-group-item { ... }

functions

clay-get-icons

@function clay-get-icons($color: '') { ... }

Description

A function that returns all the Lexicon Icons with a specific color.

Parameters

NameDescriptionTypeDefault value
$color

The color to use for all the Lexicon Icons

Color''

Used by

map-new

@function map-new() { ... }

Description

A function that returns an empty map of type map. In Sass, Empty maps and lists can be declared using () and Sass will assign its type as list. This function ensures its type will be map.

Parameters

None.

Used by

to-length

@function to-length($value, $unit) { ... }

Description

Add $unit to $value

Parameters

NameDescriptionTypeDefault value
$value

Value to add unit to

Number—
$unit

String representation of the unit

String—

Returns

Number —

$value expressed in $unit

Throws

  • Invalid unit #{$unit}.

Used by

Links

Author

  • Hugo Giraudel

to-number

@function to-number($value) { ... }

Description

Casts a string into a number

Parameters

NameDescriptionTypeDefault value
$value

Value to be parsed

String or Number—

Returns

Number

Throws

  • Value for to-number should be a number or a string.

Requires

Used by

Links

Author

  • Kitty Giraudel

throw

@function throw($string, $pointer) { ... }

Description

Logs an error at $pointer with $string message

Parameters

NameDescriptionTypeDefault value
$string

error message

String—
$pointer

pointer position

Number—

Throws

  • ERROR::#{$pointer}::#{$string}

Used by

Author

  • Kitty Giraudel

find-integer

@function find-integer($source, $pointer) { ... }

Description

Parses a JSON encoded number to find the integer part

Parameters

NameDescriptionTypeDefault value
$source

JSON complete source

String—
$pointer

current pointer

Number—

Returns

List —

(new pointer, parsed number)

Throws

  • Unexpected token $token.

Requires

Used by

Author

  • Kitty Giraudel

find-digits

@function find-digits($source, $pointer) { ... }

Description

Parses a JSON encoded number to find the digits

Parameters

NameDescriptionTypeDefault value
$source

JSON complete source

String—
$pointer

current pointer

Number—

Returns

List —

(new pointer, parsed number)

Throws

  • Unexpected token $token.

Requires

Used by

Author

  • Kitty Giraudel

find-exponent

@function find-exponent($source, $pointer) { ... }

Description

Parses a JSON encoded number to find the exponent part

Parameters

NameDescriptionTypeDefault value
$source

JSON complete source

String—
$pointer

current pointer

Number—

Returns

List —

(new pointer, parsed number)

Throws

  • Unexpected token $token.

Requires

Used by

Author

  • Kitty Giraudel

pow

@function pow($x, $n) { ... }

Description

Power function

Parameters

NameDescriptionTypeDefault value
$x

number

Number—
$n

power

Number—

Returns

Number

Requires

Used by

Author

  • Kitty Giraudel

json-decode--number

@function json-decode--number($source, $pointer) { ... }

Description

Parses a JSON encoded number

Parameters

NameDescriptionTypeDefault value
$source

JSON complete source

String—
$pointer

current pointer

Number—

Returns

List —

(new pointer, parsed number)

Throws

  • "Unexpected token $token."

  • "Unexpected end of stream."

Requires

Used by

Author

  • Kitty Giraudel

hex-to-dec

@function hex-to-dec($string) { ... }

Description

Convert an hexadecimal number to a decimal number

Parameters

NameDescriptionTypeDefault value
$string

hexadecimal value

String—

Returns

Number —

decimal number

Used by

Author

  • Kitty Giraudel

from-hex

@function from-hex($string) { ... }

Description

Cast a JSON encoded string into a hexadecimal color

Parameters

NameDescriptionTypeDefault value
$string

JSON string

String—

Returns

Color</code> or <code>String —

string or hex color depending on the match

Requires

Used by

Author

  • Kitty Giraudel

get-color-value

@function get-color-value($string) { ... }

Description

Cast a stringified number / stringified percentage into number type

Parameters

NameDescriptionTypeDefault value
$string

A string

String—

Returns

Number —

unitless number or percentage

Requires

Used by

Author

  • Kitty Giraudel

from-hsl

@function from-hsl($string) { ... }

Description

Cast a JSON encoded string into a hsl(a) color

Parameters

NameDescriptionTypeDefault value
$string

JSON string

String—

Returns

Color</code> or <code>String —

string or hsl(a) color, depending on the match

Requires

Used by

Author

  • Kitty Giraudel

from-rgb

@function from-rgb($string) { ... }

Description

Cast a JSON encoded string into a rgb(a) color

Parameters

NameDescriptionTypeDefault value
$string

JSON string

String—

Returns

Color</code> or <code>String —

string or rgb(a) color depending on the match

Requires

Used by

Author

  • Kitty Giraudel

to-color

@function to-color($string) { ... }

Description

A function that parses a string to see if it's a CSS color

Parameters

NameDescriptionTypeDefault value
$string

JSON string

String—

Returns

Color</code> or <code>String —

string or number, depending on the match

Requires

Used by

Author

  • Kitty Giraudel

mixins

clay-navbar-variant

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

Description

A mixin to create .navbar variants.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Example

Requires

Used by

transition

@mixin transition($transition......) { ... }

Description

A Bootstrap 4 mixin that outputs a transition if $enable-transition is true. This also outputs the prefers-reduced-motion media query if $enable-prefers-reduced-motion-media-query is true.

Parameters

NameDescriptionTypeDefault value
$transition...—Arglist—

Requires

Utilities

mixins

clay-bg-checkered

@mixin clay-bg-checkered($fg-color: $gray-200, $bg-color: null) { ... }

Description

A mixin for creating checkered backgrounds.

Parameters

NameDescriptionTypeDefault value
$fg-color

The foreground color to use

Color$gray-200
$bg-color

The background color to use

Colornull

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-indicator-bg

@mixin clay-indicator-bg($map) { ... }

Description

A mixin that replaces any *-indicator component with another icon via background-image (e.g., .modal-title-indicator, .dropdown-item-indicator-start, or .panel-header .collapse-icon-closed).

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Example

indicator: {String}, // The SVG as a data URI, use clay-icon() or clay-svg-url()
indicator-bg-position: {List}, // Default: top 0.125rem left
indicator-bg-size: {Number | String | List}, // Default: 100%
indicator-display: {String}, // Default: inline-block
indicator-height: {Number | String}, // Default: #{$line-height-base}em
indicator-text-indent: {Number | String | Null},
indicator-vertical-align: {String}, // Default: middle
indicator-width: {Number | String}, // Default: 1em

Requires

TODO's

    • Add @example
    • Add @link to documentation

box-shadow

@mixin box-shadow($shadow...) { ... }

Description

A mixin that overwrites Bootstrap 4's box-shadow mixin.

Parameters

NameDescriptionTypeDefault value
$shadow—Arglist—

Used by

clay-close

@mixin clay-close($map) { ... }

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
See Mixin `clay-css` for available keys to pass into the base selector
hover: {Map | Null}, // See Mixin `clay-css` for available keys
focus: {Map | Null}, // See Mixin `clay-css` for available keys
active: {Map | Null}, // See Mixin `clay-css` for available keys
active-class: {Map | Null}, // See Mixin `clay-css` for available keys, inherits:
// background-color, border-color, color, font-weight, z-index from active
disabled: {Map | Null}, // See Mixin `clay-css` for available keys
disabled-active: {Map | Null}, // See Mixin `clay-css` for available keys
btn-focus: {Map | Null}, // See Mixin `clay-css` for available keys
lexicon-icon: {Map | Null}, // See Mixin `clay-css` for available keys
c-inner: {Map | Null}, // Pass parameters to `clay-css` mixin
-=-=-=-=-=- 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-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-z-index: {Number | String | Null}, // deprecated after 3.9.0
focus-text-decoration: {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-color: {Color | String | Null}, // deprecated after 3.9.0
active-font-weight: {Number | String | Null}, // deprecated after 3.9.0
active-z-index: {Number | String | Null}, // deprecated after 3.9.0
active-class-bg: {Color | String | Null}, // deprecated after 3.9.0 Default: active-bg
active-class-border-color: {Color | String | List | Null}, // deprecated after 3.9.0 Default: active-border-color
active-class-color: {Color | String | Null}, // deprecated after 3.9.0 Default: active-color
active-class-font-weight: {Number | String | Null}, // deprecated after 3.9.0 Default: active-font-weight
active-class-z-index: {Number | String | Null}, // deprecated after 3.9.0 Default: active-z-index
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-pointer-events: {String | Null}, // deprecated after 3.9.0
disabled-text-decoration: {String | Null}, // deprecated after 3.9.0
disabled-active-pointer-events: {String | Null}, // deprecated after 3.9.0
btn-focus-box-shadow: {String | List | Null}, // deprecated after 3.9.0
btn-focus-outline: {Number | String | Null}, // deprecated after 3.9.0
lexicon-icon-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
lexicon-icon-margin-left: {Number | String | Null}, // deprecated after 3.9.0
lexicon-icon-margin-right: {Number | String | Null}, // deprecated after 3.9.0
lexicon-icon-margin-top: {Number | String | Null}, // deprecated after 3.9.0

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-after-highlight-variant

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

Description

A mixin to create custom underline highlights or overwrite highlights on an element using the CSS pseudo element ::after.

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
See Mixin `clay-css` for available keys to pass into the base selector
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null}, // deprecated after 3.9.0
hover-bg: {Color | String | Null}, // deprecated after 3.9.0
hover-height: {Number | String | Null}, // deprecated after 3.9.0
hover-opacity: {Number | String | Null}, // deprecated after 3.9.0
focus-bg: {Color | String | Null}, // deprecated after 3.9.0
focus-height: {Number | String | Null}, // deprecated after 3.9.0
focus-opacity: {Number | String | Null}, // deprecated after 3.9.0
active-bg: {Color | String | Null}, // deprecated after 3.9.0
active-height: {Number | String | Null}, // deprecated after 3.9.0
active-opacity: {Number | String | Null}, // deprecated after 3.9.0

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-monospace

@mixin clay-monospace($size) { ... }

Description

A mixin for creating monospaced elements.

Parameters

NameDescriptionTypeDefault value
$size

The width and height of the element

Number—

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-scale-component

@mixin clay-scale-component($scale: $enable-scaling-components) { ... }

Description

A mixin to help trigger the "mobile" view in most Clay CSS components. The Base Theme is set to false. The Atlas Theme is set to true and the breakpoint is media-breakpoint-down(sm) or max-width: 767px. You can change the breakpoint by modifying the global variable $scaling-breakpoint-down.

Parameters

NameDescriptionTypeDefault value
$scale

Enables or disables this mixin

Bool$enable-scaling-components

Requires

reset-text

@mixin reset-text() { ... }

Description

A Boostrap 4 mixin for resetting text properties inside a component so weird values aren't inherited. Used in components that can be inserted inside a variety of components like popover and tooltip.

Parameters

None.

resizable

@mixin resizable($direction) { ... }

Description

A Bootstrap 4 mixin for making any element resizable. Per CSS3 UI, resize only applies when overflow isn't visible.

Parameters

NameDescriptionTypeDefault value
$direction

horizontal, vertical, both

String—

sr-only

@mixin sr-only() { ... }

Description

A Bootstrap 4 mixin that generates styles to only display content to screen readers.

Parameters

None.

sr-only-focusable

@mixin sr-only-focusable() { ... }

Description

A Bootstrap 4 mixin to display .sr-only content when focused. Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1

Parameters

None.

size

Deprecated!
@mixin size($width, $height: $width) { ... }

Description

A Bootstrap 4 mixin for generating width and height properties.

Parameters

NameDescriptionTypeDefault value
$width—Number—
$height—Number$width

Requires

invisible

Deprecated!
@mixin invisible($visibility) { ... }

Description

A Bootstrap 4 mixin that outputs the visibility property with the !important flag.

Parameters

NameDescriptionTypeDefault value
$visibility—String—

Requires

clay-autofit-row

@mixin clay-autofit-row($map) { ... }

Description

A mixin to create custom spacing for the autofit-row 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
See Mixin `clay-css` for available keys to pass into the base selector
autofit-col: {Map | Null}, // See Mixin `clay-css` for available keys
-=-=-=-=-=- Deprecated -=-=-=-=-=-
autofit-col-padding: {Number | String | List | Null}, // deprecated after 3.9.0
autofit-col-padding-bottom: {Number | String | Null}, // deprecated after 3.9.0
autofit-col-padding-left: {Number | String | Null}, // deprecated after 3.9.0
autofit-col-padding-right: {Number | String | Null}, // deprecated after 3.9.0
autofit-col-padding-top: {Number | String | Null}, // deprecated after 3.9.0

Requires

Vendor Prefixes

mixins

overflow-wrap

@mixin overflow-wrap($value: break-word) { ... }

Description

A mixin that provides cross browser support for the CSS property overflow-wrap

Parameters

NameDescriptionTypeDefault value
$value

break-word or normal

Stringbreak-word

user-select

@mixin user-select($value: none) { ... }

Description

A mixin that provides cross browser support for the CSS property user-select.

Parameters

NameDescriptionTypeDefault value
$value

all, auto, none, or text

Stringnone

hyphens

@mixin hyphens($value: none) { ... }

Description

A mixin that provides cross browser support for the CSS property hypens.

Parameters

NameDescriptionTypeDefault value
$value

auto, manual, or none

Stringnone

placeholder

@mixin placeholder() { ... }

Description

A mixin that provides cross browser support for the pseudo element/class ::placeholder.

Parameters

None.