veritatisquam

# Sass API | Mark | Description | | ---- | ---------------------------------------------------------- | | ✅ | Public functions, mixins, placeholders, and variables | | ❌ | Private items - not supported outside package's build | | ⚠️ | Deprecated items - may not be available in future releases |  - [@carbon/layout](#carbonlayout) - [✅carbon--grid-gutter [variable]](#carbon--grid-gutter-variable) - [✅carbon--grid-gutter--condensed [variable]](#carbon--grid-gutter--condensed-variable) - [✅carbon--grid-breakpoints [variable]](#carbon--grid-breakpoints-variable) - [✅carbon--breakpoint-next [function]](#carbon--breakpoint-next-function) - [✅carbon--breakpoint-prev [function]](#carbon--breakpoint-prev-function) - [✅carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function) - [✅carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function) - [✅carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function) - [✅carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin) - [✅carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin) - [✅carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin) - [✅carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin) - [✅carbon--breakpoint [mixin]](#carbon--breakpoint-mixin) - [✅carbon--container-01 [variable]](#carbon--container-01-variable) - [✅carbon--container-02 [variable]](#carbon--container-02-variable) - [✅carbon--container-03 [variable]](#carbon--container-03-variable) - [✅carbon--container-04 [variable]](#carbon--container-04-variable) - [✅carbon--container-05 [variable]](#carbon--container-05-variable) - [✅carbon--container [variable]](#carbon--container-variable) - [✅container-01 [variable]](#container-01-variable) - [✅container-02 [variable]](#container-02-variable) - [✅container-03 [variable]](#container-03-variable) - [✅container-04 [variable]](#container-04-variable) - [✅container-05 [variable]](#container-05-variable) - [✅carbon--base-font-size [variable]](#carbon--base-font-size-variable) - [✅carbon--rem [function]](#carbon--rem-function) - [✅carbon--em [function]](#carbon--em-function) - [✅carbon--fluid-spacing-01 [variable]](#carbon--fluid-spacing-01-variable) - [✅carbon--fluid-spacing-02 [variable]](#carbon--fluid-spacing-02-variable) - [✅carbon--fluid-spacing-03 [variable]](#carbon--fluid-spacing-03-variable) - [✅carbon--fluid-spacing-04 [variable]](#carbon--fluid-spacing-04-variable) - [✅carbon--fluid-spacing [variable]](#carbon--fluid-spacing-variable) - [✅fluid-spacing-01 [variable]](#fluid-spacing-01-variable) - [✅fluid-spacing-02 [variable]](#fluid-spacing-02-variable) - [✅fluid-spacing-03 [variable]](#fluid-spacing-03-variable) - [✅fluid-spacing-04 [variable]](#fluid-spacing-04-variable) - [✅carbon--icon-size-01 [variable]](#carbon--icon-size-01-variable) - [✅carbon--icon-size-02 [variable]](#carbon--icon-size-02-variable) - [✅carbon--icon-size [variable]](#carbon--icon-size-variable) - [✅icon-size-01 [variable]](#icon-size-01-variable) - [✅icon-size-02 [variable]](#icon-size-02-variable) - [✅carbon--get-column-width [function]](#carbon--get-column-width-function) - [✅carbon--key-height-scales [variable]](#carbon--key-height-scales-variable) - [✅carbon--key-height [function]](#carbon--key-height-function) - [✅carbon--layout-01 [variable]](#carbon--layout-01-variable) - [✅carbon--layout-02 [variable]](#carbon--layout-02-variable) - [✅carbon--layout-03 [variable]](#carbon--layout-03-variable) - [✅carbon--layout-04 [variable]](#carbon--layout-04-variable) - [✅carbon--layout-05 [variable]](#carbon--layout-05-variable) - [✅carbon--layout-06 [variable]](#carbon--layout-06-variable) - [✅carbon--layout-07 [variable]](#carbon--layout-07-variable) - [✅carbon--layout [variable]](#carbon--layout-variable) - [✅layout-01 [variable]](#layout-01-variable) - [✅layout-02 [variable]](#layout-02-variable) - [✅layout-03 [variable]](#layout-03-variable) - [✅layout-04 [variable]](#layout-04-variable) - [✅layout-05 [variable]](#layout-05-variable) - [✅layout-06 [variable]](#layout-06-variable) - [✅layout-07 [variable]](#layout-07-variable) - [✅carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable) - [✅carbon--mini-units [function]](#carbon--mini-units-function) - [✅carbon--spacing-01 [variable]](#carbon--spacing-01-variable) - [✅carbon--spacing-02 [variable]](#carbon--spacing-02-variable) - [✅carbon--spacing-03 [variable]](#carbon--spacing-03-variable) - [✅carbon--spacing-04 [variable]](#carbon--spacing-04-variable) - [✅carbon--spacing-05 [variable]](#carbon--spacing-05-variable) - [✅carbon--spacing-06 [variable]](#carbon--spacing-06-variable) - [✅carbon--spacing-07 [variable]](#carbon--spacing-07-variable) - [✅carbon--spacing-08 [variable]](#carbon--spacing-08-variable) - [✅carbon--spacing-09 [variable]](#carbon--spacing-09-variable) - [✅carbon--spacing-10 [variable]](#carbon--spacing-10-variable) - [✅carbon--spacing-11 [variable]](#carbon--spacing-11-variable) - [✅carbon--spacing-12 [variable]](#carbon--spacing-12-variable) - [✅carbon--spacing [variable]](#carbon--spacing-variable) - [✅spacing-01 [variable]](#spacing-01-variable) - [✅spacing-02 [variable]](#spacing-02-variable) - [✅spacing-03 [variable]](#spacing-03-variable) - [✅spacing-04 [variable]](#spacing-04-variable) - [✅spacing-05 [variable]](#spacing-05-variable) - [✅spacing-06 [variable]](#spacing-06-variable) - [✅spacing-07 [variable]](#spacing-07-variable) - [✅spacing-08 [variable]](#spacing-08-variable) - [✅spacing-09 [variable]](#spacing-09-variable) - [✅spacing-10 [variable]](#spacing-10-variable) - [✅spacing-11 [variable]](#spacing-11-variable) - [✅spacing-12 [variable]](#spacing-12-variable) - [✅map-deep-get [function]](#map-deep-get-function) - [✅carbon--key-by-index [function]](#carbon--key-by-index-function) - [✅last-map-item [function]](#last-map-item-function)  ## @carbon/layout ### ✅carbon--grid-gutter [variable] Carbon gutter size in rem <details> <summary>Source code</summary> ```scss $carbon--grid-gutter: carbon--rem(32px); ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` ### ✅carbon--grid-gutter--condensed [variable] Carbon condensed gutter size in rem <details> <summary>Source code</summary> ```scss $carbon--grid-gutter--condensed: carbon--rem(2px); ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` ### ✅carbon--grid-breakpoints [variable] <details> <summary>Source code</summary> ```scss $carbon--grid-breakpoints: ( sm: ( columns: 4, margin: 0, width: carbon--rem(320px), ), md: ( columns: 8, margin: carbon--rem(16px), width: carbon--rem(672px), ), lg: ( columns: 16, margin: carbon--rem(16px), width: carbon--rem(1056px), ), xlg: ( columns: 16, margin: carbon--rem(16px), width: carbon--rem(1312px), ), max: ( columns: 16, margin: carbon--rem(24px), width: carbon--rem(1584px), ), ); ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Map` ### ✅carbon--breakpoint-next [function] Get the value of the next breakpoint, or null for the last breakpoint <details> <summary>Source code</summary> ```scss @function carbon--breakpoint-next( $name, $breakpoints: $carbon--grid-breakpoints, $breakpoint-names: map-keys($breakpoints) ) { $n: index($breakpoint-names, $name); @if $n != null and $n < length($breakpoint-names) { @return nth($breakpoint-names, $n + 1); } @return null; } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | --------------------------- | | `$name` | The name of the brekapoint | `String` | — | | `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map` | `$carbon--grid-breakpoints` | | `$breakpoint-names` | A list of names from the `$breakpoints` map | `List` | `map-keys($breakpoints)` | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `String` ### ✅carbon--breakpoint-prev [function] Get the value of the previous breakpoint, or null for the first breakpoint <details> <summary>Source code</summary> ```scss @function carbon--breakpoint-prev( $name, $breakpoints: $carbon--grid-breakpoints, $breakpoint-names: map-keys($breakpoints) ) { $n: index($breakpoint-names, $name); @if $n != null and $n > 1 { @return nth($breakpoint-names, $n - 1); } @return null; } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | --------------------------- | | `$name` | The name of the brekapoint | `String` | — | | `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map` | `$carbon--grid-breakpoints` | | `$breakpoint-names` | A list of names from the `$breakpoints` map | `List` | `map-keys($breakpoints)` | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `String` ### ✅carbon--is-smallest-breakpoint [function] Check to see if the given breakpoint name <details> <summary>Source code</summary> ```scss @function carbon--is-smallest-breakpoint( $name, $breakpoints: $carbon--grid-breakpoints ) { @return index(map-keys($breakpoints), $name) == 1; } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | -------------- | --------------------------------------------------------------------------------------------------------------- | -------- | --------------------------- | | `$name` | The name of the brekapoint | `String` | — | | `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map` | `$carbon--grid-breakpoints` | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `Bool` - **Used by**: - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin) ### ✅carbon--largest-breakpoint-name [function] Returns the largest breakpoint name <details> <summary>Source code</summary> ```scss @function carbon--largest-breakpoint-name( $breakpoints: $carbon--grid-breakpoints ) { $total-breakpoints: length($breakpoints); @return carbon--key-by-index($breakpoints, $total-breakpoints); } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | -------------- | ---------------------------------------------- | ----- | --------------------------- | | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `String` - **Requires**: - [carbon--key-by-index [function]](#carbon--key-by-index-function) - **Used by**: - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin) ### ✅carbon--breakpoint-infix [function] Get the infix for a given breakpoint in a list of breakpoints. Usesful for generate the size part in a selector, for example: `.prefix--col-sm-2`. <details> <summary>Source code</summary> ```scss @function carbon--breakpoint-infix($name) { @return '-#{$name}'; } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | ------- | -------------------------- | -------- | ------------- | | `$name` | The name of the breakpoint | `String` | — | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `String` ### ✅carbon--breakpoint-up [mixin] Generate a media query up to the width of the given breakpoint name <details> <summary>Source code</summary> ```scss @mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) { @if type-of($name) == 'number' { @media (min-width: $name) { @content; } } @else if map-has-key($breakpoints, $name) { $breakpoint: map-get($breakpoints, $name); $width: map-get($breakpoint, width); @if carbon--is-smallest-breakpoint($name, $breakpoints) { @content; } @else { @media (min-width: $width) { @content; } } } @else { @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; } } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | -------------- | ---------------------------------------------- | ------------------ | --------------------------- | | `$name` | — | `String \| Number` | — | | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` | - **Group**: [@carbon/layout](#carbonlayout) - **Requires**: - [carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function) - **Used by**: - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin) - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin) ### ✅carbon--breakpoint-down [mixin] Generate a media query for the maximum width of the given styles <details> <summary>Source code</summary> ```scss @mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) { @if type-of($name) == 'number' { @media (max-width: $name) { @content; } } @else if map-has-key($breakpoints, $name) { $breakpoint: map-get($breakpoints, $name); $width: map-get($breakpoint, width); @media (max-width: $width) { @content; } } @else { @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; } } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | -------------- | ---------------------------------------------- | ------------------ | --------------------------- | | `$name` | — | `String \| Number` | — | | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` | - **Group**: [@carbon/layout](#carbonlayout) - **Used by**: - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin) ### ✅carbon--breakpoint-between [mixin] Generate a media query for the range between the lower and upper breakpoints <details> <summary>Source code</summary> ```scss @mixin carbon--breakpoint-between( $lower, $upper, $breakpoints: $carbon--grid-breakpoints ) { $is-number-lower: type-of($lower) == 'number'; $is-number-upper: type-of($upper) == 'number'; $min: if($is-number-lower, $lower, map-get($breakpoints, $lower)); $max: if($is-number-upper, $upper, map-get($breakpoints, $upper)); @if $min and $max { $min-width: if(not $is-number-lower and $min, map-get($min, width), $min); $max-width: if(not $is-number-upper and $max, map-get($max, width), $max); @media (min-width: $min-width) and (max-width: $max-width) { @content; } } @else if $min != null and $max == null { @include carbon--breakpoint-up($lower) { @content; } } @else if $min == null and $max != null { @include carbon--breakpoint-down($upper) { @content; } } @else { @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).'; } } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | -------------- | ---------------------------------------------- | ------------------ | --------------------------- | | `$lower` | — | `String \| Number` | — | | `$upper` | — | `String \| Number` | — | | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` | - **Group**: [@carbon/layout](#carbonlayout) - **Requires**: - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin) - [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin) ### ✅carbon--largest-breakpoint [mixin] Generate media query for the largest breakpoint <details> <summary>Source code</summary> ```scss @mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { @include carbon--breakpoint(carbon--largest-breakpoint-name()) { @content; } } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | -------------- | ---------------------------------------------- | ----- | --------------------------- | | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` | - **Group**: [@carbon/layout](#carbonlayout) - **Requires**: - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin) - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function) ### ✅carbon--breakpoint [mixin] Generate a media query for a given breakpoint <details> <summary>Source code</summary> ```scss @mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) { @include carbon--breakpoint-up($name, $breakpoints) { @content; } } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | -------------- | ---------------------------------------------- | ------------------ | --------------------------- | | `$name` | — | `String \| Number` | — | | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` | - **Group**: [@carbon/layout](#carbonlayout) - **Requires**: - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin) - **Used by**: - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin) ### ✅carbon--container-01 [variable] <details> <summary>Source code</summary> ```scss $carbon--container-01: 1.5rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `container-01` ### ✅carbon--container-02 [variable] <details> <summary>Source code</summary> ```scss $carbon--container-02: 2rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `container-02` ### ✅carbon--container-03 [variable] <details> <summary>Source code</summary> ```scss $carbon--container-03: 2.5rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `container-03` ### ✅carbon--container-04 [variable] <details> <summary>Source code</summary> ```scss $carbon--container-04: 3rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `container-04` ### ✅carbon--container-05 [variable] <details> <summary>Source code</summary> ```scss $carbon--container-05: 4rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `container-05` ### ✅carbon--container [variable] <details> <summary>Source code</summary> ```scss $carbon--container: ( $carbon--container-01, $carbon--container-02, $carbon--container-03, $carbon--container-04, $carbon--container-05 ); ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `List` ### ✅container-01 [variable] <details> <summary>Source code</summary> ```scss $container-01: $carbon--container-01; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--container-01` ### ✅container-02 [variable] <details> <summary>Source code</summary> ```scss $container-02: $carbon--container-02; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--container-02` ### ✅container-03 [variable] <details> <summary>Source code</summary> ```scss $container-03: $carbon--container-03; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--container-03` ### ✅container-04 [variable] <details> <summary>Source code</summary> ```scss $container-04: $carbon--container-04; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--container-04` ### ✅container-05 [variable] <details> <summary>Source code</summary> ```scss $container-05: $carbon--container-05; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--container-05` ### ✅carbon--base-font-size [variable] Default font size <details> <summary>Source code</summary> ```scss $carbon--base-font-size: 16px; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Used by**: - [carbon--rem [function]](#carbon--rem-function) - [carbon--em [function]](#carbon--em-function) ### ✅carbon--rem [function] Convert a given px unit to a rem unit <details> <summary>Source code</summary> ```scss @function carbon--rem($px) { @if unit($px) != 'px' { // TODO: update to @error in v11 @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; } @return ($px / $carbon--base-font-size) * 1rem; } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | ----- | ------------------- | -------- | ------------- | | `$px` | Number with px unit | `Number` | — | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `Number` Number with rem unit - **Requires**: - [carbon--base-font-size [variable]](#carbon--base-font-size-variable) - **Used by**: - [carbon--mini-units [function]](#carbon--mini-units-function) ### ✅carbon--em [function] Convert a given px unit to a em unit <details> <summary>Source code</summary> ```scss @function carbon--em($px) { @if unit($px) != 'px' { // TODO: update to @error in v11 @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; } @return ($px / $carbon--base-font-size) * 1em; } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | ----- | ------------------- | -------- | ------------- | | `$px` | Number with px unit | `Number` | — | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `Number` Number with em unit - **Requires**: - [carbon--base-font-size [variable]](#carbon--base-font-size-variable) ### ✅carbon--fluid-spacing-01 [variable] <details> <summary>Source code</summary> ```scss $carbon--fluid-spacing-01: 0; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `fluid-spacing-01` ### ✅carbon--fluid-spacing-02 [variable] <details> <summary>Source code</summary> ```scss $carbon--fluid-spacing-02: 2vw; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `fluid-spacing-02` ### ✅carbon--fluid-spacing-03 [variable] <details> <summary>Source code</summary> ```scss $carbon--fluid-spacing-03: 5vw; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `fluid-spacing-03` ### ✅carbon--fluid-spacing-04 [variable] <details> <summary>Source code</summary> ```scss $carbon--fluid-spacing-04: 10vw; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `fluid-spacing-04` ### ✅carbon--fluid-spacing [variable] <details> <summary>Source code</summary> ```scss $carbon--fluid-spacing: ( $carbon--fluid-spacing-01, $carbon--fluid-spacing-02, $carbon--fluid-spacing-03, $carbon--fluid-spacing-04 ); ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `List` ### ✅fluid-spacing-01 [variable] <details> <summary>Source code</summary> ```scss $fluid-spacing-01: $carbon--fluid-spacing-01; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--fluid-spacing-01` ### ✅fluid-spacing-02 [variable] <details> <summary>Source code</summary> ```scss $fluid-spacing-02: $carbon--fluid-spacing-02; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--fluid-spacing-02` ### ✅fluid-spacing-03 [variable] <details> <summary>Source code</summary> ```scss $fluid-spacing-03: $carbon--fluid-spacing-03; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--fluid-spacing-03` ### ✅fluid-spacing-04 [variable] <details> <summary>Source code</summary> ```scss $fluid-spacing-04: $carbon--fluid-spacing-04; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--fluid-spacing-04` ### ✅carbon--icon-size-01 [variable] <details> <summary>Source code</summary> ```scss $carbon--icon-size-01: 1rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `icon-size-01` ### ✅carbon--icon-size-02 [variable] <details> <summary>Source code</summary> ```scss $carbon--icon-size-02: 1.25rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `icon-size-02` ### ✅carbon--icon-size [variable] <details> <summary>Source code</summary> ```scss $carbon--icon-size: ($carbon--icon-size-01, $carbon--icon-size-02); ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `List` ### ✅icon-size-01 [variable] <details> <summary>Source code</summary> ```scss $icon-size-01: $carbon--icon-size-01; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--icon-size-01` ### ✅icon-size-02 [variable] <details> <summary>Source code</summary> ```scss $icon-size-02: $carbon--icon-size-02; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--icon-size-02` ### ✅carbon--get-column-width [function] Get the column width for a given breakpoint <details> <summary>Source code</summary> ```scss @function carbon--get-column-width( $breakpoint, $breakpoints: $carbon--grid-breakpoints ) { @if map-has-key($breakpoints, $breakpoint) { $values: map-get($breakpoints, $breakpoint); $width: map-get($values, width); $margin: map-get($values, margin); $columns: map-get($values, columns); @return ($width - (2 * $margin)) / $columns; } @else { @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; } } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | -------------- | ----------- | -------- | --------------------------- | | `$breakpoint` | — | `String` | — | | `$breakpoints` | — | `Map` | `$carbon--grid-breakpoints` | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `Number` In rem ### ✅carbon--key-height-scales [variable] <details> <summary>Source code</summary> ```scss $carbon--key-height-scales: ( sm: ( carbon--get-column-width(sm), carbon--get-column-width(sm) * 2, carbon--get-column-width(sm) * 3, carbon--get-column-width(sm) * 4, carbon--get-column-width(sm) * 5, carbon--get-column-width(sm) * 6, ), md: ( carbon--get-column-width(md), carbon--get-column-width(md) * 2, carbon--get-column-width(md) * 3, carbon--get-column-width(md) * 4, carbon--get-column-width(md) * 5, carbon--get-column-width(md) * 6, ), lg: ( carbon--get-column-width(lg), carbon--get-column-width(lg) * 2, carbon--get-column-width(lg) * 3, carbon--get-column-width(lg) * 4, carbon--get-column-width(lg) * 5, carbon--get-column-width(lg) * 6, carbon--get-column-width(lg) * 7, carbon--get-column-width(lg) * 8, ), xlg: ( carbon--get-column-width(xlg), carbon--get-column-width(xlg) * 2, carbon--get-column-width(xlg) * 3, carbon--get-column-width(xlg) * 4, carbon--get-column-width(xlg) * 5, carbon--get-column-width(xlg) * 6, carbon--get-column-width(xlg) * 7, carbon--get-column-width(xlg) * 8, ), max: ( carbon--get-column-width(max), carbon--get-column-width(max) * 2, carbon--get-column-width(max) * 3, carbon--get-column-width(max) * 4, carbon--get-column-width(max) * 5, carbon--get-column-width(max) * 6, carbon--get-column-width(max) * 7, carbon--get-column-width(max) * 8, ), ); ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Map` - **Used by**: - [carbon--key-height [function]](#carbon--key-height-function) ### ✅carbon--key-height [function] Get the value of a key height step at a given breakpoint <details> <summary>Source code</summary> ```scss @function carbon--key-height($breakpoint, $step) { @if map-has-key($carbon--key-height-scales, $breakpoint) { @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); } @else { @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; } } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | ------------- | ----------- | -------- | ------------- | | `$breakpoint` | — | `String` | — | | `$step` | — | `Number` | — | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `Number` In rem - **Requires**: - [carbon--key-height-scales [variable]](#carbon--key-height-scales-variable) ### ✅carbon--layout-01 [variable] <details> <summary>Source code</summary> ```scss $carbon--layout-01: 1rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `layout-01` ### ✅carbon--layout-02 [variable] <details> <summary>Source code</summary> ```scss $carbon--layout-02: 1.5rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `layout-02` ### ✅carbon--layout-03 [variable] <details> <summary>Source code</summary> ```scss $carbon--layout-03: 2rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `layout-03` ### ✅carbon--layout-04 [variable] <details> <summary>Source code</summary> ```scss $carbon--layout-04: 3rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `layout-04` ### ✅carbon--layout-05 [variable] <details> <summary>Source code</summary> ```scss $carbon--layout-05: 4rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `layout-05` ### ✅carbon--layout-06 [variable] <details> <summary>Source code</summary> ```scss $carbon--layout-06: 6rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `layout-06` ### ✅carbon--layout-07 [variable] <details> <summary>Source code</summary> ```scss $carbon--layout-07: 10rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `layout-07` ### ✅carbon--layout [variable] <details> <summary>Source code</summary> ```scss $carbon--layout: ( $carbon--layout-01, $carbon--layout-02, $carbon--layout-03, $carbon--layout-04, $carbon--layout-05, $carbon--layout-06, $carbon--layout-07 ); ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `List` ### ✅layout-01 [variable] <details> <summary>Source code</summary> ```scss $layout-01: $carbon--layout-01; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--layout-01` ### ✅layout-02 [variable] <details> <summary>Source code</summary> ```scss $layout-02: $carbon--layout-02; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--layout-02` ### ✅layout-03 [variable] <details> <summary>Source code</summary> ```scss $layout-03: $carbon--layout-03; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--layout-03` ### ✅layout-04 [variable] <details> <summary>Source code</summary> ```scss $layout-04: $carbon--layout-04; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--layout-04` ### ✅layout-05 [variable] <details> <summary>Source code</summary> ```scss $layout-05: $carbon--layout-05; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--layout-05` ### ✅layout-06 [variable] <details> <summary>Source code</summary> ```scss $layout-06: $carbon--layout-06; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--layout-06` ### ✅layout-07 [variable] <details> <summary>Source code</summary> ```scss $layout-07: $carbon--layout-07; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--layout-07` ### ✅carbon--mini-unit-size [variable] Default mini-unit value <details> <summary>Source code</summary> ```scss $carbon--mini-unit-size: 8px; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Used by**: - [carbon--mini-units [function]](#carbon--mini-units-function) ### ✅carbon--mini-units [function] Get the value of the corresponding number of units <details> <summary>Source code</summary> ```scss @function carbon--mini-units($count) { @return carbon--rem($carbon--mini-unit-size * $count); } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | -------- | ---------------------------------------- | -------- | ------------- | | `$count` | The number of units to get the value for | `Number` | — | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `Number` In rem units - **Requires**: - [carbon--rem [function]](#carbon--rem-function) - [carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable) ### ✅carbon--spacing-01 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-01: 0.125rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-01` ### ✅carbon--spacing-02 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-02: 0.25rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-02` ### ✅carbon--spacing-03 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-03: 0.5rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-03` ### ✅carbon--spacing-04 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-04: 0.75rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-04` ### ✅carbon--spacing-05 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-05: 1rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-05` ### ✅carbon--spacing-06 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-06: 1.5rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-06` ### ✅carbon--spacing-07 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-07: 2rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-07` ### ✅carbon--spacing-08 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-08: 2.5rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-08` ### ✅carbon--spacing-09 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-09: 3rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-09` ### ✅carbon--spacing-10 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-10: 4rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-10` ### ✅carbon--spacing-11 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-11: 5rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-11` ### ✅carbon--spacing-12 [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing-12: 6rem; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Aliased**: - `spacing-12` ### ✅carbon--spacing [variable] <details> <summary>Source code</summary> ```scss $carbon--spacing: ( $carbon--spacing-01, $carbon--spacing-02, $carbon--spacing-03, $carbon--spacing-04, $carbon--spacing-05, $carbon--spacing-06, $carbon--spacing-07, $carbon--spacing-08, $carbon--spacing-09, $carbon--spacing-10, $carbon--spacing-11, $carbon--spacing-12 ); ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `List` ### ✅spacing-01 [variable] <details> <summary>Source code</summary> ```scss $spacing-01: $carbon--spacing-01; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-01` ### ✅spacing-02 [variable] <details> <summary>Source code</summary> ```scss $spacing-02: $carbon--spacing-02; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-02` ### ✅spacing-03 [variable] <details> <summary>Source code</summary> ```scss $spacing-03: $carbon--spacing-03; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-03` ### ✅spacing-04 [variable] <details> <summary>Source code</summary> ```scss $spacing-04: $carbon--spacing-04; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-04` ### ✅spacing-05 [variable] <details> <summary>Source code</summary> ```scss $spacing-05: $carbon--spacing-05; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-05` ### ✅spacing-06 [variable] <details> <summary>Source code</summary> ```scss $spacing-06: $carbon--spacing-06; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-06` ### ✅spacing-07 [variable] <details> <summary>Source code</summary> ```scss $spacing-07: $carbon--spacing-07; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-07` ### ✅spacing-08 [variable] <details> <summary>Source code</summary> ```scss $spacing-08: $carbon--spacing-08; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-08` ### ✅spacing-09 [variable] <details> <summary>Source code</summary> ```scss $spacing-09: $carbon--spacing-09; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-09` ### ✅spacing-10 [variable] <details> <summary>Source code</summary> ```scss $spacing-10: $carbon--spacing-10; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-10` ### ✅spacing-11 [variable] <details> <summary>Source code</summary> ```scss $spacing-11: $carbon--spacing-11; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-11` ### ✅spacing-12 [variable] <details> <summary>Source code</summary> ```scss $spacing-12: $carbon--spacing-12; ``` </details> - **Group**: [@carbon/layout](#carbonlayout) - **Type**: `Number` - **Alias**: `carbon--spacing-12` ### ✅map-deep-get [function] Map deep get <details> <summary>Source code</summary> ```scss @function map-deep-get($map, $keys) { @each $key in $keys { $map: map-get($map, $key); } @return $map; } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | ------- | ----------- | --------- | ------------- | | `$map` | Map | `Map` | — | | `$keys` | Key chain | `Arglist` | — | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `*` Desired value ### ✅carbon--key-by-index [function] Provide a map and index, and get back the relevant key value <details> <summary>Source code</summary> ```scss @function carbon--key-by-index($map, $index) { $keys: map-keys($map); @return nth($keys, $index); } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | -------- | ----------- | --------- | ------------- | | `$map` | Map | `Map` | — | | `$index` | Key chain | `Integer` | — | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `String` Desired value - **Used by**: - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function) - [last-map-item [function]](#last-map-item-function) ### ✅last-map-item [function] Pass in a map, and get the last one in the list back <details> <summary>Source code</summary> ```scss @function last-map-item($map) { $total-length: length($map); @return map-get($map, carbon--key-by-index($map, $total-length)); } ``` </details> - **Parameters**: | Name | Description | Type | Default value | | ------ | ----------- | ----- | ------------- | | `$map` | Map | `Map` | — | - **Group**: [@carbon/layout](#carbonlayout) - **Returns**: `*` Desired value - **Requires**: - [carbon--key-by-index [function]](#carbon--key-by-index-function)