Shadow mixins

Shadow utilities: .shadow-{size}, .shadow-{size}-{color}, .shadow-inset-{size}, .shadow-inset-{size}-{color}, .shadow-none, hover:, focus: and active: variants, and .elevation-{1-5}. Sizes and colors come from config/_shadows.scss.

Responsive variants use the @breakpoint suffix (.shadow-md@lg); active: classes have no responsive variant, and shadow-inset-* and elevation-* have no responsive or state variants.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Shadows. The A to Z index lists every public mixin and function.

Source: utilities/_shadows.scss

Mixins

shadow-base shadow shadow-inset elevation

shadow-base mixin

Sets box-shadow from explicit offset, blur, spread and color values.

@mixin shadow-base($x, $y, $blur, $spread, $color)

Parameter	Type	Default	Description
$x	Length|Number	Required	Horizontal offset
$y	Length|Number	Required	Vertical offset
$blur	Length|Number	Required	Blur radius
$spread	Length|Number	Required	Spread radius
$color	Color|String	Required	Shadow color

Example

.floating-button {
  @include shadow-base(0, 2px, 4px, 0, rgb(0 0 0 / 20%));
}

Compiled CSS

.floating-button {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

box-shadow on MDN

See also: shadow. Source: utilities/_shadows.scss:30

shadow mixin

Sets box-shadow from a configured size; the default color emits the var(--wu-shadow-*) token when the theme feature is on, other colors emit a raw shadow.

Unknown size or color keys raise an error.

@mixin shadow($size: "md", $color: "default")

Parameter	Type	Default	Description
$size	String	"md"	Size key from $shadow-sizes (sm, md, lg, xl, hero, monster), or none (box-shadow: none, as .shadow-none)
$color	String	"default"	Color key from $shadow-colors (default, dark, darker, darkest)

Example

.card {
  @include shadow(sm); // box-shadow: var(--wu-shadow-sm)
  &:hover {
    @include shadow(lg, dark);
  }
}

Compiled CSS

.card {
  box-shadow: var(--wu-shadow-sm);
}
.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

box-shadow on MDN

See also: shadow-inset, elevation. Source: utilities/_shadows.scss:59

shadow-inset mixin

Sets an inset box-shadow from a configured size and color, always as a raw value (no token).

@mixin shadow-inset($size: "md", $color: "default")

Parameter	Type	Default	Description
$size	String	"md"	Size key from $shadow-sizes (sm, md, lg, xl, hero, monster)
$color	String	"default"	Color key from $shadow-colors (default, dark, darker, darkest)

Example

.input-well {
  @include shadow-inset(sm);
}

Compiled CSS

.input-well {
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

box-shadow on MDN

See also: shadow. Source: utilities/_shadows.scss:90

elevation mixin

Sets a shadow and a matching z-index for levels 1 to 5 (sm, md, lg, xl, monster); other levels raise an error.

The z-index is the level itself (1 to 5), a small local scale that orders raised siblings; it is not a $z-index-levels token. Use z-index(dropdown), z-index(modal) and the other level tokens for page layers.

@mixin elevation($i)

Parameter	Type	Default	Description
$i	Number	Required	Elevation level from 1 to 5, also emitted as the raw z-index

Example

.dropdown-panel {
  @include elevation(3); // box-shadow: var(--wu-shadow-lg); z-index: 3
}

Compiled CSS

.dropdown-panel {
  box-shadow: var(--wu-shadow-lg);
  z-index: 3;
}

See also: shadow, z-index. Source: utilities/_shadows.scss:109