CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Toon-/verberg-klassen op basis van viewport- of containerbreedte over een gethematiseerde breakpoint-schaal.

.instui-hidden-max-<bp>/-hidden-min-<bp> verbergen op basis van viewportbreedte; .instui-show-max-<bp>/-show-min-<bp> zijn het omgekeerde (standaard verborgen, alleen binnen het bereik zichtbaar via display: revert); de -cq--varianten reageren in plaats daarvan op de breedte van een .instui-container-voorouder, niet op die van de viewport. Schaalniveaus xs/sm/md/lg/xl (gehaald uit de IR's tray-width component-tokens) hebben elk een alias naar een lange vorm (x-small–x-large) en een apparaatsnaam (mobile/phablet/tablet/laptop/desktop) — beide verouderd ten gunste van de korte naam — plus de ongeschaalde, gethematiseerde content/content-full-width-niveaus (de max-breedte van het hoofdcontentgebied).

Source: index.ts

Gebruik

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

Voorbeelden

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

Modifiers

Modifier	Beschrijving
.-cq-hidden-max-content	Verberg wanneer de gemarkeerde container zich op of onder het content-breakpoint bevindt (68.75em).
.-cq-hidden-max-content-full-width	Verberg wanneer de gemarkeerde container zich op of onder het content-full-width-breakpoint bevindt (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	Verberg wanneer de gemarkeerde container zich op of onder het lg-breakpoint bevindt (48em).
.-cq-hidden-max-md	Verberg wanneer de gemarkeerde container zich op of onder het md-breakpoint bevindt (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	Verberg wanneer de gemarkeerde container zich op of onder het sm-breakpoint bevindt (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	Verberg wanneer de gemarkeerde container zich op of onder het xl-breakpoint bevindt (62em).
.-cq-hidden-max-xs	Verberg wanneer de gemarkeerde container zich op of onder het xs-breakpoint bevindt (16em).
.-cq-hidden-min-content	Verberg wanneer de gemarkeerde container zich op of boven het content-breakpoint bevindt (68.75em).
.-cq-hidden-min-content-full-width	Verberg wanneer de gemarkeerde container zich op of boven het content-full-width-breakpoint bevindt (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	Verberg wanneer de gemarkeerde container zich op of boven het lg-breakpoint bevindt (48em).
.-cq-hidden-min-md	Verberg wanneer de gemarkeerde container zich op of boven het md-breakpoint bevindt (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	Verberg wanneer de gemarkeerde container zich op of boven het sm-breakpoint bevindt (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	Verberg wanneer de gemarkeerde container zich op of boven het xl-breakpoint bevindt (62em).
.-cq-hidden-min-xs	Verberg wanneer de gemarkeerde container zich op of boven het xs-breakpoint bevindt (16em).
.-cq-show-max-content	Toon wanneer de gemarkeerde container zich op of onder het content-breakpoint bevindt (68.75em); anders verborgen.
.-cq-show-max-content-full-width	Toon wanneer de gemarkeerde container zich op of onder het content-full-width-breakpoint bevindt (98.75em); anders verborgen.
.-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	Toon wanneer de gemarkeerde container zich op of onder het lg-breakpoint bevindt (48em); anders verborgen.
.-cq-show-max-md	Toon wanneer de gemarkeerde container zich op of onder het md-breakpoint bevindt (30em); anders verborgen.
.-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	Toon wanneer de gemarkeerde container zich op of onder het sm-breakpoint bevindt (20em); anders verborgen.
.-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	Toon wanneer de gemarkeerde container zich op of onder het xl-breakpoint bevindt (62em); anders verborgen.
.-cq-show-max-xs	Toon wanneer de gemarkeerde container zich op of onder het xs-breakpoint bevindt (16em); anders verborgen.
.-cq-show-min-content	Toon wanneer de gemarkeerde container zich op of boven het content-breakpoint bevindt (68.75em); anders verborgen.
.-cq-show-min-content-full-width	Toon wanneer de gemarkeerde container zich op of boven het content-full-width-breakpoint bevindt (98.75em); anders verborgen.
.-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	Toon wanneer de gemarkeerde container zich op of boven het lg-breakpoint bevindt (48em); anders verborgen.
.-cq-show-min-md	Toon wanneer de gemarkeerde container zich op of boven het md-breakpoint bevindt (30em); anders verborgen.
.-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	Toon wanneer de gemarkeerde container zich op of boven het sm-breakpoint bevindt (20em); anders verborgen.
.-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	Toon wanneer de gemarkeerde container zich op of boven het xl-breakpoint bevindt (62em); anders verborgen.
.-cq-show-min-xs	Toon wanneer de gemarkeerde container zich op of boven het xs-breakpoint bevindt (16em); anders verborgen.
.-hidden-max-content	Verberg wanneer de viewport zich op of onder het content-breakpoint bevindt (68.75em).
.-hidden-max-content-full-width	Verberg wanneer de viewport zich op of onder het content-full-width-breakpoint bevindt (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	Verberg wanneer de viewport zich op of onder het lg-breakpoint bevindt (48em).
.-hidden-max-md	Verberg wanneer de viewport zich op of onder het md-breakpoint bevindt (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	Verberg wanneer de viewport zich op of onder het sm-breakpoint bevindt (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	Verberg wanneer de viewport zich op of onder het xl-breakpoint bevindt (62em).
.-hidden-max-xs	Verberg wanneer de viewport zich op of onder het xs-breakpoint bevindt (16em).
.-hidden-min-content	Verberg wanneer de viewport zich op of boven het content-breakpoint bevindt (68.75em).
.-hidden-min-content-full-width	Verberg wanneer de viewport zich op of boven het content-full-width-breakpoint bevindt (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	Verberg wanneer de viewport zich op of boven het lg-breakpoint bevindt (48em).
.-hidden-min-md	Verbergen wanneer de viewport op of boven de md breakpoint is (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	Verbergen wanneer de viewport op of boven de sm breakpoint is (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	Verbergen wanneer de viewport op of boven de xl breakpoint is (62em).
.-hidden-min-xs	Verbergen wanneer de viewport op of boven de xs breakpoint is (16em).
.-show-max-content	Tonen (inverse van -hidden-min-content) wanneer de viewport op of onder de content breakpoint is (68.75em); anders verborgen.
.-show-max-content-full-width	Tonen (inverse van -hidden-min-content-full-width) wanneer de viewport op of onder de content-full-width breakpoint is (98.75em); anders verborgen.
.-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	Tonen (inverse van -hidden-min-lg) wanneer de viewport op of onder de lg breakpoint is (48em); anders verborgen.
.-show-max-md	Tonen (inverse van -hidden-min-md) wanneer de viewport op of onder de md breakpoint is (30em); anders verborgen.
.-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	Tonen (inverse van -hidden-min-sm) wanneer de viewport op of onder de sm breakpoint is (20em); anders verborgen.
.-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	Tonen (inverse van -hidden-min-xl) wanneer de viewport op of onder de xl breakpoint is (62em); anders verborgen.
.-show-max-xs	Tonen (inverse van -hidden-min-xs) wanneer de viewport op of onder de xs breakpoint is (16em); anders verborgen.
.-show-min-content	Tonen (inverse van -hidden-max-content) wanneer de viewport op of boven de content breakpoint is (68.75em); anders verborgen.
.-show-min-content-full-width	Tonen (inverse van -hidden-max-content-full-width) wanneer de viewport op of boven de content-full-width breakpoint is (98.75em); anders verborgen.
.-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	Tonen (inverse van -hidden-max-lg) wanneer de viewport op of boven de lg breakpoint is (48em); anders verborgen.
.-show-min-md	Tonen (inverse van -hidden-max-md) wanneer de viewport op of boven de md breakpoint is (30em); anders verborgen.
.-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	Tonen (inverse van -hidden-max-sm) wanneer de viewport op of boven de sm breakpoint is (20em); anders verborgen.
.-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	Tonen (inverse van -hidden-max-xl) wanneer de viewport op of boven de xl breakpoint is (62em); anders verborgen.
.-show-min-xs	Tonen (inverse van -hidden-max-xs) wanneer de viewport op of boven de xs breakpoint is (16em); anders verborgen.

Aangepaste eigenschappen

Eigenschap	Type	Standaard	Beschrijving
--pantoken-bp-content	<length>	68.75em	De waarde van de content breakpoint (68.75em, handgemaakt, gethematiseerd (niet in de token-IR)). Het overschrijven ervan verplaatst de gecompileerde drempels @media/@container niet naar boven.
--pantoken-bp-content-full-width	<length>	98.75em	De waarde van de content-full-width breakpoint (98.75em, handgemaakt, gethematiseerd (niet in de token-IR)). Het overschrijven ervan verplaatst de gecompileerde drempels @media/@container niet naar boven.
--pantoken-bp-lg	<length>	48em	De waarde van de lg breakpoint (48em, weerspiegelt --instui-component-tray-width-lg). Het overschrijven ervan verplaatst de gecompileerde drempels @media/@container niet naar boven.
--pantoken-bp-md	<length>	30em	De waarde van de md breakpoint (30em, weerspiegelt --instui-component-tray-width-md). Het overschrijven ervan verplaatst de gecompileerde drempels @media/@container niet naar boven.
--pantoken-bp-sm	<length>	20em	De waarde van de sm breakpoint (20em, weerspiegelt --instui-component-tray-width-sm). Het overschrijven ervan verplaatst de gecompileerde drempels @media/@container niet naar boven.
--pantoken-bp-xl	<length>	62em	De waarde van de xl breakpoint (62em, weerspiegelt --instui-component-tray-width-xl). Het overschrijven ervan verplaatst de gecompileerde drempels @media/@container niet naar boven.
--pantoken-bp-xs	<length>	16em	De waarde van de xs breakpoint (16em, weerspiegelt --instui-component-tray-width-xs). Het overschrijven ervan verplaatst de gecompileerde drempels @media/@container niet naar boven.

Voorwaarden

Type	Zoekopdracht	Beschrijving
media	(max-width: 16em)	Bovengrens van de xs breakpoint.
media	(min-width: 16em)	Ondergrens van de xs breakpoint.
media	(max-width: 20em)	Bovengrens van de sm breakpoint.
media	(min-width: 20em)	Ondergrens van de sm breakpoint.
media	(max-width: 30em)	Bovengrens van de md breakpoint.
media	(min-width: 30em)	Ondergrens van de md breakpoint.
media	(max-width: 48em)	Bovengrens van de lg breakpoint.
media	(min-width: 48em)	Ondergrens van de lg breakpoint.
media	(max-width: 62em)	Bovengrens van de xl breakpoint.
media	(min-width: 62em)	Ondergrens van de xl breakpoint.
media	(max-width: 68.75em)	Bovengrens van de content breakpoint.
media	(min-width: 68.75em)	Ondergrens van de content breakpoint.
media	(max-width: 98.75em)	Bovengrens van de content-full-width breakpoint.
media	(min-width: 98.75em)	Ondergrens van de content-full-width breakpoint.
container	(max-width: 16em)	Bovengrens van de xs breakpoint, geëvalueerd tegen een gemarkeerde container.
container	(min-width: 16em)	Ondergrens van de xs breakpoint, geëvalueerd tegen een gemarkeerde container.
container	(max-width: 20em)	Bovengrens van de sm breakpoint, geëvalueerd tegen een gemarkeerde container.
container	(min-width: 20em)	Ondergrens van de sm breakpoint, geëvalueerd tegen een gemarkeerde container.
container	(max-width: 30em)	Bovengrens van de md breakpoint, geëvalueerd ten opzichte van een gemarkeerde container.
container	(min-width: 30em)	Ondergrens van de md breakpoint, geëvalueerd ten opzichte van een gemarkeerde container.
container	(max-width: 48em)	Bovengrens van de lg breakpoint, geëvalueerd ten opzichte van een gemarkeerde container.
container	(min-width: 48em)	Ondergrens van de lg breakpoint, geëvalueerd ten opzichte van een gemarkeerde container.
container	(max-width: 62em)	Bovengrens van de xl breakpoint, geëvalueerd ten opzichte van een gemarkeerde container.
container	(min-width: 62em)	Ondergrens van de xl breakpoint, geëvalueerd ten opzichte van een gemarkeerde container.
container	(max-width: 68.75em)	Bovengrens van de content breakpoint, geëvalueerd ten opzichte van een gemarkeerde container.
container	(min-width: 68.75em)	Ondergrens van de content breakpoint, geëvalueerd ten opzichte van een gemarkeerde container.
container	(max-width: 98.75em)	Bovengrens van de content-full-width breakpoint, geëvalueerd ten opzichte van een gemarkeerde container.
container	(min-width: 98.75em)	Ondergrens van de content-full-width breakpoint, geëvalueerd ten opzichte van een gemarkeerde container.

Gebruikte tokens

Token	Type	Waarde
--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