Window Splitter Sass API

Variables

window-splitter-disable-everything

$window-splitter-disable-everything: false !default;

Set to true to disable generating any styles

window-splitter-disable-horizontal

$window-splitter-disable-horizontal: false !default;

Set to true to disable the horizontal WindowSplitter styles.

window-splitter-disable-vertical

$window-splitter-disable-vertical: false !default;

Set to true to disable the vertical WindowSplitter styles.

window-splitter-disable-reversed

$window-splitter-disable-reversed: false !default;

Set to true to disable the reversed WindowSplitter styles.

window-splitter-disable-absolute-position

$window-splitter-disable-absolute-position: false !default;

Set to true to disable the position: absolute styles

Used By

• @mixin window-splitter-styles

window-splitter-disable-inactive-background-color

$window-splitter-disable-inactive-background-color: false !default;

Set to true to disable the inactive background-color styles.

Used By

• @mixin window-splitter-styles

window-splitter-size

$window-splitter-size: 1rem !default;

The default WindowSplitter draggable area.

window-splitter-background-size

$window-splitter-background-size: 0.25rem !default;

The default WindowSplitter visible size (background-color).

window-splitter-background-color

$window-splitter-background-color: interaction.get-var(focus-color) !default;

The default background-color for the WindowSplitter while being interacted with by the user.

window-splitter-inactive-background-color

$window-splitter-inactive-background-color: divider.get-var(color) !default;

An optional background-color to use while the

Used By

• @mixin window-splitter-styles

window-splitter-z-index

$window-splitter-z-index: 30 !default;

The default z-index for the WindowSplitter.

window-splitter-variables

$window-splitter-variables: (
  size,
  background-size,
  x,
  y,
  z,
  position,
  background-color,
  inactive-background-color,
  opacity
);

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

Mixins

window-splitter-set-var

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

Requires

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

window-splitter-use-var

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

Requires

• @function app-bar-get-var

window-splitter-styles

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

Generates all the styles based on feature flags.

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @function app-bar-get-var
• @function negate-var
• $app-bar-disable-everything
• $window-splitter-disable-inactive-background-color
• $dialog-z-index
• $avatar-background-color
• $linear-duration
• $window-splitter-inactive-background-color
• $draggable-disable-horizontal
• $box-disable-reversed
• $divider-disable-vertical
• $window-splitter-disable-absolute-position

Functions

window-splitter-get-var

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

Returns — String

a var() statement

Requires

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