The z-index to use for the fixed app bar. Ideally this value should be less than any of the "temporary" materials like overlays, sheets, and menus.
$rmd-app-bar-z-index: 10 !default;The elevation to use for "fixed" app bars. This should be a number between 0 and 16.
$rmd-app-bar-fixed-elevation: 2 !default;The height for the app bar.
$rmd-app-bar-height: 3.5rem !default;The dense height for the app bar.
$rmd-app-bar-dense-height: 3rem !default;The prominent/extended height for the app bar.
$rmd-app-bar-prominent-height: $rmd-app-bar-height * 2 !default;The prominent/extended height for the app bar when the dense prop is also enabled.
$rmd-app-bar-prominent-dense-height: $rmd-app-bar-dense-height * 2 !default;The default keyline to use for either the AppBarNav or AppBarTitle. This makes the icon in the AppBarNav or the first letter in the AppBarTitle appear at this distance.
$rmd-app-bar-keyline: 1rem !default;The amount of margin to apply to the AppBarNav based on the $rmd-app-bar-keyline so that the icon will be positioned at the keyline
(ignoring the button padding).
$rmd-app-bar-nav-margin: $rmd-app-bar-keyline -
(($rmd-button-icon-size - $rmd-icon-size) * 0.5);The keyline for the AppBarTitle to use when used with the AppBarNav or the offset prop is enabled.
$rmd-app-bar-title-keyline: 4.5rem !default;The amount of margin to apply to the title when used with the AppBarNav component.
$rmd-app-bar-title-nav-margin: $rmd-app-bar-title-keyline -
$rmd-app-bar-nav-margin - $rmd-button-icon-size;The amount of margin to apply to the first and last element within the app bar (per row basis). This will automatically be applied if using the AppBarNav component and will be applied to the AppBarAction component that enables the last prop.
$rmd-app-bar-lr-margin: 0.25rem !default;The background color for the app bar when the theme prop is set to "primary".
$rmd-app-bar-primary-background-color: rmd-theme-var(primary) !default;The text color for the app bar when the theme prop is set to "primary".
$rmd-app-bar-primary-color: rmd-theme-var(on-primary) !default;The background color for the app bar when the theme prop is set to "secondary".
$rmd-app-bar-secondary-background-color: rmd-theme-var(secondary) !default;The text color for the app bar when the theme prop is set to "secondary".
$rmd-app-bar-secondary-color: rmd-theme-var(on-secondary) !default;The background color for the app bar when the theme prop is set to "default" and the app is currently using a light theme.
$rmd-app-bar-default-light-theme-background-color: $rmd-grey-100 !default;The text color for the app bar when the theme prop is set to "default" and the app is currently using a light theme.
$rmd-app-bar-default-light-theme-color: if(
rmd-theme-tone($rmd-app-bar-default-light-theme-background-color) == light,
$rmd-black-base,
$rmd-white-base
) !default;The background color for the app bar when the theme prop is set to "default" and the app is currently using a dark theme.
$rmd-app-bar-default-dark-theme-background-color: $rmd-grey-900 !default;The text color for the app bar when the theme prop is set to "default" and the app is currently using a dark theme.
$rmd-app-bar-default-dark-theme-color: if(
rmd-theme-tone($rmd-app-bar-default-dark-theme-background-color) == light,
$rmd-black-base,
$rmd-white-base
) !default;The background color to use for the app bar that is using the default theme. This value is derived based on the current background color of the app for light or dark themed apps.
$rmd-app-bar-default-background-color: if(
rmd-theme-tone($rmd-theme-background) == light,
$rmd-app-bar-default-light-theme-background-color,
$rmd-app-bar-default-dark-theme-background-color
) !default;The text color to use for the app bar that is using the default theme.
This value is derived based on the current background color of the app for light or dark themed apps.
$rmd-app-bar-default-color: if(
rmd-theme-tone($rmd-app-bar-default-background-color) == light,
$rmd-app-bar-default-light-theme-color,
$rmd-app-bar-default-dark-theme-color
) !default;A Map of all the "themeable" parts of the app-bar package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.
$rmd-app-bar-theme-values: (
background-color: transparent,
color: rmd-theme-var(text-primary-on-background),
primary: $rmd-app-bar-primary-background-color,
on-primary: $rmd-app-bar-primary-color,
secondary: $rmd-app-bar-secondary-background-color,
on-secondary: $rmd-app-bar-secondary-color,
default-background-color: $rmd-app-bar-default-background-color,
default-light-background-color:
$rmd-app-bar-default-light-theme-background-color,
default-dark-background-color:
$rmd-app-bar-default-dark-theme-background-color,
default-color: $rmd-app-bar-default-color,
default-light-color: $rmd-app-bar-default-light-theme-color,
default-dark-color: $rmd-app-bar-default-dark-theme-color,
height: $rmd-app-bar-height,
dense-height: $rmd-app-bar-dense-height,
prominent-height: $rmd-app-bar-prominent-height,
prominent-dense-height: $rmd-app-bar-prominent-dense-height,
) !default;Creates the styles for one of the app-bar's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | — |
$fallback | A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the | Color|String|Number | null |
Updates one of the app-bar's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The app-bar theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates the styles for the AppBar component when it is fixed to the top or bottom of the page. This will create four classes:
&--fixed&--fixed-elevation&--top&--right&--bottom&--leftTo get the correct styles and positions for a fixed app bar, you will need to apply the --fixed class as well as the --top or --bottom to fix it to the top or bottom of the page. If the app bar should gain elevation, you should also apply the --fixed-elevation class. See the examples below for the different use cases.
.app-bar {
@include rmd-app-bar-fixed;
}
<div class="app-bar app-bar--fixed app-bar--top">
An app-bar fixed to the top of the page.
</div>
<div class="app-bar app-bar--fixed app-bar--fixed-elevation app-bar--bottom">
An app-bar fixed to the bottom of the page with elevation
</div>
Creates the styles for different app bar themes. This will create 4 classes:
--primary--secondary--defaultThe primary and secondary suffixes will use the theme variables for generating the correct theme background color and text color on top of the theme color. The default suffix is used to create a third theme type with any colors that are provided.
$rmd-theme-primary: $rmd-blue-500;
$rmd-theme-secondary: $rmd-pink-a-200;
.app-bar {
@include rmd-app-bar-themes;
}
<div class="app-bar app-bar--primary">
An app bar with the primary theme color as the background color.
</div>
<div class="app-bar app-bar--secondary">
An app bar with the secondary theme color as the background color.
</div>
<div class="app-bar app-bar--default">
An app bar with the default theme applied.
</div>
Creates the styles for the AppBarNav component. The base classes for buttons next to be applied as well.
.app-bar__nav {
// add the next two lines if not applying the base .rmd-button classes
// @include rmd-button-base;
// @include rmd-button-text;
@include rmd-app-bar-nav;
}
<div class="app-bar app-bar--primary">
<button type="button" className="app-bar__nav">Nav Button</button>
</div>
Creates the styles for the AppBarTitle component.
.rmd-app-bar__title {
@include rmd-app-bar-title;
}
Creates the styles for an app bar action that is either the first action which applies margin-left to right align, or the default margin between each action.
| Name | Description | Type | Default Value |
|---|---|---|---|
$first | Boolean if the styles for being the first action should be created. | Boolean | — |
Creates the styles for the AppBarAction component.
.rmd-app-bar__action {
@include rmd-app-bar-action;
}
This mixin is used to apply an offset to an element so that it can be placed with a fixed App Bar. This is really used to help layout your app so that the initial content isn't covered by the app bar.
@example scss - Example Usage .offset-by-height { @include rmd-app-bar-offset; }
.offset-by-dense-height { @include rmd-app-bar-ofset($height-type: dense-height); }
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to apply the offset to. This should be one of: | String | padding-top |
$height-type | The app bar height type to use. This should be one of: | String | height |
Creates all the app bar offset classnames to use. This ties in with the provided constants in javascript:
This mixin allows you to quickly apply the dense theme for app bars. This should normally be used within a media query.
Creates all the styles for the app bar package.
This function is used to quickly get one of the app-bar's theme values. This is really just for the rmd-app-bar-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the app-bar's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the app-bar's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-app-bar-theme-values
This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.
Stringone of the app-bar's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |