CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Sýna/fela klasa byggða á sjónsviðs- eða ílátsbreidd yfir þemabundna brotpunktastiginu.

.instui-hidden-max-<bp>/-hidden-min-<bp> fela eftir sjónsviðsbreidd; .instui-show-max-<bp>/-show-min-<bp> eru öfugir (falnir sjálfgefið, birtir aðeins innan sviðs með display: revert); -cq--afbrigðin bregðast í staðinn við breidd arfafa .instui-container, ekki sjónsviðsins. Stig kvarðans xs/sm/md/lg/xl (sótt úr IR tray-width component tokens) hafa hvert um sig langformlega aliasa (x-small–x-large) og tækinafn (mobile/phablet/tablet/laptop/desktop) — bæði úrelt zug short name — auk óskölunar, þemabundnu content/content-full-width stiganna (hámarksbreidd megin efnis).

Source: index.ts

Notkun

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

Dæmi

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

Breytingar

Breyti	Lýsing
.-cq-hidden-max-content	Fela þegar tilgreint ílát er á eða undir brotpunktinum content (68.75em).
.-cq-hidden-max-content-full-width	Fela þegar tilgreint ílát er á eða undir brotpunktinum 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	Fela þegar tilgreint ílát er á eða undir brotpunktinum lg (48em).
.-cq-hidden-max-md	Fela þegar tilgreint ílát er á eða undir brotpunktinum 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	Fela þegar tilgreint ílát er á eða undir brotpunktinum 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	Fela þegar tilgreint ílát er á eða undir brotpunktinum xl (62em).
.-cq-hidden-max-xs	Fela þegar tilgreint ílát er á eða undir brotpunktinum xs (16em).
.-cq-hidden-min-content	Fela þegar tilgreint ílát er á eða yfir brotpunktinum content (68.75em).
.-cq-hidden-min-content-full-width	Fela þegar tilgreint ílát er á eða yfir brotpunktinum 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	Fela þegar tilgreint ílát er á eða yfir brotpunktinum lg (48em).
.-cq-hidden-min-md	Fela þegar tilgreint ílát er á eða yfir brotpunktinum 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	Fela þegar tilgreint ílát er á eða yfir brotpunktinum 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	Fela þegar tilgreint ílát er á eða yfir brotpunktinum xl (62em).
.-cq-hidden-min-xs	Fela þegar tilgreint ílát er á eða yfir brotpunktinum xs (16em).
.-cq-show-max-content	Sýna þegar tilgreint ílát er á eða undir content brotpunktinum (68.75em); annars falin.
.-cq-show-max-content-full-width	Sýna þegar tilgreint ílát er á eða undir content-full-width brotpunktinum (98.75em); annars falin.
.-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	Sýna þegar tilgreint ílát er á eða undir lg brotpunktinum (48em); annars falin.
.-cq-show-max-md	Sýna þegar tilgreint ílát er á eða undir md brotpunktinum (30em); annars falin.
.-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	Sýna þegar tilgreint ílát er á eða undir sm brotpunktinum (20em); annars falin.
.-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	Sýna þegar tilgreint ílát er á eða undir xl brotpunktinum (62em); annars falin.
.-cq-show-max-xs	Sýna þegar tilgreint ílát er á eða undir xs brotpunktinum (16em); annars falin.
.-cq-show-min-content	Sýna þegar tilgreint ílát er á eða yfir content brotpunktinum (68.75em); annars falin.
.-cq-show-min-content-full-width	Sýna þegar tilgreint ílát er á eða yfir content-full-width brotpunktinum (98.75em); annars falin.
.-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	Sýna þegar tilgreint ílát er á eða yfir lg brotpunktinum (48em); annars falin.
.-cq-show-min-md	Sýna þegar tilgreint ílát er á eða yfir md brotpunktinum (30em); annars falin.
.-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	Sýna þegar tilgreint ílát er á eða yfir sm brotpunktinum (20em); annars falin.
.-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	Sýna þegar tilgreint ílát er á eða yfir xl brotpunktinum (62em); annars falin.
.-cq-show-min-xs	Sýna þegar tilgreint ílát er á eða yfir xs brotpunktinum (16em); annars falin.
.-hidden-max-content	Fela þegar sjónsviðið er á eða undir content brotpunktinum (68.75em).
.-hidden-max-content-full-width	Fela þegar sjónsviðið er á eða undir content-full-width brotpunktinum (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	Fela þegar sjónsviðið er á eða undir lg brotpunktinum (48em).
.-hidden-max-md	Fela þegar sjónsviðið er á eða undir md brotpunktinum (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	Fela þegar sjónsviðið er á eða undir sm brotpunktinum (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	Fela þegar sjónsviðið er á eða undir xl brotpunktinum (62em).
.-hidden-max-xs	Fela þegar sjónsviðið er á eða undir xs brotpunktinum (16em).
.-hidden-min-content	Fela þegar sjónsviðið er á eða yfir content brotpunktinum (68.75em).
.-hidden-min-content-full-width	Fela þegar sjónsviðið er á eða yfir content-full-width brotpunktinum (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	Fela þegar sjónsviðið er á eða yfir lg brotpunktinum (48em).
.-hidden-min-md	Fela þegar gluggastærðin er á eða fyrir ofan md brotpunktinn (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	Fela þegar gluggastærðin er á eða fyrir ofan sm brotpunktinn (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	Fela þegar gluggastærðin er á eða fyrir ofan xl brotpunktinn (62em).
.-hidden-min-xs	Fela þegar gluggastærðin er á eða fyrir ofan xs brotpunktinn (16em).
.-show-max-content	Sýna (andhverfa af -hidden-min-content) þegar gluggastærðin er á eða fyrir neðan content brotpunktinn (68.75em); falin annars.
.-show-max-content-full-width	Sýna (andhverfa af -hidden-min-content-full-width) þegar gluggastærðin er á eða fyrir neðan content-full-width brotpunktinn (98.75em); falin annars.
.-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	Sýna (andhverfa af -hidden-min-lg) þegar gluggastærðin er á eða fyrir neðan lg brotpunktinn (48em); falin annars.
.-show-max-md	Sýna (andhverfa af -hidden-min-md) þegar gluggastærðin er á eða fyrir neðan md brotpunktinn (30em); falin annars.
.-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	Sýna (andhverfa af -hidden-min-sm) þegar gluggastærðin er á eða fyrir neðan sm brotpunktinn (20em); falin annars.
.-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	Sýna (andhverfa af -hidden-min-xl) þegar gluggastærðin er á eða fyrir neðan xl brotpunktinn (62em); falin annars.
.-show-max-xs	Sýna (andhverfa af -hidden-min-xs) þegar gluggastærðin er á eða fyrir neðan xs brotpunktinn (16em); falin annars.
.-show-min-content	Sýna (andhverfa af -hidden-max-content) þegar gluggastærðin er á eða fyrir ofan content brotpunktinn (68.75em); falin annars.
.-show-min-content-full-width	Sýna (andhverfa af -hidden-max-content-full-width) þegar gluggastærðin er á eða fyrir ofan content-full-width brotpunktinn (98.75em); falin annars.
.-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	Sýna (andhverfa af -hidden-max-lg) þegar gluggastærðin er á eða fyrir ofan lg brotpunktinn (48em); falin annars.
.-show-min-md	Sýna (andhverfa af -hidden-max-md) þegar gluggastærðin er á eða fyrir ofan md brotpunktinn (30em); falin annars.
.-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	Sýna (andhverfa af -hidden-max-sm) þegar gluggastærðin er á eða fyrir ofan sm brotpunktinn (20em); falin annars.
.-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	Sýna (andhverfa af -hidden-max-xl) þegar gluggastærðin er á eða fyrir ofan xl brotpunktinn (62em); falin annars.
.-show-min-xs	Sýna (andhverfa af -hidden-max-xs) þegar gluggastærðin er á eða fyrir ofan xs brotpunktinn (16em); falin annars.

Sérsniðnar eigindir

Eiginleiki	Tegund	Sjálfgefið	Lýsing
--pantoken-bp-content	<length>	68.75em	Gildi content brotpunktarins (68.75em, handskrifað, með þema (ekki í token IR)). Að yfirskrifa það flytur ekki samsettu @media/@container þröskuldana upp.
--pantoken-bp-content-full-width	<length>	98.75em	Gildi content-full-width brotpunktarins (98.75em, handskrifað, með þema (ekki í token IR)). Að yfirskrifa það flytur ekki samsettu @media/@container þröskuldana upp.
--pantoken-bp-lg	<length>	48em	Gildi lg brotpunktarins (48em, endurspeglar --instui-component-tray-width-lg). Að yfirskrifa það flytur ekki samsettu @media/@container þröskuldana upp.
--pantoken-bp-md	<length>	30em	Gildi md brotpunktarins (30em, endurspeglar --instui-component-tray-width-md). Að yfirskrifa það flytur ekki samsettu @media/@container þröskuldana upp.
--pantoken-bp-sm	<length>	20em	Gildi sm brotpunktarins (20em, endurspeglar --instui-component-tray-width-sm). Að yfirskrifa það flytur ekki samsettu @media/@container þröskuldana upp.
--pantoken-bp-xl	<length>	62em	Gildi xl brotpunktarins (62em, endurspeglar --instui-component-tray-width-xl). Að yfirskrifa það flytur ekki samsettu @media/@container þröskuldana upp.
--pantoken-bp-xs	<length>	16em	Gildi xs brotpunktarins (16em, endurspeglar --instui-component-tray-width-xs). Að yfirskrifa það flytur ekki samsettu @media/@container þröskuldana upp.

Skilyrði

Tegund	Fyrirspurn	Lýsing
media	(max-width: 16em)	Efri mörk xs brotpunktarins.
media	(min-width: 16em)	Neðri mörk xs brotpunktarins.
media	(max-width: 20em)	Efri mörk sm brotpunktarins.
media	(min-width: 20em)	Neðri mörk sm brotpunktarins.
media	(max-width: 30em)	Efri mörk md brotpunktarins.
media	(min-width: 30em)	Neðri mörk md brotpunktarins.
media	(max-width: 48em)	Efri mörk lg brotpunktarins.
media	(min-width: 48em)	Neðri mörk lg brotpunktarins.
media	(max-width: 62em)	Efri mörk xl brotpunktarins.
media	(min-width: 62em)	Neðri mörk xl brotpunktarins.
media	(max-width: 68.75em)	Efri mörk content brotpunktarins.
media	(min-width: 68.75em)	Neðri mörk content brotpunktarins.
media	(max-width: 98.75em)	Efri mörk content-full-width brotpunktarins.
media	(min-width: 98.75em)	Neðri mörk content-full-width brotpunktarins.
container	(max-width: 16em)	Efri mörk xs brotpunktarins, metið miðað við merktan gáma.
container	(min-width: 16em)	Neðri mörk xs brotpunktarins, metið miðað við merktan gáma.
container	(max-width: 20em)	Efri mörk sm brotpunktarins, metið miðað við merktan gáma.
container	(min-width: 20em)	Neðri mörk sm brotpunktarins, metið miðað við merktan gáma.
container	(max-width: 30em)	Efri mörk md brotpunktar, metin gagnvart merktu íláti.
container	(min-width: 30em)	Neðri mörk md brotpunktar, metin gagnvart merktu íláti.
container	(max-width: 48em)	Efri mörk lg brotpunktar, metin gagnvart merktu íláti.
container	(min-width: 48em)	Neðri mörk lg brotpunktar, metin gagnvart merktu íláti.
container	(max-width: 62em)	Efri mörk xl brotpunktar, metin gagnvart merktu íláti.
container	(min-width: 62em)	Neðri mörk xl brotpunktar, metin gagnvart merktu íláti.
container	(max-width: 68.75em)	Efri mörk content brotpunktar, metin gagnvart merktu íláti.
container	(min-width: 68.75em)	Neðri mörk content brotpunktar, metin gagnvart merktu íláti.
container	(max-width: 98.75em)	Efri mörk content-full-width brotpunktar, metin gagnvart merktu íláti.
container	(min-width: 98.75em)	Neðri mörk content-full-width brotpunktar, metin gagnvart merktu íláti.

Notuð tákn

Token	Tegund	Gildi
--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