Skip to main content
react-md
Form - SassDoc

Variables

rmd-form-error-color

Color

The color to use when a form contains an error.

$rmd-form-error-color: $rmd-theme-error !default;
Requires

rmd-form-error-hover-color

Color

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,
  darken($rmd-form-error-color, 10%),
  rmd-form-error-color
) !default;
Requires

rmd-form-active-color

Color

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;
Requires

rmd-form-disabled-color

Color

The color to use when a form element is disabled.

$rmd-form-disabled-color: rmd-theme-var(text-disabled-on-background) !default;
Requires

rmd-form-placeholder-color

Color

The default color to use for placeholder text within text fields.

$rmd-form-placeholder-color: rmd-theme-var(
  text-secondary-on-background
) !default;
Requires

rmd-form-theme-values

Map

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,
  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;
Used By

rmd-label-font-size

Number

The font size to use for a <label> by default.

$rmd-label-font-size: 1em !default;
Used By

rmd-label-floating-font-size

Number

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;
Used By

rmd-label-floating-padding

Number

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;
Used By

rmd-label-floating-top

Number

The top position for a floating label.

$rmd-label-floating-top: 1rem !default;

rmd-label-floating-dense-top

Number

The top position for a dense floating label.

$rmd-label-floating-dense-top: 0.9rem !default;

rmd-label-padding

Number

The amount of horizontal padding to use for a floating label with an outlined text field/textarea.

$rmd-label-padding: 0.25rem !default;

rmd-select-native-multiple-padding

Number

The additional amount of apdding 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;
Used By

rmd-select-native-addon-top

Number

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;
Used By

rmd-listbox-z-index

Number

The z-index to use for a temporary listbox.

$rmd-listbox-z-index: $rmd-utils-temporary-element-z-index !default;
Used By
Requires

rmd-listbox-elevation

Number

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;
Used By

rmd-option-focused-styles

Map

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;
Used By
Requires

rmd-option-selected-styles

Map

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;
Used By
Requires

rmd-option-selected-offset

Number

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;
Used By

rmd-option-selected-content

String

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;
Used By

rmd-option-horizontal-padding

Number

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;
See also

rmd-slider-include-vertical

Since v2.5.0

Boolean

Boolean if vertical slider styles should be generated.

$rmd-slider-include-vertical: true !default;
Used By

rmd-slider-size

Since v2.5.0

Number

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;

rmd-slider-vertical-size

Since v2.5.0

Number

The default height to use for all vertical sliders since they cannot be "auto".

$rmd-slider-vertical-size: 15rem !default;

rmd-slider-active-track-size

Since v2.5.0

Number

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;

rmd-slider-active-track-color

Since v2.5.0

Color|String

The background-color to use for the "active" state of the slider's track.

$rmd-slider-active-track-color: rmd-theme-var(secondary) !default;

rmd-slider-active-track-opacity

Since v2.5.0

Number

An optional opacity to apply to the active track color.

$rmd-slider-active-track-opacity: null !default;
Used By

rmd-slider-inactive-track-size

Since v2.5.0

Number

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;

rmd-slider-inactive-track-color

Since v2.5.0

Color|String

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;

rmd-slider-disabled-track-color

Since v2.5.0

Color|String

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;
Used By

rmd-slider-disabled-thumb-color

Since v2.5.0

Color|String

The background color to use for the thumb when the slider is disabled.

$rmd-slider-disabled-thumb-color: $rmd-slider-disabled-track-color !default;
Used By

rmd-slider-inactive-track-opacity

Since v2.5.0

Number

An optional opacity to apply to the inactive track color.

$rmd-slider-inactive-track-opacity: 0.5 !default;
Used By

rmd-slider-inactive-track-z-index

Since v2.5.0

Number

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;
Used By

rmd-slider-active-track-z-index

Since v2.5.0

Number

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;
Used By

rmd-slider-thumb-size

Since v2.5.0

Number

The height and width for the slider's thumb.

$rmd-slider-thumb-size: 1.25rem !default;

rmd-slider-thumb-radius

Since v2.5.0

Number

The border-radius for the slider's thumb.

$rmd-slider-thumb-radius: 50% !default;
Used By

rmd-slider-thumb-z-index

Since v2.5.0

Number

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;
Used By

rmd-slider-thumb-bubble-opacity

Since v2.5.0

Number

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;
Used By

rmd-slider-thumb-focus-scale

Since v2.5.0

Number

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;
Used By

rmd-slider-thumb-active-scale

Since v2.5.0

Number

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;
Used By

rmd-slider-thumb-disabled-scale

Since v2.5.0

Number

The scale to apply to the thumb when the slider is disabled.

$rmd-slider-thumb-disabled-scale: 0.5 !default;
Used By

rmd-slider-thumb-disabled-mask-scale

Since v2.5.0

Number

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;
Used By

rmd-slider-thumb-value-caret-size

Since v2.5.0

Number

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;
Used By

rmd-slider-thumb-value-offset

Since v2.5.0

Number

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;
Used By

rmd-slider-container-padding

Since v2.5.0

Number

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;
Used By

rmd-slider-container-addon-spacing

Since v2.5.0

Number

The updated icon spacing to use within sliders.

$rmd-slider-container-addon-spacing: $rmd-slider-thumb-size !default;
Used By

rmd-slider-is-same-track-color

Since v2.5.0

Boolean
$rmd-slider-is-same-track-color: $rmd-slider-active-track-color ==
  $rmd-slider-inactive-track-color;
Used By

rmd-slider-theme-values

Since v2.5.0

Map

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;
Used By

rmd-text-field-active-color

Color

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;
Requires

rmd-text-field-light-border-color

Color

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;
Used By
Requires

rmd-text-field-dark-border-color

Color

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;
Used By
Requires

rmd-text-field-border-color

Color

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;
Requires

rmd-text-field-light-border-hover-color

Color

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;
Used By
Requires

rmd-text-field-dark-border-hover-color

Color

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;
Used By
Requires

rmd-text-field-border-hover-color

Color

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;
Requires

rmd-text-field-border-radius

Number

The border radius to apply to text fields.

$rmd-text-field-border-radius: 0.25rem !default;
Used By

rmd-text-field-border-width

Number

The default border width for outlined text fields.

$rmd-text-field-border-width: 1px !default;
Used By

rmd-text-field-border-width-active

Number

The border width for outlined text fields that are currently focused.

$rmd-text-field-border-width-active: 2px !default;
Used By

rmd-text-field-label-height

Number

The height to use for a text field with a label.

$rmd-text-field-label-height: 3.5rem !default;

rmd-text-field-label-dense-height

Number

The height to use for a text field with a label with the dense spec.

$rmd-text-field-label-dense-height: 3.25rem !default;

rmd-text-field-height

Number

The height to use for a text field without a label (so placeholder only).

$rmd-text-field-height: 3rem !default;

rmd-text-field-dense-height

Number

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;

rmd-text-field-outline-padding

Number

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;
Used By

rmd-text-field-underline-label-padding-top

Number

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;
Used By

rmd-text-field-underline-label-left-offset

Number

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;
Used By
Requires

rmd-text-field-underline-dense-padding-top

Number

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;
Used By

rmd-text-field-underline-padding

Number

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;
Used By

rmd-text-field-filled-padding

Number

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;
Used By

rmd-text-field-filled-light-background-color

Color

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;
Used By
Requires

rmd-text-field-filled-dark-background-color

Color

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;
Used By
Requires

rmd-text-field-filled-background-color

Color

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;
Requires

rmd-text-field-filled-border-radius

Number

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;
Used By

rmd-text-field-addon-margin

Number

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;
Used By
Requires

rmd-textarea-vertical-padding

Number

An additional amount of padding to apply to textareas.

$rmd-textarea-vertical-padding: 0.5rem !default;

rmd-textarea-addon-top

Number

The amount to start offseting 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;
Used By

rmd-form-message-min-height

Number

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;
Used By

rmd-form-message-margin-top

Number

The amount of margin that should be applied to the top of the FormMessage component.

$rmd-form-message-margin-top: 0.5rem !default;
Used By

rmd-form-message-margin-bottom

Number

The amount of margin that should be applied to the top of the FormMessage component.

$rmd-form-message-margin-bottom: 1rem !default;
Used By

rmd-form-message-counter-spacing

Number

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;
Used By
Requires

rmd-form-message-font-size

Number

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;
Used By

rmd-toggle-border-radius

Number

The border radius for the checkbox and radio components.

$rmd-toggle-border-radius: 50% !default;
Used By

rmd-toggle-inset

Number

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;

rmd-toggle-dense-inset

Number

The amount of offset to apply when using the dense theme.

$rmd-toggle-dense-inset: 0.25rem !default;
See also

rmd-toggle-inactive-color

Since v2.2.0

Color|String

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;

Examples

As a Custom CSS Variable
$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};
}
Used By
Requires

rmd-toggle-active-color

Since v2.2.0

Color|String

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;

Examples

As a Custom CSS Variable
$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};
}
Used By
Requires

rmd-checkbox-indeterminate-height

Number

The height for the indeterminate checkbox's state line that covers the icon.

$rmd-checkbox-indeterminate-height: 0.15rem !default;

rmd-checkbox-indeterminate-dense-height

Number

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;

rmd-switch-track-height

Number

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;
Used By

rmd-switch-track-width

Number

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;
Used By

rmd-switch-track-background-color

Color

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;
Requires

rmd-switch-track-border-radius

Number

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;
Used By

rmd-switch-ball-size

Number

The size of the switch's ball.

$rmd-switch-ball-size: 1.25rem !default;
Used By

rmd-switch-ball-border-radius

Number

The border radius for the switch's ball.

$rmd-switch-ball-border-radius: 50% !default;
Used By

rmd-switch-ball-offset

Number

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;
Used By

rmd-switch-container-vertical-padding

Number

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;
Used By

rmd-switch-container-horizontal-padding

Number

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 / 2 !default;
Used By

rmd-switch-ball-disabled-color

Color

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,
  darken($rmd-theme-secondary, 5%),
  rmd-switch-ball-disabled-color
) !default;
Used By
Requires

rmd-switch-progress-width

Number

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;
Used By

rmd-switch-progress-background-color

Color

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;
Used By
Requires

rmd-switch-progress-padding

Number

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;
Used By

Mixins

rmd-form-theme

mixin

Creates the styles for one of the form's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-form-theme-values value to.

String
$theme-style

One of the keys of rmd-form-theme-values to extract a value from.

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 rmd-form-theme-values map when null.

Color|String|Numbernull
Used By
Requires

rmd-form-theme-update-var

mixin

Updates one of the form's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The form theme style type to update. This should be one of the $rmd-form-theme-values keys.

String
$value

The new value to use.

Color|String|Number
Used By
Requires

rmd-form-message-container

Since v2.5.0

mixin
Used By

rmd-form-message

mixin
Used By
Requires

rmd-fieldset

mixin

Creates the base styles for a simple fieldset element.

Used By
Requires

react-md-form

mixin

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.

Used By
Requires

react-md-file-input

mixin
Used By
Requires

rmd-label

mixin

Creates the base styles for a <label> element as well as all the different states a label can be in.

Used By
Requires

rmd-floating-label

mixin
Used By
Requires

react-md-label

mixin
Used By
Requires

rmd-native-select-container

mixin
Used By
Requires

rmd-native-select

mixin
Used By
Requires

rmd-select

mixin
Used By
Requires

rmd-listbox

mixin
Used By
Requires

rmd-option

mixin
Used By
Requires

react-md-select

mixin
Used By
Requires

rmd-slider-theme

Since v2.5.0

mixin

Creates the styles for one of the slider's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-slider-theme-values value to.

String
$theme-style

One of the keys of rmd-slider-theme-values to extract a value from.

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 rmd-slider-theme-values map when null.

Color|String|Numbernull
Used By
Requires

rmd-slider-theme-update-var

Since v2.5.0

mixin

Updates one of the slider's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The slider theme style type to update. This should be one of the $rmd-slider-theme-values keys.

String
$value

The new value to use.

Color|String|Number
Used By
Requires

rmd-slider-container

Since v2.5.0

mixin

Creates the styles for the slider container that allows for additional addons to be placed inline with the slider.

Used By
Requires

rmd-slider-track

Since v2.5.0

mixin

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.

Used By
Requires

rmd-slider-track-horizontal

Since v2.5.0

mixin

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* classes
Used By
Requires

rmd-slider-track-vertical

Since v2.5.0

mixin

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* classes
Used By
Requires

rmd-slider-thumb

Since v2.5.0

mixin

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.

Used By
Requires

rmd-slider-thumb-horizontal

Since v2.5.0

mixin

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.
Used By
Requires

rmd-slider-thumb-vertical

Since v2.5.0

mixin

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.
Used By
Requires

rmd-slider-value

Since v2.5.0

mixin

Generates the styles for the discrete slider's value tooltip

Used By
Requires

react-md-slider

Since v2.5.0

mixin

Creates all the styles for this package as well as defining all the theme CSS variables.

Used By
Requires

rmd-text-field-container

mixin
Used By
Requires

rmd-text-field-placeholder

mixin

A simple mixin that applies placeholder styles to an input/textarea element.

rmd-text-field-base

mixin

Creates the base styles for a text field so that it gains the correct typography and a few different colors based on its state.

Used By
Requires

rmd-text-field

mixin
Used By
Requires

rmd-text-field-addon

mixin
Used By
Requires

rmd-textarea-container

mixin
Used By
Requires

rmd-textarea

mixin
Used By
Requires

rmd-password

mixin
Used By
Requires

react-md-text-field

mixin
Used By
Requires

rmd-toggle-container

mixin

Creates the minimal styles for a toggle container.

Used By

rmd-toggle

mixin

Creates all the styles for creating the icon container for the checkbox and radio input types.

Used By
Requires

rmd-input-hidden

mixin

Creates styles to apply to the "hidden" input for checkboxes and radios.

Used By
Requires

rmd-toggle-hidden

mixin

Creates the styles for a form input that should be hidden from view. This should normally be applied to checkbox or radio input types.

Used By
Requires

rmd-toggle-icon

mixin

Creates the styles for the checkbox and radio input types' icon

Used By
Requires

rmd-toggle-dense-theme

mixin

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.

Used By
Requires

rmd-switch

mixin

Creates the styles for the switch component

Used By
Requires

rmd-switch-input

mixin
Used By
Requires

rmd-switch-ball

mixin
Used By
Requires

rmd-switch-container

mixin
Used By
Requires

react-md-toggle

mixin

Creates all the styles for the toggle components in the form package.

Used By
Requires

Functions

rmd-form-theme

function

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.

Returns — Color|String|Number

one of the form's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-form-theme-values map keys to get a value for.

String
Requires

rmd-form-theme-var

function

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.

Returns — Color|String|Number

one of the form's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-form-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull
Used By
Requires

rmd-slider-theme

Since v2.5.0

function

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.

Returns — Color|String|Number

one of the slider's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-slider-theme-values map keys to get a value for.

String
Requires

rmd-slider-theme-var

Since v2.5.0

function

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.

Returns — String

one of the slider's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-slider-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull
Requires

rmd-slider-offset

Since v2.5.0

function

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.

Returns — String

the css variable for the slider thumb offset

Parameters
NameDescriptionTypeDefault Value
$thumb-index

This should be either 1 or 2

Number
Used By