Boolean$app-bar-disable-everything: false !default;Set to true to disable all the styles
Boolean$app-bar-disable-fixed: false !default;Set to true to only disable the position: fixed styles
Boolean$app-bar-disable-sticky: false !default;Set to true to only disable the position: sticky styles
Boolean$app-bar-disable-surface-theme: $disable-everything !default;Set to true to only disable the app bar surface color styles.
Boolean$app-bar-disable-dense: false !default;Set to true to only disable the dense height styles
Boolean$app-bar-disable-prominent-theme: false !default;Set to true to only disable the prominent height styles
Boolean$app-bar-disable-prominent-dense: false !default;Set to true to only disable the prominent-dense height styles
Boolean$app-bar-disable-scrollbar-offset: false !default;Set to true to disable the styles that offset the app bar based on a visible scrollbar.
Boolean$app-bar-disable-static-scrollbar-offset: false !default;Set to true to only disable the styles for offsetting the app bar for a visible toolbar while position: static.
Boolean$app-bar-disable-title: false !default;Set to true to only disable the app bar title styles.
Number$app-bar-gap: spacing.get-var(xs) !default;Sets the gap css property to apply spacing between each item.
Number$app-bar-height: 3.5rem !default;The default height for an app bar.
Number$app-bar-dense-height: 3rem !default;The default dense height for an app bar.
Number$app-bar-prominent-height: $height * 2 !default;The default prominent height for an app bar.
Number$app-bar-prominent-dense-height: $dense-height * 2 !default;The default dense prominent height for an app bar.
Number$app-bar-fixed-z-index: 10 !default;The z-index to use when the app bar is position: fixed or
`position: sticky.
Number$app-bar-fixed-elevation: 2 !default;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.
List$app-bar-fixed-positions: top bottom !default;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.
@use "@react-md/core" with (
$app-bar-fixed-positions: (
bottom,
)
);Color $app-bar-light-theme-surface-background-color: theme.$light-theme-surface-color !default;The background color to use when theme="surface" and using the global light theme
Color $app-bar-light-theme-surface-color: a11y.contrast-color(
$light-theme-surface-background-color
) !default;The text color to use when theme="surface" and using the global light theme
Color $app-bar-dark-theme-surface-color: colors.$white !default;The text color to use when theme="surface" and using the global dark theme
Color $app-bar-surface-background-color: theme.get-default-color(
$light-theme-surface-background-color,
$dark-theme-surface-background-color
) !default;The default theme="surface" background color. You normally don't want to change this value.
Color $app-bar-surface-color: theme.get-default-color(
$light-theme-surface-color,
$dark-theme-surface-color
) !default;The default theme="surface" text color. You normally don't want to change this value.
String|Number$app-bar-horizontal-padding: spacing.get-var(xs) !default;Horizontal padding for the app bar
String|Number$app-bar-vertical-padding: spacing.get-var(none) !default;Vertical padding for the app bar
String|Number$app-bar-keyline: 1rem !default;This value is used to align the first element (normally a button) nicely with other elements on the page.
String|Number$app-bar-title-keyline: 4.5rem !default;This value is used to align the AppBarTitle with other elements on the page
(like ListItem).
String|Number$app-bar-nav-keyline: calc($title-keyline - $horizontal-padding - $gap - 3rem) !default;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
List$app-bar-variables: (height, surface-background-color, surface-color);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 use-light-theme { … }Applies the light the variables based on feature flags
mixin@mixin use-dark-theme { … }Applies the dark the variables based on feature flags
mixin@mixin dense-variables { … }Applies the dense height variables
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 |