Alerts

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;

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

parameter Nameparameter Descriptionparameter Typeparameter Default 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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

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

Key none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

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

Key none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$lower

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

Key none
$upper

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

Key none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

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

Key none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

A map of key: value pairs.

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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: (
		),
	),
	hover: (
		// .btn:hover
		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
		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
		focus: (
			// .btn:active:focus
		),
		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
		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
		focus: (
			// .btn:disabled:focus, .btn.disabled:focus
		),
		active: (
			// .btn:disabled:active, .btn.disabled:active
		),
		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
		),
	),
	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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$background noneColor none
$border noneColor none
$hover-background noneColordarken($background, 7.5%)
$hover-border noneColordarken($border, 10%)
$active-background noneColordarken($background, 10%)
$active-border noneColordarken($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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color noneColor none
$color-hover noneColorcolor-yiq($color)
$active-background noneColor$color
$active-border noneColor$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$padding-y noneNumber none
$padding-x noneNumber none
$font-size noneNumber none
$line-height noneNumber none
$border-radius noneNumber none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

Example

enabled: {Bool},  // Set to false to prevent mixin styles from being output. Default: true
bg: {Color | String | Null},
border-color: {Color | String | List | Null},
border-radius: {Number | String | List | Null},
border-style: {String | List | Null},
border-width: {Number | String | List | Null},
display: {String | Null},
flex-basis: {Number | String | Null},
flex-direction: {String | Null},
flex-grow: {Number | String | Null},
flex-shrink: {Number | String | Null},
flex-wrap: {String | Null},
margin-bottom: {Number | String | Null},
margin-left: {Number | String | Null},
margin-right: {Number | String | Null},
margin-top: {Number | String | Null},
padding-bottom: {Number | String | Null},
padding-left: {Number | String | Null},
padding-right: {Number | String | Null},
padding-top: {Number | String | Null},
text-align: {String | Null},
width: {Number | String | Null},
autofit-col-padding-left: {Number | String | Null},
autofit-col-padding-right: {Number | String | Null},

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-card-variant

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

Description

A mixin that styles a custom Card.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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
	),
	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

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$direction

up, down, left, or right

String none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

The name of the function or mixin

String none
$deprecate-version

The version of the project where the item was deprecated

String none
$remove-version

The version of the project where the item will be removed

String none
$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

Used by

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$var

The variable to check

Color or List or Map or Null or Number or String none

Used by

clay-darken

@function clay-darken($color, $amount) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to darken

Color none
$amount

A number between 0% and 100%

Number none

Requires

Used by

clay-lighten

@function clay-lighten($color, $amount) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to lighten

Color none
$amount

A number between 0% and 100%

Number none

Requires

Used by

clay-adjust-hue

@function clay-adjust-hue($color, $degrees) { ... }

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to adjust

Color none
$degrees

A number between -360deg and 360deg

Number none

Requires

clay-desaturate

@function clay-desaturate($color, $amount) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to desaturate

Color none
$amount

A number between 0% and 100%

Number none

Requires

clay-saturate

@function clay-saturate($color, $amount) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to saturate

Color none
$amount

A number between 0% and 100%

Number none

Requires

clay-mix

@function clay-mix($color1, $color2, $weight) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color1

The first color to mix

Color none
$color2

The second color to mix

Color none
$weight

A number between 0% and 100%

Number none

Requires

Used by

clay-blue

@function clay-blue($color) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to get the blue channel from

Color none

Requires

Used by

clay-green

@function clay-green($color) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to get the green channel from

Color none

Requires

Used by

clay-red

@function clay-red($color) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to get the red channel from

Color none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

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: $form-check-label-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: $input-bg !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: $input-border-color !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: $input-border-width !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: $input-color !default;

custom-select-font-family

Deprecated!

as of v3.x with no replacement

$custom-select-font-family: $input-font-family !default;

custom-select-font-size

Deprecated!

as of v3.x with no replacement

$custom-select-font-size: $input-font-size !default;

custom-select-font-weight

Deprecated!

as of v3.x with no replacement

$custom-select-font-weight: $input-font-weight !default;

custom-select-height

Deprecated!

as of v3.x with no replacement

$custom-select-height: $input-height !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: $input-line-height !default;

custom-select-padding-x

Deprecated!

as of v3.x with no replacement

$custom-select-padding-x: $input-padding-x !default;

custom-select-padding-y

Deprecated!

as of v3.x with no replacement

$custom-select-padding-y: $input-padding-y !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: $input-focus-border-color !default;

custom-select-focus-width

Deprecated!

as of v3.x with no replacement

$custom-select-focus-width: $input-focus-width !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
	$input-btn-focus-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: $input-font-size-lg !default;

custom-select-height-lg

Deprecated!

as of v3.x with no replacement

$custom-select-height-lg: $input-height-lg !default;

custom-select-padding-x-lg

Deprecated!

as of v3.x with no replacement

$custom-select-padding-x-lg: $input-padding-x-lg !default;

custom-select-padding-y-lg

Deprecated!

as of v3.x with no replacement

$custom-select-padding-y-lg: $input-padding-y-lg !default;

custom-select-font-size-sm

Deprecated!

as of v3.x with no replacement

$custom-select-font-size-sm: $input-font-size-sm !default;

custom-select-height-sm

Deprecated!

as of v3.x with no replacement

$custom-select-height-sm: $input-height-sm !default;

custom-select-padding-x-sm

Deprecated!

as of v3.x with no replacement

$custom-select-padding-x-sm: $input-padding-x-sm !default;

custom-select-padding-y-sm

Deprecated!

as of v3.x with no replacement

$custom-select-padding-y-sm: $input-padding-y-sm !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,
	$input-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: $input-focus-width !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: $input-bg !default;

custom-file-border-color

Deprecated!

as of v3.x with no replacement

$custom-file-border-color: $input-border-color !default;

custom-file-border-width

Deprecated!

as of v3.x with no replacement

$custom-file-border-width: $input-border-width !default;

custom-file-border-radius

Deprecated!

as of v3.x with no replacement

$custom-file-border-radius: $input-border-radius !default;

custom-file-box-shadow

Deprecated!

as of v3.x with no replacement

$custom-file-box-shadow: $input-box-shadow !default;

custom-file-color

Deprecated!

as of v3.x with no replacement

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

custom-file-font-family

Deprecated!

as of v3.x with no replacement

$custom-file-font-family: $input-font-family !default;

custom-file-font-weight

Deprecated!

as of v3.x with no replacement

$custom-file-font-weight: $input-font-weight !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: $input-height !default;

custom-file-line-height

Deprecated!

as of v3.x with no replacement

$custom-file-line-height: $input-line-height !default;

custom-file-padding-x

Deprecated!

as of v3.x with no replacement

$custom-file-padding-x: $input-padding-x !default;

custom-file-padding-y

Deprecated!

as of v3.x with no replacement

$custom-file-padding-y: $input-padding-y !default;

custom-file-focus-border-color

Deprecated!

as of v3.x with no replacement

$custom-file-focus-border-color: $input-focus-border-color !default;

custom-file-focus-box-shadow

Deprecated!

as of v3.x with no replacement

$custom-file-focus-box-shadow: $input-focus-box-shadow !default;

custom-file-disabled-bg

Deprecated!

as of v3.x with no replacement

$custom-file-disabled-bg: $input-disabled-bg !default;

custom-file-button-bg

Deprecated!

as of v3.x with no replacement

$custom-file-button-bg: $input-group-addon-bg !default;

custom-file-button-color

Deprecated!

as of v3.x with no replacement

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

custom-file-text

Deprecated!

as of v3.x with no replacement

$custom-file-text: (
	en: 'Browse',
) !default;

Dropdowns

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$state

Invalid or Valid

String none

Used by

form-validation-state

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

Description

Bootstrap 4's Form Validation State Mixin.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$state noneString none
$color noneColor none
$icon noneString none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

Example

See Mixin `clay-css` for available keys to pass into the base selector
enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
placeholder-color: {Color | String | Null}, // deprecated after 3.7.0
placeholder-opacity: {Number | String | Null}, // deprecated after 3.7.0
placeholder: {Map | Null}, // See Mixin `clay-css` for available keys
selection-bg: {Color | String | Null}, // deprecated after 3.7.0
selection-color: {Color | String | Null}, // deprecated after 3.7.0
selection: {Map | Null}, // See Mixin `clay-css` for available keys
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
hover: {Map | Null}, // See Mixin `clay-css` for available keys
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: {Map | Null}, // See Mixin `clay-css` for available keys
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: {Map | Null}, // See Mixin `clay-css` for available keys
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

TODO's

    • Add @example
    • Add @link to documentation

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

Example

color: {Color | String | Null},
display: {String | Null},
padding-bottom: {Number | String | Null},
position: {String | Null},
vertical-align: {String | Null},
width: {Number | String | List | Null},
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-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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$toggle-switch-width

Width of switch bar

Number none
$toggle-switch-padding

Space between button and bar

Number none
$label-spacer-x

Space between toggle-switch-bar and data-label

Number8px

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.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map1 noneMap, null()
$map2 noneMap, 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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$vars

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

Arglist none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

The variable

Any none

Requires

Used by

required

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

Description

A helper function for displaying warning messages for required variables.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$var

The variable to check

Any none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gradient

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

String none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$radius

The border radius.

Number none

Requires

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

parameter Nameparameter Descriptionparameter Typeparameter Default 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 none

Requires

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$transitions

The transitions.

List none

Requires

clay-get-fallback

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$var

The CSS Custom Property to evaluate.

String none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

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

Key none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

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

Key none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

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

Key none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

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

Key none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

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

Key none
$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) { ... }

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to convert

Color none
$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

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

parameter Nameparameter Descriptionparameter Typeparameter Default 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

parameter Nameparameter Descriptionparameter Typeparameter Default 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

parameter Nameparameter Descriptionparameter Typeparameter Default 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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color-name

A key in the Sass map $theme-colors

String'primary'
$level noneNumber0

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value1

The first value

Number none
$value2

The second value

Number none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value1

The first value

Number none
$value2

The second value

Number none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$val1

The first number.

Number none
$val2

The second number.

Number none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$str1

The string to search.

String none
$str2

The search parameter.

String none

Used by

map-deep-get

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

The Sass map to fetch from

Map none
$keys

The keys to loop through

Arglist none

Requires

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$string

The string to operate on

String none
$search

The character to replace

String none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$string

The string to operate on

String none
$search

The character to replace

String none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$svg

The SVG markup to encode

String none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$string

The SVG to URL encode

String none
$escaped

The characters to escape

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

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

String none
$color

The color of the Lexicon Icon

Color none

Requires

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

The map to evaluate

Map none
$map-name

The name of the map

String none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

The map to evaluate

Map none
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

A map of key: value pairs.

Map none

Requires

Used by

[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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

The map to evaluate

Map none
$map-name

The name of the map

String none

[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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

The map to evaluate

Map none
$map-name

The name of the map

String'$grid-breakpoints'

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

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to convert into a gradient

Color none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$start-color

The starting color

Color$gray-700
$end-color

The ending color

Color$gray-800
$start-percent noneNumber none
$end-percent noneNumber none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$start-color

The starting color

Color$gray-700
$end-color

The ending color

Color$gray-800
$start-percent noneNumber none
$end-percent noneNumber none

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

parameter Nameparameter Descriptionparameter Typeparameter Default 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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$start-color

The starting color

Color$blue
$mid-color

The middle color

Color$purple
$color-stop noneNumber50%
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$start-color

The starting color

Color$blue
$mid-color

The middle color

Color$purple
$color-stop noneNumber50%
$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$inner-color noneColor$gray-700
$outer-color noneColor$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color noneColorrgba($white, 0.15)
$angle noneNumber45deg

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

Example

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

Requires

TODO's

    • Add @example
    • Add @link to documentation

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$columns noneNumber$grid-columns
$gutter noneNumber$grid-gutter-width
$breakpoints noneMap$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter noneNumber$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$max-widths noneNumber$container-max-widths
$breakpoints noneNumber$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter noneNumber$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter noneNumber$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size noneNumber none
$columns noneNumber$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size noneNumber none
$columns noneNumber$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size noneNumber none
$columns noneNumber$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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$count noneNumber none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$file-1x noneString none
$file-2x noneString none
$width-1x noneNumber none
$height-1x noneNumber none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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

Deprecated!

use clay-container instead

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

Description

A mixin for customizing or creating variants of input-group-text.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

Example

See Mixin `clay-css` for available keys to pass into the base selector
-=-=-=-=-=- Deprecated -=-=-=-=-=-
bg: {Color | String | Null}, // deprecated after 3.9.0

Requires

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

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

Map none

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