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

Variables

rmd-utils-ios-scroll-momentum

Boolean

Boolean if scroll momentum should be added by default for iOS. This can probably be removed one day when iOS natively supports scroll momentum on anything except the main document.

$rmd-utils-ios-scroll-momentum: true !default;

rmd-utils-auto-dense

Boolean

Boolean if the dense spec should automatically be applied based on media queries once the app has reached a "desktop" size.

$rmd-utils-auto-dense: false !default;

rmd-utils-enable-rtl

Boolean

Boolean if the rtl fixes should be included by default. You can save a few bytes in your bundle size by disabling this if you don't need to worry about right-to-left languages in your app.

$rmd-utils-enable-rtl: true !default;

rmd-utils-temporary-element-z-index

Number

The default z-index to use for temporary elements like dialogs and menus. It is recommended to keep all of these the same since it makes portalling work much better. If the z-indexes are different, you might need to update the portal container to be a parent temporary element instead.

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

rmd-utils-swappable-positions

List

A list of the supported swappable variables for rmd-utils-swap-position.

$rmd-utils-swappable-positions: top right bottom left;

rmd-utils-swappable-position-prefixes

List

A list of the supported swappable variables prefixes for rmd-utils-swap-position.

$rmd-utils-swappable-position-prefixes: border margin padding;

rmd-utils-skip-validation

Boolean

Boolean if the validation for valid themes and other things should occur. It is recommended to keep this enabled, but you might see a build speed perf by setting this to true.

$rmd-utils-skip-validation: false !default;

rmd-utils-fix-moz-focus

Boolean

Boolean if the moz focusring and inner-focus styles should be removed for the rmd-utils-hide-focus-outline mixin by default. This is generally recommended since custom focus styles will be added instead.

$rmd-utils-fix-moz-focus: true !default;

rmd-utils-phone-max-width

Number

The max width for a phone when in portrait or landscape mode.

$rmd-utils-phone-max-width: 47.9375em !default;

rmd-utils-tablet-min-width

Number

The min width for a tablet in portrait or landscape mode.

$rmd-utils-tablet-min-width: 48em !default;

rmd-utils-tablet-max-width

Number

The max width for a tablet in portrait or landscape mode.

$rmd-utils-tablet-max-width: 64em !default;

rmd-utils-desktop-min-width

Number

The min width for a desktop screen.

$rmd-utils-desktop-min-width: 64.0625em !default;

rmd-utils-large-desktop-min-width

Number

The min width for a large desktop screen.

$rmd-utils-large-desktop-min-width: 80em !default;

rmd-grid-columns-var

String

The css variable that is used to track how many columns there are within the Grid component.

$rmd-grid-columns-var: --rmd-grid-cols;

rmd-grid-gutter-var

String

The css variable that is used to apply a gutter between each cell in the Grid component.

$rmd-grid-gutter-var: --rmd-grid-gutter;

rmd-grid-cell-margin-var

String

The css variable that is used to apply margin to cells within the grid components.

$rmd-grid-cell-margin-var: --rmd-cell-margin;

rmd-grid-cell-size-var

String

The css variable that is used to apply size to cells within the GridList component.

$rmd-grid-cell-size-var: --rmd-cell-size;

rmd-grid-padding

Number

The default amount of padding to apply to the Grid component. This is a bit different than the flex grid since the cells within this grid will not have outer margin.

$rmd-grid-padding: 1rem !default;

rmd-grid-cell-margin

Number

The default amount of margin to apply between each cell within the Grid component.

$rmd-grid-cell-margin: 1rem !default;

rmd-grid-columns

Number

The material design grid system is a bit weird and does a 4 -> 8 -> 12 column layout for phone -> tablet -> desktop. This is really nice when your grid only uses even numbers, but the second you add an odd number in there, it breaks down and becomes confusing.

This variable is a quick way to opt-out of this grid system and have a static number of columns for each media type.

$rmd-grid-columns: null !default;

rmd-grid-phone-columns

Number

The default number of columns to render on mobile devices in the Grid component.

$rmd-grid-phone-columns: if($rmd-grid-columns, $rmd-grid-columns, 4) !default;

rmd-grid-tablet-columns

Number

The default number of columns to render on tablet devices in the Grid component.

$rmd-grid-tablet-columns: if($rmd-grid-columns, $rmd-grid-columns, 8) !default;

rmd-grid-desktop-columns

Number

The default number of columns to render on desktop screens in the Grid component.

$rmd-grid-desktop-columns: if(
  $rmd-grid-columns,
  $rmd-grid-columns,
  12
) !default;

rmd-grid-large-desktop-columns

Number

The default number of columns to render on large desktop screens in the Grid component.

$rmd-grid-large-desktop-columns: $rmd-grid-desktop-columns !default;

rmd-grid-list-padding

Number

The default amount of padding to apply to the GridList component.

$rmd-grid-list-padding: 0.5rem !default;

rmd-grid-list-cell-margin

Number

The default amount of margin to apply to each cell within the GridList component.

$rmd-grid-list-cell-margin: 0.5rem !default;

rmd-grid-list-cell-max-size

Number

The default max size that each cell can be within the GridList component.

$rmd-grid-list-cell-max-size: 9.375rem !default;

Mixins

rmd-utils-map-to-styles

mixin

This is a simple mixin that will create styles from a Map of properties with values.

Parameters
NameDescriptionTypeDefault Value
$style-map

The map of styles that should be applied. If this is null, no styles will be generated.

Map

rmd-utils-rtl

mixin

A simple mixin that allows you to update styles when the [dir="rtl"] is present for languages that read right to light. This is mostly used to update spacing with margins or padding and a more "verbose" method of declaring rtl styles.

Examples

Example Usage SCSS
.my-class {
  margin-right: 1rem;

  @include rmd-utils-rtl {
    margin-left: 1rem;
    margin-right: auto;
  }
}

rmd-utils-rtl-auto

mixin

This mixin will try to automatically swap the positioning styles for rtl languages. If the swapped style should have something other than auto as the new style, that style should be included in the $swapped-styles map with the correct value.

Parameters
NameDescriptionTypeDefault Value
$property

The property that should be reversed for rtl languages.

String
$value

The value that should be used for the original property value or the inversed property value when in rtl mode.

String|Number
$swapped-value

The value to use when in rtl languages for the original property. When this is set to null, 0 will be used for margins and padding while auto for everything else.

String|Numbernull

rmd-utils-rtl-auto-group

mixin

This mixin will try to automatically swap the positioning styles for rtl languages. If the swapped style should have something other than auto as the new style, that style should be included in the $swapped-styles map with the correct value.

Parameters
NameDescriptionTypeDefault Value
$styles

The styles that should be swapped for rtl languages. Right now react-md only supports the $rmd-utils-swappable-positions.

Map
$swapped-styles

Any optional swapped style overrides that should be applied.

Map()

rmd-utils-block-centered

mixin

A very simple mixin that will center an element within the page for you when you aren't using flexbox or grid for the part of the layout.

rmd-utils-absolute-centered

mixin

A very simple mixin that is used to position an element in the center of another element by using some transforms and position: absolute. You will need to make sure that the parent element has position: relative to work.

rmd-utils-scroll

mixin

An extremely simple util that is used to add scrolling to an element with a "patch" for adding scroll momentum to iOS.

Parameters
NameDescriptionTypeDefault Value
$position

This should either be "x", "y", or null. This will just change the style between overflow, overflow-x, and overflow-y.

Stringnull
$type

The scroll type to apply. It is recommended to use the default of auto in most cases, but it can be set to something else.

Stringauto
$enable-momentum

Boolean if iOS scroll momentum should be "patched".

Boolean$rmd-utils-ios-scroll-momentum

rmd-utils-hide-focus-outline

mixin

A helper mixin that will hide the outline style when a user focuses any element / on the page. All this really does is create an outline-style: none when the element is focused.

Parameters
NameDescriptionTypeDefault Value
$fix-moz-focus

Boolean if the Firefox focus inner styles should also be removed.

Boolean$rmd-utils-fox-moz-focus

rmd-utils-full-screen

mixin

An extremely simple mixin that will allow any element to be fixed to the entire viewport size.

Parameters
NameDescriptionTypeDefault Value
$position

The positioning that should be applied. This should be one of the values for the position attribute.

Stringfixed

rmd-utils-pseudo-element

mixin

Creates the styles to apply to a pseudo element (::before or ::after) so that it spans the entire size of the container element. This is really useful for focus effects or other interaction states. This relies on the parent to have position: relative; to work.

Parameters
NameDescriptionTypeDefault Value
$z-index

The z-index to use.

Number0
$position

CSS position to apply to the pseudo element. This should normally be absolute or fixed

Stringabsolute

rmd-utils-sr-only-focusable

mixin

Creates styles to make a screenreader only class visible while focused.

See also

rmd-utils-sr-only

mixin

Creates styles so that an element is visible only for screen readers.

Parameters
NameDescriptionTypeDefault Value
$focusable

Boolean if the element should still be focusable and then be visible when focused.

Booleanfalse
$focus-suffix

The suffix to use for an element that can be focusable. This will be used alongside &:active and &:focus. If this value is set to null, no prefix will be provided and just the &:active and &:focus selectors will be used instead. These styles will only be generated if the focusable parameter is true.

String'&--focusable'
See also

rmd-utils-hide-scrollbar

mixin

This mixin will hide the scrollbar for an element but still allow scrolling by using the scrollbar-width property along with the -webkit-scrollbar pseudo selector. If on a non-MacOS and the horizontal scrollbars were hidden, the user can still scroll by holding shift while scrolling.

Note: This only works due to the limited browser support of this library. If you need to support older browsers, don't use this.

See also

rmd-utils-phone-media

mixin

Creates a media query so that only phones will be targeted with the styles. This media query will stop at the phone's max width instead of being a min-width query since it would be better to just apply the phone styles as a base and use the tablet or desktop min-width queries for additional overrides.

rmd-utils-tablet-media

mixin

Creates a media query so devices targeted at the min-width of a tablet and above will gain these styles.

rmd-utils-tablet-only-media

mixin

Creates a media query so that screen sizes between the min and max width of a tablet will only gain these styles.

rmd-utils-desktop-media

mixin

Creates a media query so that screen sizes matching at least the min width for a desktop will gain these styles.

rmd-utils-large-desktop-media

mixin

Creates a media query so that screen sizes matching at least the min width for a large desktop will gain these styles.

rmd-utils-optional-css-modules

Since v2.1.0

mixin

This mixin should mostally be used internally within react-md so that react-md mixins that use a rmd- prefixed class work correctly if included from a css module file. This basically prefixes the react-md class with :global and suffixes with :local &.

Parameters
NameDescriptionTypeDefault Value
$class-name

The class name that should be optionally prefixed with :global when the $css-modules parameter is true.

String
$css-modules

Boolean if the class name should be updated to be used with css modules.

Booleanfalse
$parent-selector

Boolean if the selector should end with the parent selector & so that the $class-name is a parent of the current class.

Booleantrue

rmd-utils-touch-only

mixin

This mixin allows you to add styles to an element only when the user is interacting with your app on a touch device.

Parameters
NameDescriptionTypeDefault Value
$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

Normal Usage
.my-class-name {
  @include rmd-utils-touch-only {
    &:hover {
      background-color: transparent;
    }
  }
}
CSS Modules Usage
.container {
  @include rmd-utils-touch-only(true) {
    &:hover {
      background-color: transparent;
    }
  }
}

rmd-utils-keyboard-only

mixin

This mixin allows you to add styles to an element only when the user is interacting with your app with a keyboard.

Parameters
NameDescriptionTypeDefault Value
$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

Normal Usage
.my-class-name {
  @include rmd-utils-keyboard-only {
    &:focus {
      box-shadow: inset 0 0 0 1px blue;
    }
  }
}
CSS Modules Usage
.container {
  @include rmd-utils-keyboard-only(true) {
    &:focus {
      box-shadow: inset 0 0 0 1px blue;
    }
  }
}

rmd-utils-mouse-only

mixin

This mixin allows you to add styles to an element only when the user is interacting with your app with a mouse.

Parameters
NameDescriptionTypeDefault Value
$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

Normal Usage
.my-class-name {
  @include rmd-utils-mouse-only {
    &:hover {
      background-color: yellow;
    }
  }
}
CSS Modules Usage
.container {
  @include rmd-utils-mouse-only(true) {
    &:hover {
      background-color: yellow;
    }
  }
}

rmd-grid

mixin

Generates a new grid based on the provided padding, margin, and columns.

Parameters
NameDescriptionTypeDefault Value
$padding

The amount of padding to apply to the base grid element.

Number$rmd-grid-padding
$gutter

The amount of margin to apply between each cell within the grid. Unlike flex grids, this will only be applied between cells instead of to the top, right, bottom, and left of each cell so this should normally be doubled compared to the flex grids.

Number$rmd-grid-cell-margin
$phone-columns

The number of columns that should appear per-row on phones.

Number$rmd-grid-phone-columns
$tablet-columns

The number of columns that should appear per-row on tablets. If this is not greater than the $phone-columns parameter, it will not be used.

Number$rmd-grid-tablet-columns
$desktop-columns

The number of columns that should appear per-row on desktop screens. If this is not greater than the $tablet-columns parameter, it will not be used.

Number$rmd-grid-desktop-columns
$large-desktop-columns

The number of columns that should appear per-row on large desktop screens. If this is not greater than the $tablet-columns parameter, it will not be used.

Number$rmd-grid-large-desktop-columns

rmd-grid-cell-full

mixin

This mixin is just a nice way to quickly make a cell span the entire width of the grid.

Note: if you set the number of columns for phone or tablet to 1, you'll need to also wrap this in the @include rmd-utils-tablet-media or @include rmd-utils-desktop-media mixins respectively.

rmd-grid-cell-size

mixin

A mixin that allows you to override the size of a cell within the Grid component manually. This is useful if you want to specify sizing without using the GridCell component wrapper.

Parameters
NameDescriptionTypeDefault Value
$size

The number of columns the element should span. This should normally be a number greater than 1 since using 1 is the default cell size.

Number
$phone-columns

The number of columns that should appear per-row on phones.

Number$rmd-grid-phone-columns
$tablet-columns

The number of columns that should appear per-row on tablets. If this is not greater than the $phone-columns parameter, it will not be used.

Number$rmd-grid-tablet-columns
$desktop-columns

The number of columns that should appear per-row on desktop screens. If this is not greater than the $tablet-columns parameter, it will not be used.

Number$rmd-grid-desktop-columns

rmd-grid-cell

mixin

Creates the styles for all the cell column spans and "fixes" for smaller media types if the media types doesn't support the same number of columns.

rmd-grid-list-cell-size

mixin

A simple mixin that will allow you to add the current grid list cell size to any property.

Parameters
NameDescriptionTypeDefault Value
$property

The css property to apply the size to.

String
$max-size

The max size that each cell can be. This is really just a fallback value if the --rmd-cell-size hasn't been defined yet by the GridList component.

Number$rmd-grid-list-cell-max-size
$margin

The amount of margin that should be placed between each cell. This will be used with the current --rmd-cell-size to calculate the correct height and width. This value will be multiplied by 2 in the calculation.

Number$rmd-grid-list-cell-margin

rmd-grid-list-cell

mixin

Adds the current grid list cell's size to any element if you don't want to use the GridListCell component for sizing. This will always apply the margin and width, but the height can be opted-out if desired.

Parameters
NameDescriptionTypeDefault Value
$margin

The amount of margin to apply to each cell for top, right, bottom and left.

Number$rmd-grid-list-cell-margin
$max-size

The max size that each cell can be. This is really just a fallback if the GridList component hasn't set the --rmd-cell-size variable yet.

Number$rmd-grid-list-cell-max-size
$include-height

Boolean if the cell's height should be restricted to the current cell size as well so it can be perfectly square.

Booleantrue

rmd-grid-list

mixin

Creates the styles for the GridList component

react-md-utils-grid

mixin

Generates all the styles for the grid systems in react-md.

rmd-utils-base

mixin

This is a small utility function that helps set up your react-md app.

This will:

  • update the box-sizing to be border-box (helpful for calculation positions and sizing)
  • remove the margin and padding from the html and body
  • apply the base background color and text colors to the html tag if the @react-md/theme package has been correctly included
  • apply the base typography to the html element if the @react-md/typography package has been correctly included

rmd-utils-dense

mixin

This mixin will attempt to apply all the available dense theme mixins that have been imported. This should normally be used within a :root selector and a media query.

Examples

Simple Usage
:root {
  @include rmd-utils-desktop-media {
    @include rmd-utils-dense;
  }
}

react-md-utils

mixin

This mixin will include the styles for all packages that have been imported in your scss files. If there are missing styles, you need to make sure to correctly import that package before calling this function.

Functions

str-replace

function

Replace $search with $replace in $string

Returns — String

Updated string

Parameters
NameDescriptionTypeDefault Value
$string

Initial string

String
$search

Substring to replace

String
$replace

New value

String
See also

rmd-utils-validate

function

This function is used to validate a list or map to make sure they contain the provided key or value. This should mostly really only be internal use.

Returns — String|Null

Either the map's value for the provided key or the provided value for a list when there is no error.

Parameters
NameDescriptionTypeDefault Value
$list-or-map

The list or map to validate

List|Map
$key-or-value

Either the value to check for in a list or a Map's key.

Color|String|Number
$error-message

The prop name that was being used for the validation. This is mostly for a more helpful error message when a developer/user provided the wrong input.

String
Throws
  • Unable to validate anything except for lists and maps at this time. Received: #{$list-or-map}.
  • Invalid #{$error-message}:

rmd-utils-swap-position

function

A utility function that can swap the position of different css styles. This is useful for RTL switching.

Returns — String

a swapped style attribute string.

Parameters
NameDescriptionTypeDefault Value
$style

The style to swap. This should be one of $rmd-utils-swappable-positions.

String

rmd-utils-negate-var

function

This function can be used to negate the value of a css variable. It just really wraps the variable with calc(-1 * #{$variable}).

Returns — String

a calc string that negates a css variable.

Parameters
NameDescriptionTypeDefault Value
$css-variable

The css variable string to negate.

String