CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Vis/skjul-klasser basert på viewport- eller beholderbredde over en tematisk breakpoint-skala.

.instui-hidden-max-<bp>/-hidden-min-<bp> skjuler etter viewport-bredde; .instui-show-max-<bp>/-show-min-<bp> er den inverse (skjult som standard, vist bare innenfor området via display: revert); -cq--variantene reagerer i stedet på en .instui-container-forfaders bredde, ikke viewportens. Skala-trinnene xs/sm/md/lg/xl (hentet fra IRs tray-width-komponenttokener) har hver en alias til en langt-form stavemåte (x-small–x-large) og et enhetsnavn (mobile/phablet/tablet/laptop/desktop) — begge foreldet til fordel for kortnavnet — pluss de uskalede, tematiserte content/content-full-width-trinnene (hovedinnholdsområdets maks-bredde).

Source: index.ts

Bruk

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

Eksempler

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

Modifikatorer

Modifikator	Beskrivelse
.-cq-hidden-max-content	Skjul når den markerte beholderen er ved eller under content-breakpointet (68.75em).
.-cq-hidden-max-content-full-width	Skjul når den markerte beholderen er ved eller under content-full-width-breakpointet (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 beholderen er ved eller under lg-breakpointet (48em).
.-cq-hidden-max-md	Skjul når den markerte beholderen er ved eller under md-breakpointet (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 beholderen er ved eller under sm-breakpointet (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 beholderen er ved eller under xl-breakpointet (62em).
.-cq-hidden-max-xs	Skjul når den markerte beholderen er ved eller under xs-breakpointet (16em).
.-cq-hidden-min-content	Skjul når den markerte beholderen er ved eller over content-breakpointet (68.75em).
.-cq-hidden-min-content-full-width	Skjul når den markerte beholderen er ved eller over content-full-width-breakpointet (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 beholderen er ved eller over lg-breakpointet (48em).
.-cq-hidden-min-md	Skjul når den markerte beholderen er ved eller over md-breakpointet (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 beholderen er ved eller over sm-breakpointet (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 beholderen er ved eller over xl-breakpointet (62em).
.-cq-hidden-min-xs	Skjul når den markerte beholderen er ved eller over xs-breakpointet (16em).
.-cq-show-max-content	Vis når den markerte beholderen er ved eller under content-breakpointet (68.75em); ellers skjult.
.-cq-show-max-content-full-width	Vis når den markerte beholderen er ved eller under content-full-width-breakpointet (98.75em); ellers skjult.
.-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 beholderen er ved eller under lg-breakpointet (48em); ellers skjult.
.-cq-show-max-md	Vis når den markerte beholderen er ved eller under md-breakpointet (30em); ellers skjult.
.-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 beholderen er ved eller under sm-breakpointet (20em); ellers skjult.
.-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 beholderen er ved eller under xl-breakpointet (62em); ellers skjult.
.-cq-show-max-xs	Vis når den markerte beholderen er ved eller under xs-breakpointet (16em); ellers skjult.
.-cq-show-min-content	Vis når den markerte beholderen er ved eller over content-breakpointet (68.75em); ellers skjult.
.-cq-show-min-content-full-width	Vis når den markerte beholderen er ved eller over content-full-width-breakpointet (98.75em); ellers skjult.
.-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 beholderen er ved eller over lg-breakpointet (48em); ellers skjult.
.-cq-show-min-md	Vis når den markerte beholderen er ved eller over md-breakpointet (30em); ellers skjult.
.-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 beholderen er ved eller over sm-breakpointet (20em); ellers skjult.
.-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 beholderen er ved eller over xl-breakpointet (62em); ellers skjult.
.-cq-show-min-xs	Vis når den markerte beholderen er ved eller over xs-breakpointet (16em); ellers skjult.
.-hidden-max-content	Skjul når viewporten er ved eller under content-breakpointet (68.75em).
.-hidden-max-content-full-width	Skjul når viewporten er ved eller under content-full-width-breakpointet (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 viewporten er ved eller under lg-breakpointet (48em).
.-hidden-max-md	Skjul når viewporten er ved eller under md-breakpointet (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 viewporten er ved eller under sm-breakpointet (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 viewporten er ved eller under xl-breakpointet (62em).
.-hidden-max-xs	Skjul når viewporten er ved eller under xs-breakpointet (16em).
.-hidden-min-content	Skjul når viewporten er ved eller over content-breakpointet (68.75em).
.-hidden-min-content-full-width	Skjul når viewporten er ved eller over content-full-width-breakpointet (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 viewporten er ved eller over lg-breakpointet (48em).
.-hidden-min-md	Skjul når visningsvinduet 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 visningsvinduet 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 visningsvinduet er på eller over xl-brytpunktet (62em).
.-hidden-min-xs	Skjul når visningsvinduet er på eller over xs-brytpunktet (16em).
.-show-max-content	Vis (motsatt av -hidden-min-content) når visningsvinduet er på eller under content-brytpunktet (68.75em); ellers skjult.
.-show-max-content-full-width	Vis (motsatt av -hidden-min-content-full-width) når visningsvinduet 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 (motsatt av -hidden-min-lg) når visningsvinduet er på eller under lg-brytpunktet (48em); ellers skjult.
.-show-max-md	Vis (motsatt av -hidden-min-md) når visningsvinduet 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 (motsatt av -hidden-min-sm) når visningsvinduet 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 (motsatt av -hidden-min-xl) når visningsvinduet er på eller under xl-brytpunktet (62em); ellers skjult.
.-show-max-xs	Vis (motsatt av -hidden-min-xs) når visningsvinduet er på eller under xs-brytpunktet (16em); ellers skjult.
.-show-min-content	Vis (motsatt av -hidden-max-content) når visningsvinduet er på eller over content-brytpunktet (68.75em); ellers skjult.
.-show-min-content-full-width	Vis (motsatt av -hidden-max-content-full-width) når visningsvinduet 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 (motsatt av -hidden-max-lg) når visningsvinduet er på eller over lg-brytpunktet (48em); ellers skjult.
.-show-min-md	Vis (motsatt av -hidden-max-md) når visningsvinduet 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 (motsatt av -hidden-max-sm) når visningsvinduet 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 (motsatt av -hidden-max-xl) når visningsvinduet er på eller over xl-brytpunktet (62em); ellers skjult.
.-show-min-xs	Vis (motsatt av -hidden-max-xs) når visningsvinduet er på eller over xs-brytpunktet (16em); ellers skjult.

Egendefinerte egenskaper

Egenskap	Type	Standard	Beskrivelse
--pantoken-bp-content	<length>	68.75em	Verdien for content-brytpunktet (68.75em, manuelt opprettet, tematisert (ikke i token-IR)). Å overstyre den flytter ikke de kompilerte terskelverdiene @media/@container opp.
--pantoken-bp-content-full-width	<length>	98.75em	Verdien for content-full-width-brytpunktet (98.75em, manuelt opprettet, tematisert (ikke i token-IR)). Å overstyre den flytter ikke de kompilerte terskelverdiene @media/@container opp.
--pantoken-bp-lg	<length>	48em	Verdien for lg-brytpunktet (48em, speiler --instui-component-tray-width-lg). Å overstyre den flytter ikke de kompilerte terskelverdiene @media/@container opp.
--pantoken-bp-md	<length>	30em	Verdien for md-brytpunktet (30em, speiler --instui-component-tray-width-md). Å overstyre den flytter ikke de kompilerte terskelverdiene @media/@container opp.
--pantoken-bp-sm	<length>	20em	Verdien for sm-brytpunktet (20em, speiler --instui-component-tray-width-sm). Å overstyre den flytter ikke de kompilerte terskelverdiene @media/@container opp.
--pantoken-bp-xl	<length>	62em	Verdien for xl-brytpunktet (62em, speiler --instui-component-tray-width-xl). Å overstyre den flytter ikke de kompilerte terskelverdiene @media/@container opp.
--pantoken-bp-xs	<length>	16em	Verdien for xs-brytpunktet (16em, speiler --instui-component-tray-width-xs). Å overstyre den flytter ikke de kompilerte terskelverdiene @media/@container opp.

Betingelser

Type	Spørring	Beskrivelse
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 en markert beholder.
container	(min-width: 16em)	Nedre grense for xs-brytpunktet, evaluert mot en markert beholder.
container	(max-width: 20em)	Øvre grense for sm-brytpunktet, evaluert mot en markert beholder.
container	(min-width: 20em)	Nedre grense for sm-brytpunktet, evaluert mot en markert beholder.
container	(max-width: 30em)	Øvre grense for md breakpoint, evaluert mot en markert beholder.
container	(min-width: 30em)	Nedre grense for md breakpoint, evaluert mot en markert beholder.
container	(max-width: 48em)	Øvre grense for lg breakpoint, evaluert mot en markert beholder.
container	(min-width: 48em)	Nedre grense for lg breakpoint, evaluert mot en markert beholder.
container	(max-width: 62em)	Øvre grense for xl breakpoint, evaluert mot en markert beholder.
container	(min-width: 62em)	Nedre grense for xl breakpoint, evaluert mot en markert beholder.
container	(max-width: 68.75em)	Øvre grense for content breakpoint, evaluert mot en markert beholder.
container	(min-width: 68.75em)	Nedre grense for content breakpoint, evaluert mot en markert beholder.
container	(max-width: 98.75em)	Øvre grense for content-full-width breakpoint, evaluert mot en markert beholder.
container	(min-width: 98.75em)	Nedre grense for content-full-width breakpoint, evaluert mot en markert beholder.

Forbrukte tokens

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