Skip to main content
react-md
Divider - SassDoc

Variables

rmd-divider-size

Number

The size for the divider. This really just modifies the border-width.

$rmd-divider-size: 1px !default;

rmd-divider-max-size

Number

The max size for the divider. This can be used to center a horizontal divider within the page since the divider applies margin-left: auto and margin-right: auto.

This also applies to vertical dividers... sort of? If the divider's containing element has a static defined height, the vertical dividers will be sized correctly. Otherwise the vertical divider will set the height to auto which almost always resolves to 0 which will make your divider not appear.

$rmd-divider-max-size: 100% !default;

rmd-divider-inset

Number

The amount of inset to apply to the divider. This should not be changed to create centered dividers. Its only purpose is to had spacing to the left (or right in rtl languages) of the divider. See the $rmd-divider-max-size variable for more information about centering.

$rmd-divider-inset: 4rem !default;
See also

rmd-divider-spacing

Number

The amount of margin to apply to horizontal dividers.

$rmd-divider-spacing: 0.25rem auto !default;

rmd-divider-vertical-spacing

Number

The amount of margin to apply to vertical dividers.

$rmd-divider-vertical-spacing: auto 0.25rem !default;

rmd-divider-background-color-on-light

Color

The divider color to use on light backgrounds.

$rmd-divider-background-color-on-light: rgba($rmd-black-base, 0.12) !default;

rmd-divider-background-color-on-dark

Color

The divider color to use on dark backgrounds.

$rmd-divider-background-color-on-dark: rgba($rmd-white-base, 0.12) !default;

rmd-divider-background-color

Color

The default divider background color to use.

$rmd-divider-background-color: if(
  rmd-theme-tone($rmd-theme-background) == light,
  $rmd-divider-background-color-on-light,
  $rmd-divider-background-color-on-dark
) !default;

rmd-divider-theme-values

Map

A Map of all the "themeable" parts of the divider package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.

$rmd-divider-theme-values: (
  background-color: $rmd-divider-background-color,
  background-color-on-light: $rmd-divider-background-color-on-light,
  background-color-on-dark: $rmd-divider-background-color-on-dark,
  size: $rmd-divider-size,
  inset: $rmd-divider-inset,
  spacing: $rmd-divider-spacing,
  vertical-spacing: $rmd-divider-vertical-spacing,
  max-size: $rmd-divider-max-size,
) !default;

Mixins

rmd-divider-theme

mixin

Creates the styles for one of the divider's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-divider-theme-values value to.

String
$theme-style

One of the keys of rmd-divider-theme-values to extract a value from.

String
$fallback

A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the rmd-divider-theme-values map when null.

Color|String|Numbernull

rmd-divider-theme-update-var

mixin

Updates one of the divider's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The divider theme style type to update. This should be one of the $rmd-divider-theme-values keys.

String
$value

The new value to use.

Color|String|Number

rmd-divider-border

mixin

This mixin allows you to add a custom border to any element if you don't want to add an extra element within your page for a divider.

Parameters
NameDescriptionTypeDefault Value
$position

The border position to use. This should be one of top, right, bottom, or left

String

rmd-divider

mixin

Creates all the styles for a divider for a class name selector. This probably won't be used externally.

react-md-divider

mixin

Creates all the styles for the divider package as well as the root css variable theme.

Functions

rmd-divider-theme

function

This function is used to quickly get one of the divider's theme values. This is really just for the rmd-divider-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — Color|String|Number

one of the divider's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-divider-theme-values map keys to get a value for.

String

rmd-divider-theme-var

function

This function is used to get one of the divider's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-divider-theme-values

This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.

Returns — String

one of the divider's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-divider-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull