Skip to main content
react-md
react-md - States - SassDoc

Variables

rmd-states-use-ripple

Boolean

Boolean if the pressed and keyboard focus interaction states should use the ripple effect. If this is set to false, a different background color will be applied for each interaction state instead.

Note: You will still need to update the InteractionStatesContext to disable the ripple effects in javascript.

$rmd-states-use-ripple: true !default;

rmd-states-use-pressed-states-fallback

Boolean

Boolean if the pressed states fallback should also be included. You'd normally want to disable this if only using the ripple effects, but there isn't too much code to it so you'd only save a few bytes by disabling it.

$rmd-states-use-pressed-states-fallback: true !default;

rmd-states-use-focus-shadow

Boolean

Boolean if the focus state should still us a box-shadow outline for keyboard users. This is generally recommended for accessibility since the default outline-style is removed, and just a background-color change normally isn't enough to help users determine the current focus of the page at a glance.

$rmd-states-use-focus-shadow: true !default;

rmd-states-use-focus-background

Boolean

Boolean if the default focus state should change the background color to the focus color. This will apply to all components and styles within react-md and can be used as a feature toggle. If this is set to false, either the $rmd-states-use-focus-shadow should be enabled or another custom focus state should be implemented.

$rmd-states-use-focus-background: true !default;

rmd-states-light-theme-background-color

Color

The base background color to use for the different interaction states for a light themed application. This is the color that gets different opacities applied to it.

$rmd-states-light-theme-background-color: $rmd-black-base !default;

rmd-states-dark-theme-background-color

Color

The base background color to use for the different interaction states for a dark themed application. This is the color that gets different opacities applied to it. This is currently the same color as the light themed version, but it's available for reconfiguration if it's desired.

$rmd-states-dark-theme-background-color: $rmd-black-base !default;

rmd-states-light-theme-hover-color

Color

The hover color to use for light themed backgrounds.

$rmd-states-light-theme-hover-color: rgba(
  $rmd-states-light-theme-background-color,
  0.08
) !default;

rmd-states-light-theme-focus-color

Color

The keyboard focus color to use for light themed backgrounds.

$rmd-states-light-theme-focus-color: rgba(
  $rmd-states-light-theme-background-color,
  0.24
) !default;

rmd-states-light-theme-pressed-color

Color

The pressed color to use for light themed backgrounds.

$rmd-states-light-theme-pressed-color: rgba(
  $rmd-states-light-theme-background-color,
  0.32
) !default;

rmd-states-light-theme-selected-color

Color

The selected color to use for light themed backgrounds.

$rmd-states-light-theme-selected-color: rgba(
  $rmd-states-light-theme-background-color,
  0.16
) !default;

rmd-states-dark-theme-hover-color

Color

The hover color to use for dark themed backgrounds.

$rmd-states-dark-theme-hover-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.04
) !default;

rmd-states-dark-theme-focus-color

Color

The keyboard focus color to use for dark themed backgrounds.

$rmd-states-dark-theme-focus-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.12
) !default;

rmd-states-dark-theme-pressed-color

Color

The pressed color to use for dark themed backgrounds.

$rmd-states-dark-theme-pressed-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.16
) !default;

rmd-states-dark-theme-selected-color

Color

The selected color to use for dark themed backgrounds.

$rmd-states-dark-theme-selected-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.12
) !default;

rmd-states-light-theme-ripple-background-color

Color

The base background color to use for the ripple effect in a light themed application.

$rmd-states-light-theme-ripple-background-color: rgba(
  $rmd-black-base,
  0.08
) !default;

rmd-states-dark-theme-ripple-background-color

Color

The base background color to use for the ripple effect in a dark themed application.

$rmd-states-dark-theme-ripple-background-color: rgba(
  $rmd-black-base,
  0.08
) !default;

rmd-states-background-color

Color

The background color to use for the different states. The default behavior is to use a base color and apply different opacities depending on the interaction with the element.

$rmd-states-background-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-background-color,
  $rmd-states-dark-theme-background-color
) !default;

rmd-states-hover-color

Color

The default hover color to use. This will be determined based on the current theme type of light or dark.

$rmd-states-hover-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-hover-color,
  $rmd-states-dark-theme-hover-color
) !default;

rmd-states-focus-color

Color

The default focus color to use. This will be determined based on the current theme type of light or dark.

$rmd-states-focus-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-focus-color,
  $rmd-states-dark-theme-focus-color
) !default;

rmd-states-pressed-color

Color

The default pressed color to use. This will be determined based on the current theme type of light or dark.

$rmd-states-pressed-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-pressed-color,
  $rmd-states-dark-theme-pressed-color
) !default;

rmd-states-selected-color

Color

The default selected color to use. This will be determined based on the current theme type of light or dark.

$rmd-states-selected-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-selected-color,
  $rmd-states-dark-theme-selected-color
) !default;

rmd-states-focus-shadow-width

Number

The keyboard focus shadow width to use when the $rmd-states-use-focus-shadow variable is enabled.

$rmd-states-focus-shadow-width: 0.125rem !default;

rmd-states-focus-shadow-color

Color

The keyboard focus shadow color to use when the $rmd-states-use-focus-shadow variable is enabled.

$rmd-states-focus-shadow-color: $rmd-blue-500 !default;

rmd-states-focus-shadow

String

The box-shadow to use when the user keyboard-focuses an element and the $rmd-states-use-focus-shadow variable is enabled.

$rmd-states-focus-shadow: inset 0 0 0 $rmd-states-focus-shadow-width
  $rmd-states-focus-shadow-color !default;

rmd-states-ripple-background-color

Color

The base background color for the ripple effect.

$rmd-states-ripple-background-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-ripple-background-color,
  $rmd-states-dark-theme-ripple-background-color
) !default;

rmd-states-ripple-transform-duration

Number

The transition duration for the ripple transformation animation. This is the expanding circle animation that overlaps a bit with the fade out animation.

$rmd-states-ripple-transform-duration: 0.45s !default;

rmd-states-ripple-opacity-duration

Number

The transition duration for the ripple opacity animation. This will be triggered when the ripple starts its exit animation.

$rmd-states-ripple-opacity-duration: 0.3s !default;

rmd-states-pressed-class-name

String

The class name to use when using the pressed interaction fallback

$rmd-states-pressed-class-name: '.rmd-states--pressed' !default;

rmd-states-theme-values

Map

A Map of all the "themeable" parts of the states 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-states-theme-values: (
  background-color: transparent,
  hover-color: $rmd-states-hover-color,
  focus-color: $rmd-states-focus-color,
  focus-shadow: $rmd-states-focus-shadow,
  pressed-color: $rmd-states-pressed-color,
  selected-color: $rmd-states-selected-color,
  ripple-background-color: $rmd-states-ripple-background-color,
  light-hover-color: $rmd-states-light-theme-hover-color,
  light-focus-color: $rmd-states-light-theme-focus-color,
  light-pressed-color: $rmd-states-light-theme-pressed-color,
  light-selected-color: $rmd-states-light-theme-selected-color,
  light-ripple-background-color: $rmd-states-light-theme-ripple-background-color,
  dark-hover-color: $rmd-states-dark-theme-hover-color,
  dark-focus-color: $rmd-states-dark-theme-focus-color,
  dark-pressed-color: $rmd-states-dark-theme-pressed-color,
  dark-selected-color: $rmd-states-dark-theme-selected-color,
  dark-ripple-background-color: $rmd-states-dark-theme-ripple-background-color,
) !default;

Mixins

rmd-states-theme

mixin

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

Parameters
NameDescriptionTypeDefault Value
$property

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

String
$theme-style

One of the keys of rmd-states-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-states-theme-values map when null.

Color|String|Numbernull

rmd-states-theme-update-var

mixin

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String
$value

The new value to use.

Color|String|Number

rmd-states-surface-base

mixin

Generates all the base styles for an interaction "surface". This should normally be applied to a ::before or ::after pseudo element.

rmd-states-pressed-styles

mixin

A simple mixin that allows you to add custom pressed state styles to an element.

Parameters
NameDescriptionTypeDefault Value
$pressed-class-name

The class name to use to indicate that the element is currently being pressed.

String$rmd-states-pressed-class-name
$css-modules

Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with :global and :local.

Booleanfalse

rmd-states-focus-shadow

mixin

This mixin will add the focus shadow color to your current element only during keyboard focus events. Your element must also have included the rmd-states-surface-base mixin for this to work.

Note: If you used the rmd-states-surface mixin, this functionality will be included by default. In addition this only works for non-inline elements due to how positioning works for them. You'll either need to update it to be display: inline-block or fallback to the outline-styles.

Parameters
NameDescriptionTypeDefault Value
$focus-selector

A selector to use for the focus effect. This should normally stay as the default value, but can be used if the focus state is only triggered by class name changes since the element isn't truly focusable.

String'&:focus'
$create-pseudo

Boolean if the pseudo element should also be created with only the rmd-utils-pseudo-element mixin. This is useful if you don't want the full states styles that come with the rmd-states-surface-base mixin.

Booleanfalse
$after

Boolean if the ::after pseudo element should be used instead of the ::before.

Booleanfalse
$css-modules

Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with :global and :local.

Booleanfalse

Examples

Example Usage SCSS
@use 'react-md' as *;

.my-custom-component {
  @include rmd-states-focus-shadow;

  position: relative;

  &::before {
    @include rmd-states-surface-base;

    // omit this margin if your component adds its own padding
    // so that there is some space between the focus effect and
    // content.
    margin: -0.25rem;
  }
}
Automatically Creating the pseudo Element
@use 'react-md' as *;

.my-custom-component {
  @include rmd-states-focus-shadow($create-pseudo: true);

  position: relative;
}

rmd-states-surface

mixin

This is the main interaction states creator. It will apply all the styles to an element so that it will:

  • gain the pointer cursor when it is not disabled (also works for aria-disabled)
  • create a ::before element for transitioning between the different interaction states
  • apply the hover opacity when not disabled and for non-touch devices (see more below)
  • apply the focused opacity after a keyboard focus event (see more below)
  • apply the pressed opacity if not using the ripple effect (see more below)
Hover Opacity

This requires the usage of a COMPONENT_TO_MAKE to work correctly. If COMPONENT_TO_MAKE is not used in your application, the hover effect will be applied on mobile devices after touch events. This is because a touch event still goes through the mouse events and applies the hover state after being touched.

Focused Opacity

This requires the usage of the KeyboardTracker component to work correctly. If the KeyboardTracker is not used in your application and not near the root of the React render tree, you most likely will not have any focus states. This is actually one of the "biggest" features of react-md until the :focus-visible css selector has gained traction and browser support.

Pressed Opacity

If you are using the ripple effect for pressed states, this will be ignored as a ripple element will be created instead to show the pressed state. When the ripple effect is disabled, pressing an element will just trigger a background opacity change like the over interaction states.

Parameters
NameDescriptionTypeDefault Value
$focus-selector

A selector to use for the focus effect. This should normally stay as the default value, but can be used if the focus state is only triggered by class name changes since the element isn't truly focusable.

String'&:focus'
$clickable

Boolean if the surface element should gain the pointer cursor when hovered.

Booleantrue
$no-focus-state

Boolean if the keyboard focus background color change should be disabled.

Booleanfalse
$css-modules

Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with :global and :local.

Booleanfalse

rmd-states-surface-selected

mixin

This is a mixin that should be used along with the rmd-states-surface mixin if you'd also like to be able to add a selected state to an element. This really just adds another opacity background change when the element is considered selected. This is not apart of the main surface mixin since selection states are a bit less used and it might be better to do different styles than just a background change to show selection.

Parameters
NameDescriptionTypeDefault Value
$selector

The selector to use when a surface is considered selected. The selected state will be applied when this class is active.

String'&--selected'
$css-modules

Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with :global and :local.

Booleanfalse

rmd-states-ripple-container

mixin

rmd-states-ripple

mixin

react-md-states

mixin

Creates all the root styles for the states package as well as the themeable css variables and their default values.

Functions

rmd-states-theme

function

This function is used to quickly get one of the states's theme values. This is really just for the rmd-states-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 states's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String

rmd-states-theme-var

function

This function is used to get one of the states'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-states-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 states's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-states-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