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;

Aspect Ratio

mixins

clay-aspect-ratio

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

Description

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

Parameters

NameDescriptionTypeDefault value
$width

The ratio width (e.g., 16)

Number1
$height

The ratio height (e.g., 9)

Number1

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-aspect-ratio-item-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-aspect-ratio-variant

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

Description

A mixin that styles an aspect ratio container.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
border-color: {Color | String | Null},
border-style: {String | Null},
border-width: {Number | List | Null},
color: {Color | String | Null},
font-size: {Number | String | Null},
horizontal: {Number | Null}, // Sets the `clay-aspect-ratio` `$width` (e.g., 16)
text-align: {String | Null},
vertical: {Number | Null}, // Sets the `clay-aspect-ratio` `$height` (e.g., 9)
lexicon-icon-height: {Number | String | Null},
lexicon-icon-margin-top: {Number | String | Null},
lexicon-icon-width: {Number | String | Null},

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

Badges

mixins

clay-badge-size

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

Description

A mixin for creating custom badge sizes.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

Buttons

mixins

clay-button-size

Deprecated!

use the mixin clay-button-variant instead

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

Description

A mixin that helps create custom button sizes

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs.

Map—

clay-button-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
align-items: {String | Null},
bg: {Color | String | Null},
border-color: {Color | String | List | Null},
border-radius: {Number | String | List | Null},
border-style: {String | Null},
border-width: {Number | String | List | Null},
bottom: {Number | String | Null},
color: {Color | String | Null},
cursor: {String | Null},
display: {String | Null},
flex-grow: {Number | String | Null},
flex-shrink: {Number | String | Null},
font-size: {Number | String | Null},
font-weight: {Number | String | Null},
height: {Number | String | Null},
justify-content: {String | Null},
left: {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},
opacity: {Number | String | Null},
padding-bottom: {Number | String | Null},
padding-left: {Number | String | Null},
padding-right: {Number | String | Null},
padding-top: {Number | String | Null},
position: {String | Null},
right: {Number | String | Null},
text-decoration: {String | Null},
top: {Number | String | Null},
transition: {List | Null},
user-select: {String | Null},
vertical-align: {String | Null},
white-space: {String | Null},
width: {Number | String | Null},
word-wrap: {String | Null},
hover-bg: {Color | String | Null},
hover-border-color: {Color | String | List | Null},
hover-color: {Color | String | Null},
hover-opacity: {Number | String | Null},
hover-text-decoration: {String | 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-opacity: {Number | String | Null},
focus-outline: {Number | String | Null},
disabled-bg: {Color | String | Null},
disabled-border-color: {Color | String | List | Null},
disabled-box-shadow: {String | List | Null},
disabled-color: {Color | String | Null},
disabled-cursor: {String | Null},
disabled-opacity: {Number | String | Null},
active-bg: {Color | String | Null},
active-border-color: {Color | String | List | Null},
active-box-shadow: {String | List | Null},
active-color: {Color | String | Null},
active-opacity: {Number | String | Null},
active-focus-box-shadow: {String | List}, // Default: $focus-box-shadow
inline-item-font-size: {Number | String | Null},
section-font-size: {Number | String | Null},
section-font-weight: {Number | String | Null},
section-line-height: {Number | String | Null},
font-size-mobile: {Number | String | Null},
height-mobile: {Number | String | Null},
padding-bottom-mobile: {Number | String | Null},
padding-left-mobile: {Number | String | Null},
padding-right-mobile: {Number | String | Null},
padding-top-mobile: {Number | String | Null},
width-mobile: {Number | String | Null},
loading-animation: {String | Null}, // The placeholder name 'loading-animation' or 'loading-animation-light'

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

Cards

mixins

clay-card-section-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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-style: {String | List | Null},
border-width: {Number | String | List | Null},
box-shadow: {String | List | Null},
cursor: {String | Null},
color: {Color | String | Null},
display: {String | Null},
flex-basis: {Number | String | Null},
flex-direction: {String | Null},
flex-grow: {Number | String | Null},
flex-shrink: {Number | String | Null},
margin-bottom: {Number | String | Null},
min-width: {Number | String | Null},
outline: {Number | String | Null},
position: {String | Null},
text-decoration: {String | Null},
transition: {String | List | Null},
width: {Number | String | Null},
word-wrap: {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}, // Pass parameters to `clay-link` mixin
hover-card-subtitle: {Map | Null}, // Pass parameters to `clay-link` mixin
hover-card-text: {Map | Null}, // Pass parameters to `clay-link` mixin
hover-card-link: {Map | Null}, // Pass parameters to `clay-link` mixin
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}, // Pass parameters to `clay-link` mixin
focus-card-subtitle: {Map | Null}, // Pass parameters to `clay-link` mixin
focus-card-text: {Map | Null}, // Pass parameters to `clay-link` mixin
focus-card-link: {Map | Null}, // Pass parameters to `clay-link` mixin
active-bg: {Color | String | Null},
active-border-color: {Color | String | List | Null},
active-color: {Color | String | Null},
active-card-title: {Map | Null}, // Pass parameters to `clay-link` mixin
active-card-subtitle: {Map | Null}, // Pass parameters to `clay-link` mixin
active-card-text: {Map | Null}, // Pass parameters to `clay-link` mixin
active-card-link: {Map | Null}, // Pass parameters to `clay-link` mixin
after-highlight: {Map | Null}, // Pass parameters to `clay-after-highlight-variant` mixin
aspect-ratio: {Map | Null}, // Pass parameters to `clay-aspect-ratio-variant` mixin
aspect-ratio-item: {Map | Null}, // Pass parameters to `clay-aspect-ratio-item-variant` mixin
sticker: {Map | Null}, // Pass parameters to `clay-sticker-variant` mixin
card-header: {Map | Null}, // Pass parameters to `clay-card-section-variant` mixin
card-body: {Map | Null}, // Pass parameters to `clay-card-section-variant` mixin
card-footer: {Map | Null}, // Pass parameters to `clay-card-section-variant` mixin
card-row: {Map | Null}, // Pass parameters to `clay-card-section-variant` mixin
card-title: {Map | Null}, // Pass parameters to `clay-link` mixin
card-subtitle: {Map | Null}, // Pass parameters to `clay-link` mixin
card-text: {Map | Null}, // Pass parameters to `clay-link` mixin
card-link: {Map | Null}, // Pass parameters to `clay-link` mixin

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-card-type-asset

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

Custom Forms

variables

custom-control-description-disabled-color

Deprecated!

as of v2.19.0 use the Sass map $custom-control-label-disabled-color instead. This variable is not used in Clay CSS.

$custom-control-description-disabled-color: $input-label-disabled-color !default;

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: null !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-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;

Dropdowns

mixins

clay-dropdown-menu-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
bg: {Color | String | Null},
bg-clip: {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},
box-shadow: {String | List | Null},
color: {Color | String | Null},
display: {String | Null},
float: {String | Null},
font-size: {Number | String | Null},
left: {Number | String | Null},
list-style: {String | Null},
margin-bottom: {Number | String | Null},
margin-left: {Number | String | Null},
margin-right: {Number | String | Null},
margin-top: {Number | String | Null},
max-height: {Number | String | Null},
max-width: {Number | String | Null},
min-height: {Number | String | Null},
min-width: {Number | String | Null},
overflow: {String | Null},
padding-bottom: {Number | String | Null},
padding-left: {Number | String | Null},
padding-right: {Number | String | Null},
padding-top: {Number | String | Null},
position: {String | Null},
text-align: {String | Null},
top: {Number | String | Null},
width: {Number | String | Null},
z-index: {Number | String | Null},
font-size-mobile: {Number | String | Null},
max-height-mobile: {Number | String | Null},
max-width-mobile: {Number | String | Null},

TODO's

    • Add @example
    • Add @link to documentation

clay-dropdown-item-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
bg: {Color | String | Null},
border-radius: {Number | String | List | Null},
border-width: {Number | String | List | Null},
clear: {String | Null},
color: {Color | String | Null},
display: {String | Null},
font-size: {Number | String | Null},
font-weight: {Number | String | Null},
outline: {Number | String | Null},
overflow: {String | Null},
padding-bottom: {Number | String | Null},
padding-left: {Number | String | Null},
padding-right: {Number | String | Null},
padding-top: {Number | String | Null},
position: {String | Null},
text-align: {String | Null},
transition: {String | List | Null},
white-space: {String | Null},
width: {Number | String | Null},
word-wrap: {String | Null},
hover-bg: {Color | String | Null},
hover-color: {Color | String | Null},
hover-opacity: {Number | String | Null},
hover-text-decoration: {String | Null},
focus-bg: {Color | String | Null},
focus-border-radius: {Number | String | List | Null},
focus-box-shadow: {String | List | Null},
focus-color: {Color | String | Null},
focus-opacity: {Number | String | Null},
focus-outline: {Number | String | Null},
focus-text-decoration: {String | Null},
active-bg: {Color | String | Null},
active-border-color: {String | List | Null},
active-color: {Color | String | Null},
active-font-weight: {Number | String | Null},
active-text-decoration: {String | Null},
active-class-bg: {Color | String | Null},
active-class-border-color: {Color | String | List | Null},
active-class-color: {Color | String | Null},
active-class-font-weight: {Number | String | Null},
active-class-text-decoration: {String | Null},
disabled-bg: {Color | String | Null},
disabled-border-color: {Color | String | List | Null},
disabled-box-shadow: {String | List | Null},
disabled-color: {Color | String | Null},
disabled-cursor: {String | Null},
disabled-opacity: {Number | String | Null},
disabled-outline: {Number | String | Null},
disabled-pointer-events: {String | Null},
disabled-text-decoration: {String | Null},
disabled-active-pointer-events: {String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

Forms

mixins

clay-form-control-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
align-items: {String | Null},
bg: {Color | String | Null},
bg-clip: {String | Null},
bg-image: {String | List | Null},
bg-position: {String | List | Null},
bg-repeat: {String | List | Null},
bg-size: {Number | String | List | Null},
border-color: {Color | String | List | Null},
border-radius: {Number | String | List | Null},
border-style: {String | List | Null},
border-width: {Number | String | List | Null},
box-shadow: {String | List | Null},
color: {Color | String | Null},
cursor: {String | Null},
display: {String | Null},
flex-wrap: {String | Null},
font-size: {Number | String | Null},
font-weight: {Number | String | Null},
height: {Number | String | Null},
justify-content: {String | Null},
line-height: {Number | String | Null},
max-width: {Number | String | Null},
min-height: {Number | String | Null},
min-width: {Number | String | Null},
outline: {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},
text-transform: {String | Null},
transition: {String | List | Null},
width: {Number | String | Null},
placeholder-color: {Color | String | Null},
placeholder-opacity: {Number | 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-placeholder-color: {Color | String | Null},
focus-bg: {Color | String | Null},
focus-bg-image: {String | List | Null},
focus-border-color: {Color | String | List | Null},
focus-box-shadow: {String | List | Null},
focus-color: {Color | String | Null},
focus-placeholder-color: {Color | String | Null},
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},
disabled-bg-image: {String | List | Null},
disabled-border-color: {Color | String | List | Null},
disabled-box-shadow: {String | List | Null},
disabled-color: {Color | String | Null},
disabled-cursor: {String | Null},
disabled-opacity: {Number | String | Null},
disabled-placeholder-color: {Color | String | Null},

Requires

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

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

appearance: {String | Null},
bg: {Color | String | Null},
bg-clip: {String | Null},
bg-image: {String | List | Null},
bg-position: {String | List | Null},
bg-repeat: {String | List | Null},
bg-size: {Number | String | List | Null},
border-color: {Color | String | List | Null},
border-radius: {Number | String | List | Null},
border-style: {String | List | Null},
border-width: {Number | String | List | Null},
box-shadow: {String | List | Null},
color: {Color | String | Null},
cursor: {String | Null},
display: {String | Null},
font-size: {Number | String | Null},
font-weight: {Number | String | Null},
height: {Number | String | Null},
line-height: {Number | String | Null},
min-width: {Number | String | Null},
outline: {Number | String | Null},
padding-bottom: {Number | String | Null},
padding-left: {Number | String | Null},
padding-right: {Number | String | Null},
padding-top: {Number | String | Null},
transition: {String | List | Null},
width: {Number | 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},
focus-bg: {Color | String | Null},
focus-bg-image: {String | List | Null},
focus-border-color: {Color | String | List | Null},
focus-box-shadow: {String | List | Null},
focus-color: {Color | String | Null},
disabled-bg: {Color | String | Null},
disabled-bg-image: {String | List | Null},
disabled-border-color: {Color | String | List | Null},
disabled-box-shadow: {String | List | Null},
disabled-color: {Color | String | Null},
disabled-cursor: {String | Null},
disabled-opacity: {Number | String | Null},

TODO's

    • Add @example
    • Add @link to documentation

clay-range-input-variant

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

Description

A mixin to create Clay Range variants.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

map-new

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

Description

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

Parameters

None.

Used by

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

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

Requires

setter

@function setter($var, $val) { ... }

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 declaration. If the value of a variable is null, setter returns the default, $val.

Parameters

NameDescriptionTypeDefault value
$var

The Sass variable

Any—
$val

The default value to return if $var is null

Any—

Used by

math-sign

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

Description

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

Parameters

NameDescriptionTypeDefault value
$num

The variable

Any—

Used by

required

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

Description

A helper function for displaying warning messages for required variables.

Parameters

NameDescriptionTypeDefault value
$var

The variable to check

Any—
$msg

The error message to display

String'This value is required!'

Used by

clay-breakpoint-prev

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

Description

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

Parameters

NameDescriptionTypeDefault value
$name

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

Key—
$breakpoints

A map that defines the breakpoints

Map$grid-breakpoints
$breakpoint-names

A list of all the keys in $breakpoints

Listmap-keys($breakpoints)

Used by

clay-max

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

Description

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

Parameters

NameDescriptionTypeDefault value
$val1

The first number.

Number—
$val2

The second number.

Number—

clay-str-replace

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

Description

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

Parameters

NameDescriptionTypeDefault value
$string

The string to operate on

String—
$search

The character to replace

String—
$replace

The character to replace $search with

String''

Used by

Links

clay-svg-url

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

Description

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

Parameters

NameDescriptionTypeDefault value
$svg

The SVG markup to encode

String—

Requires

Used by

Links

clay-icon

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

Description

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

Parameters

NameDescriptionTypeDefault value
$name

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

String—
$color

The color of the Lexicon Icon

Color—

Requires

clay-get-icons

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

Description

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

Parameters

NameDescriptionTypeDefault value
$color

The color to use for all the Lexicon Icons

Color''

Used by

mixins

clay-css

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs.

Map—

Requires

variables

clay-unset

Deprecated!

as of v2.4.1 we will not support unsetting variables in version 2 because it violates the Sass spec. If you are using libsass you can still unset Clay CSS / Bootstrap variables with the syntax $my-var: !default;.

$clay-unset: clay-unset !default;

Grid

mixins

clay-container-no-gutters

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

Description

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

Parameters

None.

clay-container

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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}
align-items: {String | Null},
bg: {Color | String | Null},
bg-image: {String | List | Null},
bg-position: {String | List | Null},
bg-size: {Number | String | List | Null},
border-color: {Color | String | List | Null},
border-radius: {Number | String | List | Null},
border-style: {String | List | Null},
border-width: {Number | String | List | Null},
color: {Color | String | Null},
cursor: {String | 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},
float: {String | Null},
font-family: {Number | String | Null},
font-size: {Number | String | Null},
font-weight: {Number | String | Null},
height: {Number | String | Null},
justify-content: {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},
max-height: {Number | String | Null},
max-width: {Number | String | Null},
min-height: {Number | String | Null},
min-width: {Number | String | Null},
opacity: {Number | String | Null},
order: {Number | String | Null},
padding-bottom: {Number | String | Null},
padding-left: {Number | String | Null},
padding-right: {Number | String | Null},
padding-top: {Number | String | Null},
position: {String | Null},
bottom: {Number | String | Null},
left: {Number | String | Null},
right: {Number | String | Null},
top: {Number | String | Null},
text-align: {String | Null},
text-decoration: {String | Null},
text-transform: {String | Null},
transition: {String | List | Null},
vertical-align: {String | Null},
width: {Number | String | Null},
padding-bottom-mobile: {Number | String | Null},
padding-left-mobile: {Number | String | Null},
padding-right-mobile: {Number | String | Null},
padding-top-mobile: {Number | String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-row

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

display: {String | Null},
flex-wrap: {String | Null},
justify-content: {String | Null},
margin-bottom: {Number | String | Null},
margin-left: {Number | String | Null},
margin-right: {Number | String | Null},
margin-top: {Number | String | Null},

TODO's

    • Add @example
    • Add @link to documentation

Input Groups

mixins

clay-input-group-stacked

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

breakpoint: {String | Null}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead. // Default: md
breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
item-margin-bottom: {Number | String | Null}, // `.input-group-item`
item-margin-left: {Number | String | Null}, // `.input-group-item`
item-margin-right: {Number | String | Null}, // `.input-group-item`
item-margin-top: {Number | String | Null}, // `.input-group-item`
shrink-margin-bottom: {Number | String | Null}, // `.input-group-item-shrink`
shrink-margin-left: {Number | String | Null}, // `.input-group-item-shrink`
shrink-margin-right: {Number | String | Null}, // `.input-group-item-shrink`
shrink-margin-top: {Number | String | Null}, // `.input-group-item-shrink`

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

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

align-items: {String | Null},
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},
color: {Color | String | Null},
display: {String | Null},
font-size: {Number | String | Null},
font-weight: {Number | String | Null},
height: {Number | String | Null},
justify-content: {String | Null},
line-height: {Number | String | Null},
min-width: {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},
white-space: {String | Null},

Labels

mixins

clay-label-size

Deprecated!

use clay-label-variant instead

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

Description

A mixin for creating .label size variants.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

Requires

Used by

clay-label-variant

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

Description

A mixin for creating .label color variants.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

bg: {Color | String | Null},
border-color: {Color | String | List | Null},
color: {Color | String | Null},
outline: {Number | String | Null},
text-decoration: {String | Null},
transition: {String | List | Null},
hover-bg: {Color | String | Null},
hover-border-color: {Color | String | List | Null},
hover-color: {Color | String | Null},
hover-text-decoration: {String | 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-outline: {Number | String | Null},
focus-text-decoration: {String | Null},
disabled-bg: {Color | String | Null},
disabled-border-color: {Color | String | List | Null},
disabled-box-shadow: {String | List | Null},
disabled-color: {Color | String | Null},
link-color: {Color | String | Null},
link-text-decoration: {String | Null},
link-hover-color: {Color | String | Null},
link-hover-text-decoration: {String | Null},
close: {Map | Null}, // Pass parameters to `clay-close` mixin

Requires

Used by

variables

label-primary-color

Deprecated!

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

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

label-primary-hover-color

Deprecated!

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

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

label-primary-bg

Deprecated!

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

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

label-primary-hover-bg

Deprecated!

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

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

label-primary-border-color

Deprecated!

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

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

label-primary-hover-border-color

Deprecated!

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

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

label-primary-link-color

Deprecated!

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

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

label-primary-link-hover-color

Deprecated!

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

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

label-secondary-color

Deprecated!

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

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

label-secondary-hover-color

Deprecated!

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

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

label-secondary-bg

Deprecated!

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

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

label-secondary-hover-bg

Deprecated!

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

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

label-secondary-border-color

Deprecated!

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

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

label-secondary-hover-border-color

Deprecated!

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

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

label-secondary-link-color

Deprecated!

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

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

label-secondary-link-hover-color

Deprecated!

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

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

label-success-color

Deprecated!

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

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

label-success-hover-color

Deprecated!

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

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

label-success-bg

Deprecated!

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

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

label-success-hover-bg

Deprecated!

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

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

label-success-border-color

Deprecated!

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

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

label-success-hover-border-color

Deprecated!

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

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

label-success-link-color

Deprecated!

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

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

label-success-link-hover-color

Deprecated!

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

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

label-info-color

Deprecated!

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

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

label-info-hover-color

Deprecated!

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

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

label-info-bg

Deprecated!

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

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

label-info-hover-bg

Deprecated!

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

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

label-info-border-color

Deprecated!

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

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

label-info-hover-border-color

Deprecated!

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

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

label-info-link-color

Deprecated!

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

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

label-info-link-hover-color

Deprecated!

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

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

label-warning-color

Deprecated!

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

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

label-warning-hover-color

Deprecated!

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

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

label-warning-bg

Deprecated!

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

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

label-warning-hover-bg

Deprecated!

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

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

label-warning-border-color

Deprecated!

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

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

label-warning-hover-border-color

Deprecated!

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

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

label-warning-link-color

Deprecated!

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

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

label-warning-link-hover-color

Deprecated!

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

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

label-danger-color

Deprecated!

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

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

label-danger-hover-color

Deprecated!

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

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

label-danger-bg

Deprecated!

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

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

label-danger-hover-bg

Deprecated!

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

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

label-danger-border-color

Deprecated!

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

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

label-danger-hover-border-color

Deprecated!

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

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

label-danger-link-color

Deprecated!

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

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

label-danger-link-hover-color

Deprecated!

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

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

label-light-color

Deprecated!

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

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

label-light-hover-color

Deprecated!

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

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

label-light-bg

Deprecated!

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

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

label-light-hover-bg

Deprecated!

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

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

label-light-border-color

Deprecated!

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

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

label-light-hover-border-color

Deprecated!

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

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

label-light-link-color

Deprecated!

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

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

label-light-link-hover-color

Deprecated!

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

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

label-dark-color

Deprecated!

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

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

label-dark-hover-color

Deprecated!

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

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

label-dark-bg

Deprecated!

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

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

label-dark-hover-bg

Deprecated!

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

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

label-dark-border-color

Deprecated!

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

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

label-dark-hover-border-color

Deprecated!

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

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

label-dark-link-color

Deprecated!

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

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

label-dark-link-hover-color

Deprecated!

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

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

Line Clamp

mixins

clay-line-clamp

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

Description

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

Parameters

NameDescriptionTypeDefault value
$lines

The number of lines to clamp

Number3
$line-height

The element's line-height

Number$line-height-base
$font-size

The font-size of the element

Number1em

Links

mixins

clay-link

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

align-items: {String | Null},
bg: {Color | String | Null},
border-color: {Color | String | List | Null},
border-style: {String | List | Null},
border-width: {Number | String | List | Null},
border-radius: {Number | String | List | Null},
box-shadow: {String | List | Null},
color: {Color | String | Null},
cursor: {String | Null},
display: {String | Null},
font-family: {String | List | Null},
font-size: {Number | String | Null},
font-weight: {Number | String | Null},
height: {Number | String | Null},
justify-content: {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},
max-width: {Number | String | Null},
opacity: {Number | String | Null},
outline: {Number | String | Null},
padding-bottom: {Number | String | Null},
padding-left: {Number | String | Null},
padding-right: {Number | String | Null},
padding-top: {Number | String | Null},
pointer-events: {String | Null},
text-align: {String | Null},
text-decoration: {String | Null},
text-transform: {String | Null},
transition: {List | Null},
vertical-align: {String | Null},
width: {Number | String | Null},
z-index: {Number | String | Null},
hover-bg: {Color | String | Null},
hover-border-color: {Color | String | List | Null},
hover-color: {Color | String | Null},
hover-opacity: {Number | String | Null},
hover-text-decoration: {String | Null},
hover-z-index: {Number | String | Null},
focus-bg: {Color | String | Null},
focus-border-color: {Color | String | List | Null},
focus-border-radius: {Number | String | List | Null},
focus-box-shadow: {String | List | Null},
focus-color: {Color | String | Null},
focus-opacity: {Number | String | Null},
focus-outline: {Number | String | Null},
focus-text-decoration: {String | Null},
focus-z-index: {Number | String | Null},
active-bg: {Color | String | Null},
active-border-color: {Color | String | List | Null},
active-color: {Color | String | Null},
active-font-weight: {Number | String | Null},
active-z-index: {Number | String | Null},
active-class-bg: {Color | String | Null}, // Default: $active-bg
active-class-border-color: {Color | String | List | Null}, // Default: $active-border-color
active-class-color: {Color | String | Null}, // Default: $active-color
active-class-font-weight: {Number | String | Null}, // Default: $active-font-weight
active-class-z-index: {Number | String | Null}, // Default: $active-z-index
disabled-bg: {Color | String | Null},
disabled-border-color: {Color | String | List | Null},
disabled-box-shadow: {String | List | Null},
disabled-color: {Color | String | Null},
disabled-cursor: {String | Null},
disabled-opacity: {Number | String | Null},
disabled-pointer-events: {String | Null},
disabled-text-decoration: {String | Null},
btn-focus-box-shadow: {String | List | Null},
btn-focus-outline: {Number | String | Null},
lexicon-icon-font-size: {Number | String | Null},
lexicon-icon-margin-bottom: {Number | String | Null},
lexicon-icon-margin-left: {Number | String | Null},
lexicon-icon-margin-right: {Number | String | Null},
lexicon-icon-margin-top: {Number | String | Null},

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-text-typography

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

color: {Color | String | Null},
display: {String | Null},
font-family: {String | List | Null},
font-size: {Number | String | Null},
font-weight: {Number | String | Null},
letter-spacing: {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},
max-width: {Number | String | Null},
padding-bottom: {Number | String | Null},
padding-left: {Number | String | Null},
padding-right: {Number | String | Null},
padding-top: {Number | String | Null},
text-transform: {String | Null},
word-wrap: {String | Null},
clay-link: {Map | Null}, // Pass parameters to `clay-link` mixin

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-title

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

Description

Shortcut for mixin clay-text-typography

Parameters

NameDescriptionTypeDefault value
$map

A map of key: value pairs.

Map—

Requires

List Group

mixins

clay-list-group-notification-item-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

Requires

TODO's

    • Add @example
    • Add @link to documentation

Loaders

mixins

clay-loading-animation-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
border-radius: {Number | String | List | Null}, // Default: 50%
color: {Color}, // Default: $secondary
transform: {String | List | Null}, // Default: scale(0.33334)
animation: {String | List | Null}, // Default: 1.2s ease-out infinite
animation-name: {String}, // *required
ball-0-scale: {Number}, // Default: 0
ball-1-scale: {Number}, // Default: -0.10em
ball-2-scale: {Number}, // Default: -0.15em
ball-3-scale: {Number}, // Default: -0.20em
ball-4-scale: {Number}, // Default: -0.25em
ball-5-scale: {Number}, // Default: -0.35em
ball-0-alpha: {Number}, // Default: 1
ball-1-alpha: {Number}, // Default: 0.80
ball-2-alpha: {Number}, // Default: 0.60
ball-3-alpha: {Number}, // Default: 0.40
ball-4-alpha: {Number}, // Default: 0.20
ball-5-alpha: {Number}, // Default: 0.10
ball-0-color: {Color} // Default: rgba($color, $ball-0-alpha)
ball-1-color: {Color}, // Default: rgba($color, $ball-1-alpha)
ball-2-color: {Color}, // Default: rgba($color, $ball-2-alpha)
ball-3-color: {Color}, // Default: rgba($color, $ball-3-alpha)
ball-4-color: {Color}, // Default: rgba($color, $ball-4-alpha)
ball-5-color: {Color}, // Default: rgba($color, $ball-5-alpha)

Requires

TODO's

    • Add @example
    • Add @link to documentation

Menubar

mixins

clay-menubar-vertical-expand

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
breakpoint-up: {String}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead
breakpoint-down: {String}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
border-color: {Color | String | List | Null},
border-style: {String | List | Null},
border-width: {Number | String | List | Null},
max-width: {String | Number}, // Default: 15.625rem
border-color-mobile: {Color | String | List}, // Default: transparent
border-style-mobile: {String | List}, // Default: solid
border-width-mobile: {Number | String | List}, // Default: 0.0625rem
margin-bottom-mobile: {Number | String | Null},
margin-left-mobile: {Number | String | Null},
margin-right-mobile: {Number | String | Null},
margin-top-mobile: {Number | String | Null},
max-width-mobile: {Number | String}, // Default: none
min-height-mobile: {Number | String}, // Default: 3rem
padding-x-mobile: {Number | String}, // Default: 0.5rem
padding-y-mobile: {Number | String | Null},
collapse-border-color-mobile: {Color | String}, // Default: transparent
collapse-border-style-mobile: {String | List}, // Default: solid
collapse-border-width-mobile: {Number | String | List}, // Default: 0.0625rem
collapse-inner-spacer-y-mobile: {Number | String}, // Default: 0.5rem
collapse-margin-top-mobile: {Number | String | Null},
collapse-max-width-mobile: {Number | String | Null},
collapse-left-mobile: {Number | String}, // Default: -0.0625rem
collapse-right-mobile: {Number | String}, // Default: -0.0625rem
collapse-z-index-mobile: {Number | String | Null},
toggler-border-color-mobile: {Color | String | List}, // Default: transparent
toggler-border-style-mobile: {String | List}, // Default: solid
toggler-border-width-mobile: {Number | String | List}, // Default: 0.0625rem
toggler-height-mobile: {Number | String}, // Default: 2rem
toggler-padding-x-mobile: {Number | String}, // Default: 0.5rem
toggler-padding-y-mobile: {Number | String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-menubar-vertical-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
breakpoint-up: {String}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead
breakpoint-down: {String}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
bg: {Color | String | Null},
border-color: {Color | String | List | Null},
border-style: {String | List | Null},
// `$link-bg` is deprecated use `$link` instead
link-bg: {Color | String | Null},
// `$link-border-radius` is deprecated use `$link` instead
link-border-radius: {Number | String | List | Null},
// `$link-color` is deprecated use `$link` instead
link-color: {Color | String}, // Default: $navbar-light-color
// `$link-hover-bg` is deprecated use `$link` instead
link-hover-bg: {Color | String | Null},
// `$link-hover-color` is deprecated use `$link` instead
link-hover-color: {Color | String}, // Default: $navbar-light-hover-color
// `$link-active-bg` is deprecated use `$link` instead
link-active-bg: {Color | String | Null},
// `$link-active-color` is deprecated use `$link` instead
link-active-color: {Color | String}, // Default: $navbar-light-active-color
// `$link-active-font-weight` is deprecated use `$link` instead
link-active-font-weight: {Number | String | Null},
// `$link-disabled-bg` is deprecated use `$link` instead
link-disabled-bg: {Color | String | Null},
// `$link-disabled-color` is deprecated use `$link` instead
link-disabled-color: {Color | String}, // Default: $navbar-light-disabled-color
link: {Map | Null}, // Pass parameters to `clay-link` mixin
bg-mobile: {Color | String | Null},
border-color-mobile: {Color | String | List | Null},
border-style-mobile: {String | List | Null},
// `$link-border-radius-mobile` is deprecated use `$link-mobile` instead
link-border-radius-mobile: {Number | String | List | Null},
// `$link-color-mobile` is deprecated use `$link-mobile` instead
link-color-mobile: {Color | String}, // Default: $dropdown-link-color
// `$link-hover-bg-mobile` is deprecated use `$link-mobile` instead
link-hover-bg-mobile: {Color | String}, // Default: $dropdown-link-hover-bg
// `$link-hover-color-mobile` is deprecated use `$link-mobile` instead
link-hover-color-mobile: {Color | String}, // Default: $dropdown-link-hover-color
// `$link-active-bg-mobile` is deprecated use `$link-mobile` instead
link-active-bg-mobile: {Color | String}, // Default: $dropdown-link-active-bg
// `$link-active-font-weight-mobile` is deprecated use `$link-mobile` instead
link-active-font-weight-mobile: {Number | String}, // Default: $dropdown-link-active-font-weight
// `$link-active-color-mobile` is deprecated use `$link-mobile` instead
link-active-color-mobile: {Color | String}, // Default: $dropdown-link-active-color
// `$link-disabled-bg-mobile` is deprecated use `$link-mobile` instead
link-disabled-bg-mobile: {Color | String}, // Default: transparent
// `$link-disabled-color-mobile` is deprecated use `$link-mobile` instead
link-disabled-color-mobile: {Color | String}, // Default: $dropdown-link-disabled-color
link-mobile: {Map | Null}, // Pass parameters to `clay-link` mixin
collapse-bg-mobile: {Color | String}, // Default: $dropdown-bg
collapse-border-color-mobile: {Color | String}, // Default: $dropdown-border-color
collapse-border-radius-mobile: {Number | String | List}, // Default: $border-radius
collapse-border-style-mobile: {String | List | Null},
collapse-box-shadow-mobile: {String | List}, // Default: $dropdown-box-shadow
// `$toggler-border-color-mobile` is deprecated use `$toggler-mobile` instead
toggler-border-color-mobile: {Color | String | Null},
// `$toggler-border-style-mobile` is deprecated use `$toggler-mobile` instead
toggler-border-style-mobile: {String | List | Null},
// `$toggler-color-mobile` is deprecated use `$toggler-mobile` instead
toggler-color-mobile: {Color | String}, // Default: $link-active-color
// `$toggler-font-size-mobile` is deprecated use `$toggler-mobile` instead
toggler-font-size-mobile: {Number | String | Null},
// `$toggler-font-weight-mobile` is deprecated use `$toggler-mobile` instead
toggler-font-weight-mobile: {Number | String | Null},
toggler-mobile: {Map | Null}, // Pass parameters to `clay-button-variant` mixin

Requires

TODO's

    • Add @example
    • Add @link to documentation

Modals

mixins

clay-modal-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

header-bg: {Color | String | Null},
header-border-color: {Color | String | List | Null},
header-color: {Color | String | Null},
// header-close-color is deprecated in v2.0.0-rc.12 use header-close instead
header-close-color: {Color | String},
header-close: {Map | Null}, // Pass parameters to `clay-link` mixin
body-bg: {Color | String | Null},
body-color: {Color | String | Null},
footer-bg: {Color | String | Null},
footer-border-color: {Color | String | List | Null},

Requires

Nav

mixins

clay-nav-nested

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

Description

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

Parameters

NameDescriptionTypeDefault value
$indent

The amount to indent in pixels

Number15px
$nest-level

The number of times to iterate

Number15
$nav-class

The class name of nav the element

String".nav"
$i

The starting loop index

Number1

TODO's

    • Add @example
    • Add @link to documentation

clay-nav-variant

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

Description

A mixin to create a .nav color variant.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

bg: {Color | String | Null},
link-bg: {Color | String | Null},
link-border-radius: {Number | String | List | Null},
link-color: {Color | String | Null},
link-font-weight: {Number | String | Null},
link-hover-bg: {Color | String | Null},
link-hover-color: {Color | String | Null},
link-focus-bg: {Color | String | Null},
link-focus-color: {Color | String | Null},
link-disabled-bg: {Color | String}, // Default: transparent
link-disabled-color: {Color | String}, // Default: $nav-link-disabled-color
link-disabled-opacity: {Number | String | Null},
link-active-bg: {Color | String | Null},
link-active-color: {Color | String | Null},
link-active-font-weight: {Number | String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

Pagination

variables

pagination-item-margin-x

Deprecated!

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

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

pagination-item-margin-y

Deprecated!

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

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

pagination-link-border-radius

Deprecated!

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

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

pagination-link-cursor

Deprecated!

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

$pagination-link-cursor: null !default;

pagination-link-transition

Deprecated!

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

$pagination-link-transition: null !default;

pagination-disabled-cursor

Deprecated!

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

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

pagination-disabled-opacity

Deprecated!

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

$pagination-disabled-opacity: 1 !default;

pagination-disabled-pointer-events

Deprecated!

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

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

pagination-items-per-page-bg

Deprecated!

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

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

pagination-items-per-page-border-color

Deprecated!

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

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

pagination-items-per-page-border-radius

Deprecated!

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

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

pagination-items-per-page-color

Deprecated!

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

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

pagination-items-per-page-transition

Deprecated!

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

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

pagination-items-per-page-hover-bg

Deprecated!

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

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

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

Deprecated!

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

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

pagination-items-per-page-hover-color

Deprecated!

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

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

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

Deprecated!

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

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

pagination-items-per-page-focus-outline

Deprecated!

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

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

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

Deprecated!

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

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

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

Deprecated!

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

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

Panels

mixins

clay-panel-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

bg: {Color | String | Null},
border-color: {Color | String | List | Null},
border-style: {String | List | Null},
border-width: {Number | String | List | Null},
box-shadow: {String | List | Null},
color: {Color | String | Null},
font-size: {Number | String | Null},
header-bg: {Color | String | Null},
header-border-color: {Color | String | List | Null},
header-border-style: {String | List | Null},
header-border-width: {Number | String | List | Null},
header-color: {Color | String | Null},
header-margin-bottom: {Number | String | Null},
header-margin-left: {Number | String | Null},
header-margin-right: {Number | String | Null},
header-margin-top: {Number | String | Null},
header-padding-bottom: {Number | String | Null},
header-padding-left: {Number | String | Null},
header-padding-right: {Number | String | Null},
header-padding-top: {Number | String | Null},
header-transition: {String | List | Null},
header-collapsed-border-color: {Color | String | List | Null},
header-link: {Map | Null}, // Pass parameters to `clay-link` mixin
title-font-size: {Number | String | Null},
title-font-weight: {Number | String | Null},
title-text-transform: {String | List | Null},
collapse-icon-bottom: {Number | String | Null},
collapse-icon-font-size: {Number | String | Null},
collapse-icon-left: {Number | String | Null},
collapse-icon-right: {Number | String | Null},
collapse-icon-top: {Number | String | Null},
body-margin-bottom: {Number | String | Null},
body-margin-left: {Number | String | Null},
body-margin-right: {Number | String | Null},
body-margin-top: {Number | String | Null},
body-padding-bottom: {Number | String | Null},
body-padding-left: {Number | String | Null},
body-padding-right: {Number | String | Null},
body-padding-top: {Number | String | Null},
footer-bg: {Color | String | Null},
footer-border-color: {Color | String | List | Null},
footer-color: {Color | String | Null},

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

Sheet

css

.sheet-lg

Deprecated!

as of v3.x use .container .sheet instead

.sheet-lg { ... }

mixins

sheet-footer-btn-block

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
btn-margin-bottom-mobile: {Number | String | Null},

Requires

TODO's

    • Add @example
    • Add @link to documentation

variables

sheet-lg-max-width

Deprecated!

as of 3.x.

$sheet-lg-max-width: ceil(map-get($container-max-widths, lg) * 0.83333) !default;

Sidebar

mixins

clay-sidebar-variant

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

Description

A mixin to create Sidebar color variants (e.g., <div class="sidebar my-custom-sidebar-variant"></div>).

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

bg: {Color | String | Null},
border-color: {Color | String | List | Null},
border-bottom-width: {Number | String}, // Default: 0
border-left-width: {Number | String}, // Default: 0
border-right-width: {Number | String}, // Default: 0
border-top-width: {Number | String}, // Default: 0
box-shadow: {String | List | Null},
color: {Color | String | Null},
panel-bg: {Color | String | Null},
component-header-title: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
component-header-subtitle: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
component-link: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
dt: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
dd: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
sidebar-list-group-item-bg: {Color | String | Null},
sidebar-list-group-item-border-color: {Color | String | List | Null},
sidebar-list-group-title: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
sidebar-list-group-subtitle: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
sidebar-list-group-text: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
sidebar-list-group-subtext: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
panel-unstyled: {Map | Null}, // Pass parameters to `clay-panel-variant` mixin

Requires

TODO's

    • Add @example
    • Add @link to documentation

Stickers

mixins

clay-sticker-size

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

Description

A mixin that helps create custom Sticker sizes.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-sticker-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

align-items: {String | Null},
background-color: {Color | String | Null}, // An alias for bg
bg: {Color | String | Null}, // Default: $background-color
border-color: {Color | String | List | Null},
border-radius: {Number | String | List | Null},
border-style: {String | List | Null},
border-width: {Number | String | List | Null},
box-shadow: {String | List | Null},
color: {Color | String | Null},
display: {String | Null},
font-size: {Number | String | Null},
font-weight: {Number | String | Null},
height: {Number | String | Null},
justify-content: {String | Null},
line-height: {Number | String | Null},
position: {String | Null},
text-align: {String | Null},
vertical-align: {String | Null},
width: {Number | String | Null},

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

Tbar

mixins

clay-tbar-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

border-color: {Color | String | List | Null},
border-style: {String | List | Null},
border-width: {Number | String | List | Null},
bg-color: {Color | String | Null},
color: {Color | String | Null},
font-size: {Number | String | Null},
height: {Number | String | Null},
padding-x: {Number | String | Null},
padding-y: {Number | String | Null},
strong-font-weight: {Number | String | Null},
item-justify-content: {String | Null},
item-padding-x: {Number | String | Null},
item-padding-y: {Number | String | Null},
btn-height: {Number | String | Null},
btn-font-size: {Number | String | Null}, // Default: $font-size
btn-font-weight: {Number | String | Null},
btn-line-height: {Number | String | Null},
btn-margin-x: {Number | String | Null},
btn-margin-y: {Number | String | Null},
btn-padding-x: {Number | String | Null},
btn-padding-y: {Number | String | Null},
btn-monospaced-border-radius: {Number | String | List | Null},
btn-monospaced-border-width: {Number | String | List | Null},
btn-monospaced-font-size: {Number | String | Null},
btn-monospaced-margin-x: {Number | String | Null},
btn-monospaced-margin-y: {Number | String | Null},
btn-monospaced-padding: {Number | String | List | Null},
btn-monospaced-size: {Number | String | Null}, // Default: $btn-height
link-margin-x: {Number | String | Null},
link-margin-y: {Number | String | Null},
link-padding-x: {Number | String | Null},
link-padding-y: {Number | String | Null},
link-monospaced-border-radius: {Number | String | List | Null},
link-monospaced-border-width: {Number | String | List | Null},
link-monospaced-font-size: {Number | String | Null},
link-monospaced-margin-x: {Number | String | Null},
link-monospaced-margin-y: {Number | String | Null},
link-monospaced-padding: {Number | String | List | Null},
link-monospaced-size: {Number | String | Null},
section-text-align: {String | Null},
component-action: {Map | Null}, // Pass parameters to `clay-link` mixin
component-link: {Map | Null}, // Pass parameters to `clay-link` mixin
component-title: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
component-text: {Map | Null}, // Pass parameters to `clay-text-typography` mixin
component-label: {Map | Null}, // Pass parameters to `clay-label-variant` mixin
tbar-label-size: {Map | Null}, // Pass parameters to `clay-label-size` mixin

Requires

TODO's

    • Add @example
    • Add @link to documentation

clay-tbar-inline-down

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

TODO's

    • Add @example
    • Add @link to documentation

Timelines

mixins

clay-timeline-item-reverse

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

Description

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

Parameters

None.

TODO's

    • Add @link to documentation

clay-timeline-spacing

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

Description

A mixin that helps with spacing in a .timeline.

Parameters

NameDescriptionTypeDefault value
$outer-spacing

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

Number—
$inner-spacing

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

Number—
$item-padding-y

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

Number10px

TODO's

    • Add @link to documentation

Toggle Switch

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

NameDescriptionTypeDefault value
$toggle-switch-width

Width of switch bar

Number—
$toggle-switch-padding

Space between button and bar

Number—
$label-spacer-x

Space between toggle-switch-bar and data-label

Number8px

Clay CSS

variables

input-readonly-bg

Deprecated!

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

$input-readonly-bg: null !default;

input-readonly-border-color

Deprecated!

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

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

input-readonly-color

Deprecated!

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

$input-readonly-color: null !default;

input-readonly-cursor

Deprecated!

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

$input-readonly-cursor: null !default;

input-readonly-focus-bg

Deprecated!

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

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

input-readonly-focus-border-color

Deprecated!

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

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

input-readonly-focus-color

Deprecated!

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

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

Utilities

mixins

clay-bg-checkered

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

Description

A mixin for creating checkered backgrounds.

Parameters

NameDescriptionTypeDefault value
$fg-color

The foreground color to use

Color$gray-200
$bg-color

The background color to use

Colornull

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-indicator-bg

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

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

Requires

TODO's

    • Add @example
    • Add @link to documentation

box-shadow

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

Description

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

Parameters

NameDescriptionTypeDefault value
$shadow—Arglist—

Used by

clay-close

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

align-items: {String | Null},
bg: {Color | String | Null},
border-color: {Color | String | List | Null},
border-radius: {Number | String | List | Null},
color: {Color | String | Null},
display: {String | Null},
font-family: {String | List | Null},
font-size: {Number | String | Null},
font-weight: {Number | String | Null},
height: {Number | String | Null},
justify-content: {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},
opacity: {Number | String | Null},
padding-bottom: {Number | String | Null},
padding-left: {Number | String | Null},
padding-right: {Number | String | Null},
padding-top: {Number | String | Null},
position: {String | Null},
bottom: {Number | String | Null},
left: {Number | String | Null},
right: {Number | String | Null},
top: {Number | String | Null},
text-align: {String | Null},
text-decoration: {String | Null},
text-transform: {String | List | Null},
transition: {String | List | Null},
vertical-align: {String | Null},
width: {Number | String | Null},
hover-bg: {Color | String | Null},
hover-color: {Color | String | Null},
hover-opacity: {Number | String | Null},
hover-text-decoration: {String | Null},
focus-bg: {Color | String | Null},
focus-box-shadow: {String | List | Null},
focus-color: {Color | String | Null},
focus-opacity: {Number | String | Null},
focus-outline: {Number | String | Null},
focus-text-decoration: {String | Null},
active-bg: {Color | String | Null},
active-border-color: {Color | String | List | Null},
active-color: {Color | String | Null},
disabled-bg: {Color | String | Null},
disabled-border-color: {Color | String | List | Null},
disabled-box-shadow: {String | List | Null},
disabled-color: {Color | String | Null},
disabled-cursor: {String | Null},
disabled-opacity: {Number | String | Null},
disabled-pointer-events: {String | Null},
disabled-text-decoration: {String | Null},
btn-focus-box-shadow: {String | List | Null},
btn-focus-outline: {Number | String | Null},
lexicon-icon-margin-bottom: {Number | String | Null},
lexicon-icon-margin-left: {Number | String | Null},
lexicon-icon-margin-right: {Number | String | Null},
lexicon-icon-margin-top: {Number | String | Null},

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-after-highlight-variant

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

Description

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

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
bg: {Color | String | Null},
border-radius: {Number | String | List | Null},
bottom: {Number | String | Null},
content: {String | Null},
display: {String | Null},
height: {Number | String | Null},
left: {Number | String | Null},
opacity: {Number | String | Null},
position: {String | Null},
right: {Number | String | Null},
transition: {String | List | Null},
top: {Number | String | Null},
hover-bg: {Color | String | Null},
hover-height: {Number | String | Null},
hover-opacity: {Number | String | Null},
focus-bg: {Color | String | Null},
focus-height: {Number | String | Null},
focus-opacity: {Number | String | Null},
active-bg: {Color | String | Null},
active-height: {Number | String | Null},
active-opacity: {Number | String | Null},

Requires

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-monospace

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

Description

A mixin for creating monospaced elements.

Parameters

NameDescriptionTypeDefault value
$size

The width and height of the element

Number—

Used by

TODO's

    • Add @example
    • Add @link to documentation

clay-scale-component

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

Description

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

Parameters

NameDescriptionTypeDefault value
$scale

Enables or disables this mixin

Bool$enable-scaling-components

clay-autofit-row

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

Description

A mixin to create custom spacing for the autofit-row component.

Parameters

NameDescriptionTypeDefault value
$map

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

Map—

Map Keys and Value Types

enabled: {Bool},  // Set to false to prevent mixin styles from being output. Default: true
margin: {Number | String | List | Null},
margin-bottom: {Number | String | Null},
margin-left: {Number | String | Null},
margin-right: {Number | String | Null},
margin-top: {Number | String | Null},
autofit-col-padding: {Number | String | List | Null},
autofit-col-padding-bottom: {Number | String | Null},
autofit-col-padding-left: {Number | String | Null},
autofit-col-padding-right: {Number | String | Null},
autofit-col-padding-top: {Number | String | Null},

Requires

Vendor Prefixes

mixins

overflow-wrap

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

Description

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

Parameters

NameDescriptionTypeDefault value
$value

break-word or normal

Stringbreak-word

user-select

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

Description

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

Parameters

NameDescriptionTypeDefault value
$value

all, auto, none, or text

Stringnone

hyphens

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

Description

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

Parameters

NameDescriptionTypeDefault value
$value

auto, manual, or none

Stringnone

placeholder

@mixin placeholder() { ... }

Description

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

Parameters

None.