Media Queries

Variables

md-mobile-min-width
$md-mobile-min-width: 320px !default;
Sass (Scss)

Description

The default min width for a mobile device.

Type

Number
md-tablet-min-width
$md-tablet-min-width: 768px !default;
Sass (Scss)

Description

The default min width for a tablet device.

Type

Number

Used by

md-desktop-min-width
$md-desktop-min-width: 1025px !default;
Sass (Scss)

Description

The default min width for a desktop screen.

Type

Number

Used by

md-portrait-media
$md-portrait-media: '(max-aspect-ratio: 13/9)' !default;
Sass (Scss)

Description

The media query to detect devices in portrait mode. Normally you could just do something like (orientation: portrait), but this doesn't work when the soft keyboard appears. The only part of the specification for portrait is that the "height" is greater than the "width" of the device. Android devices reduce the screen height when the soft keyboard appears and it is now considered landscape with this logic.

Type

String
md-landscape-media
$md-landscape-media: '(min-aspect-ratio: 13/9)' !default;
Sass (Scss)

Description

The media query to detect devices in landscape mode.

Type

String

See

md-mobile-portrait-media
$md-mobile-portrait-media: 'screen and (min-width: #{$md-mobile-min-width}) and #{$md-portrait-media}' !default;
Sass (Scss)

Description

The default media query for a portrait mobile device.

Type

String

Used by

md-mobile-landscape-media
$md-mobile-landscape-media: 'screen and (min-width: #{$md-mobile-min-width}) and #{$md-landscape-media}' !default;
Sass (Scss)

Description

The default media query for a landscape mobile device.

Type

String

Used by

md-tablet-media
$md-tablet-media: 'screen and (min-width: #{$md-tablet-min-width})' !default;
Sass (Scss)

Description

The default media query for a tablet device.

Type

String

Used by

md-tablet-portrait-media
$md-tablet-portrait-media: 'screen and (min-width: #{$md-tablet-min-width}) and #{$md-portrait-media}' !default;
Sass (Scss)

Description

The default media query for a portrait tablet device.

Type

String
md-tablet-landscape-media
$md-tablet-landscape-media: 'screen and (min-width: #{$md-tablet-min-width}) and #{$md-landscape-media}' !default;
Sass (Scss)

Description

The default media query for a landscape tablet device.

Type

String

Used by

md-media-included
$md-media-included: true !default;
Sass (Scss)

Description

Boolean if the media queries should be included by default for all component mixins. Set this to false if you want to manually include them. It is really only beneficial if you want to join all media queries into one, but you can always use a postcss plugin to combine them if you are worried about bundle size.

Type

Boolean

Used by

Mixins

react-md-autocompletes-mobile
@mixin react-md-autocompletes-mobile($include-inline: $md-inline-autocomplete) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the autocomplete component on mobile devices. This should normally be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean
$md-inline-autocomplete

Examples

Example Usage SCSS

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

Requires

Used by

react-md-autocompletes-desktop
@mixin react-md-autocompletes-desktop($include-inline: $md-inline-autocomplete) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the autocomplete component on desktop screens. This should normally be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean
$md-inline-autocomplete

Examples

Example Usage SCSS

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

Requires

Used by

react-md-autocompletes-media
@mixin react-md-autocompletes-media($include-inline: $md-inline-autocomplete) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for autocompletes.

Parameters

NameDescriptionTypeDefault value
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean
$md-inline-autocomplete

Examples

Example Usage SCSS

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

Requires

Used by

react-md-avatar-media
@mixin react-md-avatar-media($include-icon-sized: $md-avatar-include-icon-sized, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the media queries with styles for avatars. This really only generates any new styles if icon sized avatars are included, the dense spec for icons are included, and the font-icon size is different for default and the dense spec.

Parameters

NameDescriptionTypeDefault value
$include-icon-sized

Boolean if icon sized avatars should be included.

Boolean
$md-avatar-include-icon-sized
$include-dense-icons

Boolean if the dense spec for icons should be included.

Boolean
$md-font-icon-include-dense

Requires

Used by

react-md-buttons-mobile
@mixin react-md-buttons-mobile($include-flat: $md-btn-include-flat, $include-raised: $md-btn-include-raised, $include-floating: $md-btn-include-floating) {}
Sass (Scss)
Click to expand

Description

Creates the styles for buttons on mobile devices. This really just sets the font size and adds some styles to make the button be accessible for touch.

Parameters

NameDescriptionTypeDefault value
$include-flat

Boolean if the flat styles for buttons should be included.

Boolean
$md-btn-include-flat
$include-raised

Boolean if the raised styles for buttons should be included.

Boolean
$md-btn-include-raised
$include-floating

Boolean if the floating styles for buttons should be included.

Boolean
$md-btn-include-floating

Examples

Example Usage SCSS

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

Requires

Used by

react-md-buttons-desktop
@mixin react-md-buttons-desktop($include-flat: $md-btn-include-flat, $include-raised: $md-btn-include-raised, $include-icon: $md-btn-include-icon, $include-floating: $md-btn-include-floating, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the styles for buttons on desktop screens.

Parameters

NameDescriptionTypeDefault value
$include-flat

Boolean if the flat styles for buttons should be included.

Boolean
$md-btn-include-flat
$include-raised

Boolean if the raised styles for buttons should be included.

Boolean
$md-btn-include-raised
$include-icon

Boolean if the icon styles for buttons should be included.

Boolean
$md-btn-include-icon
$include-floating

Boolean if the floating styles for buttons should be included.

Boolean
$md-btn-include-floating
$include-dense-icons

Boolean if the dense specs for icons should be included for buttons.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

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

Requires

Used by

react-md-buttons-media
@mixin react-md-buttons-media($include-flat: $md-btn-include-flat, $include-raised: $md-btn-include-raised, $include-icon: $md-btn-include-icon, $include-floating: $md-btn-include-floating, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the media queries and styles for buttons for mobile and desktop.

Parameters

NameDescriptionTypeDefault value
$include-flat

Boolean if the flat styles for buttons should be included.

Boolean
$md-btn-include-flat
$include-raised

Boolean if the raised styles for buttons should be included.

Boolean
$md-btn-include-raised
$include-icon

Boolean if the icon styles for buttons should be included.

Boolean
$md-btn-include-icon
$include-floating

Boolean if the floating styles for buttons should be included.

Boolean
$md-btn-include-floating
$include-dense-icons

Boolean if the dense specs for icons should be included for buttons.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

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

Requires

Used by

react-md-drawers-mobile
@mixin react-md-drawers-mobile {}
Sass (Scss)
Click to expand

Description

Includes the styles for drawers on mobile devices.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-drawers-mobile-landscape
@mixin react-md-drawers-mobile-landscape {}
Sass (Scss)
Click to expand

Description

Includes the styles for drawers on mobile landscape devices.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-drawers-tablet
@mixin react-md-drawers-tablet {}
Sass (Scss)
Click to expand

Description

Includes the styles for drawers on tablets.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-drawers-desktop
@mixin react-md-drawers-desktop {}
Sass (Scss)
Click to expand

Description

Includes the styles for drawers on desktop screens.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-drawers-media
@mixin react-md-drawers-media {}
Sass (Scss)
Click to expand

Description

Includes the media queries and styles for drawers.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-grid-mobile
@mixin react-md-grid-mobile($columns: $md-grid-phone-columns, $margin: $md-grid-phone-margin, $gutter: $md-grid-phone-gutter) {}
Sass (Scss)
Click to expand

Description

Creates a grid for mobile devices. This should normally be used in a media query or the react-md-grid-media mixin.

Parameters

NameDescriptionTypeDefault value
$columns

The number of columns to use.

Number
$md-grid-phone-columns
$margin

The margin to use.

Number
$md-grid-phone-margin
$gutter

The gutter to use.

Number
$md-grid-phone-gutter

Examples

Example Usage SCSS

@media (max-width: $md-grid-tablet-breakpoint - 1) {
  @include react-md-grid-mobile;
}
Sass (Scss)

Requires

Used by

react-md-grid-tablet
@mixin react-md-grid-tablet($columns: $md-grid-tablet-columns, $margin: $md-grid-tablet-margin, $gutter: $md-grid-tablet-gutter) {}
Sass (Scss)
Click to expand

Description

Creates a grid for tablet devices. This should normally be used in a media query or the react-md-grid-media mixin.

Parameters

NameDescriptionTypeDefault value
$columns

The number of columns to use.

Number
$md-grid-tablet-columns
$margin

The margin to use.

Number
$md-grid-tablet-margin
$gutter

The gutter to use.

Number
$md-grid-tablet-gutter

Examples

Example Usage SCSS

@media (min-width: $md-grid-tablet-breakpoint) and (max-width: $md-grid-desktop-breakpoint - 1) {
  @include react-md-grid-tablet;
}
Sass (Scss)

Requires

Used by

react-md-grid-desktop
@mixin react-md-grid-desktop($columns: $md-grid-desktop-columns, $margin: $md-grid-desktop-margin, $gutter: $md-grid-desktop-gutter) {}
Sass (Scss)
Click to expand

Description

Creates a grid for desktops and larger screens. This should normally be used in a media query or the react-md-grid-media mixin.

Parameters

NameDescriptionTypeDefault value
$columns

The number of columns to use.

Number
$md-grid-desktop-columns
$margin

The margin to use.

Number
$md-grid-desktop-margin
$gutter

The gutter to use.

Number
$md-grid-desktop-gutter

Examples

Example Usage SCSS

@media (min-width: $md-grid-desktop-breakpoint) {
  @include react-md-grid-desktop;
}
Sass (Scss)

Requires

Used by

react-md-grid-media
@mixin react-md-grid-media {}
Sass (Scss)
Click to expand

Description

Includes all the media queries and styles for grids.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-lists-mobile
@mixin react-md-lists-mobile($include-icon: $md-list-include-icon, $include-avatar: $md-list-include-avatar, $include-two-lines: $md-list-include-two-lines, $include-three-lines: $md-list-include-three-lines) {}
Sass (Scss)
Click to expand

Description

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

Parameters

NameDescriptionTypeDefault value
$include-icon

Boolean if the styles for lists with icons should be included.

Boolean
$md-list-include-icon
$include-avatar

Boolean if the styles for lists with avatars should be included.

Boolean
$md-list-include-avatar
$include-two-lines

Boolean if the styles for lists with two lines of text should be included.

Boolean
$md-list-include-two-lines
$include-three-lines

Boolean if the styles for lists with three lines of text should be included.

Boolean
$md-list-include-three-lines

Examples

Example Usage SCSS

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

Requires

Used by

react-md-lists-desktop
@mixin react-md-lists-desktop($include-icon: $md-list-include-icon, $include-avatar: $md-list-include-avatar, $include-two-lines: $md-list-include-two-lines, $include-three-lines: $md-list-include-three-lines, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for lists on desktop screens. This should normally be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-icon

Boolean if the styles for lists with icons should be included.

Boolean
$md-list-include-icon
$include-avatar

Boolean if the styles for lists with avatars should be included.

Boolean
$md-list-include-avatar
$include-two-lines

Boolean if the styles for lists with two lines of text should be included.

Boolean
$md-list-include-two-lines
$include-three-lines

Boolean if the styles for lists with three lines of text should be included.

Boolean
$md-list-include-three-lines
$include-dense-icons

Boolean if the dense styles for icons should be included.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

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

Requires

Used by

react-md-lists-media
@mixin react-md-lists-media($include-icon: $md-list-include-icon, $include-avatar: $md-list-include-avatar, $include-two-lines: $md-list-include-two-lines, $include-three-lines: $md-list-include-three-lines, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the media queries and styles for lists on mobile devices and desktop screens.

Parameters

NameDescriptionTypeDefault value
$include-icon

Boolean if the styles for lists with icons should be included.

Boolean
$md-list-include-icon
$include-avatar

Boolean if the styles for lists with avatars should be included.

Boolean
$md-list-include-avatar
$include-two-lines

Boolean if the styles for lists with two lines of text should be included.

Boolean
$md-list-include-two-lines
$include-three-lines

Boolean if the styles for lists with three lines of text should be included.

Boolean
$md-list-include-three-lines
$include-dense-icons

Boolean if the dense styles for icons should be included.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

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

Requires

Used by

react-md-icons-media
@mixin react-md-icons-media($include-dense: $md-font-icon-include-dense, $include-dense-material-icons: $md-font-icon-include-dense-material-icons) {}
Sass (Scss)
Click to expand

Description

Creates the media queries for icons. This really only is used for the dense spec of icons.

Parameters

NameDescriptionTypeDefault value
$include-dense

Boolean if the dense specs for icons should be included.

Boolean
$md-font-icon-include-dense
$include-dense-material-icons

Boolean if the material-icons font icon library should be adjusted to support dense icons.

Boolean
$md-font-icon-include-dense-material-icons

Requires

Used by

react-md-menus-mobile
@mixin react-md-menus-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for menus on mobile devices. This should normally be used a media query.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-menus-desktop
@mixin react-md-menus-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for menus on desktop screens. This should normally be used a media query.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-menus-media
@mixin react-md-menus-media {}
Sass (Scss)
Click to expand

Description

Includes the media queries for menus on mobile devices and desktop screens.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-navigation-drawers-mobile
@mixin react-md-navigation-drawers-mobile($enforce-height: $md-navigation-drawer-enforce-height) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the navigation drawer content on mobile devices. This should be used within a media query.

Parameters

NameDescriptionTypeDefault value
$enforce-height

Boolean if the drawer's content height should be strictly enforced. This will use the height attribute instead of the max-height.

Boolean
$md-navigation-drawer-enforce-height

Examples

Example Usage SCSS

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

Requires

Used by

react-md-navigation-drawers-mobile-landscape
@mixin react-md-navigation-drawers-mobile-landscape($enforce-height: $md-navigation-drawer-enforce-height) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the navigation drawer content on mobile landscape devices. This should be used within a media query.

Parameters

NameDescriptionTypeDefault value
$enforce-height

Boolean if the drawer's content height should be strictly enforced. This will use the height attribute instead of the max-height.

Boolean
$md-navigation-drawer-enforce-height

Examples

Example Usage SCSS

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

Requires

Used by

react-md-navigation-drawers-tablet
@mixin react-md-navigation-drawers-tablet($enforce-height: $md-navigation-drawer-enforce-height) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the navigation drawer content on tablets. This should be used within a media query.

Parameters

NameDescriptionTypeDefault value
$enforce-height

Boolean if the drawer's content height should be strictly enforced. This will use the height attribute instead of the max-height.

Boolean
$md-navigation-drawer-enforce-height

Examples

Example Usage SCSS

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

Requires

Used by

react-md-navigation-drawers-desktop
@mixin react-md-navigation-drawers-desktop($enforce-height: $md-navigation-drawer-enforce-height, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the navigation drawer content on desktop screens. This should be used within a media query.

Parameters

NameDescriptionTypeDefault value
$enforce-height

Boolean if the drawer's content height should be strictly enforced. This will use the height attribute instead of the max-height.

Boolean
$md-navigation-drawer-enforce-height
$include-dense-icons

Boolean if the dense font icons should be included.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

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

Requires

Used by

react-md-navigation-drawers-media
@mixin react-md-navigation-drawers-media($enforce-height: $md-navigation-drawer-enforce-height, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the media queries and styles for navigation drawers.

Parameters

NameDescriptionTypeDefault value
$enforce-height

Boolean if the drawer's content height should be strictly enforced. This will use the height attribute instead of the max-height.

Boolean
$md-navigation-drawer-enforce-height
$include-dense-icons

Boolean if the dense font icons should be included.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@include react-md-navigation-drawers-media;
Sass (Scss)

Requires

Used by

react-md-pickers-media
@mixin react-md-pickers-media {}
Sass (Scss)
Click to expand

Description

Includes the media queries for pickers only if $include-date or $include-time are true. This is normally used just within the react-md-pickers mixin.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

See

react-md-select-fields-mobile
@mixin react-md-select-fields-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for select fields on a mobile device. This should normally be used within a media query.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-select-fields-desktop
@mixin react-md-select-fields-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for select fields on a desktop screen. This should normally be used within a media query.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-select-fields-media
@mixin react-md-select-fields-media {}
Sass (Scss)
Click to expand

Description

Creates the media queries and styles for select fields on mobile devices and desktop screens.

Parameters

None

Examples

Example Usage SCSS

@include react-md-select-fields-media;
Sass (Scss)

Requires

Used by

react-md-selection-controls-mobile
@mixin react-md-selection-controls-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for selection controls on mobile devices.

Parameters

None

Requires

Used by

react-md-selection-controls-desktop
@mixin react-md-selection-controls-desktop($include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the styles for selection controls on desktop displays.

Parameters

NameDescriptionTypeDefault value
$include-dense-icons

boolean if the checkbox and radio controls should be updated for the dense icon spec.

boolean
$md-font-icon-include-dense

Requires

Used by

react-md-selection-controls-media
@mixin react-md-selection-controls-media($include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the media queries for selection controls for mobile and desktop.

Parameters

NameDescriptionTypeDefault value
$include-dense-icons

boolean if the checkbox and radio controls should be updated for the dense icon spec.

boolean
$md-font-icon-include-dense

Requires

Used by

react-md-slider-indicators-mobile
@mixin react-md-slider-indicators-mobile {}
Sass (Scss)
Click to expand

Description

Creates the CSS for the slider indicators on mobile devices. This should most likely be used within a media query.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-slider-indicators-desktop
@mixin react-md-slider-indicators-desktop {}
Sass (Scss)
Click to expand

Description

Creates the CSS for the slider indicators on desktop screens. This should most likely be used within a media query.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-slider-indicators-media
@mixin react-md-slider-indicators-media {}
Sass (Scss)
Click to expand

Description

Includes the mobile and desktop media queries for the slider indicators.

Parameters

None

Examples

Basic Usage SCSS

@include react-md-slider-indicators-media;
Sass (Scss)

Requires

Used by

react-md-snackbars-mobile
@mixin react-md-snackbars-mobile {}
Sass (Scss)
Click to expand

Description

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

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-snackbars-desktop
@mixin react-md-snackbars-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for snackbars on desktop screens. This should normally be used in a media query.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-snackbars-media
@mixin react-md-snackbars-media {}
Sass (Scss)
Click to expand

Description

Creates the media queries and styles for snackbars on both mobile devices and desktop screens.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-tabs-mobile
@mixin react-md-tabs-mobile {}
Sass (Scss)
Click to expand

Description

Includes the styles for tabs on mobile devices.

Parameters

None

Requires

Used by

react-md-tabs-mobile-portrait
@mixin react-md-tabs-mobile-portrait($include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-prominent-toolbars: $md-tab-include-prominent-toolbars, $include-swipeable: $md-tab-include-swipeable) {}
Sass (Scss)
Click to expand

Description

Includes the styles for tabs on mobile devices that are portrait. This really only adds styles for offsetting the tabs content when there is a toolbar. No styles will be included if the $include-toolbars or $include-swipeable params are false.

This mixin will define some offset class names to position the tabs content.

  • .md-tabs-content--offset-toolbar
  • .md-tabs-content--offset-toolbar-icon
  • .md-tabs-content--offset-toolbar-prominent

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for offsetting the tabs content when there is a tab with both a label and an icon.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for offsetting the tabs content when there is a .md-tabs-container containing both a toolbar and tabs.

Boolean
$md-tab-include-toolbars
$include-prominent-toolbars

Boolean if the styles for offsetting the tabs content when there is a .md-tabs-container containing both a prominent toolbar and tabs.

Boolean
$md-tab-include-prominent-toolbars
$include-swipeable

Boolean if the tab's content is swipeable.

Boolean
$md-tab-include-swipeable

Requires

Used by

react-md-tabs-mobile-landscape
@mixin react-md-tabs-mobile-landscape($include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-swipeable: $md-tab-include-swipeable) {}
Sass (Scss)
Click to expand

Description

Includes the styles for tabs on mobile devices that are landscape. This really only adds styles for offsetting the tabs content when there is a toolbar. No styles will be included if the $include-toolbars or $include-swipeable params are false.

This mixin will define some offset class names to position the tabs content.

  • .md-tabs-content--offset-toolbar
  • .md-tabs-content--offset-toolbar-icon

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for offsetting the tabs content when there is a tab with both a label and an icon.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for offsetting the tabs content when there is a .md-tabs-container containing both a toolbar and tabs.

Boolean
$md-tab-include-toolbars
$include-swipeable

Boolean if the tab's content is swipeable.

Boolean
$md-tab-include-swipeable

Requires

Used by

react-md-tabs-tablet
@mixin react-md-tabs-tablet($include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-prominent-toolbars: $md-tab-include-prominent-toolbars, $include-swipeable: $md-tab-include-swipeable) {}
Sass (Scss)
Click to expand

Description

Includes the styles for tabs on tablet devices. This really only adds styles for offsetting the tabs content when there is a toolbar. No styles will be included if the $include-toolbars or $include-swipeable params are false.

This mixin will define some offset class names to position the tabs content.

  • .md-tabs-content--offset-toolbar
  • .md-tabs-content--offset-toolbar-icon

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for offsetting the tabs content when there is a tab with both a label and an icon.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for offsetting the tabs content when there is a .md-tabs-container containing both a toolbar and tabs.

Boolean
$md-tab-include-toolbars
$include-prominent-toolbars

Boolean if the styles for offsetting the tabs content when there is a .md-tabs-container containing both a prominent toolbar and tabs.

Boolean
$md-tab-include-prominent-toolbars
$include-swipeable

Boolean if the tab's content is swipeable.

Boolean
$md-tab-include-swipeable

Requires

Used by

react-md-tabs-desktop
@mixin react-md-tabs-desktop($include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-prominent-toolbars: $md-tab-include-prominent-toolbars, $include-swipeable: $md-tab-include-swipeable, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for tabs on desktop screens.

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for a tab with a label and an icon should be included.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for a simple container holding a toolbar and tabs should be included.

Boolean
$md-tab-include-toolbars
$include-prominent-toolbars

Boolean if the styles for the simple container holding a toolbar and tabs should include the prominent toolbar styles.

Boolean
$md-tab-include-prominent-toolbars
$include-swipeable

Boolean if the styles for swiping the tab content on mobile devices should be included.

Boolean
$md-tab-include-swipeable
$include-dense-icons

Boolean if the dense spec for icons should be used for the tabs.

Boolean
$md-font-icon-include-dense

Requires

Used by

react-md-tabs-media
@mixin react-md-tabs-media($include-icons: $md-tab-include-icons, $include-toolbars: $md-tab-include-toolbars, $include-prominent-toolbars: $md-tab-include-prominent-toolbars, $include-swipeable: $md-tab-include-swipeable, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates all the styles for tabs at different media sizes.

Parameters

NameDescriptionTypeDefault value
$include-icons

Boolean if the styles for a tab with a label and an icon should be included.

Boolean
$md-tab-include-icons
$include-toolbars

Boolean if the styles for a simple container holding a toolbar and tabs should be included.

Boolean
$md-tab-include-toolbars
$include-prominent-toolbars

Boolean if the styles for the simple container holding a toolbar and tabs should include the prominent toolbar styles.

Boolean
$md-tab-include-prominent-toolbars
$include-swipeable

Boolean if the styles for swiping the tab content on mobile devices should be included.

Boolean
$md-tab-include-swipeable
$include-dense-icons

Boolean if the dense spec for icons should be used for the tabs.

Boolean
$md-font-icon-include-dense

Requires

Used by

react-md-text-fields-mobile
@mixin react-md-text-fields-mobile($include-multiline: $md-text-field-include-multiline, $include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block, $include-icon: $md-text-field-include-icon, $include-password: $md-text-field-include-password, $include-inline-indicator: $md-text-field-include-inline-indicator, $custom-sizes: $md-text-field-custom-sizes) {}
Sass (Scss)
Click to expand

Description

Creates the styles for text fields on mobile devices. The floating labels, blocks, icons, or password styles can be omitted by disabling the defaults or passing false here. This should normally be used within a media query for mobile devices.

Note: If the password is included, icons will automatically be included since they share styles.

Parameters

NameDescriptionTypeDefault value
$include-multiline

Boolean if the multiline styling of text fields should be included.

Boolean
$md-text-field-include-multiline
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styling should be included.

Boolean
$md-text-field-include-block
$include-icon

Boolean if the minimal styling for using icons should be included.

Boolean
$md-text-field-include-icon
$include-password

Boolean if the styling for password text fields should be included.

Boolean
$md-text-field-include-password
$include-inline-indicator

Boolean if the styling for inline indicators should be included. If the $include-password param is true, this will automatically be included as well.

Boolean
$md-text-field-include-inline-indicator
$custom-sizes

A map of custom sizes to apply. If you do not want any custom sizes, set the global or this param to null.

Map
$md-text-field-custom-sizes

Examples

Example Usage SCSS

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

Requires

Used by

react-md-text-fields-desktop
@mixin react-md-text-fields-desktop($include-multiline: $md-text-field-include-multiline, $include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block, $include-icon: $md-text-field-include-icon, $include-message: $md-text-field-include-message, $include-password: $md-text-field-include-password, $include-inline-indicator: $md-text-field-include-inline-indicator, $include-dense-icons: $md-font-icon-include-dense, $custom-sizes: $md-text-field-custom-sizes) {}
Sass (Scss)
Click to expand

Description

Creates the styles for text fields on desktop screens. The floating labels, blocks, icons, or password styles can be omitted by disabling the defaults or passing false here. This should normally be used within a media query for desktop screens.

Note: If the password is included, icons will automatically be included since they share styles.

Parameters

NameDescriptionTypeDefault value
$include-multiline

Boolean if the multiline styling of text fields should be included.

Boolean
$md-text-field-include-multiline
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styling should be included.

Boolean
$md-text-field-include-block
$include-icon

Boolean if the minimal styling for using icons should be included.

Boolean
$md-text-field-include-icon
$include-message

Boolean if the text field message styling should be included. This is the CSS for the counter and/or help/error text.

Boolean
$md-text-field-include-message
$include-password

Boolean if the styling for password text fields should be included.

Boolean
$md-text-field-include-password
$include-inline-indicator

Boolean if the styling for inline indicators should be included. If the $include-password param is true, this will automatically be included as well.

Boolean
$md-text-field-include-inline-indicator
$include-dense-icons

Boolean if the dense font icon styles should be included for text fields.

Boolean
$md-font-icon-include-dense
$custom-sizes

A map of custom sizes to apply. If you do not want any custom sizes, set the global or this param to null.

Map
$md-text-field-custom-sizes

Examples

Example Usage SCSS

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

Requires

Used by

react-md-text-fields-media
@mixin react-md-text-fields-media($include-multiline: $md-text-field-include-multiline, $include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block, $include-icon: $md-text-field-include-icon, $include-message: $md-text-field-include-message, $include-password: $md-text-field-include-password, $include-inline-indicator: $md-text-field-include-inline-indicator, $include-dense-icons: $md-font-icon-include-dense, $custom-sizes: $md-text-field-custom-sizes) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for text fields on mobile devices and desktop screens. The floating labels, blocks, icons, or password styles can be omitted by disabling the defaults or passing false here. This should normally be used within a media query for mobile devices.

Note: If the password is included, icons will automatically be included since they share styles.

Parameters

NameDescriptionTypeDefault value
$include-multiline

Boolean if the multiline styling of text fields should be included.

Boolean
$md-text-field-include-multiline
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styling should be included.

Boolean
$md-text-field-include-block
$include-icon

Boolean if the minimal styling for using icons should be included.

Boolean
$md-text-field-include-icon
$include-message

Boolean if the text field message styling should be included. This is the CSS for the counter and/or help/error text.

Boolean
$md-text-field-include-message
$include-password

Boolean if the styling for password text fields should be included.

Boolean
$md-text-field-include-password
$include-inline-indicator

Boolean if the styling for inline indicators should be included. If the $include-password param is true, this will automatically be included as well.

Boolean
$md-text-field-include-inline-indicator
$include-dense-icons

Boolean if the dense font icon styles should be included for text fields.

Boolean
$md-font-icon-include-dense
$custom-sizes

A map of custom sizes to apply. If you do not want any custom sizes, set the global or this param to null.

Map
$md-text-field-custom-sizes

Examples

Example Usage SCSS

@include react-md-text-fields-media;
Sass (Scss)

Requires

Used by

react-md-text-field-container-mobile
@mixin react-md-text-field-container-mobile($include-block: $md-text-field-include-block) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text-field-container on mobile devices. This should normally be used within the react-md-text-fields-mobile mixin.

Parameters

NameDescriptionTypeDefault value
$include-block

Boolean if block styling should be included.

Boolean
$md-text-field-include-block

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @import react-md-text-field-container-mobile;
}
Sass (Scss)

Used by

react-md-text-field-container-desktop
@mixin react-md-text-field-container-desktop($include-block: $md-text-field-include-block) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text-field-container on desktop screens. This should normally be used within the react-md-text-fields-desktop mixin.

Parameters

NameDescriptionTypeDefault value
$include-block

Boolean if block styling should be included.

Boolean
$md-text-field-include-block

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @import react-md-text-field-container-desktop;
}
Sass (Scss)

Used by

react-md-text-field-container-media
@mixin react-md-text-field-container-media($include-block: $md-text-field-include-block) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for the text-field container.

Parameters

NameDescriptionTypeDefault value
$include-block

Boolean if block styling should be included.

Boolean
$md-text-field-include-block

Examples

Example Usage SCSS

@import react-md-text-field-container-media;
Sass (Scss)

Requires

react-md-text-field-mobile
@mixin react-md-text-field-mobile($include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates the CSS for styling text fields on a mobile device. This should be used within media queries.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

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

Requires

Used by

react-md-text-field-desktop
@mixin react-md-text-field-desktop($include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates the CSS for styling text fields on a mobile device. This should be used within media queries.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

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

Requires

Used by

react-md-text-field-media
@mixin react-md-text-field-media($include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for text fields on mobile and desktop devices. This is really only helpful if you do not use the react-md-text-fields mixin.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

@include react-md-text-field-media;
Sass (Scss)

Requires

react-md-text-field-floating-label-mobile
@mixin react-md-text-field-floating-label-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text field floating labels for mobile devices. This should be used within a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-floating-label-mobile;
}
Sass (Scss)

Requires

Used by

react-md-text-field-floating-label-desktop
@mixin react-md-text-field-floating-label-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text field floating labels for desktop screens. This should be used within a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-floating-label-desktop;
}
Sass (Scss)

Requires

Used by

react-md-text-field-floating-label-media
@mixin react-md-text-field-floating-label-media {}
Sass (Scss)
Click to expand

Description

Includes the media queries and styles for the text field floating labels..

Parameters

None

Examples

Example Usage SCSS

@include react-md-text-field-floating-label-media;
Sass (Scss)

Requires

react-md-text-field-divider-mobile
@mixin react-md-text-field-divider-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text field dividers for mobile devices. This should be used within a media query.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-text-field-divider-desktop
@mixin react-md-text-field-divider-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for the text field dividers for mobile devices. This should be used within a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-divider-desktop;
}
Sass (Scss)

Requires

Used by

react-md-text-field-divider-media
@mixin react-md-text-field-divider-media {}
Sass (Scss)
Click to expand

Description

Includes the mobile and desktop media queries for the text field dividers.

Parameters

None

Examples

Example Usage SCSS

@include react-md-text-field-divider-media;
Sass (Scss)

Requires

react-md-text-field-icon-mobile
@mixin react-md-text-field-icon-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for text field icons on mobile devices. This should be included within a media query.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-text-field-icon-desktop
@mixin react-md-text-field-icon-desktop($include-password: $md-text-field-include-password, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the styles for text field icons on desktop screens. This should be included within a media query.

Parameters

NameDescriptionTypeDefault value
$include-password

Boolean if the password button should be included.

Boolean
$md-text-field-include-password
$include-dense-icons

Boolean if the dense font icon styles should be included for text fields.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-icon-desktop;
}
Sass (Scss)

Requires

Used by

react-md-text-field-icon-media
@mixin react-md-text-field-icon-media($include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the media queries and styles for the text field icons.

Parameters

NameDescriptionTypeDefault value
$include-dense-icons

Boolean if the dense font icon styles should be included for text fields.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@include react-md-text-field-icon-media;
Sass (Scss)

Requires

react-md-text-field-inline-indicator-mobile
@mixin react-md-text-field-inline-indicator-mobile($include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block) {}
Sass (Scss)
Click to expand

Description

Creates the styles for showing inline indicators in text fields on mobile devices. This should be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles for inline indicators should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styles should be included

Boolean
$md-text-field-include-block

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-inline-indicator-mobile;
}
Sass (Scss)

Used by

react-md-text-field-inline-indicator-desktop
@mixin react-md-text-field-inline-indicator-desktop($include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the styles for showing inline indicators in text fields on desktop screens. This should be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles for inline indicators should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styles should be included.

Boolean
$md-text-field-include-block
$include-dense-icons

Boolean if the dense icons styles should be included.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-inline-indicator-desktop;
}
Sass (Scss)

Used by

react-md-text-field-inline-indicator-media
@mixin react-md-text-field-inline-indicator-media($include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block) {}
Sass (Scss)
Click to expand

Description

Includes the media queries for showing inline indicators in text fields.

Parameters

NameDescriptionTypeDefault value
$include-floating-label

Boolean if the floating label styles for inline indicators should be included.

Boolean
$md-text-field-include-floating-label
$include-block

Boolean if the block styles should be included

Boolean
$md-text-field-include-block

Examples

Example Usage SCSS

@include react-md-text-field-inline-indicator-media;
Sass (Scss)

Requires

react-md-text-field-custom-size-mobile
@mixin react-md-text-field-custom-size-mobile($name, $list, $include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates the styles for a custom sized text field for mobile devices. This should normally be used within the react-md-text-field-custom-sizes-mobile mixin.

Parameters

NameDescriptionTypeDefault value
$name

The custom size name.

String
$list

A list containing the font size, the transition-time, the mobile y position and the desktop y position.

List
$include-floating-label

Boolean if floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-custom-size-mobile('title', (34px, .25s, 46px, 34px));
Sass (Scss)

Used by

See

react-md-text-field-custom-size-desktop
@mixin react-md-text-field-custom-size-desktop($name, $list, $include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates the styles for a custom sized text field for desktop screens. This should normally be used within the react-md-text-field-custom-sizes-desktop mixin.

Parameters

NameDescriptionTypeDefault value
$name

The custom size name.

String
$list

A list containing the font size, the transition-time, the mobile y position and the desktop y position.

List
$include-floating-label

Boolean if floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-custom-size-desktop('title', (34px, .25s, 46px, 34px));
Sass (Scss)

Used by

See

react-md-text-field-custom-sizes-mobile
@mixin react-md-text-field-custom-sizes-mobile($custom-sizes: $md-text-field-custom-sizes, $include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates all the styles for all the custom sizes for text fields for mobile devices. This should normally be used in a media query or the react-md-text-fields mixin.

Parameters

NameDescriptionTypeDefault value
$custom-sizes

A map of custom sizes to use

Map
$md-text-field-custom-sizes
$include-floating-label

Boolean if floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-text-field-custom-sizes-mobile($md-text-field-custom-sizes);
}
Sass (Scss)

Requires

Used by

See

react-md-text-field-custom-sizes-desktop
@mixin react-md-text-field-custom-sizes-desktop($custom-sizes: $md-text-field-custom-sizes, $include-floating-label: $md-text-field-include-floating-label) {}
Sass (Scss)
Click to expand

Description

Creates all the styles for all the custom sizes for text fields for desktop screens. This should normally be used in a media query or the react-md-text-fields mixin.

Parameters

NameDescriptionTypeDefault value
$custom-sizes

A map of custom sizes to use

Map
$md-text-field-custom-sizes
$include-floating-label

Boolean if floating label styles should be included.

Boolean
$md-text-field-include-floating-label

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-text-field-custom-sizes-desktop($md-text-field-custom-sizes);
}
Sass (Scss)

Requires

Used by

See

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-tooltips-mobile
@mixin react-md-tooltips-mobile {}
Sass (Scss)
Click to expand

Description

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

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-tooltips-desktop
@mixin react-md-tooltips-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for tooltips on desktop screens. This should normally be used in a media query.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-tooltips-media
@mixin react-md-tooltips-media {}
Sass (Scss)
Click to expand

Description

Includes the media queries for tooltips on mobile devices and desktop screens.

Parameters

None

Examples

Example Usage SCSS

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

Requires

Used by

react-md-typography-mobile
@mixin react-md-typography-mobile($extend-html-tags: $md-typography-extended) {}
Sass (Scss)
Click to expand

Description

Creates the CSS for typography on mobile devices. If the $extend-html-tags param is true, the h6, h5, h4, and p tags will also be modified. This should most likely be used within a media query.

Parameters

NameDescriptionTypeDefault value
$extend-html-tags

Boolean if the base html tags should be updated.

Boolean
$md-typography-extended

Examples

Example Usage SCSS

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

Requires

Used by

react-md-typography-desktop
@mixin react-md-typography-desktop($extend-html-tags: $md-typography-extended) {}
Sass (Scss)
Click to expand

Description

Creates the CSS for typography on desktop screens. If the $extend-html-tags param is true, the h6, h5, h4, and p tags will also be modified. This should most likely be used within a media query.

Parameters

NameDescriptionTypeDefault value
$extend-html-tags

Boolean if the base html tags should be updated.

Boolean
$md-typography-extended

Examples

Example Usage SCSS

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

Requires

Used by

react-md-typography-media
@mixin react-md-typography-media($extend-html-tags: $md-typography-extended) {}
Sass (Scss)
Click to expand

Description

Includes the mobile and desktop media queries for typography. If the $extend-html-tags param is true, the h6, h5, h4, and p tags will also be modified.

Parameters

NameDescriptionTypeDefault value
$extend-html-tags

Boolean if the base html tags should be updated.

Boolean
$md-typography-extended

Examples

Example Usage SCSS

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

Requires

Used by