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

Variables

rmd-sheet-z-index

Number

The z-index to use for sheets that normally appear without an overlay and inline with other content. This should be a number greater than 1 in case you have sticky table headers.

$rmd-sheet-z-index: 5 !default;

rmd-sheet-raised-z-index

Number

The z-index to use for sheets that normally appear with an overlay and covering other elements on the page.

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

rmd-sheet-overlay-z-index

Number

The z-index to use for a sheet's overlay. This value just needs to be smaller than the $rmd-sheet-raised-z-index value so the overlay does not cover the sheet.

$rmd-sheet-overlay-z-index: $rmd-overlay-z-index !default;

rmd-sheet-elevation

Number

This is the default elevation to use for sheets that do not have an overlay. This is normally used for showing sheets more "inline" with other content.

$rmd-sheet-elevation: 2 !default;

rmd-sheet-raised-elevation

Number

The elevation to use for temporary sheets that usually display an overlay as well.

$rmd-sheet-raised-elevation: 16 !default;

rmd-sheet-light-background-color

Since v2.7.0

Color

The background color for a sheet rendered "inline" with other content in the light theme.

Note: If $rmd-theme-dark-elevation is set to false, this variable is ignored and the color is determined by the normal dialog background color instead.

$rmd-sheet-light-background-color: rmd-dialog-theme-var(
  background-color
) !default;

rmd-sheet-dark-elevation-background-color

Since v2.7.0

Color

The background color for a sheet rendered "inline" with other content in the dark theme and the $rmd-theme-dark-elevation feature flag is also enabled.

$rmd-sheet-dark-elevation-background-color: map-get(
  $rmd-theme-dark-elevation-colors,
  $rmd-sheet-elevation
) !default;
See also

rmd-sheet-dark-background-color

Since v2.7.0

Color

The background color for a sheet rendered "inline" with other content in the dark theme.

Note: If $rmd-theme-dark-elevation is set to false, this variable is ignored and the color is determined by the normal dialog background color instead.

$rmd-sheet-dark-background-color: if(
  $rmd-theme-dark-elevation,
  $rmd-sheet-dark-elevation-background-color,
  rmd-dialog-theme-var(background-color)
) !default;

rmd-sheet-background-color

Since v2.7.0

Color

The background color for a sheet rendered "inline" with other content.

Note: If $rmd-theme-dark-elevation is set to false, this variable is ignored and the color is determined by the normal dialog background color instead.

$rmd-sheet-background-color: if(
  $rmd-theme-light,
  $rmd-sheet-light-background-color,
  $rmd-sheet-dark-background-color
) !default;

rmd-sheet-raised-light-background-color

Since v2.7.0

Color

The background color for a sheet raised above other content in the light theme.

Note: If $rmd-theme-dark-elevation is set to false, this variable is ignored and the color is determined by the normal dialog background color instead.

$rmd-sheet-raised-light-background-color: rmd-dialog-theme-var(
  background-color
) !default;

rmd-sheet-raised-dark-elevation-background-color

Since v2.7.0

Color

The background color for a sheet raised above other content in the dark theme and the $rmd-theme-dark-elevation feature flag is also enabled.

$rmd-sheet-raised-dark-elevation-background-color: map-get(
  $rmd-theme-dark-elevation-colors,
  $rmd-sheet-raised-elevation
) !default;
See also

rmd-sheet-raised-dark-background-color

Since v2.7.0

Color

The background color for a sheet raised above other content in the dark theme.

Note: If $rmd-theme-dark-elevation is set to false, this variable is ignored and the color is determined by the normal dialog background color instead.

$rmd-sheet-raised-dark-background-color: if(
  $rmd-theme-dark-elevation,
  $rmd-sheet-raised-dark-elevation-background-color,
  rmd-dialog-theme-var(background-color)
) !default;

rmd-sheet-raised-background-color

Since v2.7.0

Color

The background color for a sheet raised above other content.

Note: If $rmd-theme-dark-elevation is set to false, this variable is ignored and the color is determined by the normal dialog background color instead.

$rmd-sheet-raised-background-color: if(
  $rmd-theme-light,
  $rmd-sheet-raised-light-background-color,
  $rmd-sheet-raised-dark-background-color
) !default;

rmd-sheet-enter-duration

Number

The duration for the enter transition.

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

rmd-sheet-leave-duration

Number

The duration for the leave transition.

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

rmd-sheet-touch-margin

Number

The amount of horizontal margin to use between the viewport's edge and the sheet's edge. This is used so that mobile devices have an overlay "touch target" to close the sheet without requiring one of the actions to be clicked.

$rmd-sheet-touch-margin: 3.5rem !default;

rmd-sheet-touch-width

Number

The width of a sheet on small touch devices.

$rmd-sheet-touch-width: calc(100vw - #{$rmd-sheet-touch-margin}) !default;

rmd-sheet-static-width

Number

The width to apply to "static" width sheets. This width should not be used on phones but can be used for tablets or desktops.

$rmd-sheet-static-width: 16rem !default;

rmd-sheet-max-height

Number

The max height to set for sheets. It is recommended to leave this as 100% and instead update the $rmd-sheet-touchable-max-height instead.

$rmd-sheet-max-height: 100% !default;
See also

rmd-sheet-touchable-max-height

Number

The max height for a sheet that has a "touchable" area that can be used to close the sheet without selecting one of the actions.

$rmd-sheet-touchable-max-height: calc(
  100% - #{$rmd-sheet-touch-margin}
) !default;
Number

The "recommended" min-height from the material design spec for bottom sheets.

$rmd-sheet-recommended-min-height: 3.5rem !default;
Number

The "recommended" max-height from the material design spec for bottom sheets. I personally think it is better to either set the max-height to calc(100% - 3.5rem) or 100% with a close button.

$rmd-sheet-recommended-max-height: 50% !default;

rmd-sheet-positions

List

A list of positions that are supported by the sheet component.

$rmd-sheet-positions: top right bottom left;

rmd-sheet-enabled-positions

List

The positions that are created by default with the react-md-sheet mixin. When generating styles, this list will be looped through to create the correct position styles.

$rmd-sheet-enabled-positions: $rmd-sheet-positions !default;

rmd-sheet-theme-values

Map

A Map of all the "themeable" parts of the sheet 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-sheet-theme-values: (
  background-color: $rmd-sheet-background-color,
  raised-background-color: $rmd-sheet-raised-background-color,
  touch-width: $rmd-sheet-touch-width,
  static-width: $rmd-sheet-static-width,
  touchable-max-height: $rmd-sheet-touchable-max-height,
  max-height: null,
  height: null,
  width: null,
  transform-offscreen: null,
) !default;

Mixins

rmd-sheet-theme

mixin

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

Parameters
NameDescriptionTypeDefault Value
$property

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

String
$theme-style

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

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 rmd-sheet-theme-values map when null.

Color|String|Numbernull

rmd-sheet-theme-update-var

mixin

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String
$value

The new value to use.

Color|String|Number

rmd-sheet-positions

mixin

Creates the different positioning styles for all the sheet positions.

rmd-sheet

mixin

Creates the styles for a sheet component

react-md-sheet

mixin

Creates all the styles for the sheet package as well as the root css variable theme.

Functions

rmd-sheet-theme

function

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String

rmd-sheet-theme-var

function

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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