Tree Sass API

Variables

tree-disable-everything

$tree-disable-everything: false !default;

tree-disable-expander-left

$tree-disable-expander-left: false !default;

Used By

• @mixin tree-styles

tree-disable-expander-left-as-media

$tree-disable-expander-left-as-media: false !default;

Used By

• @mixin tree-styles

tree-disable-expander-left-as-media-offset

$tree-disable-expander-left-as-media-offset: false !default;

Used By

• @mixin tree-styles

tree-disable-selected-background-color

$tree-disable-selected-background-color: false !default;

Used By

• @mixin tree-styles

tree-item-padding-base

$tree-item-padding-base: list.$item-horizontal-padding !default;

Used By

• @mixin tree-variables

tree-item-padding-incrementor

$tree-item-padding-incrementor: calc(list.$item-horizontal-padding * 1.5) !default;

See Also

• $tree-item-padding

Used By

• @mixin tree-variables

tree-expander-right-from

$tree-expander-right-from: icon.$rotate-from !default;

Used By

• @mixin tree-styles

tree-expander-right-to

$tree-expander-right-to: 90deg !default;

Used By

• @mixin tree-styles

tree-expander-left-from

$tree-expander-left-from: 0deg !default;

Used By

• @mixin tree-styles

tree-expander-left-to

$tree-expander-left-to: -90deg !default;

Used By

• @mixin tree-styles

tree-selected-styles

$tree-selected-styles: (
  font-weight: typography.$font-weight-bold,
) !default;

Used By

• @mixin tree-styles

tree-variables

$tree-variables: (depth, item-padding, item-padding-base, item-padding-incrementor);

tree-item-padding

$tree-item-padding: calc(
  get-var(depth) * get-var(item-padding-incrementor) +
    get-var(item-padding-base)
) !default;

Used By

• @mixin tree-styles

Mixins

tree-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

tree-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

tree-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $tree-item-padding-base
• $tree-item-padding-incrementor

tree-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin app-bar-set-var
• @mixin app-bar-use-var
• @function app-bar-get-var
• $app-bar-disable-everything
• $tree-expander-right-from
• $tree-expander-right-to
• $tree-item-padding
• $tree-disable-expander-left
• $tree-expander-left-from
• $tree-expander-left-to
• $disable-focus-visible
• $tree-selected-styles
• $tree-disable-selected-background-color
• $tree-disable-expander-left-as-media
• $tree-disable-expander-left-as-media-offset

Functions

tree-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable all the styles

Set to true to disable displaying the TreeItem expander to the left instead of the right.

Set to true to disable displaying the TreeItem expander to the left instead of the right.

Set to true if the TreeItem will never need to set the leftAddonType to media or large-media.

Set to true to disable applying the default interaction selected background color while a TreeItem is selected.

The default horizontal padding to apply to a TreeItem

The additional amount of padding to apply to each TreeItem that is not rendered at the root.

The default TreeItemExpander rotation starting position when rendered as a rightAddon.

The default TreeItemExpander rotation ending position when rendered as a rightAddon.

The default TreeItemExpander rotation starting position when rendered as a leftAddon.

The default TreeItemExpander rotation ending position when rendered as a leftAddon.

The default styles to apply when a TreeItem has been selected.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The padding-left to apply to each TreeItem.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value