CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Vis-/skjul-klassar basert på visningsvindauge- eller behaldarbreidd over ei tematisk breakpoint-skala.

.instui-hidden-max-<bp>/-hidden-min-<bp> skjuler etter visningsvindaugsbreidd; .instui-show-max-<bp>/-show-min-<bp> er omvendt (skjult som standard, viser berre innan området via display: revert); -cq--variantane reagerer i staden på eit .instui-container-forfedres breidd, ikkje på visningsvindauget. Skala-trinna xs/sm/md/lg/xl (henta frå IR-en sin tray-width-komponenttoken) har kvar ei langform-variant (x-small–x-large) og eit enhetsnamn (mobile/phablet/tablet/laptop/desktop) — begge er utdatert til fordel for kortnamnet — pluss dei u-skalerte, tematiserte content/content-full-width-trinna (maks-breidd for hovudinhaldsområdet).

Source: index.ts

Bruk

@import "@pantoken/components/utilities.css";

Døme

<div class="instui-hidden-max-sm">Hidden at or below the small breakpoint.</div>
<div class="instui-show-min-sm">Shown only at or above the small breakpoint.</div>

Modifikatorar

Modifikator	Skildring
.-cq-hidden-max-content	Skjul når den markerte behaldaren er på eller under content-brekpunktet (68.75em).
.-cq-hidden-max-content-full-width	Skjul når den markerte behaldaren er på eller under content-full-width-brekpunktet (98.75em).
.-cq-hidden-max-desktop	Alias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-laptop	Alias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-large	Alias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-lg	Skjul når den markerte behaldaren er på eller under lg-brekpunktet (48em).
.-cq-hidden-max-md	Skjul når den markerte behaldaren er på eller under md-brekpunktet (30em).
.-cq-hidden-max-medium	Alias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-mobile	Alias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-phablet	Alias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-sm	Skjul når den markerte behaldaren er på eller under sm-brekpunktet (20em).
.-cq-hidden-max-small	Alias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-tablet	Alias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-x-large	Alias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-x-small	Alias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-xl	Skjul når den markerte behaldaren er på eller under xl-brekpunktet (62em).
.-cq-hidden-max-xs	Skjul når den markerte behaldaren er på eller under xs-brekpunktet (16em).
.-cq-hidden-min-content	Skjul når den markerte behaldaren er på eller over content-brekpunktet (68.75em).
.-cq-hidden-min-content-full-width	Skjul når den markerte behaldaren er på eller over content-full-width-brekpunktet (98.75em).
.-cq-hidden-min-desktop	Alias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-laptop	Alias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-large	Alias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-lg	Skjul når den markerte behaldaren er på eller over lg-brekpunktet (48em).
.-cq-hidden-min-md	Skjul når den markerte behaldaren er på eller over md-brekpunktet (30em).
.-cq-hidden-min-medium	Alias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-mobile	Alias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-phablet	Alias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-sm	Skjul når den markerte behaldaren er på eller over sm-brekpunktet (20em).
.-cq-hidden-min-small	Alias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-tablet	Alias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-x-large	Alias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-x-small	Alias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-xl	Skjul når den markerte behaldaren er på eller over xl-brekpunktet (62em).
.-cq-hidden-min-xs	Skjul når den markerte behaldaren er på eller over xs-brekpunktet (16em).
.-cq-show-max-content	Vis når den markerte behaldaren er på eller under content-brekpunktet (68.75em); skjult elles.
.-cq-show-max-content-full-width	Vis når den markerte behaldaren er på eller under content-full-width-brekpunktet (98.75em); skjult elles.
.-cq-show-max-desktop	Alias — maps to .-cq-show-max-xl.
.-cq-show-max-laptop	Alias — maps to .-cq-show-max-lg.
.-cq-show-max-large	Alias — maps to .-cq-show-max-lg.
.-cq-show-max-lg	Vis når den markerte behaldaren er på eller under lg-brekpunktet (48em); skjult elles.
.-cq-show-max-md	Vis når den markerte behaldaren er på eller under md-brekpunktet (30em); skjult elles.
.-cq-show-max-medium	Alias — maps to .-cq-show-max-md.
.-cq-show-max-mobile	Alias — maps to .-cq-show-max-xs.
.-cq-show-max-phablet	Alias — maps to .-cq-show-max-sm.
.-cq-show-max-sm	Vis når den markerte behaldaren er på eller under sm-brekpunktet (20em); skjult elles.
.-cq-show-max-small	Alias — maps to .-cq-show-max-sm.
.-cq-show-max-tablet	Alias — maps to .-cq-show-max-md.
.-cq-show-max-x-large	Alias — maps to .-cq-show-max-xl.
.-cq-show-max-x-small	Alias — maps to .-cq-show-max-xs.
.-cq-show-max-xl	Vis når den markerte behaldaren er på eller under xl-brekpunktet (62em); skjult elles.
.-cq-show-max-xs	Vis når den markerte behaldaren er på eller under xs-brekpunktet (16em); skjult elles.
.-cq-show-min-content	Vis når den markerte behaldaren er på eller over content-brekpunktet (68.75em); skjult elles.
.-cq-show-min-content-full-width	Vis når den markerte behaldaren er på eller over content-full-width-brekpunktet (98.75em); skjult elles.
.-cq-show-min-desktop	Alias — maps to .-cq-show-min-xl.
.-cq-show-min-laptop	Alias — maps to .-cq-show-min-lg.
.-cq-show-min-large	Alias — maps to .-cq-show-min-lg.
.-cq-show-min-lg	Vis når den markerte behaldaren er på eller over lg-brekpunktet (48em); skjult elles.
.-cq-show-min-md	Vis når den markerte behaldaren er på eller over md-brekpunktet (30em); skjult elles.
.-cq-show-min-medium	Alias — maps to .-cq-show-min-md.
.-cq-show-min-mobile	Alias — maps to .-cq-show-min-xs.
.-cq-show-min-phablet	Alias — maps to .-cq-show-min-sm.
.-cq-show-min-sm	Vis når den markerte behaldaren er på eller over sm-brekpunktet (20em); skjult elles.
.-cq-show-min-small	Alias — maps to .-cq-show-min-sm.
.-cq-show-min-tablet	Alias — maps to .-cq-show-min-md.
.-cq-show-min-x-large	Alias — maps to .-cq-show-min-xl.
.-cq-show-min-x-small	Alias — maps to .-cq-show-min-xs.
.-cq-show-min-xl	Vis når den markerte behaldaren er på eller over xl-brekpunktet (62em); skjult elles.
.-cq-show-min-xs	Vis når den markerte behaldaren er på eller over xs-brekpunktet (16em); skjult elles.
.-hidden-max-content	Skjul når visningsvindauget er på eller under content-brekpunktet (68.75em).
.-hidden-max-content-full-width	Skjul når visningsvindauget er på eller under content-full-width-brekpunktet (98.75em).
.-hidden-max-desktop	Alias — maps to .-hidden-max-xl.
.-hidden-max-laptop	Alias — maps to .-hidden-max-lg.
.-hidden-max-large	Alias — maps to .-hidden-max-lg.
.-hidden-max-lg	Skjul når visningsvindauget er på eller under lg-brekpunktet (48em).
.-hidden-max-md	Skjul når visningsvindauget er på eller under md-brekpunktet (30em).
.-hidden-max-medium	Alias — maps to .-hidden-max-md.
.-hidden-max-mobile	Alias — maps to .-hidden-max-xs.
.-hidden-max-phablet	Alias — maps to .-hidden-max-sm.
.-hidden-max-sm	Skjul når visningsvindauget er på eller under sm-brekpunktet (20em).
.-hidden-max-small	Alias — maps to .-hidden-max-sm.
.-hidden-max-tablet	Alias — maps to .-hidden-max-md.
.-hidden-max-x-large	Alias — maps to .-hidden-max-xl.
.-hidden-max-x-small	Alias — maps to .-hidden-max-xs.
.-hidden-max-xl	Skjul når visningsvindauget er på eller under xl-brekpunktet (62em).
.-hidden-max-xs	Skjul når visningsvindauget er på eller under xs-brekpunktet (16em).
.-hidden-min-content	Skjul når visningsvindauget er på eller over content-brekpunktet (68.75em).
.-hidden-min-content-full-width	Skjul når visningsvindauget er på eller over content-full-width-brekpunktet (98.75em).
.-hidden-min-desktop	Alias — maps to .-hidden-min-xl.
.-hidden-min-laptop	Alias — maps to .-hidden-min-lg.
.-hidden-min-large	Alias — maps to .-hidden-min-lg.
.-hidden-min-lg	Skjul når visningsvindauget er på eller over lg-brekpunktet (48em).
.-hidden-min-md	Skjul når visningsområdet er på eller over md-brytpunktet (30em).
.-hidden-min-medium	Alias — maps to .-hidden-min-md.
.-hidden-min-mobile	Alias — maps to .-hidden-min-xs.
.-hidden-min-phablet	Alias — maps to .-hidden-min-sm.
.-hidden-min-sm	Skjul når visningsområdet er på eller over sm-brytpunktet (20em).
.-hidden-min-small	Alias — maps to .-hidden-min-sm.
.-hidden-min-tablet	Alias — maps to .-hidden-min-md.
.-hidden-min-x-large	Alias — maps to .-hidden-min-xl.
.-hidden-min-x-small	Alias — maps to .-hidden-min-xs.
.-hidden-min-xl	Skjul når visningsområdet er på eller over xl-brytpunktet (62em).
.-hidden-min-xs	Skjul når visningsområdet er på eller over xs-brytpunktet (16em).
.-show-max-content	Vis (omvendt av -hidden-min-content) når visningsområdet er på eller under content-brytpunktet (68.75em); ellers skjult.
.-show-max-content-full-width	Vis (omvendt av -hidden-min-content-full-width) når visningsområdet er på eller under content-full-width-brytpunktet (98.75em); ellers skjult.
.-show-max-desktop	Alias — maps to .-show-max-xl.
.-show-max-laptop	Alias — maps to .-show-max-lg.
.-show-max-large	Alias — maps to .-show-max-lg.
.-show-max-lg	Vis (omvendt av -hidden-min-lg) når visningsområdet er på eller under lg-brytpunktet (48em); ellers skjult.
.-show-max-md	Vis (omvendt av -hidden-min-md) når visningsområdet er på eller under md-brytpunktet (30em); ellers skjult.
.-show-max-medium	Alias — maps to .-show-max-md.
.-show-max-mobile	Alias — maps to .-show-max-xs.
.-show-max-phablet	Alias — maps to .-show-max-sm.
.-show-max-sm	Vis (omvendt av -hidden-min-sm) når visningsområdet er på eller under sm-brytpunktet (20em); ellers skjult.
.-show-max-small	Alias — maps to .-show-max-sm.
.-show-max-tablet	Alias — maps to .-show-max-md.
.-show-max-x-large	Alias — maps to .-show-max-xl.
.-show-max-x-small	Alias — maps to .-show-max-xs.
.-show-max-xl	Vis (omvendt av -hidden-min-xl) når visningsområdet er på eller under xl-brytpunktet (62em); ellers skjult.
.-show-max-xs	Vis (omvendt av -hidden-min-xs) når visningsområdet er på eller under xs-brytpunktet (16em); ellers skjult.
.-show-min-content	Vis (omvendt av -hidden-max-content) når visningsområdet er på eller over content-brytpunktet (68.75em); ellers skjult.
.-show-min-content-full-width	Vis (omvendt av -hidden-max-content-full-width) når visningsområdet er på eller over content-full-width-brytpunktet (98.75em); ellers skjult.
.-show-min-desktop	Alias — maps to .-show-min-xl.
.-show-min-laptop	Alias — maps to .-show-min-lg.
.-show-min-large	Alias — maps to .-show-min-lg.
.-show-min-lg	Vis (omvendt av -hidden-max-lg) når visningsområdet er på eller over lg-brytpunktet (48em); ellers skjult.
.-show-min-md	Vis (omvendt av -hidden-max-md) når visningsområdet er på eller over md-brytpunktet (30em); ellers skjult.
.-show-min-medium	Alias — maps to .-show-min-md.
.-show-min-mobile	Alias — maps to .-show-min-xs.
.-show-min-phablet	Alias — maps to .-show-min-sm.
.-show-min-sm	Vis (omvendt av -hidden-max-sm) når visningsområdet er på eller over sm-brytpunktet (20em); ellers skjult.
.-show-min-small	Alias — maps to .-show-min-sm.
.-show-min-tablet	Alias — maps to .-show-min-md.
.-show-min-x-large	Alias — maps to .-show-min-xl.
.-show-min-x-small	Alias — maps to .-show-min-xs.
.-show-min-xl	Vis (omvendt av -hidden-max-xl) når visningsområdet er på eller over xl-brytpunktet (62em); ellers skjult.
.-show-min-xs	Vis (omvendt av -hidden-max-xs) når visningsområdet er på eller over xs-brytpunktet (16em); ellers skjult.

Tilpassa eigenskapar

Eigenskap	Type	Standard	Skildring
--pantoken-bp-content	<length>	68.75em	Verdien til content-brytpunktet (68.75em, hand-skrive, tema‑basert (ikkje i token IR)). Å overstyre den flyttar ikkje dei kompilerte tersklane @media/@container oppover.
--pantoken-bp-content-full-width	<length>	98.75em	Verdien til content-full-width-brytpunktet (98.75em, hand-skrive, tema‑basert (ikkje i token IR)). Å overstyre den flyttar ikkje dei kompilerte tersklane @media/@container oppover.
--pantoken-bp-lg	<length>	48em	Verdien til lg-brytpunktet (48em, speglar --instui-component-tray-width-lg). Å overstyre den flyttar ikkje dei kompilerte tersklane @media/@container oppover.
--pantoken-bp-md	<length>	30em	Verdien til md-brytpunktet (30em, speglar --instui-component-tray-width-md). Å overstyre den flyttar ikkje dei kompilerte tersklane @media/@container oppover.
--pantoken-bp-sm	<length>	20em	Verdien til sm-brytpunktet (20em, speglar --instui-component-tray-width-sm). Å overstyre den flyttar ikkje dei kompilerte tersklane @media/@container oppover.
--pantoken-bp-xl	<length>	62em	Verdien til xl-brytpunktet (62em, speglar --instui-component-tray-width-xl). Å overstyre den flyttar ikkje dei kompilerte tersklane @media/@container oppover.
--pantoken-bp-xs	<length>	16em	Verdien til xs-brytpunktet (16em, speglar --instui-component-tray-width-xs). Å overstyre den flyttar ikkje dei kompilerte tersklane @media/@container oppover.

Vilkår

Type	Førespurnad	Skildring
media	(max-width: 16em)	Øvre grense for xs-brytpunktet.
media	(min-width: 16em)	Nedre grense for xs-brytpunktet.
media	(max-width: 20em)	Øvre grense for sm-brytpunktet.
media	(min-width: 20em)	Nedre grense for sm-brytpunktet.
media	(max-width: 30em)	Øvre grense for md-brytpunktet.
media	(min-width: 30em)	Nedre grense for md-brytpunktet.
media	(max-width: 48em)	Øvre grense for lg-brytpunktet.
media	(min-width: 48em)	Nedre grense for lg-brytpunktet.
media	(max-width: 62em)	Øvre grense for xl-brytpunktet.
media	(min-width: 62em)	Nedre grense for xl-brytpunktet.
media	(max-width: 68.75em)	Øvre grense for content-brytpunktet.
media	(min-width: 68.75em)	Nedre grense for content-brytpunktet.
media	(max-width: 98.75em)	Øvre grense for content-full-width-brytpunktet.
media	(min-width: 98.75em)	Nedre grense for content-full-width-brytpunktet.
container	(max-width: 16em)	Øvre grense for xs-brytpunktet, evaluert mot ein merkt behaldar.
container	(min-width: 16em)	Nedre grense for xs-brytpunktet, evaluert mot ein merkt behaldar.
container	(max-width: 20em)	Øvre grense for sm-brytpunktet, evaluert mot ein merkt behaldar.
container	(min-width: 20em)	Nedre grense for sm-brytpunktet, evaluert mot ein merkt behaldar.
container	(max-width: 30em)	Øvre grense for md-avbrotspunktet, evaluert mot ein markert behaldar.
container	(min-width: 30em)	Nedre grense for md-avbrotspunktet, evaluert mot ein markert behaldar.
container	(max-width: 48em)	Øvre grense for lg-avbrotspunktet, evaluert mot ein markert behaldar.
container	(min-width: 48em)	Nedre grense for lg-avbrotspunktet, evaluert mot ein markert behaldar.
container	(max-width: 62em)	Øvre grense for xl-avbrotspunktet, evaluert mot ein markert behaldar.
container	(min-width: 62em)	Nedre grense for xl-avbrotspunktet, evaluert mot ein markert behaldar.
container	(max-width: 68.75em)	Øvre grense for content-avbrotspunktet, evaluert mot ein markert behaldar.
container	(min-width: 68.75em)	Nedre grense for content-avbrotspunktet, evaluert mot ein markert behaldar.
container	(max-width: 98.75em)	Øvre grense for content-full-width-avbrotspunktet, evaluert mot ein markert behaldar.
container	(min-width: 98.75em)	Nedre grense for content-full-width-avbrotspunktet, evaluert mot ein markert behaldar.

Token brukt

Token	Type	Verdi
--instui-component-tray-width-lg	<length>	48em
--instui-component-tray-width-md	<length>	30em
--instui-component-tray-width-sm	<length>	20em
--instui-component-tray-width-xl	<length>	62em
--instui-component-tray-width-xs	<length>	16em