Boolean$layout-disable-everything: false !default;Set to true to disable all the styles
Boolean$layout-disable-expandable: false !default;Set this to true if an expandable layout will not be used and instead using a temporary or full height navigation only.
Boolean$layout-disable-resizable: $disable-expandable !default;Set to true to disable resizable layout styles with the WindowSplitter.
Boolean$layout-disable-full-height-navigation: false !default;Set to true to disable the full height navigation styles.
Number$layout-main-focus-z-index: 999 !default;The z-index for the box-shadow applied Main component while focused.
Number$layout-header-height: app-bar.$height !default;The default LayoutAppBar height.
Number$layout-navigation-z-index: app-bar.$fixed-z-index !default;The default LayoutNav z-index.
Number$layout-navigation-static-width: sheet.$static-width !default;The width for the LayoutNav when it is rendered inline with other content on the page.
String$layout-navigation-container-name: nav !default;Set this to null if the LayoutNav should not gain the container
property.
String$layout-navigation-breakpoint: tablet !default;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:
phonetabletdesktoplarge-desktopNumber$layout-enter-duration: sheet.$enter-duration !default;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.
String$layout-enter-timing-function: sheet.$enter-timing-function !default;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.
Number$layout-leave-duration: sheet.$leave-duration !default;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.
String$layout-leave-timing-function: sheet.$leave-timing-function !default;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.
List$layout-variables: (size, header-height);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 |