Z-index mixins

Z-index utilities.

Classes:

• z-index values: .z-auto, .z-0, .z-10, .z-20, etc. (raw values from $z-indexes)
• Named z-index levels: .z-base, .z-dropdown, .z-modal, etc. (var(--wu-z-*) tokens from $z-index-levels)

Responsive: all utilities support responsive variants with the @breakpoint suffix:

• .z-10@md, .z-dropdown@lg, etc.

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: Z-index. The A to Z index lists every public mixin and function.

Source: utilities/_z-index.scss

Mixins

z-index z-index-utilities z-base z-hover z-dropdown z-sticky z-fixed z-drawer z-modal z-popover z-tooltip z-overlay z-toast z-max z-auto

z-index mixin

Sets z-index from a numbered key (raw value), a named level (var(--wu-z-*) token), an integer, auto, calc() or var(); other values raise an error.

@mixin z-index($value)

Parameter	Type	Default	Description
$value	Number|String	Required	Numbered key (10), named level (modal), integer, auto, calc() or var()

Example

.dialog {
  @include z-index(modal); // z-index: var(--wu-z-modal)
}
.badge {
  @include z-index(10); // z-index: 10
}

Compiled CSS

.dialog {
  z-index: var(--wu-z-modal);
}

.badge {
  z-index: 10;
}

z-index on MDN

See also: z-modal, z-dropdown. Source: utilities/_z-index.scss:40

z-index-utilities mixin

Emits the .z-{key} and .z-{level} classes; with a breakpoint it adds the @breakpoint suffix but does not wrap them in a media query.

@mixin z-index-utilities($breakpoint: null)

Parameter	Type	Default	Description
$breakpoint	String|Null	null	Breakpoint name used as the class suffix

Example

@media (min-width: 768px) {
  @include z-index-utilities(md);
}

Compiled CSS

@media (min-width: 768px) {
  .z-auto\@md {
    z-index: auto;
  }
  .z-0\@md {
    z-index: 0;
  }
  .z-10\@md {
    z-index: 10;
  }
  .z-20\@md {
    z-index: 20;
  }
  .z-30\@md {
    z-index: 30;
  }
  .z-40\@md {
    z-index: 40;
  }
  .z-50\@md {
    z-index: 50;
  }
  .z-60\@md {
    z-index: 60;
  }
  .z-70\@md {
    z-index: 70;
  }
  .z-80\@md {
    z-index: 80;
  }
  .z-90\@md {
    z-index: 90;
  }
  .z-100\@md {
    z-index: 100;
  }
  .z-200\@md {
    z-index: 200;
  }
  .z-500\@md {
    z-index: 500;
  }
  .z-1000\@md {
    z-index: 1000;
  }
  .z-base\@md {
    z-index: var(--wu-z-base);
  }
  .z-hover\@md {
    z-index: var(--wu-z-hover);
  }
  .z-dropdown\@md {
    z-index: var(--wu-z-dropdown);
  }
  .z-sticky\@md {
    z-index: var(--wu-z-sticky);
  }
  .z-fixed\@md {
    z-index: var(--wu-z-fixed);
  }
  .z-overlay\@md {
    z-index: var(--wu-z-overlay);
  }
  .z-drawer\@md {
    z-index: var(--wu-z-drawer);
  }
  .z-modal\@md {
    z-index: var(--wu-z-modal);
  }
  .z-popover\@md {
    z-index: var(--wu-z-popover);
  }
  .z-tooltip\@md {
    z-index: var(--wu-z-tooltip);
  }
  .z-toast\@md {
    z-index: var(--wu-z-toast);
  }
  .z-max\@md {
    z-index: var(--wu-z-max);
  }
}

Source: utilities/_z-index.scss:92

z-base mixin

Sets z-index to the base level token.

@mixin z-base

Output

z-index: var(--wu-z-base)

Example

.content {
  @include z-base;
}

Compiled CSS

.content {
  z-index: var(--wu-z-base);
}

See also: z-index. Source: utilities/_z-index.scss:120

z-hover mixin

Sets z-index to the hover level token.

@mixin z-hover

Output

z-index: var(--wu-z-hover)

Example

.card {
  @include z-hover;
}

Compiled CSS

.card {
  z-index: var(--wu-z-hover);
}

See also: z-index. Source: utilities/_z-index.scss:131

z-dropdown mixin

Sets z-index to the dropdown level token.

@mixin z-dropdown

Output

z-index: var(--wu-z-dropdown)

Example

.dropdown-menu {
  @include z-dropdown;
}

Compiled CSS

.dropdown-menu {
  z-index: var(--wu-z-dropdown);
}

See also: z-index. Source: utilities/_z-index.scss:142

z-sticky mixin

Sets z-index to the sticky level token.

@mixin z-sticky

Output

z-index: var(--wu-z-sticky)

Example

.table-header {
  @include z-sticky;
}

Compiled CSS

.table-header {
  z-index: var(--wu-z-sticky);
}

See also: z-index. Source: utilities/_z-index.scss:153

z-fixed mixin

Sets z-index to the fixed level token.

@mixin z-fixed

Output

z-index: var(--wu-z-fixed)

Example

.navbar {
  @include z-fixed;
}

Compiled CSS

.navbar {
  z-index: var(--wu-z-fixed);
}

See also: z-index. Source: utilities/_z-index.scss:164

z-drawer mixin

Sets z-index to the drawer level token.

@mixin z-drawer

Output

z-index: var(--wu-z-drawer)

Example

.drawer {
  @include z-drawer;
}

Compiled CSS

.drawer {
  z-index: var(--wu-z-drawer);
}

See also: z-index. Source: utilities/_z-index.scss:175

z-modal mixin

Sets z-index to the modal level token.

@mixin z-modal

Output

z-index: var(--wu-z-modal)

Example

.modal {
  @include z-modal;
}

Compiled CSS

.modal {
  z-index: var(--wu-z-modal);
}

See also: z-index. Source: utilities/_z-index.scss:186

z-popover mixin

Sets z-index to the popover level token.

@mixin z-popover

Output

z-index: var(--wu-z-popover)

Example

.popover {
  @include z-popover;
}

Compiled CSS

.popover {
  z-index: var(--wu-z-popover);
}

See also: z-index. Source: utilities/_z-index.scss:197

z-tooltip mixin

Sets z-index to the tooltip level token.

@mixin z-tooltip

Output

z-index: var(--wu-z-tooltip)

Example

.tooltip {
  @include z-tooltip;
}

Compiled CSS

.tooltip {
  z-index: var(--wu-z-tooltip);
}

See also: z-index. Source: utilities/_z-index.scss:208

z-overlay mixin

Sets z-index to the overlay level token.

@mixin z-overlay

Output

z-index: var(--wu-z-overlay)

Example

.backdrop {
  @include z-overlay;
}

Compiled CSS

.backdrop {
  z-index: var(--wu-z-overlay);
}

See also: z-index. Source: utilities/_z-index.scss:219

z-toast mixin

Sets z-index to the toast level token.

@mixin z-toast

Output

z-index: var(--wu-z-toast)

Example

.toast {
  @include z-toast;
}

Compiled CSS

.toast {
  z-index: var(--wu-z-toast);
}

See also: z-index. Source: utilities/_z-index.scss:230

z-max mixin

Sets z-index to the max level token.

@mixin z-max

Output

z-index: var(--wu-z-max)

Example

.debug-panel {
  @include z-max;
}

Compiled CSS

.debug-panel {
  z-index: var(--wu-z-max);
}

See also: z-index. Source: utilities/_z-index.scss:241

z-auto mixin

Sets z-index to auto.

@mixin z-auto

Example

.card {
  @include z-auto;
}

Compiled CSS

.card {
  z-index: auto;
}

See also: z-index. Source: utilities/_z-index.scss:251