Détail du package

@react-md/elevation

mlaursen5.8kMIT5.1.6

This is a small package for react-md that can create the elevation styles in the material design spec.

react-md, material design, sass, styles

readme

@react-md/elevation

This is a small package for react-md that can create the elevation styles in the material design spec. Unlike the other react-md packages, this package only exports utility mixins and does not provide any React components or any default styles.

Installation

npm install --save @react-md/elevation

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

Material design has 24 different elevation types and the rmd-elevation mixin accepts a number between 0 and 24 to create that elevation.

@import "@react-md/elevation/dist/mixins";

.my-elevated-component {
  @include rmd-elevation(8);
}

This package also exports some box-shadow transition mixins to get some great performance when animating between different box shadows.

@import "@react-md/elevation/dist/mixins";

.my-box-shadow-component {
  // animate from 4 to 8 on hover
  @include rmd-elevation-transition(4, 8, "&:hover");
}

changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

5.1.6 (2023-12-11)

Note: Version bump only for package @react-md/elevation

5.1.3 (2022-05-07)

Note: Version bump only for package @react-md/elevation

5.1.2 (2022-04-02)

Note: Version bump only for package @react-md/elevation

5.1.0 (2022-03-18)

Note: Version bump only for package @react-md/elevation

5.0.0 (2022-01-31)

Note: Version bump only for package @react-md/elevation

4.0.3 (2021-12-31)

Other Internal Changes

  • Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.1 (2021-11-27)

Note: Version bump only for package @react-md/elevation

4.0.0 (2021-11-24)

Bug Fixes

  • sass: Do not use legacy global functions (6159e16)

Features

  • Update to use new JSX Transform and latest eslint (8111cd3)

Breaking Changes

  • Minimum React version is now 16.14 instead of 16.8

3.1.0 (2021-09-10)

Other Internal Changes

  • ran yarn format to include new files (48d3d7f)

3.0.1 (2021-08-15)

Bug Fixes

  • Updated peerDependencies to fix yarn berry peer requirements (250efcd), closes #1224

3.0.0 (2021-08-13)

Other Internal Changes

  • @react-md/dev-utils: updated variables command to work with sass (5376be1)

2.9.1 (2021-07-27)

Other Internal Changes

  • install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Note: Version bump only for package @react-md/elevation

2.8.5 (2021-07-03)

Note: Version bump only for package @react-md/elevation

2.8.4 (2021-06-10)

Note: Version bump only for package @react-md/elevation

2.8.3 (2021-05-18)

Note: Version bump only for package @react-md/elevation

2.8.2 (2021-04-23)

Note: Version bump only for package @react-md/elevation

2.8.0 (2021-04-22)

Note: Version bump only for package @react-md/elevation

2.7.1 (2021-03-23)

Note: Version bump only for package @react-md/elevation

2.7.0 (2021-02-28)

Documentation

  • tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)

2.6.0 (2021-02-13)

Note: Version bump only for package @react-md/elevation

2.5.5 (2021-01-30)

Note: Version bump only for package @react-md/elevation

2.5.4 (2021-01-27)

Note: Version bump only for package @react-md/elevation

2.5.0 (2020-12-15)

Note: Version bump only for package @react-md/elevation

2.4.2 (2020-10-23)

Note: Version bump only for package @react-md/elevation

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/elevation

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/elevation

2.3.0 (2020-09-10)

Note: Version bump only for package @react-md/elevation

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/elevation

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/elevation

2.1.2 (2020-08-01)

Note: Version bump only for package @react-md/elevation

2.1.1 (2020-07-21)

Note: Version bump only for package @react-md/elevation

2.1.0 (2020-07-12)

Note: Version bump only for package @react-md/elevation

2.0.2 (2020-06-30)

Bug Fixes

  • LICENSE: Removed the time range from license since it was incorrect (50c9021)
  • Added sideEffects field to package.json (31820b9)
  • sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

This is a re-write of the old Paper component as well as the paper styles. It has now been renamed to elevation to match the material design specs. This package no longer includes any styles by default and is a utility package instead.

New Behavior and Features

  • there are now 24 different types of shadows available instead of 5.
  • now exports a mixin for creating performant elevation transitions using the ::before/::after opacity trick
  • setting the elevation to 0 will no longer animate to a different elevation on hover

Breaking Changes

  • there is no longer a Paper component to add elevation styles

New SCSS Variables, Functions, and Mixins

  • @function rmd-elevation - a new function to get a box-shadow string for one of the material design elevation values if needing to join multiple shadows together
  • @mixin rmd-elevation-transition - a new mixin to create a performant box-shadow elevation transition

Renamed SCSS Variables, Functions, and Mixins

  • renamed md-box-shadow to $rmd-elevation and now allows for a custom $color and $opacity-boost

Removed SCSS Variables Placeholders, and Mixins

  • removed @mixin react-md-papers since styles are no longer generated by this package