💭 Mixins for Material Design Shadows
CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
LICENSE
README.md
bower.json
material-shadows.less
material-shadows.scss
material-shadows.styl
package.json

README.md

Material Design Shadows

The paper shadows mixin-library for CSS pre-processors.

demo

Installation

  • git: git clone git://github.com/mrmlnc/material-shadows.git;
  • bower: bower install --save material-shadows
  • npm: npm install --save material-shadows;

Supported languages

Support for all popular css preprocessors:

Usage

// Less, SCSS, Stylus
@import "lib/material-color";

.my-selector {
  .z-depth(); // equivalent to `.z-depth(2)` and `.z-depth-2dp()`

  // Create class for `transition` property.
  .z-depth-transition();

  // Creating a class to an element in the focused state.
  .z-depth-focus();
}

// Class generator
.shadow {
  .z-depth-classes();
}

Supported options

z-depth

dp

  • Type: Number
  • Default: 2
  • Available values: 2, 3, 4, 6, 8, 16, 24

Depth shadow.

z-depth-classes

transition

  • Type: Boolean
  • Default: false

Create class for transition property.

focus

  • Type: Boolean
  • Default: false

Creating a class to an element in the focused state.

Changelog

See the Releases section of our GitHub project for changelogs for each release version.

License

This software is released under the terms of the MIT license.