CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Vis/skjul-klasser baseret på viewport- eller container-bredde på tværs af en tematisk breakpoint-skala.

.instui-hidden-max-<bp>/-hidden-min-<bp> skjuler efter viewport-bredde; .instui-show-max-<bp>/-show-min-<bp> er inverse (skjult som standard, vist kun inden for området via display: revert); -cq--varianterne reagerer i stedet på en .instui-container-forfaders bredde, ikke viewportens. Skalatrinene xs/sm/md/lg/xl (hentet fra IR'ens tray-width component tokens) er hver aliasseret til en langform (x-small–x-large) og et enhedsnavn (mobile/phablet/tablet/laptop/desktop) — begge forældede til fordel for det korte navn — plus de uskalerede, tematiske content/content-full-width trin (hovedindholdsområdets max-bredde).

Source: index.ts

Brug

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

Eksempler

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

Modifikatorer

Modifikator	Beskrivelse
.-cq-hidden-max-content	Skjul når den markerede container er ved eller under content breakpointet (68.75em).
.-cq-hidden-max-content-full-width	Skjul når den markerede container er ved eller under content-full-width breakpointet (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	Skjul når den markerede container er ved eller under lg breakpointet (48em).
.-cq-hidden-max-md	Skjul når den markerede container er ved eller under md breakpointet (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	Skjul når den markerede container er ved eller under sm breakpointet (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	Skjul når den markerede container er ved eller under xl breakpointet (62em).
.-cq-hidden-max-xs	Skjul når den markerede container er ved eller under xs breakpointet (16em).
.-cq-hidden-min-content	Skjul når den markerede container er ved eller over content breakpointet (68.75em).
.-cq-hidden-min-content-full-width	Skjul når den markerede container er ved eller over content-full-width breakpointet (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	Skjul når den markerede container er ved eller over lg breakpointet (48em).
.-cq-hidden-min-md	Skjul når den markerede container er ved eller over md breakpointet (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	Skjul når den markerede container er ved eller over sm breakpointet (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	Skjul når den markerede container er ved eller over xl breakpointet (62em).
.-cq-hidden-min-xs	Skjul når den markerede container er ved eller over xs breakpointet (16em).
.-cq-show-max-content	Vis når den markerede container er ved eller under content breakpointet (68.75em); ellers skjult.
.-cq-show-max-content-full-width	Vis når den markerede container er ved eller under content-full-width breakpointet (98.75em); ellers skjult.
.-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	Vis når den markerede container er ved eller under lg breakpointet (48em); ellers skjult.
.-cq-show-max-md	Vis når den markerede container er ved eller under md breakpointet (30em); ellers skjult.
.-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	Vis når den markerede container er ved eller under sm breakpointet (20em); ellers skjult.
.-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	Vis når den markerede container er ved eller under xl breakpointet (62em); ellers skjult.
.-cq-show-max-xs	Vis når den markerede container er ved eller under xs breakpointet (16em); ellers skjult.
.-cq-show-min-content	Vis når den markerede container er ved eller over content breakpointet (68.75em); ellers skjult.
.-cq-show-min-content-full-width	Vis når den markerede container er ved eller over content-full-width breakpointet (98.75em); ellers skjult.
.-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	Vis når den markerede container er ved eller over lg breakpointet (48em); ellers skjult.
.-cq-show-min-md	Vis når den markerede container er ved eller over md breakpointet (30em); ellers skjult.
.-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	Vis når den markerede container er ved eller over sm breakpointet (20em); ellers skjult.
.-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	Vis når den markerede container er ved eller over xl breakpointet (62em); ellers skjult.
.-cq-show-min-xs	Vis når den markerede container er ved eller over xs breakpointet (16em); ellers skjult.
.-hidden-max-content	Skjul når viewporten er ved eller under content breakpointet (68.75em).
.-hidden-max-content-full-width	Skjul når viewporten er ved eller under content-full-width breakpointet (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	Skjul når viewporten er ved eller under lg breakpointet (48em).
.-hidden-max-md	Skjul når viewporten er ved eller under md breakpointet (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	Skjul når viewporten er ved eller under sm breakpointet (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	Skjul når viewporten er ved eller under xl breakpointet (62em).
.-hidden-max-xs	Skjul når viewporten er ved eller under xs breakpointet (16em).
.-hidden-min-content	Skjul når viewporten er ved eller over content breakpointet (68.75em).
.-hidden-min-content-full-width	Skjul når viewporten er ved eller over content-full-width breakpointet (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	Skjul når viewporten er ved eller over lg breakpointet (48em).
.-hidden-min-md	Skjul når visningsområdet er på eller over md breakpointet (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	Skjul når visningsområdet er på eller over sm breakpointet (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	Skjul når visningsområdet er på eller over xl breakpointet (62em).
.-hidden-min-xs	Skjul når visningsområdet er på eller over xs breakpointet (16em).
.-show-max-content	Vis (det modsatte af -hidden-min-content) når visningsområdet er på eller under content breakpointet (68.75em); skjult ellers.
.-show-max-content-full-width	Vis (det modsatte af -hidden-min-content-full-width) når visningsområdet er på eller under content-full-width breakpointet (98.75em); skjult ellers.
.-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	Vis (det modsatte af -hidden-min-lg) når visningsområdet er på eller under lg breakpointet (48em); skjult ellers.
.-show-max-md	Vis (det modsatte af -hidden-min-md) når visningsområdet er på eller under md breakpointet (30em); skjult ellers.
.-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	Vis (det modsatte af -hidden-min-sm) når visningsområdet er på eller under sm breakpointet (20em); skjult ellers.
.-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	Vis (det modsatte af -hidden-min-xl) når visningsområdet er på eller under xl breakpointet (62em); skjult ellers.
.-show-max-xs	Vis (det modsatte af -hidden-min-xs) når visningsområdet er på eller under xs breakpointet (16em); skjult ellers.
.-show-min-content	Vis (det modsatte af -hidden-max-content) når visningsområdet er på eller over content breakpointet (68.75em); skjult ellers.
.-show-min-content-full-width	Vis (det modsatte af -hidden-max-content-full-width) når visningsområdet er på eller over content-full-width breakpointet (98.75em); skjult ellers.
.-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	Vis (det modsatte af -hidden-max-lg) når visningsområdet er på eller over lg breakpointet (48em); skjult ellers.
.-show-min-md	Vis (det modsatte af -hidden-max-md) når visningsområdet er på eller over md breakpointet (30em); skjult ellers.
.-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	Vis (det modsatte af -hidden-max-sm) når visningsområdet er på eller over sm breakpointet (20em); skjult ellers.
.-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	Vis (det modsatte af -hidden-max-xl) når visningsområdet er på eller over xl breakpointet (62em); skjult ellers.
.-show-min-xs	Vis (det modsatte af -hidden-max-xs) når visningsområdet er på eller over xs breakpointet (16em); skjult ellers.

Brugerdefinerede egenskaber

Egenskab	Type	Standard	Beskrivelse
--pantoken-bp-content	<length>	68.75em	Værdien for content breakpointet (68.75em, håndforfattet, themed (ikke i token IR)). At tilsidesætte den flytter ikke de kompilerede @media/@container tærskler opad.
--pantoken-bp-content-full-width	<length>	98.75em	Værdien for content-full-width breakpointet (98.75em, håndforfattet, themed (ikke i token IR)). At tilsidesætte den flytter ikke de kompilerede @media/@container tærskler opad.
--pantoken-bp-lg	<length>	48em	Værdien for lg breakpointet (48em, spejler --instui-component-tray-width-lg). At tilsidesætte den flytter ikke de kompilerede @media/@container tærskler opad.
--pantoken-bp-md	<length>	30em	Værdien for md breakpointet (30em, spejler --instui-component-tray-width-md). At tilsidesætte den flytter ikke de kompilerede @media/@container tærskler opad.
--pantoken-bp-sm	<length>	20em	Værdien for sm breakpointet (20em, spejler --instui-component-tray-width-sm). At tilsidesætte den flytter ikke de kompilerede @media/@container tærskler opad.
--pantoken-bp-xl	<length>	62em	Værdien for xl breakpointet (62em, spejler --instui-component-tray-width-xl). At tilsidesætte den flytter ikke de kompilerede @media/@container tærskler opad.
--pantoken-bp-xs	<length>	16em	Værdien for xs breakpointet (16em, spejler --instui-component-tray-width-xs). At tilsidesætte den flytter ikke de kompilerede @media/@container tærskler opad.

Betingelser

Type	Forespørgsel	Beskrivelse
media	(max-width: 16em)	Øvre grænse for xs breakpointet.
media	(min-width: 16em)	Nedre grænse for xs breakpointet.
media	(max-width: 20em)	Øvre grænse for sm breakpointet.
media	(min-width: 20em)	Nedre grænse for sm breakpointet.
media	(max-width: 30em)	Øvre grænse for md breakpointet.
media	(min-width: 30em)	Nedre grænse for md breakpointet.
media	(max-width: 48em)	Øvre grænse for lg breakpointet.
media	(min-width: 48em)	Nedre grænse for lg breakpointet.
media	(max-width: 62em)	Øvre grænse for xl breakpointet.
media	(min-width: 62em)	Nedre grænse for xl breakpointet.
media	(max-width: 68.75em)	Øvre grænse for content breakpointet.
media	(min-width: 68.75em)	Nedre grænse for content breakpointet.
media	(max-width: 98.75em)	Øvre grænse for content-full-width breakpointet.
media	(min-width: 98.75em)	Nedre grænse for content-full-width breakpointet.
container	(max-width: 16em)	Øvre grænse for xs breakpointet, evalueret i forhold til en markeret container.
container	(min-width: 16em)	Nedre grænse for xs breakpointet, evalueret i forhold til en markeret container.
container	(max-width: 20em)	Øvre grænse for sm breakpointet, evalueret i forhold til en markeret container.
container	(min-width: 20em)	Nedre grænse for sm breakpointet, evalueret i forhold til en markeret container.
container	(max-width: 30em)	Øvre grænse for md breakpointet, evalueret i forhold til en markeret container.
container	(min-width: 30em)	Nedre grænse for md breakpointet, evalueret i forhold til en markeret container.
container	(max-width: 48em)	Øvre grænse for lg breakpointet, evalueret i forhold til en markeret container.
container	(min-width: 48em)	Nedre grænse for lg breakpointet, evalueret i forhold til en markeret container.
container	(max-width: 62em)	Øvre grænse for xl breakpointet, evalueret i forhold til en markeret container.
container	(min-width: 62em)	Nedre grænse for xl breakpointet, evalueret i forhold til en markeret container.
container	(max-width: 68.75em)	Øvre grænse for content breakpointet, evalueret i forhold til en markeret container.
container	(min-width: 68.75em)	Nedre grænse for content breakpointet, evalueret i forhold til en markeret container.
container	(max-width: 98.75em)	Øvre grænse for content-full-width breakpointet, evalueret i forhold til en markeret container.
container	(min-width: 98.75em)	Nedre grænse for content-full-width breakpointet, evalueret i forhold til en markeret container.

Forbrugte tokens

Token	Type	Værdi
--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