{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0b8bbe346ebb29a4decd35b961aaf2635ff89bd","tarball":"https://registry.npmjs.org/@material/elevation/-/elevation-0.35.0.tgz","fileCount":7,"integrity":"sha512-8j+CRrrmyJ/0cSLXI4NykqPIvkHf7dLVUd6G7g7BXDOQkNOMSuu+/8qWOl8zpzd6eoXCqhD8JeZCw684XhVzQw==","signatures":[{"sig":"MEUCIFKn/WNc+tUNK9VPuljpoEiaVfGlogP3h89kdnQQreh+AiEAz3gJJb8jDxIkYdzVLaMmenH2RLwaa8VQNVGez1Ih0d8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDMCRA9TVsSAnZWagAASu4P/jTD207KaTa8yjupLwKU\n0Nxud3tg87kGDN9OBnrJEtHrtpFpTQdVIQu2GhLgUjBQz8g8beDxv4hBbPnp\n1n9vnKMIEu39cCEnEMtZvaIWOD4iq0sCZxOstPV9me75PzA1sa/8cWenBnTO\n6DGdGI1NY409pag8Bn4pX2mT5P3DawIhoQG234lYrQnoyVdNgQHgyUf9uNqk\nzmhaS2LmaBgR6lVfIIto+nY9krJy2JA3zfCAMyuQ9v4dZujguzNGBdJBwJSW\nZpaIlrapopbIZbEknzhrB8TGb82292alvhns5YLvVe0L6cSvBsm2aXY25N5V\ntqC1PtZ2aYouKz+cUoMiDZxseDb1uJPrKfqG3kIvXfBUTGrA7ltgTkWT1IF5\nbJBbEWI3hS5DEQHm+mIxxfFHXFXhMEmEzQqzFxybykH8GVxblborxOFgItpD\nn7nusIiey/ie+X9NAp+nnQxtVIh7hhoutf7D2pTEs093S8Ns3+H1T4b/KAlE\nNFsfT1BPCT7ivCuL6qb9BITs3vg4K0ZAtO5NUD0jowQ0r/wrY7+nj66tsflV\nKuRH6XnDZixqzJUBSJ+JfZk0qj2MtiPa5zvKElVA6CJhGWSN1Av/tq2JMM6J\nrqhMW+IQNkTJjBXKZVXLDqKby+2Oo9j9c3Jv8G5S45SbTYB5MDGwrwfvu0lQ\nirt1\r\n=Ys65\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/elevation","readme":"<!--docs:\ntitle: \"Elevation\"\nlayout: detail\nsection: components\nexcerpt: \"Shadows and elevation as Sass mixins and CSS classes.\"\niconId: shadow\npath: /catalog/elevation/\n-->\n\n# Elevation\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components-web.appspot.com/elevation.html\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/elevation.png\" width=\"247\" alt=\"Elevation screenshot\">\n  </a>\n</div>-->\n\nShadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. The elevation values are mapped out in a \"z-space\" and range from `0` to `24`.\n\n> **A note about \"z-space\"**: Within the spec, elevation is normally referred to as having a `dp` value. In other words, how many \"pixels\" above the base material is a piece of material elevated. On a computer, this is normally represented by a 3-d coordinate system. We like `z-space` (or just \"z\" for short) because it aligns with the technical definition of, and nomenclature for, a 3-d coordinate system. Therefore, we feel it makes more sense than `dp`. However, when we refer to `z-space` (or `z`), that can be used interchangeably with the spec's `dp`.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/what-is-material/elevation-shadows.html\">Material Design guidelines: Shadows & elevation</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components-web.appspot.com/elevation.html\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/elevation\n```\n\n## Usage\n\n### CSS Classes\n\nSome components have a set elevation. For example, a raised MDC Button has elevation 2.\n\nIf you want to set the elevation of an element, which is not a Material Design component, you\ncan apply the following CSS classes.\n\nCSS Class | Description\n--- | ---\n`mdc-elevation--z<N>` | Sets the elevation to the (N)dp, where 1 <= N <= 24\n`mdc-elevation-transition` | Applies the correct css rules to transition an element between elevations\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-elevation($z-value, $color, $opacity-boost)` | Sets the elevation to the z-space for that given elevation, and optionally sets the color and/or boosts the opacity of the shadow\n\nFunction | Description\n--- | ---\n`mdc-elevation-transition-value($duration, $easing)` | Returns a value for the `transition` property to transition an element between elevations\n\nVariable | Description\n--- | ---\n`mdc-elevation-property` | Default property for elevation transitions\n`mdc-elevation-transition-duration` | Default duration value for elevation transitions\n`mdc-elevation-transition-timing-function` | Default easing value for elevation transitions\n\nIf you need more configurability over your transitions, use the `mdc-elevation-transition-value` function in conjunction with the exported sass variables.\n\n```scss\n.my-component-with-custom-transitions {\n\n  transition:\n    mdc-elevation-transition-value(),\n    /* Configure opacity to use same duration and easing values as elevation */\n    opacity $mdc-elevation-transition-duration $mdc-elevation-transition-timing-function;\n  opacity: .7;\n  will-change: $mdc-elevation-property, opacity;\n}\n```\n","license":"Apache-2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","elevation"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"Material Components for the web mixins + CSS Classes for Material Design elevation","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.4.0","@material/animation":"^0.34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/elevation_0.35.0_1524523212338_0.8964828414327703","host":"s3://npm-registry-packages"},"_id":"@material/elevation@0.35.0","version":"0.35.0"}