Boolean$sheet-disable-everything: false !default;Set to true to disable all the styles.
Boolean$sheet-disable-position-left: false !default;Set to true to disable position="left" for the Sheet.
Boolean$sheet-disable-position-right: false !default;Set to true to disable position="right" for the Sheet.
Boolean$sheet-disable-position-bottom: false !default;Set to true to disable position="bottom" for the Sheet.
Boolean$sheet-disable-position-top: false !default;Set to true to disable position="top" for the Sheet.
Number$sheet-elevation: 2 !default;This should be a number between 0-24 representing the box-shadow elevation of the Sheet while rendered without an Overlay.
Number$sheet-raised-elevation: 16 !default;This should be a number between 0-24 representing the box-shadow elevation of the Sheet while rendered with an Overlay.
Number$sheet-enter-duration: transition.$enter-duration !default;The default enter transition duration.
String$sheet-enter-timing-function: transition.$deceleration-timing-function !default;The default enter transition timing function.
Number$sheet-leave-duration: transition.$leave-duration !default;The default leave transition duration.
String$sheet-leave-timing-function: transition.$acceleration-timing-function !default;The default leave transition timing function.
Number$sheet-z-index: 5 !default;The default z-index while rendered without an Overlay.
Number$sheet-raised-z-index: utils.$temporary-element-z-index !default;The default z-index while rendered with an Overlay.
Number$sheet-static-width: 16rem !default;The default width for a Sheet.
Number$sheet-touch-margin: calc(spacing.get-var(md) * 3.5) !default;The amount of margin between the Sheet and the viewport edge which is used to create the $touch-width and $touch-max-height
Number$sheet-touch-width: calc(100vw - #{$touch-margin}) !default;The default width for a Sheet on touch/phone devices.
Number$sheet-max-height: 100% !default;The default max-height for a Sheet.
Number$sheet-touch-max-height: calc(100% - #{$touch-margin}) !default;The default max-height for a Sheet that has position="top" or
position="bottom".
Number$sheet-recommended-min-height: 3.5rem !default;The default min-height for a Sheet when verticalSize="recommended".
Number$sheet-recommended-max-height: 50% !default;The default max-height for a Sheet when verticalSize="recommended".
List$sheet-variables: (
height,
width,
max-height,
touch-width,
touch-max-height,
static-width,
transform-offscreen,
z-index
);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin styles($disable-layer: false) { … }Generates all the styles based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set this to | Boolean | false |
function@function get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |