Switch Sass API

Variables

switch-disable-everything

$switch-disable-everything: base.$form-disable-everything !default;

switch-disable-menu-item-switch

$switch-disable-menu-item-switch: $disable-everything !default;

switch-disable-circular-progress

$switch-disable-circular-progress: progress.$disable-circular !default;

switch-disable-icon

$switch-disable-icon: false !default;

switch-disabled-opacity

$switch-disabled-opacity: 0.5 !default;

Used By

• @mixin switch-styles

switch-ball-size

$switch-ball-size: 1.25em !default;

Used By

• @mixin menu-menu-item-input-toggle-styles
• @mixin switch-styles

switch-ball-border-radius

$switch-ball-border-radius: border-radius.get-var(full) !default;

Used By

• @mixin switch-styles

switch-ball-offset

$switch-ball-offset: 0.25em !default;

Used By

• @mixin menu-menu-item-input-toggle-styles
• @mixin switch-styles

switch-ball-background-color

$switch-ball-background-color: color.adjust(colors.$white, $lightness: -5%) !default;

Used By

• @mixin switch-variables

switch-track-height

$switch-track-height: 1em !default;

Used By

• @mixin switch-styles

switch-track-width

$switch-track-width: 2.25em !default;

Used By

• @mixin menu-menu-item-input-toggle-styles
• @mixin switch-styles

switch-track-border-radius

$switch-track-border-radius: 0.5em !default;

Used By

• @mixin switch-styles

switch-track-vertical-padding

$switch-track-vertical-padding: 0.75em !default;

Used By

• @mixin switch-styles

switch-track-horizontal-padding

$switch-track-horizontal-padding: 0.875em !default;

Used By

• @mixin switch-styles

switch-track-light-background-color

$switch-track-light-background-color: colors.$grey-400 !default;

Used By

• @mixin switch-use-light-theme

switch-track-dark-background-color

$switch-track-dark-background-color: if(
  theme.$disable-dark-elevation,
  $track-light-background-color,
  map.get(theme.$dark-elevation-colors, 24)
) !default;

Used By

• @mixin switch-use-dark-theme

switch-track-background-color

$switch-track-background-color: theme.get-default-color(
  $track-light-background-color,
  $track-dark-background-color
) !default;

Used By

• @mixin switch-variables

switch-icon-size

$switch-icon-size: 1em !default;

switch-circular-progress-width

$switch-circular-progress-width: 12 !default;

Used By

• @mixin switch-styles

switch-circular-progress-size

$switch-circular-progress-size: 1em !default;

switch-variables

$switch-variables: (track-background-color, ball-background-color);

Mixins

switch-set-var

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

Requires

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

switch-use-var

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

Requires

• @function app-bar-get-var

switch-use-light-theme

@mixin use-light-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $switch-track-light-background-color

switch-use-dark-theme

@mixin use-dark-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $switch-track-dark-background-color

switch-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $switch-track-background-color
• $switch-ball-background-color

switch-styles

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

Requires

• @mixin app-bar-set-var
• @mixin app-bar-use-var
• @mixin box-shadow
• @function form-get-var
• @function theme-color-var-fallback
• $app-bar-disable-everything
• $switch-track-vertical-padding
• $switch-track-horizontal-padding
• $disable-focus-visible
• $autocomplete-disable-circular-progress
• $switch-circular-progress-width
• $autocomplete-circular-progress-size
• $avatar-disable-icon
• $button-icon-size
• $switch-track-border-radius
• $switch-track-height
• $linear-duration
• $linear-timing-function
• $switch-track-width
• $switch-disabled-opacity
• $switch-ball-border-radius
• $switch-ball-size
• $switch-ball-offset
• $menu-disable-menu-item-switch
• $badge-offset
• $form-active-color

Functions

switch-get-var

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

Returns — String

Requires

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

Set to true to disable the Switch styles.

Set to true to disable the MenuItemSwitch styles

Set to true to disable the CircularProgress rendered within a Switch styles.

Set to true to disable the icon rendered within a Switch styles.

The opacity to apply to a Switch while disabled.

The Switch ball size.

The Switch border radius.

The distance from the left and right of the Switch track to display the ball.

The default Switch ball background color.

The height of the Switch clickable area.

The width of the Switch clickable area.

The border radius for the Switch clickable area.

The amount of vertical padding to apply to the Switch component.

The amount of horizontal padding to apply to the Switch component.

The background color to apply to the SwitchTrack in the light theme.

The background color to apply to the SwitchTrack in the dark theme.

The default background color to apply to the SwitchTrack.

The default size for an icon within the Switch ball.

The circular-stroke-width to use for a CircularProgress rendered within a Switch ball.

The circular-size to use for a CircularProgress rendered within a Switch ball.

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

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