Divider Sass API

Variables

divider-disable-everything

$divider-disable-everything: false !default;

Set to true to disable all the styles

divider-disable-vertical

$divider-disable-vertical: false !default;

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

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;

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

Used By

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

divider-size

$divider-size: 0.0625em !default;

The default height while horizontal or width while vertical.

divider-border-size

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

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

Used By

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

divider-max-size

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

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

Used By

• @mixin divider-variables

divider-inset

$divider-inset: 4rem !default;

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

Used By

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

divider-spacing

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

The default margin to apply to the horizontal Divider.

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;

The default margin to apply to the vertical Divider.

Used By

• @mixin divider-variables

divider-light-theme-color

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

The Divider color in light themes.

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;

The Divider color in dark themes.

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;

The default Divider color

divider-variables

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

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

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 { … }

Applies the light the variables based on feature flags

Requires

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

divider-use-dark-theme

@mixin use-dark-theme { … }

Applies the dark the variables based on feature flags

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 { … }

Conditionally applies the css variables based on feature flags

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) { … }

Generates all the styles based on feature flags.

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

a var() statement

Requires

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