Utils Sass API

Variables

disable-rtl

Boolean

$disable-rtl: false !default;

Set this to true if you do not need to support RTL languages

Used By

@mixin rtl

disable-validation

Boolean

$disable-validation: false !default;

Set this to true if you want to disable build-time validation for overriding react-md values. No idea why you would want this though.

Used By

@function validate

disable-has-selectors

Boolean

$disable-has-selectors: false !default;

Set this to true to remove the :has selectors in the code if you need to support older browsers even though I don't really support older browsers.

Used By

disable-focus-visible

Boolean

$disable-focus-visible: false !default;

Set this to true if focus styles should be applied with .rmd-keyboard-mode :focus instead of :focus-visible.

Used By

temporary-element-z-index

Boolean

$temporary-element-z-index: 30 !default;

The default z-index to use for temporary elements

Mixins

map-to-styles

mixin

Full Source Code

@mixin map-to-styles($map) { … }

Converts a property: value map into styles. Also supports custom selectors.

Note: If the styles include complex selectors like .parent &, it will need to be the last mixin in the current block or wrap other styles in & {}

Parameters
Name	Description	Type	Default Value
`$map`	the map of styles to generate	`Map`	—

Examples

Simple Example

@use "@react-md/core";

$styles: (
  background-color: red,
  color: blue,
  padding: 0.25rem,
);
.container {
  @include core.map-to-styles($styles);
}

@use "@react-md/core";

$styles: (
  background-color: red,
  color: blue,
  padding: 0.25rem,
);
.container {
  @include core.map-to-styles($styles);
}

Selectors

@use "@react-md/core";

$styles: (
  background-color: red,

  "&:hover": (
    background-color: orange,
    color: red,
  ),
);

.container {
  @include core.map-to-styles($styles);
}

@use "@react-md/core";

$styles: (
  background-color: red,

  "&:hover": (
    background-color: orange,
    color: red,
  ),
);

.container {
  @include core.map-to-styles($styles);
}

Used By

@mixin map-to-animation

map-to-animation

mixin

Full Source Code

@mixin map-to-animation($map) { … }

Used to convert a map into a css animation

Parameters
Name	Description	Type	Default Value
`$map`	the map of animation styles to generate	`Map`	—

Examples

@use "@react-md/core";

$animation: (
  0%: (
    opacity: 0.06,
  ),
  60%: (
    opacity: 0.1,
  ),
  80%: (
    opacity: 0.08,
  ),
  100%: (
    opacity: 0.06,
  ),
);

@keyframes my-animation {
  @include core.map-to-animation($animation);
}

@use "@react-md/core";

$animation: (
  0%: (
    opacity: 0.06,
  ),
  60%: (
    opacity: 0.1,
  ),
  80%: (
    opacity: 0.08,
  ),
  100%: (
    opacity: 0.06,
  ),
);

@keyframes my-animation {
  @include core.map-to-animation($animation);
}

Requires

@mixin map-to-styles

pseudo-element

mixin

Full Source Code

@mixin pseudo-element($z-index: 0, $fixed: false, $inset: 0, $border-radius: inherit) { … }

Generates a pseudo element with most used styles.

Parameters
Name	Description	Type	Default Value
`$z-index`	The z-index for the pseudo element.	`Number`	`0`
`$fixed`	Set to `true` to change from `position: absolute` to `position: fixed`	`Boolean`	`false`
`$inset`	Used to apply any inset styles from the parent element.	`Number`	`0`
`$border-radius`	You normally want to inherit the `border-radius`, but it can be configured with this param if needed.	`String`	`inherit`

Examples

@use "@react-md/core";

.container {
  @include core.pseudo-element;

  position: relative;
}

@use "@react-md/core";

.container {
  @include core.pseudo-element;

  position: relative;
}

Requires

mixin

Full Source Code

@mixin sr-only($focusable: false, $focus-selector: "&--focusable") { … }

Generates styles to create a screen-reader only visible element but can also allow the element to be visible to everyone while focused.

You'll normally just want to use the SrOnly component or cssUtils instead of this mixin.

Parameters
Name	Description	Type	Default Value
`$focusable`	Set to `true` to update the element so it will become visible to everyone while focused	`Boolean`	`false`
`$focus-selector`	A selector to show that the element has been focused	`String`	`"&--focusable"`

@mixin _sr-only-focusable

hide-scrollbar

mixin

Full Source Code

@mixin hide-scrollbar { … }

Used to hide the scrollbar for an element while still remaining scrollable.

NOTE: This is generally not recommended for accessibility since most users do not know how to scroll without a visible scrollbar

optional-css-modules

mixin

Full Source Code

@mixin optional-css-modules($selector, $css-modules: false, $parent-selector: true) { … }

Mostly an internal mixin for generating styles that might be created from a CSS module. This really just wraps the provided selector in :global and wrapping the rest of the content in :local.

Parameters
Name	Description	Type	Default Value
`$selector`	The selector that should not be affected by CSS module behavior	`String`	—
`$css-modules`	Set to `true` when used within a CSS Module	`Boolean`	`false`
`$parent-selector`	Updates the selector to end with `&` so it inherits the current scope	`Boolean`	`true`

Used By

rtl

mixin

Full Source Code

@mixin rtl { … }

Used to apply styles when using rtl behavior

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Examples

@use "@react-md/core";

.selector {
  margin-right: 1rem;

  // swap the margin in RTL
  @include core.rtl {
    margin-left: 1rem;
    margin-right: auto;
  }
}

@use "@react-md/core";

.selector {
  margin-right: 1rem;

  // swap the margin in RTL
  @include core.rtl {
    margin-left: 1rem;
    margin-right: auto;
  }
}

Requires

$disable-rtl

keyboard-only

mixin

Full Source Code

@mixin keyboard-only($css-modules: false, $parent-selector: true) { … }

Used to apply styles only while the user is using a keyboard. This relies on the UserInteractionModeProvider to work correctly.

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Parameters
Name	Description	Type	Default Value
`$css-modules`	Set to `true` when used within a CSS Module	`Boolean`	`false`
`$parent-selector`	Updates the selector to end with `&` so it inherits the current scope	`Boolean`	`true`

Requires

@mixin optional-css-modules

mouse-only

mixin

Full Source Code

@mixin mouse-only($css-modules: false, $parent-selector: true) { … }

Used to apply styles only while the user is using a mouse. This relies on the UserInteractionModeProvider to work correctly.

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Parameters
Name	Description	Type	Default Value
`$css-modules`	Set to `true` when used within a CSS Module	`Boolean`	`false`
`$parent-selector`	Updates the selector to end with `&` so it inherits the current scope	`Boolean`	`true`

Requires

@mixin optional-css-modules

touch-only

mixin

Full Source Code

@mixin touch-only($css-modules: false, $parent-selector: true) { … }

Used to apply styles only while the user is using a touch device. This relies on the UserInteractionModeProvider to work correctly.

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Parameters
Name	Description	Type	Default Value
`$css-modules`	Set to `true` when used within a CSS Module	`Boolean`	`false`
`$parent-selector`	Updates the selector to end with `&` so it inherits the current scope	`Boolean`	`true`

Requires

@mixin optional-css-modules

mouse-hover

mixin

Full Source Code

@mixin mouse-hover($wrap-in-hover: true) { … }

A helper mixin to apply hover styles only when the user is using a mouse. If you just use :hover, the styles will also be applied after touching an element on touch screens until another element is focused.

Parameters
Name	Description	Type	Default Value
`$wrap-in-hover`	Set this to `false` if the content should not automatically be wrapped in `&:hover`	`Boolean`	`true`

Examples

@use "@react-md/core";

.selector {
  @include core.mouse-hover {
    background-color: red;
  }
}

@use "@react-md/core";

.selector {
  @include core.mouse-hover {
    background-color: red;
  }
}

optional-layer

mixin

Full Source Code

@mixin optional-layer($name, $disabled) { … }

An internal helper to dynamically wrap the CSS in a @layer.

Parameters
Name	Description	Type	Default Value
`$name`	The layer name to use	`String`	—
`$disabled`	Set to `true` if the content should not be wrapped in the layer.	`Boolean`	—

Functions

scrollbar-size

function

Full Source Code

@function scrollbar-size { … }

This function can be used to offset position: fixed or position: absolute elements by the current scrollbar size. The variable will only be set while the useScrollLock hook has been triggered.

Returns — `String`

a var string

Examples

Example Usage SCSS

@use "@react-md/core";

.selector {
  margin-right: core.scrollbar-size();
}

@use "@react-md/core";

.selector {
  margin-right: core.scrollbar-size();
}

Used By

negate-var

function

Full Source Code

@function negate-var($css-variable) { … }

Used to negate a number or a variable that might be a var statement.

Returns — `String`

the calc string

Parameters
Name	Description	Type	Default Value
`$css-variable`	The `var()` or number to negate.	`String`	—

Used By

validate

Since 6.4.0

function

Full Source Code

@function validate($options, $key-or-value, $error-message) { … }

Internal validation function to ensure the user overrides variables with accepted values.

Returns — `any`

the value from the list or map

Parameters
Name	Description	Type	Default Value
`$options`	The list or map of available options. This can also be a single item list.	`List\|Map\|String`	—
`$key-or-value`	Either the map key or list value to check if exists	`String\|Number`	—
`$error-message`	The additional error message to display	`String`	—

Utils Sass API

Variables

disable-rtl

Used By

disable-validation

Used By

disable-has-selectors

Used By

disable-focus-visible

Used By

temporary-element-z-index

Mixins

map-to-styles

Examples

Simple Example

Selectors

Used By

map-to-animation

Examples

Requires

pseudo-element

Examples

Requires

sr-only

Requires

hide-scrollbar

optional-css-modules

Used By

rtl

Examples

Requires

keyboard-only

Requires

mouse-only

Requires

touch-only

Requires

mouse-hover

Examples

optional-layer

Functions

scrollbar-size

Returns — String

Examples

Example Usage SCSS

Used By

negate-var

Returns — String

Used By

validate

Returns — any

Throws

Used By

Requires

Utils Sass API

Variables

disable-rtl

Used By

disable-validation

Used By

disable-has-selectors

Used By

disable-focus-visible

Used By

temporary-element-z-index

Mixins

map-to-styles

Examples

Simple Example

Selectors

Used By

map-to-animation

Examples

Requires

pseudo-element

Examples

Requires

sr-only

Requires

hide-scrollbar

Returns — `String`

Returns — `String`

Returns — `any`

Returns — `String`

Returns — `String`

Returns — `any`