Sheet Sass API

Variables

sheet-disable-everything

$sheet-disable-everything: false !default;

sheet-disable-position-left

$sheet-disable-position-left: false !default;

Used By

• @mixin sheet-styles

sheet-disable-position-right

$sheet-disable-position-right: false !default;

Used By

• @mixin sheet-styles

sheet-disable-position-bottom

$sheet-disable-position-bottom: false !default;

Used By

• @mixin sheet-styles

sheet-disable-position-top

$sheet-disable-position-top: false !default;

Used By

• @mixin sheet-styles

sheet-elevation

$sheet-elevation: 2 !default;

sheet-raised-elevation

$sheet-raised-elevation: 16 !default;

Used By

• @mixin sheet-styles

sheet-enter-duration

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

sheet-enter-timing-function

$sheet-enter-timing-function: transition.$deceleration-timing-function !default;

sheet-leave-duration

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

sheet-leave-timing-function

$sheet-leave-timing-function: transition.$acceleration-timing-function !default;

sheet-z-index

$sheet-z-index: 5 !default;

sheet-raised-z-index

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

Used By

• @mixin sheet-styles

sheet-static-width

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

Used By

• @mixin sheet-variables

sheet-touch-margin

$sheet-touch-margin: calc(spacing.get-var(md) * 3.5) !default;

See Also

• $sheet-touch-width
• $sheet-touch-max-height

sheet-touch-width

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

Used By

• @mixin sheet-variables

sheet-max-height

$sheet-max-height: 100% !default;

Used By

• @mixin sheet-styles

sheet-touch-max-height

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

Used By

• @mixin sheet-variables

sheet-recommended-min-height

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

Used By

• @mixin sheet-styles

sheet-recommended-max-height

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

Used By

• @mixin sheet-styles

sheet-variables

$sheet-variables: (
  height,
  width,
  max-height,
  touch-width,
  touch-max-height,
  static-width,
  transform-offscreen,
  z-index
);

Mixins

sheet-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

sheet-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

sheet-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $sheet-touch-width
• $sheet-touch-max-height
• $sheet-static-width
• $dialog-z-index

sheet-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @mixin box-shadow
• @function app-bar-get-var
• $app-bar-disable-everything
• $card-elevation
• $sheet-disable-position-left
• $sheet-disable-position-right
• $sheet-disable-position-bottom
• $sheet-disable-position-top
• $sheet-raised-z-index
• $sheet-raised-elevation
• $sheet-max-height
• $sheet-recommended-max-height
• $sheet-recommended-min-height
• $enter-duration
• $dialog-enter-timing-function
• $leave-duration
• $dialog-leave-timing-function

Functions

sheet-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

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