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