Papers

Variables

md-paper-transition-time
$md-paper-transition-time: $md-transition-time * 2 !default;
Sass (Scss)

Description

The default transition time for the paper to raise from 0 to 3

Type

Number

Used by

Mixins

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

Description

Creates the styles for paper.

Parameters

None

Requires

Used by

md-box-shadow
@mixin md-box-shadow($elevation) {}
Sass (Scss)
Click to expand

Description

Generates the box shadow for material design

Parameters

NameDescriptionTypeDefault value
$elevation

The material design elevation. This should be a number from 0 - 5.

Number

Examples

Basic Usage Sass

.md-paper--1 {
  @include md-box-shadow(1);
}

.md-paper--5 {
  @include md-box-shadow(5);
}
Sass (Scss)

Basic Usage CSS Output

.md-paper--1 {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14). 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
}

.md-paper--5 {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4);
}
Sass (Scss)

Requires

Used by

Links