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;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;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;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;The elevation to use for temporary sheets that usually display an overlay as well.
$rmd-sheet-raised-elevation: 16 !default;Since v2.7.0
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;Since v2.7.0
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;Since v2.7.0
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;Since v2.7.0
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;Since v2.7.0
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;Since v2.7.0
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;Since v2.7.0
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;Since v2.7.0
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;The duration for the enter transition.
$rmd-sheet-enter-duration: $rmd-transition-enter-duration !default;The duration for the leave transition.
$rmd-sheet-leave-duration: $rmd-transition-leave-duration !default;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;The width of a sheet on small touch devices.
$rmd-sheet-touch-width: calc(100vw - #{$rmd-sheet-touch-margin}) !default;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;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;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;The "recommended" min-height from the material design spec for bottom sheets.
$rmd-sheet-recommended-min-height: 3.5rem !default;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;A list of positions that are supported by the sheet component.
$rmd-sheet-positions: top right bottom left;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;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;Creates the styles for one of the sheet's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | 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 | Color|String|Number | null |
Updates one of the sheet's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The sheet theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates the different positioning styles for all the sheet positions.
Creates the styles for a sheet component
Creates all the styles for the sheet package as well as the root css variable theme.
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.
Color|String|Numberone of the sheet's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
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.
Stringone of the sheet's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |