Inks

Variables

md-ink-include-pulse
$md-ink-include-pulse: false !default;
Sass (Scss)

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;
Sass (Scss)

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;
Sass (Scss)

Description

The transition time for an ink to fully disappear.

Type

Number
md-ink-pulse-time
$md-ink-pulse-time: 1.5s !default;
Sass (Scss)

Description

The animation time for the ink's pulsing.

Type

Number

Used by

md-ink-expanded-scale
$md-ink-expanded-scale: 1 !default;
Sass (Scss)

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;
Sass (Scss)

Description

The border radius for ink.

Type

Number

Used by

Mixins

react-md-inks
@mixin react-md-inks($light-theme: $md-light-theme, $pulse: $md-ink-include-pulse) {}
Sass (Scss)
Click to expand

Description

Creates the styles for material design ink.

Parameters

NameDescriptionTypeDefault value
$light-theme

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

Boolean
$md-light-theme
$pulse

Boolean if the pulse effect should be included.

Boolean
$md-ink-include-pulse

Examples

Example Usage SCSS

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

Requires

Used by

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

Description

Themes the ink color for the given theme ONLY if the $light-theme does not equal the $md-light-theme.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if styling to the light theme.

Boolean
$md-light-theme

Examples

Example Usage SCSS

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

Requires

Used by