CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Classes d'affichage/masquage selon la largeur du viewport ou du conteneur, sur une échelle de points d'arrêt thématisée.

.instui-hidden-max-<bp>/-hidden-min-<bp> hide by viewport width; .instui-show-max-<bp>/-show-min-<bp> are the inverse (hidden by default, shown only inside the range via display: revert); the -cq- variants react to a .instui-container ancestor's width instead, not the viewport's. Scale tiers xs/sm/md/lg/xl (sourced from the IR's tray-width component tokens) are each aliased to a long-form spelling (x-small–x-large) and a device name (mobile/phablet/tablet/laptop/desktop) — both deprecated in favor of the short name — plus the unscaled, themed content/content-full-width tiers (the main content area's max-width).

Source: index.ts

Utilisation

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

Exemples

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

Modificateurs

Modificateur	Description
.-cq-hidden-max-content	Masquer lorsque le conteneur marqué est à ou en dessous du point d'arrêt content (68.75em).
.-cq-hidden-max-content-full-width	Masquer lorsque le conteneur marqué est à ou en dessous du point d'arrêt content-full-width (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	Masquer lorsque le conteneur marqué est à ou en dessous du point d'arrêt lg (48em).
.-cq-hidden-max-md	Masquer lorsque le conteneur marqué est à ou en dessous du point d'arrêt md (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	Masquer lorsque le conteneur marqué est à ou en dessous du point d'arrêt sm (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	Masquer lorsque le conteneur marqué est à ou en dessous du point d'arrêt xl (62em).
.-cq-hidden-max-xs	Masquer lorsque le conteneur marqué est à ou en dessous du point d'arrêt xs (16em).
.-cq-hidden-min-content	Masquer lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt content (68.75em).
.-cq-hidden-min-content-full-width	Masquer lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt content-full-width (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	Masquer lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt lg (48em).
.-cq-hidden-min-md	Masquer lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt md (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	Masquer lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt sm (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	Masquer lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt xl (62em).
.-cq-hidden-min-xs	Masquer lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt xs (16em).
.-cq-show-max-content	Afficher lorsque le conteneur marqué est à ou en dessous du point d'arrêt content (68.75em); masqué sinon.
.-cq-show-max-content-full-width	Afficher lorsque le conteneur marqué est à ou en dessous du point d'arrêt content-full-width (98.75em); masqué sinon.
.-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	Afficher lorsque le conteneur marqué est à ou en dessous du point d'arrêt lg (48em); masqué sinon.
.-cq-show-max-md	Afficher lorsque le conteneur marqué est à ou en dessous du point d'arrêt md (30em); masqué sinon.
.-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	Afficher lorsque le conteneur marqué est à ou en dessous du point d'arrêt sm (20em); masqué sinon.
.-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	Afficher lorsque le conteneur marqué est à ou en dessous du point d'arrêt xl (62em); masqué sinon.
.-cq-show-max-xs	Afficher lorsque le conteneur marqué est à ou en dessous du point d'arrêt xs (16em); masqué sinon.
.-cq-show-min-content	Afficher lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt content (68.75em); masqué sinon.
.-cq-show-min-content-full-width	Afficher lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt content-full-width (98.75em); masqué sinon.
.-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	Afficher lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt lg (48em); masqué sinon.
.-cq-show-min-md	Afficher lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt md (30em); masqué sinon.
.-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	Afficher lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt sm (20em); masqué sinon.
.-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	Afficher lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt xl (62em); masqué sinon.
.-cq-show-min-xs	Afficher lorsque le conteneur marqué est à ou au‑dessus du point d'arrêt xs (16em); masqué sinon.
.-hidden-max-content	Masquer lorsque la fenêtre d'affichage est à ou en dessous du point d'arrêt content (68.75em).
.-hidden-max-content-full-width	Masquer lorsque la fenêtre d'affichage est à ou en dessous du point d'arrêt content-full-width (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	Masquer lorsque la fenêtre d'affichage est à ou en dessous du point d'arrêt lg (48em).
.-hidden-max-md	Masquer lorsque la fenêtre d'affichage est à ou en dessous du point d'arrêt md (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	Masquer lorsque la fenêtre d'affichage est à ou en dessous du point d'arrêt sm (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	Masquer lorsque la fenêtre d'affichage est à ou en dessous du point d'arrêt xl (62em).
.-hidden-max-xs	Masquer lorsque la fenêtre d'affichage est à ou en dessous du point d'arrêt xs (16em).
.-hidden-min-content	Masquer lorsque la fenêtre d'affichage est à ou au‑dessus du point d'arrêt content (68.75em).
.-hidden-min-content-full-width	Masquer lorsque la fenêtre d'affichage est à ou au‑dessus du point d'arrêt content-full-width (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	Masquer lorsque la fenêtre d'affichage est à ou au‑dessus du point d'arrêt lg (48em).
.-hidden-min-md	Masquer lorsque la fenêtre d'affichage est à ou au‑dessus du point d'arrêt md (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	Masquer lorsque la fenêtre d'affichage est à ou au‑dessus du point d'arrêt sm (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	Masquer lorsque la fenêtre d'affichage est à ou au‑dessus du point d'arrêt xl (62em).
.-hidden-min-xs	Masquer lorsque la fenêtre d'affichage est à ou au‑dessus du point d'arrêt xs (16em).
.-show-max-content	Afficher (inverse de -hidden-min-content) lorsque la fenêtre d'affichage est à ou en dessous du point d'arrêt content (68.75em) ; masqué sinon.
.-show-max-content-full-width	Afficher (inverse de -hidden-min-content-full-width) lorsque la fenêtre d'affichage est à ou en dessous du point d'arrêt content-full-width (98.75em) ; masqué sinon.
.-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	Afficher (inverse de -hidden-min-lg) lorsque la fenêtre d'affichage est à ou en dessous du point d'arrêt lg (48em) ; masqué sinon.
.-show-max-md	Afficher (inverse de -hidden-min-md) lorsque la fenêtre d'affichage est à ou en‑dessous du point de rupture md (30em); masqué sinon.
.-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	Afficher (inverse de -hidden-min-sm) lorsque la fenêtre d'affichage est à ou en‑dessous du point de rupture sm (20em); masqué sinon.
.-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	Afficher (inverse de -hidden-min-xl) lorsque la fenêtre d'affichage est à ou en‑dessous du point de rupture xl (62em); masqué sinon.
.-show-max-xs	Afficher (inverse de -hidden-min-xs) lorsque la fenêtre d'affichage est à ou en‑dessous du point de rupture xs (16em); masqué sinon.
.-show-min-content	Afficher (inverse de -hidden-max-content) lorsque la fenêtre d'affichage est à ou au‑dessus du point de rupture content (68.75em); masqué sinon.
.-show-min-content-full-width	Afficher (inverse de -hidden-max-content-full-width) lorsque la fenêtre d'affichage est à ou au‑dessus du point de rupture content-full-width (98.75em); masqué sinon.
.-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	Afficher (inverse de -hidden-max-lg) lorsque la fenêtre d'affichage est à ou au‑dessus du point de rupture lg (48em); masqué sinon.
.-show-min-md	Afficher (inverse de -hidden-max-md) lorsque la fenêtre d'affichage est à ou au‑dessus du point de rupture md (30em); masqué sinon.
.-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	Afficher (inverse de -hidden-max-sm) lorsque la fenêtre d'affichage est à ou au‑dessus du point de rupture sm (20em); masqué sinon.
.-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	Afficher (inverse de -hidden-max-xl) lorsque la fenêtre d'affichage est à ou au‑dessus du point de rupture xl (62em); masqué sinon.
.-show-min-xs	Afficher (inverse de -hidden-max-xs) lorsque la fenêtre d'affichage est à ou au‑dessus du point de rupture xs (16em); masqué sinon.

Propriétés personnalisées

Propriété	Type	Par défaut	Description
--pantoken-bp-content	<length>	68.75em	La valeur du point de rupture content (68.75em, écrite à la main, thématisée (pas dans l'IR des jetons)). La remplacer n'augmente pas les seuils compilés @media/@container ci‑dessus.
--pantoken-bp-content-full-width	<length>	98.75em	La valeur du point de rupture content-full-width (98.75em, écrite à la main, thématisée (pas dans l'IR des jetons)). La remplacer n'augmente pas les seuils compilés @media/@container ci‑dessus.
--pantoken-bp-lg	<length>	48em	La valeur du point de rupture lg (48em, réplique --instui-component-tray-width-lg). La remplacer n'augmente pas les seuils compilés @media/@container ci‑dessus.
--pantoken-bp-md	<length>	30em	La valeur du point de rupture md (30em, réplique --instui-component-tray-width-md). La remplacer n'augmente pas les seuils compilés @media/@container ci‑dessus.
--pantoken-bp-sm	<length>	20em	La valeur du point de rupture sm (20em, réplique --instui-component-tray-width-sm). La remplacer n'augmente pas les seuils compilés @media/@container ci‑dessus.
--pantoken-bp-xl	<length>	62em	La valeur du point de rupture xl (62em, réplique --instui-component-tray-width-xl). La remplacer n'augmente pas les seuils compilés @media/@container ci‑dessus.
--pantoken-bp-xs	<length>	16em	La valeur du point de rupture xs (16em, réplique --instui-component-tray-width-xs). La remplacer n'augmente pas les seuils compilés @media/@container ci‑dessus.

Conditions

Type	Requête	Description
media	(max-width: 16em)	Limite supérieure du point de rupture xs.
media	(min-width: 16em)	Limite inférieure du point de rupture xs.
media	(max-width: 20em)	Limite supérieure du point de rupture sm.
media	(min-width: 20em)	Limite inférieure du point de rupture sm.
media	(max-width: 30em)	Limite supérieure du point de rupture md.
media	(min-width: 30em)	Limite inférieure du point de rupture md.
media	(max-width: 48em)	Limite supérieure du point de rupture lg.
media	(min-width: 48em)	Limite inférieure du point de rupture lg.
media	(max-width: 62em)	Limite supérieure du point de rupture xl.
media	(min-width: 62em)	Limite inférieure du point de rupture xl.
media	(max-width: 68.75em)	Limite supérieure du point de rupture content.
media	(min-width: 68.75em)	Limite inférieure du point de rupture content.
media	(max-width: 98.75em)	Limite supérieure du point de rupture content-full-width.
media	(min-width: 98.75em)	Limite inférieure du point de rupture content-full-width.
container	(max-width: 16em)	Limite supérieure du point de rupture xs, évaluée par rapport à un conteneur marqué.
container	(min-width: 16em)	Limite inférieure du point de rupture xs, évaluée par rapport à un conteneur marqué.
container	(max-width: 20em)	Limite supérieure du point de rupture sm, évaluée par rapport à un conteneur marqué.
container	(min-width: 20em)	Limite inférieure du point de rupture sm, évaluée par rapport à un conteneur marqué.
container	(max-width: 30em)	Limite supérieure du point de rupture md, évaluée par rapport à un conteneur marqué.
container	(min-width: 30em)	Limite inférieure du point de rupture md, évaluée par rapport à un conteneur marqué.
container	(max-width: 48em)	Limite supérieure du point de rupture lg, évaluée par rapport à un conteneur marqué.
container	(min-width: 48em)	Limite inférieure du point de rupture lg, évaluée par rapport à un conteneur marqué.
container	(max-width: 62em)	Limite supérieure du point de rupture xl, évaluée par rapport à un conteneur marqué.
container	(min-width: 62em)	Limite inférieure du point de rupture xl, évaluée par rapport à un conteneur marqué.
container	(max-width: 68.75em)	Limite supérieure du point de rupture content, évaluée par rapport à un conteneur marqué.
container	(min-width: 68.75em)	Limite inférieure du point de rupture content, évaluée par rapport à un conteneur marqué.
container	(max-width: 98.75em)	Limite supérieure du point de rupture content-full-width, évaluée par rapport à un conteneur marqué.
container	(min-width: 98.75em)	Borne inférieure du point d'arrêt content-full-width, évaluée par rapport à un conteneur marqué.

Tokens consommés

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