Boolean$navigation-disable-everything: false !default;Set to true to disable all the styles.
Number$navigation-border-radius: calc(border-radius.get-var(lg) * 3) !default;The default border-radius.
Number$navigation-horizontal-padding: spacing.get-var(xs) !default;The default horizontal padding.
Number$navigation-padding-incrementor: calc(spacing.get-var(sm) * 1.5) !default;This is used to continually add more padding to the start of the
NavigationItem the deeper within the nested lists it appears.
List$navigation-variables: (border-radius, horizontal-padding, padding-incrementor);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
String$navigation-increasing-padding: calc(
tree.get-var(depth) * get-var(padding-incrementor) +
get-var(horizontal-padding)
);This is the calc string for adding more padding the deeper within the
Navigation tree a link appears.
mixin@mixin set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin styles($disable-layer: false) { … }Generates all the styles based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set this to | Boolean | false |
function@function get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |