Dividers

Variables

md-divider-include-borders
$md-divider-include-borders: true !default;
Sass (Scss)

Description

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

Type

Boolean
md-divider-height
$md-divider-height: 1px !default;
Sass (Scss)

Description

The height for a Divider

Type

Number

Used by

Mixins

react-md-dividers
@mixin react-md-dividers($light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

Includes the Divider styles

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if using the light theme.

Boolean
$md-light-theme

Examples

Example Usage SCSS

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

Requires

Used by

react-md-divider-borders
@mixin react-md-divider-borders($light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

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

NameDescriptionTypeDefault value
$light-theme

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

Boolean
$md-light-theme

Examples

Example Usage SCSS

@include react-md-divider-borders;
Sass (Scss)

Requires

Used by

See

react-md-theme-dividers
@mixin react-md-theme-dividers($light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

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

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if using the light theme.

Boolean
$md-light-theme

Examples

Example Usage SCSS

@include react-md-theme-dividers;
Sass (Scss)

Requires

Used by

react-md-theme-divider-borders
@mixin react-md-theme-divider-borders($light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

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

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if using the light theme.

Boolean
$md-light-theme

Examples

Example Usage SCSS

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

Requires

Used by