Boolean
$switch-disable-everything: base.$form-disable-everything !default;
Boolean
$switch-disable-menu-item-switch: $disable-everything !default;
Boolean
$switch-disable-circular-progress: progress.$disable-circular !default;
Boolean
$switch-disable-icon: false !default;
Number
$switch-disabled-opacity: 0.5 !default;
Number
$switch-ball-size: 1.25em !default;
Number
$switch-ball-border-radius: border-radius.get-var(full) !default;
Number
$switch-ball-offset: 0.25em !default;
Color
$switch-ball-background-color: color.adjust(colors.$white, $lightness: -5%) !default;
Number
$switch-track-height: 1em !default;
Number
$switch-track-width: 2.25em !default;
Number
$switch-track-border-radius: 0.5em !default;
Number
$switch-track-vertical-padding: 0.75em !default;
Number
$switch-track-horizontal-padding: 0.875em !default;
Color
$switch-track-light-background-color: colors.$grey-400 !default;
Color
$switch-track-dark-background-color: if(
theme.$disable-dark-elevation,
$track-light-background-color,
map.get(theme.$dark-elevation-colors, 24)
) !default;
Color
$switch-track-background-color: theme.get-default-color(
$track-light-background-color,
$track-dark-background-color
) !default;
Number
$switch-icon-size: 1em !default;
Number
$switch-circular-progress-width: 12 !default;
Number
$switch-circular-progress-size: 1em !default;
List
$switch-variables: (track-background-color, ball-background-color);
mixin
@mixin set-var($name, $value) { … }
mixin
@mixin use-var($property, $name: $property, $fallback: null) { … }
mixin
@mixin use-light-theme { … }
mixin
@mixin use-dark-theme { … }
mixin
@mixin variables { … }
mixin
@mixin styles($disable-layer: false) { … }
function
@function get-var($name, $fallback: null) { … }
String
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