File manager - Edit - /home/autoph/public_html/portal/ajs/vendors/bower_components/material-shadows/README.md
Back
Material Design Shadows ============== The paper shadows, based on [Google's Material Design](http://www.google.com/design/spec/layout/layout-principles.html), for use in your project. Support -------------- Support for all popular css preprocessors: [Less](http://lesscss.org/), [Sass](http://sass-lang.com/) and [Stylus](http://learnboost.github.io/stylus/). Installation -------------- * Download the files you need from the this repository; * Bower: `$ bower install material-shadows --save`; * Git: `$ git clone git://github.com/mrmlnc/material-shadows.git`; How to use -------------- Just import the file, which includes mixins in your project. **Less:** ````Less @import "lib/material-shadows"; ```` **Sass:** ````Sass @import "lib/material-shadows" ```` **Stylus:** ````Stylus @import "lib/material-shadows"; ```` If you use Bower, the path would be: ```` bower_components/material-shadows/.. ```` **The build variable:** `(. | @include | none)(prefix)-z-depth-(depth)-(orientation)` - **(. | @include | none)** - Sign of the variable in the preprocessor. - **(prefix)** - The prefix variable. Namespace of your variables and variables of the library. (With `material-shadows-prefixed` and without `material-shadows`) - **(depth)** - Depth 1..5. - **(orientation)** - None, Top or Bottom. **Simple example (Less):** ````Less @import "lib/material-color"; .example-1 { .z-depth(); .z-depth-animation(3); } .example-2 { .z-depth-top(1); .z-depth-animation(5, top); } ```` HTML for `.z-depth-animation()`: ````HTML <div class="z-depth-animation"> <div class="z-depth-2">.z-depth-2</div> </div> ```` **Class generator example (less):** Options for animation: - @animation: [true (default) | false]; - @time: .28s; - @function: cubic-bezier(.4, 0, .2, 1); ````Less @import "lib/material-color"; // Class mixin .z-depth { .z-depth-class(); } // => (output) .z-depth-1 { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); } .z-depth-1-top { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } .z-depth-1-bottom { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16); } // and more ```` More examples in the test directory.
| ver. 1.4 |
.
| PHP 7.3.33 | Generation time: 0.06 |
proxy
|
phpinfo
|
Settings