CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Visa/dölj-klasser baserade på viewport- eller behållarbredd över en tematisk brytpunktsskala.

.instui-hidden-max-<bp>/-hidden-min-<bp> döljer efter viewport-bredd; .instui-show-max-<bp>/-show-min-<bp> är inversen (dolda som standard, visas endast inom intervallet via display: revert); -cq--varianterna reagerar istället på en .instui-container-förfaders bredd, inte viewportens. Skaltiers xs/sm/md/lg/xl (härledda från IR:ens tray-width-komponenttokens) är vardera aliaserade till en långformig stavning (x-small–x-large) och ett enhetsnamn (mobile/phablet/tablet/laptop/desktop) — båda föråldrade till förmån för kortnamnet — plus de oskalade, tematiska content/content-full-width-tierna (huvudinnehållets maxbredd).

Source: index.ts

Användning

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

Exempel

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

Modifierare

Modifierare	Beskrivning
.-cq-hidden-max-content	Dölj när den markerade behållaren är vid eller under brytpunkten content (68.75em).
.-cq-hidden-max-content-full-width	Dölj när den markerade behållaren är vid eller under brytpunkten 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	Dölj när den markerade behållaren är vid eller under brytpunkten lg (48em).
.-cq-hidden-max-md	Dölj när den markerade behållaren är vid eller under brytpunkten 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	Dölj när den markerade behållaren är vid eller under brytpunkten 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	Dölj när den markerade behållaren är vid eller under brytpunkten xl (62em).
.-cq-hidden-max-xs	Dölj när den markerade behållaren är vid eller under brytpunkten xs (16em).
.-cq-hidden-min-content	Dölj när den markerade behållaren är vid eller över brytpunkten content (68.75em).
.-cq-hidden-min-content-full-width	Dölj när den markerade behållaren är vid eller över brytpunkten 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	Dölj när den markerade behållaren är vid eller över brytpunkten lg (48em).
.-cq-hidden-min-md	Dölj när den markerade behållaren är vid eller över brytpunkten 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	Dölj när den markerade behållaren är vid eller över brytpunkten 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	Dölj när den markerade behållaren är vid eller över brytpunkten xl (62em).
.-cq-hidden-min-xs	Dölj när den markerade behållaren är vid eller över brytpunkten xs (16em).
.-cq-show-max-content	Visa när den markerade behållaren är vid eller under content (68.75em); annars dold.
.-cq-show-max-content-full-width	Visa när den markerade behållaren är vid eller under content-full-width (98.75em); annars dold.
.-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	Visa när den markerade behållaren är vid eller under lg (48em); annars dold.
.-cq-show-max-md	Visa när den markerade behållaren är vid eller under md (30em); annars dold.
.-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	Visa när den markerade behållaren är vid eller under sm (20em); annars dold.
.-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	Visa när den markerade behållaren är vid eller under xl (62em); annars dold.
.-cq-show-max-xs	Visa när den markerade behållaren är vid eller under xs (16em); annars dold.
.-cq-show-min-content	Visa när den markerade behållaren är vid eller över content (68.75em); annars dold.
.-cq-show-min-content-full-width	Visa när den markerade behållaren är vid eller över content-full-width (98.75em); annars dold.
.-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	Visa när den markerade behållaren är vid eller över lg (48em); annars dold.
.-cq-show-min-md	Visa när den markerade behållaren är vid eller över md (30em); annars dold.
.-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	Visa när den markerade behållaren är vid eller över sm (20em); annars dold.
.-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	Visa när den markerade behållaren är vid eller över xl (62em); annars dold.
.-cq-show-min-xs	Visa när den markerade behållaren är vid eller över xs (16em); annars dold.
.-hidden-max-content	Dölj när viewporten är vid eller under brytpunkten content (68.75em).
.-hidden-max-content-full-width	Dölj när viewporten är vid eller under brytpunkten 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	Dölj när viewporten är vid eller under brytpunkten lg (48em).
.-hidden-max-md	Dölj när viewporten är vid eller under brytpunkten 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	Dölj när viewporten är vid eller under brytpunkten 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	Dölj när viewporten är vid eller under brytpunkten xl (62em).
.-hidden-max-xs	Dölj när viewporten är vid eller under brytpunkten xs (16em).
.-hidden-min-content	Dölj när viewporten är vid eller över brytpunkten content (68.75em).
.-hidden-min-content-full-width	Dölj när viewporten är vid eller över brytpunkten 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	Dölj när viewporten är vid eller över brytpunkten lg (48em).
.-hidden-min-md	Dölj när visningsområdet är vid eller över brytpunkten 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	Dölj när visningsområdet är vid eller över brytpunkten 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	Dölj när visningsområdet är vid eller över brytpunkten xl (62em).
.-hidden-min-xs	Dölj när visningsområdet är vid eller över brytpunkten xs (16em).
.-show-max-content	Visa (inversen av -hidden-min-content) när visningsområdet är vid eller under brytpunkten content (68.75em); dolt annars.
.-show-max-content-full-width	Visa (inversen av -hidden-min-content-full-width) när visningsområdet är vid eller under brytpunkten content-full-width (98.75em); dolt 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	Visa (inversen av -hidden-min-lg) när visningsområdet är vid eller under brytpunkten lg (48em); dolt annars.
.-show-max-md	Visa (inversen av -hidden-min-md) när visningsområdet är vid eller under brytpunkten md (30em); dolt 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	Visa (inversen av -hidden-min-sm) när visningsområdet är vid eller under brytpunkten sm (20em); dolt 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	Visa (inversen av -hidden-min-xl) när visningsområdet är vid eller under brytpunkten xl (62em); dolt annars.
.-show-max-xs	Visa (inversen av -hidden-min-xs) när visningsområdet är vid eller under brytpunkten xs (16em); dolt annars.
.-show-min-content	Visa (inversen av -hidden-max-content) när visningsområdet är vid eller över brytpunkten content (68.75em); dolt annars.
.-show-min-content-full-width	Visa (inversen av -hidden-max-content-full-width) när visningsområdet är vid eller över brytpunkten content-full-width (98.75em); dolt 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	Visa (inversen av -hidden-max-lg) när visningsområdet är vid eller över brytpunkten lg (48em); dolt annars.
.-show-min-md	Visa (inversen av -hidden-max-md) när visningsområdet är vid eller över brytpunkten md (30em); dolt 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	Visa (inversen av -hidden-max-sm) när visningsområdet är vid eller över brytpunkten sm (20em); dolt 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	Visa (inversen av -hidden-max-xl) när visningsområdet är vid eller över brytpunkten xl (62em); dolt annars.
.-show-min-xs	Visa (inversen av -hidden-max-xs) när visningsområdet är vid eller över brytpunkten xs (16em); dolt annars.

Anpassade egenskaper

Egenskap	Typ	Standard	Beskrivning
--pantoken-bp-content	<length>	68.75em	Värdet för brytpunkten content (68.75em, handgjort, tematiserat (inte i token-IR)). Att åsidosätta det flyttar inte de kompilerade trösklarna @media/@container uppåt.
--pantoken-bp-content-full-width	<length>	98.75em	Värdet för brytpunkten content-full-width (98.75em, handgjort, tematiserat (inte i token-IR)). Att åsidosätta det flyttar inte de kompilerade trösklarna @media/@container uppåt.
--pantoken-bp-lg	<length>	48em	Värdet för brytpunkten lg (48em, speglar --instui-component-tray-width-lg). Att åsidosätta det flyttar inte de kompilerade trösklarna @media/@container uppåt.
--pantoken-bp-md	<length>	30em	Värdet för brytpunkten md (30em, speglar --instui-component-tray-width-md). Att åsidosätta det flyttar inte de kompilerade trösklarna @media/@container uppåt.
--pantoken-bp-sm	<length>	20em	Värdet för brytpunkten sm (20em, speglar --instui-component-tray-width-sm). Att åsidosätta det flyttar inte de kompilerade trösklarna @media/@container uppåt.
--pantoken-bp-xl	<length>	62em	Värdet för brytpunkten xl (62em, speglar --instui-component-tray-width-xl). Att åsidosätta det flyttar inte de kompilerade trösklarna @media/@container uppåt.
--pantoken-bp-xs	<length>	16em	Värdet för brytpunkten xs (16em, speglar --instui-component-tray-width-xs). Att åsidosätta det flyttar inte de kompilerade trösklarna @media/@container uppåt.

Villkor

Typ	Fråga	Beskrivning
media	(max-width: 16em)	Övre gräns för brytpunkten xs.
media	(min-width: 16em)	Nedre gräns för brytpunkten xs.
media	(max-width: 20em)	Övre gräns för brytpunkten sm.
media	(min-width: 20em)	Nedre gräns för brytpunkten sm.
media	(max-width: 30em)	Övre gräns för brytpunkten md.
media	(min-width: 30em)	Nedre gräns för brytpunkten md.
media	(max-width: 48em)	Övre gräns för brytpunkten lg.
media	(min-width: 48em)	Nedre gräns för brytpunkten lg.
media	(max-width: 62em)	Övre gräns för brytpunkten xl.
media	(min-width: 62em)	Nedre gräns för brytpunkten xl.
media	(max-width: 68.75em)	Övre gräns för brytpunkten content.
media	(min-width: 68.75em)	Nedre gräns för brytpunkten content.
media	(max-width: 98.75em)	Övre gräns för brytpunkten content-full-width.
media	(min-width: 98.75em)	Nedre gräns för brytpunkten content-full-width.
container	(max-width: 16em)	Övre gräns för brytpunkten xs, utvärderad mot en markerad behållare.
container	(min-width: 16em)	Nedre gräns för brytpunkten xs, utvärderad mot en markerad behållare.
container	(max-width: 20em)	Övre gräns för brytpunkten sm, utvärderad mot en markerad behållare.
container	(min-width: 20em)	Nedre gräns för brytpunkten sm, utvärderad mot en markerad behållare.
container	(max-width: 30em)	Övre gräns för md-brytpunkt, utvärderad mot en markerad container.
container	(min-width: 30em)	Nedre gräns för md-brytpunkt, utvärderad mot en markerad container.
container	(max-width: 48em)	Övre gräns för lg-brytpunkt, utvärderad mot en markerad container.
container	(min-width: 48em)	Nedre gräns för lg-brytpunkt, utvärderad mot en markerad container.
container	(max-width: 62em)	Övre gräns för xl-brytpunkt, utvärderad mot en markerad container.
container	(min-width: 62em)	Nedre gräns för xl-brytpunkt, utvärderad mot en markerad container.
container	(max-width: 68.75em)	Övre gräns för content-brytpunkt, utvärderad mot en markerad container.
container	(min-width: 68.75em)	Nedre gräns för content-brytpunkt, utvärderad mot en markerad container.
container	(max-width: 98.75em)	Övre gräns för content-full-width-brytpunkt, utvärderad mot en markerad container.
container	(min-width: 98.75em)	Nedre gräns för content-full-width-brytpunkt, utvärderad mot en markerad container.

Förbrukade tokens

Token	Typ	Värde
--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