Boolean$app-bar-disable-everything: false !default;Boolean$app-bar-disable-fixed: false !default;Boolean$app-bar-disable-sticky: false !default;Boolean$app-bar-disable-surface-theme: $disable-everything !default;Boolean$app-bar-disable-dense: false !default;Boolean$app-bar-disable-prominent-theme: false !default;Boolean$app-bar-disable-prominent-dense: false !default;Boolean$app-bar-disable-scrollbar-offset: false !default;Boolean$app-bar-disable-static-scrollbar-offset: false !default;Boolean$app-bar-disable-title: false !default;Number$app-bar-gap: spacing.get-var(xs) !default;Number$app-bar-height: 3.5rem !default;Number$app-bar-dense-height: 3rem !default;Number$app-bar-prominent-height: $height * 2 !default;Number$app-bar-prominent-dense-height: $dense-height * 2 !default;Number$app-bar-fixed-z-index: 10 !default;Number$app-bar-fixed-elevation: 2 !default;List$app-bar-fixed-positions: top bottom !default;@use "@react-md/core" with (
$app-bar-fixed-positions: (
bottom,
)
);Color $app-bar-light-theme-surface-background-color: theme.$light-theme-surface-color !default;Color $app-bar-light-theme-surface-color: a11y.contrast-color(
$light-theme-surface-background-color
) !default;Color $app-bar-dark-theme-surface-background-color: if(
theme.$disable-dark-elevation,
theme.$dark-theme-surface-color,
map.get(theme.$dark-elevation-colors, $fixed-elevation)
) !default;Color $app-bar-dark-theme-surface-color: colors.$white !default;Color $app-bar-surface-background-color: theme.get-default-color(
$light-theme-surface-background-color,
$dark-theme-surface-background-color
) !default;Color $app-bar-surface-color: theme.get-default-color(
$light-theme-surface-color,
$dark-theme-surface-color
) !default;String|Number$app-bar-horizontal-padding: spacing.get-var(xs) !default;String|Number$app-bar-vertical-padding: spacing.get-var(none) !default;String|Number$app-bar-keyline: 1rem !default;String|Number$app-bar-title-keyline: 4.5rem !default;String|Number$app-bar-nav-keyline: calc($title-keyline - $horizontal-padding - $gap - 3rem) !default;List$app-bar-variables: (height, surface-background-color, surface-color);mixin@mixin set-var($name, $value) { … }mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin use-light-theme { … }mixin@mixin use-dark-theme { … }mixin@mixin dense-variables { … }mixin@mixin variables { … }mixin@mixin styles($disable-layer: false) { … }function@function get-var($name, $fallback: null) { … }StringSet to true to disable all the styles
Set to true to only disable the position: fixed styles
Set to true to only disable the position: sticky styles
Set to true to only disable the app bar surface color styles.
Set to true to only disable the dense height styles
Set to true to only disable the prominent height styles
Set to true to only disable the prominent-dense height styles
Set to true to disable the styles that offset the app bar based on a visible scrollbar.
Set to true to only disable the styles for offsetting the app bar for a visible toolbar while position: static.
Set to true to only disable the app bar title styles.
Sets the gap css property to apply spacing between each item.
The default height for an app bar.
The default dense height for an app bar.
The default prominent height for an app bar.
The default dense prominent height for an app bar.
The z-index to use when the app bar is position: fixed or
`position: sticky.
This should be a number from 0 to 24 representing the material design elevation. It is used to generate the correct surface styles with box shadow.
Allows the app bar to be fixed to the top and bottom of the viewport. If you don't need support for one, remove it from the list.
The background color to use when theme="surface" and using the global light theme
The text color to use when theme="surface" and using the global light theme
The background color to use when theme="surface" and using the global dark theme
The text color to use when theme="surface" and using the global dark theme
The default theme="surface" background color. You normally don't want to change this value.
The default theme="surface" text color. You normally don't want to change this value.
Horizontal padding for the app bar
Vertical padding for the app bar
This value is used to align the first element (normally a button) nicely with other elements on the page.
This value is used to align the AppBarTitle with other elements on the page
(like ListItem).
This is used to align a nav button with an AppBarTitle nicely in the
AppBar.
3rem is the icon-button's default size. can't use the variables since it's based on font-size now and em
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
Applies the light the variables based on feature flags
Applies the dark the variables based on feature flags
Applies the dense height variables
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