accessibility

variables

md-content-jump-left-active

$md-content-jump-left-active: 0 !default;

Description

The left position of the content jump link when it has gained keyboard focus. This is for the link that appears in the navigation drawer that skips to the main content.

Type

Number

Used by

md-enable-ios-scroll-momentum

$md-enable-ios-scroll-momentum: true !default;

Description

Boolean if iOS should allow scroll momentum in places where manual scrolling is enabled.

Type

Boolean

md-content-jump-left-inactive

$md-content-jump-left-inactive: -1000px !default;

Description

The left position of the content jump link when it does not have keyboard focus. This is for the link that appears in the navigation drawer that skips to the main content.

Type

Number

Used by

md-content-jump-top-active

$md-content-jump-top-active: $md-content-jump-left-active !default;

Description

The top position of the content jump link when it has gained keyboard focus. This is for the link that appears in the navigation drawer that skips to the main content.

Type

Number

Used by

md-content-jump-top-inactive

$md-content-jump-top-inactive: $md-content-jump-left-inactive !default;

Description

The top position of the content jump link when it does not have keyboard focus. This is for the link that appears in the navigation drawer that skips to the main content.

Type

Number

Used by

mixins

react-md-accessibility

@mixin react-md-accessibility() { ... }

Description

Creates the accessible styles and class names.

This will create the following class names:

  • .md-fake-btn
  • .md-no-scroll
  • .md-pointer--hover
  • .md-pointer--none
  • .md-content-jump

Parameters

None.

Example

Example Usage SCSS

@include react-md-accessibility;

Requires

Used by

md-ios-scroll-momentum

@mixin md-ios-scroll-momentum($enable-momentum: $md-enable-ios-scroll-momentum) { ... }

Description

A simple mixin that will add scroll momentum to a class ONLY if the momentum is enabled via the mixin or the $md-enable-ios-scroll-momentum variable.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$enable-momentum

Boolean if the momentum should be added

Boolean$md-enable-ios-scroll-momentum

Used by

autocompletes

variables

md-inline-autocomplete

$md-inline-autocomplete: true !default;

Description

Boolean if the inline autocompletes should be included by default.

Type

Boolean

md-autocomplete-suggestion-top

$md-autocomplete-suggestion-top: 12px !default;

Description

The position from the top of the text field that the inline autocomplete suggestion should appear.

Type

Number

Used by

md-autocomplete-suggestion-mobile-floating-top

$md-autocomplete-suggestion-mobile-floating-top: $md-text-field-mobile-floating-label-margin !default;

Description

The position from the top of the text field with a floating label that the inline autocomplete suggestion should appear on mobile devices.

Type

Number

Used by

md-autocomplete-suggestion-mobile-block-top

$md-autocomplete-suggestion-mobile-block-top: 18px !default;

Description

The position from the top of a blocked text field that the inline autocomplete suggestion should appear on mobile devices.

Type

Number

Used by

md-autocomplete-suggestion-desktop-floating-top

$md-autocomplete-suggestion-desktop-floating-top: $md-text-field-desktop-floating-label-margin !default;

Description

The position from the top of the text field with a floating label that the inline autocomplete suggestion should appear.

Type

Number

Used by

md-autocomplete-suggestion-desktop-block-top

$md-autocomplete-suggestion-desktop-block-top: 15px !default;

Description

The position from the top of a blocked text field that the inline autocomplete suggestion should appear on desktop screens.

Type

Number

Used by

mixins

react-md-autocompletes

@mixin react-md-autocompletes($light-theme: $md-light-theme, $include-inline: $md-inline-autocomplete) { ... }

Description

Includes any additional styles for autocompletes if include-inline is true. The Autocomplete component really depends on all the styles for text fields and menus.

This will end up creating the .md-autocomplete-suggestion class name that is used for the inline suggestions for autocompletes.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean$md-inline-autocomplete

Requires

Used by

See

autocompletes, media-queries

mixins

react-md-autocompletes-mobile

@mixin react-md-autocompletes-mobile($include-inline: $md-inline-autocomplete) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean$md-inline-autocomplete

Example

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-autocompletes-mobile;
}

Requires

Used by

react-md-autocompletes-desktop

@mixin react-md-autocompletes-desktop($include-inline: $md-inline-autocomplete) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean$md-inline-autocomplete

Example

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-autocompletes-desktop;
}

Requires

Used by

react-md-autocompletes-media

@mixin react-md-autocompletes-media($include-inline: $md-inline-autocomplete) { ... }

Description

Includes the media queries for autocompletes.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean$md-inline-autocomplete

Example

Example Usage SCSS

@include react-md-autocompletes-media;

Requires

Used by

autocompletes, themes

mixins

react-md-theme-autocompletes

@mixin react-md-theme-autocompletes($light-theme: $md-light-theme, $include-inline: $md-inline-autocomplete) { ... }

Description

Updates the styles for the autocompletes ONLY if the $light-theme does not equal the $md-light-theme.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme
$include-inline

Boolean if the inline styles for autocompletes should be included.

Boolean$md-inline-autocomplete

Requires

avatars

variables

md-avatar-size

$md-avatar-size: 40px !default;

Description

The default size for an avatar

Type

Number

Used by

md-avatar-border-radius

$md-avatar-border-radius: 50% !default;

Description

The border radius for an avatar.

Type

Number

Used by

md-avatar-border-color

$md-avatar-border-color: null !default;

Description

The border color to use for an avatar. If this value is null, the border color will be the current theme's divider color.

Type

Color

Used by

md-avatar-default-background

$md-avatar-default-background: $md-grey-700 !default;

Description

The default background color for an avatar.

Type

Color

Used by

md-avatar-default-color

$md-avatar-default-color: $md-grey-100 !default;

Description

The default text color for an avatar.

Type

Color

Used by

md-avatar-include-suffixes

$md-avatar-include-suffixes: true !default;

Description

Boolean if the avatar color suffixes should be included by default.

Type

Boolean

md-avatar-include-icon-sized

$md-avatar-include-icon-sized: true !default;

Description

Boolean if the md-avatar--icon-sized class name should also be included. This will force an avatar to be the same size as an icon.

Type

Boolean

md-avatar-colors

$md-avatar-colors: (
  'red': $md-red-a-700 $md-red-50,
  'pink': $md-pink-600 $md-white-base,
  'purple': $md-purple-700 $md-purple-100,
  'deep-purple': $md-deep-purple-900 $md-deep-purple-100,
  'indigo': $md-indigo-600 $md-indigo-100,
  'blue': $md-blue-a-700 $md-white-base,
  'light-blue': $md-light-blue-300 $md-deep-purple-900,
  'cyan': $md-cyan-400 $md-teal-900,
  'teal': $md-teal-a-400 $md-teal-900,
  'green': $md-green-800 $md-green-50,
  'light-green': $md-light-green-300 $md-green-900,
  'lime': $md-lime-400 $md-teal-800,
  'yellow': $md-yellow-a-200 $md-brown-500,
  'amber': $md-amber-400 $md-brown-800,
  'orange': $md-orange-600 $md-grey-900,
  'deep-orange': $md-deep-orange-a-400 $md-grey-900,
  'brown': $md-brown-500 $md-brown-50,
  'grey': $md-grey-700 $md-grey-100,
  'blue-grey': $md-blue-grey-700 $md-blue-grey-50,
) !default;

Description

A map of avatar color suffixes to use. Each key will be used as an avatar suffix name, and the value will be a list of two colors where the first item is the background color and the second item is the text color.

The default colors where chosen to pass the WebAIM for large text only. If these values are changed, it should pass them as well.

Type

Map

Used by

mixins

react-md-avatars

@mixin react-md-avatars($light-theme: $md-light-theme, $include-media: $md-media-included, $include-suffixes: $md-avatar-include-suffixes, $include-icon-sized: $md-avatar-include-icon-sized, $include-dense: $md-font-icon-include-dense) { ... }

Description

Includes the styles for the Avatars.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme
$include-media

Boolean if the media queries for avatars should also be included. This will really only create additional styles if $include-dense is true as well.

Boolean$md-media-included
$include-suffixes

Boolean if the avatar color suffixes should be included.

Boolean$md-avatar-include-suffixes
$include-icon-sized

Boolean if icon sized avatars should be included.

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

Boolean if the dense spec of icons should be included.

Boolean$md-font-icon-include-dense

Requires

Used by

avatars, media-queries

mixins

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

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

parameter Nameparameter Descriptionparameter Typeparameter Default 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

avatars, themes

mixins

react-md-theme-avatars

@mixin react-md-theme-avatars($light-theme: $md-light-theme) { ... }

Description

This will only update the base avatar's border color if the $light-theme is different than $md-light-theme. If you want to add different colors, you should use the react-md-theme-avatar mixin.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme

Requires

Used by

See

react-md-theme-avatar

@mixin react-md-theme-avatar($bg-color, $text-color, $suffix) { ... }

Description

Creates a single theme for the Avatar. It simply creates a class name with the new background and text color with the given suffix.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$bg-color

The background color to use.

Color none
$text-color

The text color to use.

Color none
$suffix

The class name suffix to use.

String none

Example

Simple Example SCSS

@include react-md-theme-avatar(#000, #fff, black);

Simple Example CSS Output

.md-avatar--black {
  background: #000;
  color: #fff;
}

Used by

badges

variables

md-badge-include-circular

$md-badge-include-circular: true !default;

Description

Boolean if the styles for a circular badge should be included.

Type

Boolean

md-badge-include-default

$md-badge-include-default: true !default;

Description

Boolean if the default badge styles should be included. This will be just a background color change for the badge.

Type

Boolean

md-badge-top

$md-badge-top: -8px !default;

Description

The top position for a badge within the container. You can set this value to null if it should not be applied.

Type

Number

Used by

md-badge-right

$md-badge-right: -8px !default;

Description

The right position for a badge within the container. You can set this value to null if it should not be applied.

Type

Number

Used by

md-badge-bottom

$md-badge-bottom: null !default;

Description

The bottom position for a badge within the container. You can set this value to null if it should not be applied.

Type

Number

Used by

md-badge-left

$md-badge-left: null !default;

Description

The left position for a badge within the container. You can set this value to null if it should not be applied.

Type

Number

Used by

md-badge-circular-border-radius

$md-badge-circular-border-radius: 50% !default;

Description

The border-radius to apply to the circular badge.

Type

Number

Used by

md-badge-circular-font-size

$md-badge-circular-font-size: 10px !default;

Description

The font size to use within a circular badge. type Number

Used by

md-badge-circular-height

$md-badge-circular-height: 24px !default;

Description

The height to use for a circular badge.

Type

Number

Used by

md-badge-circular-width

$md-badge-circular-width: $md-badge-circular-height !default;

Description

The width to use for a circular badge.

Type

Number

Used by

md-badge-light-theme-default-color

$md-badge-light-theme-default-color: rgba(0, 0, 0, .2) !default;

Description

The background color to use for a default badge in the light theme.

Type

Color

Used by

md-badge-dark-theme-default-color

$md-badge-dark-theme-default-color: get-color('background', false) !default;

Description

The background color to use for a default badge in the dark theme.

Type

Color

Used by

mixins

react-md-badges

@mixin react-md-badges($light-theme: $md-light-theme, $include-circular: $md-badge-include-circular, $include-default: $md-badge-include-default) { ... }

Description

Creates the styles for a badge.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if the badge should be styled for the light theme. This really only gets applied if $md-badge-include-default is true.

Boolean$md-light-theme
$include-circular

Boolean if the styles for a circular badge should be included.

Boolean$md-badge-include-circular
$include-default

Boolean if default styles should be created for a badge. This will be the background color of the badge.

Boolean$md-badge-include-default

Requires

Used by

react-md-theme-badges

@mixin react-md-theme-badges($light-theme: $md-light-theme, $include-default: $md-badge-include-default) { ... }

Description

Only updates the default styles for a badge if the $light-theme does not equal $md-light-theme and the default badge styles should be included.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme
$include-default

Boolean if the default styles for a badge should be included.

Boolean$md-badge-include-default

Requires

Used by

base, themes

mixins

react-md-everything

@mixin react-md-everything() { ... }

Description

Includes every component, transition, and typography including their media queries if the $md-media-included variable is true. You can modify any global variables before including this mixin to change the overall theme.

Parameters

None.

Example

Example Usage SCSS

@import 'react-md';
@include react-md-everything;

Requires

react-md-theme-everything

@mixin react-md-theme-everything($primary-color, $secondary-color, $light-theme: $md-light-theme, $html-class-name: null, $error-color: $md-error-color, $progress-swatch: $md-linear-progress-swatch, $primary-opacity: $md-primary-hover-opacity, $primary-background-text-color: $md-primary-background-text-color, $secondary-opacity: $md-secondary-hover-opacity, $secondary-background-text-color: $md-secondary-background-text-color, $data-table-contextual-fallback-color: $md-data-table-contextual-fallback-color, $linear-progress-fallback-color: $md-linear-progress-fallback-color, $switch-ball-fallback-color: $md-switch-ball-fallback-color) { ... }

Description

Updates the styles of every component with the new theme colors. If there are components that do not change if the $light-theme variable is the same, their updated styles will not be included. This is useful if you want to switch between the light or dark theme, or even the entire theme colors while keeping the base CSS the same between all themes.

In addition, if the theme colors do not switch, those styles will not be created. So this allows the same colors between light and dark themes.

If you switch between the light and dark theme, you will need to give a $html-class-name That will nest every component inside.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$primary-color

The primary color to use.

Color none
$secondary-color

The secondary color to use.

Color none
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme
$html-class-name

The html className to nest every component in. This should really be used if switching from the light or dark theme.

Stringnull
$error-color

The error color to use.

Color$md-error-color
$progress-swatch

The color for the linear progress swatch color.

Number$md-linear-progress-swatch
$primary-opacity

The opacity to apply to the primary color.

Number$md-primary-hover-opacity
$primary-background-text-color

The text color for any text that appears inside the md-background--primary class name.

Color$md-primary-background-text-color
$secondary-opacity

The opacity to apply to the secondary color.

Number$md-secondary-hover-opacity
$secondary-background-text-color

The text color for any text that appears inside the md-background--secondary class name.

Color$md-secondary-background-text-color
$data-table-contextual-fallback-color

An optional fallback color for the data table's contextual header when the $primary-color is not material design color.

Color$md-data-table-contextual-fallback-color
$linear-progress-fallback-color

An optional fallback color for the linear progress when the $secondary-color is not a material design color.

Color$md-linear-progress-fallback-color
$switch-ball-fallback-color

An optional color to use for the switch's ball thumb when the $secondary-color is not a material design color.

Color$md-switch-ball-fallback-color

Example

Example Theme Change SCSS

@import 'react-md';
$md-primary-color: $md-deep-purple-500;
$md-secondary-color: $md-orange-a-400;

@include react-md-everything;

.blue-theme {
  @include react-md-theme-everything(
    $md-cyan-500,
    $md-yellow-a-700,
  );
}

Example Dark Theme Change SCSS

@import 'react-md';
$md-primary-color: $md-deep-purple-500;
$md-secondary-color: $md-orange-a-400;

@include react-md-everything;

@include react-md-theme-everything(
  $md-primary-color,
  $md-secondary-color,
  false,
  dark-theme,
  $md-error-color,
  $md-linear-progress-swatch
);

Requires

bottom-navigations

variables

md-bottom-navigation-shifting-ink-color

$md-bottom-navigation-shifting-ink-color: rgba($md-white-base, .12) !default;

Description

The default ink color to use for a shifting bottom navigation.

Type

Color

Used by

md-bottom-navigation-transition-time

$md-bottom-navigation-transition-time: $md-transition-time * 2 !default;

Description

The transition time it takes for the bottom navigation to slide out of view when it is dynamic. It is also the transition time for switching the background color.

Type

Number

Used by

md-bottom-navigation-include-shifting

$md-bottom-navigation-include-shifting: true !default;

Description

Boolean if the shifting bottom navigation style should be included by default.

Type

Boolean

md-bottom-navigation-include-dynamic

$md-bottom-navigation-include-dynamic: true !default;

Description

Boolean if the dynamic bottom navigation style should be included by default.

Type

Boolean

md-bottom-navigation-height

$md-bottom-navigation-height: 56px !default;

Description

The height for the bottom navigation bar.

Type

Number

Used by

md-bottom-navigation-max-width

$md-bottom-navigation-max-width: 168px !default;

Description

The max width for a tab on the bottom navigation.

Type

Number

Used by

md-bottom-navigation-top-padding-active

$md-bottom-navigation-top-padding-active: 6px !default;

Description

The top padding for a bottom navigation's tab when active.

Type

Number

Used by

md-bottom-navigation-top-padding-inactive

$md-bottom-navigation-top-padding-inactive: 8px !default;

Description

The top padding for a bottom navigation's tab when inactive.

Type

Number

Used by

md-bottom-navigation-bottom-padding

$md-bottom-navigation-bottom-padding: 10px !default;

Description

The bottom padding for a bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-lr-padding

$md-bottom-navigation-lr-padding: 12px !default;

Description

The left and right padding to apply to a bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-fixed-min-width

$md-bottom-navigation-fixed-min-width: 80px !default;

Description

The min width for a fixed bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-shifting-active-min-width

$md-bottom-navigation-shifting-active-min-width: 96px !default;

Description

The min width for a shifting bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-shifting-inactive-min-width

$md-bottom-navigation-shifting-inactive-min-width: 56px !default;

Description

The min width for an inactive shifting bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-shifting-inactive-max-width

$md-bottom-navigation-shifting-inactive-max-width: 96px !default;

Description

The max width for an inactive shifting bottom navigation's tab.

Type

Number

Used by

mixins

react-md-bottom-navigations

@mixin react-md-bottom-navigations($include-shifting: $md-bottom-navigation-include-shifting, $include-dynamic: $md-bottom-navigation-include-dynamic) { ... }

Description

Creates the styles for bottom navigations. If both the include-shifting and include-dynamic params are false, no styles will be created.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$include-shifting

Boolean if the styles for a shifting bottom navigation should be included.

Boolean$md-bottom-navigation-include-shifting
$include-dynamic

Boolean if the styles for a dynamic bottom navigation should be included.

Boolean$md-bottom-navigation-include-dynamic

Example

Utility Classes

The bottom navigations have a utility class name to offset any content to prevent it from underlapping the
bottom navigations. Just apply the `md-bottom-navigation-offset` class name to whatever element or component
to add padding bottom equal to the height of the bottom navigation.

```js
<div>
  <main className="md-bottom-navigation-offset">Some Content</main>
  <BottomNavigation {...props} />
</div>
```

Requires

Used by

react-md-bottom-navigations-nav

@mixin react-md-bottom-navigations-nav($include-shifting: $md-bottom-navigation-include-shifting) { ... }

Description

Creates the styles for a tab in the bottom navigation nav item (link). This should normally be used within the react-md-bottom-navigations mixin.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$include-shifting

Boolean if the styles for a shifting bottom navigation should be included.

Boolean$md-bottom-navigation-include-shifting

Requires

Used by

bottom-navigations, themes

mixins

react-md-theme-bottom-navigations-colored

@mixin react-md-theme-bottom-navigations-colored($bg-color, $label-color: $md-white-base, $ink-color: $md-bottom-navigation-shifting-ink-color) { ... }

Description

Styles a bottom navigation that is colored to update the .md-background--primary color to a new color. It also will optionally update the label's color and the ink's color if they do not equal the defaults. This is mostly used when you want to update the navigation drawer's color when a new tab is clicked.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$bg-color

The background color to force for the .md-background--primary of the bottom navigation.

Color none
$label-color

The color to style the label. If this is equal to $md-white-base, the styles will not be created.

Color$md-white-base
$ink-color

The ink color to use for this theme. If it equals the $md-bottom-navigation-shifting-ink-color, the styles will not be included.

Color$md-bottom-navigation-shifting-ink-color

Example

Example Usage SCSS

.another-theme {
  @include react-md-theme-bottom-navigations-color($md-deep-purple-500);
}

Example Usage React Components

<div className={cn({ 'another-theme': themeTabActive })}>
  <BottomNavigation
    links={[{ label: 'Woop', }, { label: 'Theme Tab', }, { label: 'Noop' }]}
    onNavChange={activeTabIndex => this.setState({ themeTabActive: activeTabIndex === 1 })}
  />
</div>

Requires

bottom-navigations, z-indexes

variables

md-bottom-navigation-z-index

$md-bottom-navigation-z-index: 11 !default;

Description

The z-index to use for bottom navigations

Type

Number

Used by

buttons

variables

md-btn-include-flat

$md-btn-include-flat: true !default;

Description

Boolean if the flat button styles should be included.

Type

Boolean

md-btn-include-raised

$md-btn-include-raised: true !default;

Description

Boolean if the raised button styles should be included.

Type

Boolean

md-btn-include-icon

$md-btn-include-icon: true !default;

Description

Boolean if the icon button styles should be included.

Type

Boolean

md-btn-include-floating

$md-btn-include-floating: true !default;

Description

Boolean if the floating button styles should be included.

Type

Boolean

md-btn-text-border-radius

$md-btn-text-border-radius: 2px !default;

Description

The border radius to apply to text buttons.

Type

Number

Used by

md-btn-mobile-font-size

$md-btn-mobile-font-size: 14px !default;

Description

The font size for buttons on mobile devices.

Type

Number

Used by

See

md-btn-mobile-height

$md-btn-mobile-height: 36px !default;

Description

The height for button on mobile devices.

Type

Number

Used by

See

md-btn-mobile-floating-margin

$md-btn-mobile-floating-margin: 16px !default;

Description

The minimum margin to use for fixed floating buttons on mobile-devices.

Type

Number

Used by

See

md-btn-desktop-font-size

$md-btn-desktop-font-size: 13px !default;

Description

The font size for buttons on desktop screens.

Type

Number

Used by

See

md-btn-desktop-height

$md-btn-desktop-height: 32px !default;

Description

The height for buttons on desktop screens.

Type

Number

Used by

See

md-btn-desktop-floating-margin

$md-btn-desktop-floating-margin: 24px !default;

Description

The minimum margin to use for fixed floating buttons on desktop screens.

Type

Number

Used by

See

md-btn-tb-padding

$md-btn-tb-padding: 8px !default;

Description

The too and bottom padding to apply to text buttons.

Type

Number

Used by

md-btn-lr-padding

$md-btn-lr-padding: 16px !default;

Description

The left and right padding to apply to text buttons.

Type

Number

Used by

md-btn-min-width

$md-btn-min-width: 88px !default;

Description

The min width for a flat or raised button.

Type

Number

Used by

md-btn-floating-size

$md-btn-floating-size: 56px !default;

Description

The default size for a floating button (FAB).

Type

Number

Used by

md-btn-floating-dense-size

$md-btn-floating-dense-size: 48px !default;

Description

The size for a floating button when using the dense spec for icons.

Type

Number

Used by

md-btn-floating-mini-size

$md-btn-floating-mini-size: 40px !default;

Description

The mini size for a floating button.

Type

Number

Used by

md-btn-floating-fixed-positions

$md-btn-floating-fixed-positions: ('tl' 'tr' 'bl' 'br') !default;

Description

The available floating button fixed positions.

Type

List

md-btn-icon-size

$md-btn-icon-size: $md-font-icon-size * 2 !default;

Description

The size for an icon button.

Type

Number

Used by

md-btn-icon-padding

$md-btn-icon-padding: $md-btn-icon-size / 4 !default;

Description

The padding for an icon button.

Type

Number

Used by

md-btn-icon-dense-size

$md-btn-icon-dense-size: $md-font-icon-dense-size * 2 !default;

Description

The size for a icon button when using the dense spec.

Type

Number

Used by

md-btn-icon-dense-padding

$md-btn-icon-dense-padding: $md-btn-icon-dense-size / 4 !default;

Description

The padding to use for a dense icon button.

Type

Number

Used by

md-btn-icon-border-radius

$md-btn-icon-border-radius: 50% !default;

Description

The border radius to apply to icon buttons.

Type

Number

Used by

md-btn-light-theme-base-color

$md-btn-light-theme-base-color: #999 !default;

Description

The base color to use for default buttons in the light theme.

Type

Color

md-btn-light-theme-hover-color

$md-btn-light-theme-hover-color: rgba($md-btn-light-theme-base-color, .12) !default;

Description

The background color to use for default buttons in the light theme.

Type

Color

Used by

md-btn-light-theme-disabled-color

$md-btn-light-theme-disabled-color: rgba($md-btn-light-theme-base-color, .2) !default;

Description

The background color to use for default buttons in the light theme that have been disabled.

Type

Color

md-btn-light-theme-pressed-color

$md-btn-light-theme-pressed-color: rgba($md-btn-light-theme-base-color, .4) !default;

Description

The background color to use for default buttons that have been pressed in the light theme.

Type

Color

md-btn-dark-theme-base-color

$md-btn-dark-theme-base-color: #ccc !default;

Description

The base color to use for default buttons in the dark theme.

Type

Color

md-btn-dark-theme-hover-color

$md-btn-dark-theme-hover-color: rgba($md-btn-dark-theme-base-color, .12) !default;

Description

The hover color to use for default buttons in the dark theme.

Type

Color

Used by

md-btn-dark-theme-disabled-color

$md-btn-dark-theme-disabled-color: rgba($md-btn-dark-theme-base-color, .2) !default;

Description

The background color to use for default buttons in the dark theme that have been disabled.

Type

Color

md-btn-dark-theme-pressed-color

$md-btn-dark-theme-pressed-color: rgba($md-btn-dark-theme-base-color, .25) !default;

Description

The background color to use for default buttons that have been pressed in the dark theme.

Type

Color

md-btn-text-height

$md-btn-text-height: null !default;

Description

An optional height to apply to a text button for all screen sizes. This will take precedence over the mobile/desktop variables.

A side effect of using this variable is that the buttons will not be updated on mobile devices to have additional styles to make them accessible for touch users.

Type

Number

Used by

See

md-btn-text-font-size

$md-btn-text-font-size: null !default;

Description

An optional font size to apply to a text button for all screen sizes. This will take precedence over the mobile/desktop variables.

Type

Number

Used by

See

md-btn-floating-margin

$md-btn-floating-margin: null !default;

Description

An optional margin to get applied to floating buttons that are fixed on a page for all screen sizes. This will take precedence over the mobile/desktop variables.

Type

Number

Used by

See

mixins

react-md-buttons

@mixin react-md-buttons($primary-color: $md-primary-color, $secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-media: $md-media-included, $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) { ... }

Description

Includes the styles for material design buttons. Each button type can optionally be excluded. However, if the floating styles are included, the icon styles will also be included.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$primary-color

The primary color to theme the buttons with.

Color$md-primary-color
$secondary-color

The secondary color to theme the buttons with.

Color$md-secondary-color
$light-theme

Boolean if the buttons should be styled for the light theme.

Boolean$md-light-theme
$include-media

Boolean if the media queries should also be included in this mixin.

Boolean$md-media-included
$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

Example

Example Usage SCSS

@include react-md-buttons

Requires

Used by

react-md-button-fixed-positions

@mixin react-md-button-fixed-positions($margin, $positions: $md-btn-floating-fixed-positions) { ... }

Description

A simple mixin for applying a screen edge margin positioning to a fixed button. If the position name contains the first letter of the positioning style, the margin will get applied to that style.

So if the position name is 'tl', the margin will get applied to the top and the `left.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$margin

the button's margin from the screen edge.

Number none
$positions

The positions to create the styles for.

List$md-btn-floating-fixed-positions

Used by

buttons, media-queries

mixins

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

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

parameter Nameparameter Descriptionparameter Typeparameter Default 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

Example

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-buttons-mobile;
}

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

Description

Creates the styles for buttons on desktop screens.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default 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

Example

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-buttons-desktop;
}

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default 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

Example

Example Usage SCSS

@include react-md-buttons-media;

Requires

Used by

buttons, themes

mixins

react-md-theme-buttons

@mixin react-md-theme-buttons($primary-color: $md-primary-color, $secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-flat: $md-btn-include-flat, $include-raised: $md-btn-include-raised, $include-icon: $md-btn-include-icon, $include-floating: $md-btn-include-floating) { ... }

Description

Themes the buttons ONLY when the $primary-color does not equal the $md-primary-color, the $secondary-color does not equal the $md-secondary-color, or the $md-light-theme does not equal the $md-light-theme.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$primary-color

The primary color to theme the buttons with.

Color$md-primary-color
$secondary-color

The secondary color to theme the buttons with.

Color$md-secondary-color
$light-theme

Boolean if the buttons should be styled for the light theme.

Boolean$md-light-theme
$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

Example

Example Usage SCSS

@include react-md-theme-buttons($md-orange-500, $md-purple-a-200, !$md-light-theme);

Requires

Used by

buttons, z-indexes

variables

md-btn-fixed-z-index

$md-btn-fixed-z-index: 10 !default;

Description

The default z index for fixed floating buttons

Type

Number

Used by

See

cards

variables

md-card-include-text

$md-card-include-text: true !default;

Description

Boolean if the styles for the CardText component should be included by default.

Type

Boolean

md-card-include-title

$md-card-include-title: true !default;

Description

Boolean if the styles for the CardTitle component should be included by default.

Type

Boolean

md-card-include-title-avatar

$md-card-include-title-avatar: true !default;

Description

Boolean if the styles for having an icon in the CardTitle component should be included by default. IF this is set, the $md-card-include-title will automatically be true.

Type

Boolean

md-card-include-actions

$md-card-include-actions: true !default;

Description

A boolean if the styles for the CardActions component should be included by default.

Type

Boolean

md-card-include-tables

$md-card-include-tables: true !default;

Description

Boolean if the styles for tables within cards should be included.

Type

Boolean

md-card-padding-extra

$md-card-padding-extra: 24px !default;

Description

When the card part is either the first or last in the card, this padding will be applied instead of the $md-default-padding.

Type

Number

Used by

See

md-card-text-font-size

$md-card-text-font-size: 14px !default;

Description

The font size for the CardText component.

Type

Number

Used by

md-card-title-font-size

$md-card-title-font-size: 14px !default;

Description

The card title's font size.

Type

Number

Used by

md-card-title-large-font-size

$md-card-title-large-font-size: 24px !default;

Description

The card title's larger font size.

Type

Number

Used by

mixins

react-md-cards

@mixin react-md-cards($include-media: $md-media-included, $include-text: $md-card-include-text, $include-title: $md-card-include-title, $include-title-avatar: $md-card-include-title-avatar, $include-actions: $md-card-include-actions) { ... }

Description

Includes the styles for cards. The different sections can be excluded by setting the parameter to false. If the react-md-everything mixin is being used, set the corresponding variables to false before including the mixin.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$include-media

Boolean if the media queries should also be included.

Boolean$md-media-included
$include-text

Boolean if the CardText component styles should be included.

Boolean$md-card-include-text
$include-title

Boolean if the CardTitle component styles should be included.

Boolean$md-card-include-title
$include-title-avatar

Boolean if the styles for an avatar in the CardTitle component should also be included. If this is true, and the include-title param is false, it will behave as if the include-title was also set to true.

Boolean$md-card-include-title-avatar
$include-actions

Boolean if the CardActions component styles should be included.

Boolean$md-card-include-actions

Example

All Defaults

@include react-md-cards;

Excluding Some In Mixin

@include react-md-cards(true, true, false, false, false);

Excluding Some With react-md-everything

@import '~react-md/src/scss/react-md';

$md-card-include-actions: false;
$md-card-include-title-avatar: false;
@include react-md-everything;

Requires

Used by

react-md-cards-text

@mixin react-md-cards-text() { ... }

Description

Includes the styles for the CardText component only.

Parameters

None.

Requires

Used by

react-md-cards-title

@mixin react-md-cards-title() { ... }

Description

Includes the styles for the CardTitle component only.

Parameters

None.

Requires

Used by

react-md-cards-title-avatar

@mixin react-md-cards-title-avatar() { ... }

Description

Includes the styles for an avatar in the CardTitle component only.

This really requires the styles of avatars to already be included.

Parameters

None.

Requires

Used by

See

react-md-cards-actions

@mixin react-md-cards-actions() { ... }

Description

Includes the styles for the CardActions component only.

This really depends on the styles of dialog footers to already be included.

Parameters

None.

Used by

See

cards, data-tables

mixins

react-md-cards-tables

@mixin react-md-cards-tables() { ... }

Description

Creates the styles for tables in cards. This should normally be included with the react-md-cards mixin.

Parameters

None.

Used by

chips

variables

md-chip-include-remove

$md-chip-include-remove: true !default;

Description

Boolean if the remove icon styling should be included for chips.

Type

Boolean

md-chip-include-avatar

$md-chip-include-avatar: true !default;

Description

Boolean if the chip avatar styling should be included for chips.

Type

Boolean

md-chip-include-contact

$md-chip-include-contact: true !default;

Description

Boolean if the chip contact styling should be included for chips.

Type

Boolean

md-chip-light-theme-color

$md-chip-light-theme-color: rgba($md-black-base, .87) !default;

Description

A chip's text color for when using the light theme.

Type

Color

Used by

md-chip-light-theme-bg-color

$md-chip-light-theme-bg-color: $md-grey-300 !default;

Description

A chip's background color when using the light theme.

Type

Color

Used by

md-chip-dark-theme-color

$md-chip-dark-theme-color: get-color('secondary', false) !default;

Description

The dark theme text color of a chip. This is configurable because it is not actually specified in the docs.

Type

Color

Used by

md-chip-dark-theme-bg-color

$md-chip-dark-theme-bg-color: $md-grey-600 !default;

Description

The dark theme background color of a chip. This is configurable because it is not actually specified in the docs.

Type

Color

Used by

md-chip-height

$md-chip-height: 32px !default;

Description

The height for a chip.

Type

Number

Used by

md-chip-font-size

$md-chip-font-size: 13px !default;

Description

The font size for a chip.

Type

Number

Used by

md-chip-icon-color

$md-chip-icon-color: rgba($md-black-base, .54) !default;

Description

The remove icon color for a chip.

Type

Number

Used by

md-chip-default-padding

$md-chip-default-padding: 12px !default;

Description

The default padding to apply to a chip. type Number

Used by

md-chip-avatar-left-padding

$md-chip-avatar-left-padding: 8px !default;

Description

The padding between an avatar and the chip's text.

Type

Number

Used by

md-chip-icon-padding

$md-chip-icon-padding: 4px !default;

Description

The amount of padding to use around the remove icon on a chip.

Type

Number

Used by

md-chip-icon-dense-padding

$md-chip-icon-dense-padding: 6px !default;

Description

The amount of padding to use around the remove icon on a chip when using the dense icon spec.

Type

Number

Used by

md-chip-contact-font-size

$md-chip-contact-font-size: 14px !default;

Description

The font size for a contact chip.

Type

Number

Used by

mixins

react-md-chips

@mixin react-md-chips($light-theme: $md-light-theme, $include-media: $md-media-included, $include-remove: $md-chip-include-remove, $include-avatar: $md-chip-include-avatar, $include-contact: $md-chip-include-contact, $include-dense-icons: $md-font-icon-include-dense) { ... }

Description

Includes the styles for chips. The remove, avatar, and contact styles can be excluded. If the $include-contact param is true, the avatar styles will always be included even if $include-avatar is false.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

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

Boolean$md-light-theme
$include-media

Boolean if the media queries for chips should be included. This really relies on the include-dense-icons as well.

Boolean$md-media-included
$include-remove

Boolean if the remove styles should be included.

Boolean$md-chip-include-remove
$include-avatar

Boolean if the avatar styles should be included.

Boolean$md-chip-include-avatar
$include-contact

Boolean if the contact styles should be included.

Boolean$md-chip-include-contact
$include-dense-icons

Boolean if the dense spec for icons should be included with the remove icon.

Boolean$md-font-icon-include-dense

Example

Example Usage SCSS

include react-md-chips;

Requires

Used by

react-md-chips-avatar

@mixin react-md-chips-avatar() { ... }

Description

Includes the styles for the avatars in chips.

Parameters

None.

Example

Example Usage SCSS

@include react-md-chips-avatar;

Requires

Used by

react-md-chips-remove

@mixin react-md-chips-remove() { ... }

Description

Includes the styles for the remove icons in chips.

Parameters

None.

Example

Example Usage SCSS

@include react-md-chips-remove;

Requires

Used by

react-md-chips-contact

@mixin react-md-chips-contact() { ... }

Description

Includes the styles for the contact chips.

Parameters

None.

Example

Example Usage SCSS

@include react-md-chips-contact;

Requires

Used by

chips, themes

mixins

react-md-theme-chips

@mixin react-md-theme-chips($light-theme: $md-light-theme) { ... }

Description

Updates the styles for chips based on the theme. If the light-theme equals the md-light-theme, no styles will be included.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if styling for the light theme.

Boolean$md-light-theme

Requires

Used by

collapsers

mixins

react-md-collapsers

@mixin react-md-collapsers() { ... }

Description

Creates the styles for a collapser icon

Parameters

None.

Requires

Used by

colors

variables

md-colors-include-class-names

$md-colors-include-class-names: false !default;

Description

Boolean if a class name for each color should be created.

Type

Boolean

md-red-50

$md-red-50: #ffebee;

Type

Color

md-red-100

$md-red-100: #ffcdd2;

Type

Color

md-red-200

$md-red-200: #ef9a9a;

Type

Color

md-red-300

$md-red-300: #e57373;

Type

Color

md-red-400

$md-red-400: #ef5350;

Type

Color

md-red-500

$md-red-500: #f44336;

Type

Color

md-red-600

$md-red-600: #e53935;

Type

Color

md-red-700

$md-red-700: #d32f2f;

Type

Color

md-red-800

$md-red-800: #c62828;

Type

Color

md-red-900

$md-red-900: #b71c1c;

Type

Color

md-red-a-100

$md-red-a-100: #ff8a80;

Type

Color

md-red-a-200

$md-red-a-200: #ff5252;

Type

Color

md-red-a-400

$md-red-a-400: #ff1744;

Type

Color

md-red-a-700

$md-red-a-700: #d50000;

Type

Color

md-pink-50

$md-pink-50: #fce4ec;

Type

Color

md-pink-100

$md-pink-100: #f8bbd0;

Type

Color

md-pink-200

$md-pink-200: #f48fb1;

Type

Color

md-pink-300

$md-pink-300: #f06292;

Type

Color

md-pink-400

$md-pink-400: #ec407a;

Type

Color

md-pink-500

$md-pink-500: #e91e63;

Type

Color

md-pink-600

$md-pink-600: #d81b60;

Type

Color

md-pink-700

$md-pink-700: #c2185b;

Type

Color

md-pink-800

$md-pink-800: #ad1457;

Type

Color

md-pink-900

$md-pink-900: #880e4f;

Type

Color

md-pink-a-100

$md-pink-a-100: #ff80ab;

Type

Color

md-pink-a-200

$md-pink-a-200: #ff4081;

Type

Color

md-pink-a-400

$md-pink-a-400: #f50057;

Type

Color

md-pink-a-700

$md-pink-a-700: #c51162;

Type

Color

md-purple-50

$md-purple-50: #f3e5f5;

Type

Color

md-purple-100

$md-purple-100: #e1bee7;

Type

Color

md-purple-200

$md-purple-200: #ce93d8;

Type

Color

md-purple-300

$md-purple-300: #ba68c8;

Type

Color

md-purple-400

$md-purple-400: #ab47bc;

Type

Color

md-purple-500

$md-purple-500: #9c27b0;

Type

Color

md-purple-600

$md-purple-600: #8e24aa;

Type

Color

md-purple-700

$md-purple-700: #7b1fa2;

Type

Color

md-purple-800

$md-purple-800: #6a1b9a;

Type

Color

md-purple-900

$md-purple-900: #4a148c;

Type

Color

md-purple-a-100

$md-purple-a-100: #ea80fc;

Type

Color

md-purple-a-200

$md-purple-a-200: #e040fb;

Type

Color

md-purple-a-400

$md-purple-a-400: #d500f9;

Type

Color

md-purple-a-700

$md-purple-a-700: #a0f;

Type

Color

md-deep-purple-50

$md-deep-purple-50: #ede7f6;

Type

Color

md-deep-purple-100

$md-deep-purple-100: #d1c4e9;

Type

Color

md-deep-purple-200

$md-deep-purple-200: #b39ddb;

Type

Color

md-deep-purple-300

$md-deep-purple-300: #9575cd;

Type

Color

md-deep-purple-400

$md-deep-purple-400: #7e57c2;

Type

Color

md-deep-purple-500

$md-deep-purple-500: #673ab7;

Type

Color

md-deep-purple-600

$md-deep-purple-600: #5e35b1;

Type

Color

md-deep-purple-700

$md-deep-purple-700: #512da8;

Type

Color

md-deep-purple-800

$md-deep-purple-800: #4527a0;

Type

Color

md-deep-purple-900

$md-deep-purple-900: #311b92;

Type

Color

md-deep-purple-a-100

$md-deep-purple-a-100: #b388ff;

Type

Color

md-deep-purple-a-200

$md-deep-purple-a-200: #7c4dff;

Type

Color

md-deep-purple-a-400

$md-deep-purple-a-400: #651fff;

Type

Color

md-deep-purple-a-700

$md-deep-purple-a-700: #6200ea;

Type

Color

md-indigo-50

$md-indigo-50: #e8eaf6;

Type

Color

md-indigo-100

$md-indigo-100: #c5cae9;

Type

Color

md-indigo-200

$md-indigo-200: #9fa8da;

Type

Color

md-indigo-300

$md-indigo-300: #7986cb;

Type

Color

md-indigo-400

$md-indigo-400: #5c6bc0;

Type

Color

md-indigo-500

$md-indigo-500: #3f51b5;

Type

Color

md-indigo-600

$md-indigo-600: #3949ab;

Type

Color

md-indigo-700

$md-indigo-700: #303f9f;

Type

Color

md-indigo-800

$md-indigo-800: #283593;

Type

Color

md-indigo-900

$md-indigo-900: #1a237e;

Type

Color

md-indigo-a-100

$md-indigo-a-100: #8c9eff;

Type

Color

md-indigo-a-200

$md-indigo-a-200: #536dfe;

Type

Color

md-indigo-a-400

$md-indigo-a-400: #3d5afe;

Type

Color

md-indigo-a-700

$md-indigo-a-700: #304ffe;

Type

Color

md-blue-50

$md-blue-50: #e3f2fd;

Type

Color

md-blue-100

$md-blue-100: #bbdefb;

Type

Color

md-blue-200

$md-blue-200: #90caf9;

Type

Color

md-blue-300

$md-blue-300: #64b5f6;

Type

Color

md-blue-400

$md-blue-400: #42a5f5;

Type

Color

md-blue-500

$md-blue-500: #2196f3;

Type

Color

md-blue-600

$md-blue-600: #1e88e5;

Type

Color

md-blue-700

$md-blue-700: #1976d2;

Type

Color

md-blue-800

$md-blue-800: #1565c0;

Type

Color

md-blue-900

$md-blue-900: #0d47a1;

Type

Color

md-blue-a-100

$md-blue-a-100: #82b1ff;

Type

Color

md-blue-a-200

$md-blue-a-200: #448aff;

Type

Color

md-blue-a-400

$md-blue-a-400: #2979ff;

Type

Color

md-blue-a-700

$md-blue-a-700: #2962ff;

Type

Color

md-light-blue-50

$md-light-blue-50: #e1f5fe;

Type

Color

md-light-blue-100

$md-light-blue-100: #b3e5fc;

Type

Color

md-light-blue-200

$md-light-blue-200: #81d4fa;

Type

Color

md-light-blue-300

$md-light-blue-300: #4fc3f7;

Type

Color

md-light-blue-400

$md-light-blue-400: #29b6f6;

Type

Color

md-light-blue-500

$md-light-blue-500: #03a9f4;

Type

Color

md-light-blue-600

$md-light-blue-600: #039be5;

Type

Color

md-light-blue-700

$md-light-blue-700: #0288d1;

Type

Color

md-light-blue-800

$md-light-blue-800: #0277bd;

Type

Color

md-light-blue-900

$md-light-blue-900: #01579b;

Type

Color

md-light-blue-a-100

$md-light-blue-a-100: #80d8ff;

Type

Color

md-light-blue-a-200

$md-light-blue-a-200: #40c4ff;

Type

Color

md-light-blue-a-400

$md-light-blue-a-400: #00b0ff;

Type

Color

md-light-blue-a-700

$md-light-blue-a-700: #0091ea;

Type

Color

md-cyan-50

$md-cyan-50: #e0f7fa;

Type

Color

md-cyan-100

$md-cyan-100: #b2ebf2;

Type

Color

md-cyan-200

$md-cyan-200: #80deea;

Type

Color

md-cyan-300

$md-cyan-300: #4dd0e1;

Type

Color

md-cyan-400

$md-cyan-400: #26c6da;

Type

Color

md-cyan-500

$md-cyan-500: #00bcd4;

Type

Color

md-cyan-600

$md-cyan-600: #00acc1;

Type

Color

md-cyan-700

$md-cyan-700: #0097a7;

Type

Color

md-cyan-800

$md-cyan-800: #00838f;

Type

Color

md-cyan-900

$md-cyan-900: #006064;

Type

Color

md-cyan-a-100

$md-cyan-a-100: #84ffff;

Type

Color

md-cyan-a-200

$md-cyan-a-200: #18ffff;

Type

Color

md-cyan-a-400

$md-cyan-a-400: #00e5ff;

Type

Color

md-cyan-a-700

$md-cyan-a-700: #00b8d4;

Type

Color

md-teal-50

$md-teal-50: #e0f2f1;

Type

Color

md-teal-100

$md-teal-100: #b2dfdb;

Type

Color

md-teal-200

$md-teal-200: #80cbc4;

Type

Color

md-teal-300

$md-teal-300: #4db6ac;

Type

Color

md-teal-400

$md-teal-400: #26a69a;

Type

Color

md-teal-500

$md-teal-500: #009688;

Type

Color

md-teal-600

$md-teal-600: #00897b;

Type

Color

md-teal-700

$md-teal-700: #00796b;

Type

Color

md-teal-800

$md-teal-800: #00695c;

Type

Color

md-teal-900

$md-teal-900: #004d40;

Type

Color

md-teal-a-100

$md-teal-a-100: #a7ffeb;

Type

Color

md-teal-a-200

$md-teal-a-200: #64ffda;

Type

Color

md-teal-a-400

$md-teal-a-400: #1de9b6;

Type

Color

md-teal-a-700

$md-teal-a-700: #00bfa5;

Type

Color

md-green-50

$md-green-50: #e8f5e9;

Type

Color

md-green-100

$md-green-100: #c8e6c9;

Type

Color

md-green-200

$md-green-200: #a5d6a7;

Type

Color

md-green-300

$md-green-300: #81c784;

Type

Color

md-green-400

$md-green-400: #66bb6a;

Type

Color

md-green-500

$md-green-500: #4caf50;

Type

Color

md-green-600

$md-green-600: #43a047;

Type

Color

md-green-700

$md-green-700: #388e3c;

Type

Color

md-green-800

$md-green-800: #2e7d32;

Type

Color

md-green-900

$md-green-900: #1b5e20;

Type

Color

md-green-a-100

$md-green-a-100: #b9f6ca;

Type

Color

md-green-a-200

$md-green-a-200: #69f0ae;

Type

Color

md-green-a-400

$md-green-a-400: #00e676;

Type

Color

md-green-a-700

$md-green-a-700: #00c853;

Type

Color

md-light-green-50

$md-light-green-50: #f1f8e9;

Type

Color

md-light-green-100

$md-light-green-100: #dcedc8;

Type

Color

md-light-green-200

$md-light-green-200: #c5e1a5;

Type

Color

md-light-green-300

$md-light-green-300: #aed581;

Type

Color

md-light-green-400

$md-light-green-400: #9ccc65;

Type

Color

md-light-green-500

$md-light-green-500: #8bc34a;

Type

Color

md-light-green-600

$md-light-green-600: #7cb342;

Type

Color

md-light-green-700

$md-light-green-700: #689f38;

Type

Color

md-light-green-800

$md-light-green-800: #558b2f;

Type

Color

md-light-green-900

$md-light-green-900: #33691e;

Type

Color

md-light-green-a-100

$md-light-green-a-100: #ccff90;

Type

Color

md-light-green-a-200

$md-light-green-a-200: #b2ff59;

Type

Color

md-light-green-a-400

$md-light-green-a-400: #76ff03;

Type

Color

md-light-green-a-700

$md-light-green-a-700: #64dd17;

Type

Color

md-lime-50

$md-lime-50: #f9fbe7;

Type

Color

md-lime-100

$md-lime-100: #f0f4c3;

Type

Color

md-lime-200

$md-lime-200: #e6ee9c;

Type

Color

md-lime-300

$md-lime-300: #dce775;

Type

Color

md-lime-400

$md-lime-400: #d4e157;

Type

Color

md-lime-500

$md-lime-500: #cddc39;

Type

Color

md-lime-600

$md-lime-600: #c0ca33;

Type

Color

md-lime-700

$md-lime-700: #afb42b;

Type

Color

md-lime-800

$md-lime-800: #9e9d24;

Type

Color

md-lime-900

$md-lime-900: #827717;

Type

Color

md-lime-a-100

$md-lime-a-100: #f4ff81;

Type

Color

md-lime-a-200

$md-lime-a-200: #eeff41;

Type

Color

md-lime-a-400

$md-lime-a-400: #c6ff00;

Type

Color

md-lime-a-700

$md-lime-a-700: #aeea00;

Type

Color

md-yellow-50

$md-yellow-50: #fffde7;

Type

Color

md-yellow-100

$md-yellow-100: #fff9c4;

Type

Color

md-yellow-200

$md-yellow-200: #fff59d;

Type

Color

md-yellow-300

$md-yellow-300: #fff176;

Type

Color

md-yellow-400

$md-yellow-400: #ffee58;

Type

Color

md-yellow-500

$md-yellow-500: #ffeb3b;

Type

Color

md-yellow-600

$md-yellow-600: #fdd835;

Type

Color

md-yellow-700

$md-yellow-700: #fbc02d;

Type

Color

md-yellow-800

$md-yellow-800: #f9a825;

Type

Color

md-yellow-900

$md-yellow-900: #f57f17;

Type

Color

md-yellow-a-100

$md-yellow-a-100: #ffff8d;

Type

Color

md-yellow-a-200

$md-yellow-a-200: #ff0;

Type

Color

md-yellow-a-400

$md-yellow-a-400: #ffea00;

Type

Color

md-yellow-a-700

$md-yellow-a-700: #ffd600;

Type

Color

md-amber-50

$md-amber-50: #fff8e1;

Type

Color

md-amber-100

$md-amber-100: #ffecb3;

Type

Color

md-amber-200

$md-amber-200: #ffe082;

Type

Color

md-amber-300

$md-amber-300: #ffd54f;

Type

Color

md-amber-400

$md-amber-400: #ffca28;

Type

Color

md-amber-500

$md-amber-500: #ffc107;

Type

Color

md-amber-600

$md-amber-600: #ffb300;

Type

Color

md-amber-700

$md-amber-700: #ffa000;

Type

Color

md-amber-800

$md-amber-800: #ff8f00;

Type

Color

md-amber-900

$md-amber-900: #ff6f00;

Type

Color

md-amber-a-100

$md-amber-a-100: #ffe57f;

Type

Color

md-amber-a-200

$md-amber-a-200: #ffd740;

Type

Color

md-amber-a-400

$md-amber-a-400: #ffc400;

Type

Color

md-amber-a-700

$md-amber-a-700: #ffab00;

Type

Color

md-orange-50

$md-orange-50: #fff3e0;

Type

Color

md-orange-100

$md-orange-100: #fff0b2;

Type

Color

md-orange-200

$md-orange-200: #ffcc80;

Type

Color

md-orange-300

$md-orange-300: #ffb74d;

Type

Color

md-orange-400

$md-orange-400: #ffa726;

Type

Color

md-orange-500

$md-orange-500: #ff9800;

Type

Color

md-orange-600

$md-orange-600: #fb8c00;

Type

Color

md-orange-700

$md-orange-700: #f57c00;

Type

Color

md-orange-800

$md-orange-800: #ef6c00;

Type

Color

md-orange-900

$md-orange-900: #e65100;

Type

Color

md-orange-a-100

$md-orange-a-100: #ffd180;

Type

Color

md-orange-a-200

$md-orange-a-200: #ffab40;

Type

Color

md-orange-a-400

$md-orange-a-400: #ff9100;

Type

Color

md-orange-a-700

$md-orange-a-700: #ff6d00;

Type

Color

md-deep-orange-50

$md-deep-orange-50: #fbe9e7;

Type

Color

md-deep-orange-100

$md-deep-orange-100: #ffccbc;

Type

Color

md-deep-orange-200

$md-deep-orange-200: #ffab91;

Type

Color

md-deep-orange-300

$md-deep-orange-300: #ff8a65;

Type

Color

md-deep-orange-400

$md-deep-orange-400: #ff7043;

Type

Color

md-deep-orange-500

$md-deep-orange-500: #ff5722;

Type

Color

md-deep-orange-600

$md-deep-orange-600: #f4511e;

Type

Color

md-deep-orange-700

$md-deep-orange-700: #e64a19;

Type

Color

md-deep-orange-800

$md-deep-orange-800: #d84315;

Type

Color

md-deep-orange-900

$md-deep-orange-900: #bf360c;

Type

Color

md-deep-orange-a-100

$md-deep-orange-a-100: #ff9e80;

Type

Color

md-deep-orange-a-200

$md-deep-orange-a-200: #ff6e40;

Type

Color

md-deep-orange-a-400

$md-deep-orange-a-400: #ff3d00;

Type

Color

md-deep-orange-a-700

$md-deep-orange-a-700: #dd2c00;

Type

Color

md-brown-50

$md-brown-50: #efebe9;

Type

Color

md-brown-100

$md-brown-100: #d7ccc8;

Type

Color

md-brown-200

$md-brown-200: #bcaaa4;

Type

Color

md-brown-300

$md-brown-300: #a1887f;

Type

Color

md-brown-400

$md-brown-400: #8d6e63;

Type

Color

md-brown-500

$md-brown-500: #795548;

Type

Color

md-brown-600

$md-brown-600: #6d4c41;

Type

Color

md-brown-700

$md-brown-700: #5d4037;

Type

Color

md-brown-800

$md-brown-800: #4e342e;

Type

Color

md-brown-900

$md-brown-900: #3e2723;

Type

Color

md-grey-50

$md-grey-50: #fafafa;

Type

Color

md-grey-100

$md-grey-100: #f5f5f5;

Type

Color

Used by

md-grey-200

$md-grey-200: #eee;

Type

Color

Used by

md-grey-300

$md-grey-300: #e0e0e0;

Type

Color

md-grey-400

$md-grey-400: #bdbdbd;

Type

Color

Used by

md-grey-500

$md-grey-500: #9e9e9e;

Type

Color

md-grey-600

$md-grey-600: #757575;

Type

Color

md-grey-700

$md-grey-700: #616161;

Type

Color

Used by

md-grey-800

$md-grey-800: #424242;

Type

Color

md-grey-900

$md-grey-900: #212121;

Type

Color

md-blue-grey-50

$md-blue-grey-50: #eceff1;

Type

Color

md-blue-grey-100

$md-blue-grey-100: #cfd8dc;

Type

Color

md-blue-grey-200

$md-blue-grey-200: #b0bec5;

Type

Color

md-blue-grey-300

$md-blue-grey-300: #90a4ae;

Type

Color

md-blue-grey-400

$md-blue-grey-400: #78909c;

Type

Color

md-blue-grey-500

$md-blue-grey-500: #607d8b;

Type

Color

md-blue-grey-600

$md-blue-grey-600: #546e7a;

Type

Color

md-blue-grey-700

$md-blue-grey-700: #455a64;

Type

Color

md-blue-grey-800

$md-blue-grey-800: #37474f;

Type

Color

md-blue-grey-900

$md-blue-grey-900: #263238;

Type

Color

md-black-base

$md-black-base: #000;

Type

Color

Used by

md-white-base

$md-white-base: #fff;

Type

Color

Used by

md-color-map

$md-color-map: (
  md-red-50: $md-red-50,
  md-red-100: $md-red-100,
  md-red-200: $md-red-200,
  md-red-300: $md-red-300,
  md-red-400: $md-red-400,
  md-red-500: $md-red-500,
  md-red-600: $md-red-600,
  md-red-700: $md-red-700,
  md-red-800: $md-red-800,
  md-red-900: $md-red-900,
  md-red-a-100: $md-red-a-100,
  md-red-a-200: $md-red-a-200,
  md-red-a-400: $md-red-a-400,
  md-red-a-700: $md-red-a-700,
  md-pink-50: $md-pink-50,
  md-pink-100: $md-pink-100,
  md-pink-200: $md-pink-200,
  md-pink-300: $md-pink-300,
  md-pink-400: $md-pink-400,
  md-pink-500: $md-pink-500,
  md-pink-600: $md-pink-600,
  md-pink-700: $md-pink-700,
  md-pink-800: $md-pink-800,
  md-pink-900: $md-pink-900,
  md-pink-a-100: $md-pink-a-100,
  md-pink-a-200: $md-pink-a-200,
  md-pink-a-400: $md-pink-a-400,
  md-pink-a-700: $md-pink-a-700,
  md-purple-50: $md-purple-50,
  md-purple-100: $md-purple-100,
  md-purple-200: $md-purple-200,
  md-purple-300: $md-purple-300,
  md-purple-400: $md-purple-400,
  md-purple-500: $md-purple-500,
  md-purple-600: $md-purple-600,
  md-purple-700: $md-purple-700,
  md-purple-800: $md-purple-800,
  md-purple-900: $md-purple-900,
  md-purple-a-100: $md-purple-a-100,
  md-purple-a-200: $md-purple-a-200,
  md-purple-a-400: $md-purple-a-400,
  md-purple-a-700: $md-purple-a-700,
  md-deep-purple-50: $md-deep-purple-50,
  md-deep-purple-100: $md-deep-purple-100,
  md-deep-purple-200: $md-deep-purple-200,
  md-deep-purple-300: $md-deep-purple-300,
  md-deep-purple-400: $md-deep-purple-400,
  md-deep-purple-500: $md-deep-purple-500,
  md-deep-purple-600: $md-deep-purple-600,
  md-deep-purple-700: $md-deep-purple-700,
  md-deep-purple-800: $md-deep-purple-800,
  md-deep-purple-900: $md-deep-purple-900,
  md-deep-purple-a-100: $md-deep-purple-a-100,
  md-deep-purple-a-200: $md-deep-purple-a-200,
  md-deep-purple-a-400: $md-deep-purple-a-400,
  md-deep-purple-a-700: $md-deep-purple-a-700,
  md-indigo-50: $md-indigo-50,
  md-indigo-100: $md-indigo-100,
  md-indigo-200: $md-indigo-200,
  md-indigo-300: $md-indigo-300,
  md-indigo-400: $md-indigo-400,
  md-indigo-500: $md-indigo-500,
  md-indigo-600: $md-indigo-600,
  md-indigo-700: $md-indigo-700,
  md-indigo-800: $md-indigo-800,
  md-indigo-900: $md-indigo-900,
  md-indigo-a-100: $md-indigo-a-100,
  md-indigo-a-200: $md-indigo-a-200,
  md-indigo-a-400: $md-indigo-a-400,
  md-indigo-a-700: $md-indigo-a-700,
  md-blue-50: $md-blue-50,
  md-blue-100: $md-blue-100,
  md-blue-200: $md-blue-200,
  md-blue-300: $md-blue-300,
  md-blue-400: $md-blue-400,
  md-blue-500: $md-blue-500,
  md-blue-600: $md-blue-600,
  md-blue-700: $md-blue-700,
  md-blue-800: $md-blue-800,
  md-blue-900: $md-blue-900,
  md-blue-a-100: $md-blue-a-100,
  md-blue-a-200: $md-blue-a-200,
  md-blue-a-400: $md-blue-a-400,
  md-blue-a-700: $md-blue-a-700,
  md-light-blue-50: $md-light-blue-50,
  md-light-blue-100: $md-light-blue-100,
  md-light-blue-200: $md-light-blue-200,
  md-light-blue-300: $md-light-blue-300,
  md-light-blue-400: $md-light-blue-400,
  md-light-blue-500: $md-light-blue-500,
  md-light-blue-600: $md-light-blue-600,
  md-light-blue-700: $md-light-blue-700,
  md-light-blue-800: $md-light-blue-800,
  md-light-blue-900: $md-light-blue-900,
  md-light-blue-a-100: $md-light-blue-a-100,
  md-light-blue-a-200: $md-light-blue-a-200,
  md-light-blue-a-400: $md-light-blue-a-400,
  md-light-blue-a-700: $md-light-blue-a-700,
  md-cyan-50: $md-cyan-50,
  md-cyan-100: $md-cyan-100,
  md-cyan-200: $md-cyan-200,
  md-cyan-300: $md-cyan-300,
  md-cyan-400: $md-cyan-400,
  md-cyan-500: $md-cyan-500,
  md-cyan-600: $md-cyan-600,
  md-cyan-700: $md-cyan-700,
  md-cyan-800: $md-cyan-800,
  md-cyan-900: $md-cyan-900,
  md-cyan-a-100: $md-cyan-a-100,
  md-cyan-a-200: $md-cyan-a-200,
  md-cyan-a-400: $md-cyan-a-400,
  md-cyan-a-700: $md-cyan-a-700,
  md-teal-50: $md-teal-50,
  md-teal-100: $md-teal-100,
  md-teal-200: $md-teal-200,
  md-teal-300: $md-teal-300,
  md-teal-400: $md-teal-400,
  md-teal-500: $md-teal-500,
  md-teal-600: $md-teal-600,
  md-teal-700: $md-teal-700,
  md-teal-800: $md-teal-800,
  md-teal-900: $md-teal-900,
  md-teal-a-100: $md-teal-a-100,
  md-teal-a-200: $md-teal-a-200,
  md-teal-a-400: $md-teal-a-400,
  md-teal-a-700: $md-teal-a-700,
  md-green-50: $md-green-50,
  md-green-100: $md-green-100,
  md-green-200: $md-green-200,
  md-green-300: $md-green-300,
  md-green-400: $md-green-400,
  md-green-500: $md-green-500,
  md-green-600: $md-green-600,
  md-green-700: $md-green-700,
  md-green-800: $md-green-800,
  md-green-900: $md-green-900,
  md-green-a-100: $md-green-a-100,
  md-green-a-200: $md-green-a-200,
  md-green-a-400: $md-green-a-400,
  md-green-a-700: $md-green-a-700,
  md-light-green-50: $md-light-green-50,
  md-light-green-100: $md-light-green-100,
  md-light-green-200: $md-light-green-200,
  md-light-green-300: $md-light-green-300,
  md-light-green-400: $md-light-green-400,
  md-light-green-500: $md-light-green-500,
  md-light-green-600: $md-light-green-600,
  md-light-green-700: $md-light-green-700,
  md-light-green-800: $md-light-green-800,
  md-light-green-900: $md-light-green-900,
  md-light-green-a-100: $md-light-green-a-100,
  md-light-green-a-200: $md-light-green-a-200,
  md-light-green-a-400: $md-light-green-a-400,
  md-light-green-a-700: $md-light-green-a-700,
  md-lime-50: $md-lime-50,
  md-lime-100: $md-lime-100,
  md-lime-200: $md-lime-200,
  md-lime-300: $md-lime-300,
  md-lime-400: $md-lime-400,
  md-lime-500: $md-lime-500,
  md-lime-600: $md-lime-600,
  md-lime-700: $md-lime-700,
  md-lime-800: $md-lime-800,
  md-lime-900: $md-lime-900,
  md-lime-a-100: $md-lime-a-100,
  md-lime-a-200: $md-lime-a-200,
  md-lime-a-400: $md-lime-a-400,
  md-lime-a-700: $md-lime-a-700,
  md-yellow-50: $md-yellow-50,
  md-yellow-100: $md-yellow-100,
  md-yellow-200: $md-yellow-200,
  md-yellow-300: $md-yellow-300,
  md-yellow-400: $md-yellow-400,
  md-yellow-500: $md-yellow-500,
  md-yellow-600: $md-yellow-600,
  md-yellow-700: $md-yellow-700,
  md-yellow-800: $md-yellow-800,
  md-yellow-900: $md-yellow-900,
  md-yellow-a-100: $md-yellow-a-100,
  md-yellow-a-200: $md-yellow-a-200,
  md-yellow-a-400: $md-yellow-a-400,
  md-yellow-a-700: $md-yellow-a-700,
  md-amber-50: $md-amber-50,
  md-amber-100: $md-amber-100,
  md-amber-200: $md-amber-200,
  md-amber-300: $md-amber-300,
  md-amber-400: $md-amber-400,
  md-amber-500: $md-amber-500,
  md-amber-600: $md-amber-600,
  md-amber-700: $md-amber-700,
  md-amber-800: $md-amber-800,
  md-amber-900: $md-amber-900,
  md-amber-a-100: $md-amber-a-100,
  md-amber-a-200: $md-amber-a-200,
  md-amber-a-400: $md-amber-a-400,
  md-amber-a-700: $md-amber-a-700,
  md-orange-50: $md-orange-50,
  md-orange-100: $md-orange-100,
  md-orange-200: $md-orange-200,
  md-orange-300: $md-orange-300,
  md-orange-400: $md-orange-400,
  md-orange-500: $md-orange-500,
  md-orange-600: $md-orange-600,
  md-orange-700: $md-orange-700,
  md-orange-800: $md-orange-800,
  md-orange-900: $md-orange-900,
  md-orange-a-100: $md-orange-a-100,
  md-orange-a-200: $md-orange-a-200,
  md-orange-a-400: $md-orange-a-400,
  md-orange-a-700: $md-orange-a-700,
  md-deep-orange-50: $md-deep-orange-50,
  md-deep-orange-100: $md-deep-orange-100,
  md-deep-orange-200: $md-deep-orange-200,
  md-deep-orange-300: $md-deep-orange-300,
  md-deep-orange-400: $md-deep-orange-400,
  md-deep-orange-500: $md-deep-orange-500,
  md-deep-orange-600: $md-deep-orange-600,
  md-deep-orange-700: $md-deep-orange-700,
  md-deep-orange-800: $md-deep-orange-800,
  md-deep-orange-900: $md-deep-orange-900,
  md-deep-orange-a-100: $md-deep-orange-a-100,
  md-deep-orange-a-200: $md-deep-orange-a-200,
  md-deep-orange-a-400: $md-deep-orange-a-400,
  md-deep-orange-a-700: $md-deep-orange-a-700,
  md-brown-50: $md-brown-50,
  md-brown-100: $md-brown-100,
  md-brown-200: $md-brown-200,
  md-brown-300: $md-brown-300,
  md-brown-400: $md-brown-400,
  md-brown-500: $md-brown-500,
  md-brown-600: $md-brown-600,
  md-brown-700: $md-brown-700,
  md-brown-800: $md-brown-800,
  md-brown-900: $md-brown-900,
  md-grey-50: $md-grey-50,
  md-grey-100: $md-grey-100,
  md-grey-200: $md-grey-200,
  md-grey-300: $md-grey-300,
  md-grey-400: $md-grey-400,
  md-grey-500: $md-grey-500,
  md-grey-600: $md-grey-600,
  md-grey-700: $md-grey-700,
  md-grey-800: $md-grey-800,
  md-grey-900: $md-grey-900,
  md-blue-grey-50: $md-blue-grey-50,
  md-blue-grey-100: $md-blue-grey-100,
  md-blue-grey-200: $md-blue-grey-200,
  md-blue-grey-300: $md-blue-grey-300,
  md-blue-grey-400: $md-blue-grey-400,
  md-blue-grey-500: $md-blue-grey-500,
  md-blue-grey-600: $md-blue-grey-600,
  md-blue-grey-700: $md-blue-grey-700,
  md-blue-grey-800: $md-blue-grey-800,
  md-blue-grey-900: $md-blue-grey-900,
  md-black-base: $md-black-base,
  md-white-base: $md-white-base
);

Description

This is a map of all the material design base colors so that you can programmatically get variables with the neat sass-map functions.

Type

Map

Example

Example Usage SCSS

.error-field {
  background: map-get(md-red-300, $md-color-map);
}

Used by

md-light-theme-text-color

$md-light-theme-text-color: rgba($md-black-base, .87) !default;

Type

Color

md-light-theme-secondary-text-color

$md-light-theme-secondary-text-color: rgba($md-black-base, .54) !default;

Type

Color

Used by

md-light-theme-icon-text-color

$md-light-theme-icon-text-color: $md-light-theme-secondary-text-color !default;

Type

Color

md-light-theme-disabled-text-color

$md-light-theme-disabled-text-color: rgba($md-black-base, .38) !default;

Type

Color

md-light-theme-hint-text-color

$md-light-theme-hint-text-color: $md-light-theme-disabled-text-color !default;

Type

Color

md-light-theme-divider-color

$md-light-theme-divider-color: rgba($md-black-base, .12) !default;

Type

Color

Used by

md-light-theme-status-bar-color

$md-light-theme-status-bar-color: $md-grey-300 !default;

Type

Color

md-light-theme-app-bar-color

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

Type

Color

md-light-theme-background-color

$md-light-theme-background-color: $md-grey-50 !default;

Type

Color

Used by

md-light-theme-card-color

$md-light-theme-card-color: $md-white-base !default;

Type

Color

md-dark-theme-text-color

$md-dark-theme-text-color: $md-white-base !default;

Type

Color

md-dark-theme-secondary-text-color

$md-dark-theme-secondary-text-color: rgba($md-white-base, .7) !default;

Type

Color

Used by

md-dark-theme-icon-text-color

$md-dark-theme-icon-text-color: $md-dark-theme-secondary-text-color !default;

Type

Color

md-dark-theme-disabled-text-color

$md-dark-theme-disabled-text-color: rgba($md-white-base, .3) !default;

Type

Color

md-dark-theme-hint-text-color

$md-dark-theme-hint-text-color: $md-dark-theme-disabled-text-color !default;

Type

Color

md-dark-theme-divider-color

$md-dark-theme-divider-color: rgba($md-white-base, .12) !default;

Type

Color

Used by

md-dark-theme-status-bar-color

$md-dark-theme-status-bar-color: $md-black-base !default;

Type

Color

md-dark-theme-app-bar-color

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

Type

Color

md-dark-theme-background-color

$md-dark-theme-background-color: #303030 !default;

Type

Color

Used by

md-dark-theme-card-color

$md-dark-theme-card-color: $md-grey-800 !default;

Type

Color

md-light-theme-colors

$md-light-theme-colors: (
  text: $md-light-theme-text-color,
  secondary: $md-light-theme-secondary-text-color,
  icon: $md-light-theme-icon-text-color,
  disabled: $md-light-theme-disabled-text-color,
  hint: $md-light-theme-hint-text-color,
  divider: $md-light-theme-divider-color,
  background: $md-light-theme-background-color,
  card: $md-light-theme-card-color,
  hover: $md-light-theme-divider-color,
  toolbar: $md-light-theme-app-bar-color,
);

Description

A mapping of all the light-theme colors.

Type

Map

Used by

md-dark-theme-colors

$md-dark-theme-colors: (
  text: $md-dark-theme-text-color,
  secondary: $md-dark-theme-secondary-text-color,
  icon: $md-dark-theme-icon-text-color,
  disabled: $md-dark-theme-disabled-text-color,
  hint: $md-dark-theme-hint-text-color,
  divider: $md-dark-theme-divider-color,
  background: $md-dark-theme-background-color,
  card: $md-dark-theme-card-color,
  hover: rgba($md-black-base, .12),
  toolbar: $md-dark-theme-app-bar-color,
);

Description

A mapping of all the dark-theme colors.

Type

Map

Used by

functions

get-color

@function get-color($name, $light-theme) { ... }

Description

A utility function for getting a color from either the light or dark theme.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

The color name to look up.

String none
$light-theme

Boolean if it is for the light theme.

Boolean none

Returns

Color

the color for the theme or null if it is not a color that changes based on the theme.

Requires

Used by

get-swatch

@function get-swatch($color, $swatch, $accent: false, $fallback-color: null, $fallback-name: null) { ... }

Description

A utility function to take a color and get a different swatch/accent color in the same family.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The material design color to get a swatch for.

Color none
$swatch

The swatch to get.

Number none
$accent

Boolean if the swatch is the accent color.

Booleanfalse
$fallback-color

An optional color to fallback if the given color is not a valid material design color.

Colornull
$fallback-name

An optional name for the fallback color's variable to help set a correct fallback value.

Stringnull

Returns

Color

the color with the correct swatch.

Requires

Used by

mixins

react-md-colors-hover

@mixin react-md-colors-hover($primary-color: $md-primary-color, $primary-opacity: $md-primary-hover-opacity, $secondary-color: $md-secondary-color, $secondary-opacity: $md-secondary-hover-opacity) { ... }

Description

Creates the two class names for getting a primary or secondary background hover effect, Since the :hover selector still gets applied on mobile devices, these styles are wrapped in the desktop media query.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$primary-color

The primary color to use as the base for the hover effect.

Color$md-primary-color
$primary-opacity

The opacity to apply to the primary color.

Number$md-primary-hover-opacity
$secondary-color

The secondary color to use as the base for the hover effect.

Color$md-secondary-color
$secondary-opacity

The opacity to apply to the secondary color.

Number$md-secondary-hover-opacity

Example

Created Class Names

- `.md-background--primary-hover`
- `.md-background--secondary-hover`

Requires

Used by

react-md-color-class-names

@mixin react-md-color-class-names($include-text: true, $include-background: true) { ... }

Description

This will create two class names for every material design color. The first class name can be used to style any text with that color, while the other will be used to style the background color.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$include-text

Boolean if the text class name should be created.

Booleantrue
$include-background

Boolean if the background class name should be created.

Booleantrue

Example

Example Usage SCSS

@include react-md-color-class-names;

Example Usage CSS Output

.md-red-50--text {
  color: #ffebee;
}

.md-red-50--background {
  background: #ffebee;
}

Requires

Used by

react-md-color-class-name

@mixin react-md-color-class-name($name, $color, $include-text: true, $include-background: true) { ... }

Description

Creates 0 - 2 class names for a given color. No classes will be created if both $include-text and $include-background are false.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

The class name prefix to use.

String none
$color

The color to apply to text, background, or both.

Color none
$include-text

Boolean if the text class name should be created.

Booleantrue
$include-background

Boolean if the background class name should be created.

Booleantrue

Example

Example Usage SCSS

@include react-md-color-class-name(md-red-500, $md-red-500);
@include react-md-color-class-name(md-blue-200, $md-blue-200, false, true);

Example Usage CSS Output

.md-red-500--text {
  color: #f44336;
}

.md-red-500--background {
  background: #f44336;
}

.md-blue-200--background {
  background: #90caf9;
}

Used by

colors, themes

variables

md-colors-warn-md

$md-colors-warn-md: true !default;

Description

Boolean if the there should be warnings about colors not being from material design. This is enabled by default to alert users of the lib to set the correct fallback colors.

Type

Boolean

Used by

See

mixins

react-md-colors

@mixin react-md-colors($primary-color: $md-primary-color, $secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-media: $md-media-included, $include-color-class-names: $md-colors-include-class-names, $primary-opacity: $md-primary-hover-opacity, $primary-background-text-color: $md-primary-background-text-color, $secondary-opacity: $md-secondary-hover-opacity, $secondary-background-text-color: $md-secondary-background-text-color, $error-color: $md-error-color) { ... }

Description

A mixin for generating the base color class names to be used on multiple components. This will generate the following class names:

  • md-text - Styles the color to be the text color.
  • md-text--secondary - Styles the color to be the secondary text color.
  • md-text--disabled - Styles the color to be the disabled text color.
  • md-text--error - Styles the color to be the error text color.
  • md-text--theme-primary - Styles the color to be the primary color.
  • md-text--theme-secondary - Styles the color to be the secondary color.
  • md-background - Styles the background to be the base background color.
  • md-background--primary - Styles the background to be the primary color.
  • md-background--primary-hover - Styles the background to be the primary color with some opacity.
  • md-background--secondary - Styles the background to be the secondary color.
  • md-background--secondary-hover - Styles the background to be the secondary color with some opacity.
  • md-text--theme-primary-ink - Styles any ink inside this class to use the primary color.
  • md-text--theme-secondary-ink - Styles any ink inside this class to use the secondary color.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$primary-color

The primary color to use.

Color$md-primary-color
$secondary-color

The secondary color to use.

Color$md-secondary-color
$light-theme

Boolean if styling with the light theme.

Boolean$md-light-theme
$include-media

Boolean if the media queries should also be included.

Boolean$md-media-included
$include-color-class-names

Boolean if a class name should be created for every color as well.

Boolean$md-colors-include-class-names
$primary-opacity

The opacity to apply to the primary color with the md-background--primary class name.

Number$md-primary-hover-opacity
$primary-background-text-color

The text color for any text that appears inside the md-background--primary class name.

Color$md-primary-background-text-color
$secondary-opacity

The opacity to apply to the secondary color with the md-background--secondary class name.

Number$md-secondary-hover-opacity
$secondary-background-text-color

The text color for any text that appears inside the md-background--secondary class name.

Color$md-secondary-background-text-color
$error-color

The text color for any text that appears in the md-text--error class name.

Color$md-error-color

Example

Example Usage SCSS

@include react-md-colors;

Requires

Used by

react-md-theme-colors

@mixin react-md-theme-colors($primary-color: $md-primary-color, $secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-media: $md-media-included, $primary-opacity: $md-primary-hover-opacity, $primary-background-text-color: $md-primary-background-text-color, $secondary-opacity: $md-secondary-hover-opacity, $secondary-background-text-color: $md-secondary-background-text-color, $error-color: $md-error-color) { ... }

Description

This will conditionally update theme colors. The theme colors will only be updated if their value does not equal the global value.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$primary-color

The primary color to use.

Color$md-primary-color
$secondary-color

The secondary color to use.

Color$md-secondary-color
$light-theme

Boolean if styling with the light theme.

Boolean$md-light-theme
$include-media

Boolean if the media queries for the hover effects should also be included

Boolean$md-media-included
$primary-opacity

The opacity to apply to the primary color.

Number$md-primary-hover-opacity
$primary-background-text-color

The text color for any text that appears inside the md-background--primary class name.

Color$md-primary-background-text-color
$secondary-opacity

The opacity to apply to the secondary color.

Number$md-secondary-hover-opacity
$secondary-background-text-color

The text color for any text that appears inside the md-background--secondary class name.

Color$md-secondary-background-text-color
$error-color

The text color for any text that appears in the md-text--error class name.

Color$md-error-color

Example

Example Usage SCSS

@include react-md-theme-colors($md-blue-500, $md-red-a-200, false);

Requires

Used by

data-tables

variables

md-data-table-include-plain

$md-data-table-include-plain: true !default;

Description

Boolean if the plain table styles should be included.

Type

Boolean

md-data-table-include-checkboxes

$md-data-table-include-checkboxes: true !default;

Description

Boolean if the checkbox styles should be included.

Type

Boolean

md-data-table-include-edit-dialog

$md-data-table-include-edit-dialog: true !default;

Description

Boolean if the edit dialog styles should be included.

Type

Boolean

md-data-table-include-select-fields

$md-data-table-include-select-fields: true !default;

Description

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

Type

Boolean

md-data-table-include-fixed-headers-footers

$md-data-table-include-fixed-headers-footers: true !default;

Description

Boolean if the styles for fixed table headers/footers should be included.

Type

Boolean

md-data-table-include-pagination

$md-data-table-include-pagination: true !default;

Description

Boolean if the table pagination styles should be included.

Type

Boolean

md-data-table-selected-over-hover

$md-data-table-selected-over-hover: false !default;

Description

Boolean if the selected state of the data tables should have higher precedence over the hover state. The default behavior is to allow the hover state to show up even if the row is selected. If this value is enabled, the hover effect will not show up at all when a row is selected.

Type

Boolean

md-data-table-fixed-include-headers

$md-data-table-fixed-include-headers: true !default;

Description

Boolean if the react-md-make-fixed-table mixin should include headers by default in the created styles.

Used by

See

md-data-table-fixed-include-footers

$md-data-table-fixed-include-footers: true !default;

Description

Boolean if the react-md-make-fixed-table mixin should include footers by default in the created styles.

Used by

See

md-data-table-fixed-use-view-height

$md-data-table-fixed-use-view-height: false !default;

Description

Boolean if the react-md-make-fixed-table mixin should make the table fixed relative to the view height instead of just using height.

Type

Boolean

md-data-table-pagination-mobile-shrinking

$md-data-table-pagination-mobile-shrinking: true !default;

Description

Boolean if the TablePagination's styles should be updated for mobiles devices so that the select field shrinks its font size to 13px;

This should normally be used along with the md-data-table-pagination-mobile-label-hidden variable if you want to support mobile devices.

Type

Boolean

See

md-data-table-pagination-mobile-label-hidden

$md-data-table-pagination-mobile-label-hidden: true !default;

Description

This will hide the TablePaginations label on mobile devices.

Type

Boolean

md-data-table-include-table-card-headers

$md-data-table-include-table-card-headers: true !default;

Description

Boolean if the table card header styles should be included.

Type

Boolean

Used by

md-edit-dialog-min-width

Deprecated!

Use the $md-edit-dialog-width variable instead.

$md-edit-dialog-min-width: 300px !default;

Description

The min width for an edit dialog's column.

Type

Number

md-edit-dialog-width

$md-edit-dialog-width: 250px !default;

Description

The width for the edit dialog.

Type

Number

Used by

md-edit-dialog-label-width

$md-edit-dialog-label-width: 250px !default;

Description

The width for the label for the edit dialog column. When this width is reached, the text will be ellipsed.

Type

Number

Used by

md-edit-dialog-label-padding

$md-edit-dialog-label-padding: 16px 0 !default;

Description

The amount of padding to apply to the AccessibleFakeButton that gets used in the edit dialog column to trigger the dialog to appear.

Type

Number

Used by

md-edit-dialog-padding

$md-edit-dialog-padding: $md-dialog-padding !default;

Description

The amount of padding to provide to the edit dialog.

Type

Number

Used by

md-edit-dialog-padding-bottom

$md-edit-dialog-padding-bottom: 8px !default;

Description

The amount of padding-bottom to provide to the edit dialog. If you set this value to null, only the $md-edit-dialog-padding variable will be used.

Type

Number

Used by

md-data-table-edit-dialog-mobile-right

$md-data-table-edit-dialog-mobile-right: $md-grid-phone-margin !default;

Description

For some reason, the edit dialogs on mobile devices don't position themselves like tablets and desktop screens so this value is required for positioning the dialog from the right edge of the screen.

Type

Number

md-data-table-padding

$md-data-table-padding: 24px !default;

Description

The default left/right padding for a TableColumn.

Type

Number

Used by

md-data-table-min-padding

$md-data-table-min-padding: 56px !default;

Description

The minimum distance between a cell's content and the next cell.

Type

Number

Used by

md-data-table-content-font-size

$md-data-table-content-font-size: 13px !default;

Description

The font size for content inside of the TableBody component.

Type

Number

Used by

md-data-table-header-font-size

$md-data-table-header-font-size: 12px !default;

Description

The font size for the content inside of the TableHeader component.

Type

Number

Used by

md-data-table-header-height

$md-data-table-header-height: 56px !default;

Description

The height for the TableHeader's row.

Type

Number

Used by

md-data-table-header-icon-font-size

$md-data-table-header-icon-font-size: 16px !default;

Description

The font size for a font-icon in the md-table-column--header.

Type

Number

Used by

md-data-table-column-height

$md-data-table-column-height: 48px !default;

Description

The height for a column in a data table.

Type

Number

Used by

md-data-table-plain-column-height

$md-data-table-plain-column-height: $md-data-table-column-height !default;

Description

The height for a plain data table's column.

Type

Number

Used by

md-data-table-border-size

$md-data-table-border-size: 1px !default;

Description

The border size to use for each row.

Type

Number

Used by

md-data-table-hover-color

$md-data-table-hover-color: $md-grey-200 !default;

Description

The hover color for a row when using the light theme.

Type

Color

Used by

md-data-table-selected-color

$md-data-table-selected-color: $md-grey-100 !default;

Description

The selected color for a row when using the light theme.

Type

Color

Used by

md-data-table-dark-theme-hover-color

$md-data-table-dark-theme-hover-color: $md-grey-800 !default;

Description

The hover color for a row when using the dark theme. This is configurable since the dark theme data table specs are not defined in the material design documentation at this point.

Type

Color

Used by

md-data-table-dark-theme-selected-color

$md-data-table-dark-theme-selected-color: $md-grey-700 !default;

Description

The selected color for a row when using the dark theme. This is configurable since the dark theme data table specs are not defined in the material design documentation at this point.

Type

Color

Used by

md-data-table-card-header-z-index

$md-data-table-card-header-z-index: 1 !default;

Description

The z-index to use for the contextual table card header.

Type

Number

Used by

md-data-table-card-header-font-size

$md-data-table-card-header-font-size: 16px !default;

Description

The font size to use for the contextual table card header.

Type

Number

Used by

md-data-table-card-header-height

$md-data-table-card-header-height: 80px !default;

Description

The height for the table card header.

Type

Number

Used by

md-data-table-fixed-wrapper-min-width

$md-data-table-fixed-wrapper-min-width: 100% !default;

Description

The min-width to apply to the fixed tables wrapper.

Type

Number

Used by

placeholders

md-table-column--plain

%md-table-column--plain { ... }

Description

A selector for creating a plain styled column. This is used to update all the md-table-column--data in a .md-data-table--plain and to create a md-table-column--plain class. The white-space will still need to manually be changed from nowrap to initial if you want line wrapping.

Requires

mixins

react-md-data-tables

@mixin react-md-data-tables($secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-media: $md-media-included, $include-plain: $md-data-table-include-plain, $include-checkboxes: $md-data-table-include-checkboxes, $include-edit-dialog: $md-data-table-include-edit-dialog, $include-pagination: $md-data-table-include-pagination, $include-table-card-headers: $md-data-table-include-table-card-headers) { ... }

Description

Includes the styles for the data tables.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$secondary-color

The secondary color to use to theme the table card headers with.

Color$md-secondary-color
$light-theme

Boolean if the tables should be styled for the light theme.

Boolean$md-light-theme
$include-media

Boolean if the media queries should also be included.

Boolean$md-media-included
$include-plain

Boolean if the plain data table styles should be included.

Boolean$md-data-table-include-plain
$include-checkboxes

Boolean if the checkbox styles should be included.

Boolean$md-data-table-include-checkboxes
$include-edit-dialog

Boolean if the edit dialog styles should be included.

Boolean$md-data-table-include-edit-dialog
$include-pagination

Boolean if the pagination styles should be included.

Boolean$md-data-table-include-pagination
$include-table-card-headers

Boolean if the table card header styles should be included.

Boolean$md-data-table-include-table-card-headers

Example

Example Usage SCSS

@include react-md-data-tables;

Requires

Used by

react-md-data-table

@mixin react-md-data-table() { ... }

Description

Creates the styles for the data table. It will also create the styles for plain data tables if the param is true.

Parameters

None.

Requires

Used by

react-md-data-table-rows

@mixin react-md-data-table-rows($light-theme: $md-light-theme, $selected-over-hover: $md-data-table-selected-over-hover) { ... }

Description

Creates the styles for a row in the data table.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if styling for the light theme.

Boolean$md-light-theme
$selected-over-hover

Boolean if the selected state of rows should have a higher precedence than the hover state.

Boolean$md-data-table-selected-over-hover

Requires

Used by

react-md-data-table-column

@mixin react-md-data-table-column($include-plain: $md-data-table-include-plain) { ... }

Description

Creates the styles for a column in a data table.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$include-plain

boolean if the plain columns should be included

Boolean$md-data-table-include-plain

Requires

Used by

react-md-data-table-checkboxes

@mixin react-md-data-table-checkboxes() { ... }

Description

Creates the styles for a table checkbox column in a data table.

Parameters

None.

Requires

Used by

react-md-data-table-edit-dialogs

@mixin react-md-data-table-edit-dialogs() { ... }

Description

Creates the styles for edit dialogs in a data table.

Parameters

None.

Requires

Used by

react-md-data-table-select-fields

@mixin react-md-data-table-select-fields() { ... }

Description

Creates the styles for select fields in data tables.

Parameters

None.

Requires

Used by

react-md-data-table-paginations

@mixin react-md-data-table-paginations() { ... }

Description

Creates the styles for table pagination.

Parameters

None.

Requires

Used by

react-md-data-table-fixed-headers-footers

@mixin react-md-data-table-fixed-headers-footers() { ... }

Description

Creates the styles for fixed headers and footers in a data table.

Parameters

None.

Requires

Used by

react-md-make-fixed-table

@mixin react-md-make-fixed-table($height, $header-height: $md-data-table-header-height, $footer-height: $md-data-table-column-height, $toolbar-height: null) { ... }

Description

This is a utility function for making a fixed table via CSS instead of inline styles. This one is a bit more reliable since you can provide the cell heights correctly.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$height

The height to use for the fixed table. If this value is a boolean, the height will be calculated from the view height.

Number or Boolean none
$header-height

The height for the table's header. If this is null, this table should not have a fixed header.

Number$md-data-table-header-height
$footer-height

The height for the table's footer. If this is null, the table should not have a fixed footer.

Number$md-data-table-column-height
$toolbar-height

An optional height of the toolbar to exclude when making the max-height of the table.

Numbernull

Example

Example Usage

.fixed-table--200-300 {
  @include react-md-make-fixed-table(300px);

  width: 200px;
}

.fixed-table__footless--200-300 {
  @include react-md-make-fixed-table(300px, $md-data-table-header-height, null);
}

.fixed-table--viewport {
  @include react-md-make-fixed-table(true);
}

Example Usage CSS Output

.fixed-table--200-300 {
  width: 200px;
}

.fixed-table--200-300 .md-data-table__scroll-wrapper {
  max-height: 196px;
}

.fixed-table__footless--200-300 .md-data-table__scroll-wrapper {
  max-height: 244px;
}

.fixed-table--viewport .md-data-table__scroll-wrapper {
  max-height: calc(100vh - 104px);
}

Requires

react-md-data-table-card-headers

@mixin react-md-data-table-card-headers($secondary-color: $md-secondary-color) { ... }

Description

Creates the styles for the TableCardHeader component only. The contextual header will have a background color of the secondary color's 50 swatch.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$secondary-color

The secondary color to theme the contextual header's background color with.

Color$md-secondary-color

Requires

Used by

react-md-data-table-paginations-shrink

@mixin react-md-data-table-paginations-shrink($shrink: $md-data-table-pagination-mobile-shrinking, $hide-label: $md-data-table-pagination-mobile-label-hidden) { ... }

Description

A mixin that can shrink the select field in the TablePagination component as well as hide the label so it displays better on mobile devices. This mixin should usually be used in a media query that uses the max-width.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$shrink

Boolean if the select field should shrink by reducing the font size to 13px and reducing the padding by 75%.

Boolean$md-data-table-pagination-mobile-shrinking
$hide-label

Boolean if the pagination label (Rows per page) should be hidden.

Boolean$md-data-table-pagination-mobile-label-hidden

Example

Example Usage SCSS

@media (max-width: #{$md-tablet-min-width - 1}) {
  @include react-md-data-table-paginations-shrink(true, true);
}

Requires

Used by

data-tables, themes

variables

md-data-table-contextual-fallback-color

$md-data-table-contextual-fallback-color: null !default;

Description

A fallback color to use for the contextual table card header. This is only required when the $md-primary-color is not a valid material design color.

Type

Color

See

mixins

react-md-theme-data-tables

@mixin react-md-theme-data-tables($secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-table-card-headers: $md-data-table-include-table-card-headers, $contextual-fallback-color: $md-data-table-contextual-fallback-color, $selected-over-hover: $md-data-table-selected-over-hover) { ... }

Description

Updates the styles for data tables only if the $light-theme does not equal the $md-light-theme. The only styles really updated are the border colors and the hover/selected row background colors.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$secondary-color

The secondary color to theme with.

Color$md-secondary-color
$light-theme

Boolean if updating the styles for the light theme.

Boolean$md-light-theme
$include-table-card-headers

Boolean if the contextual table card header styles should be included.

Boolean$md-data-table-include-table-card-headers
$contextual-fallback-color

A fallback color to use for the contextual headers.

Color$md-data-table-contextual-fallback-color
$selected-over-hover

Boolean if the selected state of rows should have a higher precedence than the hover state.

Boolean$md-data-table-selected-over-hover

Requires

Used by

defaults

variables

md-height

$md-height: 48px !default;

Description

The default accessible height for a lot of material design components.

Type

Number

Used by

md-default-padding

$md-default-padding: 16px !default;

Description

The default padding used for most material design components.

Type

Number

Used by

dialogs

variables

md-dialog-use-flex-positioning

$md-dialog-use-flex-positioning: false !default;

Description

Boolean if the dialog should use a flexbox based approach of centering a non-full page dialog instead of the old transform + left/top centering "hack". This will solve the weird blur issues in webkit browsers for text, but make positioning in the page a bit harder. When this is enabled, you can move the dialog's position by setting margin instead of top/right/bottom/left

Note: The next major release will have this enabled by default and remove the old functionality

Type

Boolean

Used by

md-dialog-transition-time

$md-dialog-transition-time: $md-transition-time * 2 !default;

Description

The transition time for the dialogs to enter or leave.

Type

Number

Used by

md-dialog-translate-distance

$md-dialog-translate-distance: -30px !default;

Description

The distance that the dialog should move downwards when entering and leaving.

Type

Number

Used by

md-dialog-btn-height

$md-dialog-btn-height: 36px !default;

Description

The height of a button in a dialog.

Type

Number

Used by

md-dialog-btn-min-width

$md-dialog-btn-min-width: 64px !default;

Description

The min width for a button in a dialog.

Used by

md-dialog-btn-padding

$md-dialog-btn-padding: 8px !default;

Description

The padding for a button in a dialog.

Type

Number

Used by

md-dialog-padding

$md-dialog-padding: 24px !default;

Description

The default padding to apply to the content in a dialog.

Type

Number

Used by

md-dialog-title-padding-bottom

$md-dialog-title-padding-bottom: 20px !default;

Description

The padding bottom to apply to a dialog's title.

Type

Number

Used by

md-dialog-vertical-keyline

$md-dialog-vertical-keyline: 24px !default;

Description

A dialog can not be less than this distance from the top / and bottom of the page.

Type

Number

Used by

md-dialog-horizontal-keyline

$md-dialog-horizontal-keyline: 40px !default;

Description

A dialog can not be less than this distance from the left / right of the page.

Type

Number

Used by

mixins

react-md-dialogs

@mixin react-md-dialogs() { ... }

Description

Includes the styles for dialogs

Parameters

None.

Example

Example Usage SCSS

@include react-md-dialogs;

Requires

Used by

react-md-dialogs-header

@mixin react-md-dialogs-header() { ... }

Description

Includes the styles for the header content for dialogs only.

Parameters

None.

Requires

Used by

react-md-dialogs-content

@mixin react-md-dialogs-content() { ... }

Description

Includes the styles for the content in dialogs only.

Parameters

None.

Requires

Used by

react-md-dialog-width

@mixin react-md-dialog-width($units: 5) { ... }

Description

A simple mixin to set the width for a dialog.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$units

The number of units for the dialog's width to be. this will be multiplied by 56px since it is a single unit on a dialog.

Number5

Example

Example Usage SCSS

.md-dialog--big {
   @include react-md-dialog-width(10);
}

Used by

dialogs, z-indexes

variables

md-dialog-overlay-z-index

$md-dialog-overlay-z-index: 20 !default;

Description

The z index for a dialog's overlay. type Number

Used by

See

md-dialog-full-page-z-index

$md-dialog-full-page-z-index: 110 !default;

Description

The z-index to use for full page dialogs. This should be the biggest z-index in the application.

Type

Number

Used by

See

dividers

variables

md-divider-include-borders

$md-divider-include-borders: true !default;

Description

Boolean if the base classes for divider borders should be included.

Type

Boolean

md-divider-height

$md-divider-height: 1px !default;

Description

The height for a Divider

Type

Number

Used by

mixins

react-md-dividers

@mixin react-md-dividers($light-theme: $md-light-theme) { ... }

Description

Includes the Divider styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme

Example

Example Usage SCSS

@include react-md-dividers;

Requires

Used by

react-md-divider-borders

@mixin react-md-divider-borders($light-theme: $md-light-theme) { ... }

Description

Includes the styles and class names for creating a divider through the border property. This will create the following class names:

  • md-divider-border
    • the base class that applies the color and border style.
  • md-divider-border--top
    • only includes a border above the element.
  • md-divider-border--right
    • only includes a border to the right of the element.
  • md-divider-border--bottom
    • only includes a border below the element.
  • md-divider-border--left
    • only includes a border to the left of the element.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if the borders should be styled for the light theme.

Boolean$md-light-theme

Example

Example Usage SCSS

@include react-md-divider-borders;

Requires

Used by

See

dividers, themes

mixins

react-md-theme-dividers

@mixin react-md-theme-dividers($light-theme: $md-light-theme) { ... }

Description

Updates the background color of dividers ONLY if the $light-theme does not equal the $md-light-theme.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme

Example

Example Usage SCSS

@include react-md-theme-dividers;

Requires

Used by

react-md-theme-divider-borders

@mixin react-md-theme-divider-borders($light-theme: $md-light-theme) { ... }

Description

Themes only the divider borders if the $light-theme does not equal the $md-light-theme.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme

Example

Example Usage SCSS

@include react-md-theme-divider-borders(!$md-light-theme);

Requires

Used by

drawers

variables

md-drawer-transition-time

$md-drawer-transition-time: $md-transition-time * 2 !default;

Description

The transition time for the drawer to enter or leave the view.

Type

Number

Used by

md-drawer-mobile-max-width

$md-drawer-mobile-max-width: 320px !default;

Description

The drawer's max width on mobile devices when positioned to the left of the screen.

Type

Number

Used by

md-drawer-mobile-margin

$md-drawer-mobile-margin: 56px !default;

Description

The margin for the drawer on mobile devices when positioned to the left of the screen.

Type

Number

Used by

md-drawer-mobile-mini-width

$md-drawer-mobile-mini-width: $md-font-icon-size + 24px !default;

Description

The width for a mini drawer on mobile devices.

Type

Number

Used by

md-drawer-tablet-width

$md-drawer-tablet-width: 256px !default;

Description

The drawer's default width on tablet devices when positioned to the left of the screen.

Type

Number

Used by

md-drawer-desktop-width

$md-drawer-desktop-width: $md-drawer-tablet-width !default;

Description

The drawer's default width on desktop screens when positioned to the left of the screen.

Type

Number

Used by

md-drawer-desktop-left-max-width

$md-drawer-desktop-left-max-width: 400px !default;

Description

The drawer's max width on desktop screens when positioned to the left of the screen.

Used by

md-drawer-desktop-mini-width

$md-drawer-desktop-mini-width: $md-font-icon-size + (24px * 2) !default;

Description

The mini drawer width on desktops and tablets.

Type

Number

Used by

md-drawer-mobile-mini-item-padding

$md-drawer-mobile-mini-item-padding: ($md-drawer-mobile-mini-width - $md-font-icon-size) / 2 !default;

Description

This is the amount of padding to apply to the left and right of a mini nav item on mobile devices. This is mostly used to center the item in the mini drawer.

Type

Number

Used by

md-drawer-desktop-mini-item-padding

$md-drawer-desktop-mini-item-padding: ($md-drawer-desktop-mini-width - if($md-font-icon-include-dense, $md-font-icon-dense-size, $md-font-icon-size)) / 2 !default;

Description

This is the amount of padding to apply to the left and right of a mini nav item on desktop screens. This is mostly used to center the item in the mini drawer.

Type

Number

Used by

mixins

react-md-drawers

@mixin react-md-drawers($include-media: $md-media-included) { ... }

Description

Includes the styles for drawers.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$include-media

Boolean if the media queries should be included.

Boolean$md-media-included

Example

Example Usage SCSS

@include react-md-drawers;

Requires

Used by

drawers, media-queries

mixins

react-md-drawers-mobile

@mixin react-md-drawers-mobile() { ... }

Description

Includes the styles for drawers on mobile devices.

Parameters

None.

Example

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-drawers-mobile;
}

Requires

Used by

react-md-drawers-mobile-landscape

@mixin react-md-drawers-mobile-landscape() { ... }

Description

Includes the styles for drawers on mobile landscape devices.

Parameters

None.

Example

Example Usage SCSS

@media #{$md-mobile-landscape-media} {
  @include react-md-drawers-mobile-landscape;
}

Requires

Used by

react-md-drawers-tablet

@mixin react-md-drawers-tablet() { ... }

Description

Includes the styles for drawers on tablets.

Parameters

None.

Example

Example Usage SCSS

@media #{$md-tablet-media} {
  @include react-md-drawers-tablet;
}

Requires

Used by

react-md-drawers-desktop

@mixin react-md-drawers-desktop() { ... }

Description

Includes the styles for drawers on desktop screens.

Parameters

None.

Example

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-drawers-desktop;
}

Requires

Used by

react-md-drawers-media

@mixin react-md-drawers-media() { ... }

Description

Includes the media queries and styles for drawers.

Parameters

None.

Example

Example Usage SCSS

@include react-md-drawers-media;

Requires

Used by

drawers, z-indexes

variables

md-drawer-z-index

$md-drawer-z-index: 17 !default;

Description

The z-index to use for fixed navigation drawers.

Type

Number

Used by

See

expansion-panels

variables

md-expansion-panel-font-size

$md-expansion-panel-font-size: 15px !default;

Description

The font size for the unexpanded panel's labels.

Type

String

Used by

md-expansion-panel-secondary-font-size

$md-expansion-panel-secondary-font-size: 12px !default;

Description

The font size for the expanded panel's secondary labels.

Type

String

Used by

md-expansion-panel-padding

$md-expansion-panel-padding: 24px !default;

Description

The default left/right padding for an expansion panel.

Type

String

Used by

md-expansion-panel-expanded-height

$md-expansion-panel-expanded-height: 64px !default;

Description

The height of the panel's header when expanded.

Type

String

Used by

mixins

react-md-expansion-panels

@mixin react-md-expansion-panels($light-theme: $md-light-theme) { ... }

Description

Includes the styles for expansion panels.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme

Example

Example Usage SCSS

@include react-md-expansion-panels;

Requires

Used by

expansion-panels, themes

mixins

react-md-theme-expansion-panels

@mixin react-md-theme-expansion-panels($light-theme: $md-light-theme) { ... }

Description

Updates the styles for expansion panels based on the light-theme param. If light-theme equals md-light-theme, no styles will be created.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme

Example

Example Usage SCSS

@include react-md-expansion-panels;

Requires

Used by

file-inputs

mixins

react-md-file-inputs

@mixin react-md-file-inputs() { ... }

Description

Includes the styles for file inputs. This really depends on the styles for flat or raised buttons.

Parameters

None.

Example

Example Usage SCSS

@include react-md-file-inputs;

Used by

See

grids

variables

md-grid-phone-columns

$md-grid-phone-columns: 4 !default;

Description

The number of columns to use for mobile devices. This should probably not be changed.

Type

Number

md-grid-phone-margin

$md-grid-phone-margin: 16px !default;

Description

The margin to use for grids on mobile devices. This should be one of the values in $md-grid-available-margins-and-gutters.

Type

Number

See

md-grid-phone-gutter

$md-grid-phone-gutter: 16px !default;

Description

The gutter to use for grids on mobile devices. This should be one of the values in $md-grid-available-margins-and-gutters.

Type

Number

See

md-grid-tablet-breakpoint

$md-grid-tablet-breakpoint: 600px !default;

Description

The breakpoint to use for modifying the grid for tablet devices.

Type

Number

Used by

md-grid-tablet-columns

$md-grid-tablet-columns: 8 !default;

Description

The number of columns to use for tablet devices. This should probably not be changed.

Type

Number

md-grid-tablet-margin

$md-grid-tablet-margin: $md-grid-phone-gutter !default;

Description

The margin to use for grids on tablet devices. This should be one of the values in $md-grid-available-margins-and-gutters.

Type

Number

See

md-grid-tablet-gutter

$md-grid-tablet-gutter: $md-grid-phone-gutter !default;

Description

The gutter to use for grids on tablet devices. This should be one of the values in $md-grid-available-margins-and-gutters.

Type

Number

See

md-grid-desktop-breakpoint

$md-grid-desktop-breakpoint: 840px !default;

Description

The breakpoint to use for modifying the grid for desktop / larger screens.

Type

Number

Used by

md-grid-desktop-columns

$md-grid-desktop-columns: 12 !default;

Description

The number of columns to use for grids on desktop / larger screens.

Type

Number

md-grid-desktop-margin

$md-grid-desktop-margin: $md-grid-phone-margin !default;

Description

The margin to use for grids on desktop screens. This should be one of the values in $md-grid-available-margins-and-gutters.

Type

Number

See

md-grid-desktop-gutter

$md-grid-desktop-gutter: $md-grid-phone-gutter !default;

Description

The gutter to use for grids on desktop screens. This should be one of the values in $md-grid-available-margins-and-gutters.

Type

Number

See

md-grid-available-margins-and-gutters

$md-grid-available-margins-and-gutters: (8px 16px 24px 40px) !default;

Description

The possible margins and gutters that can be used in a grid.

Type

List

Used by

md-grid-default-columns

$md-grid-default-columns: $md-grid-phone-columns !default;

Description

The number of columns to include in the entire grid system.

Type

Number

Used by

md-grid-max-columns

$md-grid-max-columns: $md-grid-desktop-columns !default;

Description

The max number of columns to include in the entire grid system.

Type

Number

Used by

placeholders

md-cell--right

%md-cell--right { ... }

Description

A simple utility placeholder for positioning a cell to the right.

Used by

mixins

react-md-grid

@mixin react-md-grid($include-media: $md-media-included) { ... }

Description

Creates the styles for grids in material design. This basically creates a main flex container .md-grid that will style cells with appropriate margins and widths.

The following classes will be created:

  • .md-grid - The main flex container. You should use this along with the .md-cell to get the correct gutter and margins for a material design page.
  • md-grid--stacked - This will allow the grid to be column based instead of row based.
  • .md-grid--no-spacing - An optional class name to use with the .md-grid. When they are used together, all the margins and spacings will be removed from the grid.
  • .md-cell - The main container for a column or cell in the grid. If this is used alone, the default behavior is to display 1 cell per row on mobile devices, 2 cells per row on tablets, and 3 cells per row on desktop / larger screens. For more fine tuning, it can be used along with one of the following.
  • .md-cell--right - This simply applies margin-left: auto to a cell. This is basically the same as applying float: right in a row.
  • .md-cell--top - This aligns the cell to the top of a row.
  • .md-cell--middle - This aligns the cell to the middle of a row vertically.
  • .md-cell--center - This aligns the cell to the center of a row horizontally.
  • .md-cell--bottom - This aligns the cell to the bottom of a row.
  • .md-cell--stretch - This aligns the cell to stretch the entire height of a row. This is the default behavior.
  • .md-cell--NUMBER - This is will allow a cell to span this many columns on all media sizes. When the NUMBER is greater than the number of columns allowed for a media device, it will span the entire row. This basically means that if you are using the base configuration options and following the material design specs, mobile devices only allow 4 columns per row, tablets 8 per row, and desktops 12. So specifying .md-cell .md-cell--6 would span an entire row on mobile devices, 3/4 of a row on tablets, and 1/2 of a row on desktops.
  • .md-cell--NUMBER-offset - This will offset the cell by the given number of columns. If the number is greater than the maximum amount of columns allowed for the device's screen size, an entire row will be blank.
  • .md-cell--NUMBER-phone - This will set the cell's size only for mobile devices.
  • .md-cell--NUMBER-tablet - This will set the cell's size only for tablet devices.
  • .md-cell--NUMBER-desktop - This will set the cell's size only for desktop / large screens.
  • .md-cell--NUMBER-phone-offset - This will offset the cell's position only for mobile devices.
  • .md-cell--NUMBER-tablet-offset - This will offset the cell's position for tablet devices.
  • .md-cell--NUMBER-desktop-offset - This will offset the cell's position for desktop / large screens.
  • .md-cell--phone-hidden - This will hide a cell only for mobile devices.
  • .md-cell--tablet-hidden - This will hide a cell only for tablet devices.
  • .md-cell--desktop-hidden - This will hide a cell only for desktop / large screens.
  • .md-cell--order-NUMBER - This is an optional class name you can apply if you want this item to appear in a different order on the grid.
  • .md-cell--order-NUMBER-phone - This will set the cell's order only for mobile devices.
  • .md-cell--order-NUMBER-tablet - This will set the cell's order only for tablet devices.
  • .md-cell--order-NUMBER-desktop - This will set the cell's order only for desktop / large screens.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$include-media

Boolean if the media queries should be included as well. If this is false, you will manually need to call the media mixins to get any useful grid.

Boolean$md-media-included

Example

Example Usage SCSS

@include react-md-grid;

Requires

Used by

react-md-make-grid-container

@mixin react-md-make-grid-container($max-width, $name: null, $mobile-max-width: null, $tablet-max-width: null, $desktop-max-width: null) { ... }

Description

A mixin to create a grid with specific max-sizes at the different media queries.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$max-width

This can either me a Map of default, mobile, tablet, and desktop to set specific sizes at different media types, or a number to apply across all devices.

Map or Number none
$name

An optional name to apply to the grid. It is recommended to apply a name so that all grids do not gain these styles.

Stringnull
$mobile-max-width

An optional max-width to only apply to mobile devices.

Numbernull
$tablet-max-width

An optional max-width to only apply to tablet devices.

Numbernull
$desktop-max-width

An optional max-width to only apply to desktop screens.

Numbernull

Example

Example SCSS Usage

@include react-md-make-grid-container(1000, 'custom-grid', 240, 500, 800);
@include react-md-make-grid-cotnainer(600, 'custom-grid-2', 240);

$sizes: (
  default: 1500px,
  mobile: 240px,
  tablet: 600px,
  desktop: 1100px
);
@include react-md-make-grid-container($sizes, 'custom-grid-3');

Requires

react-md-make-custom-grid

@mixin react-md-make-custom-grid($suffix, $margin, $gutter, $phone-columns: $md-grid-phone-columns, $tablet-columns: $md-grid-tablet-columns, $desktop-columns: $md-grid-desktop-columns) { ... }

Description

This creates another custom grid with a suffix. This is really only useful if you will have different grid layouts in your application depending on the page.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$suffix

The suffix to apply to the end of .md-grid--.

String none
$margin

The margin to use. This must be unitful number.

Number none
$gutter

The gutter to use. This must be unitful number.

Number none
$phone-columns

The number of columns to use on mobile devices. If this value is less than or equal to 0, the phone media query will not be created.

Number$md-grid-phone-columns
$tablet-columns

The number of columns to use on mobile devices. If this value is less than or equal to 0, the tablet media query will not be created.

Number$md-grid-tablet-columns
$desktop-columns

The number of columns to use on mobile devices. If this value is less than or equal to 0, the desktop media query will not be created.

Number$md-grid-desktop-columns

Example

Example Usage SCSS

@include react-md-custom-grid('24-40', 24px, 40px);

Example Usage CSS Output

.md-grid--24-40 {
  ... styles ...
}

Requires

react-md-make-grid

@mixin react-md-make-grid($media-type, $columns, $margin, $gutter, $suffix: null) { ... }

Description

Creates the grid with the given params.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$media-type

The media type to create additional overrides for.

String none
$columns

The number of columns for this media type to create.

Number none
$margin

The margin to use for this media type.

Number none
$gutter

The gutter to use for this media type.

Number none
$suffix

An optional suffix to apply to the .md-grid. This is really only used when using the react-md-make-custom-grid mixin.

Stringnull

Example

Example Usage SCSS

@include react-md-make-grid('phone', $md-grid-phone-columns, $md-grid-phone-margin, $md-grid-phone-gutter);

Requires

Used by

See

react-md-make-cells

@mixin react-md-make-cells($columns, $margin, $gutter, $media-type) { ... }

Description

Creates the cells in a grid. This should normally only be used within the react-md-make-grid mixin.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$columns

The number of columns for the given media type.

Number none
$margin

The margin to use for the given media type.

Number none
$gutter

The gutter to use for the given media type.

Number none
$media-type

The current media type.

String none

Requires

Used by

See

grids, media-queries

mixins

react-md-grid-mobile

@mixin react-md-grid-mobile($columns: $md-grid-phone-columns, $margin: $md-grid-phone-margin, $gutter: $md-grid-phone-gutter) { ... }

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default 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

Example

Example Usage SCSS

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

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default 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

Example

Example Usage SCSS

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

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

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

parameter Nameparameter Descriptionparameter Typeparameter Default 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

Example

Example Usage SCSS

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

Requires

Used by

react-md-grid-media

@mixin react-md-grid-media() { ... }

Description

Includes all the media queries and styles for grids.

Parameters

None.

Example

Example Usage SCSS

@include react-md-grid-media;

Requires

Used by

helpers

placeholders

md-inline-block

%md-inline-block { ... }

Description

A placeholder for displaying an element inline

Used by

md-full-width

%md-full-width { ... }

Description

A simple placeholder for setting the width to 100%.

Used by

md-block-centered

%md-block-centered { ... }

Description

A simple placeholder for centering an item.

Used by

mixins

react-md-helpers-everything

@mixin react-md-helpers-everything() { ... }

Description

Creates all the styles for the helpers

Parameters

None.

Requires

Used by

react-md-helpers-blocks

@mixin react-md-helpers-blocks() { ... }

Description

Creates the styles for different type of blocks.

Parameters

None.

Requires

Used by

icons

variables

md-font-icon-size

$md-font-icon-size: 24px !default;

Description

The font icon size.

Type

Number

Used by

md-font-icon-dense-size

$md-font-icon-dense-size: 20px !default;

Description

The dense font icon size

Type

Number

Used by

md-font-icon-include-separators

$md-font-icon-include-separators: true !default;

Description

Boolean if the icon separator styles should be included by default.

Type

Boolean

md-font-icon-include-dense

$md-font-icon-include-dense: true !default;

Description

Boolean if the dense spec for icons should be included. This will update the size for icons to be smaller on desktop displays.

Type

Boolean

Used by

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

$md-font-icon-include-dense-material-icons: $md-font-icon-include-dense !default;

Description

Boolean if the font icons should be "fixed" for usage with material-icons. If the fonts are loaded after the styles of react-md, the created stylesheet will override the md-icon styles for creating dense icons. Enabling this boolean will manually update the styles so that md-icon has precedence.

Type

Boolean

md-font-icon-separator-padding

$md-font-icon-separator-padding: $md-default-padding !default;

Description

The amount of padding to put between an icon and any text.

Type

Number

Used by

md-font-icon-light-theme-disabled-color

Deprecated!
$md-font-icon-light-theme-disabled-color: rgba($md-black-base, .26) !default;

Description

The light theme's disabled color for icons. This is actually not used. Use the $md-light-theme-colors Sass map instead.

Type

Color

See

md-font-icon-dark-theme-disabled-color

Deprecated!
$md-font-icon-dark-theme-disabled-color: rgba($md-white-base, .3) !default;

Description

The dark theme's disabled color for icons. This is actually not used. Use the $md-dark-theme-colors Sass map instead.

Type

Color

mixins

react-md-icons

@mixin react-md-icons($light-theme: $md-light-theme, $include-media: $md-media-included, $include-separators: $md-font-icon-include-separators, $include-dense: $md-font-icon-include-dense, $include-dense-material-icons: $md-font-icon-include-dense-material-icons) { ... }

Description

Includes the CSS for using md-icon.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if the application is using the light-theme or not.

Boolean$md-light-theme
$include-media

Boolean if the media queries for icons should also be included. This also relies on the include-dense param.

Boolean$md-media-included
$include-separators

Boolean if the styles for separating content and an icon should be included.

Boolean$md-font-icon-include-separators
$include-dense

Boolean if the dense spec for icons should be included.

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

Boolean if the dense spec of font icons should also be force applied to the material-icons library. This can be set to false if you import the fonts before the react-md styles.

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

Requires

Used by

react-md-icons-dense

@mixin react-md-icons-dense($include-dense-material-icons: $md-font-icon-include-dense-material-icons) { ... }

Description

Updates the styles for an icon to use the dense font size. This should really only be used within a media query.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$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-icon-separators

@mixin react-md-icon-separators() { ... }

Description

Includes the styles for the IconSeparator component.

Parameters

None.

Example

Example Usage SCSS

@include react-md-icon-separators;

Requires

Used by

icons, themes

mixins

react-md-theme-icons

@mixin react-md-theme-icons($light-theme: $md-light-theme) { ... }

Description

Updates the color of the base md-icon if the $light-theme parameter does not equal the global $md-light-theme.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$light-theme

Boolean if using the light theme.

Boolean$md-light-theme

Requires

Used by

inks

variables

md-ink-include-pulse

$md-ink-include-pulse: false !default;

Description

Boolean if the ink should pulse by default. This is basically what will happen while the inked item has focus.

Type

Boolean

md-ink-enter-transition-time

$md-ink-enter-transition-time: .45s !default;

Description

The transition time for an ink to fully appear.

Type

Number

Used by

md-ink-leave-transition-time

$md-ink-leave-transition-time: .3s !default;

Description

The transition time for an ink to fully disappear.

Type

Number

md-ink-pulse-time

$md-ink-pulse-time: 1.5s !default;

Description

The animation time for the ink's pulsing.

Type

Number

Used by

md-ink-expanded-scale

$md-ink-expanded-scale: 1 !default;

Description

This is the scale that an ink should take once it has been fully created. It gets applied into scale.

Type

Number

Used by

md-ink-border-radius

$md-ink-border-radius: 50% !default;

Description

The border radius for ink.

Type

Number

Used by

mixins

react-md-inks