Variables

rmd-app-bar-z-index

Number

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;

Used By

rmd-app-bar-fixed-elevation

Number

The elevation to use for "fixed" app bars. This should be a number between 0 and 16.

$rmd-app-bar-fixed-elevation: 2 !default;

Used By

rmd-app-bar-height

Number

The height for the app bar.

$rmd-app-bar-height: 3.5rem !default;

rmd-app-bar-dense-height

Number

The dense height for the app bar.

$rmd-app-bar-dense-height: 3rem !default;

rmd-app-bar-prominent-height

Number

The prominent/extended height for the app bar.

Default compiled value

$rmd-app-bar-prominent-height: $rmd-app-bar-height * 2 !default;

rmd-app-bar-prominent-dense-height

Number

The prominent/extended height for the app bar when the dense prop is also enabled.

Default compiled value

$rmd-app-bar-prominent-dense-height: $rmd-app-bar-dense-height * 2 !default;

rmd-app-bar-keyline

Number

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;

Used By

rmd-app-bar-nav-margin

Number

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).

Default compiled value

$rmd-app-bar-nav-margin: $rmd-app-bar-keyline -
  (($rmd-button-icon-size - $rmd-icon-size) * 0.5);

Requires

rmd-app-bar-title-keyline

Number

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;

Used By

rmd-app-bar-title-nav-margin

Number

The amount of margin to apply to the title when used with the AppBarNav component.

Default compiled value

$rmd-app-bar-title-nav-margin: $rmd-app-bar-title-keyline -
  $rmd-app-bar-nav-margin - $rmd-button-icon-size;

Used By

Requires

rmd-app-bar-lr-margin

Number

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;

Used By

rmd-app-bar-primary-background-color

Color

The background color for the app bar when the theme prop is set to "primary".

Default compiled value

$rmd-app-bar-primary-background-color: rmd-theme-var(primary) !default;

Requires

rmd-app-bar-primary-color

Color

The text color for the app bar when the theme prop is set to "primary".

Default compiled value

$rmd-app-bar-primary-color: rmd-theme-var(on-primary) !default;

Requires

rmd-app-bar-secondary-background-color

Color

The background color for the app bar when the theme prop is set to "secondary".

Default compiled value

$rmd-app-bar-secondary-background-color: rmd-theme-var(secondary) !default;

Requires

rmd-app-bar-secondary-color

Color

The text color for the app bar when the theme prop is set to "secondary".

Default compiled value

$rmd-app-bar-secondary-color: rmd-theme-var(on-secondary) !default;

Requires

rmd-app-bar-default-light-theme-background-color

Color

The background color for the app bar when the theme prop is set to "default" and the app is currently using a light theme.

Default compiled value

$rmd-app-bar-default-light-theme-background-color: $rmd-grey-100 !default;

Used By

Requires

rmd-app-bar-default-light-theme-color

Color

The text color for the app bar when the theme prop is set to "default" and the app is currently using a light theme.

Default compiled value

$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;

Used By

Requires

rmd-app-bar-default-dark-theme-background-color

Color

The background color for the app bar when the theme prop is set to "default" and the app is currently using a dark theme.

Default compiled value

$rmd-app-bar-default-dark-theme-background-color: $rmd-grey-900 !default;

Used By

Requires

rmd-app-bar-default-dark-theme-color

Color

The text color for the app bar when the theme prop is set to "default" and the app is currently using a dark theme.

Default compiled value

$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;

Used By

Requires

rmd-app-bar-default-background-color

Color

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.

Default compiled value

$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;

Requires

rmd-app-bar-default-color

Color

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.

Default compiled value

$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;

Requires

rmd-app-bar-theme-values

Map

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.

Default compiled value

$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;

Used By

Mixins

rmd-app-bar-theme

mixin

Creates the styles for one of the app-bar's theme values. This is mostly going to be an internal helper mixin util.

Parameters
Name	Description	Type	Default Value
`$property`	The property to set a `rmd-app-bar-theme-values` value to.	`String`	—
`$theme-style`	One of the keys of `rmd-app-bar-theme-values` to extract a value from.	`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 `rmd-app-bar-theme-values` map when `null`.	`Color\|String\|Number`	`null`

Used By

Requires

rmd-app-bar-theme-update-var

mixin

Updates one of the app-bar's theme variables with the new value for the section of your app.

Parameters
Name	Description	Type	Default Value
`$theme-style`	The app-bar theme style type to update. This should be one of the `$rmd-app-bar-theme-values` keys.	`String`	—
`$value`	The new value to use.	`Color\|String\|Number`	—

Used By

Requires

rmd-app-bar-fixed

mixin

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
&--left

To 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.

Examples

Simple Example

Compiled output

@use 'react-md' as *;

.app-bar {
  @include rmd-app-bar-fixed;
}

Simple Example

@use "react-md" as *;

<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>

Used By

Requires

rmd-app-bar-themes

mixin

Creates the styles for different app bar themes. This will create 4 classes:

--primary
--secondary
--default

The 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.

Examples

Simple Example

Compiled output

@use 'react-md' as *;

$rmd-theme-primary: $rmd-blue-500;
$rmd-theme-secondary: $rmd-pink-a-200;

.app-bar {
  @include rmd-app-bar-themes;
}

Simple Example

@use "react-md" as *;

<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>

Used By

Requires

rmd-app-bar-nav

mixin

Creates the styles for the AppBarNav component. The base classes for buttons next to be applied as well.

Examples

Simple Example

Compiled output

@use 'react-md' as *;

.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;
}

Simple Example

@use "react-md" as *;

<div class="app-bar app-bar--primary">
  <button type="button" className="app-bar__nav">Nav Button</button>
</div>

Used By

Requires

rmd-app-bar-title

mixin

Creates the styles for the AppBarTitle component.

Examples

Example Usage SCSS

Compiled output

@use 'react-md' as *;

.rmd-app-bar__title {
  @include rmd-app-bar-title;
}

Used By

Requires

rmd-app-bar-action-position

mixin

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.

Parameters
Name	Description	Type	Default Value
`$first`	Boolean if the styles for being the first action should be created.	`Boolean`	—

Used By

Requires

rmd-app-bar-action

mixin

Creates the styles for the AppBarAction component.

Examples

Example Usage SCSS

Compiled output

@use 'react-md' as *;

.rmd-app-bar__action {
  @include rmd-app-bar-action;
}

Used By

Requires

rmd-app-bar-offset

mixin

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-offset($height-type: dense-height); }

Parameters
Name	Description	Type	Default Value
`$property`	The property to apply the offset to. This should be one of: `padding-top`, `padding-bottom`, `margin-top`, `margin-bottom`, `top`, `bottom`.	`String`	`padding-top`
`$height-type`	The app bar height type to use. This should be one of: `height`, `dense-height`, `prominent-height`, `prominent-dense-height`	`String`	`height`

Used By

Requires

rmd-app-bar-offsets

mixin

Creates all the app bar offset class names to use. This ties in with the provided constants in javascript:

APP_BAR_OFFSET_CLASSNAME
APP_BAR_OFFSET_DENSE_CLASSNAME
APP_BAR_OFFSET_PROMINENT_CLASSNAME
APP_BAR_OFFSET_PROMINENT_DENSE_CLASSNAME

Used By

Requires

rmd-app-bar-dense-theme

mixin

This mixin allows you to quickly apply the dense theme for app bars. This should normally be used within a media query.

Used By

Requires

react-md-app-bar

mixin

Creates all the styles for the app bar package.

Used By

Requires

Functions

rmd-app-bar-theme

function

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.

Returns — `Color|String|Number`

one of the app-bar's theme values.

Parameters
Name	Description	Type	Default Value
`$theme-style`	One of the `$rmd-app-bar-theme-values` map keys to get a value for.	`String`	—

Requires

rmd-app-bar-theme-var

function

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.

Returns — `String`

one of the app-bar's theme values as a css variable.

Parameters
Name	Description	Type	Default Value
`$theme-style`	One of the `$rmd-app-bar-theme-values` map keys to set a value for.	`String`	—
`$fallback`	An optional fallback color to apply. This is set to `null` by default and not used since the link's theme variables should always exist.	`Color\|String\|Number`	`null`

#Variables

#rmd-app-bar-z-index

Used By

#rmd-app-bar-fixed-elevation

Used By

#rmd-app-bar-height

#rmd-app-bar-dense-height

#rmd-app-bar-prominent-height

#rmd-app-bar-prominent-dense-height

#rmd-app-bar-keyline

Used By

#rmd-app-bar-nav-margin

Requires

#rmd-app-bar-title-keyline

Used By

#rmd-app-bar-title-nav-margin

Used By

Requires

#rmd-app-bar-lr-margin

Used By

#rmd-app-bar-primary-background-color

Requires

#rmd-app-bar-primary-color

Requires

#rmd-app-bar-secondary-background-color

Requires

#rmd-app-bar-secondary-color

Requires

#rmd-app-bar-default-light-theme-background-color

Used By

Requires

#rmd-app-bar-default-light-theme-color

Used By

Requires

#rmd-app-bar-default-dark-theme-background-color

Used By

Requires

#rmd-app-bar-default-dark-theme-color

Used By

Requires

#rmd-app-bar-default-background-color

Requires

#rmd-app-bar-default-color

Requires

#rmd-app-bar-theme-values

Used By

#Mixins

#rmd-app-bar-theme

Used By

Requires

#rmd-app-bar-theme-update-var

Used By

Requires

#rmd-app-bar-fixed

Examples

#Simple Example

#Simple Example

Used By

Requires

#rmd-app-bar-themes

Examples

#Simple Example

#Simple Example

Used By

Requires

#rmd-app-bar-nav

Examples

#Simple Example

#Simple Example

Used By

Requires

#rmd-app-bar-title

Examples

#Example Usage SCSS

Used By

Requires

#rmd-app-bar-action-position

Used By

Requires

#rmd-app-bar-action

Variables

rmd-app-bar-z-index

rmd-app-bar-fixed-elevation

rmd-app-bar-height

rmd-app-bar-dense-height

rmd-app-bar-prominent-height

rmd-app-bar-prominent-dense-height

rmd-app-bar-keyline

rmd-app-bar-nav-margin

rmd-app-bar-title-keyline

rmd-app-bar-title-nav-margin

rmd-app-bar-lr-margin

rmd-app-bar-primary-background-color

rmd-app-bar-primary-color

rmd-app-bar-secondary-background-color

rmd-app-bar-secondary-color

rmd-app-bar-default-light-theme-background-color

rmd-app-bar-default-light-theme-color

rmd-app-bar-default-dark-theme-background-color

rmd-app-bar-default-dark-theme-color

rmd-app-bar-default-background-color

rmd-app-bar-default-color

rmd-app-bar-theme-values

Mixins

rmd-app-bar-theme

rmd-app-bar-theme-update-var

rmd-app-bar-fixed

Simple Example

Simple Example

rmd-app-bar-themes

Simple Example

Simple Example

rmd-app-bar-nav

Simple Example

Simple Example

rmd-app-bar-title

Example Usage SCSS

rmd-app-bar-action-position

rmd-app-bar-action

Example Usage SCSS

rmd-app-bar-offset

rmd-app-bar-offsets

rmd-app-bar-dense-theme

react-md-app-bar

Functions

rmd-app-bar-theme

Returns — `Color|String|Number`

rmd-app-bar-theme-var

Returns — `String`