/quantum-shadows

Material Design drop shadows for your Sass projects.

Primary LanguageCSSMIT LicenseMIT

Quantum Shadows Logo

Use the drop shadows from Google's Material Design spec in your Sass projects.

Codepen Demo

Installation

  • Install via Bower bower install quantum-shadows --save
  • Download and add to your project manually

Usage

NOTE: Quantum Shadows assumes you already have a solution for dealing with prefixes.

Import Quantum Shadows at the top of your Sass files. For example:

@import "../bower_components/quantum-shadows/quantum-shadows";

Right now, it's just a simple mixin away. The mixin takes a value between 1 and 5 for $depth, where 1 is closest to the surface (smaller shadow) and 5 is the farthest (larger shadow). For example, to include a drop shadow with a z-depth of 1:

.my-stylish-element {
    @include drop-shadow(1);
}

That's all there is to it. I am considering adding more functionality to this in the future, but for now I really just wanted an easy way to use the Material Design drop shadows in my Sass projects.

If you find any bugs or have suggestions for a future version, please feel free to submit an issue.

Changelog

v1.0.0 (10-02-2014):

  • First release
  • Bower support
  • Discoverable on Sache