Feature support mixins

Mixins for targeting device-specific capabilities.

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

Source: tools/_feature-support.scss

Mixins

touch fine-pointer landscape portrait display-mode

touch mixin

Applies styles on touch devices: no hover support and a coarse pointer.

@mixin touch

Content block

Styles for touch devices

Example

.menu-link {
  @include touch {
    padding-block: 12px;
  }
}

Compiled CSS

@media (hover: none) and (pointer: coarse) {
  .menu-link {
    padding-block: 12px;
  }
}

See also: fine-pointer. Source: tools/_feature-support.scss:15

fine-pointer mixin

Applies styles on devices with a precise pointer such as a mouse (pointer: fine).

@mixin fine-pointer

Content block

Styles for fine pointer devices

Example

.row-actions {
  @include fine-pointer {
    opacity: 0;
  }
}

Compiled CSS

@media (pointer: fine) {
  .row-actions {
    opacity: 0;
  }
}

See also: touch. Source: tools/_feature-support.scss:30

landscape mixin

Applies styles in landscape orientation ((orientation: landscape) media query, no screen and).

@mixin landscape

Content block

Styles for landscape orientation

Example

.gallery {
  @include landscape {
    grid-template-columns: repeat(3, 1fr);
  }
}

Compiled CSS

@media (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

See also: portrait. Source: tools/_feature-support.scss:45

portrait mixin

Applies styles in portrait orientation ((orientation: portrait) media query, no screen and).

@mixin portrait

Content block

Styles for portrait orientation

Example

.gallery {
  @include portrait {
    grid-template-columns: 1fr;
  }
}

Compiled CSS

@media (orientation: portrait) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

See also: landscape. Source: tools/_feature-support.scss:60

display-mode mixin

Applies styles when the page runs in the given Progressive Web App display mode.

@mixin display-mode($mode: "standalone")

Parameter	Type	Default	Description
$mode	String	"standalone"	Display mode (standalone, fullscreen, minimal-ui, browser)

Content block

Styles for that display mode

Example

.install-banner {
  @include display-mode(standalone) {
    display: none;
  }
}

Compiled CSS

@media (display-mode: standalone) {
  .install-banner {
    display: none;
  }
}

Source: tools/_feature-support.scss:75