CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Klas pou montre/kache selon lajè viewport oswa kontenè atravè yon echèl pwen-kase tematik.

.instui-hidden-max-<bp>/-hidden-min-<bp> kache pa lajè viewport; .instui-show-max-<bp>/-show-min-<bp> se inverse a (kache pa defo, montre sèlman andedan ranje a atravè display: revert); varyant -cq- yo reaji olye a lajè yon zansèt .instui-container, pa sa viewport la. Nivo echèl xs/sm/md/lg/xl ( sòti nan tokens konpozan tray-width IR la) chak gen yon alias long-form (x-small–x-large) ak yon non aparèy (mobile/phablet/tablet/laptop/desktop) — tou de demode an favè non kout la — plis nivo tematik san echèl content/content-full-width (max-width zòn kontni prensipal la).

Source: index.ts

Itilizasyon

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

Egzanp

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

Modifikatè

Modifikatè	Deskripsyon
.-cq-hidden-max-content	Kache lè kontenè make a egal oswa anba pwen-kase content (68.75em).
.-cq-hidden-max-content-full-width	Kache lè kontenè make a egal oswa anba pwen-kase 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	Kache lè kontenè make a egal oswa anba pwen-kase lg (48em).
.-cq-hidden-max-md	Kache lè kontenè make a egal oswa anba pwen-kase 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	Kache lè kontenè make a egal oswa anba pwen-kase 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	Kache lè kontenè make a egal oswa anba pwen-kase xl (62em).
.-cq-hidden-max-xs	Kache lè kontenè make a egal oswa anba pwen-kase xs (16em).
.-cq-hidden-min-content	Kache lè kontenè make a egal oswa pi gran pase pwen-kase content (68.75em).
.-cq-hidden-min-content-full-width	Kache lè kontenè make a egal oswa pi gran pase pwen-kase 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	Kache lè kontenè make a egal oswa pi gran pase pwen-kase lg (48em).
.-cq-hidden-min-md	Kache lè kontenè make a egal oswa pi gran pase pwen-kase 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	Kache lè kontenè make a egal oswa pi gran pase pwen-kase 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	Kache lè kontenè make a egal oswa pi gran pase pwen-kase xl (62em).
.-cq-hidden-min-xs	Kache lè kontenè make a egal oswa pi gran pase pwen-kase xs (16em).
.-cq-show-max-content	Montre lè kontenè make a egal oswa anba pwen-kase content (68.75em); otreman kache.
.-cq-show-max-content-full-width	Montre lè kontenè make a egal oswa anba pwen-kase content-full-width (98.75em); otreman kache.
.-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	Montre lè kontenè make a egal oswa anba pwen-kase lg (48em); otreman kache.
.-cq-show-max-md	Montre lè kontenè make a egal oswa anba pwen-kase md (30em); otreman kache.
.-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	Montre lè kontenè make a egal oswa anba pwen-kase sm (20em); otreman kache.
.-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	Montre lè kontenè make a egal oswa anba pwen-kase xl (62em); otreman kache.
.-cq-show-max-xs	Montre lè kontenè make a egal oswa anba pwen-kase xs (16em); otreman kache.
.-cq-show-min-content	Montre lè kontenè make a egal oswa pi gran pase pwen-kase content (68.75em); otreman kache.
.-cq-show-min-content-full-width	Montre lè kontenè make a egal oswa pi gran pase pwen-kase content-full-width (98.75em); otreman kache.
.-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	Montre lè kontenè make a egal oswa pi gran pase pwen-kase lg (48em); otreman kache.
.-cq-show-min-md	Montre lè kontenè make a egal oswa pi gran pase pwen-kase md (30em); otreman kache.
.-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	Montre lè kontenè make a egal oswa pi gran pase pwen-kase sm (20em); otreman kache.
.-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	Montre lè kontenè make a egal oswa pi gran pase pwen-kase xl (62em); otreman kache.
.-cq-show-min-xs	Montre lè kontenè make a egal oswa pi gran pase pwen-kase xs (16em); otreman kache.
.-hidden-max-content	Kache lè viewport la egal oswa anba pwen-kase content (68.75em).
.-hidden-max-content-full-width	Kache lè viewport la egal oswa anba pwen-kase 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	Kache lè viewport la egal oswa anba pwen-kase lg (48em).
.-hidden-max-md	Kache lè viewport la egal oswa anba pwen-kase 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	Kache lè viewport la egal oswa anba pwen-kase 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	Kache lè viewport la egal oswa anba pwen-kase xl (62em).
.-hidden-max-xs	Kache lè viewport la egal oswa anba pwen-kase xs (16em).
.-hidden-min-content	Kache lè viewport la egal oswa pi gran pase pwen-kase content (68.75em).
.-hidden-min-content-full-width	Kache lè viewport la egal oswa pi gran pase pwen-kase 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	Kache lè viewport la egal oswa pi gran pase pwen-kase lg (48em).
.-hidden-min-md	Kache lè fenèt wè a nan oswa pi wo pase pwen kraze 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	Kache lè fenèt wè a nan oswa pi wo pase pwen kraze 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	Kache lè fenèt wè a nan oswa pi wo pase pwen kraze xl (62em).
.-hidden-min-xs	Kache lè fenèt wè a nan oswa pi wo pase pwen kraze xs (16em).
.-show-max-content	Montre (envès -hidden-min-content) lè fenèt wè a nan oswa anba pwen kraze content (68.75em); otreman kache.
.-show-max-content-full-width	Montre (envès -hidden-min-content-full-width) lè fenèt wè a nan oswa anba pwen kraze content-full-width (98.75em); otreman kache.
.-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	Montre (envès -hidden-min-lg) lè fenèt wè a nan oswa anba pwen kraze lg (48em); otreman kache.
.-show-max-md	Montre (envès -hidden-min-md) lè fenèt wè a nan oswa anba pwen kraze md (30em); otreman kache.
.-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	Montre (envès -hidden-min-sm) lè fenèt wè a nan oswa anba pwen kraze sm (20em); otreman kache.
.-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	Montre (envès -hidden-min-xl) lè fenèt wè a nan oswa anba pwen kraze xl (62em); otreman kache.
.-show-max-xs	Montre (envès -hidden-min-xs) lè fenèt wè a nan oswa anba pwen kraze xs (16em); otreman kache.
.-show-min-content	Montre (envès -hidden-max-content) lè fenèt wè a nan oswa pi wo pase pwen kraze content (68.75em); otreman kache.
.-show-min-content-full-width	Montre (envès -hidden-max-content-full-width) lè fenèt wè a nan oswa pi wo pase pwen kraze content-full-width (98.75em); otreman kache.
.-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	Montre (envès -hidden-max-lg) lè fenèt wè a nan oswa pi wo pase pwen kraze lg (48em); otreman kache.
.-show-min-md	Montre (envès -hidden-max-md) lè fenèt wè a nan oswa pi wo pase pwen kraze md (30em); otreman kache.
.-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	Montre (envès -hidden-max-sm) lè fenèt wè a nan oswa pi wo pase pwen kraze sm (20em); otreman kache.
.-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	Montre (envès -hidden-max-xl) lè fenèt wè a nan oswa pi wo pase pwen kraze xl (62em); otreman kache.
.-show-min-xs	Montre (envès -hidden-max-xs) lè fenèt wè a nan oswa pi wo pase pwen kraze xs (16em); otreman kache.

Pwopriyete koutim

Pwopriyete	Tip	Pa defo	Deskripsyon
--pantoken-bp-content	<length>	68.75em	Valè pwen kraze content la (68.75em, ekri manyèlman, tematize (pa nan token IR)). Ranplase li pa deplase limit konpile @media/@container anlè.
--pantoken-bp-content-full-width	<length>	98.75em	Valè pwen kraze content-full-width la (98.75em, ekri manyèlman, tematize (pa nan token IR)). Ranplase li pa deplase limit konpile @media/@container anlè.
--pantoken-bp-lg	<length>	48em	Valè pwen kraze lg la (48em, reflete --instui-component-tray-width-lg). Ranplase li pa deplase limit konpile @media/@container anlè.
--pantoken-bp-md	<length>	30em	Valè pwen kraze md la (30em, reflete --instui-component-tray-width-md). Ranplase li pa deplase limit konpile @media/@container anlè.
--pantoken-bp-sm	<length>	20em	Valè pwen kraze sm la (20em, reflete --instui-component-tray-width-sm). Ranplase li pa deplase limit konpile @media/@container anlè.
--pantoken-bp-xl	<length>	62em	Valè pwen kraze xl la (62em, reflete --instui-component-tray-width-xl). Ranplase li pa deplase limit konpile @media/@container anlè.
--pantoken-bp-xs	<length>	16em	Valè pwen kraze xs la (16em, reflete --instui-component-tray-width-xs). Ranplase li pa deplase limit konpile @media/@container anlè.

Kondisyon

Tip	Rechèch	Deskripsyon
media	(max-width: 16em)	Limit siperyè pwen kraze xs la.
media	(min-width: 16em)	Limit inferyè pwen kraze xs la.
media	(max-width: 20em)	Limit siperyè pwen kraze sm la.
media	(min-width: 20em)	Limit inferyè pwen kraze sm la.
media	(max-width: 30em)	Limit siperyè pwen kraze md la.
media	(min-width: 30em)	Limit inferyè pwen kraze md la.
media	(max-width: 48em)	Limit siperyè pwen kraze lg la.
media	(min-width: 48em)	Limit inferyè pwen kraze lg la.
media	(max-width: 62em)	Limit siperyè pwen kraze xl la.
media	(min-width: 62em)	Limit inferyè pwen kraze xl la.
media	(max-width: 68.75em)	Limit siperyè pwen kraze content la.
media	(min-width: 68.75em)	Limit inferyè pwen kraze content la.
media	(max-width: 98.75em)	Limit siperyè pwen kraze content-full-width la.
media	(min-width: 98.75em)	Limit inferyè pwen kraze content-full-width la.
container	(max-width: 16em)	Limit siperyè pwen kraze xs la, evalye kont yon kontenè make.
container	(min-width: 16em)	Limit inferyè pwen kraze xs la, evalye kont yon kontenè make.
container	(max-width: 20em)	Limit siperyè pwen kraze sm la, evalye kont yon kontenè make.
container	(min-width: 20em)	Limit inferyè pwen kraze sm la, evalye kont yon kontenè make.
container	(max-width: 30em)	Bò siperyè nan breakpoint md, evalye kont yon kontenè make.
container	(min-width: 30em)	Bò anba nan breakpoint md, evalye kont yon kontenè make.
container	(max-width: 48em)	Bò siperyè nan breakpoint lg, evalye kont yon kontenè make.
container	(min-width: 48em)	Bò anba nan breakpoint lg, evalye kont yon kontenè make.
container	(max-width: 62em)	Bò siperyè nan breakpoint xl, evalye kont yon kontenè make.
container	(min-width: 62em)	Bò anba nan breakpoint xl, evalye kont yon kontenè make.
container	(max-width: 68.75em)	Bò siperyè nan breakpoint content, evalye kont yon kontenè make.
container	(min-width: 68.75em)	Bò anba nan breakpoint content, evalye kont yon kontenè make.
container	(max-width: 98.75em)	Bò siperyè nan breakpoint content-full-width, evalye kont yon kontenè make.
container	(min-width: 98.75em)	Bò anba nan breakpoint content-full-width, evalye kont yon kontenè make.

Tokens konsome

Token	Tip	Valè
--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