CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Clases de mostrar/ocultar según el ancho del viewport o del contenedor en una escala de puntos de interrupción tematizada.

.instui-hidden-max-<bp>/-hidden-min-<bp> ocultan según el ancho del viewport; .instui-show-max-<bp>/-show-min-<bp> son el inverso (ocultos por defecto, mostrados solo dentro del rango mediante display: revert); las variantes -cq- reaccionan al ancho de un ancestro .instui-container en su lugar, no al del viewport. Los niveles de escala xs/sm/md/lg/xl (obtenidos de los tokens del componente tray-width del IR) están cada uno aliasados a una escritura en forma larga (x-small–x-large) y a un nombre de dispositivo (mobile/phablet/tablet/laptop/desktop) —ambos obsoletos a favor del nombre corto— además de los niveles tematizados sin escala content/content-full-width (la anchura máxima del área de contenido principal).

Source: index.ts

Uso

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

Ejemplos

<div class="instui-hidden-max-sm">Oculto en o por debajo del punto de interrupción pequeño.</div>
<div class="instui-show-min-sm">Mostrado solo en o por encima del punto de interrupción pequeño.</div>

Modificadores

Modificador	Descripción
.-cq-hidden-max-content	Ocultar cuando el contenedor marcado esté en o por debajo del punto de interrupción content (68.75em).
.-cq-hidden-max-content-full-width	Ocultar cuando el contenedor marcado esté en o por debajo del punto de interrupción 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	Ocultar cuando el contenedor marcado esté en o por debajo del punto de interrupción lg (48em).
.-cq-hidden-max-md	Ocultar cuando el contenedor marcado esté en o por debajo del punto de interrupción lg (48em).
.-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	Ocultar cuando el contenedor marcado esté en o por debajo del punto de interrupción 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	Ocultar cuando el contenedor marcado esté en o por debajo del punto de interrupción xl (62em).
.-cq-hidden-max-xs	Ocultar cuando el contenedor marcado esté en o por debajo del punto de interrupción sm (20em).
.-cq-hidden-min-content	Ocultar cuando el contenedor marcado esté en o por encima del punto de interrupción content (68.75em).
.-cq-hidden-min-content-full-width	Ocultar cuando el contenedor marcado esté en o por encima del punto de interrupción 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	Ocultar cuando el contenedor marcado esté en o por encima del punto de interrupción lg (48em).
.-cq-hidden-min-md	Ocultar cuando el contenedor marcado esté en o por encima del punto de interrupción lg (48em).
.-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	Ocultar cuando el contenedor marcado esté en o por encima del punto de interrupción 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	Ocultar cuando el contenedor marcado esté en o por encima del punto de interrupción xl (62em).
.-cq-hidden-min-xs	Ocultar cuando el contenedor marcado esté en o por encima del punto de interrupción sm (20em).
.-cq-show-max-content	Mostrar cuando el contenedor marcado esté en o por debajo del punto de interrupción content (68.75em); oculto de lo contrario.
.-cq-show-max-content-full-width	Mostrar cuando el contenedor marcado esté en o por debajo del punto de interrupción content-full-width (98.75em); oculto de lo contrario.
.-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	Mostrar cuando el contenedor marcado esté en o por debajo del punto de interrupción lg (48em); oculto de lo contrario.
.-cq-show-max-md	Mostrar cuando el contenedor marcado esté en o por debajo del punto de interrupción lg (48em); oculto de lo contrario.
.-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	Mostrar cuando el contenedor marcado esté en o por debajo del punto de interrupción sm (20em); oculto de lo contrario.
.-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	Mostrar cuando el contenedor marcado esté en o por debajo del punto de interrupción xl (62em); oculto de lo contrario.
.-cq-show-max-xs	Mostrar cuando el contenedor marcado esté en o por debajo del punto de interrupción sm (20em); oculto de lo contrario.
.-cq-show-min-content	Mostrar cuando el contenedor marcado esté en o por encima del punto de interrupción content (68.75em); oculto de lo contrario.
.-cq-show-min-content-full-width	Mostrar cuando el contenedor marcado esté en o por encima del punto de interrupción content-full-width (98.75em); oculto de lo contrario.
.-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	Mostrar cuando el contenedor marcado esté en o por encima del punto de interrupción lg (48em); oculto de lo contrario.
.-cq-show-min-md	Mostrar cuando el contenedor marcado esté en o por encima del punto de interrupción lg (48em); oculto de lo contrario.
.-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	Mostrar cuando el contenedor marcado esté en o por encima del punto de interrupción sm (20em); oculto de lo contrario.
.-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	Mostrar cuando el contenedor marcado esté en o por encima del punto de interrupción xl (62em); oculto de lo contrario.
.-cq-show-min-xs	Mostrar cuando el contenedor marcado esté en o por encima del punto de interrupción sm (20em); oculto de lo contrario.
.-hidden-max-content	Ocultar cuando el viewport esté en o por debajo del punto de interrupción content (68.75em).
.-hidden-max-content-full-width	Ocultar cuando el viewport esté en o por debajo del punto de interrupción 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	Ocultar cuando el viewport esté en o por debajo del punto de interrupción lg (48em).
.-hidden-max-md	Ocultar cuando el viewport esté en o por debajo del punto de interrupción lg (48em).
.-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	Ocultar cuando el viewport esté en o por debajo del punto de interrupción md (30em).
.-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	Ocultar cuando el viewport esté en o por debajo del punto de interrupción xl (62em).
.-hidden-max-xs	Ocultar cuando el viewport esté en o por debajo del punto de interrupción xs (16em).
.-hidden-min-content	Ocultar cuando el viewport esté en o por encima del punto de interrupción content (68.75em).
.-hidden-min-content-full-width	Ocultar cuando el viewport esté en o por encima del punto de interrupción 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	Ocultar cuando el viewport esté en o por encima del punto de interrupción lg (48em).
.-hidden-min-md	Ocultar cuando el viewport esté en o por encima del punto de interrupción lg (48em).
.-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	Ocultar cuando el área de visualización esté en o por encima del punto de interrupción 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	Ocultar cuando el área de visualización esté en o por encima del punto de interrupción xl (62em).
.-hidden-min-xs	Ocultar cuando el área de visualización esté en o por encima del punto de interrupción sm (20em).
.-show-max-content	Mostrar (inverso de -hidden-min-content) cuando el área de visualización esté en o por debajo del punto de interrupción content (68.75em); oculto en caso contrario.
.-show-max-content-full-width	Mostrar (inverso de -hidden-min-content-full-width) cuando el área de visualización esté en o por debajo del punto de interrupción content-full-width (98.75em); oculto en caso contrario.
.-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	Mostrar (inverso de -hidden-min-lg) cuando el área de visualización esté en o por debajo del punto de interrupción lg (48em); oculto en caso contrario.
.-show-max-md	Mostrar (inverso de -hidden-min-md) cuando el área de visualización esté en o por debajo del punto de interrupción md (30em); oculto en caso contrario.
.-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	Mostrar (inverso de -hidden-min-sm) cuando el área de visualización esté en o por debajo del punto de interrupción sm (20em); oculto en caso contrario.
.-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	Mostrar (inverso de -hidden-min-xl) cuando el área de visualización esté en o por debajo del punto de interrupción xl (62em); oculto en caso contrario.
.-show-max-xs	Mostrar (inverso de -hidden-min-xs) cuando el área de visualización esté en o por debajo del punto de interrupción xs (16em); oculto en caso contrario.
.-show-min-content	Mostrar (inverso de -hidden-max-content) cuando el área de visualización esté en o por encima del punto de interrupción content (68.75em); oculto en caso contrario.
.-show-min-content-full-width	Mostrar (inverso de -hidden-max-content-full-width) cuando el área de visualización esté en o por encima del punto de interrupción content-full-width (98.75em); oculto en caso contrario.
.-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	Mostrar (inverso de -hidden-max-lg) cuando el área de visualización esté en o por encima del punto de interrupción lg (48em); oculto en caso contrario.
.-show-min-md	Mostrar (inverso de -hidden-max-md) cuando el área de visualización esté en o por encima del punto de interrupción md (30em); oculto en caso contrario.
.-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	Mostrar (inverso de -hidden-max-sm) cuando el área de visualización esté en o por encima del punto de interrupción sm (20em); oculto en caso contrario.
.-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	Mostrar (inverso de -hidden-max-xl) cuando el área de visualización esté en o por encima del punto de interrupción xl (62em); oculto en caso contrario.
.-show-min-xs	Mostrar (inverso de -hidden-max-xs) cuando el área de visualización esté en o por encima del punto de interrupción xs (16em); oculto en caso contrario.

Propiedades personalizadas

Propiedad	Tipo	Predeterminado	Descripción
--pantoken-bp-content	<length>	68.75em	El valor del punto de interrupción content (68.75em, escrito a mano, tematizado (no está en el IR de tokens)). Anularlo no eleva los umbrales compilados @media/@container por encima.
--pantoken-bp-content-full-width	<length>	98.75em	El valor del punto de interrupción content-full-width (98.75em, escrito a mano, tematizado (no está en el IR de tokens)). Anularlo no eleva los umbrales compilados @media/@container por encima.
--pantoken-bp-lg	<length>	64em	El valor del punto de interrupción lg (48em, refleja --instui-component-tray-width-lg). Anularlo no eleva los umbrales compilados @media/@container por encima.
--pantoken-bp-md	<length>	48em	El valor del punto de interrupción md (30em, refleja --instui-component-tray-width-md). Anularlo no eleva los umbrales compilados @media/@container por encima.
--pantoken-bp-sm	<length>	30em	El valor del punto de interrupción sm (20em, refleja --instui-component-tray-width-sm). Anularlo no eleva los umbrales compilados @media/@container por encima.
--pantoken-bp-xl	<length>	80em	El valor del punto de interrupción xl (62em, refleja --instui-component-tray-width-xl). Anularlo no eleva los umbrales compilados @media/@container por encima.
--pantoken-bp-xs	<length>	20em	El valor del punto de interrupción content (68.75em, escrito a mano, tematizado (no está en el IR de tokens)). Anularlo no eleva los umbrales compilados @media/@container por encima.

Condiciones

Tipo	Consulta	Descripción
media	(max-width: 20em)	Límite superior del punto de interrupción xs.
media	(min-width: 20em)	Límite inferior del punto de interrupción xs.
media	(max-width: 30em)	Límite superior del punto de interrupción sm.
media	(min-width: 30em)	Límite inferior del punto de interrupción sm.
media	(max-width: 48em)	Límite superior del punto de interrupción md.
media	(min-width: 48em)	Límite inferior del punto de interrupción md.
media	(max-width: 64em)	Límite superior del punto de interrupción lg.
media	(min-width: 64em)	Límite inferior del punto de interrupción lg.
media	(max-width: 80em)	Límite superior del punto de interrupción xl.
media	(min-width: 80em)	Límite inferior del punto de interrupción xl.
media	(max-width: 68.75em)	Límite superior del punto de interrupción content.
media	(min-width: 68.75em)	Límite inferior del punto de interrupción content.
media	(max-width: 98.75em)	Límite superior del punto de interrupción content-full-width.
media	(min-width: 98.75em)	Límite inferior del punto de interrupción content-full-width.
container	(max-width: 20em)	Límite superior del punto de interrupción xs, evaluado respecto a un contenedor marcado.
container	(min-width: 20em)	Límite inferior del punto de interrupción xs, evaluado respecto a un contenedor marcado.
container	(max-width: 30em)	Límite superior del punto de interrupción sm, evaluado respecto a un contenedor marcado.
container	(min-width: 30em)	Límite inferior del punto de interrupción sm, evaluado respecto a un contenedor marcado.
container	(max-width: 48em)	Límite superior del punto de interrupción md, evaluado respecto a un contenedor marcado.
container	(min-width: 48em)	Límite inferior del punto de interrupción md, evaluado respecto a un contenedor marcado.
container	(max-width: 64em)	Límite superior del punto de interrupción lg, evaluado respecto a un contenedor marcado.
container	(min-width: 64em)	Límite inferior del punto de interrupción lg, evaluado respecto a un contenedor marcado.
container	(max-width: 80em)	Límite superior del punto de interrupción xl, evaluado respecto a un contenedor marcado.
container	(min-width: 80em)	Límite inferior del punto de interrupción xl, evaluado respecto a un contenedor marcado.
container	(max-width: 68.75em)	Límite superior del punto de interrupción content, evaluado respecto a un contenedor marcado.
container	(min-width: 68.75em)	Límite inferior del punto de interrupción content, evaluado respecto a un contenedor marcado.
container	(max-width: 98.75em)	Límite superior del punto de interrupción content-full-width, evaluado respecto a un contenedor marcado.
container	(min-width: 98.75em)	Límite inferior del punto de interrupción content-full-width, evaluado respecto a un contenedor marcado.

Tokens consumidos

Token	Tipo	Valor
--instui-breakpoints-lg	<length>	64em
--instui-breakpoints-md	<length>	48em
--instui-breakpoints-sm	<length>	30em
--instui-breakpoints-xl	<length>	80em