CSS: responsive ​

[class*="-hidden-"],[class*="-show-"] — Classi di mostra/nascondi basate sulla larghezza del viewport o del contenitore attraverso una scala di breakpoint tematizzati.

.instui-hidden-max-<bp>/-hidden-min-<bp> nascondono in base alla larghezza del viewport; .instui-show-max-<bp>/-show-min-<bp> sono l'inverso (nascosti per impostazione predefinita, mostrati solo all'interno dell'intervallo tramite display: revert); le varianti -cq- reagiscono invece alla larghezza di un antenato .instui-container, non a quella del viewport. Le tier di scala xs/sm/md/lg/xl (prese dai token del componente tray-width dell'IR) sono ciascuna aliasate a una forma estesa (x-small–x-large) e a un nome di dispositivo (mobile/phablet/tablet/laptop/desktop) — entrambi deprecati a favore del nome corto — più le tier tematizzate non scalate content/content-full-width (la max-width dell'area contenuto principale).

Source: index.ts

Uso ​

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

Esempi ​

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

Modificatori ​

ModificatoreDescrizione
.-cq-hidden-max-contentNascondi quando il contenitore contrassegnato è uguale o inferiore al breakpoint content (68.75em).
.-cq-hidden-max-content-full-widthNascondi quando il contenitore contrassegnato è uguale o inferiore al breakpoint content-full-width (98.75em).
.-cq-hidden-max-desktopAlias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-laptopAlias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-largeAlias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-lgNascondi quando il contenitore contrassegnato è uguale o inferiore al breakpoint lg (48em).
.-cq-hidden-max-mdNascondi quando il contenitore contrassegnato è uguale o inferiore al breakpoint md (30em).
.-cq-hidden-max-mediumAlias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-mobileAlias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-phabletAlias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-smNascondi quando il contenitore contrassegnato è uguale o inferiore al breakpoint sm (20em).
.-cq-hidden-max-smallAlias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-tabletAlias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-x-largeAlias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-x-smallAlias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-xlNascondi quando il contenitore contrassegnato è uguale o inferiore al breakpoint xl (62em).
.-cq-hidden-max-xsNascondi quando il contenitore contrassegnato è uguale o inferiore al breakpoint xs (16em).
.-cq-hidden-min-contentNascondi quando il contenitore contrassegnato è uguale o superiore al breakpoint content (68.75em).
.-cq-hidden-min-content-full-widthNascondi quando il contenitore contrassegnato è uguale o superiore al breakpoint content-full-width (98.75em).
.-cq-hidden-min-desktopAlias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-laptopAlias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-largeAlias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-lgNascondi quando il contenitore contrassegnato è uguale o superiore al breakpoint lg (48em).
.-cq-hidden-min-mdNascondi quando il contenitore contrassegnato è uguale o superiore al breakpoint md (30em).
.-cq-hidden-min-mediumAlias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-mobileAlias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-phabletAlias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-smNascondi quando il contenitore contrassegnato è uguale o superiore al breakpoint sm (20em).
.-cq-hidden-min-smallAlias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-tabletAlias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-x-largeAlias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-x-smallAlias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-xlNascondi quando il contenitore contrassegnato è uguale o superiore al breakpoint xl (62em).
.-cq-hidden-min-xsNascondi quando il contenitore contrassegnato è uguale o superiore al breakpoint xs (16em).
.-cq-show-max-contentMostra quando il contenitore contrassegnato è uguale o inferiore al breakpoint content (68.75em); altrimenti nascosto.
.-cq-show-max-content-full-widthMostra quando il contenitore contrassegnato è uguale o inferiore al breakpoint content-full-width (98.75em); altrimenti nascosto.
.-cq-show-max-desktopAlias — maps to .-cq-show-max-xl.
.-cq-show-max-laptopAlias — maps to .-cq-show-max-lg.
.-cq-show-max-largeAlias — maps to .-cq-show-max-lg.
.-cq-show-max-lgMostra quando il contenitore contrassegnato è uguale o inferiore al breakpoint lg (48em); altrimenti nascosto.
.-cq-show-max-mdMostra quando il contenitore contrassegnato è uguale o inferiore al breakpoint md (30em); altrimenti nascosto.
.-cq-show-max-mediumAlias — maps to .-cq-show-max-md.
.-cq-show-max-mobileAlias — maps to .-cq-show-max-xs.
.-cq-show-max-phabletAlias — maps to .-cq-show-max-sm.
.-cq-show-max-smMostra quando il contenitore contrassegnato è uguale o inferiore al breakpoint sm (20em); altrimenti nascosto.
.-cq-show-max-smallAlias — maps to .-cq-show-max-sm.
.-cq-show-max-tabletAlias — maps to .-cq-show-max-md.
.-cq-show-max-x-largeAlias — maps to .-cq-show-max-xl.
.-cq-show-max-x-smallAlias — maps to .-cq-show-max-xs.
.-cq-show-max-xlMostra quando il contenitore contrassegnato è uguale o inferiore al breakpoint xl (62em); altrimenti nascosto.
.-cq-show-max-xsMostra quando il contenitore contrassegnato è uguale o inferiore al breakpoint xs (16em); altrimenti nascosto.
.-cq-show-min-contentMostra quando il contenitore contrassegnato è uguale o superiore al breakpoint content (68.75em); altrimenti nascosto.
.-cq-show-min-content-full-widthMostra quando il contenitore contrassegnato è uguale o superiore al breakpoint content-full-width (98.75em); altrimenti nascosto.
.-cq-show-min-desktopAlias — maps to .-cq-show-min-xl.
.-cq-show-min-laptopAlias — maps to .-cq-show-min-lg.
.-cq-show-min-largeAlias — maps to .-cq-show-min-lg.
.-cq-show-min-lgMostra quando il contenitore contrassegnato è uguale o superiore al breakpoint lg (48em); altrimenti nascosto.
.-cq-show-min-mdMostra quando il contenitore contrassegnato è uguale o superiore al breakpoint md (30em); altrimenti nascosto.
.-cq-show-min-mediumAlias — maps to .-cq-show-min-md.
.-cq-show-min-mobileAlias — maps to .-cq-show-min-xs.
.-cq-show-min-phabletAlias — maps to .-cq-show-min-sm.
.-cq-show-min-smMostra quando il contenitore contrassegnato è uguale o superiore al breakpoint sm (20em); altrimenti nascosto.
.-cq-show-min-smallAlias — maps to .-cq-show-min-sm.
.-cq-show-min-tabletAlias — maps to .-cq-show-min-md.
.-cq-show-min-x-largeAlias — maps to .-cq-show-min-xl.
.-cq-show-min-x-smallAlias — maps to .-cq-show-min-xs.
.-cq-show-min-xlMostra quando il contenitore contrassegnato è uguale o superiore al breakpoint xl (62em); altrimenti nascosto.
.-cq-show-min-xsMostra quando il contenitore contrassegnato è uguale o superiore al breakpoint xs (16em); altrimenti nascosto.
.-hidden-max-contentNascondi quando il viewport è uguale o inferiore al breakpoint content (68.75em).
.-hidden-max-content-full-widthNascondi quando il viewport è uguale o inferiore al breakpoint content-full-width (98.75em).
.-hidden-max-desktopAlias — maps to .-hidden-max-xl.
.-hidden-max-laptopAlias — maps to .-hidden-max-lg.
.-hidden-max-largeAlias — maps to .-hidden-max-lg.
.-hidden-max-lgNascondi quando il viewport è uguale o inferiore al breakpoint lg (48em).
.-hidden-max-mdNascondi quando il viewport è uguale o inferiore al breakpoint md (30em).
.-hidden-max-mediumAlias — maps to .-hidden-max-md.
.-hidden-max-mobileAlias — maps to .-hidden-max-xs.
.-hidden-max-phabletAlias — maps to .-hidden-max-sm.
.-hidden-max-smNascondi quando il viewport è uguale o inferiore al breakpoint sm (20em).
.-hidden-max-smallAlias — maps to .-hidden-max-sm.
.-hidden-max-tabletAlias — maps to .-hidden-max-md.
.-hidden-max-x-largeAlias — maps to .-hidden-max-xl.
.-hidden-max-x-smallAlias — maps to .-hidden-max-xs.
.-hidden-max-xlNascondi quando il viewport è uguale o inferiore al breakpoint xl (62em).
.-hidden-max-xsNascondi quando il viewport è uguale o inferiore al breakpoint xs (16em).
.-hidden-min-contentNascondi quando il viewport è uguale o superiore al breakpoint content (68.75em).
.-hidden-min-content-full-widthNascondi quando il viewport è uguale o superiore al breakpoint content-full-width (98.75em).
.-hidden-min-desktopAlias — maps to .-hidden-min-xl.
.-hidden-min-laptopAlias — maps to .-hidden-min-lg.
.-hidden-min-largeAlias — maps to .-hidden-min-lg.
.-hidden-min-lgNascondi quando il viewport è uguale o superiore al breakpoint lg (48em).
.-hidden-min-mdNascondi quando la viewport è al livello di breakpoint md o superiore (30em).
.-hidden-min-mediumAlias — maps to .-hidden-min-md.
.-hidden-min-mobileAlias — maps to .-hidden-min-xs.
.-hidden-min-phabletAlias — maps to .-hidden-min-sm.
.-hidden-min-smNascondi quando la viewport è al livello di breakpoint sm o superiore (20em).
.-hidden-min-smallAlias — maps to .-hidden-min-sm.
.-hidden-min-tabletAlias — maps to .-hidden-min-md.
.-hidden-min-x-largeAlias — maps to .-hidden-min-xl.
.-hidden-min-x-smallAlias — maps to .-hidden-min-xs.
.-hidden-min-xlNascondi quando la viewport è al livello di breakpoint xl o superiore (62em).
.-hidden-min-xsNascondi quando la viewport è al livello di breakpoint xs o superiore (16em).
.-show-max-contentMostra (inverso di -hidden-min-content) quando la viewport è al livello di breakpoint content o inferiore (68.75em); altrimenti nascosto.
.-show-max-content-full-widthMostra (inverso di -hidden-min-content-full-width) quando la viewport è al livello di breakpoint content-full-width o inferiore (98.75em); altrimenti nascosto.
.-show-max-desktopAlias — maps to .-show-max-xl.
.-show-max-laptopAlias — maps to .-show-max-lg.
.-show-max-largeAlias — maps to .-show-max-lg.
.-show-max-lgMostra (inverso di -hidden-min-lg) quando la viewport è al livello di breakpoint lg o inferiore (48em); altrimenti nascosto.
.-show-max-mdMostra (inverso di -hidden-min-md) quando la viewport è al livello di breakpoint md o inferiore (30em); altrimenti nascosto.
.-show-max-mediumAlias — maps to .-show-max-md.
.-show-max-mobileAlias — maps to .-show-max-xs.
.-show-max-phabletAlias — maps to .-show-max-sm.
.-show-max-smMostra (inverso di -hidden-min-sm) quando la viewport è al livello di breakpoint sm o inferiore (20em); altrimenti nascosto.
.-show-max-smallAlias — maps to .-show-max-sm.
.-show-max-tabletAlias — maps to .-show-max-md.
.-show-max-x-largeAlias — maps to .-show-max-xl.
.-show-max-x-smallAlias — maps to .-show-max-xs.
.-show-max-xlMostra (inverso di -hidden-min-xl) quando la viewport è al livello di breakpoint xl o inferiore (62em); altrimenti nascosto.
.-show-max-xsMostra (inverso di -hidden-min-xs) quando la viewport è al livello di breakpoint xs o inferiore (16em); altrimenti nascosto.
.-show-min-contentMostra (inverso di -hidden-max-content) quando la viewport è al livello di breakpoint content o superiore (68.75em); altrimenti nascosto.
.-show-min-content-full-widthMostra (inverso di -hidden-max-content-full-width) quando la viewport è al livello di breakpoint content-full-width o superiore (98.75em); altrimenti nascosto.
.-show-min-desktopAlias — maps to .-show-min-xl.
.-show-min-laptopAlias — maps to .-show-min-lg.
.-show-min-largeAlias — maps to .-show-min-lg.
.-show-min-lgMostra (inverso di -hidden-max-lg) quando la viewport è al livello di breakpoint lg o superiore (48em); altrimenti nascosto.
.-show-min-mdMostra (inverso di -hidden-max-md) quando la viewport è al livello di breakpoint md o superiore (30em); altrimenti nascosto.
.-show-min-mediumAlias — maps to .-show-min-md.
.-show-min-mobileAlias — maps to .-show-min-xs.
.-show-min-phabletAlias — maps to .-show-min-sm.
.-show-min-smMostra (inverso di -hidden-max-sm) quando la viewport è al livello di breakpoint sm o superiore (20em); altrimenti nascosto.
.-show-min-smallAlias — maps to .-show-min-sm.
.-show-min-tabletAlias — maps to .-show-min-md.
.-show-min-x-largeAlias — maps to .-show-min-xl.
.-show-min-x-smallAlias — maps to .-show-min-xs.
.-show-min-xlMostra (inverso di -hidden-max-xl) quando la viewport è al livello di breakpoint xl o superiore (62em); altrimenti nascosto.
.-show-min-xsMostra (inverso di -hidden-max-xs) quando la viewport è al livello di breakpoint xs o superiore (16em); altrimenti nascosto.

Proprietà personalizzate ​

ProprietàTipoPredefinitoDescrizione
--pantoken-bp-content<length>68.75emIl valore del breakpoint content (68.75em, scritto a mano, tematizzato (non nell'IR dei token)). Sovrascriverlo non sposta verso l'alto le soglie compilate @media/@container.
--pantoken-bp-content-full-width<length>98.75emIl valore del breakpoint content-full-width (98.75em, scritto a mano, tematizzato (non nell'IR dei token)). Sovrascriverlo non sposta verso l'alto le soglie compilate @media/@container.
--pantoken-bp-lg<length>48emIl valore del breakpoint lg (48em, rispecchia --instui-component-tray-width-lg). Sovrascriverlo non sposta verso l'alto le soglie compilate @media/@container.
--pantoken-bp-md<length>30emIl valore del breakpoint md (30em, rispecchia --instui-component-tray-width-md). Sovrascriverlo non sposta verso l'alto le soglie compilate @media/@container.
--pantoken-bp-sm<length>20emIl valore del breakpoint sm (20em, rispecchia --instui-component-tray-width-sm). Sovrascriverlo non sposta verso l'alto le soglie compilate @media/@container.
--pantoken-bp-xl<length>62emIl valore del breakpoint xl (62em, rispecchia --instui-component-tray-width-xl). Sovrascriverlo non sposta verso l'alto le soglie compilate @media/@container.
--pantoken-bp-xs<length>16emIl valore del breakpoint xs (16em, rispecchia --instui-component-tray-width-xs). Sovrascriverlo non sposta verso l'alto le soglie compilate @media/@container.

Condizioni ​

TipoQueryDescrizione
media(max-width: 16em)Limite superiore del breakpoint xs.
media(min-width: 16em)Limite inferiore del breakpoint xs.
media(max-width: 20em)Limite superiore del breakpoint sm.
media(min-width: 20em)Limite inferiore del breakpoint sm.
media(max-width: 30em)Limite superiore del breakpoint md.
media(min-width: 30em)Limite inferiore del breakpoint md.
media(max-width: 48em)Limite superiore del breakpoint lg.
media(min-width: 48em)Limite inferiore del breakpoint lg.
media(max-width: 62em)Limite superiore del breakpoint xl.
media(min-width: 62em)Limite inferiore del breakpoint xl.
media(max-width: 68.75em)Limite superiore del breakpoint content.
media(min-width: 68.75em)Limite inferiore del breakpoint content.
media(max-width: 98.75em)Limite superiore del breakpoint content-full-width.
media(min-width: 98.75em)Limite inferiore del breakpoint content-full-width.
container(max-width: 16em)Limite superiore del breakpoint xs, valutato rispetto a un contenitore marcato.
container(min-width: 16em)Limite inferiore del breakpoint xs, valutato rispetto a un contenitore marcato.
container(max-width: 20em)Limite superiore del breakpoint sm, valutato rispetto a un contenitore marcato.
container(min-width: 20em)Limite inferiore del breakpoint sm, valutato rispetto a un contenitore marcato.
container(max-width: 30em)Limite superiore del breakpoint md, valutato rispetto a un contenitore contrassegnato.
container(min-width: 30em)Limite inferiore del breakpoint md, valutato rispetto a un contenitore contrassegnato.
container(max-width: 48em)Limite superiore del breakpoint lg, valutato rispetto a un contenitore contrassegnato.
container(min-width: 48em)Limite inferiore del breakpoint lg, valutato rispetto a un contenitore contrassegnato.
container(max-width: 62em)Limite superiore del breakpoint xl, valutato rispetto a un contenitore contrassegnato.
container(min-width: 62em)Limite inferiore del breakpoint xl, valutato rispetto a un contenitore contrassegnato.
container(max-width: 68.75em)Limite superiore del breakpoint content, valutato rispetto a un contenitore contrassegnato.
container(min-width: 68.75em)Limite inferiore del breakpoint content, valutato rispetto a un contenitore contrassegnato.
container(max-width: 98.75em)Limite superiore del breakpoint content-full-width, valutato rispetto a un contenitore contrassegnato.
container(min-width: 98.75em)Limite inferiore del breakpoint content-full-width, valutato rispetto a un contenitore contrassegnato.

Token consumati ​

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