CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Näytä/piilota -luokat näkymän tai säiliön leveyden mukaan teematun keskeytyspisteiden asteikolla.

.instui-hidden-max-<bp>/-hidden-min-<bp> piilottaa näytön leveyden mukaan; .instui-show-max-<bp>/-show-min-<bp> ovat käänteisiä (oletuksena piilotettuja, näkyvät vain alueen sisällä display: revert kautta); -cq--variantit reagoivat sen sijaan .instui-container-esi-isän leveyteen, eivät näkymän leveyteen. Asteikon tasot xs/sm/md/lg/xl (lähde: IR:n tray-width-komponentin tokenit) on kukin aliasoitu pitkän muodon kirjoitusasuille (x-small–x-large) ja laitenimille (mobile/phablet/tablet/laptop/desktop) — molemmat ovat vanhentuneita lyhyen nimen hyväksi — sekä skaalaamattomille, teemallisille content/content-full-width-tasoille (pääsisällön alueen maksimi-leveys).

Source: index.ts

Käyttö

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

Esimerkit

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

Muokkaajat

Muokkaaja	Kuvaus
.-cq-hidden-max-content	Piilota, kun merkitty säiliö on content-keskeytyspisteen tasolla tai sitä pienempi (68.75em).
.-cq-hidden-max-content-full-width	Piilota, kun merkitty säiliö on content-full-width-keskeytyspisteen tasolla tai sitä pienempi (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	Piilota, kun merkitty säiliö on lg-keskeytyspisteen tasolla tai sitä pienempi (48em).
.-cq-hidden-max-md	Piilota, kun merkitty säiliö on md-keskeytyspisteen tasolla tai sitä pienempi (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	Piilota, kun merkitty säiliö on sm-keskeytyspisteen tasolla tai sitä pienempi (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	Piilota, kun merkitty säiliö on xl-keskeytyspisteen tasolla tai sitä pienempi (62em).
.-cq-hidden-max-xs	Piilota, kun merkitty säiliö on xs-keskeytyspisteen tasolla tai sitä pienempi (16em).
.-cq-hidden-min-content	Piilota, kun merkitty säiliö on content-keskeytyspisteen tasolla tai sitä suurempi (68.75em).
.-cq-hidden-min-content-full-width	Piilota, kun merkitty säiliö on content-full-width-keskeytyspisteen tasolla tai sitä suurempi (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	Piilota, kun merkitty säiliö on lg-keskeytyspisteen tasolla tai sitä suurempi (48em).
.-cq-hidden-min-md	Piilota, kun merkitty säiliö on md-keskeytyspisteen tasolla tai sitä suurempi (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	Piilota, kun merkitty säiliö on sm-keskeytyspisteen tasolla tai sitä suurempi (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	Piilota, kun merkitty säiliö on xl-keskeytyspisteen tasolla tai sitä suurempi (62em).
.-cq-hidden-min-xs	Piilota, kun merkitty säiliö on xs-keskeytyspisteen tasolla tai sitä suurempi (16em).
.-cq-show-max-content	Näytä, kun merkitty säiliö on content-keskeytyspisteen tasolla tai sitä pienempi (68.75em); muuten piilotettu.
.-cq-show-max-content-full-width	Näytä, kun merkitty säiliö on content-full-width-keskeytyspisteen tasolla tai sitä pienempi (98.75em); muuten piilotettu.
.-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	Näytä, kun merkitty säiliö on lg-keskeytyspisteen tasolla tai sitä pienempi (48em); muuten piilotettu.
.-cq-show-max-md	Näytä, kun merkitty säiliö on md-keskeytyspisteen tasolla tai sitä pienempi (30em); muuten piilotettu.
.-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	Näytä, kun merkitty säiliö on sm-keskeytyspisteen tasolla tai sitä pienempi (20em); muuten piilotettu.
.-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	Näytä, kun merkitty säiliö on xl-keskeytyspisteen tasolla tai sitä pienempi (62em); muuten piilotettu.
.-cq-show-max-xs	Näytä, kun merkitty säiliö on xs-keskeytyspisteen tasolla tai sitä pienempi (16em); muuten piilotettu.
.-cq-show-min-content	Näytä, kun merkitty säiliö on content-keskeytyspisteen tasolla tai sitä suurempi (68.75em); muuten piilotettu.
.-cq-show-min-content-full-width	Näytä, kun merkitty säiliö on content-full-width-keskeytyspisteen tasolla tai sitä suurempi (98.75em); muuten piilotettu.
.-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	Näytä, kun merkitty säiliö on lg-keskeytyspisteen tasolla tai sitä suurempi (48em); muuten piilotettu.
.-cq-show-min-md	Näytä, kun merkitty säiliö on md-keskeytyspisteen tasolla tai sitä suurempi (30em); muuten piilotettu.
.-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	Näytä, kun merkitty säiliö on sm-keskeytyspisteen tasolla tai sitä suurempi (20em); muuten piilotettu.
.-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	Näytä, kun merkitty säiliö on xl-keskeytyspisteen tasolla tai sitä suurempi (62em); muuten piilotettu.
.-cq-show-min-xs	Näytä, kun merkitty säiliö on xs-keskeytyspisteen tasolla tai sitä suurempi (16em); muuten piilotettu.
.-hidden-max-content	Piilota, kun näkymä on content-keskeytyspisteen tasolla tai sitä pienempi (68.75em).
.-hidden-max-content-full-width	Piilota, kun näkymä on content-full-width-keskeytyspisteen tasolla tai sitä pienempi (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	Piilota, kun näkymä on lg-keskeytyspisteen tasolla tai sitä pienempi (48em).
.-hidden-max-md	Piilota, kun näkymä on md-keskeytyspisteen tasolla tai sitä pienempi (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	Piilota, kun näkymä on sm-keskeytyspisteen tasolla tai sitä pienempi (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	Piilota, kun näkymä on xl-keskeytyspisteen tasolla tai sitä pienempi (62em).
.-hidden-max-xs	Piilota, kun näkymä on xs-keskeytyspisteen tasolla tai sitä pienempi (16em).
.-hidden-min-content	Piilota, kun näkymä on content-keskeytyspisteen tasolla tai sitä suurempi (68.75em).
.-hidden-min-content-full-width	Piilota, kun näkymä on content-full-width-keskeytyspisteen tasolla tai sitä suurempi (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	Piilota, kun näkymä on lg-keskeytyspisteen tasolla tai sitä suurempi (48em).
.-hidden-min-md	Piilota, kun näkymän leveys on tai ylittää md-katkaisupisteen (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	Piilota, kun näkymän leveys on tai ylittää sm-katkaisupisteen (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	Piilota, kun näkymän leveys on tai ylittää xl-katkaisupisteen (62em).
.-hidden-min-xs	Piilota, kun näkymän leveys on tai ylittää xs-katkaisupisteen (16em).
.-show-max-content	Näytä (vastakohta -hidden-min-content) kun näkymän leveys on tai alle content-katkaisupisteen (68.75em); muuten piilotettu.
.-show-max-content-full-width	Näytä (vastakohta -hidden-min-content-full-width) kun näkymän leveys on tai alle content-full-width-katkaisupisteen (98.75em); muuten piilotettu.
.-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	Näytä (vastakohta -hidden-min-lg) kun näkymän leveys on tai alle lg-katkaisupisteen (48em); muuten piilotettu.
.-show-max-md	Näytä (vastakohta -hidden-min-md) kun näkymän leveys on tai alle md-katkaisupisteen (30em); muuten piilotettu.
.-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	Näytä (vastakohta -hidden-min-sm) kun näkymän leveys on tai alle sm-katkaisupisteen (20em); muuten piilotettu.
.-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	Näytä (vastakohta -hidden-min-xl) kun näkymän leveys on tai alle xl-katkaisupisteen (62em); muuten piilotettu.
.-show-max-xs	Näytä (vastakohta -hidden-min-xs) kun näkymän leveys on tai alle xs-katkaisupisteen (16em); muuten piilotettu.
.-show-min-content	Näytä (vastakohta -hidden-max-content) kun näkymän leveys on tai ylittää content-katkaisupisteen (68.75em); muuten piilotettu.
.-show-min-content-full-width	Näytä (vastakohta -hidden-max-content-full-width) kun näkymän leveys on tai ylittää content-full-width-katkaisupisteen (98.75em); muuten piilotettu.
.-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	Näytä (vastakohta -hidden-max-lg) kun näkymän leveys on tai ylittää lg-katkaisupisteen (48em); muuten piilotettu.
.-show-min-md	Näytä (vastakohta -hidden-max-md) kun näkymän leveys on tai ylittää md-katkaisupisteen (30em); muuten piilotettu.
.-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	Näytä (vastakohta -hidden-max-sm) kun näkymän leveys on tai ylittää sm-katkaisupisteen (20em); muuten piilotettu.
.-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	Näytä (vastakohta -hidden-max-xl) kun näkymän leveys on tai ylittää xl-katkaisupisteen (62em); muuten piilotettu.
.-show-min-xs	Näytä (vastakohta -hidden-max-xs) kun näkymän leveys on tai ylittää xs-katkaisupisteen (16em); muuten piilotettu.

Mukautetut ominaisuudet

Ominaisuus	Tyyppi	Oletus	Kuvaus
--pantoken-bp-content	<length>	68.75em	content-katkaisupisteen arvo (68.75em, käsin kirjoitettu, teemoitettu (ei token IR:ssä)). Ylikirjoittaminen ei siirrä käännettyjä @media/@container-kynnysarvoja ylöspäin.
--pantoken-bp-content-full-width	<length>	98.75em	content-full-width-katkaisupisteen arvo (98.75em, käsin kirjoitettu, teemoitettu (ei token IR:ssä)). Ylikirjoittaminen ei siirrä käännettyjä @media/@container-kynnysarvoja ylöspäin.
--pantoken-bp-lg	<length>	48em	lg-katkaisupisteen arvo (48em, vastaa --instui-component-tray-width-lg). Ylikirjoittaminen ei siirrä käännettyjä @media/@container-kynnysarvoja ylöspäin.
--pantoken-bp-md	<length>	30em	md-katkaisupisteen arvo (30em, vastaa --instui-component-tray-width-md). Ylikirjoittaminen ei siirrä käännettyjä @media/@container-kynnysarvoja ylöspäin.
--pantoken-bp-sm	<length>	20em	sm-katkaisupisteen arvo (20em, vastaa --instui-component-tray-width-sm). Ylikirjoittaminen ei siirrä käännettyjä @media/@container-kynnysarvoja ylöspäin.
--pantoken-bp-xl	<length>	62em	xl-katkaisupisteen arvo (62em, vastaa --instui-component-tray-width-xl). Ylikirjoittaminen ei siirrä käännettyjä @media/@container-kynnysarvoja ylöspäin.
--pantoken-bp-xs	<length>	16em	xs-katkaisupisteen arvo (16em, vastaa --instui-component-tray-width-xs). Ylikirjoittaminen ei siirrä käännettyjä @media/@container-kynnysarvoja ylöspäin.

Ehdot

Tyyppi	Kysely	Kuvaus
media	(max-width: 16em)	Katkaisupisteen xs yläraja.
media	(min-width: 16em)	Katkaisupisteen xs alaraja.
media	(max-width: 20em)	Katkaisupisteen sm yläraja.
media	(min-width: 20em)	Katkaisupisteen sm alaraja.
media	(max-width: 30em)	Katkaisupisteen md yläraja.
media	(min-width: 30em)	Katkaisupisteen md alaraja.
media	(max-width: 48em)	Katkaisupisteen lg yläraja.
media	(min-width: 48em)	Katkaisupisteen lg alaraja.
media	(max-width: 62em)	Katkaisupisteen xl yläraja.
media	(min-width: 62em)	Katkaisupisteen xl alaraja.
media	(max-width: 68.75em)	Katkaisupisteen content yläraja.
media	(min-width: 68.75em)	Katkaisupisteen content alaraja.
media	(max-width: 98.75em)	Katkaisupisteen content-full-width yläraja.
media	(min-width: 98.75em)	Katkaisupisteen content-full-width alaraja.
container	(max-width: 16em)	Katkaisupisteen xs yläraja, arvioituna merkityn säiliön perusteella.
container	(min-width: 16em)	Katkaisupisteen xs alaraja, arvioituna merkityn säiliön perusteella.
container	(max-width: 20em)	Katkaisupisteen sm yläraja, arvioituna merkityn säiliön perusteella.
container	(min-width: 20em)	Katkaisupisteen sm alaraja, arvioituna merkityn säiliön perusteella.
container	(max-width: 30em)	md-murtopisteen yläraja, arvioitu merkityn säiliön perusteella.
container	(min-width: 30em)	md-murtopisteen alaraja, arvioitu merkityn säiliön perusteella.
container	(max-width: 48em)	lg-murtopisteen yläraja, arvioitu merkityn säiliön perusteella.
container	(min-width: 48em)	lg-murtopisteen alaraja, arvioitu merkityn säiliön perusteella.
container	(max-width: 62em)	xl-murtopisteen yläraja, arvioitu merkityn säiliön perusteella.
container	(min-width: 62em)	xl-murtopisteen alaraja, arvioitu merkityn säiliön perusteella.
container	(max-width: 68.75em)	content-murtopisteen yläraja, arvioitu merkityn säiliön perusteella.
container	(min-width: 68.75em)	content-murtopisteen alaraja, arvioitu merkityn säiliön perusteella.
container	(max-width: 98.75em)	content-full-width-murtopisteen yläraja, arvioitu merkityn säiliön perusteella.
container	(min-width: 98.75em)	content-full-width-murtopisteen alaraja, arvioitu merkityn säiliön perusteella.

Käytetyt tokenit

Token	Tyyppi	Arvo
--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