react-md
react-md - App Bar - SassDoc

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.

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

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

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

$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".

$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".

$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".

$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".

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

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

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

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

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

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

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

$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
NameDescriptionTypeDefault 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|Numbernull
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
NameDescriptionTypeDefault 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
@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
@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
@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
@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
NameDescriptionTypeDefault 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
@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
NameDescriptionTypeDefault Value
$property

The property to apply the offset to. This should be one of: padding-top, padding-bottom, margin-top, margin-bottom, top, bottom.

Stringpadding-top
$height-type

The app bar height type to use. This should be one of: height, dense-height, prominent-height, prominent-dense-height

Stringheight
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
NameDescriptionTypeDefault 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
NameDescriptionTypeDefault 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|Numbernull
Used By
Requires