Skip to content
NuvoUI

Utility mixins

Mixins behind the utility classes, grouped by source file. Each one can be called directly with @include or by name inside apply(), with a state and a breakpoint after it.

This page is generated from the doc blocks in the core source when the site is built, so it always matches the current release of @nuvoui/core. Every example is compiled against core during the build; open Compiled CSS under an example to see its output. The A to Z index lists every public mixin and function.

Alignment

utilities/_alignment.scss

align-baseline align-top align-middle align-bottom

align-baseline mixin

Sets vertical-align to baseline (inline and table cell content).

@mixin align-baseline

Example

.icon {
  @include align-baseline;
}
Compiled CSS
.icon {
  vertical-align: baseline;
}

See also: align-top, align-middle, align-bottom. Source: utilities/_alignment.scss:12

align-top mixin

Sets vertical-align to top (inline and table cell content).

@mixin align-top

Example

td {
  @include align-top;
}
Compiled CSS
td {
  vertical-align: top;
}

See also: align-baseline, align-middle, align-bottom. Source: utilities/_alignment.scss:23

align-middle mixin

Sets vertical-align to middle (inline and table cell content).

@mixin align-middle

Example

.avatar {
  @include align-middle;
}
Compiled CSS
.avatar {
  vertical-align: middle;
}

See also: align-baseline, align-top, align-bottom. Source: utilities/_alignment.scss:34

align-bottom mixin

Sets vertical-align to bottom (inline and table cell content).

@mixin align-bottom

Example

td {
  @include align-bottom;
}
Compiled CSS
td {
  vertical-align: bottom;
}

See also: align-baseline, align-top, align-middle. Source: utilities/_alignment.scss:45

Animations

utilities/_animations.scss

ensure-keyframes animate-bounce hover-ready animate-pulse animate-spin animate-ping animate-fade animate-shake

ensure-keyframes mixin

Emits an @keyframes rule with the given name once per compilation, at the root of the stylesheet (outside @media, @supports, @container and @scope, inside any @layer); later calls with the same name emit nothing.

@mixin ensure-keyframes($name)
ParameterTypeDefaultDescription
$nameStringRequiredKeyframes name
Content block
The keyframe selectors and declarations

Example

.toast {
  animation: toast-in 0.3s ease-out;
  @include ensure-keyframes(toast-in) {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
Compiled CSS
.toast {
  animation: toast-in 0.3s ease-out;
}
@keyframes toast-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Source: utilities/_animations.scss:37

animate-bounce mixin

Sets an animation that moves the element to a horizontal and vertical offset and back, and emits its keyframes once.

@mixin animate-bounce($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for vertical (0.5rem), horizontal (0), duration (1s), timing (ease-in-out), iteration (infinite); offsets are lengths, and a unitless number other than 0 raises an error

Example

.scroll-hint {
  @include animate-bounce((vertical: 10px, duration: 2s));
}
Compiled CSS
.scroll-hint {
  animation: anim-bounce-0-10px 2s ease-in-out infinite;
}
@keyframes anim-bounce-0-10px {
  0%, 100% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translate(0, 10px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

Source: utilities/_animations.scss:89

hover-ready mixin

Adds a transition on all properties with the default duration and easing tokens ($transition-default-duration, $transition-default-ease) so hover changes animate.

@mixin hover-ready
Output
transition-property: all; transition-duration: var(--nu-duration-200); transition-timing-function: var(--nu-ease-in-out)

Example

.card {
  @include hover-ready;
}
Compiled CSS
.card {
  transition-property: all;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
}

See also: transition. Source: utilities/_animations.scss:154

animate-pulse mixin

Sets an animation that fades opacity between a maximum and a minimum, and emits its keyframes once.

@mixin animate-pulse($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for min-opacity (0.5), max-opacity (1), duration (1s), timing (ease-in-out), iteration (infinite)

Example

.skeleton {
  @include animate-pulse((min-opacity: 0.4, duration: 1.5s));
}
Compiled CSS
.skeleton {
  animation: anim-pulse-40-100 1.5s ease-in-out infinite;
}
@keyframes anim-pulse-40-100 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

Source: utilities/_animations.scss:167

animate-spin mixin

Sets a full 360 degree rotation animation (any direction other than normal spins backwards), and emits its keyframes once.

@mixin animate-spin($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for direction (normal), duration (1s), timing (linear), iteration (infinite)

Example

.spinner {
  @include animate-spin((duration: 0.8s));
}
Compiled CSS
.spinner {
  animation: anim-spin-normal 0.8s linear infinite;
}
@keyframes anim-spin-normal {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Source: utilities/_animations.scss:207

animate-ping mixin

Sets an animation that scales the element up while fading it out, and emits its keyframes once.

@mixin animate-ping($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for scale (2), duration (1s), timing (cubic-bezier(0, 0, 0.2, 1)), iteration (infinite)

Example

.status-dot {
  @include animate-ping((scale: 3));
}
Compiled CSS
.status-dot {
  animation: anim-ping-30 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes anim-ping-30 {
  75%, 100% {
    transform: scale(3);
    opacity: 0;
  }
}

Source: utilities/_animations.scss:248

animate-fade mixin

Sets a fade animation of type in, out, in-up or in-down (the up and down types also slide 20px), and emits its keyframes once; any other type raises an error.

@mixin animate-fade($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for type (in), duration (0.5s), timing (ease-in-out), iteration (1 forwards)

Example

.modal {
  @include animate-fade((type: in-up, duration: 0.3s));
}
Compiled CSS
.modal {
  animation: anim-fade-in-up 0.3s ease-in-out 1 forwards;
}
@keyframes anim-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Source: utilities/_animations.scss:286

animate-shake mixin

Sets a horizontal shake animation of the given intensity, and emits its keyframes once per intensity and unit (5px and 5rem get separate keyframes).

@mixin animate-shake($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for intensity (5px; a length, a unitless number other than 0 raises an error), duration (0.5s), timing (ease-in-out), iteration (1)

Example

.input-invalid {
  @include animate-shake((intensity: 8px));
}
Compiled CSS
.input-invalid {
  animation: anim-shake-8px 0.5s ease-in-out 1;
}
@keyframes anim-shake-8px {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

Source: utilities/_animations.scss:356

Backdrop filters

utilities/_backdrop-filters.scss

backdrop-filter backdrop-layer backdrop-blur backdrop-brightness backdrop-contrast backdrop-grayscale backdrop-hue-rotate backdrop-invert backdrop-saturate backdrop-sepia backdrop-frosted backdrop-glass backdrop-dark-glass backdrop-crystal backdrop-matte backdrop-none generate-backdrop-filter-utilities

backdrop-filter mixin

Sets backdrop-filter to the given value as written, replacing any composed or preset filter.

@mixin backdrop-filter($value)
ParameterTypeDefaultDescription
$valueStringRequiredAny backdrop-filter value, such as blur(6px) saturate(140%) or none

Example

.overlay {
  @include backdrop-filter(blur(6px) saturate(140%));
}
Compiled CSS
.overlay {
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:116

backdrop-layer mixin

Resets every backdrop filter variable to its identity value and writes the backdrop-filter that combines them; include it before the filter mixins.

@mixin backdrop-layer
Output
Eight --nu-backdrop-* identity values and backdrop-filter: var(--nu-backdrop-blur) ... var(--nu-backdrop-sepia)

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-blur(md);
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-blur: blur(4px);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-blur(lg), backdrop-saturate(150%));
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-blur: blur(8px);
  --nu-backdrop-saturate: saturate(150%);
}

Note. A filter mixin included before backdrop-layer in the same rule is reset by it.

See also: backdrop-blur, backdrop-none. Source: utilities/_backdrop-filters.scss:164

backdrop-blur mixin

Sets the --nu-backdrop-blur variable to blur() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-blur($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredA $backdrop-blur-values key (none, sm, md, lg, xl, 2xl), a length in px, rem or em, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-blur(md);
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-blur: blur(4px);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-blur(6px));
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-blur: blur(6px);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:206

backdrop-brightness mixin

Sets the --nu-backdrop-brightness variable to brightness() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-brightness($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredA $backdrop-brightness-values key (none, 75, 90, 110, 125, 150; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-brightness(90);
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-brightness: brightness(90%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-brightness(80%));
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-brightness: brightness(80%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:223

backdrop-contrast mixin

Sets the --nu-backdrop-contrast variable to contrast() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-contrast($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredA $backdrop-contrast-values key (none, 75, 90, 110, 125, 150; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-contrast(125);
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-contrast: contrast(125%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-contrast(120%));
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-contrast: contrast(120%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:240

backdrop-grayscale mixin

Sets the --nu-backdrop-grayscale variable to grayscale() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-grayscale($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredA $backdrop-grayscale-values key (none, 25, 50, 75, 100; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-grayscale(50);
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-grayscale: grayscale(50%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-grayscale(30%));
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-grayscale: grayscale(30%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:257

backdrop-hue-rotate mixin

Sets the --nu-backdrop-hue-rotate variable to hue-rotate() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-hue-rotate($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredA $backdrop-hue-rotate-values key (0, 90, 180, 270; unquoted and quoted numbers both match), an angle such as 45deg, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-hue-rotate(90);
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-hue-rotate: hue-rotate(90deg);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-hue-rotate(45deg));
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-hue-rotate: hue-rotate(45deg);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:274

backdrop-invert mixin

Sets the --nu-backdrop-invert variable to invert() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-invert($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredA $backdrop-invert-values key (none, 25, 50, 75, 100; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-invert(100);
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-invert: invert(100%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-invert(10%));
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-invert: invert(10%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:291

backdrop-saturate mixin

Sets the --nu-backdrop-saturate variable to saturate() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-saturate($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredA $backdrop-saturate-values key (none, 50, 75, 125, 150, 200; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-saturate(150);
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-saturate: saturate(150%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-saturate(180%));
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-saturate: saturate(180%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:308

backdrop-sepia mixin

Sets the --nu-backdrop-sepia variable to sepia() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-sepia($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredA $backdrop-sepia-values key (none, 25, 50, 75, 100; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-sepia(50);
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-sepia: sepia(50%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-sepia(20%));
}
Compiled CSS
.overlay {
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  --nu-backdrop-sepia: sepia(20%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:325

backdrop-frosted mixin

Applies the frosted preset (blur(8px) saturate(90%) brightness(120%)) directly to backdrop-filter, so no backdrop-layer is needed.

@mixin backdrop-frosted

Example

.panel {
  @include backdrop-frosted;
}
Compiled CSS
.panel {
  -webkit-backdrop-filter: blur(8px) saturate(90%) brightness(120%);
  backdrop-filter: blur(8px) saturate(90%) brightness(120%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:336

backdrop-glass mixin

Applies the glass preset (blur(8px) saturate(120%) contrast(90%)) directly to backdrop-filter, so no backdrop-layer is needed.

@mixin backdrop-glass

Example

.panel {
  @include backdrop-glass;
}
Compiled CSS
.panel {
  -webkit-backdrop-filter: blur(8px) saturate(120%) contrast(90%);
  backdrop-filter: blur(8px) saturate(120%) contrast(90%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:347

backdrop-dark-glass mixin

Applies the dark glass preset (blur(8px) saturate(180%) brightness(70%) contrast(90%)) directly to backdrop-filter, so no backdrop-layer is needed.

@mixin backdrop-dark-glass

Example

.panel {
  @include backdrop-dark-glass;
}
Compiled CSS
.panel {
  -webkit-backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
  backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:358

backdrop-crystal mixin

Applies the crystal preset (blur(8px) saturate(150%)) directly to backdrop-filter, so no backdrop-layer is needed.

@mixin backdrop-crystal

Example

.panel {
  @include backdrop-crystal;
}
Compiled CSS
.panel {
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:369

backdrop-matte mixin

Applies the matte preset (blur(20px) saturate(90%) brightness(90%)) directly to backdrop-filter, so no backdrop-layer is needed.

@mixin backdrop-matte

Example

.panel {
  @include backdrop-matte;
}
Compiled CSS
.panel {
  -webkit-backdrop-filter: blur(20px) saturate(90%) brightness(90%);
  backdrop-filter: blur(20px) saturate(90%) brightness(90%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:380

backdrop-none mixin

Removes the backdrop filter and returns the --nu-backdrop-* variables to their identity values, so a later composed filter stays valid.

@mixin backdrop-none

Example

.panel {
  @include backdrop-none;
}
Compiled CSS
.panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  --nu-backdrop-blur: blur(0);
  --nu-backdrop-brightness: brightness(100%);
  --nu-backdrop-contrast: contrast(100%);
  --nu-backdrop-grayscale: grayscale(0);
  --nu-backdrop-hue-rotate: hue-rotate(0deg);
  --nu-backdrop-invert: invert(0);
  --nu-backdrop-saturate: saturate(100%);
  --nu-backdrop-sepia: sepia(0);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:391

generate-backdrop-filter-utilities mixin

Emits the backdrop utility classes (layer, filters, presets, none), with an @breakpoint suffix when a breakpoint is given.

@mixin generate-backdrop-filter-utilities($breakpoint: null)
ParameterTypeDefaultDescription
$breakpointString|NullnullBreakpoint name used as the class suffix; place the call inside the matching media query
Output
Classes such as .backdrop-layer@md, .backdrop-blur-md@md and .backdrop-frosted@md

Example

@media (min-width: 768px) {
  @include generate-backdrop-filter-utilities(md);
}
Compiled CSS
@media (min-width: 768px) {
  :where(.backdrop-layer\@md) {
    --nu-backdrop-blur: blur(0);
    --nu-backdrop-brightness: brightness(100%);
    --nu-backdrop-contrast: contrast(100%);
    --nu-backdrop-grayscale: grayscale(0);
    --nu-backdrop-hue-rotate: hue-rotate(0deg);
    --nu-backdrop-invert: invert(0);
    --nu-backdrop-saturate: saturate(100%);
    --nu-backdrop-sepia: sepia(0);
  }
  .backdrop-layer\@md {
    -webkit-backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
    backdrop-filter: var(--nu-backdrop-blur) var(--nu-backdrop-brightness) var(--nu-backdrop-contrast) var(--nu-backdrop-grayscale) var(--nu-backdrop-hue-rotate) var(--nu-backdrop-invert) var(--nu-backdrop-saturate) var(--nu-backdrop-sepia);
  }
  .backdrop-none\@md {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --nu-backdrop-blur: blur(0);
    --nu-backdrop-brightness: brightness(100%);
    --nu-backdrop-contrast: contrast(100%);
    --nu-backdrop-grayscale: grayscale(0);
    --nu-backdrop-hue-rotate: hue-rotate(0deg);
    --nu-backdrop-invert: invert(0);
    --nu-backdrop-saturate: saturate(100%);
    --nu-backdrop-sepia: sepia(0);
  }
  .backdrop-blur-none\@md {
    --nu-backdrop-blur: blur(0);
  }
  .backdrop-blur-sm\@md {
    --nu-backdrop-blur: blur(2px);
  }
  .backdrop-blur-md\@md {
    --nu-backdrop-blur: blur(4px);
  }
  .backdrop-blur-lg\@md {
    --nu-backdrop-blur: blur(8px);
  }
  .backdrop-blur-xl\@md {
    --nu-backdrop-blur: blur(16px);
  }
  .backdrop-blur-2xl\@md {
    --nu-backdrop-blur: blur(32px);
  }
  .backdrop-brightness-none\@md {
    --nu-backdrop-brightness: brightness(100%);
  }
  .backdrop-brightness-75\@md {
    --nu-backdrop-brightness: brightness(75%);
  }
  .backdrop-brightness-90\@md {
    --nu-backdrop-brightness: brightness(90%);
  }
  .backdrop-brightness-110\@md {
    --nu-backdrop-brightness: brightness(110%);
  }
  .backdrop-brightness-125\@md {
    --nu-backdrop-brightness: brightness(125%);
  }
  .backdrop-brightness-150\@md {
    --nu-backdrop-brightness: brightness(150%);
  }
  .backdrop-contrast-none\@md {
    --nu-backdrop-contrast: contrast(100%);
  }
  .backdrop-contrast-75\@md {
    --nu-backdrop-contrast: contrast(75%);
  }
  .backdrop-contrast-90\@md {
    --nu-backdrop-contrast: contrast(90%);
  }
  .backdrop-contrast-110\@md {
    --nu-backdrop-contrast: contrast(110%);
  }
  .backdrop-contrast-125\@md {
    --nu-backdrop-contrast: contrast(125%);
  }
  .backdrop-contrast-150\@md {
    --nu-backdrop-contrast: contrast(150%);
  }
  .backdrop-grayscale-none\@md {
    --nu-backdrop-grayscale: grayscale(0);
  }
  .backdrop-grayscale-25\@md {
    --nu-backdrop-grayscale: grayscale(25%);
  }
  .backdrop-grayscale-50\@md {
    --nu-backdrop-grayscale: grayscale(50%);
  }
  .backdrop-grayscale-75\@md {
    --nu-backdrop-grayscale: grayscale(75%);
  }
  .backdrop-grayscale-100\@md {
    --nu-backdrop-grayscale: grayscale(100%);
  }
  .backdrop-saturate-none\@md {
    --nu-backdrop-saturate: saturate(100%);
  }
  .backdrop-saturate-50\@md {
    --nu-backdrop-saturate: saturate(50%);
  }
  .backdrop-saturate-75\@md {
    --nu-backdrop-saturate: saturate(75%);
  }
  .backdrop-saturate-125\@md {
    --nu-backdrop-saturate: saturate(125%);
  }
  .backdrop-saturate-150\@md {
    --nu-backdrop-saturate: saturate(150%);
  }
  .backdrop-saturate-200\@md {
    --nu-backdrop-saturate: saturate(200%);
  }
  .backdrop-sepia-none\@md {
    --nu-backdrop-sepia: sepia(0);
  }
  .backdrop-sepia-25\@md {
    --nu-backdrop-sepia: sepia(25%);
  }
  .backdrop-sepia-50\@md {
    --nu-backdrop-sepia: sepia(50%);
  }
  .backdrop-sepia-75\@md {
    --nu-backdrop-sepia: sepia(75%);
  }
  .backdrop-sepia-100\@md {
    --nu-backdrop-sepia: sepia(100%);
  }
  .backdrop-hue-rotate-0\@md {
    --nu-backdrop-hue-rotate: hue-rotate(0deg);
  }
  .backdrop-hue-rotate-90\@md {
    --nu-backdrop-hue-rotate: hue-rotate(90deg);
  }
  .backdrop-hue-rotate-180\@md {
    --nu-backdrop-hue-rotate: hue-rotate(180deg);
  }
  .backdrop-hue-rotate-270\@md {
    --nu-backdrop-hue-rotate: hue-rotate(270deg);
  }
  .backdrop-invert-none\@md {
    --nu-backdrop-invert: invert(0);
  }
  .backdrop-invert-25\@md {
    --nu-backdrop-invert: invert(25%);
  }
  .backdrop-invert-50\@md {
    --nu-backdrop-invert: invert(50%);
  }
  .backdrop-invert-75\@md {
    --nu-backdrop-invert: invert(75%);
  }
  .backdrop-invert-100\@md {
    --nu-backdrop-invert: invert(100%);
  }
  .backdrop-frosted\@md {
    -webkit-backdrop-filter: blur(8px) saturate(90%) brightness(120%);
    backdrop-filter: blur(8px) saturate(90%) brightness(120%);
  }
  .backdrop-glass\@md {
    -webkit-backdrop-filter: blur(8px) saturate(120%) contrast(90%);
    backdrop-filter: blur(8px) saturate(120%) contrast(90%);
  }
  .backdrop-dark-glass\@md {
    -webkit-backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
    backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
  }
  .backdrop-crystal\@md {
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    backdrop-filter: blur(8px) saturate(150%);
  }
  .backdrop-matte\@md {
    -webkit-backdrop-filter: blur(20px) saturate(90%) brightness(90%);
    backdrop-filter: blur(20px) saturate(90%) brightness(90%);
  }
}

Source: utilities/_backdrop-filters.scss:405

Borders

utilities/_borders.scss

border border-top border-right border-bottom border-left border-start border-end rounded rounded-t rounded-r rounded-b rounded-l rounded-tl rounded-tr rounded-br rounded-bl rounded-s rounded-e rounded-ss rounded-se rounded-es rounded-ee border-style border-color border-all pill

border mixin

Draws a border on all sides with a width key, a style and a colour that defaults to the border-regular token.

@mixin border($val, $style: solid, $color: null)
ParameterTypeDefaultDescription
$valNumber|LengthRequiredA $border-widths key (0, 1, 2, 4, 8) giving var(--nu-border-width-*), or a length such as 3px
$styleStringsolidsolid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --nu-border-style
$colorString|Color|NullnullA role, palette name, theme word (regular, strong, control, control-hover, focus), colour value or var(); resolved like border-color()
Output
border-width, border-style: var(--nu-border-style), border-color and --nu-border-style; a zero width emits border-width only

Example 1

.card {
  @include border(1); // var(--nu-border-width-1), solid, var(--nu-border-regular)
}
Compiled CSS
.card {
  border-width: var(--nu-border-width-1);
  border-style: var(--nu-border-style);
  border-color: var(--nu-border-regular);
  --nu-border-style: solid;
}

Example 2

.alert {
  @include border(2, dashed, danger);
}
Compiled CSS
.alert {
  border-width: var(--nu-border-width-2);
  border-style: var(--nu-border-style);
  border-color: var(--nu-danger);
  --nu-border-style: dashed;
}

Example 3

.input {
  @include apply(border(1, solid, control), rounded(md));
}
Compiled CSS
.input {
  border-width: var(--nu-border-width-1);
  border-style: var(--nu-border-style);
  border-color: var(--nu-border-control);
  --nu-border-style: solid;
  border-radius: var(--nu-radius-md);
}

Note. A unitless width that is not a key, such as 3, raises an error; an unknown style raises an error.

See also: border-color, border-style, border-all. Source: utilities/_borders.scss:121

border-top mixin

Draws a border on the top side in the border-regular colour unless a colour is given.

@mixin border-top($val, $style: solid, $color: null)
ParameterTypeDefaultDescription
$valNumber|LengthRequiredA $border-widths key (0, 1, 2, 4, 8) giving var(--nu-border-width-*), or a length such as 3px
$styleStringsolidsolid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --nu-border-style
$colorString|Color|NullnullA role, palette name, theme word, colour value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-top(1);
}
Compiled CSS
.item {
  border-top-width: var(--nu-border-width-1);
  border-top-style: var(--nu-border-style);
  border-top-color: var(--nu-border-regular);
  --nu-border-style: solid;
}

Example 2

.divider {
  @include border-top(2, dashed, brand);
}
Compiled CSS
.divider {
  border-top-width: var(--nu-border-width-2);
  border-top-style: var(--nu-border-style);
  border-top-color: var(--nu-brand);
  --nu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:174

border-right mixin

Draws a border on the right side (physical) in the border-regular colour unless a colour is given.

@mixin border-right($val, $style: solid, $color: null)
ParameterTypeDefaultDescription
$valNumber|LengthRequiredA $border-widths key (0, 1, 2, 4, 8) giving var(--nu-border-width-*), or a length such as 3px
$styleStringsolidsolid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --nu-border-style
$colorString|Color|NullnullA role, palette name, theme word, colour value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-right(1);
}
Compiled CSS
.item {
  border-right-width: var(--nu-border-width-1);
  border-right-style: var(--nu-border-style);
  border-right-color: var(--nu-border-regular);
  --nu-border-style: solid;
}

Example 2

.divider {
  @include border-right(2, dashed, brand);
}
Compiled CSS
.divider {
  border-right-width: var(--nu-border-width-2);
  border-right-style: var(--nu-border-style);
  border-right-color: var(--nu-brand);
  --nu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:192

border-bottom mixin

Draws a border on the bottom side in the border-regular colour unless a colour is given.

@mixin border-bottom($val, $style: solid, $color: null)
ParameterTypeDefaultDescription
$valNumber|LengthRequiredA $border-widths key (0, 1, 2, 4, 8) giving var(--nu-border-width-*), or a length such as 3px
$styleStringsolidsolid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --nu-border-style
$colorString|Color|NullnullA role, palette name, theme word, colour value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-bottom(1);
}
Compiled CSS
.item {
  border-bottom-width: var(--nu-border-width-1);
  border-bottom-style: var(--nu-border-style);
  border-bottom-color: var(--nu-border-regular);
  --nu-border-style: solid;
}

Example 2

.divider {
  @include border-bottom(2, dashed, brand);
}
Compiled CSS
.divider {
  border-bottom-width: var(--nu-border-width-2);
  border-bottom-style: var(--nu-border-style);
  border-bottom-color: var(--nu-brand);
  --nu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:210

border-left mixin

Draws a border on the left side (physical) in the border-regular colour unless a colour is given.

@mixin border-left($val, $style: solid, $color: null)
ParameterTypeDefaultDescription
$valNumber|LengthRequiredA $border-widths key (0, 1, 2, 4, 8) giving var(--nu-border-width-*), or a length such as 3px
$styleStringsolidsolid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --nu-border-style
$colorString|Color|NullnullA role, palette name, theme word, colour value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-left(1);
}
Compiled CSS
.item {
  border-left-width: var(--nu-border-width-1);
  border-left-style: var(--nu-border-style);
  border-left-color: var(--nu-border-regular);
  --nu-border-style: solid;
}

Example 2

.divider {
  @include border-left(2, dashed, brand);
}
Compiled CSS
.divider {
  border-left-width: var(--nu-border-width-2);
  border-left-style: var(--nu-border-style);
  border-left-color: var(--nu-brand);
  --nu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:228

border-start mixin

Draws a border on the inline start side (left in LTR, right in RTL) in the border-regular colour unless a colour is given.

@mixin border-start($val, $style: solid, $color: null)
ParameterTypeDefaultDescription
$valNumber|LengthRequiredA $border-widths key (0, 1, 2, 4, 8) giving var(--nu-border-width-*), or a length such as 3px
$styleStringsolidsolid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --nu-border-style
$colorString|Color|NullnullA role, palette name, theme word, colour value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-start(1);
}
Compiled CSS
.item {
  border-inline-start-width: var(--nu-border-width-1);
  border-inline-start-style: var(--nu-border-style);
  border-inline-start-color: var(--nu-border-regular);
  --nu-border-style: solid;
}

Example 2

.divider {
  @include border-start(2, dashed, brand);
}
Compiled CSS
.divider {
  border-inline-start-width: var(--nu-border-width-2);
  border-inline-start-style: var(--nu-border-style);
  border-inline-start-color: var(--nu-brand);
  --nu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:246

border-end mixin

Draws a border on the inline end side (right in LTR, left in RTL) in the border-regular colour unless a colour is given.

@mixin border-end($val, $style: solid, $color: null)
ParameterTypeDefaultDescription
$valNumber|LengthRequiredA $border-widths key (0, 1, 2, 4, 8) giving var(--nu-border-width-*), or a length such as 3px
$styleStringsolidsolid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --nu-border-style
$colorString|Color|NullnullA role, palette name, theme word, colour value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-end(1);
}
Compiled CSS
.item {
  border-inline-end-width: var(--nu-border-width-1);
  border-inline-end-style: var(--nu-border-style);
  border-inline-end-color: var(--nu-border-regular);
  --nu-border-style: solid;
}

Example 2

.divider {
  @include border-end(2, dashed, brand);
}
Compiled CSS
.divider {
  border-inline-end-width: var(--nu-border-width-2);
  border-inline-end-style: var(--nu-border-style);
  border-inline-end-color: var(--nu-brand);
  --nu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:264

rounded mixin

Rounds all corners with a $border-radii key (md when omitted) or a raw length.

@mixin rounded($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example 1

.card {
  @include rounded; // border-radius: var(--nu-radius-md)
}
Compiled CSS
.card {
  border-radius: var(--nu-radius-md);
}

Example 2

.avatar {
  @include apply(rounded(full), border(2, solid, brand));
}
Compiled CSS
.avatar {
  border-radius: var(--nu-radius-full);
  border-width: var(--nu-border-width-2);
  border-style: var(--nu-border-style);
  border-color: var(--nu-brand);
  --nu-border-style: solid;
}

Note. A unitless number that is not a key, such as 4, raises an error.

See also: pill, get-rounded-value(). Source: utilities/_borders.scss:281

rounded-t mixin

Rounds the top left and top right corners with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-t($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-t(lg);
}
Compiled CSS
.tab {
  border-top-left-radius: var(--nu-radius-lg);
  border-top-right-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:293

rounded-r mixin

Rounds the top right and bottom right corners (physical) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-r($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-r(lg);
}
Compiled CSS
.tab {
  border-top-right-radius: var(--nu-radius-lg);
  border-bottom-right-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:308

rounded-b mixin

Rounds the bottom left and bottom right corners with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-b($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-b(lg);
}
Compiled CSS
.tab {
  border-bottom-left-radius: var(--nu-radius-lg);
  border-bottom-right-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:323

rounded-l mixin

Rounds the top left and bottom left corners (physical) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-l($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-l(lg);
}
Compiled CSS
.tab {
  border-top-left-radius: var(--nu-radius-lg);
  border-bottom-left-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:338

rounded-tl mixin

Rounds the top left corner with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-tl($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-tl(lg);
}
Compiled CSS
.tab {
  border-top-left-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:353

rounded-tr mixin

Rounds the top right corner with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-tr($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-tr(lg);
}
Compiled CSS
.tab {
  border-top-right-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:367

rounded-br mixin

Rounds the bottom right corner with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-br($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-br(lg);
}
Compiled CSS
.tab {
  border-bottom-right-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:381

rounded-bl mixin

Rounds the bottom left corner with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-bl($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-bl(lg);
}
Compiled CSS
.tab {
  border-bottom-left-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:395

rounded-s mixin

Rounds both inline start corners (border-start-start-radius and border-end-start-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-s($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-s(lg);
}
Compiled CSS
.tab {
  border-start-start-radius: var(--nu-radius-lg);
  border-end-start-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:409

rounded-e mixin

Rounds both inline end corners (border-start-end-radius and border-end-end-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-e($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-e(lg);
}
Compiled CSS
.tab {
  border-start-end-radius: var(--nu-radius-lg);
  border-end-end-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:424

rounded-ss mixin

Rounds the block start, inline start corner (border-start-start-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-ss($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-ss(lg);
}
Compiled CSS
.tab {
  border-start-start-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:439

rounded-se mixin

Rounds the block start, inline end corner (border-start-end-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-se($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-se(lg);
}
Compiled CSS
.tab {
  border-start-end-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:451

rounded-es mixin

Rounds the block end, inline start corner (border-end-start-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-es($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-es(lg);
}
Compiled CSS
.tab {
  border-end-start-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:463

rounded-ee mixin

Rounds the block end, inline end corner (border-end-end-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-ee($val: null)
ParameterTypeDefaultDescription
$valString|Length|NullnullA $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-ee(lg);
}
Compiled CSS
.tab {
  border-end-end-radius: var(--nu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:475

border-style mixin

Sets --nu-border-style, which changes the style of borders drawn by border(), border-top() and the other side mixins on the same element.

@mixin border-style($style)
ParameterTypeDefaultDescription
$styleStringRequiredsolid, dashed, dotted, double, none, a CSS-wide keyword or var()
Output
--nu-border-style only; it draws nothing without a border mixin or class

Example

.dropzone {
  @include border(2);
  @include border-style(dashed);
}
Compiled CSS
.dropzone {
  border-width: var(--nu-border-width-2);
  border-style: var(--nu-border-style);
  border-color: var(--nu-border-regular);
  --nu-border-style: solid;
  --nu-border-style: dashed;
}

Note. Include it after the border mixin, which also writes --nu-border-style; an unknown style raises an error.

See also: border. Source: utilities/_borders.scss:492

border-color mixin

Sets border-color from a role, palette name, theme word or colour, emitting the matching var(--nu-*) token.

@mixin border-color($color, $shade: null)
ParameterTypeDefaultDescription
$colorString|ColorRequiredA role (brand, danger), role state (danger-border, brand-hover), palette name (red), theme word (regular, strong, control, control-hover, focus), colour value or var()
$shadeNumber|NullnullA shade stop (50, 100 to 900, 950) for a role or palette name

Example 1

.card {
  @include border-color(regular); // var(--nu-border-regular)
}
Compiled CSS
.card {
  border-color: var(--nu-border-regular);
}

Example 2

.alert {
  @include apply(border(1), border-color(danger-border));
}
Compiled CSS
.alert {
  border-width: var(--nu-border-width-1);
  border-style: var(--nu-border-style);
  border-color: var(--nu-border-regular);
  --nu-border-style: solid;
  border-color: var(--nu-danger-border);
}

Example 3

.tag {
  @include border-color(purple, 300); // var(--nu-purple-300)
}
Compiled CSS
.tag {
  border-color: var(--nu-purple-300);
}

Note. Roles give their fill {role} and palette names give {hue}-500; a shade outside 50 to 950 raises an error, and a raw colour with a shade is shaded at compile time.

See also: border, bg, text-color. Source: utilities/_borders.scss:514

border-all mixin

Draws a border on all sides with a width, a style and a colour, all required; the same output as border() with every argument given.

@mixin border-all($width, $style, $color)
ParameterTypeDefaultDescription
$widthNumber|LengthRequiredA $border-widths key (0, 1, 2, 4, 8) giving var(--nu-border-width-*), or a length
$styleStringRequiredsolid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --nu-border-style
$colorString|ColorRequiredA role, palette name, theme word, colour value or var(); resolved like border-color()

Example

.panel {
  @include border-all(1, solid, strong);
}
Compiled CSS
.panel {
  border-width: var(--nu-border-width-1);
  border-style: var(--nu-border-style);
  border-color: var(--nu-border-strong);
  --nu-border-style: solid;
}

Note. The style goes through --nu-border-style, so border-style() and .border-{style} classes change it, as with border().

See also: border. Source: utilities/_borders.scss:529

pill mixin

Rounds all corners fully with the full radius token, var(--nu-radius-full).

@mixin pill

Example

.badge {
  @include apply(pill, px(3));
}
Compiled CSS
.badge {
  border-radius: var(--nu-radius-full);
  padding-inline: var(--nu-space-3);
}

See also: rounded. Source: utilities/_borders.scss:540

Colors

utilities/_colors.scss

adaptive-contrast bg text-color text-on-color gradient

adaptive-contrast mixin

Sets background-color and the higher contrast text colour, both computed at compile time; under prefers-contrast: more the background moves away from the text colour (darker under light text, lighter under dark text) for a higher ratio.

@mixin adaptive-contrast($color)
ParameterTypeDefaultDescription
$colorString|ColorRequiredA role or palette name (resolved with get-color()) or a colour value
Output
Resolved colour values, not var(--nu-*) tokens, so the result does not follow themes

Example 1

.banner {
  @include adaptive-contrast(brand);
}
Compiled CSS
.banner {
  background-color: #007bff;
  color: #1a1a1a;
}
@media (prefers-contrast: more) {
  .banner {
    background-color: rgb(20%, 58.5882352941%, 100%);
    color: #1a1a1a;
  }
}

Example 2

.badge {
  @include adaptive-contrast(#1e293b);
}
Compiled CSS
.badge {
  background-color: #1e293b;
  color: #f1f1f1;
}
@media (prefers-contrast: more) {
  .badge {
    background-color: rgb(5.0231328486%, 6.8649482265%, 9.8788279357%);
    color: #f1f1f1;
  }
}

See also: bg, text-on-color. Source: utilities/_colors.scss:241

bg mixin

Sets background-color from a role, palette name, theme word or colour, emitting the matching var(--nu-*) token.

@mixin bg($color, $shade: null)
ParameterTypeDefaultDescription
$colorString|ColorRequiredA role (brand, danger), role state (danger-subtle, brand-hover), palette name (red), theme word (base, surface, alternate, raised, hover, selected, disabled), colour value or var()
$shadeNumber|NullnullA shade stop (50, 100 to 900, 950) for a role or palette name

Example 1

.card {
  @include bg(surface); // var(--nu-bg-surface)
}
Compiled CSS
.card {
  background-color: var(--nu-bg-surface);
}

Example 2

.alert {
  @include apply(bg(danger-subtle), text-color(danger), border(1, solid, danger-border));
}
Compiled CSS
.alert {
  background-color: var(--nu-danger-subtle);
  color: var(--nu-text-danger);
  border-width: var(--nu-border-width-1);
  border-style: var(--nu-border-style);
  border-color: var(--nu-danger-border);
  --nu-border-style: solid;
}

Example 3

.chip {
  @include bg(brand, 100); // var(--nu-brand-100)
}
Compiled CSS
.chip {
  background-color: var(--nu-brand-100);
}

Note. bg(brand) gives var(--nu-brand) and bg(red) the fixed var(--nu-red-500); a shade outside 50 to 950 raises an error, and a raw colour with a shade is shaded at compile time.

See also: text-color, border-color. Source: utilities/_colors.scss:280

text-color mixin

Sets color from a role, palette name, theme word or colour, emitting the matching var(--nu-text-*) token.

@mixin text-color($color-name, $shade: null)
ParameterTypeDefaultDescription
$color-nameString|ColorRequiredA role (brand, danger), palette name (red), theme word (regular, muted, subtle, inverted, link, link-hover), colour value or var()
$shadeNumber|NullnullA shade stop (50, 100 to 900, 950) for a role or palette name, giving the fixed palette token

Example 1

.caption {
  @include text-color(muted); // var(--nu-text-muted)
}
Compiled CSS
.caption {
  color: var(--nu-text-muted);
}

Example 2

.error-message {
  @include apply(text-color(danger), font-size(sm));
}
Compiled CSS
.error-message {
  color: var(--nu-text-danger);
  font-size: var(--nu-font-size-sm);
}

Note. text-color(brand) gives var(--nu-text-brand) and text-color(red) the theme aware var(--nu-text-red); with a shade the token is var(--nu-{name}-{stop}).

See also: bg, text-on-color. Source: utilities/_colors.scss:298

text-on-color mixin

Sets the text colour for content placed on a filled colour: a role gives its var(--nu-text-on-*) token, anything else the higher contrast text colour computed at compile time.

@mixin text-on-color($color-name, $shade: null)
ParameterTypeDefaultDescription
$color-nameString|ColorRequiredA role (brand, danger), palette name (purple) or colour value
$shadeNumber|NullnullShade stop of the fill (50, 100 to 900, 950); defaults to 500 when the colour is not a role

Example 1

.button {
  @include apply(bg(brand), text-on-color(brand)); // color: var(--nu-text-on-brand)
}
Compiled CSS
.button {
  background-color: var(--nu-brand);
  color: var(--nu-text-on-brand);
}

Example 2

.tag {
  @include bg(purple, 700);
  @include text-on-color(purple, 700);
}
Compiled CSS
.tag {
  background-color: var(--nu-purple-700);
  color: #f1f1f1;
}

Note. A role with a shade, a palette name or a colour value gives a fixed colour that does not follow themes.

See also: adaptive-contrast, text-color. Source: utilities/_colors.scss:317

gradient mixin

Sets background-image to a linear-gradient with the given direction and colour stops; colour names resolve like bg() (roles, palette names, theme words), other colours and positions are written as passed.

@mixin gradient($direction, $colors...)
ParameterTypeDefaultDescription
$directionString|NumberRequiredA direction such as to right or an angle such as 135deg
$colorsAnyRequiredColour stops: a role (brand), palette name (red), theme word (surface), colour value or var(), each optionally followed by a position (brand 20%)

Example 1

.hero {
  @include gradient(to right, brand, purple); // linear-gradient(to right, var(--nu-brand), var(--nu-purple-500))
}
Compiled CSS
.hero {
  background-image: linear-gradient(to right, var(--nu-brand), var(--nu-purple-500));
}

Example 2

.fade {
  @include gradient(180deg, transparent, base 80%);
}
Compiled CSS
.fade {
  background-image: linear-gradient(180deg, var(--nu-transparent), var(--nu-bg-base) 80%);
}

Note. An unknown colour word raises the same error as bg().

Source: utilities/_colors.scss:385

Cursor

utilities/_cursor.scss

cursor

cursor mixin

Sets the cursor property to a CSS cursor keyword, or to a value holding a function such as url() or var(); any other word raises an error.

@mixin cursor($cursor-value)
ParameterTypeDefaultDescription
$cursor-valueString|ListRequiredA cursor keyword (pointer, not-allowed, grab), or a value with url(), image-set() or var(), such as url(hand.svg), pointer

Example

.card-link {
  @include cursor(pointer);
}
Compiled CSS
.card-link {
  cursor: pointer;
}

Source: utilities/_cursor.scss:16

Display

utilities/_display.scss

hide block inline inline-block show grid inline-grid flex inline-flex table table-row table-cell visible invisible collapse contents overflow-hidden overflow-visible overflow-scroll overflow-auto overflow-x-hidden overflow-y-hidden overflow-x-scroll overflow-y-scroll overflow-x-auto overflow-y-auto truncate overflow-label truncate-lines

hide mixin

Sets display to none.

@mixin hide

Example

.modal-closed {
  @include hide;
}
Compiled CSS
.modal-closed {
  display: none;
}

Source: utilities/_display.scss:34

block mixin

Sets display to block.

@mixin block

Example

.thumbnail {
  @include block;
}
Compiled CSS
.thumbnail {
  display: block;
}

Source: utilities/_display.scss:44

inline mixin

Sets display to inline.

@mixin inline

Example

.tag-label {
  @include inline;
}
Compiled CSS
.tag-label {
  display: inline;
}

Source: utilities/_display.scss:54

inline-block mixin

Sets display to inline-block.

@mixin inline-block

Example

.badge {
  @include inline-block;
}
Compiled CSS
.badge {
  display: inline-block;
}

Source: utilities/_display.scss:64

show mixin

Sets display to revert, restoring the element's natural display (block for a div, table for a table) after .hide or a responsive hide.

@mixin show

Example

.toolbar-label {
  @include show;
}
Compiled CSS
.toolbar-label {
  display: revert;
}

Source: utilities/_display.scss:74

grid mixin

Sets display to grid, establishing a grid container.

@mixin grid

Example

.gallery {
  @include grid;
}
Compiled CSS
.gallery {
  display: grid;
}

Source: utilities/_display.scss:84

inline-grid mixin

Sets display to inline-grid, establishing an inline grid container.

@mixin inline-grid

Example

.icon-set {
  @include inline-grid;
}
Compiled CSS
.icon-set {
  display: inline-grid;
}

Source: utilities/_display.scss:94

flex mixin

Sets display to flex, establishing a flex container.

@mixin flex

Example

.toolbar {
  @include flex;
}
Compiled CSS
.toolbar {
  display: flex;
}

Source: utilities/_display.scss:104

inline-flex mixin

Sets display to inline-flex, establishing an inline flex container.

@mixin inline-flex

Example

.chip {
  @include inline-flex;
}
Compiled CSS
.chip {
  display: inline-flex;
}

Source: utilities/_display.scss:114

table mixin

Sets display to table.

@mixin table

Example

.data-grid {
  @include table;
}
Compiled CSS
.data-grid {
  display: table;
}

Source: utilities/_display.scss:124

table-row mixin

Sets display to table-row.

@mixin table-row

Example

.data-grid-row {
  @include table-row;
}
Compiled CSS
.data-grid-row {
  display: table-row;
}

Source: utilities/_display.scss:134

table-cell mixin

Sets display to table-cell.

@mixin table-cell

Example

.data-grid-cell {
  @include table-cell;
}
Compiled CSS
.data-grid-cell {
  display: table-cell;
}

Source: utilities/_display.scss:144

visible mixin

Sets visibility to visible.

@mixin visible

Example

.row-actions {
  @include visible;
}
Compiled CSS
.row-actions {
  visibility: visible;
}

Source: utilities/_display.scss:154

invisible mixin

Sets visibility to hidden, keeping the element in the layout.

@mixin invisible

Example

.row-actions {
  @include invisible;
}
Compiled CSS
.row-actions {
  visibility: hidden;
}

Source: utilities/_display.scss:164

collapse mixin

Sets visibility to collapse, which removes table rows and columns without changing table layout.

@mixin collapse

Example

.table-row-hidden {
  @include collapse;
}
Compiled CSS
.table-row-hidden {
  visibility: collapse;
}

Source: utilities/_display.scss:174

contents mixin

Sets display to contents, so the element box disappears and its children join the parent layout.

@mixin contents

Example

.field-group {
  @include contents;
}
Compiled CSS
.field-group {
  display: contents;
}

Source: utilities/_display.scss:184

overflow-hidden mixin

Sets overflow to hidden on both axes.

@mixin overflow-hidden

Example

.panel {
  @include overflow-hidden;
}
Compiled CSS
.panel {
  overflow: hidden;
}

Source: utilities/_display.scss:194

overflow-visible mixin

Sets overflow to visible on both axes.

@mixin overflow-visible

Example

.panel {
  @include overflow-visible;
}
Compiled CSS
.panel {
  overflow: visible;
}

Source: utilities/_display.scss:204

overflow-scroll mixin

Sets overflow to scroll on both axes.

@mixin overflow-scroll

Example

.panel {
  @include overflow-scroll;
}
Compiled CSS
.panel {
  overflow: scroll;
}

Source: utilities/_display.scss:214

overflow-auto mixin

Sets overflow to auto on both axes.

@mixin overflow-auto

Example

.panel {
  @include overflow-auto;
}
Compiled CSS
.panel {
  overflow: auto;
}

Source: utilities/_display.scss:224

overflow-x-hidden mixin

Sets overflow-x to hidden (horizontal axis).

@mixin overflow-x-hidden

Example

.panel {
  @include overflow-x-hidden;
}
Compiled CSS
.panel {
  overflow-x: hidden;
}

Source: utilities/_display.scss:234

overflow-y-hidden mixin

Sets overflow-y to hidden (vertical axis).

@mixin overflow-y-hidden

Example

.panel {
  @include overflow-y-hidden;
}
Compiled CSS
.panel {
  overflow-y: hidden;
}

Source: utilities/_display.scss:244

overflow-x-scroll mixin

Sets overflow-x to scroll (horizontal axis).

@mixin overflow-x-scroll

Example

.panel {
  @include overflow-x-scroll;
}
Compiled CSS
.panel {
  overflow-x: scroll;
}

Source: utilities/_display.scss:254

overflow-y-scroll mixin

Sets overflow-y to scroll (vertical axis).

@mixin overflow-y-scroll

Example

.panel {
  @include overflow-y-scroll;
}
Compiled CSS
.panel {
  overflow-y: scroll;
}

Source: utilities/_display.scss:264

overflow-x-auto mixin

Sets overflow-x to auto (horizontal axis).

@mixin overflow-x-auto

Example

.panel {
  @include overflow-x-auto;
}
Compiled CSS
.panel {
  overflow-x: auto;
}

Source: utilities/_display.scss:274

overflow-y-auto mixin

Sets overflow-y to auto (vertical axis).

@mixin overflow-y-auto

Example

.panel {
  @include overflow-y-auto;
}
Compiled CSS
.panel {
  overflow-y: auto;
}

Source: utilities/_display.scss:284

truncate mixin

Truncates text to one line with an ellipsis, or to a number of lines like truncate-lines() (truncate(2) matches the .truncate-2 class).

@mixin truncate($lines: 1)
ParameterTypeDefaultDescription
$linesNumber|String1Number of visible lines: 1, or a whole number above 1, calc() or var() for a multi-line clamp

Example 1

.file-name {
  @include truncate;
}
Compiled CSS
.file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Example 2

.card-summary {
  @include truncate(2); // the same as truncate-lines(2)
}
Compiled CSS
.card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

See also: truncate-lines. Source: utilities/_display.scss:300

overflow-label mixin

Truncates a flex or grid child to one line; min-width 0 lets it shrink below its content width.

@mixin overflow-label

Example

.nav-item-label {
  @include overflow-label;
}
Compiled CSS
.nav-item-label {
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}

Source: utilities/_display.scss:328

truncate-lines mixin

Clamps text to a number of lines with an ellipsis using -webkit-line-clamp.

@mixin truncate-lines($lines: 2)
ParameterTypeDefaultDescription
$linesNumber|String2Number of visible lines: a whole number of 1 or more, calc() or var(); anything else raises an error

Example

.card-summary {
  @include truncate-lines(3);
}
Compiled CSS
.card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

See also: truncate. Source: utilities/_display.scss:344

Opacity

utilities/_opacity.scss

Controls element transparency with customizable opacity values and interactive states

opacity

opacity mixin

Sets opacity from a $opacities key, emitted as var(--nu-opacity-*) as in .opacity-50, or passes a percentage, calc(), var() or CSS-wide keyword through; a bare 0.5 raises an error.

@mixin opacity($value)
ParameterTypeDefaultDescription
$valueNumber|Percentage|StringRequired$opacities key (0, 5, 10 ... 100), percentage, calc(), var() or CSS-wide keyword

Example

.badge-muted {
  @include opacity(50); // opacity: var(--nu-opacity-50), 0.5 by default
}
.ghost {
  @include apply(opacity(75) hover);
}
Compiled CSS
.badge-muted {
  opacity: var(--nu-opacity-50);
}


.ghost:hover {
  opacity: var(--nu-opacity-75);
}

Source: utilities/_opacity.scss:122

Position

utilities/_position.scss

Controls element positioning and placement within the document flow

static relative absolute fixed sticky top right bottom left inset-start inset-end inset inset-x inset-y inset-auto inset-x-auto inset-y-auto absolute-center

static mixin

Sets position to static, the default document flow.

@mixin static

Example

.element {
  @include static;
}
Compiled CSS
.element {
  position: static;
}

Source: utilities/_position.scss:110

relative mixin

Sets position to relative, creating a positioning context for absolute children.

@mixin relative

Example

.container {
  @include relative;
}
Compiled CSS
.container {
  position: relative;
}

Source: utilities/_position.scss:120

absolute mixin

Sets position to absolute, removing the element from the normal document flow.

@mixin absolute

Example

.popup {
  @include absolute;
  @include top(0);
  @include left(0);
}
Compiled CSS
.popup {
  position: absolute;
  top: var(--nu-space-0);
  left: var(--nu-space-0);
}

Source: utilities/_position.scss:132

fixed mixin

Sets position to fixed, placing the element relative to the viewport.

@mixin fixed

Example

.banner {
  @include fixed;
  @include top(0);
  @include inset-x(0);
}
Compiled CSS
.banner {
  position: fixed;
  top: var(--nu-space-0);
  left: var(--nu-space-0);
  right: var(--nu-space-0);
}

Source: utilities/_position.scss:144

sticky mixin

Sets position to sticky with top 0 and z-index 999, so the element stays in view while scrolling.

@mixin sticky
Output
position: sticky; z-index: 999; top: 0

Example

.nav {
  @include sticky;
}
Compiled CSS
.nav {
  position: sticky;
  z-index: 999;
  top: 0;
}

Source: utilities/_position.scss:155

top mixin

Sets the physical top offset from the spacing scale or a raw value.

@mixin top($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.toast {
  @include absolute;
  @include top(4); // top: var(--nu-space-4)
}
Compiled CSS
.toast {
  position: absolute;
  top: var(--nu-space-4);
}

Source: utilities/_position.scss:169

right mixin

Sets the physical right offset from the spacing scale or a raw value.

@mixin right($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.badge {
  @include absolute;
  @include right(-2); // right: calc(-1 * var(--nu-space-2))
}
Compiled CSS
.badge {
  position: absolute;
  right: calc(-1 * var(--nu-space-2));
}

Source: utilities/_position.scss:181

bottom mixin

Sets the physical bottom offset from the spacing scale or a raw value.

@mixin bottom($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.footer {
  @include fixed;
  @include bottom(0);
}
Compiled CSS
.footer {
  position: fixed;
  bottom: var(--nu-space-0);
}

Source: utilities/_position.scss:193

left mixin

Sets the physical left offset from the spacing scale or a raw value.

@mixin left($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.sidebar {
  @include fixed;
  @include left(50%);
}
Compiled CSS
.sidebar {
  position: fixed;
  left: 50%;
}

Source: utilities/_position.scss:205

inset-start mixin

Sets inset-inline-start, which is the left offset in LTR and the right offset in RTL.

@mixin inset-start($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.close-button {
  @include absolute;
  @include inset-start(2); // inset-inline-start: var(--nu-space-2)
}
Compiled CSS
.close-button {
  position: absolute;
  inset-inline-start: var(--nu-space-2);
}

See also: inset-end, left. Source: utilities/_position.scss:218

inset-end mixin

Sets inset-inline-end, which is the right offset in LTR and the left offset in RTL.

@mixin inset-end($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.close-button {
  @include absolute;
  @include top(2);
  @include inset-end(2); // inset-inline-end: var(--nu-space-2)
}
Compiled CSS
.close-button {
  position: absolute;
  top: var(--nu-space-2);
  inset-inline-end: var(--nu-space-2);
}

See also: inset-start, right. Source: utilities/_position.scss:232

inset mixin

Sets the inset shorthand (top, right, bottom and left) to one value.

@mixin inset($val)
ParameterTypeDefaultDescription
$valNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.overlay {
  @include absolute;
  @include inset(0); // inset: var(--nu-space-0)
}
Compiled CSS
.overlay {
  position: absolute;
  inset: var(--nu-space-0);
}

Source: utilities/_position.scss:248

inset-x mixin

Sets the physical left and right offsets to one value.

@mixin inset-x($val)
ParameterTypeDefaultDescription
$valNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.drawer-footer {
  @include absolute;
  @include bottom(0);
  @include inset-x(4);
}
Compiled CSS
.drawer-footer {
  position: absolute;
  bottom: var(--nu-space-0);
  left: var(--nu-space-4);
  right: var(--nu-space-4);
}

Source: utilities/_position.scss:261

inset-y mixin

Sets the top and bottom offsets to one value.

@mixin inset-y($val)
ParameterTypeDefaultDescription
$valNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.side-rail {
  @include absolute;
  @include inset-y(0);
  @include left(0);
}
Compiled CSS
.side-rail {
  position: absolute;
  top: var(--nu-space-0);
  bottom: var(--nu-space-0);
  left: var(--nu-space-0);
}

Source: utilities/_position.scss:277

inset-auto mixin

Sets the inset shorthand to auto on all four sides.

@mixin inset-auto

Example

.popover {
  @include inset-auto;
}
Compiled CSS
.popover {
  inset: auto;
}

Source: utilities/_position.scss:290

inset-x-auto mixin

Sets the physical left and right offsets to auto.

@mixin inset-x-auto

Example

.tooltip {
  @include inset-x-auto;
}
Compiled CSS
.tooltip {
  left: auto;
  right: auto;
}

Source: utilities/_position.scss:300

inset-y-auto mixin

Sets the top and bottom offsets to auto.

@mixin inset-y-auto

Example

.tooltip {
  @include inset-y-auto;
}
Compiled CSS
.tooltip {
  top: auto;
  bottom: auto;
}

Source: utilities/_position.scss:311

absolute-center mixin

Centers an element absolutely within its positioned parent using top and left 50% and a -50% translate.

@mixin absolute-center

Example

.modal {
  @include absolute-center;
}
Compiled CSS
.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
  --nu-translate-x: -50%;
  --nu-translate-y: -50%;
}

Source: utilities/_position.scss:322

Shadows

utilities/_shadows.scss

shadow-base shadow shadow-inset elevation

shadow-base mixin

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

@mixin shadow-base($x, $y, $blur, $spread, $color)
ParameterTypeDefaultDescription
$xLength|NumberRequiredHorizontal offset
$yLength|NumberRequiredVertical offset
$blurLength|NumberRequiredBlur radius
$spreadLength|NumberRequiredSpread radius
$colorColor|StringRequiredShadow colour

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);
}

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

shadow mixin

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

@mixin shadow($size: "md", $color: "default")
ParameterTypeDefaultDescription
$sizeString"md"Size key from $shadow-sizes (sm, md, lg, xl, hero, monster), or none (box-shadow: none, as .shadow-none)
$colorString"default"Colour key from $shadow-colors (default, dark, darker, darkest)

Example

.card {
  @include shadow(sm); // box-shadow: var(--nu-shadow-sm)
  &:hover {
    @include shadow(lg, dark);
  }
}
Compiled CSS
.card {
  box-shadow: var(--nu-shadow-sm);
}
.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

Note. Unknown size or colour keys raise an error.

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

shadow-inset mixin

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

@mixin shadow-inset($size: "md", $color: "default")
ParameterTypeDefaultDescription
$sizeString"md"Size key from $shadow-sizes (sm, md, lg, xl, hero, monster)
$colorString"default"Colour 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);
}

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

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.

@mixin elevation($i)
ParameterTypeDefaultDescription
$iNumberRequiredElevation level from 1 to 5, also emitted as the raw z-index

Example

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

Note. 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.

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

Sizing

utilities/_sizing.scss

width height min-width min-height max-width max-height width-percent height-percent min-width-percent min-height-percent max-width-percent max-height-percent w-auto w-full h-auto h-full w-max h-max w-min h-min w-fit h-fit min-w-full max-w-full min-h-full max-h-full w-screen h-screen

width mixin

Sets width from a spacing key, a percentage key, a breakpoint name, a sizing keyword or a raw value; negative keys and unknown words raise an error.

@mixin width($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), breakpoint name (lg gives its width), auto, min-content, max-content, fit-content, or a raw length, percentage, calc() or var()

Example

.sidebar {
  @include width(20rem);
}
Compiled CSS
.sidebar {
  width: 20rem;
}

Source: utilities/_sizing.scss:92

height mixin

Sets height from a spacing key, a percentage key, a sizing keyword or a raw value; negative keys and unknown words raise an error.

@mixin height($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), auto, min-content, max-content, fit-content, or a raw length, percentage, calc() or var()

Example

.avatar {
  @include height(12); // height: var(--nu-space-12)
}
Compiled CSS
.avatar {
  height: var(--nu-space-12);
}

Source: utilities/_sizing.scss:103

min-width mixin

Sets min-width from a spacing key, a percentage key, a breakpoint name, a sizing keyword or a raw value; negative keys and unknown words raise an error.

@mixin min-width($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), breakpoint name (lg gives its width), auto, min-content, max-content, fit-content, or a raw length, percentage, calc() or var()

Example

.dialog {
  @include min-width(16); // min-width: var(--nu-space-16)
}
Compiled CSS
.dialog {
  min-width: var(--nu-space-16);
}

Source: utilities/_sizing.scss:114

min-height mixin

Sets min-height from a spacing key, a percentage key, a sizing keyword or a raw value; negative keys and unknown words raise an error.

@mixin min-height($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), auto, min-content, max-content, fit-content, or a raw length, percentage, calc() or var()

Example

.drop-zone {
  @include min-height(10rem);
}
Compiled CSS
.drop-zone {
  min-height: 10rem;
}

Source: utilities/_sizing.scss:125

max-width mixin

Sets max-width from a spacing key, a percentage key, a breakpoint name, a sizing keyword, none or a raw value; negative keys and unknown words raise an error.

@mixin max-width($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), breakpoint name (lg gives its width), auto, min-content, max-content, fit-content, none, or a raw length, percentage, calc() or var()

Example

.article {
  @include max-width(48rem);
}
Compiled CSS
.article {
  max-width: 48rem;
}

Source: utilities/_sizing.scss:136

max-height mixin

Sets max-height from a spacing key, a percentage key, a sizing keyword, none or a raw value; negative keys and unknown words raise an error.

@mixin max-height($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), auto, min-content, max-content, fit-content, none, or a raw length, percentage, calc() or var()

Example

.dropdown-menu {
  @include max-height(64);
}
Compiled CSS
.dropdown-menu {
  max-height: var(--nu-space-64);
}

Source: utilities/_sizing.scss:147

width-percent mixin

Sets width as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin width-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.column {
  @include width-percent(50); // width: 50%
}
Compiled CSS
.column {
  width: 50%;
}

Source: utilities/_sizing.scss:179

height-percent mixin

Sets height as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin height-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.chart {
  @include height-percent(75); // height: 75%
}
Compiled CSS
.chart {
  height: 75%;
}

Source: utilities/_sizing.scss:190

min-width-percent mixin

Sets min-width as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin min-width-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.search {
  @include min-width-percent(30); // min-width: 30%
}
Compiled CSS
.search {
  min-width: 30%;
}

Source: utilities/_sizing.scss:201

min-height-percent mixin

Sets min-height as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin min-height-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.hero {
  @include min-height-percent(50); // min-height: 50%
}
Compiled CSS
.hero {
  min-height: 50%;
}

Source: utilities/_sizing.scss:212

max-width-percent mixin

Sets max-width as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin max-width-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.toast {
  @include max-width-percent(90); // max-width: 90%
}
Compiled CSS
.toast {
  max-width: 90%;
}

Source: utilities/_sizing.scss:223

max-height-percent mixin

Sets max-height as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin max-height-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.modal-body {
  @include max-height-percent(80); // max-height: 80%
}
Compiled CSS
.modal-body {
  max-height: 80%;
}

Source: utilities/_sizing.scss:234

w-auto mixin

Sets width to auto.

@mixin w-auto

Example

.image {
  @include w-auto;
}
Compiled CSS
.image {
  width: auto;
}

Source: utilities/_sizing.scss:244

w-full mixin

Sets width to 100%.

@mixin w-full

Example

.input-group {
  @include w-full;
}
Compiled CSS
.input-group {
  width: 100%;
}

Source: utilities/_sizing.scss:254

h-auto mixin

Sets height to auto.

@mixin h-auto

Example

.image {
  @include h-auto;
}
Compiled CSS
.image {
  height: auto;
}

Source: utilities/_sizing.scss:264

h-full mixin

Sets height to 100%.

@mixin h-full

Example

.panel {
  @include h-full;
}
Compiled CSS
.panel {
  height: 100%;
}

Source: utilities/_sizing.scss:274

w-max mixin

Sets width to max-content.

@mixin w-max

Example

.menu {
  @include w-max;
}
Compiled CSS
.menu {
  width: max-content;
}

Source: utilities/_sizing.scss:284

h-max mixin

Sets height to max-content.

@mixin h-max

Example

.menu {
  @include h-max;
}
Compiled CSS
.menu {
  height: max-content;
}

Source: utilities/_sizing.scss:294

w-min mixin

Sets width to min-content.

@mixin w-min

Example

.label {
  @include w-min;
}
Compiled CSS
.label {
  width: min-content;
}

Source: utilities/_sizing.scss:304

h-min mixin

Sets height to min-content.

@mixin h-min

Example

.label {
  @include h-min;
}
Compiled CSS
.label {
  height: min-content;
}

Source: utilities/_sizing.scss:314

w-fit mixin

Sets width to fit-content.

@mixin w-fit

Example

.chip {
  @include w-fit;
}
Compiled CSS
.chip {
  width: fit-content;
}

Source: utilities/_sizing.scss:324

h-fit mixin

Sets height to fit-content.

@mixin h-fit

Example

.chip {
  @include h-fit;
}
Compiled CSS
.chip {
  height: fit-content;
}

Source: utilities/_sizing.scss:334

min-w-full mixin

Sets min-width to 100%.

@mixin min-w-full

Example

.table {
  @include min-w-full;
}
Compiled CSS
.table {
  min-width: 100%;
}

Source: utilities/_sizing.scss:344

max-w-full mixin

Sets max-width to 100%.

@mixin max-w-full

Example

.media {
  @include max-w-full;
}
Compiled CSS
.media {
  max-width: 100%;
}

Source: utilities/_sizing.scss:354

min-h-full mixin

Sets min-height to 100%.

@mixin min-h-full

Example

.layout {
  @include min-h-full;
}
Compiled CSS
.layout {
  min-height: 100%;
}

Source: utilities/_sizing.scss:364

max-h-full mixin

Sets max-height to 100%.

@mixin max-h-full

Example

.media {
  @include max-h-full;
}
Compiled CSS
.media {
  max-height: 100%;
}

Source: utilities/_sizing.scss:374

w-screen mixin

Sets width to 100vw, the full viewport width.

@mixin w-screen

Example

.backdrop {
  @include w-screen;
}
Compiled CSS
.backdrop {
  width: 100vw;
}

Source: utilities/_sizing.scss:384

h-screen mixin

Sets height to 100dvh, the full dynamic viewport height.

@mixin h-screen

Example

.app-shell {
  @include h-screen;
}
Compiled CSS
.app-shell {
  height: 100dvh;
}

Source: utilities/_sizing.scss:394

Spacing

utilities/_spacing.scss

Controls element margins, padding, gaps, and spacing between children

p px py pt pr pb pl ps pe m mx my mt mr mb ml ms me ml-auto mr-auto ms-auto me-auto mx-auto space-y space-x gap gap-x gap-y

p mixin

Sets padding on all sides from a spacing key or a raw value.

@mixin p($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.card {
  @include p(4); // padding: var(--nu-space-4)
}
Compiled CSS
.card {
  padding: var(--nu-space-4);
}

Example 2

.card-wide {
  @include p(1.5rem); // padding: 1.5rem
}
Compiled CSS
.card-wide {
  padding: 1.5rem;
}

See also: px, py, pt, ps. Source: utilities/_spacing.scss:127

px mixin

Sets padding on the inline start and end (padding-inline), following text direction.

@mixin px($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.button {
  @include px(4); // padding-inline: var(--nu-space-4)
}
Compiled CSS
.button {
  padding-inline: var(--nu-space-4);
}

Example 2

.chip {
  @include apply(px(2), py(1));
}
Compiled CSS
.chip {
  padding-inline: var(--nu-space-2);
  padding-block: var(--nu-space-1);
}

See also: py, ps, pe. Source: utilities/_spacing.scss:143

py mixin

Sets padding on the block start and end (padding-block), top and bottom in horizontal writing modes.

@mixin py($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.button {
  @include py(2); // padding-block: var(--nu-space-2)
}
Compiled CSS
.button {
  padding-block: var(--nu-space-2);
}

Example 2

.row {
  @include py(0.625rem); // padding-block: 0.625rem
}
Compiled CSS
.row {
  padding-block: 0.625rem;
}

See also: px, pt, pb. Source: utilities/_spacing.scss:159

pt mixin

Sets padding-top from a spacing key or a raw value.

@mixin pt($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.section {
  @include pt(4); // padding-top: var(--nu-space-4)
}
Compiled CSS
.section {
  padding-top: var(--nu-space-4);
}

Example 2

.section-wide {
  @include pt(1.5rem); // padding-top: 1.5rem
}
Compiled CSS
.section-wide {
  padding-top: 1.5rem;
}

See also: pb, py. Source: utilities/_spacing.scss:175

pr mixin

Sets padding-right (physical, does not follow text direction) from a spacing key or a raw value.

@mixin pr($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.gutter {
  @include pr(4); // padding-right: var(--nu-space-4)
}
Compiled CSS
.gutter {
  padding-right: var(--nu-space-4);
}

Example 2

.gutter-wide {
  @include pr(1.5rem); // padding-right: 1.5rem
}
Compiled CSS
.gutter-wide {
  padding-right: 1.5rem;
}

See also: pe, pl. Source: utilities/_spacing.scss:191

pb mixin

Sets padding-bottom from a spacing key or a raw value.

@mixin pb($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.section {
  @include pb(4); // padding-bottom: var(--nu-space-4)
}
Compiled CSS
.section {
  padding-bottom: var(--nu-space-4);
}

Example 2

.section-wide {
  @include pb(1.5rem); // padding-bottom: 1.5rem
}
Compiled CSS
.section-wide {
  padding-bottom: 1.5rem;
}

See also: pt, py. Source: utilities/_spacing.scss:207

pl mixin

Sets padding-left (physical, does not follow text direction) from a spacing key or a raw value.

@mixin pl($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.gutter {
  @include pl(4); // padding-left: var(--nu-space-4)
}
Compiled CSS
.gutter {
  padding-left: var(--nu-space-4);
}

Example 2

.gutter-wide {
  @include pl(1.5rem); // padding-left: 1.5rem
}
Compiled CSS
.gutter-wide {
  padding-left: 1.5rem;
}

See also: ps, pr. Source: utilities/_spacing.scss:223

ps mixin

Sets padding-inline-start (left in LTR, right in RTL) from a spacing key or a raw value.

@mixin ps($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.list {
  @include ps(4); // padding-inline-start: var(--nu-space-4)
}
Compiled CSS
.list {
  padding-inline-start: var(--nu-space-4);
}

Example 2

.list-wide {
  @include ps(1.5rem); // padding-inline-start: 1.5rem
}
Compiled CSS
.list-wide {
  padding-inline-start: 1.5rem;
}

See also: pe, px, pl. Source: utilities/_spacing.scss:239

pe mixin

Sets padding-inline-end (right in LTR, left in RTL) from a spacing key or a raw value.

@mixin pe($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.input {
  @include pe(4); // padding-inline-end: var(--nu-space-4)
}
Compiled CSS
.input {
  padding-inline-end: var(--nu-space-4);
}

Example 2

.input-wide {
  @include pe(1.5rem); // padding-inline-end: 1.5rem
}
Compiled CSS
.input-wide {
  padding-inline-end: 1.5rem;
}

See also: ps, px, pr. Source: utilities/_spacing.scss:255

m mixin

Sets margin on all sides from a spacing key, a negative key, auto or a raw value.

@mixin m($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.card {
  @include m(4); // margin: var(--nu-space-4)
}
Compiled CSS
.card {
  margin: var(--nu-space-4);
}

Example 2

.bleed {
  @include m(-2); // margin: calc(-1 * var(--nu-space-2))
}
Compiled CSS
.bleed {
  margin: calc(-1 * var(--nu-space-2));
}

See also: mx, my, mt, ms. Source: utilities/_spacing.scss:275

mx mixin

Sets margin on the inline start and end (margin-inline), following text direction.

@mixin mx($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.divider {
  @include mx(4); // margin-inline: var(--nu-space-4)
}
Compiled CSS
.divider {
  margin-inline: var(--nu-space-4);
}

Example 2

.bleed {
  @include mx(-4); // margin-inline: calc(-1 * var(--nu-space-4))
}
Compiled CSS
.bleed {
  margin-inline: calc(-1 * var(--nu-space-4));
}

See also: mx-auto, my, ms, me. Source: utilities/_spacing.scss:291

my mixin

Sets margin on the block start and end (margin-block), top and bottom in horizontal writing modes.

@mixin my($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.divider {
  @include my(6); // margin-block: var(--nu-space-6)
}
Compiled CSS
.divider {
  margin-block: var(--nu-space-6);
}

Example 2

.hr {
  @include my(1.5rem); // margin-block: 1.5rem
}
Compiled CSS
.hr {
  margin-block: 1.5rem;
}

See also: mx, mt, mb. Source: utilities/_spacing.scss:307

mt mixin

Sets margin-top from a spacing key, a negative key, auto or a raw value.

@mixin mt($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.section {
  @include mt(4); // margin-top: var(--nu-space-4)
}
Compiled CSS
.section {
  margin-top: var(--nu-space-4);
}

Example 2

.section-pull {
  @include mt(-2); // margin-top: calc(-1 * var(--nu-space-2))
}
Compiled CSS
.section-pull {
  margin-top: calc(-1 * var(--nu-space-2));
}

See also: mb, my. Source: utilities/_spacing.scss:323

mr mixin

Sets margin-right (physical, does not follow text direction) from a spacing key, a negative key, auto or a raw value.

@mixin mr($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.icon {
  @include mr(4); // margin-right: var(--nu-space-4)
}
Compiled CSS
.icon {
  margin-right: var(--nu-space-4);
}

Example 2

.icon-pull {
  @include mr(-2); // margin-right: calc(-1 * var(--nu-space-2))
}
Compiled CSS
.icon-pull {
  margin-right: calc(-1 * var(--nu-space-2));
}

See also: me, ml, mr-auto. Source: utilities/_spacing.scss:339

mb mixin

Sets margin-bottom from a spacing key, a negative key, auto or a raw value.

@mixin mb($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.heading {
  @include mb(4); // margin-bottom: var(--nu-space-4)
}
Compiled CSS
.heading {
  margin-bottom: var(--nu-space-4);
}

Example 2

.heading-pull {
  @include mb(-2); // margin-bottom: calc(-1 * var(--nu-space-2))
}
Compiled CSS
.heading-pull {
  margin-bottom: calc(-1 * var(--nu-space-2));
}

See also: mt, my. Source: utilities/_spacing.scss:355

ml mixin

Sets margin-left (physical, does not follow text direction) from a spacing key, a negative key, auto or a raw value.

@mixin ml($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.icon {
  @include ml(4); // margin-left: var(--nu-space-4)
}
Compiled CSS
.icon {
  margin-left: var(--nu-space-4);
}

Example 2

.icon-pull {
  @include ml(-2); // margin-left: calc(-1 * var(--nu-space-2))
}
Compiled CSS
.icon-pull {
  margin-left: calc(-1 * var(--nu-space-2));
}

See also: ms, mr, ml-auto. Source: utilities/_spacing.scss:371

ms mixin

Sets margin-inline-start (left in LTR, right in RTL) from a spacing key, a negative key, auto or a raw value.

@mixin ms($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.icon {
  @include ms(4); // margin-inline-start: var(--nu-space-4)
}
Compiled CSS
.icon {
  margin-inline-start: var(--nu-space-4);
}

Example 2

.icon-pull {
  @include ms(-2); // margin-inline-start: calc(-1 * var(--nu-space-2))
}
Compiled CSS
.icon-pull {
  margin-inline-start: calc(-1 * var(--nu-space-2));
}

See also: me, mx, ms-auto. Source: utilities/_spacing.scss:387

me mixin

Sets margin-inline-end (right in LTR, left in RTL) from a spacing key, a negative key, auto or a raw value.

@mixin me($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key (4 gives var(--nu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.icon {
  @include me(4); // margin-inline-end: var(--nu-space-4)
}
Compiled CSS
.icon {
  margin-inline-end: var(--nu-space-4);
}

Example 2

.icon-pull {
  @include me(-2); // margin-inline-end: calc(-1 * var(--nu-space-2))
}
Compiled CSS
.icon-pull {
  margin-inline-end: calc(-1 * var(--nu-space-2));
}

See also: ms, mx, me-auto. Source: utilities/_spacing.scss:403

ml-auto mixin

Sets margin-left to auto (physical), pushing the element to the right in a flex row.

@mixin ml-auto

Example

.actions {
  @include ml-auto; // margin-left: auto
}
Compiled CSS
.actions {
  margin-left: auto;
}

See also: ms-auto, mr-auto. Source: utilities/_spacing.scss:414

mr-auto mixin

Sets margin-right to auto (physical), pushing the element to the left in a flex row.

@mixin mr-auto

Example

.logo {
  @include mr-auto; // margin-right: auto
}
Compiled CSS
.logo {
  margin-right: auto;
}

See also: me-auto, ml-auto. Source: utilities/_spacing.scss:425

ms-auto mixin

Sets margin-inline-start to auto, pushing the element to the inline end in a flex row.

@mixin ms-auto

Example

.actions {
  @include ms-auto; // margin-inline-start: auto
}
Compiled CSS
.actions {
  margin-inline-start: auto;
}

See also: me-auto, ml-auto. Source: utilities/_spacing.scss:436

me-auto mixin

Sets margin-inline-end to auto, pushing the element to the inline start in a flex row.

@mixin me-auto

Example

.logo {
  @include me-auto; // margin-inline-end: auto
}
Compiled CSS
.logo {
  margin-inline-end: auto;
}

See also: ms-auto, mr-auto. Source: utilities/_spacing.scss:447

mx-auto mixin

Centers a block element on the inline axis with margin-inline: auto.

@mixin mx-auto

Example

.container {
  @include apply(max-width(64rem), mx-auto);
}
Compiled CSS
.container {
  max-width: 64rem;
  margin-inline: auto;
}

See also: mx, ms-auto, me-auto. Source: utilities/_spacing.scss:458

space-y mixin

Adds margin-block-start to every direct child after the first, spacing children along the block axis (vertically in horizontal writing modes).

@mixin space-y($i)
ParameterTypeDefaultDescription
$iNumber|Length|Calculation|StringRequiredSpacing key, a negative key, or a value with a unit, calc() or var()

Example

.stack {
  @include space-y(4); // .stack > * + * { margin-block-start: var(--nu-space-4) }
}
Compiled CSS
.stack > * + * {
  margin-block-start: var(--nu-space-4);
}

See also: space-x, gap. Source: utilities/_spacing.scss:474

space-x mixin

Adds margin-inline-start to every direct child after the first, spacing children along the inline axis.

@mixin space-x($i)
ParameterTypeDefaultDescription
$iNumber|Length|Calculation|StringRequiredSpacing key, a negative key, or a value with a unit, calc() or var()

Example

.toolbar {
  @include space-x(2); // .toolbar > * + * { margin-inline-start: var(--nu-space-2) }
}
Compiled CSS
.toolbar > * + * {
  margin-inline-start: var(--nu-space-2);
}

See also: space-y, gap-x. Source: utilities/_spacing.scss:488

gap mixin

Sets gap on a flex or grid container and passes it to direct children as --nu-flex-gap for fill() widths.

@mixin gap($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key, normal, or a value with a unit, calc() or var(); negative keys raise an error

Example 1

.grid {
  @include gap(4); // gap: var(--nu-space-4)
}
Compiled CSS
.grid {
  gap: var(--nu-space-4);
}
.grid > * {
  --nu-flex-gap: var(--nu-space-4);
}

Example 2

.cards {
  @include apply(flex, gap(1.25rem));
}
Compiled CSS
.cards {
  display: flex;
  gap: 1.25rem;
}
.cards > * {
  --nu-flex-gap: 1.25rem;
}

See also: gap-x, gap-y, space-x. Source: utilities/_spacing.scss:528

gap-x mixin

Sets column-gap on a flex or grid container and passes it to direct children as --nu-flex-gap for fill() widths.

@mixin gap-x($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key, normal, or a value with a unit, calc() or var(); negative keys raise an error

Example

.row {
  @include gap-x(6); // column-gap: var(--nu-space-6)
}
Compiled CSS
.row {
  column-gap: var(--nu-space-6);
}
.row > * {
  --nu-flex-gap: var(--nu-space-6);
}

See also: gap, gap-y. Source: utilities/_spacing.scss:546

gap-y mixin

Sets row-gap on a flex or grid container; --nu-flex-gap is not set because it only feeds inline widths.

@mixin gap-y($val)
ParameterTypeDefaultDescription
$valNumber|Length|Calculation|StringRequiredSpacing key, normal, or a value with a unit, calc() or var(); negative keys raise an error

Example

.column {
  @include gap-y(2); // row-gap: var(--nu-space-2)
}
Compiled CSS
.column {
  row-gap: var(--nu-space-2);
}

See also: gap, gap-x. Source: utilities/_spacing.scss:564

Transforms

utilities/_transforms.scss

apply-transform translate-x translate-y translate-z translate scale-x scale-y scale rotate skew-x skew-y origin

apply-transform mixin

Writes the transform property that combines every --nu-translate-*, --nu-rotate, --nu-skew-* and --nu-scale-* variable; the transform mixins include it.

@mixin apply-transform
Output
transform: translateX(var(--nu-translate-x)) ... scaleY(var(--nu-scale-y)), with no fallbacks; unset variables use their @property initial values

Example

.icon {
  --nu-rotate: 90deg;
  @include apply-transform;
}
Compiled CSS
.icon {
  --nu-rotate: 90deg;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

See also: translate, rotate, scale. Source: utilities/_transforms.scss:30

translate-x mixin

Moves the element along the x axis by setting --nu-translate-x and writing the combined transform.

@mixin translate-x($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredA $spacings key (4 gives var(--nu-space-4)), a negated key (-4 gives calc(-1 * token)), a fraction key (25p, -25p), a length, percentage, calc() or var()

Example 1

.drawer {
  @include translate-x(4);
}
Compiled CSS
.drawer {
  --nu-translate-x: var(--nu-space-4);
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Example 2

.card {
  @include apply(translate-x(-50p) hover);
}
Compiled CSS
.card:hover {
  --nu-translate-x: -50%;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Note. A unitless number that is not a spacing key raises an error.

See also: translate, apply-transform. Source: utilities/_transforms.scss:137

translate-y mixin

Moves the element along the y axis by setting --nu-translate-y and writing the combined transform.

@mixin translate-y($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredA $spacings key (4 gives var(--nu-space-4)), a negated key (-4 gives calc(-1 * token)), a fraction key (25p, -25p), a length, percentage, calc() or var()

Example 1

.drawer {
  @include translate-y(-1);
}
Compiled CSS
.drawer {
  --nu-translate-y: calc(-1 * var(--nu-space-1));
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Example 2

.card {
  @include apply(translate-y(100%) hover);
}
Compiled CSS
.card:hover {
  --nu-translate-y: 100%;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Note. A unitless number that is not a spacing key raises an error.

See also: translate, apply-transform. Source: utilities/_transforms.scss:155

translate-z mixin

Moves the element along the z axis by setting --nu-translate-z and writing the combined transform.

@mixin translate-z($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredA $spacings key, a negated key, a length, calc() or var()

Example

.layer {
  @include translate-z(10px);
}
Compiled CSS
.layer {
  --nu-translate-z: 10px;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Note. A unitless number that is not a spacing key raises an error, as do percentages and fraction keys (50%, 50p): the z axis takes a length.

See also: translate, apply-transform. Source: utilities/_transforms.scss:169

translate mixin

Moves the element on the x axis, and on the y axis when $y is given, then writes the combined transform.

@mixin translate($x, $y: null)
ParameterTypeDefaultDescription
$xNumber|Length|StringRequiredA $spacings key (4 gives var(--nu-space-4)), a negated key (-4 gives calc(-1 * token)), a fraction key (25p, -25p), a length, percentage, calc() or var()
$yNumber|Length|String|NullnullSame values as $x; when null, --nu-translate-y is left unchanged

Example

.tooltip {
  @include translate(-50p, 2);
}
Compiled CSS
.tooltip {
  --nu-translate-x: -50%;
  --nu-translate-y: var(--nu-space-2);
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Note. A single argument moves the x axis only.

See also: translate-x, translate-y. Source: utilities/_transforms.scss:189

scale-x mixin

Scales the element horizontally by setting --nu-scale-x and writing the combined transform.

@mixin scale-x($value)
ParameterTypeDefaultDescription
$valueNumber|Percentage|StringRequiredA $scale-values key (0, 50, 75, 90, 95, 100, 105, 110, 125, 150; 150 gives 1.5) a factor such as 1.5, a percentage, calc() or var(); any other word raises an error

Example

.thumb {
  @include scale-x(110);
}
Compiled CSS
.thumb {
  --nu-scale-x: 1.1;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Note. Keys win over factors, so scale(100) is 1 and scale(50) is 0.5.

See also: apply-transform. Source: utilities/_transforms.scss:258

scale-y mixin

Scales the element vertically by setting --nu-scale-y and writing the combined transform.

@mixin scale-y($value)
ParameterTypeDefaultDescription
$valueNumber|Percentage|StringRequiredA $scale-values key (0, 50, 75, 90, 95, 100, 105, 110, 125, 150; 150 gives 1.5) a factor such as 1.5, a percentage, calc() or var(); any other word raises an error

Example

.thumb {
  @include scale-y(1.5);
}
Compiled CSS
.thumb {
  --nu-scale-y: 1.5;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Note. Keys win over factors, so scale(100) is 1 and scale(50) is 0.5.

See also: apply-transform. Source: utilities/_transforms.scss:272

scale mixin

Scales the element on both axes by setting --nu-scale-x and --nu-scale-y and writing the combined transform.

@mixin scale($value)
ParameterTypeDefaultDescription
$valueNumber|Percentage|StringRequiredA $scale-values key (0, 50, 75, 90, 95, 100, 105, 110, 125, 150; 150 gives 1.5) a factor such as 1.5, a percentage, calc() or var(); any other word raises an error

Example 1

.thumb {
  @include scale(105);
}
Compiled CSS
.thumb {
  --nu-scale-x: 1.05;
  --nu-scale-y: 1.05;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Example 2

.card {
  @include apply(scale(105) hover, transition-transform);
}
Compiled CSS
.card:hover {
  --nu-scale-x: 1.05;
  --nu-scale-y: 1.05;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}
.card {
  transition-property: transform;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
}

Note. Keys win over factors, so scale(100) is 1 and scale(50) is 0.5.

See also: apply-transform. Source: utilities/_transforms.scss:290

rotate mixin

Rotates the element by setting --nu-rotate and writing the combined transform.

@mixin rotate($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredA $rotation-values key (0, 45, 90, 180, 270; 45 gives 45deg as in .rotate-45), a negated key (-45), an angle with a unit (30deg, 0.25turn), calc() or var()

Example

.chevron {
  @include apply(rotate(180) hover);
}
Compiled CSS
.chevron:hover {
  --nu-rotate: 180deg;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Note. 0 is written 0deg. Another unitless number, such as 30, and any other word raise an error.

See also: apply-transform. Source: utilities/_transforms.scss:307

skew-x mixin

Skews the element along the x axis by setting --nu-skew-x and writing the combined transform.

@mixin skew-x($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredAn angle with a unit (6deg), calc(), var() or 0 (written 0deg)

Example

.ribbon {
  @include skew-x(6deg);
}
Compiled CSS
.ribbon {
  --nu-skew-x: 6deg;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Note. A unitless non-zero number or any other word raises an error.

See also: apply-transform. Source: utilities/_transforms.scss:321

skew-y mixin

Skews the element along the y axis by setting --nu-skew-y and writing the combined transform.

@mixin skew-y($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredAn angle with a unit (6deg), calc(), var() or 0 (written 0deg)

Example

.ribbon {
  @include skew-y(-3deg);
}
Compiled CSS
.ribbon {
  --nu-skew-y: -3deg;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Note. A unitless non-zero number or any other word raises an error.

See also: apply-transform. Source: utilities/_transforms.scss:335

origin mixin

Sets transform-origin from an $origin-values key (top-left gives top left, matching .origin-top-left) or a transform-origin value.

@mixin origin($value)
ParameterTypeDefaultDescription
$valueString|Length|ListRequiredAn $origin-values key (center, top, top-right, right, bottom-right, bottom, bottom-left, left, top-left) or a transform-origin value of position keywords, lengths, percentages, calc() or var(), such as top left or 50% 100%; anything else raises an error

Example 1

.menu {
  @include origin(top-left); // transform-origin: top left
}
Compiled CSS
.menu {
  transform-origin: top left;
}

Example 2

.badge {
  @include origin(50% 100%);
}
Compiled CSS
.badge {
  transform-origin: 50% 100%;
}

See also: rotate, scale. Source: utilities/_transforms.scss:352

Transitions

utilities/_transitions.scss

transition-none transition transition-colors transition-opacity transition-shadow transition-transform duration ease ease-linear ease-in ease-out ease-in-out delay

transition-none mixin

Disables transitions by setting transition-property to none.

@mixin transition-none

Example

.no-motion {
  @include transition-none;
}
Compiled CSS
.no-motion {
  transition-property: none;
}

See also: duration, ease, delay. Source: utilities/_transitions.scss:30

transition mixin

Transitions every animatable property with the default duration and easing tokens ($transition-default-duration, 200; $transition-default-ease, in-out).

@mixin transition
Output
transition-property: all; transition-duration: var(--nu-duration-200); transition-timing-function: var(--nu-ease-in-out)

Example 1

.card {
  @include transition;
}
Compiled CSS
.card {
  transition-property: all;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
}

Example 2

.panel {
  @include apply(transition, duration(300));
}
Compiled CSS
.panel {
  transition-property: all;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-duration: var(--nu-duration-300);
}

Note. Include duration() or ease() after it to override a default.

See also: duration, ease, delay. Source: utilities/_transitions.scss:47

transition-colors mixin

Transitions colour properties (color, background-color, border-color, text-decoration-color, fill, stroke) with the default duration and easing tokens, like transition.

@mixin transition-colors
Output
transition-property: color, background-color, ...; transition-duration: var(--nu-duration-200); transition-timing-function: var(--nu-ease-in-out)

Example

.button {
  @include apply(transition-colors, duration(150), ease(out));
}
Compiled CSS
.button {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-duration: var(--nu-duration-150);
  transition-timing-function: var(--nu-ease-out);
}

See also: duration, ease, delay. Source: utilities/_transitions.scss:70

transition-opacity mixin

Transitions opacity only, with the default duration and easing tokens, like transition.

@mixin transition-opacity
Output
transition-property: opacity; transition-duration: var(--nu-duration-200); transition-timing-function: var(--nu-ease-in-out)

Example

.button {
  @include apply(transition-opacity, duration(150), ease(out));
}
Compiled CSS
.button {
  transition-property: opacity;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-duration: var(--nu-duration-150);
  transition-timing-function: var(--nu-ease-out);
}

See also: duration, ease, delay. Source: utilities/_transitions.scss:84

transition-shadow mixin

Transitions box-shadow only, with the default duration and easing tokens, like transition.

@mixin transition-shadow
Output
transition-property: box-shadow; transition-duration: var(--nu-duration-200); transition-timing-function: var(--nu-ease-in-out)

Example

.button {
  @include apply(transition-shadow, duration(150), ease(out));
}
Compiled CSS
.button {
  transition-property: box-shadow;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-duration: var(--nu-duration-150);
  transition-timing-function: var(--nu-ease-out);
}

See also: duration, ease, delay. Source: utilities/_transitions.scss:98

transition-transform mixin

Transitions transform only, with the default duration and easing tokens, like transition.

@mixin transition-transform
Output
transition-property: transform; transition-duration: var(--nu-duration-200); transition-timing-function: var(--nu-ease-in-out)

Example

.button {
  @include apply(transition-transform, duration(150), ease(out));
}
Compiled CSS
.button {
  transition-property: transform;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-duration: var(--nu-duration-150);
  transition-timing-function: var(--nu-ease-out);
}

See also: duration, ease, delay. Source: utilities/_transitions.scss:112

duration mixin

Sets transition-duration from a $durations key, emitted as var(--nu-duration-*), or a raw time.

@mixin duration($time)
ParameterTypeDefaultDescription
$timeNumber|Duration|StringRequiredA $durations key (0, 75, 100, 150, 200, 300, 500, 700, 1000), a time in s or ms, calc() or var()

Example 1

.panel {
  @include duration(300); // var(--nu-duration-300)
}
Compiled CSS
.panel {
  transition-duration: var(--nu-duration-300);
}

Example 2

.toast {
  @include apply(transition-opacity, duration(250ms));
}
Compiled CSS
.toast {
  transition-property: opacity;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-duration: 250ms;
}

Note. A unitless number that is not a key, a negative time, or a time in another unit raises an error.

See also: ease, delay. Source: utilities/_transitions.scss:153

ease mixin

Sets transition-timing-function from a $timing-functions key, emitted as var(--nu-ease-*), or a raw timing function.

@mixin ease($name)
ParameterTypeDefaultDescription
$nameStringRequiredA $timing-functions key (linear, in, out, in-out), cubic-bezier(), steps(), linear(), var() or a CSS keyword (ease, ease-in, ease-out, ease-in-out, step-start, step-end)

Example 1

.menu {
  @include ease(out); // var(--nu-ease-out)
}
Compiled CSS
.menu {
  transition-timing-function: var(--nu-ease-out);
}

Example 2

.sheet {
  @include apply(transition-transform, duration(300), ease(cubic-bezier(0.2, 0, 0, 1)));
}
Compiled CSS
.sheet {
  transition-property: transform;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-duration: var(--nu-duration-300);
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

Note. Keys win over keywords, so ease(linear) gives var(--nu-ease-linear); any other value raises an error.

See also: ease-in, ease-out, ease-in-out, ease-linear, duration. Source: utilities/_transitions.scss:209

ease-linear mixin

Sets transition-timing-function to the linear key, var(--nu-ease-linear).

@mixin ease-linear

Example

.fade {
  @include apply(transition-opacity, ease-linear);
}
Compiled CSS
.fade {
  transition-property: opacity;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-timing-function: var(--nu-ease-linear);
}

See also: ease. Source: utilities/_transitions.scss:225

ease-in mixin

Sets transition-timing-function to the in key, var(--nu-ease-in).

@mixin ease-in

Example

.fade {
  @include apply(transition-opacity, ease-in);
}
Compiled CSS
.fade {
  transition-property: opacity;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-timing-function: var(--nu-ease-in);
}

See also: ease. Source: utilities/_transitions.scss:236

ease-out mixin

Sets transition-timing-function to the out key, var(--nu-ease-out).

@mixin ease-out

Example

.fade {
  @include apply(transition-opacity, ease-out);
}
Compiled CSS
.fade {
  transition-property: opacity;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-timing-function: var(--nu-ease-out);
}

See also: ease. Source: utilities/_transitions.scss:247

ease-in-out mixin

Sets transition-timing-function to the in-out key, var(--nu-ease-in-out).

@mixin ease-in-out

Example

.fade {
  @include apply(transition-opacity, ease-in-out);
}
Compiled CSS
.fade {
  transition-property: opacity;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
  transition-timing-function: var(--nu-ease-in-out);
}

See also: ease. Source: utilities/_transitions.scss:258

delay mixin

Sets transition-delay from a $delays key or a raw time; delays are not tokens, so a key gives its configured time.

@mixin delay($time)
ParameterTypeDefaultDescription
$timeNumber|Duration|StringRequiredA $delays key (0, 75, 100, 150, 200, 300, 500, 700, 1000; 150 gives 150ms), a time in s or ms, calc() or var()

Example

.tooltip {
  @include delay(300); // transition-delay: 300ms
}
Compiled CSS
.tooltip {
  transition-delay: 300ms;
}

Note. A unitless number that is not a key raises an error.

See also: duration. Source: utilities/_transitions.scss:271

Typography

utilities/_typography.scss

font-size font leading leading-none leading-tight leading-snug leading-normal leading-relaxed leading-loose text-left text-center text-right text-justify text-start text-end uppercase lowercase capitalize normal-case italic not-italic underline line-through no-underline break-normal break-words break-all whitespace-normal whitespace-nowrap whitespace-pre whitespace-pre-line whitespace-pre-wrap tracking tracking-tighter tracking-tight tracking-normal tracking-wide tracking-wider tracking-widest responsive-typography

font-size mixin

Sets font-size from a $font-sizes key (lg gives var(--nu-font-size-lg)) or a raw value; an unknown key or unitless number raises an error.

@mixin font-size($size)
ParameterTypeDefaultDescription
$sizeString|Length|CalculationRequiredFont size key, 0, a value with a unit, calc(), var() or a CSS font-size keyword

Example 1

.title {
  @include font-size(lg); // font-size: var(--nu-font-size-lg)
}
Compiled CSS
.title {
  font-size: var(--nu-font-size-lg);
}

Example 2

.hero {
  @include font-size(clamp(2rem, 5vw, 3rem));
}
Compiled CSS
.hero {
  font-size: clamp(2rem, 5vw, 3rem);
}

See also: font, leading, tracking. Source: utilities/_typography.scss:68

font mixin

Sets font-weight from a $font-weights key (bold gives var(--nu-font-weight-bold)) or a unitless number from 1 to 1000; anything else raises an error.

@mixin font($weight)
ParameterTypeDefaultDescription
$weightString|NumberRequiredFont weight key (thin to black) or a number from 1 to 1000

Example 1

.label {
  @include font(semibold); // font-weight: var(--nu-font-weight-semibold)
}
Compiled CSS
.label {
  font-weight: var(--nu-font-weight-semibold);
}

Example 2

.heading {
  @include apply(font-size(xl), font(bold), leading(tight));
}
Compiled CSS
.heading {
  font-size: var(--nu-font-size-xl);
  font-weight: var(--nu-font-weight-bold);
  line-height: var(--nu-line-height-tight);
}

See also: font-size. Source: utilities/_typography.scss:121

leading mixin

Sets line-height from a $line-heights key (tight gives var(--nu-line-height-tight)) or a raw value; negative or unknown values raise an error.

@mixin leading($value)
ParameterTypeDefaultDescription
$valueString|Number|Length|CalculationRequiredLine height key, a number or length of 0 or more (also as a string), calc(), var() or a keyword

Example 1

.body {
  @include leading(relaxed); // line-height: var(--nu-line-height-relaxed)
}
Compiled CSS
.body {
  line-height: var(--nu-line-height-relaxed);
}

Example 2

.caption {
  @include leading(1.6); // line-height: 1.6
}
Compiled CSS
.caption {
  line-height: 1.6;
}

See also: leading-normal, font-size. Source: utilities/_typography.scss:207

leading-none mixin

Sets line-height to the none key (var(--nu-line-height-none)); raises an error if the key is missing from $line-heights.

@mixin leading-none

Example

.text {
  @include leading-none; // line-height: var(--nu-line-height-none)
}
Compiled CSS
.text {
  line-height: var(--nu-line-height-none);
}

See also: leading. Source: utilities/_typography.scss:265

leading-tight mixin

Sets line-height to the tight key (var(--nu-line-height-tight)); raises an error if the key is missing from $line-heights.

@mixin leading-tight

Example

.text {
  @include leading-tight; // line-height: var(--nu-line-height-tight)
}
Compiled CSS
.text {
  line-height: var(--nu-line-height-tight);
}

See also: leading. Source: utilities/_typography.scss:276

leading-snug mixin

Sets line-height to the snug key (var(--nu-line-height-snug)); raises an error if the key is missing from $line-heights.

@mixin leading-snug

Example

.text {
  @include leading-snug; // line-height: var(--nu-line-height-snug)
}
Compiled CSS
.text {
  line-height: var(--nu-line-height-snug);
}

See also: leading. Source: utilities/_typography.scss:287

leading-normal mixin

Sets line-height to the normal key (var(--nu-line-height-normal)); raises an error if the key is missing from $line-heights.

@mixin leading-normal

Example

.text {
  @include leading-normal; // line-height: var(--nu-line-height-normal)
}
Compiled CSS
.text {
  line-height: var(--nu-line-height-normal);
}

See also: leading. Source: utilities/_typography.scss:298

leading-relaxed mixin

Sets line-height to the relaxed key (var(--nu-line-height-relaxed)); raises an error if the key is missing from $line-heights.

@mixin leading-relaxed

Example

.text {
  @include leading-relaxed; // line-height: var(--nu-line-height-relaxed)
}
Compiled CSS
.text {
  line-height: var(--nu-line-height-relaxed);
}

See also: leading. Source: utilities/_typography.scss:309

leading-loose mixin

Sets line-height to the loose key (var(--nu-line-height-loose)); raises an error if the key is missing from $line-heights.

@mixin leading-loose

Example

.text {
  @include leading-loose; // line-height: var(--nu-line-height-loose)
}
Compiled CSS
.text {
  line-height: var(--nu-line-height-loose);
}

See also: leading. Source: utilities/_typography.scss:320

text-left mixin

Aligns text to the left (physical, does not follow text direction).

@mixin text-left

Example

.cell {
  @include text-left; // text-align: left
}
Compiled CSS
.cell {
  text-align: left;
}

See also: text-start, text-right. Source: utilities/_typography.scss:333

text-center mixin

Centers text.

@mixin text-center

Example

.title {
  @include text-center; // text-align: center
}
Compiled CSS
.title {
  text-align: center;
}

See also: text-start, text-end. Source: utilities/_typography.scss:344

text-right mixin

Aligns text to the right (physical, does not follow text direction).

@mixin text-right

Example

.amount {
  @include text-right; // text-align: right
}
Compiled CSS
.amount {
  text-align: right;
}

See also: text-end, text-left. Source: utilities/_typography.scss:355

text-justify mixin

Justifies text to both edges.

@mixin text-justify

Example

.article {
  @include text-justify; // text-align: justify
}
Compiled CSS
.article {
  text-align: justify;
}

Source: utilities/_typography.scss:365

text-start mixin

Aligns text to the inline start: left in LTR, right in RTL.

@mixin text-start

Example

.label {
  @include text-start; // text-align: start
}
Compiled CSS
.label {
  text-align: start;
}

See also: text-end, text-left. Source: utilities/_typography.scss:376

text-end mixin

Aligns text to the inline end: right in LTR, left in RTL.

@mixin text-end

Example

.amount {
  @include text-end; // text-align: end
}
Compiled CSS
.amount {
  text-align: end;
}

See also: text-start, text-right. Source: utilities/_typography.scss:387

uppercase mixin

Transforms text to uppercase.

@mixin uppercase

Example

.eyebrow {
  @include uppercase; // text-transform: uppercase
}
Compiled CSS
.eyebrow {
  text-transform: uppercase;
}

See also: lowercase, capitalize, normal-case. Source: utilities/_typography.scss:400

lowercase mixin

Transforms text to lowercase.

@mixin lowercase

Example

.tag {
  @include lowercase; // text-transform: lowercase
}
Compiled CSS
.tag {
  text-transform: lowercase;
}

See also: uppercase, normal-case. Source: utilities/_typography.scss:411

capitalize mixin

Capitalizes the first letter of each word.

@mixin capitalize

Example

.name {
  @include capitalize; // text-transform: capitalize
}
Compiled CSS
.name {
  text-transform: capitalize;
}

See also: uppercase, normal-case. Source: utilities/_typography.scss:422

normal-case mixin

Removes any text transform.

@mixin normal-case

Example

.plain {
  @include normal-case; // text-transform: none
}
Compiled CSS
.plain {
  text-transform: none;
}

See also: uppercase, lowercase. Source: utilities/_typography.scss:433

italic mixin

Sets the font style to italic.

@mixin italic

Example

.quote {
  @include italic; // font-style: italic
}
Compiled CSS
.quote {
  font-style: italic;
}

See also: not-italic. Source: utilities/_typography.scss:446

not-italic mixin

Resets the font style to normal.

@mixin not-italic

Example

em {
  @include not-italic; // font-style: normal
}
Compiled CSS
em {
  font-style: normal;
}

See also: italic. Source: utilities/_typography.scss:457

underline mixin

Underlines text.

@mixin underline

Example

.link {
  @include underline; // text-decoration: underline
}
Compiled CSS
.link {
  text-decoration: underline;
}

See also: no-underline, line-through. Source: utilities/_typography.scss:470

line-through mixin

Draws a line through text.

@mixin line-through

Example

.old-price {
  @include line-through; // text-decoration: line-through
}
Compiled CSS
.old-price {
  text-decoration: line-through;
}

See also: no-underline. Source: utilities/_typography.scss:481

no-underline mixin

Removes text decoration.

@mixin no-underline

Example

a.nav {
  @include no-underline; // text-decoration: none
}
Compiled CSS
a.nav {
  text-decoration: none;
}

See also: underline. Source: utilities/_typography.scss:492

break-normal mixin

Resets overflow-wrap and word-break to normal line breaking.

@mixin break-normal

Example

.text {
  @include break-normal; // overflow-wrap: normal; word-break: normal
}
Compiled CSS
.text {
  overflow-wrap: normal;
  word-break: normal;
}

See also: break-words, break-all. Source: utilities/_typography.scss:503

break-words mixin

Lets long words break onto the next line when they would overflow (overflow-wrap: break-word).

@mixin break-words

Example

.url {
  @include break-words; // overflow-wrap: break-word
}
Compiled CSS
.url {
  overflow-wrap: break-word;
}

See also: break-all, break-normal. Source: utilities/_typography.scss:515

break-all mixin

Allows line breaks between any two characters (word-break: break-all).

@mixin break-all

Example

.hash {
  @include break-all; // word-break: break-all
}
Compiled CSS
.hash {
  word-break: break-all;
}

See also: break-words, break-normal. Source: utilities/_typography.scss:526

whitespace-normal mixin

Sets white-space to normal, collapsing spaces and wrapping lines.

@mixin whitespace-normal

Example

.text {
  @include whitespace-normal; // white-space: normal
}
Compiled CSS
.text {
  white-space: normal;
}

Source: utilities/_typography.scss:536

whitespace-nowrap mixin

Prevents text from wrapping (white-space: nowrap).

@mixin whitespace-nowrap

Example

.text {
  @include whitespace-nowrap; // white-space: nowrap
}
Compiled CSS
.text {
  white-space: nowrap;
}

Source: utilities/_typography.scss:546

whitespace-pre mixin

Preserves spaces and line breaks without wrapping (white-space: pre).

@mixin whitespace-pre

Example

.text {
  @include whitespace-pre; // white-space: pre
}
Compiled CSS
.text {
  white-space: pre;
}

Source: utilities/_typography.scss:556

whitespace-pre-line mixin

Collapses spaces but keeps line breaks (white-space: pre-line).

@mixin whitespace-pre-line

Example

.text {
  @include whitespace-pre-line; // white-space: pre-line
}
Compiled CSS
.text {
  white-space: pre-line;
}

Source: utilities/_typography.scss:566

whitespace-pre-wrap mixin

Preserves spaces and line breaks and wraps lines (white-space: pre-wrap).

@mixin whitespace-pre-wrap

Example

.text {
  @include whitespace-pre-wrap; // white-space: pre-wrap
}
Compiled CSS
.text {
  white-space: pre-wrap;
}

Source: utilities/_typography.scss:576

tracking mixin

Sets letter-spacing from a key (tighter, tight, normal, wide, wider, widest; raw em values, not tokens) or a raw value; anything else raises an error.

@mixin tracking($value)
ParameterTypeDefaultDescription
$valueString|Number|Length|CalculationRequiredTracking key, 0, a value with a unit (also as a string), calc(), var() or a CSS-wide keyword

Example 1

.eyebrow {
  @include tracking(wide); // letter-spacing: 0.025em
}
Compiled CSS
.eyebrow {
  letter-spacing: 0.025em;
}

Example 2

.logo {
  @include tracking(0.2em); // letter-spacing: 0.2em
}
Compiled CSS
.logo {
  letter-spacing: 0.2em;
}

See also: tracking-wide, tracking-tight. Source: utilities/_typography.scss:604

tracking-tighter mixin

Sets letter-spacing to the tighter key (-0.05em).

@mixin tracking-tighter

Example

.text {
  @include tracking-tighter; // letter-spacing: -0.05em
}
Compiled CSS
.text {
  letter-spacing: -0.05em;
}

See also: tracking. Source: utilities/_typography.scss:625

tracking-tight mixin

Sets letter-spacing to the tight key (-0.025em).

@mixin tracking-tight

Example

.text {
  @include tracking-tight; // letter-spacing: -0.025em
}
Compiled CSS
.text {
  letter-spacing: -0.025em;
}

See also: tracking. Source: utilities/_typography.scss:636

tracking-normal mixin

Sets letter-spacing to the normal key (0).

@mixin tracking-normal

Example

.text {
  @include tracking-normal; // letter-spacing: 0
}
Compiled CSS
.text {
  letter-spacing: 0;
}

See also: tracking. Source: utilities/_typography.scss:647

tracking-wide mixin

Sets letter-spacing to the wide key (0.025em).

@mixin tracking-wide

Example

.text {
  @include tracking-wide; // letter-spacing: 0.025em
}
Compiled CSS
.text {
  letter-spacing: 0.025em;
}

See also: tracking. Source: utilities/_typography.scss:658

tracking-wider mixin

Sets letter-spacing to the wider key (0.05em).

@mixin tracking-wider

Example

.text {
  @include tracking-wider; // letter-spacing: 0.05em
}
Compiled CSS
.text {
  letter-spacing: 0.05em;
}

See also: tracking. Source: utilities/_typography.scss:669

tracking-widest mixin

Sets letter-spacing to the widest key (0.1em).

@mixin tracking-widest

Example

.text {
  @include tracking-widest; // letter-spacing: 0.1em
}
Compiled CSS
.text {
  letter-spacing: 0.1em;
}

See also: tracking. Source: utilities/_typography.scss:680

responsive-typography mixin

Emits the typography utility classes (size, weight, line height, alignment, transform, style, decoration, tracking), suffixed with @breakpoint when a breakpoint is given.

@mixin responsive-typography($breakpoint: null)
ParameterTypeDefaultDescription
$breakpointString|NullnullBreakpoint name for the class suffix (also adds responsive truncate classes); null emits the base classes

Example

@media (min-width: 1440px) {
  @include responsive-typography(wide);
}
Compiled CSS
@media (min-width: 1440px) {
  .text-xs\@wide {
    font-size: var(--nu-font-size-xs);
  }
  .text-sm\@wide {
    font-size: var(--nu-font-size-sm);
  }
  .text-md\@wide {
    font-size: var(--nu-font-size-md);
  }
  .text-base\@wide {
    font-size: var(--nu-font-size-base);
  }
  .text-lg\@wide {
    font-size: var(--nu-font-size-lg);
  }
  .text-xl\@wide {
    font-size: var(--nu-font-size-xl);
  }
  .text-2xl\@wide {
    font-size: var(--nu-font-size-2xl);
  }
  .text-3xl\@wide {
    font-size: var(--nu-font-size-3xl);
  }
  .text-4xl\@wide {
    font-size: var(--nu-font-size-4xl);
  }
  .font-thin\@wide {
    font-weight: var(--nu-font-weight-thin);
  }
  .font-extralight\@wide {
    font-weight: var(--nu-font-weight-extralight);
  }
  .font-light\@wide {
    font-weight: var(--nu-font-weight-light);
  }
  .font-normal\@wide {
    font-weight: var(--nu-font-weight-normal);
  }
  .font-medium\@wide {
    font-weight: var(--nu-font-weight-medium);
  }
  .font-semibold\@wide {
    font-weight: var(--nu-font-weight-semibold);
  }
  .font-bold\@wide {
    font-weight: var(--nu-font-weight-bold);
  }
  .font-extrabold\@wide {
    font-weight: var(--nu-font-weight-extrabold);
  }
  .font-black\@wide {
    font-weight: var(--nu-font-weight-black);
  }
  .leading-none\@wide {
    line-height: var(--nu-line-height-none);
  }
  .leading-tight\@wide {
    line-height: var(--nu-line-height-tight);
  }
  .leading-snug\@wide {
    line-height: var(--nu-line-height-snug);
  }
  .leading-normal\@wide {
    line-height: var(--nu-line-height-normal);
  }
  .leading-relaxed\@wide {
    line-height: var(--nu-line-height-relaxed);
  }
  .leading-loose\@wide {
    line-height: var(--nu-line-height-loose);
  }
  .text-left\@wide {
    text-align: left;
  }
  .text-center\@wide {
    text-align: center;
  }
  .text-right\@wide {
    text-align: right;
  }
  .text-justify\@wide {
    text-align: justify;
  }
  .text-start\@wide {
    text-align: start;
  }
  .text-end\@wide {
    text-align: end;
  }
  .uppercase\@wide {
    text-transform: uppercase;
  }
  .lowercase\@wide {
    text-transform: lowercase;
  }
  .capitalize\@wide {
    text-transform: capitalize;
  }
  .normal-case\@wide {
    text-transform: none;
  }
  .italic\@wide {
    font-style: italic;
  }
  .not-italic\@wide {
    font-style: normal;
  }
  .underline\@wide {
    text-decoration: underline;
  }
  .line-through\@wide {
    text-decoration: line-through;
  }
  .no-underline\@wide {
    text-decoration: none;
  }
  .truncate\@wide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .truncate-2\@wide {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .truncate-3\@wide {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .truncate-4\@wide {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .truncate-5\@wide {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .overflow-label\@wide {
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }
  .tracking-tighter\@wide {
    letter-spacing: -0.05em;
  }
  .tracking-tight\@wide {
    letter-spacing: -0.025em;
  }
  .tracking-normal\@wide {
    letter-spacing: 0;
  }
  .tracking-wide\@wide {
    letter-spacing: 0.025em;
  }
  .tracking-wider\@wide {
    letter-spacing: 0.05em;
  }
  .tracking-widest\@wide {
    letter-spacing: 0.1em;
  }
}

Source: utilities/_typography.scss:708

Z index

utilities/_z-index.scss

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(--nu-z-*) token), an integer, auto, calc() or var(); other values raise an error.

@mixin z-index($value)
ParameterTypeDefaultDescription
$valueNumber|StringRequiredNumbered key (10), named level (modal), integer, auto, calc() or var()

Example

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


.badge {
  z-index: 10;
}

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

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)
ParameterTypeDefaultDescription
$breakpointString|NullnullBreakpoint 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(--nu-z-base);
  }
  .z-hover\@md {
    z-index: var(--nu-z-hover);
  }
  .z-dropdown\@md {
    z-index: var(--nu-z-dropdown);
  }
  .z-sticky\@md {
    z-index: var(--nu-z-sticky);
  }
  .z-fixed\@md {
    z-index: var(--nu-z-fixed);
  }
  .z-overlay\@md {
    z-index: var(--nu-z-overlay);
  }
  .z-drawer\@md {
    z-index: var(--nu-z-drawer);
  }
  .z-modal\@md {
    z-index: var(--nu-z-modal);
  }
  .z-popover\@md {
    z-index: var(--nu-z-popover);
  }
  .z-tooltip\@md {
    z-index: var(--nu-z-tooltip);
  }
  .z-toast\@md {
    z-index: var(--nu-z-toast);
  }
  .z-max\@md {
    z-index: var(--nu-z-max);
  }
}

Source: utilities/_z-index.scss:87

z-base mixin

Sets z-index to the base level token.

@mixin z-base
Output
z-index: var(--nu-z-base)

Example

.content {
  @include z-base;
}
Compiled CSS
.content {
  z-index: var(--nu-z-base);
}

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

z-hover mixin

Sets z-index to the hover level token.

@mixin z-hover
Output
z-index: var(--nu-z-hover)

Example

.card {
  @include z-hover;
}
Compiled CSS
.card {
  z-index: var(--nu-z-hover);
}

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

z-dropdown mixin

Sets z-index to the dropdown level token.

@mixin z-dropdown
Output
z-index: var(--nu-z-dropdown)

Example

.dropdown-menu {
  @include z-dropdown;
}
Compiled CSS
.dropdown-menu {
  z-index: var(--nu-z-dropdown);
}

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

z-sticky mixin

Sets z-index to the sticky level token.

@mixin z-sticky
Output
z-index: var(--nu-z-sticky)

Example

.table-header {
  @include z-sticky;
}
Compiled CSS
.table-header {
  z-index: var(--nu-z-sticky);
}

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

z-fixed mixin

Sets z-index to the fixed level token.

@mixin z-fixed
Output
z-index: var(--nu-z-fixed)

Example

.navbar {
  @include z-fixed;
}
Compiled CSS
.navbar {
  z-index: var(--nu-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(--nu-z-drawer)

Example

.drawer {
  @include z-drawer;
}
Compiled CSS
.drawer {
  z-index: var(--nu-z-drawer);
}

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

z-modal mixin

Sets z-index to the modal level token.

@mixin z-modal
Output
z-index: var(--nu-z-modal)

Example

.modal {
  @include z-modal;
}
Compiled CSS
.modal {
  z-index: var(--nu-z-modal);
}

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

z-popover mixin

Sets z-index to the popover level token.

@mixin z-popover
Output
z-index: var(--nu-z-popover)

Example

.popover {
  @include z-popover;
}
Compiled CSS
.popover {
  z-index: var(--nu-z-popover);
}

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

z-tooltip mixin

Sets z-index to the tooltip level token.

@mixin z-tooltip
Output
z-index: var(--nu-z-tooltip)

Example

.tooltip {
  @include z-tooltip;
}
Compiled CSS
.tooltip {
  z-index: var(--nu-z-tooltip);
}

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

z-overlay mixin

Sets z-index to the overlay level token.

@mixin z-overlay
Output
z-index: var(--nu-z-overlay)

Example

.backdrop {
  @include z-overlay;
}
Compiled CSS
.backdrop {
  z-index: var(--nu-z-overlay);
}

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

z-toast mixin

Sets z-index to the toast level token.

@mixin z-toast
Output
z-index: var(--nu-z-toast)

Example

.toast {
  @include z-toast;
}
Compiled CSS
.toast {
  z-index: var(--nu-z-toast);
}

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

z-max mixin

Sets z-index to the max level token.

@mixin z-max
Output
z-index: var(--nu-z-max)

Example

.debug-panel {
  @include z-max;
}
Compiled CSS
.debug-panel {
  z-index: var(--nu-z-max);
}

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

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:259