mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
41 lines
2.4 KiB
CSS
41 lines
2.4 KiB
CSS
:root {
|
|
/**
|
|
* Shadows
|
|
* Shadow effects indicate elevation and, at times, interactivity.
|
|
* Elevation is defined by levels relative to the surface where the element rests -
|
|
* * Inset sits below the surface for a punched-in effect
|
|
* * Level 0 is the surface level
|
|
* * Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
|
|
* * Level 2 is raised above all other elements on the same surface, such as dropdown menus
|
|
* * Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
|
|
*/
|
|
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
|
|
* The base value is intended for calculations and is not used by components directly. */
|
|
--wa-shadow-blur-multiplier: 0;
|
|
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.75rem);
|
|
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
|
|
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 1.5rem);
|
|
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 2rem);
|
|
|
|
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
|
|
* or transforming elements with shadows. */
|
|
--wa-shadow-offset-y-multiplier: 0;
|
|
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.75rem);
|
|
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
|
|
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 1.5rem);
|
|
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
|
|
|
|
--wa-shadow-offset-x-multiplier: 0;
|
|
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.75rem);
|
|
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
|
|
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 1.5rem);
|
|
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
|
|
|
|
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
|
|
var(--wa-color-shadow);
|
|
--wa-shadow-level-0: none;
|
|
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
|
|
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
|
|
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
|
|
}
|