Boolean$switch-disable-everything: base.$form-disable-everything !default;Set to true to disable the Switch styles.
Boolean$switch-disable-menu-item-switch: $disable-everything !default;Set to true to disable the MenuItemSwitch styles
Boolean$switch-disable-circular-progress: progress.$disable-circular !default;Set to true to disable the CircularProgress rendered within a Switch
styles.
Boolean$switch-disable-icon: false !default;Set to true to disable the icon rendered within a Switch styles.
Number$switch-disabled-opacity: 0.5 !default;The opacity to apply to a Switch while disabled.
Number$switch-ball-size: 1.25em !default;The Switch ball size.
Number$switch-ball-border-radius: border-radius.get-var(full) !default;The Switch border radius.
Number$switch-ball-offset: 0.25em !default;The distance from the left and right of the Switch track to display the ball.
Color$switch-ball-background-color: color.adjust(colors.$white, $lightness: -5%) !default;The default Switch ball background color.
Number$switch-track-height: 1em !default;The height of the Switch clickable area.
Number$switch-track-width: 2.25em !default;The width of the Switch clickable area.
Number$switch-track-border-radius: 0.5em !default;The border radius for the Switch clickable area.
Number$switch-track-vertical-padding: 0.75em !default;The amount of vertical padding to apply to the Switch component.
Number$switch-track-horizontal-padding: 0.875em !default;The amount of horizontal padding to apply to the Switch component.
Color $switch-track-light-background-color: colors.$grey-400 !default;The background color to apply to the SwitchTrack in the light theme.
Color $switch-track-background-color: theme.get-default-color(
$track-light-background-color,
$track-dark-background-color
) !default;The default background color to apply to the SwitchTrack.
Number$switch-icon-size: 1em !default;The default size for an icon within the Switch ball.
Number$switch-circular-progress-width: 12 !default;The circular-stroke-width to use for a CircularProgress rendered within a Switch ball.
Number$switch-circular-progress-size: 1em !default;The circular-size to use for a CircularProgress rendered within a
Switch ball.
List$switch-variables: (track-background-color, ball-background-color);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin use-light-theme { … }Applies the light the variables based on feature flags
mixin@mixin use-dark-theme { … }Applies the dark the variables based on feature flags
mixin@mixin variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin styles($disable-layer: false) { … }Generates all the styles based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set this to | Boolean | false |
function@function get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |