Divider Sass API

Variables

divider-disable-everything

$divider-disable-everything: false !default;

divider-disable-vertical

$divider-disable-vertical: false !default;

Used By

• @mixin divider-variables
• @mixin divider-styles
• @mixin draggable-styles
• @mixin slider-variables
• @mixin slider-styles
• @mixin window-splitter-styles

divider-disable-inset

$divider-disable-inset: false !default;

Used By

• @mixin divider-variables
• @mixin divider-styles

divider-size

$divider-size: 0.0625em !default;

divider-border-size

$divider-border-size: $size * 2 !default;

Used By

• @mixin divider-variables
• @mixin table-variables

divider-max-size

$divider-max-size: 100% !default;

Used By

• @mixin divider-variables

divider-inset

$divider-inset: 4rem !default;

Used By

• @mixin pseudo-element
• @mixin divider-variables
• @mixin interaction-surface
• @mixin layout-styles

divider-spacing

$divider-spacing: spacing.get-var(xs) auto !default;

Used By

• @mixin divider-variables
• @mixin expansion-panel-styles
• @mixin icon-variables
• @mixin menu-variables
• @mixin slider-styles

divider-vertical-spacing

$divider-vertical-spacing: auto spacing.get-var(xs) !default;

Used By

• @mixin divider-variables

divider-light-theme-color

$divider-light-theme-color: rgba(colors.$black, 0.12) !default;

Used By

• @mixin divider-use-light-theme
• @mixin icon-use-light-theme
• @mixin link-use-light-theme

divider-dark-theme-color

$divider-dark-theme-color: rgba(colors.$white, 0.12) !default;

Used By

• @mixin divider-use-dark-theme
• @mixin icon-use-dark-theme
• @mixin link-use-dark-theme

divider-color

$divider-color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;

divider-variables

$divider-variables: (
  size,
  border-size,
  color,
  spacing,
  vertical-spacing,
  inset,
  max-size
);

Mixins

divider-set-var

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

Requires

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

divider-use-var

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

Requires

• @function app-bar-get-var

divider-use-light-theme

@mixin use-light-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $divider-light-theme-color

divider-use-dark-theme

@mixin use-dark-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $divider-dark-theme-color

divider-border-style

@mixin border-style($position: null) { … }

Used By

• @mixin divider-styles

Requires

• @function app-bar-get-var

divider-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $avatar-size
• $divider-border-size
• $avatar-color
• $divider-spacing
• $divider-max-size
• $divider-disable-inset
• $divider-inset
• $divider-disable-vertical
• $divider-vertical-spacing

divider-styles

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

Requires

• @mixin app-bar-use-var
• @mixin divider-border-style
• @function app-bar-get-var
• $app-bar-disable-everything
• $divider-disable-inset
• $divider-disable-vertical

Functions

divider-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 if the vertical prop will never be enabled on the Divider component.

Set to true if the inset prop will never be enabled on the Divider component.

The default height while horizontal or width while vertical.

The default border-width when using the divider-border-style mixin.

The max-width while horizontal or max-height while vertical.

The default margin-left to apply when the inset prop is enabled.

The default margin to apply to the horizontal Divider.

The default margin to apply to the vertical Divider.

The Divider color in light themes.

The Divider color in dark themes.

The default Divider color

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

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

Applies the light the variables based on feature flags

Applies the dark the variables based on feature flags

This should be one of left, right, top, bottom

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