Utils Sass API

Variables

disable-rtl

$disable-rtl: false !default;

Used By

• @mixin rtl

disable-validation

$disable-validation: false !default;

Used By

• @function validate

disable-has-selectors

$disable-has-selectors: false !default;

Used By

• @mixin expansion-panel-styles
• @mixin files-styles
• @mixin input-toggle-styles

disable-focus-visible

$disable-focus-visible: false !default;

Used By

• @mixin dialog-styles
• @mixin expansion-panel-styles
• @mixin files-styles
• @mixin input-toggle-styles
• @mixin link-styles
• @mixin slider-styles
• @mixin switch-styles
• @mixin tree-styles

temporary-element-z-index

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

Mixins

map-to-styles

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

Examples

Simple Example

@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);
}

Used By

• @mixin map-to-animation

map-to-animation

@mixin map-to-animation($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);
}

Requires

• @mixin map-to-styles

pseudo-element

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

Examples

@use "@react-md/core";

.container {
  @include core.pseudo-element;

  position: relative;
}

Requires

• $avatar-border-radius
• $divider-inset
• $dialog-z-index

sr-only

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

Requires

• @mixin _sr-only-focusable

hide-scrollbar

@mixin hide-scrollbar { … }

optional-css-modules

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

Used By

• @mixin keyboard-only
• @mixin mouse-only
• @mixin touch-only

rtl

@mixin rtl { … }

Examples

@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 keyboard-only($css-modules: false, $parent-selector: true) { … }

Requires

• @mixin optional-css-modules

mouse-only

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

Requires

• @mixin optional-css-modules

touch-only

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

Requires

• @mixin optional-css-modules

mouse-hover

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

Examples

@use "@react-md/core";

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

optional-layer

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

Functions

scrollbar-size

@function scrollbar-size { … }

Returns — String

Examples

Example Usage SCSS

@use "@react-md/core";

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

Used By

• @mixin app-bar-styles
• @mixin button-variables
• @mixin dialog-styles
• @mixin layout-styles

negate-var

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

Returns — String

Used By

• @mixin css-utils
• @mixin transition-styles
• @mixin interaction-outline
• @mixin label-floating-active-styles
• @mixin label-styles
• @mixin tooltip-styles
• @mixin window-splitter-styles

validate

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

Returns — any

Throws

Used By

• @mixin media
• @function get-swatch
• @function get-var-name

Requires

• $disable-validation

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

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.

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.

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

The default z-index to use for temporary elements

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 & {}

the map of styles to generate

Used to convert a map into a css animation

the map of animation styles to generate

Generates a pseudo element with most used styles.

The z-index for the pseudo element.

Set to true to change from position: absolute to position: fixed

Used to apply any inset styles from the parent element.

You normally want to inherit the border-radius, but it can be configured with this param if needed.

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.

Set to true to update the element so it will become visible to everyone while focused

A selector to show that the element has been focused

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

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.

The selector that should not be affected by CSS module behavior

Set to true when used within a CSS Module

Updates the selector to end with & so it inherits the current scope

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 & {}

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 & {}

Set to true when used within a CSS Module

Updates the selector to end with & so it inherits the current scope

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 & {}

Set to true when used within a CSS Module

Updates the selector to end with & so it inherits the current scope

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 & {}

Set to true when used within a CSS Module

Updates the selector to end with & so it inherits the current scope

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.

Set this to false if the content should not automatically be wrapped in &:hover

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

The layer name to use

Set to true if the content should not be wrapped in the layer.

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.

a var string

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

the calc string

The var() or number to negate.

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

the value from the list or map

The list or map to validate against

Either the map key or list value to check if exists

The additional error message to display

Unable to validate anything except for lists and maps at this time. Received: #{$list-or-map}.

Invalid #{$error-message}: