Layout Sass API

Variables

layout-disable-everything

$layout-disable-everything: false !default;

layout-disable-expandable

$layout-disable-expandable: false !default;

Used By

• @mixin layout-styles

layout-disable-resizable

$layout-disable-resizable: $disable-expandable !default;

Used By

• @mixin layout-styles

layout-disable-full-height-navigation

$layout-disable-full-height-navigation: false !default;

Used By

• @mixin layout-styles

layout-main-focus-z-index

$layout-main-focus-z-index: 999 !default;

Used By

• @mixin layout-styles

layout-header-height

$layout-header-height: app-bar.$height !default;

Used By

• @mixin layout-variables

layout-navigation-z-index

$layout-navigation-z-index: app-bar.$fixed-z-index !default;

Used By

• @mixin layout-styles

layout-navigation-static-width

$layout-navigation-static-width: sheet.$static-width !default;

Used By

• @mixin layout-variables

layout-navigation-container-name

$layout-navigation-container-name: nav !default;

See Also

• https://developer.mozilla.org/en-US/docs/Web/CSS/@container

Used By

• @mixin layout-styles

layout-navigation-breakpoint

$layout-navigation-breakpoint: tablet !default;

Used By

• @mixin layout-styles

layout-enter-duration

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

layout-enter-timing-function

$layout-enter-timing-function: sheet.$enter-timing-function !default;

layout-leave-duration

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

layout-leave-timing-function

$layout-leave-timing-function: sheet.$leave-timing-function !default;

layout-variables

$layout-variables: (size, header-height);

Mixins

layout-set-var

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

Requires

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

layout-use-var

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

Requires

• @function app-bar-get-var

layout-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $layout-navigation-static-width
• $layout-header-height

layout-styles

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

Requires

• @mixin app-bar-use-var
• @function app-bar-get-var
• @function scrollbar-size
• $app-bar-disable-everything
• $dialog-z-index
• $layout-main-focus-z-index
• $divider-inset
• $linear-duration
• $linear-timing-function
• $layout-navigation-container-name
• $layout-navigation-z-index
• $layout-navigation-breakpoint
• $layout-disable-full-height-navigation
• $layout-disable-expandable
• $enter-duration
• $dialog-enter-timing-function
• $leave-duration
• $dialog-leave-timing-function
• $layout-disable-resizable

Functions

layout-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 this to true if an expandable layout will not be used and instead using a temporary or full height navigation only.

Set to true to disable resizable layout styles with the WindowSplitter.

Set to true to disable the full height navigation styles.

The z-index for the box-shadow applied Main component while focused.

The default LayoutAppBar height.

The default LayoutNav z-index.

The width for the LayoutNav when it is rendered inline with other content on the page.

Set this to null if the LayoutNav should not gain the container property.

The breakpoint for switching between a temporary navigation to a persistent/toggleable layout. This should match the temporaryUntil option for the useExpandableLayout/useResizableLayout hooks.

This should be one of:

• phone
• tablet
• desktop
• large-desktop
• any media query

The margin animation duration for the Main element while the expandable navigation is appearing. This should match the sheet.$enter-duration so the two elements animate together.

The margin animation timing function for the Main element while the expandable navigation is appearing. This should match the sheet.$enter-timing-function so the two elements animate together.

The margin animation duration for the Main element while the expandable navigation is disappearing. This should match the sheet.$leave-duration so the two elements animate together.

The margin animation timing function for the Main element while the expandable navigation is disappearing. This should match the sheet.$leave-timing-function so the two elements animate together.

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