CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Viewport- vai kontejnera-laivvi čájehit/lokcinit luohkkat maŋŋebealafálut interval-vahkka maŋŋebeallain.

.instui-hidden-max-<bp>/-hidden-min-<bp> lokcinit viewport-laivvi rastervuođa mielde; .instui-show-max-<bp>/-show-min-<bp> leat moattemearkkalaš (lokcinon standordesta, čájehuvvon dušše vahkka sisa via display: revert); dat -cq- variašuvnnat vuehttet .instui-container maŋŋebealageažes laivvi maŋŋel, ii viewport-a laivvi. Maŋŋebeallafálut vahkkat xs/sm/md/lg/xl (geažes IR-a vahkka-laivvi komponeantta merkaš) leat goabbáge vahkka-nammain (x-small–x-large) ja reaidu namma (mobile/phablet/tablet/laptop/desktop) — goabbáge seailladuvvon oamastuvvan vahkka-namma dihte — maŋŋel unreastered, teamaš content/content-full-width vahkkat (pealge sátnejeakcu guovllu maksimala-laivvi).

Source: index.ts

Buktáhašvuohta

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

Exempla

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

Modifisuvnnat

Modifiserer	Deskripción
.-cq-hidden-max-content	Lokcinit go maŕkiduvvon kontejnera lea vai alit content interval (68.75em).
.-cq-hidden-max-content-full-width	Lokcinit go maŕkiduvvon kontejnera lea vai alit content-full-width interval (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	Lokcinit go maŕkiduvvon kontejnera lea vai alit lg interval (48em).
.-cq-hidden-max-md	Lokcinit go maŕkiduvvon kontejnera lea vai alit md interval (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	Lokcinit go maŕkiduvvon kontejnera lea vai alit sm interval (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	Lokcinit go maŕkiduvvon kontejnera lea vai alit xl interval (62em).
.-cq-hidden-max-xs	Lokcinit go maŕkiduvvon kontejnera lea vai alit xs interval (16em).
.-cq-hidden-min-content	Lokcinit go maŕkiduvvon kontejnera lea vai alehkos content interval (68.75em).
.-cq-hidden-min-content-full-width	Lokcinit go maŕkiduvvon kontejnera lea vai alehkos content-full-width interval (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	Lokcinit go maŕkiduvvon kontejnera lea vai alehkos lg interval (48em).
.-cq-hidden-min-md	Lokcinit go maŕkiduvvon kontejnera lea vai alehkos md interval (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	Lokcinit go maŕkiduvvon kontejnera lea vai alehkos sm interval (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	Lokcinit go maŕkiduvvon kontejnera lea vai alehkos xl interval (62em).
.-cq-hidden-min-xs	Lokcinit go maŕkiduvvon kontejnera lea vai alehkos xs interval (16em).
.-cq-show-max-content	Čájehit go maŕkiduvvon kontejnera lea vai alit content interval (68.75em); lokcinon maŋŋel.
.-cq-show-max-content-full-width	Čájehit go maŕkiduvvon kontejnera lea vai alit content-full-width interval (98.75em); lokcinon maŋŋel.
.-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	Čájehit go maŕkiduvvon kontejnera lea vai alit lg interval (48em); lokcinon maŋŋel.
.-cq-show-max-md	Čájehit go maŕkiduvvon kontejnera lea vai alit md interval (30em); lokcinon maŋŋel.
.-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	Čájehit go maŕkiduvvon kontejnera lea vai alit sm interval (20em); lokcinon maŋŋel.
.-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	Čájehit go maŕkiduvvon kontejnera lea vai alit xl interval (62em); lokcinon maŋŋel.
.-cq-show-max-xs	Čájehit go maŕkiduvvon kontejnera lea vai alit xs interval (16em); lokcinon maŋŋel.
.-cq-show-min-content	Čájehit go maŕkiduvvon kontejnera lea vai alehkos content interval (68.75em); lokcinon maŋŋel.
.-cq-show-min-content-full-width	Čájehit go maŕkiduvvon kontejnera lea vai alehkos content-full-width interval (98.75em); lokcinon maŋŋel.
.-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	Čájehit go maŕkiduvvon kontejnera lea vai alehkos lg interval (48em); lokcinon maŋŋel.
.-cq-show-min-md	Čájehit go maŕkiduvvon kontejnera lea vai alehkos md interval (30em); lokcinon maŋŋel.
.-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	Čájehit go maŕkiduvvon kontejnera lea vai alehkos sm interval (20em); lokcinon maŋŋel.
.-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	Čájehit go maŕkiduvvon kontejnera lea vai alehkos xl interval (62em); lokcinon maŋŋel.
.-cq-show-min-xs	Čájehit go maŕkiduvvon kontejnera lea vai alehkos xs interval (16em); lokcinon maŋŋel.
.-hidden-max-content	Lokcinit go viewport lea vai alit content interval (68.75em).
.-hidden-max-content-full-width	Lokcinit go viewport lea vai alit content-full-width interval (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	Lokcinit go viewport lea vai alit lg interval (48em).
.-hidden-max-md	Lokcinit go viewport lea vai alit md interval (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	Lokcinit go viewport lea vai alit sm interval (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	Lokcinit go viewport lea vai alit xl interval (62em).
.-hidden-max-xs	Lokcinit go viewport lea vai alit xs interval (16em).
.-hidden-min-content	Lokcinit go viewport lea vai alehkos content interval (68.75em).
.-hidden-min-content-full-width	Lokcinit go viewport lea vai alehkos content-full-width interval (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	Lokcinit go viewport lea vai alehkos lg interval (48em).
.-hidden-min-md	Peitá jus viewport lea maŋŋil dahje nuppi md mátkku (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	Peitá jus viewport lea maŋŋil dahje nuppi sm mátkku (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	Peitá jus viewport lea maŋŋil dahje nuppi xl mátkku (62em).
.-hidden-min-xs	Peitá jus viewport lea maŋŋil dahje nuppi xs mátkku (16em).
.-show-max-content	Ollušeahttan (-hidden-min-content gearggus) jus viewport lea almmuheapmi dahje neboheapmi content mátkku (68.75em); muhto muhto sii leat peitet.
.-show-max-content-full-width	Ollušeahttan (-hidden-min-content-full-width gearggus) jus viewport lea almmuheapmi dahje neboheapmi content-full-width mátkku (98.75em); muhto muhto sii leat peitet.
.-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	Ollušeahttan (-hidden-min-lg gearggus) jus viewport lea almmuheapmi dahje neboheapmi lg mátkku (48em); muhto muhto sii leat peitet.
.-show-max-md	Ollušeahttan (-hidden-min-md gearggus) jus viewport lea almmuheapmi dahje neboheapmi md mátkku (30em); muhto muhto sii leat peitet.
.-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	Ollušeahttan (-hidden-min-sm gearggus) jus viewport lea almmuheapmi dahje neboheapmi sm mátkku (20em); muhto muhto sii leat peitet.
.-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	Ollušeahttan (-hidden-min-xl gearggus) jus viewport lea almmuheapmi dahje neboheapmi xl mátkku (62em); muhto muhto sii leat peitet.
.-show-max-xs	Ollušeahttan (-hidden-min-xs gearggus) jus viewport lea almmuheapmi dahje neboheapmi xs mátkku (16em); muhto muhto sii leat peitet.
.-show-min-content	Ollušeahttan (-hidden-max-content gearggus) jus viewport lea maŋŋil dahje nuppi content mátkku (68.75em); muhto muhto sii leat peitet.
.-show-min-content-full-width	Ollušeahttan (-hidden-max-content-full-width gearggus) jus viewport lea maŋŋil dahje nuppi content-full-width mátkku (98.75em); muhto muhto sii leat peitet.
.-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	Ollušeahttan (-hidden-max-lg gearggus) jus viewport lea maŋŋil dahje nuppi lg mátkku (48em); muhto muhto sii leat peitet.
.-show-min-md	Ollušeahttan (-hidden-max-md gearggus) jus viewport lea maŋŋil dahje nuppi md mátkku (30em); muhto muhto sii leat peitet.
.-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	Ollušeahttan (-hidden-max-sm gearggus) jus viewport lea maŋŋil dahje nuppi sm mátkku (20em); muhto muhto sii leat peitet.
.-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	Ollušeahttan (-hidden-max-xl gearggus) jus viewport lea maŋŋil dahje nuppi xl mátkku (62em); muhto muhto sii leat peitet.
.-show-min-xs	Ollušeahttan (-hidden-max-xs gearggus) jus viewport lea maŋŋil dahje nuppi xs mátkku (16em); muhto muhto sii leat peitet.

Ovvun-propertijat

Property	Type	Default	Deskripción
--pantoken-bp-content	<length>	68.75em	content mátkku ( 68.75em, čájehahttu, temašuvdna (ii lea token IR:s)). Máŋggabeassat dávjá doarru ii movttojuvvo compilevuođa @media/@container rievttut ovtta.
--pantoken-bp-content-full-width	<length>	98.75em	content-full-width mátkku ( 98.75em, čájehahttu, temašuvdna (ii lea token IR:s)). Máŋggabeassat dávjá doarru ii movttojuvvo compilevuođa @media/@container rievttut ovtta.
--pantoken-bp-lg	<length>	48em	lg mátkku ( 48em, dahkkiid --instui-component-tray-width-lg). Máŋggabeassat dávjá doarru ii movttojuvvo compilevuođa @media/@container rievttut ovtta.
--pantoken-bp-md	<length>	30em	md mátkku ( 30em, dahkkiid --instui-component-tray-width-md). Máŋggabeassat dávjá doarru ii movttojuvvo compilevuođa @media/@container rievttut ovtta.
--pantoken-bp-sm	<length>	20em	sm mátkku ( 20em, dahkkiid --instui-component-tray-width-sm). Máŋggabeassat dávjá doarru ii movttojuvvo compilevuođa @media/@container rievttut ovtta.
--pantoken-bp-xl	<length>	62em	xl mátkku ( 62em, dahkkiid --instui-component-tray-width-xl). Máŋggabeassat dávjá doarru ii movttojuvvo compilevuođa @media/@container rievttut ovtta.
--pantoken-bp-xs	<length>	16em	xs mátkku ( 16em, dahkkiid --instui-component-tray-width-xs). Máŋggabeassat dávjá doarru ii movttojuvvo compilevuođa @media/@container rievttut ovtta.

Divottat / Kondišuvnnat

Type	Kysimus	Deskripción
media	(max-width: 16em)	Ovttas rievtta xs mátkku.
media	(min-width: 16em)	Irvuollla rievtta xs mátkku.
media	(max-width: 20em)	Ovttas rievtta sm mátkku.
media	(min-width: 20em)	Irvuollla rievtta sm mátkku.
media	(max-width: 30em)	Ovttas rievtta md mátkku.
media	(min-width: 30em)	Irvuollla rievtta md mátkku.
media	(max-width: 48em)	Ovttas rievtta lg mátkku.
media	(min-width: 48em)	Irvuollla rievtta lg mátkku.
media	(max-width: 62em)	Ovttas rievtta xl mátkku.
media	(min-width: 62em)	Irvuollla rievtta xl mátkku.
media	(max-width: 68.75em)	Ovttas rievtta content mátkku.
media	(min-width: 68.75em)	Irvuollla rievtta content mátkku.
media	(max-width: 98.75em)	Ovttas rievtta content-full-width mátkku.
media	(min-width: 98.75em)	Irvuollla rievtta content-full-width mátkku.
container	(max-width: 16em)	Ovttas rievtta xs mátkku, gullat muhtun markeriid kontainerii.
container	(min-width: 16em)	Irvuollla rievtta xs mátkku, gullat muhtun markeriid kontainerii.
container	(max-width: 20em)	Ovttas rievtta sm mátkku, gullat muhtun markeriid kontainerii.
container	(min-width: 20em)	Irvuollla rievtta sm mátkku, gullat muhtun markeriid kontainerii.
container	(max-width: 30em)	Ovttasrađđu md-breakpointa, ge ráhkadettiin markeeradeami kontainerii.
container	(min-width: 30em)	Dolusrađđu md-breakpointa, ge ráhkadettiin markeeradeami kontainerii.
container	(max-width: 48em)	Ovttasrađđu lg-breakpointa, ge ráhkadettiin markeeradeami kontainerii.
container	(min-width: 48em)	Dolusrađđu lg-breakpointa, ge ráhkadettiin markeeradeami kontainerii.
container	(max-width: 62em)	Ovttasrađđu xl-breakpointa, ge ráhkadettiin markeeradeami kontainerii.
container	(min-width: 62em)	Dolusrađđu xl-breakpointa, ge ráhkadettiin markeeradeami kontainerii.
container	(max-width: 68.75em)	Ovttasrađđu content-breakpointa, ge ráhkadettiin markeeradeami kontainerii.
container	(min-width: 68.75em)	Dolusrađđu content-breakpointa, ge ráhkadettiin markeeradeami kontainerii.
container	(max-width: 98.75em)	Ovttasrađđu content-full-width-breakpointa, ge ráhkadettiin markeeradeami kontainerii.
container	(min-width: 98.75em)	Dolusrađđu content-full-width-breakpointa, ge ráhkadettiin markeeradeami kontainerii.

Tokenat gaskkalit

Token	Type	Vaššun
--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