Boolean
$layout-disable-everything: false !default;
Boolean
$layout-disable-expandable: false !default;
Boolean
$layout-disable-resizable: $disable-expandable !default;
Boolean
$layout-disable-full-height-navigation: false !default;
Number
$layout-main-focus-z-index: 999 !default;
Number
$layout-header-height: app-bar.$height !default;
Number
$layout-navigation-z-index: app-bar.$fixed-z-index !default;
Number
$layout-navigation-static-width: sheet.$static-width !default;
String
$layout-navigation-container-name: nav !default;
String
$layout-navigation-breakpoint: tablet !default;
Number
$layout-enter-duration: sheet.$enter-duration !default;
String
$layout-enter-timing-function: sheet.$enter-timing-function !default;
Number
$layout-leave-duration: sheet.$leave-duration !default;
String
$layout-leave-timing-function: sheet.$leave-timing-function !default;
List
$layout-variables: (size, header-height);
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 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
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