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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;The class name to use when using the pressed interaction fallback
$rmd-states-pressed-class-name: '.rmd-states--pressed' !default;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;Creates the styles for one of the states'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 states's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The states theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Generates all the base styles for an interaction "surface". This should normally be applied to a ::before or ::after pseudo element.
A simple mixin that allows you to add custom pressed state styles to an element.
| Name | Description | Type | Default 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 | Boolean | false |
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.
| Name | Description | Type | Default 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 | Boolean | false |
$after | Boolean if the | Boolean | false |
$css-modules | Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with | Boolean | false |
@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;
}
}
@use 'react-md' as *;
.my-custom-component {
@include rmd-states-focus-shadow($create-pseudo: true);
position: relative;
}
This is the main interaction states creator. It will apply all the styles to an element so that it will:
::before element for transitioning between the different
interaction statesThis 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.
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.
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.
| Name | Description | Type | Default 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. | Boolean | true |
$no-focus-state | Boolean if the keyboard focus background color change should be disabled. | Boolean | false |
$css-modules | Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with | Boolean | false |
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.
| Name | Description | Type | Default 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 | Boolean | false |
Creates all the root styles for the states package as well as the themeable css variables and their default values.
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.
Color|String|Numberone of the states's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
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.
Stringone of the states'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 |