@material/elevation - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

package.json

		{
		"name": "@material/elevation",
		"description": "Material Components for the web mixins + CSS Classes for Material Design elevation",
		"version": "0.1.8",
		"version": "0.1.9",
		"license": "Apache-2.0",
		@@ -6,0 +6,0 @@ "keywords": [

127

README.md

		@@ -19,10 +19,4 @@ <!--docs:

		MDC Elevation provides Sass mixins and CSS classes which are used to provide [shadows and
		elevation](https://material.io/guidelines/what-is-material/elevation-shadows.html) to our material
		components.
		Shadows 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`.

		The elevation values are mapped out in a "z-space" and range from `0` to `24`.
		Our implementation is based on [Scott Hyndman's work](http://codepen.io/shyndman/full/ojxmdY/),
		which was created in collaboration with the designers on the Material Design team.

		> A note about "z-space": Within the spec, elevation is normally referred to as having a `dp`
		@@ -54,98 +48,18 @@ > value. In other words, how many "pixels" above the base material is a piece of material elevated.

		### Sass Mixin
		### Sass Mixins, Variables, and Functions

		MDC Elevation exports an `mdc-elevation` mixin which can be used to set the elevation on a selector.
		It works by assigning the correct elevation value to a selector's `box-shadow` property.
		\| Mixin \| Description \|
		\| ----------------------------------------------- \| - \|
		\| `mdc-elevation($z-value)` \| Sets the elevation to the z-space for that given elevation \|
		\| `mdc-elevation-transition($duration, $easing)` \| Applies the correct css rules to transition an element between elevations \|

		`mdc-elevation` takes one `$z-value` argument which represents the z-space for that given elevation. For example, [cards](https://material.io/guidelines/components/cards.html) have a resting elevation of `2dp`. Implementing that using MDC Elevation looks like the following:
		\| Variable \| Description \|
		\| ------------------------------------------- \| - \|
		\| `mdc-elevation-transition-duration` \| Default duration value for elevation transitions \|
		\| `mdc-elevation-transition-timing-function` \| Default easing value for elevation transitions \|

		```scss
		@import "@material/elevation/mixins";
		If you need more configurability over your transitions, use the `mdc-elevation-transition-rule` function in conjunction with the exported sass variables.

		.mdc-card {
		@include mdc-elevation(2);
		// ...
		}
		```

		It is also quite simple to alias common elevations throughout your application by leveraging this
		mixin to export classes:

		```scss
		$elevations: (low, medium-low, medium, medium-high, high);

		@for $i from 1 through length($elevations) {
		$elev: nth($elevations, $i);
		$z: $i * 2;
		.my-app-elevation--#{$elev} {
		@include mdc-elevation($z);
		}
		}
		```

		Note that importing `mdc-elevation/mixins` does not output any CSS.

		### CSS Classes

		MDC Elevation also includes a CSS file that exports all z values as `mdc-elevation--z<N>` modifier
		classes that can be easily used within HTML.

		> NOTE: dist/ dir will be available post-alpha in the distributed npm package.

		```html
		<!-- in <head> -->
		<link rel="stylesheet" href="/path/to/mdc-elevation/dist/mdc-elevation.css">
		<!-- ... -->
		<!-- in <body> -->
		<p class="mdc-elevation--z2">Text that floats near the material surface</p>
		<p class="mdc-elevation--z18">Text that floats far away from the material surface</p>
		```

		### Handling elevation transitions

		MDC Elevation includes utilities for transitioning between elevations.

		#### Sass functions/mixins

		The `mdc-elevation-transition-rule` function takes an optional duration and optional easing curve and
		spits out a `transition` property value shorthand with `box-shadow` specified as the property, and
		either the supplied or default durations / easings for the transition.

		You can also use the `mdc-elevation-transition` mixin - which takes the same arguments as the above
		function - to output a `transition` property with the correct values as well as a `will-change`
		property with `box-shadow` set.

		```scss
		@import "@material/animation/variables";
		@import "@material/elevation/mixins";

		.my-component {
		@include mdc-elevation(2);
		@include mdc-elevation-transition;

		&--fast-transitions {
		transition: mdc-elevation-transition-rule(180ms);
		}

		&--default-ease-transitions {
		transition: mdc-elevation-transition-rule($mdc-elevation-transition-duration, ease);
		}

		&:focus {
		@include mdc-elevation(4);
		}

		&:active {
		@include mdc-elevation(8);
		}
		}
		```

		If you need more configurability over your transitions, you can easily accomplish this by using
		the `mdc-elevation-transition-rule` function in conjunctions with the exported sass variables that
		mdc-elevation exposes for purposes of transitioning.

		```scss
		.my-component-with-custom-transitions {
		@include mdc-elevation(2);

		@@ -158,19 +72,10 @@ transition:
		will-change: $mdc-elevation-property, opacity;

		&:hover {
		opacity: 1;
		}

		&:active {
		@include mdc-elevation(6);
		}
		}
		```

		#### CSS Classes
		### CSS Classes

		MDC Elevation also exports an `mdc-elevation-transition` CSS class which can be used within HTML.

		```html
		<p class="mdc-elevation-transition mdc-elevation--z2">My elevation will change at some point...</p>
		```
		\| CSS Class \| Description \|
		\| --------------------------- \| - \|
		\| `mdc-elevation--z<N>` \| Sets the elevation to the (N)dp, where 1 <= N <= 24. \|
		\| `mdc-elevation-transition` \| Applies the correct css rules to transition an element between elevations. \|

@material/elevation - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics