CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Classes de mostrar/ocultar por largura da viewport ou do contêiner em uma escala de breakpoints tematizada.

.instui-hidden-max-<bp>/-hidden-min-<bp> ocultam por largura da viewport; .instui-show-max-<bp>/-show-min-<bp> são o inverso (ocultos por padrão, mostrados somente dentro do intervalo via display: revert); as variantes -cq- reagem à largura de um ancestral .instui-container em vez da largura da viewport. Os níveis da escala xs/sm/md/lg/xl (providos pelos tokens do componente tray-width do IR) têm cada um um alias de forma longa (x-small–x-large) e um nome de dispositivo (mobile/phablet/tablet/laptop/desktop) — ambos obsoletos em favor do nome curto — além dos níveis tematizados não escalados content/content-full-width (a largura máxima da área de conteúdo principal).

Source: index.ts

Uso

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

Exemplos

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

Modificadores

Modificador	Descrição
.-cq-hidden-max-content	Oculta quando o contêiner marcado está na largura do breakpoint content ou menor (68.75em).
.-cq-hidden-max-content-full-width	Oculta quando o contêiner marcado está na largura do breakpoint content-full-width ou menor (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 quando o contêiner marcado está na largura do breakpoint lg ou menor (48em).
.-cq-hidden-max-md	Oculta quando o contêiner marcado está na largura do breakpoint md ou menor (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 quando o contêiner marcado está na largura do breakpoint sm ou menor (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 quando o contêiner marcado está na largura do breakpoint xl ou menor (62em).
.-cq-hidden-max-xs	Oculta quando o contêiner marcado está na largura do breakpoint xs ou menor (16em).
.-cq-hidden-min-content	Oculta quando o contêiner marcado está na largura do breakpoint content ou maior (68.75em).
.-cq-hidden-min-content-full-width	Oculta quando o contêiner marcado está na largura do breakpoint content-full-width ou maior (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 quando o contêiner marcado está na largura do breakpoint lg ou maior (48em).
.-cq-hidden-min-md	Oculta quando o contêiner marcado está na largura do breakpoint md ou maior (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 quando o contêiner marcado está na largura do breakpoint sm ou maior (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 quando o contêiner marcado está na largura do breakpoint xl ou maior (62em).
.-cq-hidden-min-xs	Oculta quando o contêiner marcado está na largura do breakpoint xs ou maior (16em).
.-cq-show-max-content	Mostra quando o contêiner marcado está na largura do breakpoint content ou menor (68.75em); oculto caso contrário.
.-cq-show-max-content-full-width	Mostra quando o contêiner marcado está na largura do breakpoint content-full-width ou menor (98.75em); oculto caso contrário.
.-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 quando o contêiner marcado está na largura do breakpoint lg ou menor (48em); oculto caso contrário.
.-cq-show-max-md	Mostra quando o contêiner marcado está na largura do breakpoint md ou menor (30em); oculto caso contrário.
.-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 quando o contêiner marcado está na largura do breakpoint sm ou menor (20em); oculto caso contrário.
.-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 quando o contêiner marcado está na largura do breakpoint xl ou menor (62em); oculto caso contrário.
.-cq-show-max-xs	Mostra quando o contêiner marcado está na largura do breakpoint xs ou menor (16em); oculto caso contrário.
.-cq-show-min-content	Mostra quando o contêiner marcado está na largura do breakpoint content ou maior (68.75em); oculto caso contrário.
.-cq-show-min-content-full-width	Mostra quando o contêiner marcado está na largura do breakpoint content-full-width ou maior (98.75em); oculto caso contrário.
.-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 quando o contêiner marcado está na largura do breakpoint lg ou maior (48em); oculto caso contrário.
.-cq-show-min-md	Mostra quando o contêiner marcado está na largura do breakpoint md ou maior (30em); oculto caso contrário.
.-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 quando o contêiner marcado está na largura do breakpoint sm ou maior (20em); oculto caso contrário.
.-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 quando o contêiner marcado está na largura do breakpoint xl ou maior (62em); oculto caso contrário.
.-cq-show-min-xs	Mostra quando o contêiner marcado está na largura do breakpoint xs ou maior (16em); oculto caso contrário.
.-hidden-max-content	Oculta quando a viewport está na largura do breakpoint content ou menor (68.75em).
.-hidden-max-content-full-width	Oculta quando a viewport está na largura do breakpoint content-full-width ou menor (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 quando a viewport está na largura do breakpoint lg ou menor (48em).
.-hidden-max-md	Oculta quando a viewport está na largura do breakpoint md ou menor (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 quando a viewport está na largura do breakpoint sm ou menor (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 quando a viewport está na largura do breakpoint xl ou menor (62em).
.-hidden-max-xs	Oculta quando a viewport está na largura do breakpoint xs ou menor (16em).
.-hidden-min-content	Oculta quando a viewport está na largura do breakpoint content ou maior (68.75em).
.-hidden-min-content-full-width	Oculta quando a viewport está na largura do breakpoint content-full-width ou maior (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 quando a viewport está na largura do breakpoint lg ou maior (48em).
.-hidden-min-md	Ocultar quando a janela de visualização estiver em ou acima do ponto de interrupção 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	Ocultar quando a janela de visualização estiver em ou acima do ponto de interrupção 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 quando a janela de visualização estiver em ou acima do ponto de interrupção xl (62em).
.-hidden-min-xs	Ocultar quando a janela de visualização estiver em ou acima do ponto de interrupção xs (16em).
.-show-max-content	Exibir (inverso de -hidden-min-content) quando a janela de visualização estiver em ou abaixo do ponto de interrupção content (68.75em); oculto caso contrário.
.-show-max-content-full-width	Exibir (inverso de -hidden-min-content-full-width) quando a janela de visualização estiver em ou abaixo do ponto de interrupção content-full-width (98.75em); oculto caso contrário.
.-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	Exibir (inverso de -hidden-min-lg) quando a janela de visualização estiver em ou abaixo do ponto de interrupção lg (48em); oculto caso contrário.
.-show-max-md	Exibir (inverso de -hidden-min-md) quando a janela de visualização estiver em ou abaixo do ponto de interrupção md (30em); oculto caso contrário.
.-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	Exibir (inverso de -hidden-min-sm) quando a janela de visualização estiver em ou abaixo do ponto de interrupção sm (20em); oculto caso contrário.
.-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	Exibir (inverso de -hidden-min-xl) quando a janela de visualização estiver em ou abaixo do ponto de interrupção xl (62em); oculto caso contrário.
.-show-max-xs	Exibir (inverso de -hidden-min-xs) quando a janela de visualização estiver em ou abaixo do ponto de interrupção xs (16em); oculto caso contrário.
.-show-min-content	Exibir (inverso de -hidden-max-content) quando a janela de visualização estiver em ou acima do ponto de interrupção content (68.75em); oculto caso contrário.
.-show-min-content-full-width	Exibir (inverso de -hidden-max-content-full-width) quando a janela de visualização estiver em ou acima do ponto de interrupção content-full-width (98.75em); oculto caso contrário.
.-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	Exibir (inverso de -hidden-max-lg) quando a janela de visualização estiver em ou acima do ponto de interrupção lg (48em); oculto caso contrário.
.-show-min-md	Exibir (inverso de -hidden-max-md) quando a janela de visualização estiver em ou acima do ponto de interrupção md (30em); oculto caso contrário.
.-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	Exibir (inverso de -hidden-max-sm) quando a janela de visualização estiver em ou acima do ponto de interrupção sm (20em); oculto caso contrário.
.-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	Exibir (inverso de -hidden-max-xl) quando a janela de visualização estiver em ou acima do ponto de interrupção xl (62em); oculto caso contrário.
.-show-min-xs	Exibir (inverso de -hidden-max-xs) quando a janela de visualização estiver em ou acima do ponto de interrupção xs (16em); oculto caso contrário.

Propriedades personalizadas

Propriedade	Tipo	Padrão	Descrição
--pantoken-bp-content	<length>	68.75em	Valor do ponto de interrupção content (68.75em, definido manualmente, temático (não presente no token IR)). Substituí-lo não desloca os limites compilados @media/@container acima.
--pantoken-bp-content-full-width	<length>	98.75em	Valor do ponto de interrupção content-full-width (98.75em, definido manualmente, temático (não presente no token IR)). Substituí-lo não desloca os limites compilados @media/@container acima.
--pantoken-bp-lg	<length>	48em	Valor do ponto de interrupção lg (48em, espelha --instui-component-tray-width-lg). Substituí-lo não desloca os limites compilados @media/@container acima.
--pantoken-bp-md	<length>	30em	Valor do ponto de interrupção md (30em, espelha --instui-component-tray-width-md). Substituí-lo não desloca os limites compilados @media/@container acima.
--pantoken-bp-sm	<length>	20em	Valor do ponto de interrupção sm (20em, espelha --instui-component-tray-width-sm). Substituí-lo não desloca os limites compilados @media/@container acima.
--pantoken-bp-xl	<length>	62em	Valor do ponto de interrupção xl (62em, espelha --instui-component-tray-width-xl). Substituí-lo não desloca os limites compilados @media/@container acima.
--pantoken-bp-xs	<length>	16em	Valor do ponto de interrupção xs (16em, espelha --instui-component-tray-width-xs). Substituí-lo não desloca os limites compilados @media/@container acima.

Condições

Tipo	Consulta	Descrição
media	(max-width: 16em)	Limite superior do ponto de interrupção xs.
media	(min-width: 16em)	Limite inferior do ponto de interrupção xs.
media	(max-width: 20em)	Limite superior do ponto de interrupção sm.
media	(min-width: 20em)	Limite inferior do ponto de interrupção sm.
media	(max-width: 30em)	Limite superior do ponto de interrupção md.
media	(min-width: 30em)	Limite inferior do ponto de interrupção md.
media	(max-width: 48em)	Limite superior do ponto de interrupção lg.
media	(min-width: 48em)	Limite inferior do ponto de interrupção lg.
media	(max-width: 62em)	Limite superior do ponto de interrupção xl.
media	(min-width: 62em)	Limite inferior do ponto de interrupção xl.
media	(max-width: 68.75em)	Limite superior do ponto de interrupção content.
media	(min-width: 68.75em)	Limite inferior do ponto de interrupção content.
media	(max-width: 98.75em)	Limite superior do ponto de interrupção content-full-width.
media	(min-width: 98.75em)	Limite inferior do ponto de interrupção content-full-width.
container	(max-width: 16em)	Limite superior do ponto de interrupção xs, avaliado em relação a um contêiner marcado.
container	(min-width: 16em)	Limite inferior do ponto de interrupção xs, avaliado em relação a um contêiner marcado.
container	(max-width: 20em)	Limite superior do ponto de interrupção sm, avaliado em relação a um contêiner marcado.
container	(min-width: 20em)	Limite inferior do ponto de interrupção sm, avaliado em relação a um contêiner marcado.
container	(max-width: 30em)	Limite superior do breakpoint md, avaliado em relação a um contêiner marcado.
container	(min-width: 30em)	Limite inferior do breakpoint md, avaliado em relação a um contêiner marcado.
container	(max-width: 48em)	Limite superior do breakpoint lg, avaliado em relação a um contêiner marcado.
container	(min-width: 48em)	Limite inferior do breakpoint lg, avaliado em relação a um contêiner marcado.
container	(max-width: 62em)	Limite superior do breakpoint xl, avaliado em relação a um contêiner marcado.
container	(min-width: 62em)	Limite inferior do breakpoint xl, avaliado em relação a um contêiner marcado.
container	(max-width: 68.75em)	Limite superior do breakpoint content, avaliado em relação a um contêiner marcado.
container	(min-width: 68.75em)	Limite inferior do breakpoint content, avaliado em relação a um contêiner marcado.
container	(max-width: 98.75em)	Limite superior do breakpoint content-full-width, avaliado em relação a um contêiner marcado.
container	(min-width: 98.75em)	Limite inferior do breakpoint content-full-width, avaliado em relação a um contêiner marcado.

Tokens consumidos

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