Skip to main content
react-md
Layout - SassDoc

Variables

rmd-layout-enter-duration

Number

The transition time for the toggleable navigation panel to come into view or expand to full width.

$rmd-layout-enter-duration: $rmd-sheet-enter-duration !default;

rmd-layout-leave-duration

Number

The transition time for the toggleable navigation panel to leave from view or shrink to the mini width.

$rmd-layout-leave-duration: $rmd-sheet-leave-duration !default;

rmd-layout-main-focus-shadow

String

The box-shadow to use when the <main> element has been keyboard focused from the SkipToMainContent link.

$rmd-layout-main-focus-shadow: $rmd-states-focus-shadow !default;

rmd-layout-main-focus-z-index

Number

The z-index to use for the <main> element when it is keyboard focused. This z-index is just used so that it should appear over all elements.

$rmd-layout-main-focus-z-index: 999 !default;

rmd-layout-navigation-z-index

Number

The z-index to use for the navigation pane (Sheet).

$rmd-layout-navigation-z-index: $rmd-dialog-z-index !default;

rmd-layout-navigation-mini-z-index

Since v2.7.0

Number

The z-index to use for the mini navigation page (Sheet). This should be set to be lower than the AppBar so that the navigation box shadow appears below the AppBar's box shadow.

$rmd-layout-navigation-mini-z-index: $rmd-app-bar-z-index - 1 !default;

rmd-layout-navigation-width

Number

The width to use for the desktop navigation tree.

$rmd-layout-navigation-width: $rmd-sheet-static-width !default;

rmd-layout-mini-navigation-width

Number

The width to use for the mini navigation tree.

$rmd-layout-mini-navigation-width: 3.5rem !default;

rmd-layout-theme-values

Map

A map of all the themeable parts of the layout package.

$rmd-layout-theme-values: (
  nav-width: $rmd-layout-navigation-width,
  mini-nav-width: $rmd-layout-mini-navigation-width,
) !default;

Mixins

rmd-layout-theme

mixin

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

Parameters
NameDescriptionTypeDefault Value
$property

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

String
$theme-style

One of the keys of rmd-layout-theme-values to extract a value from.

Stringproperty
$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-layout-theme-values map when null.

Color|String|Numbernull

rmd-layout-theme-update-var

mixin

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String
$value

The new value to use.

Color|String|Number

react-md-layout

mixin

Creates all the styles for the layout package.

Functions

rmd-layout-theme

function

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String

rmd-layout-theme-var

function

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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