CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Classes de exibição/ocultação por largura da viewport ou do contêiner ao longo de 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 apenas dentro do intervalo via display: revert); as variantes -cq- reagem à largura de um ancestral .instui-container em vez da viewport. As camadas da escala xs/sm/md/lg/xl (provenientes dos tokens do componente tray-width do IR) têm cada uma um alias de forma longa (x-small–x-large) e um nome de dispositivo (mobile/phablet/tablet/laptop/desktop) — ambos descontinuados em favor do nome curto — além das camadas temáticas não-escaladas 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á no breakpoint content ou abaixo (68.75em).
.-cq-hidden-max-content-full-width	Oculta quando o contêiner marcado está no breakpoint content-full-width ou abaixo (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á no breakpoint lg ou abaixo (48em).
.-cq-hidden-max-md	Oculta quando o contêiner marcado está no breakpoint md ou abaixo (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á no breakpoint sm ou abaixo (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á no breakpoint xl ou abaixo (62em).
.-cq-hidden-max-xs	Oculta quando o contêiner marcado está no breakpoint xs ou abaixo (16em).
.-cq-hidden-min-content	Oculta quando o contêiner marcado está no breakpoint content ou acima (68.75em).
.-cq-hidden-min-content-full-width	Oculta quando o contêiner marcado está no breakpoint content-full-width ou acima (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á no breakpoint lg ou acima (48em).
.-cq-hidden-min-md	Oculta quando o contêiner marcado está no breakpoint md ou acima (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á no breakpoint sm ou acima (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á no breakpoint xl ou acima (62em).
.-cq-hidden-min-xs	Oculta quando o contêiner marcado está no breakpoint xs ou acima (16em).
.-cq-show-max-content	Exibe quando o contêiner marcado está no breakpoint content ou abaixo (68.75em); caso contrário, fica oculto.
.-cq-show-max-content-full-width	Exibe quando o contêiner marcado está no breakpoint content-full-width ou abaixo (98.75em); caso contrário, fica oculto.
.-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	Exibe quando o contêiner marcado está no breakpoint lg ou abaixo (48em); caso contrário, fica oculto.
.-cq-show-max-md	Exibe quando o contêiner marcado está no breakpoint md ou abaixo (30em); caso contrário, fica oculto.
.-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	Exibe quando o contêiner marcado está no breakpoint sm ou abaixo (20em); caso contrário, fica oculto.
.-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	Exibe quando o contêiner marcado está no breakpoint xl ou abaixo (62em); caso contrário, fica oculto.
.-cq-show-max-xs	Exibe quando o contêiner marcado está no breakpoint xs ou abaixo (16em); caso contrário, fica oculto.
.-cq-show-min-content	Exibe quando o contêiner marcado está no breakpoint content ou acima (68.75em); caso contrário, fica oculto.
.-cq-show-min-content-full-width	Exibe quando o contêiner marcado está no breakpoint content-full-width ou acima (98.75em); caso contrário, fica oculto.
.-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	Exibe quando o contêiner marcado está no breakpoint lg ou acima (48em); caso contrário, fica oculto.
.-cq-show-min-md	Exibe quando o contêiner marcado está no breakpoint md ou acima (30em); caso contrário, fica oculto.
.-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	Exibe quando o contêiner marcado está no breakpoint sm ou acima (20em); caso contrário, fica oculto.
.-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	Exibe quando o contêiner marcado está no breakpoint xl ou acima (62em); caso contrário, fica oculto.
.-cq-show-min-xs	Exibe quando o contêiner marcado está no breakpoint xs ou acima (16em); caso contrário, fica oculto.
.-hidden-max-content	Oculta quando a viewport está no breakpoint content ou abaixo (68.75em).
.-hidden-max-content-full-width	Oculta quando a viewport está no breakpoint content-full-width ou abaixo (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á no breakpoint lg ou abaixo (48em).
.-hidden-max-md	Oculta quando a viewport está no breakpoint md ou abaixo (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á no breakpoint sm ou abaixo (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á no breakpoint xl ou abaixo (62em).
.-hidden-max-xs	Oculta quando a viewport está no breakpoint xs ou abaixo (16em).
.-hidden-min-content	Oculta quando a viewport está no breakpoint content ou acima (68.75em).
.-hidden-min-content-full-width	Oculta quando a viewport está no breakpoint content-full-width ou acima (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á no breakpoint lg ou acima (48em).
.-hidden-min-md	Ocultar quando a janela de visualização estiver em ou acima do breakpoint 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 breakpoint 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 breakpoint xl (62em).
.-hidden-min-xs	Ocultar quando a janela de visualização estiver em ou acima do breakpoint xs (16em).
.-show-max-content	Exibir (inverso de -hidden-min-content) quando a janela de visualização estiver em ou abaixo do breakpoint 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 breakpoint 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 breakpoint 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 breakpoint 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 breakpoint 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 breakpoint 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 breakpoint 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 breakpoint 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 breakpoint 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 breakpoint 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 breakpoint 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 breakpoint 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 breakpoint 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 breakpoint xs (16em); oculto caso contrário.

Propriedades personalizadas

Propriedade	Tipo	Padrão	Descrição
--pantoken-bp-content	<length>	68.75em	O valor do breakpoint content (68.75em, escrito manualmente, tematizado (não está no token IR)). Sobrescrevê-lo não eleva os limites compilados @media/@container acima.
--pantoken-bp-content-full-width	<length>	98.75em	O valor do breakpoint content-full-width (98.75em, escrito manualmente, tematizado (não está no token IR)). Sobrescrevê-lo não eleva os limites compilados @media/@container acima.
--pantoken-bp-lg	<length>	48em	O valor do breakpoint lg (48em, reflete --instui-component-tray-width-lg). Sobrescrevê-lo não eleva os limites compilados @media/@container acima.
--pantoken-bp-md	<length>	30em	O valor do breakpoint md (30em, reflete --instui-component-tray-width-md). Sobrescrevê-lo não eleva os limites compilados @media/@container acima.
--pantoken-bp-sm	<length>	20em	O valor do breakpoint sm (20em, reflete --instui-component-tray-width-sm). Sobrescrevê-lo não eleva os limites compilados @media/@container acima.
--pantoken-bp-xl	<length>	62em	O valor do breakpoint xl (62em, reflete --instui-component-tray-width-xl). Sobrescrevê-lo não eleva os limites compilados @media/@container acima.
--pantoken-bp-xs	<length>	16em	O valor do breakpoint xs (16em, reflete --instui-component-tray-width-xs). Sobrescrevê-lo não eleva os limites compilados @media/@container acima.

Condições

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