Toolbars

Variables

md-toolbar-include-themed
$md-toolbar-include-themed: true !default;
Sass (Scss)

Description

Boolean if the themed toolbars should be included. A themed toolbar just has a different background color based on the $md-light-theme.

Type

Boolean
md-toolbar-include-prominent
$md-toolbar-include-prominent: true !default;
Sass (Scss)

Description

Boolean if the prominent styles should be included for toolbars. This really just makes a toolbar with a bigger height.

Type

Boolean
md-toolbar-include-btn-text
$md-toolbar-include-btn-text: true !default;
Sass (Scss)

Description

Boolean if the very small styles for flat or raised buttons in toolbars should be included.

Type

Boolean
md-toolbar-include-text-fields
$md-toolbar-include-text-fields: true !default;
Sass (Scss)

Description

Boolean if the styling for text fields in toolbars should be included.

Type

Boolean
md-toolbar-include-autocompletes
$md-toolbar-include-autocompletes: true !default;
Sass (Scss)

Description

Boolean if the styles for autocompletes in toolbars should be included. This really just updates the autocomplete's menu to span the entire viewport on mobile devices.

Type

Boolean
md-toolbar-include-select-fields
$md-toolbar-include-select-fields: true !default;
Sass (Scss)

Description

Boolean if the select field styling in toolbars should be included.

Type

Boolean
md-toolbar-include-relative-padding-class-names
$md-toolbar-include-relative-padding-class-names: true !default;
Sass (Scss)

Description

Boolean if two additional class names should be included for positioning toolbar relatives with padding instead of margin. Creates .md-toolbar-relative--padded and md-toolbar-relative--prominent-padded

NOTE: If $md-toolbar-relative-padding is true, these classes will still not be created. In addition, if $md-toolbar-include-prominent is false, the prominent class name will not be created.

Type

Boolean
md-toolbar-relative-padding
$md-toolbar-relative-padding: false !default;
Sass (Scss)

Description

Boolean if the .md-toolbar-relative and .md-toolbar-relative--prominent should use padding instead of margin for positioning.

Type

Boolean

See

md-toolbar-inset-margin
$md-toolbar-inset-margin: 8px !default;
Sass (Scss)

Description

The amount of margin for an inset toolbar.

Type

Number

Used by

md-toolbar-prominent-title-font-size
$md-toolbar-prominent-title-font-size: $md-title-font-size !default;
Sass (Scss)

Description

The toolbar's prominent title font size. This will only be included if it does not equal the $md-title-font-size variable.

Type

Number

Used by

md-toolbar-mobile-portrait-height
$md-toolbar-mobile-portrait-height: 56px !default;
Sass (Scss)

Description

The height of a toolbar on mobile portrait devices.

Type

Number

Used by

md-toolbar-mobile-landscape-height
$md-toolbar-mobile-landscape-height: 48px !default;
Sass (Scss)

Description

The height of a toolbar on mobile landscape devices.

Type

Number

Used by

md-toolbar-mobile-prominent-height
$md-toolbar-mobile-prominent-height: null !default;
Sass (Scss)

Description

The height of a prominent toolbar on mobile devices and any media above.

Type

Number

Used by

md-toolbar-mobile-btn-keyline
$md-toolbar-mobile-btn-keyline: 16px !default;
Sass (Scss)

Description

The keyline to use for the main nav button in the toolbar for mobile devices.

Type

Number

Used by

md-toolbar-mobile-title-keyline
$md-toolbar-mobile-title-keyline: 72px !default;
Sass (Scss)

Description

The keyline to use for the main title in the toolbar for mobile devices.

Type

Number

Used by

md-toolbar-mobile-select-field-margin
$md-toolbar-mobile-select-field-margin: 6px !default;
Sass (Scss)

Description

The top and bottom padding to apply to select fields that appear in toolbars.

Type

Number

Used by

See

md-toolbar-tablet-height
$md-toolbar-tablet-height: 64px !default;
Sass (Scss)

Description

The height of a toolbar for tablets and desktop displays.

Type

Number

Used by

md-toolbar-tablet-prominent-height
$md-toolbar-tablet-prominent-height: null !default;
Sass (Scss)

Description

The prominent height for a toolbar on tablet displays.

Type

Number

Used by

See

md-toolbar-tablet-btn-keyline
$md-toolbar-tablet-btn-keyline: 24px !default;
Sass (Scss)

Description

The keyline to use for the main nav button in toolbars on tablets and desktop displays.

Type

Number

Used by

md-toolbar-tablet-title-keyline
$md-toolbar-tablet-title-keyline: 80px !default;
Sass (Scss)

Description

The keyline to use for the main title in a toolbar for tablets and desktop displays.

Type

Number

Used by

md-toolbar-tablet-select-field-margin
$md-toolbar-tablet-select-field-margin: 10px !default;
Sass (Scss)

Description

The top and bottom padding to apply to select fields that appear in toolbars.

Type

Number

Used by

See

md-toolbar-tablet-landscape-select-field-margin
$md-toolbar-tablet-landscape-select-field-margin: 12px !default;
Sass (Scss)

Description

The top and bottom padding to apply to select fields that appear in landscape toolbars.

Type

Number

Used by

See

md-toolbar-desktop-height
$md-toolbar-desktop-height: null !default;
Sass (Scss)

Description

An optional height to apply to toolbars only on desktop displays.

Type

Number

Used by

See

md-toolbar-desktop-prominent-height
$md-toolbar-desktop-prominent-height: null !default;
Sass (Scss)

Description

An optional height to apply to prominent toolbars on desktop displays.

Type

Number

Used by

See

md-toolbar-desktop-btn-keyline
$md-toolbar-desktop-btn-keyline: null !default;
Sass (Scss)

Description

An optional keyline to apply to the action buttons and main navigation in toolbars on desktop displays. If this is null, it will inherit the keyline from tablets.

Type

Number

Used by

See

md-toolbar-desktop-title-keyline
$md-toolbar-desktop-title-keyline: null !default;
Sass (Scss)

Description

An optional keyline to apply to the toolbar's title on desktop displays. If this is null, it will inherit the keyline from tablets.

Type

Number

Used by

See

md-toolbar-desktop-select-field-margin
$md-toolbar-desktop-select-field-margin: null !default;
Sass (Scss)

Description

An optional margin to apply to select fields that appear in toolbars on desktop displays. If this is null, it will inherit the margins from tablets.

Type

Number

Used by

See

md-toolbar-prominent-height
$md-toolbar-prominent-height: if($md-toolbar-height != null, $md-toolbar-height * 2, 128px) !default;
Sass (Scss)

Description

A height to use for prominent toolbars on all screen sizes. This value will have precedence over the mobile/tablet/desktop variables.

Type

Number

Used by

See

md-toolbar-title-keyline
$md-toolbar-title-keyline: null !default;
Sass (Scss)

Description

A title keyline to use for toolbars on all screen sizes. This value will have precedence over the mobile/tablet/desktop variables.

Type

Number

Used by

See

md-toolbar-btn-keyline
$md-toolbar-btn-keyline: null !default;
Sass (Scss)

Description

The keyline to use for the main navigation and action buttons in the toolbar. This value will have precedence over the mobile/tablet/desktop variables.

Type

Number

Used by

See

md-toolbar-select-field-margin
$md-toolbar-select-field-margin: null !default;
Sass (Scss)

Description

The margin to apply to the top and bottom of a select field that appears in a toolbar.

Type

Number

Used by

See

md-toolbar-z-index
$md-toolbar-z-index: 15 !default;
Sass (Scss)

Description

The z-index for a fixed toolbar.

Type

Number

Used by

See

Mixins

react-md-toolbars
@mixin react-md-toolbars($light-theme: $md-light-theme, $include-media: $md-media-included, $include-themed: $md-toolbar-include-themed, $include-prominent: $md-toolbar-include-prominent, $include-btn-text: $md-toolbar-include-btn-text, $include-text-fields: $md-toolbar-include-text-fields, $include-autocompletes: $md-toolbar-include-autocompletes, $include-select-fields: $md-toolbar-include-select-fields, $include-dense-icons: $md-font-icon-include-dense, $include-relative-padding-class-names: $md-toolbar-include-relative-padding-class-names, $relative-padding: $md-toolbar-relative-padding) {}
Sass (Scss)
Click to expand

Description

Includes the styles for toolbars.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if the toolbars should be themed for the light theme.

Boolean
$md-light-theme
$include-media

Boolean if the toolbar media queries should be included.

Boolean
$md-media-included
$include-themed

Boolean if the themed toolbars should be included.

Boolean
$md-toolbar-include-themed
$include-prominent

Boolean if the prominent toolbar styles should be included.

Boolean
$md-toolbar-include-prominent
$include-btn-text

Boolean if the flat or raised button styles in toolbars should be included.

Boolean
$md-toolbar-include-btn-text
$include-text-fields

Boolean if the styles for text fields in toolbars should be included. If the params include-autocomplete or include-select-fields are true, this will always be included.

Boolean
$md-toolbar-include-text-fields
$include-autocompletes

Boolean if the styles for autocompletes in toolbars should be included.

Boolean
$md-toolbar-include-autocompletes
$include-select-fields

Boolean if the styles for select fields in toolbars should be included.

Boolean
$md-toolbar-include-select-fields
$include-dense-icons

Boolean if the dense spec for icons/buttons should be included.

Boolean
$md-font-icon-include-dense
$include-relative-padding-class-names

Boolean if the relative padding class names should be included.

Boolean
$md-toolbar-include-relative-padding-class-names
$relative-padding

Boolean if the .md-toolbar-relative class names should use padding instead of margin.

Boolean
$md-toolbar-relative-padding

Examples

Example Usage SCSS

@include react-md-toolbars;
Sass (Scss)

Requires

Used by

react-md-toolbar-relative
@mixin react-md-toolbar-relative($toolbar-height, $prominent-toolbar-height, $include-prominent, $include-relative-padding-class-names, $relative-padding) {}
Sass (Scss)
Click to expand

Description

This is a utility mixin for creating the relative class names for toolbars. This should normally just be used within the react-md-toolbars mixin. It will optionally create the following class names:

  • md-toolbar-relative
  • md-toolbar-relative--padding
  • md-toolbar-relative--prominent
  • md-toolbar-relative--prominent-padding

The class names will only be created if the related height is not null.

Parameters

NameDescriptionTypeDefault value
$toolbar-height

The current height of the toolbar. This is used to create the offset.

Number
$prominent-toolbar-height

The current height of a prominent toolbar.

number
$include-prominent

Boolean if the prominent styles for toolbars should be created.

Boolean
$include-relative-padding-class-names

Boolean if the padding suffix class names should also be created.

Boolean
$relative-padding

Boolean if the class names use padding by default instead of margin.

Boolean

Requires

Used by

react-md-toolbar-actions
@mixin react-md-toolbar-actions($margin) {}
Sass (Scss)
Click to expand

Description

A mixin that is mostly for internal use. It will create the toolbar action left/right styles

Parameters

NameDescriptionTypeDefault value
$margin

the current margin for the actions.

Number

Used by

react-md-toolbar-buttons
@mixin react-md-toolbar-buttons($toolbar-height, $icon-btn-size, $text-btn-size, $include-btn-text) {}
Sass (Scss)
Click to expand

Description

A mixin that is mostly for internal use. It will apply additional margins to buttons that appear in toolbars based on the given parameters.

Parameters

NameDescriptionTypeDefault value
$toolbar-height

The current toolbar height.

Number
$icon-btn-size

The current icon button size.

Number
$text-btn-size

The current text button size.

Number
$include-btn-text

Boolean if text buttons should be included.

Boolean

Used by

react-md-toolbar-titles
@mixin react-md-toolbar-titles($toolbar-height, $title-keyline, $btn-size, $btn-margin) {}
Sass (Scss)
Click to expand

Description

A mixin that is mostly for internal use. It will apply additional styles for titles that appear in toolbars based on the given parameters.

Parameters

NameDescriptionTypeDefault value
$toolbar-height

The current toolbar height

Number
$title-keyline

The current title's keyline to use.

Number
$btn-size

The current icon button's size.

Number
$btn-margin

The current margin for the icon button.

Number

Requires

Used by

react-md-toolbars-mobile
@mixin react-md-toolbars-mobile($include-prominent: $md-toolbar-include-prominent, $include-btn-text: $md-toolbar-include-btn-text, $include-select-fields: $md-toolbar-include-select-fields, $include-relative-padding-class-names: $md-toolbar-include-relative-padding-class-names, $relative-padding: $md-toolbar-relative-padding) {}
Sass (Scss)
Click to expand

Description

Includes the styles for toolbars on mobile devices. This should normally be used in a media query.

Parameters

NameDescriptionTypeDefault value
$include-prominent

Boolean if the prominent toolbar styles should be included.

Boolean
$md-toolbar-include-prominent
$include-btn-text

Boolean if the flat or raised button styles in toolbars should be included.

Boolean
$md-toolbar-include-btn-text
$include-select-fields

Boolean if the styles for select fields in toolbars should be included.

Boolean
$md-toolbar-include-select-fields
$include-relative-padding-class-names

Boolean if the relative padding class names should be included.

Boolean
$md-toolbar-include-relative-padding-class-names
$relative-padding

Boolean if the .md-toolbar-relative class names should use padding instead of margin.

Boolean
$md-toolbar-relative-padding

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
   @include react-md-toolbars-mobile;
}
Sass (Scss)

Requires

Used by

react-md-toolbars-mobile-landscape
@mixin react-md-toolbars-mobile-landscape($include-prominent: $md-toolbar-include-prominent, $include-btn-text: $md-toolbar-include-btn-text, $include-select-fields: $md-toolbar-include-select-fields, $include-relative-padding-class-names: $md-toolbar-include-relative-padding-class-names, $relative-padding: $md-toolbar-relative-padding) {}
Sass (Scss)
Click to expand

Description

Includes the styles for toolbars on landscape mobile devices. This should normally be used in a media query.

Parameters

NameDescriptionTypeDefault value
$include-prominent

Boolean if the prominent toolbar styles should be included.

Boolean
$md-toolbar-include-prominent
$include-btn-text

Boolean if the flat or raised button styles in toolbars should be included.

Boolean
$md-toolbar-include-btn-text
$include-select-fields

Boolean if the styles for select fields in toolbars should be included.

Boolean
$md-toolbar-include-select-fields
$include-relative-padding-class-names

Boolean if the relative padding class names should be included.

Boolean
$md-toolbar-include-relative-padding-class-names
$relative-padding

Boolean if the .md-toolbar-relative class names should use padding instead of margin.

Boolean
$md-toolbar-relative-padding

Examples

Example Usage SCSS

@media #{$md-mobile-landscape-media} {
   @include react-md-toolbars-mobile-landscape;
}
Sass (Scss)

Requires

Used by

react-md-toolbars-tablet
@mixin react-md-toolbars-tablet($include-prominent: $md-toolbar-include-prominent, $include-btn-text: $md-toolbar-include-btn-text, $include-select-fields: $md-toolbar-include-select-fields, $include-relative-padding-class-names: $md-toolbar-include-relative-padding-class-names, $relative-padding: $md-toolbar-relative-padding) {}
Sass (Scss)
Click to expand

Description

Includes the styles for toolbars on tablets and desktop screens. This should usually be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-prominent

Boolean if the prominent toolbar styles should be included.

Boolean
$md-toolbar-include-prominent
$include-btn-text

Boolean if the flat or raised button styles in toolbars should be included.

Boolean
$md-toolbar-include-btn-text
$include-select-fields

Boolean if the styles for select fields in toolbars should be included.

Boolean
$md-toolbar-include-select-fields
$include-relative-padding-class-names

Boolean if the relative padding class names should be included.

Boolean
$md-toolbar-include-relative-padding-class-names
$relative-padding

Boolean if the .md-toolbar-relative class names should use padding instead of margin.

Boolean
$md-toolbar-relative-padding

Examples

Example Usage SCSS

@media #{$md-tablet-media} {
   @include react-md-toolbars-tablet;
}
Sass (Scss)

Requires

Used by

react-md-toolbars-tablet-landscape
@mixin react-md-toolbars-tablet-landscape($include-select-fields: $md-toolbar-include-select-fields) {}
Sass (Scss)
Click to expand

Description

Includes the styles for toolbars for a landscape tablet. This should be used within a media query. This will really only generate styles if the include-text-fields param is true.

Parameters

NameDescriptionTypeDefault value
$include-select-fields

Boolean if the styles for select fields in toolbars should be included.

Boolean
$md-toolbar-include-select-fields

Examples

Example Usage SCSS

@media #{$md-tablet-landscape-media} {
  @include react-md-toolbars-tablet-landscape;
}
Sass (Scss)

Requires

Used by

react-md-toolbars-desktop
@mixin react-md-toolbars-desktop($include-prominent: $md-toolbar-include-prominent, $include-btn-text: $md-toolbar-include-btn-text, $include-select-fields: $md-toolbar-include-select-fields, $include-relative-padding-class-names: $md-toolbar-include-relative-padding-class-names, $relative-padding: $md-toolbar-relative-padding, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for toolbars for a desktop display. This should be used within a media query. This will really only generate styles if the include-text-fields param is true.

Parameters

NameDescriptionTypeDefault value
$include-prominent

Boolean if the prominent toolbar styles should be included.

Boolean
$md-toolbar-include-prominent
$include-btn-text

Boolean if the flat or raised button styles in toolbars should be included.

Boolean
$md-toolbar-include-btn-text
$include-select-fields

Boolean if the styles for select fields in toolbars should be included.

Boolean
$md-toolbar-include-select-fields
$include-relative-padding-class-names

Boolean if the relative padding class names should be included.

Boolean
$md-toolbar-include-relative-padding-class-names
$relative-padding

Boolean if the .md-toolbar-relative class names should use padding instead of margin.

Boolean
$md-toolbar-relative-padding
$include-dense-icons

Boolean if the dense spec for icons/buttons should be included.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@media #{$md-tablet-desktop} {
  @include react-md-toolbars-desktop;
}
Sass (Scss)

Requires

Used by

react-md-toolbars-media
@mixin react-md-toolbars-media($include-prominent: $md-toolbar-include-prominent, $include-btn-text: $md-toolbar-include-btn-text, $include-select-fields: $md-toolbar-include-select-fields, $include-dense-icons: $md-font-icon-include-dense, $include-relative-padding-class-names: $md-toolbar-include-relative-padding-class-names, $relative-padding: $md-toolbar-relative-padding) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for toolbars.

Parameters

NameDescriptionTypeDefault value
$include-prominent

Boolean if the prominent toolbar styles should be included.

Boolean
$md-toolbar-include-prominent
$include-btn-text

Boolean if the flat or raised button styles in toolbars should be included.

Boolean
$md-toolbar-include-btn-text
$include-select-fields

Boolean if the styles for select fields in toolbars should be included.

Boolean
$md-toolbar-include-select-fields
$include-dense-icons

Boolean if the dense spec for icons/buttons should be included.

Boolean
$md-font-icon-include-dense
$include-relative-padding-class-names

Boolean if the relative padding class names should be included.

Boolean
$md-toolbar-include-relative-padding-class-names
$relative-padding

Boolean if the .md-toolbar-relative class names should use padding instead of margin.

Boolean
$md-toolbar-relative-padding

Examples

Example Usage SCSS

@include react-md-toolbars-media;
Sass (Scss)

Requires

Used by

react-md-theme-toolbars
@mixin react-md-theme-toolbars($light-theme: $md-light-theme, $include-themed: $md-toolbar-include-themed) {}
Sass (Scss)
Click to expand

Description

Updates the toolbar's themed color ONLY if the $light-theme does not equal the $md-light-theme and the $include-themed param is true.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if the toolbars should be themed for the light theme.

Boolean
$md-light-theme
$include-themed

Boolean if the themed toolbars should be included.

Boolean
$md-toolbar-include-themed

Examples

Example Usage SCSS

@include react-md-theme-toolbars(false);
Sass (Scss)

Requires

Used by