Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@material/elevation
Advanced tools
Material Components for the web mixins + CSS Classes for Material Design elevation
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
.
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 likez-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 thandp
. However, when we refer toz-space
(orz
), that can be used interchangeably with the spec'sdp
.
npm install @material/elevation
Some components have a set elevation. For example, a raised MDC Button has elevation 2.
If you want to set the elevation of an element, which is not a Material Design component, you can apply the following CSS classes.
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 |
Mixin | Description |
---|---|
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 |
Function | Description |
---|---|
mdc-elevation-transition-value($duration, $easing) | Returns a value for the transition property to transition an element between elevations |
Variable | Description |
---|---|
$mdc-elevation-property | Default property for elevation transitions |
$mdc-elevation-transition-duration | Default duration value for elevation transitions |
$mdc-elevation-transition-timing-function | Default easing value for elevation transitions |
If you need more configurability over your transitions, use the mdc-elevation-transition-value
function in conjunction with the exported sass variables.
.my-component-with-custom-transitions {
transition:
mdc-elevation-transition-value(),
/* Configure opacity to use same duration and easing values as elevation */
opacity $mdc-elevation-transition-duration $mdc-elevation-transition-timing-function;
opacity: .7;
will-change: $mdc-elevation-property, opacity;
}
FAQs
Material Components for the web mixins + CSS Classes for Material Design elevation
The npm package @material/elevation receives a total of 789,571 weekly downloads. As such, @material/elevation popularity was classified as popular.
We found that @material/elevation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.