The color to use when a form contains an error.
$rmd-form-error-color: $rmd-theme-error !default;This is the color that is used when a text field/textarea is errored and the user hovers over it.
$rmd-form-error-hover-color: rmd-theme-get-swatch(
$rmd-form-error-color,
700,
true,
color.adjust($rmd-form-error-color, $lightness: -10%),
rmd-form-error-color
) !default;The color to use when a form element (text, checkbox, radio, etc) is currently active by the user(normally focus).
$rmd-form-active-color: rmd-theme-var(secondary) !default;The color to use when a form element is disabled.
$rmd-form-disabled-color: rmd-theme-var(text-disabled-on-background) !default;The default color to use for placeholder text within text fields.
$rmd-form-placeholder-color: rmd-theme-var(
text-secondary-on-background
) !default;A Map of all the "themeable" parts of the form package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.
$rmd-form-theme-values: (
error-color: $rmd-form-error-color,
error-hover-color: $rmd-form-error-hover-color,
active-color: $rmd-form-active-color,
disabled-color: $rmd-form-disabled-color,
toggle-inset: $rmd-toggle-inset,
toggle-dense-inset: $rmd-toggle-dense-inset,
indeterminate-height: $rmd-checkbox-indeterminate-height,
indeterminate-dense-height: $rmd-checkbox-indeterminate-dense-height,
track-background-color: $rmd-switch-track-background-color,
floating-top: $rmd-label-floating-top,
floating-dense-top: $rmd-label-floating-dense-top,
addon-top: auto,
addon-margin-top: 0px,
label-left-offset: 0px,
label-top-offset: 0px,
label-active-padding: 0px,
label-active-background-color: transparent,
listbox-background-color: $rmd-listbox-background-color,
text-padding-left: 0px,
text-padding-right: 0px,
text-padding-top: 0px,
text-offset: 0px,
text-active-color: $rmd-text-field-active-color,
text-border-color: $rmd-text-field-border-color,
text-border-hover-color: $rmd-text-field-border-hover-color,
text-filled-color: $rmd-text-field-filled-background-color,
text-height: $rmd-text-field-height,
text-label-height: $rmd-text-field-label-height,
text-label-dense-height: $rmd-text-field-label-dense-height,
text-placeholder-height: $rmd-text-field-height,
text-placeholder-dense-height: $rmd-text-field-dense-height,
textarea-padding: $rmd-textarea-vertical-padding,
) !default;The font size to use for a <label> by default.
$rmd-label-font-size: 1em !default;The font size to use for a floating label that is currently fixed above a text field/textarea.
$rmd-label-floating-font-size: 0.75em !default;The amount of horizontal padding to use for a floating label use with an outlined text field/textarea.
$rmd-label-floating-padding: 0.25rem !default;The top position for a floating label.
$rmd-label-floating-top: 1rem !default;The top position for a dense floating label.
$rmd-label-floating-dense-top: 0.9rem !default;The amount of horizontal padding to use for a floating label with an outlined text field/textarea.
$rmd-label-padding: 0.25rem !default;The additional amount of padding to apply to the top of the select field container in addition to normal text field padding. This is used so the floating label does not cover the scrollable content.
$rmd-select-native-multiple-padding: 0.75rem !default;The default position for a text-field addon when the native select is a multi-select. If this isn't set, the addon will always be centered based on the size of the select field instead.
$rmd-select-native-addon-top: 1rem !default;The elevation level for a temporary listbox. This should be a number between 0-24 as it generates a material design box shadow value.
$rmd-listbox-elevation: 8 !default;Since v2.7.0
The background color for a temporary listbox in light themes.
$rmd-listbox-light-background-color: rmd-theme-var(surface) !default;Since v2.7.0
The background color for a temporary listbox in dark themes when the $rmd-theme-dark-elevation feature flag is also enabled.
$rmd-listbox-dark-elevation-background-color: map.get(
$rmd-theme-dark-elevation-colors,
$rmd-listbox-elevation
) !default;Since v2.7.0
The background color for a temporary listbox in dark themes.
$rmd-listbox-dark-background-color: if(
$rmd-theme-dark-elevation and $rmd-listbox-dark-elevation-background-color,
$rmd-listbox-dark-elevation-background-color,
rmd-theme-var(surface)
) !default;Since v2.7.0
The base background color to apply to temporary listboxes.
$rmd-listbox-background-color: if(
$rmd-theme-light,
$rmd-listbox-light-background-color,
$rmd-listbox-dark-background-color
) !default;The z-index to use for a temporary listbox.
$rmd-listbox-z-index: $rmd-utils-temporary-element-z-index !default;The styles to apply when an option is focused with aria-activedescendant behavior. This should be a map of styles that should be applied.
$rmd-option-focused-styles: (
box-shadow: inset 0 0 0 2px $rmd-blue-500,
) !default;The styles to apply when an option is selected. This should be a map of style properties with values to apply.
$rmd-option-selected-styles: (
background-color: $rmd-blue-900,
color: $rmd-white-base,
) !default;The amount of left (or right when rtl languages are used) to apply to the option's selected checkmark css.
$rmd-option-selected-offset: 0.5rem !default;The content to use for the selected state of the option. If this value is set to null, the ::after styles will not be created and the $rmd-option-horizontal-padding variable will not be used to update the list item's horizontal padding for options. This is useful if you want to use icons or ignore the selected state instead.
$rmd-option-selected-content: '\2713' !default;The amount of horizontal padding that should be applied to each option.
This overrides the $rmd-list-item-horizontal-padding css variable so that the selected checkmark styles can appear nicely.
$rmd-option-horizontal-padding: 1.5rem !default;Since v2.5.0
Boolean if vertical slider styles should be generated.
$rmd-slider-include-vertical: true !default;Since v2.5.0
The size of the interactable and clickable area for the slider. When the orientation is "horizontal", this will be the height while it will be the width for a "vertical" slider.
$rmd-slider-size: 2rem !default;Since v2.5.0
The default height to use for all vertical sliders since they cannot be "auto".
$rmd-slider-vertical-size: 15rem !default;Since v2.5.0
The size for the "active" state of the slider's track. This track will cover the "inactive" state track and should normally be a bigger number.
$rmd-slider-active-track-size: 0.375rem !default;Since v2.5.0
The background-color to use for the "active" state of the slider's track.
$rmd-slider-active-track-color: rmd-theme-var(secondary) !default;Since v2.5.0
An optional opacity to apply to the active track color.
$rmd-slider-active-track-opacity: null !default;Since v2.5.0
The size for the inactive state of the slider's track. This track will be covered by the "active" state track and should normally be a smaller number.
$rmd-slider-inactive-track-size: 0.25rem !default;Since v2.5.0
The background-color to use for the "inactive" state of the slider's track. This defaults to the $rmd-slider-active-track-color since it instead uses an opacity value.
$rmd-slider-inactive-track-color: $rmd-slider-active-track-color !default;Since v2.5.0
The background color to use for the track when the slider is disabled.
$rmd-slider-disabled-track-color: rmd-theme-var(
text-disabled-on-background
) !default;Since v2.5.0
The background color to use for the thumb when the slider is disabled.
$rmd-slider-disabled-thumb-color: $rmd-slider-disabled-track-color !default;Since v2.5.0
An optional opacity to apply to the inactive track color.
$rmd-slider-inactive-track-opacity: 0.5 !default;Since v2.5.0
The z-index to use for the "inactive" state for the slider's track. This value should never really need to be changed.
$rmd-slider-inactive-track-z-index: 1 !default;Since v2.5.0
The z-index to use for the "active" state for the slider's track. This value should never really need to be changed.
$rmd-slider-active-track-z-index: $rmd-slider-inactive-track-z-index + 1 !default;Since v2.5.0
The height and width for the slider's thumb.
$rmd-slider-thumb-size: 1.25rem !default;Since v2.5.0
The border-radius for the slider's thumb.
$rmd-slider-thumb-radius: 50% !default;Since v2.5.0
The z-index to use for the slider's thumb. This should normally never really need to be changed. This value does need to be at least the same as the $rmd-slider-inactive-track-s-index value or higher for the slider to look correctly though.
$rmd-slider-thumb-z-index: $rmd-slider-active-track-z-index !default;Since v2.5.0
The opacity to apply to the focus and active states of the thumb which creates an extra "bubble" around the thumb using the same theme colors.
$rmd-slider-thumb-bubble-opacity: 0.3 !default;Since v2.5.0
The scale to apply to the focus state of the thumb which creates an extra "bubble" around the thumb using the same theme colors.
$rmd-slider-thumb-focus-scale: 2 !default;Since v2.5.0
The scale to apply to the focus and active states of the thumb which creates an extra "bubble" around the thumb using the same theme colors.
$rmd-slider-thumb-active-scale: 2.5 !default;Since v2.5.0
The scale to apply to the thumb when the slider is disabled.
$rmd-slider-thumb-disabled-scale: 0.5 !default;Since v2.5.0
The scale to apply to the "mask" for the thumb when the slider is disabled. This is used to create the empty space on the track on both sides of the thumb.
$rmd-slider-thumb-disabled-mask-scale: 0.8 !default;Since v2.5.0
This is the size for the caret (triangle) placed below the discrete slider's value tooltip.
$rmd-slider-thumb-value-caret-size: 0.3rem !default;Since v2.5.0
The distance the discrete slider's value tooltip appears away from the slider's thumb.
$rmd-slider-thumb-value-offset: -($rmd-slider-thumb-size +
$rmd-icon-spacing-with-text) !default;Since v2.5.0
The amount of padding to apply to the left and right of the container when the slider is horizontal. The left padding will be removed if there is a left addon and the right padding will be removed if there is a right addon.
This padding is really just so that the thumb does not overlay other elements in the layout.
$rmd-slider-container-padding: $rmd-slider-thumb-size !default;Since v2.5.0
The updated icon spacing to use within sliders.
$rmd-slider-container-addon-spacing: $rmd-slider-thumb-size !default;Since v2.5.0
$rmd-slider-is-same-track-color: $rmd-slider-active-track-color ==
$rmd-slider-inactive-track-color;Since v2.5.0
A Map of all the "themeable" parts of the slider package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.
$rmd-slider-theme-values: (
size: $rmd-slider-size,
vertical-size: $rmd-slider-vertical-size,
active-size: $rmd-slider-active-track-size,
inactive-size: $rmd-slider-inactive-track-size,
color:
if($rmd-slider-is-same-track-color, $rmd-slider-active-track-color, null),
active-color:
if($rmd-slider-is-same-track-color, null, $rmd-slider-active-track-color),
inactive-color:
if($rmd-slider-is-same-track-color, null, $rmd-slider-inactive-track-color),
thumb-size: $rmd-slider-thumb-size,
) !default;The color to use for the text field's borders/underlines while the user is focusing the text field.
$rmd-text-field-active-color: $rmd-states-focus-shadow-color !default;The text field's border color to use in light themed apps or backgrounds.
$rmd-text-field-light-border-color: rgba($rmd-black-base, 0.12) !default;The text field's border color to use in dark themed apps or backgrounds.
$rmd-text-field-dark-border-color: rgba($rmd-white-base, 0.5) !default;The default text field's border color to use.
$rmd-text-field-border-color: if(
$rmd-theme-light,
$rmd-text-field-light-border-color,
$rmd-text-field-dark-border-color
) !default;The text field's border color to use in light themed apps or backgrounds when the user is hovering the text field.
$rmd-text-field-light-border-hover-color: rgba($rmd-black-base, 0.87) !default;The text field's border color to use in dark themed apps or backgrounds when the user is hovering the text field.
$rmd-text-field-dark-border-hover-color: rgba($rmd-white-base, 0.87) !default;The default text field's hover border color to use.
$rmd-text-field-border-hover-color: if(
$rmd-theme-light,
$rmd-text-field-light-border-hover-color,
$rmd-text-field-dark-border-hover-color
) !default;The border radius to apply to text fields.
$rmd-text-field-border-radius: 0.25rem !default;The default border width for outlined text fields.
$rmd-text-field-border-width: 1px !default;The border width for outlined text fields that are currently focused.
$rmd-text-field-border-width-active: 2px !default;The height to use for a text field with a label.
$rmd-text-field-label-height: 3.5rem !default;The height to use for a text field with a label with the dense spec.
$rmd-text-field-label-dense-height: 3.25rem !default;The height to use for a text field without a label (so placeholder only).
$rmd-text-field-height: 3rem !default;The height to use for a text field without a label with the dense spec (so placeholder only).
$rmd-text-field-dense-height: 2.5rem !default;The amount of padding to apply to the left and right of the text field when it has the outline theme applied.
$rmd-text-field-outline-padding: 1rem !default;The amount of padding to apply to the top of an underlined or filled text field. This is used to push the input down a little bit to look nice with the floating label.
$rmd-text-field-underline-label-padding-top: 1rem !default;The amount of offset to apply to the floating label for an underlined or filled text field when there is an icon to the left of the input.
$rmd-text-field-underline-label-left-offset: $rmd-icon-spacing-with-text !default;The amount of padding to apply to the top of an underlined or filled text field when the dense theme is enabled. This is used to push the input down a little bit to look nice with the floating label.
$rmd-text-field-underline-dense-padding-top: 0.25rem !default;The amount of padding to apply to the left and right of the text field when it has the underline theme applied.
$rmd-text-field-underline-padding: null !default;The amount of padding to apply to the left and right of the text field when it has the filled theme applied.
$rmd-text-field-filled-padding: 0.75rem !default;The background color to use for filled text fields when using the light theme.
$rmd-text-field-filled-light-background-color: $rmd-grey-100 !default;The background color to use for filled text fields when using the dark theme.
$rmd-text-field-filled-dark-background-color: $rmd-grey-700 !default;The default background color for filled text fields.
$rmd-text-field-filled-background-color: if(
$rmd-theme-light,
$rmd-text-field-filled-light-background-color,
$rmd-text-field-filled-dark-background-color
) !default;The border radius to apply to the top left and top right of the filled text field.
$rmd-text-field-filled-border-radius: 0.25rem !default;The amount of spacing between the left or right of the text field and the icon.
$rmd-text-field-addon-margin: $rmd-icon-spacing-with-text !default;An additional amount of padding to apply to textareas.
$rmd-textarea-vertical-padding: 0.5rem !default;The amount to start offsetting the textarea's left/right inline addon icons. If this value isn't set, the icons will be centered in the textarea's height and will continually be centered as the user types more and more text.
$rmd-textarea-addon-top: 1rem !default;The minimum height for the FormMessage component. This is really just required to help prevent layout changes when the messages are added and removed from the DOM.
$rmd-form-message-min-height: 2rem !default;The amount of margin that should be applied to the top of the FormMessage component.
$rmd-form-message-margin-top: 0.5rem !default;The amount of margin that should be applied to the top of the FormMessage component.
$rmd-form-message-margin-bottom: 1rem !default;The amount of padding to apply to the left of the FormMessage's counter component.
$rmd-form-message-counter-spacing: $rmd-icon-spacing-with-text !default;The font size to apply to the FormMessage component for the messages as well as the counter component.
Note: The remaining typography styles will come from body-2.
$rmd-form-message-font-size: 0.75rem !default;The border radius for the checkbox and radio components.
$rmd-toggle-border-radius: 50% !default;This is how much the background layer should be inset relative to the checkbox/radio's icon element. This is used to animate changes in the checked state by covering part of the icon.
$rmd-toggle-inset: 0.3125rem !default;The amount of offset to apply when using the dense theme.
$rmd-toggle-dense-inset: 0.25rem !default;Since v2.2.0
The color to use for the checkbox and radio components while unchecked. If you want to be able to dynamically configure the active color, you can set this to a custom css variable string.
$rmd-toggle-inactive-color: rmd-theme-var(
text-secondary-on-background
) !default;@use 'react-md' as *;
$rmd-toggle-inactive-color: --toggle-inactive;
$rmd-toggle-active-color: --toggle-active;
:root {
--toggle-active: #{rmd-theme-var(secondary)};
--toggle-inactive: #{rmd-theme-var(text-secondary-on-background)};
}
.overriding {
--toggle-active: #{$rmd-orange-700};
--toggle-inactive: #{$rmd-orange-a-100};
}
Since v2.2.0
The color to use for the checkbox and radio components while checked. If you want to be able to dynamically configure the active color, you can set this to a custom css variable string.
$rmd-toggle-active-color: rmd-theme-var(secondary) !default;@use 'react-md' as *;
$rmd-toggle-inactive-color: --toggle-inactive;
$rmd-toggle-active-color: --toggle-active;
:root {
--toggle-active: #{rmd-theme-var(secondary)};
--toggle-inactive: #{rmd-theme-var(text-secondary-on-background)};
}
.overriding {
--toggle-active: #{$rmd-orange-700};
--toggle-inactive: #{$rmd-orange-a-100};
}
The height for the indeterminate checkbox's state line that covers the icon.
$rmd-checkbox-indeterminate-height: 0.15rem !default;The height for the indeterminate checkbox's state line that covers the icon when the dense spec is enabled.
$rmd-checkbox-indeterminate-dense-height: 0.125rem !default;The height for a switch's track. The track is the background that the ball animates left and right on.
$rmd-switch-track-height: 1rem !default;The width for a switch's track. The track is the background that the ball animates left and right on.
$rmd-switch-track-width: 2.25rem !default;The background color for a switch's track. This is the element that the ball animates left and right on.
$rmd-switch-track-background-color: if(
$rmd-theme-dark-elevation,
map.get($rmd-theme-dark-elevation-colors, 24),
rgba($rmd-black-base, 0.38)
) !default;The border radius to apply to the switch's track. This is the element that the ball animates left and right on.
$rmd-switch-track-border-radius: 0.5rem !default;The size of the switch's ball.
$rmd-switch-ball-size: 1.25rem !default;The border radius for the switch's ball.
$rmd-switch-ball-border-radius: 50% !default;The amount of offset that should be applied to the ball relative to its track. This is really used so the ball can overlap the track a bit to look a bit nicer.
$rmd-switch-ball-offset: 0.25rem !default;The vertical padding for the switch container. This should generally be large enough so that the ball does not overlap any other elements.
$rmd-switch-container-vertical-padding: 0.5rem !default;The horizontal padding for the switch container. This should generally be large enough so that the ball does not overlap the label or other elements.
$rmd-switch-container-horizontal-padding: $rmd-switch-ball-size * 0.5 !default;The color to use for the switch's ball when it is toggled on and disabled.
$rmd-switch-ball-disabled-color: rmd-theme-get-swatch(
$rmd-theme-secondary,
200,
false,
color.adjust($rmd-theme-secondary, $lightness: -5%),
rmd-switch-ball-disabled-color
) !default;The width of the circular progress bar. This will make the progress bar more prominent than the normal circular progress.
$rmd-switch-progress-width: 12 !default;The background color to use for the switch's ball while the the switch is loading.
$rmd-switch-progress-background-color: $rmd-white-base !default;The amount of padding to apply to the async switch's progress bar. This will make it so there is some space between the switch's ball and the progress bar.
$rmd-switch-progress-padding: 0.125rem !default;Creates the styles for one of the form's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | — |
$fallback | A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the | Color|String|Number | null |
Updates one of the form's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The form theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Since v2.5.0
Creates the base styles for a simple fieldset element.
Creates the styles for forms within react-md. This requires either the rmd-form-use-font-forms or rmd-form-use-svg-forms variables to be enabled to generate any styles.
Creates the base styles for a <label> element as well as all the different states a label can be in.
Since v2.5.0
Creates the styles for one of the slider's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | — |
$fallback | A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the | Color|String|Number | null |
Since v2.5.0
Updates one of the slider's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The slider theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Since v2.5.0
Creates the styles for the slider container that allows for additional addons to be placed inline with the slider.
Since v2.5.0
The track for the slider is made up of a container <span> element that holds the one or two thumbs and displays the min/max distance the slider can be dragged. To keep the DOM minimal, the track's "progress" is created by using the ::before and ::after pseudo-selectors to create the progress
"blocks". The ::before tag is used for the inactive state while the ::after tag shows the active state.
Since v2.5.0
Creates the styles for horizontal tracks by attaching the following modifiers to the parent class:
--h - base styles that should be used along side one of the following
classes--h1 - additional styles when there is only one thumb--h2 - additional styles when there are two thumbs. Should not be used
with any of the --h1* classesSince v2.5.0
Creates the styles for horizontal tracks by attaching the following modifiers to the parent class:
--v - base styles that should be used along side one of the following
classes--v1 - additional styles when there is only one thumb--v2 - additional styles when there are two thumbs. Should not be used
with any of the --v1* classesSince v2.5.0
Creates the styles for the slider's thumb. This should be used within a class since it adds additional class modifiers based on the parent class.
Since v2.5.0
Creates the styles for horizontal thumbs by attaching the following modifiers to the parent class:
--h - base styles that should be used along side the following classes--h1 - styles specifically for the first thumb--h2 - styles specifically for the second thumb--disabled-h - disabled styles since the thumb uses a translateX +
scale transform when disabled. Should not be applied to the "mask" thumb
that is used to add spacing on the track--mask-h - styles that should be used for the masked thumb to create
spacing on the track.Since v2.5.0
Creates the styles for vertical thumbs by attaching the following modifiers to the parent class:
--v - base styles that should be used along side the following classes--v1 - styles specifically for the first thumb--v2 - styles specifically for the second thumb--disabled-v - disabled styles since the thumb uses a translateY +
scale transform when disabled. Should not be applied to the "mask" thumb
that is used to add spacing on the track--mask-v - styles that should be used for the masked thumb to create
spacing on the track.Since v2.5.0
Generates the styles for the discrete slider's value tooltip
Since v2.5.0
Creates all the styles for this package as well as defining all the theme CSS variables.
A simple mixin that applies placeholder styles to an input/textarea element.
Creates the base styles for a text field so that it gains the correct typography and a few different colors based on its state.
Creates the minimal styles for a toggle container.
Creates all the styles for creating the icon container for the checkbox and radio input types.
mixinCreates styles to apply to the "hidden" input for checkboxes and radios.
mixinCreates the styles for a form input that should be hidden from view. This should normally be applied to checkbox or radio input types.
Creates the styles for the checkbox and radio input types' icon
Updates the checkbox and radio components to have a dense theme by updating the toggle-inset css variable to be the dense version. This should generally be used within media queries.
Creates the styles for the switch component
Creates all the styles for the toggle components in the form package.
This function is used to quickly get one of the form's theme values. This is really just for the rmd-form-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the form's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the form's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-form-theme-values
This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.
Color|String|Numberone of the form's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |
Since v2.5.0
This function is used to quickly get one of the slider's theme values. This is really just for the rmd-slider-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the slider's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
Since v2.5.0
This function is used to get one of the slider's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-slider-theme-values
This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.
Stringone of the slider's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |
Since v2.5.0
This is used internally just to help with the --offset1 and --offset2 custom properties to help position/style the thumbs and tracks in the Slider.
Stringthe css variable for the slider thumb offset
| Name | Description | Type | Default Value |
|---|---|---|---|
$thumb-index | This should be either 1 or 2 | Number | — |