material-shadows
Version:
Mixins for Material Design Shadows
78 lines (48 loc) • 1.53 kB
Markdown
# Material Design Shadows
> The paper shadows mixin-library for CSS pre-processors.

## 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:
* [Less](http://lesscss.org/)
* [Sass](http://sass-lang.com/)
* [Stylus](http://learnboost.github.io/stylus/)
## Usage
```less
// 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](https://github.com/mrmlnc/material-shadows/releases) for changelogs for each release version.
## License
This software is released under the terms of the MIT license.