js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' of https://github.com/shoelace-style/webawesome into next

Browse Source
This commit is contained in:
Cory LaViska
2024-06-18 10:21:35 -04:00
parent 03321c646f 53917b9e25
commit 3db2fad222
1 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/docs/theming/shadows.md
View File

@@ -6,7 +6,16 @@ layout: page
Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/theming/color/#shadow), these custom properties create realistic shadows for Web Awesome components.
Shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.
Shadows are constructed using corresponding offset-x, offset-y, blur, and spread properties, detailed in the sections below. In Web Awesome, shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.
| Custom Property | Default Value |
| ---------------- | ------------------------------------------------------------------- |
| `--wa-shadow-xs` | <div class="swatch" style="box-shadow: var(--wa-shadow-xs);"></div> |
| `--wa-shadow-s` | <div class="swatch" style="box-shadow: var(--wa-shadow-s);"></div> |
| `--wa-shadow-m` | <div class="swatch" style="box-shadow: var(--wa-shadow-m);"></div> |
| `--wa-shadow-l` | <div class="swatch" style="box-shadow: var(--wa-shadow-l);"></div> |
Any shadow may be implemented as an inner box shadow using the `inset` keyword, e.g. `box-shadow: inset var(--wa-shadow-xs);`.
## Horizontal Offset (X)
@@ -45,20 +54,9 @@ Each blur property uses a `calc()` function with `--wa-shadow-blur-multiplier` t
Each spread property uses a `calc()` function with `--wa-shadow-spread-multiplier` to uniformly scale spread values. By default, this multiplier is `-0.0625`. The table below lists the result of the calculation.
| Custom Property | Default Value |
| ----------------------- | ------------------------------------ |
| `--wa-shadow-spread-xs` | `0.03125rem` <small>(-0.5px)</small> |
| `--wa-shadow-spread-s` | `0.0625rem` <small>(-1px)</small> |
| `--wa-shadow-spread-m` | `0.125rem` <small>(-2px)</small> |
| `--wa-shadow-spread-l` | `0.25rem` <small>(-4px)</small> |
## Shadows
Shadows are constructed using the corresponding offset-x, offset-y, blur, and spread properties. Any shadow may be implemented as an inner box shadow using the `inset` keyword, e.g. `box-shadow: inset var(--wa-shadow-xs);`.
| Custom Property | Default Value |
| ---------------- | ------------------------------------------------------------------- |
| `--wa-shadow-xs` | <div class="swatch" style="box-shadow: var(--wa-shadow-xs);"></div> |
| `--wa-shadow-s` | <div class="swatch" style="box-shadow: var(--wa-shadow-s);"></div> |
| `--wa-shadow-m` | <div class="swatch" style="box-shadow: var(--wa-shadow-m);"></div> |
| `--wa-shadow-l` | <div class="swatch" style="box-shadow: var(--wa-shadow-l);"></div> |
| Custom Property | Default Value |
| ----------------------- | ------------------------------------- |
| `--wa-shadow-spread-xs` | `-0.03125rem` <small>(-0.5px)</small> |
| `--wa-shadow-spread-s` | `-0.0625rem` <small>(-1px)</small> |
| `--wa-shadow-spread-m` | `-0.125rem` <small>(-2px)</small> |
| `--wa-shadow-spread-l` | `-0.25rem` <small>(-4px)</small> |