CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Classes de mostrar/ocultar segons l'amplada de la finestra o del contenidor dins d'una escala de punts de tall temàtics.

.instui-hidden-max-<bp>/-hidden-min-<bp> oculten segons l'amplada de la finestra; .instui-show-max-<bp>/-show-min-<bp> són l'invers (ocults per defecte, mostrats només dins del rang amb display: revert); les variants -cq- reaccionen a l'amplada d'un ancestre .instui-container en lloc de la finestra. Els nivells de l'escala xs/sm/md/lg/xl (provints dels tokens del component tray-width de l'IR) tenen cada un un àlies amb l'escriptura llarga (x-small–x-large) i un nom de dispositiu (mobile/phablet/tablet/laptop/desktop) — ambdós obsolets en favor del nom curt — més els nivells temàtics no escalats content/content-full-width (l'amplada màxima de l'àrea de contingut principal).

Source: index.ts

Ús

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

Modificadors

Modificador	Descripció
.-cq-hidden-max-content	Oculta quan el contenidor marcat està a o per sota del punt de tall content (68.75em).
.-cq-hidden-max-content-full-width	Oculta quan el contenidor marcat està a o per sota del punt de tall 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	Oculta quan el contenidor marcat està a o per sota del punt de tall lg (48em).
.-cq-hidden-max-md	Oculta quan el contenidor marcat està a o per sota del punt de tall 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	Oculta quan el contenidor marcat està a o per sota del punt de tall 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	Oculta quan el contenidor marcat està a o per sota del punt de tall xl (62em).
.-cq-hidden-max-xs	Oculta quan el contenidor marcat està a o per sota del punt de tall xs (16em).
.-cq-hidden-min-content	Oculta quan el contenidor marcat està a o per sobre del punt de tall content (68.75em).
.-cq-hidden-min-content-full-width	Oculta quan el contenidor marcat està a o per sobre del punt de tall 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	Oculta quan el contenidor marcat està a o per sobre del punt de tall lg (48em).
.-cq-hidden-min-md	Oculta quan el contenidor marcat està a o per sobre del punt de tall 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	Oculta quan el contenidor marcat està a o per sobre del punt de tall 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	Oculta quan el contenidor marcat està a o per sobre del punt de tall xl (62em).
.-cq-hidden-min-xs	Oculta quan el contenidor marcat està a o per sobre del punt de tall xs (16em).
.-cq-show-max-content	Mostra quan el contenidor marcat està a o per sota del punt de tall content (68.75em); ocult en cas contrari.
.-cq-show-max-content-full-width	Mostra quan el contenidor marcat està a o per sota del punt de tall content-full-width (98.75em); ocult en cas contrari.
.-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	Mostra quan el contenidor marcat està a o per sota del punt de tall lg (48em); ocult en cas contrari.
.-cq-show-max-md	Mostra quan el contenidor marcat està a o per sota del punt de tall md (30em); ocult en cas contrari.
.-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	Mostra quan el contenidor marcat està a o per sota del punt de tall sm (20em); ocult en cas contrari.
.-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	Mostra quan el contenidor marcat està a o per sota del punt de tall xl (62em); ocult en cas contrari.
.-cq-show-max-xs	Mostra quan el contenidor marcat està a o per sota del punt de tall xs (16em); ocult en cas contrari.
.-cq-show-min-content	Mostra quan el contenidor marcat està a o per sobre del punt de tall content (68.75em); ocult en cas contrari.
.-cq-show-min-content-full-width	Mostra quan el contenidor marcat està a o per sobre del punt de tall content-full-width (98.75em); ocult en cas contrari.
.-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	Mostra quan el contenidor marcat està a o per sobre del punt de tall lg (48em); ocult en cas contrari.
.-cq-show-min-md	Mostra quan el contenidor marcat està a o per sobre del punt de tall md (30em); ocult en cas contrari.
.-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	Mostra quan el contenidor marcat està a o per sobre del punt de tall sm (20em); ocult en cas contrari.
.-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	Mostra quan el contenidor marcat està a o per sobre del punt de tall xl (62em); ocult en cas contrari.
.-cq-show-min-xs	Mostra quan el contenidor marcat està a o per sobre del punt de tall xs (16em); ocult en cas contrari.
.-hidden-max-content	Oculta quan la finestra està a o per sota del punt de tall content (68.75em).
.-hidden-max-content-full-width	Oculta quan la finestra està a o per sota del punt de tall 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	Oculta quan la finestra està a o per sota del punt de tall lg (48em).
.-hidden-max-md	Oculta quan la finestra està a o per sota del punt de tall 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	Oculta quan la finestra està a o per sota del punt de tall 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	Oculta quan la finestra està a o per sota del punt de tall xl (62em).
.-hidden-max-xs	Oculta quan la finestra està a o per sota del punt de tall xs (16em).
.-hidden-min-content	Oculta quan la finestra està a o per sobre del punt de tall content (68.75em).
.-hidden-min-content-full-width	Oculta quan la finestra està a o per sobre del punt de tall 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	Oculta quan la finestra està a o per sobre del punt de tall lg (48em).
.-hidden-min-md	Oculta quan la finestra de visualització està a o per sobre del punt de trencament 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	Oculta quan la finestra de visualització està a o per sobre del punt de trencament 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	Oculta quan la finestra de visualització està a o per sobre del punt de trencament xl (62em).
.-hidden-min-xs	Oculta quan la finestra de visualització està a o per sobre del punt de trencament xs (16em).
.-show-max-content	Mostra (invers de -hidden-min-content) quan la finestra de visualització està a o per sota del punt de trencament content (68.75em); amagat en cas contrari.
.-show-max-content-full-width	Mostra (invers de -hidden-min-content-full-width) quan la finestra de visualització està a o per sota del punt de trencament content-full-width (98.75em); amagat en cas contrari.
.-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	Mostra (invers de -hidden-min-lg) quan la finestra de visualització està a o per sota del punt de trencament lg (48em); amagat en cas contrari.
.-show-max-md	Mostra (invers de -hidden-min-md) quan la finestra de visualització està a o per sota del punt de trencament md (30em); amagat en cas contrari.
.-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	Mostra (invers de -hidden-min-sm) quan la finestra de visualització està a o per sota del punt de trencament sm (20em); amagat en cas contrari.
.-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	Mostra (invers de -hidden-min-xl) quan la finestra de visualització està a o per sota del punt de trencament xl (62em); amagat en cas contrari.
.-show-max-xs	Mostra (invers de -hidden-min-xs) quan la finestra de visualització està a o per sota del punt de trencament xs (16em); amagat en cas contrari.
.-show-min-content	Mostra (invers de -hidden-max-content) quan la finestra de visualització està a o per sobre del punt de trencament content (68.75em); amagat en cas contrari.
.-show-min-content-full-width	Mostra (invers de -hidden-max-content-full-width) quan la finestra de visualització està a o per sobre del punt de trencament content-full-width (98.75em); amagat en cas contrari.
.-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	Mostra (invers de -hidden-max-lg) quan la finestra de visualització està a o per sobre del punt de trencament lg (48em); amagat en cas contrari.
.-show-min-md	Mostra (invers de -hidden-max-md) quan la finestra de visualització està a o per sobre del punt de trencament md (30em); amagat en cas contrari.
.-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	Mostra (invers de -hidden-max-sm) quan la finestra de visualització està a o per sobre del punt de trencament sm (20em); amagat en cas contrari.
.-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	Mostra (invers de -hidden-max-xl) quan la finestra de visualització està a o per sobre del punt de trencament xl (62em); amagat en cas contrari.
.-show-min-xs	Mostra (invers de -hidden-max-xs) quan la finestra de visualització està a o per sobre del punt de trencament xs (16em); amagat en cas contrari.

Propietats personalitzades

Propietat	Tipus	Predeterminat	Descripció
--pantoken-bp-content	<length>	68.75em	El valor del punt de trencament content (68.75em, escrit a mà, amb tema (no està en l'IR de tokens)). Sobrescriure'l no mou cap dels llindars compilats @media/@container per sobre.
--pantoken-bp-content-full-width	<length>	98.75em	El valor del punt de trencament content-full-width (98.75em, escrit a mà, amb tema (no està en l'IR de tokens)). Sobrescriure'l no mou cap dels llindars compilats @media/@container per sobre.
--pantoken-bp-lg	<length>	48em	El valor del punt de trencament lg (48em, reflecteix --instui-component-tray-width-lg). Sobrescriure'l no mou cap dels llindars compilats @media/@container per sobre.
--pantoken-bp-md	<length>	30em	El valor del punt de trencament md (30em, reflecteix --instui-component-tray-width-md). Sobrescriure'l no mou cap dels llindars compilats @media/@container per sobre.
--pantoken-bp-sm	<length>	20em	El valor del punt de trencament sm (20em, reflecteix --instui-component-tray-width-sm). Sobrescriure'l no mou cap dels llindars compilats @media/@container per sobre.
--pantoken-bp-xl	<length>	62em	El valor del punt de trencament xl (62em, reflecteix --instui-component-tray-width-xl). Sobrescriure'l no mou cap dels llindars compilats @media/@container per sobre.
--pantoken-bp-xs	<length>	16em	El valor del punt de trencament xs (16em, reflecteix --instui-component-tray-width-xs). Sobrescriure'l no mou cap dels llindars compilats @media/@container per sobre.

Condicions

Tipus	Consulta	Descripció
media	(max-width: 16em)	Límit superior del punt de trencament xs.
media	(min-width: 16em)	Límit inferior del punt de trencament xs.
media	(max-width: 20em)	Límit superior del punt de trencament sm.
media	(min-width: 20em)	Límit inferior del punt de trencament sm.
media	(max-width: 30em)	Límit superior del punt de trencament md.
media	(min-width: 30em)	Límit inferior del punt de trencament md.
media	(max-width: 48em)	Límit superior del punt de trencament lg.
media	(min-width: 48em)	Límit inferior del punt de trencament lg.
media	(max-width: 62em)	Límit superior del punt de trencament xl.
media	(min-width: 62em)	Límit inferior del punt de trencament xl.
media	(max-width: 68.75em)	Límit superior del punt de trencament content.
media	(min-width: 68.75em)	Límit inferior del punt de trencament content.
media	(max-width: 98.75em)	Límit superior del punt de trencament content-full-width.
media	(min-width: 98.75em)	Límit inferior del punt de trencament content-full-width.
container	(max-width: 16em)	Límit superior del punt de trencament xs, avaluat respecte d'un contenidor marcat.
container	(min-width: 16em)	Límit inferior del punt de trencament xs, avaluat respecte d'un contenidor marcat.
container	(max-width: 20em)	Límit superior del punt de trencament sm, avaluat respecte d'un contenidor marcat.
container	(min-width: 20em)	Límit inferior del punt de trencament sm, avaluat respecte d'un contenidor marcat.
container	(max-width: 30em)	Límite superior del punt d'interrupció md, avaluat respecte a un contenidor marcat.
container	(min-width: 30em)	Límite inferior del punt d'interrupció md, avaluat respecte a un contenidor marcat.
container	(max-width: 48em)	Límite superior del punt d'interrupció lg, avaluat respecte a un contenidor marcat.
container	(min-width: 48em)	Límite inferior del punt d'interrupció lg, avaluat respecte a un contenidor marcat.
container	(max-width: 62em)	Límite superior del punt d'interrupció xl, avaluat respecte a un contenidor marcat.
container	(min-width: 62em)	Límite inferior del punt d'interrupció xl, avaluat respecte a un contenidor marcat.
container	(max-width: 68.75em)	Límite superior del punt d'interrupció content, avaluat respecte a un contenidor marcat.
container	(min-width: 68.75em)	Límite inferior del punt d'interrupció content, avaluat respecte a un contenidor marcat.
container	(max-width: 98.75em)	Límite superior del punt d'interrupció content-full-width, avaluat respecte a un contenidor marcat.
container	(min-width: 98.75em)	Límite inferior del punt d'interrupció content-full-width, avaluat respecte a un contenidor marcat.

Tokens consumits

Token	Tipus	Valor
--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