CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Klassen zum Ein-/Ausblenden nach Viewport- oder Container-Breite über eine thematisierte Breakpoint-Skala.

.instui-hidden-max-<bp>/-hidden-min-<bp> blenden nach Viewport-Breite aus; .instui-show-max-<bp>/-show-min-<bp> sind das Gegenteil (standardmäßig verborgen, nur im Bereich über display: revert sichtbar); die -cq--Varianten reagieren stattdessen auf die Breite eines .instui-container-Ahnens, nicht auf die des Viewports. Die Skalenstufen xs/sm/md/lg/xl (abgeleitet von den tray-width-Komponententokens der IR) haben jeweils eine Langform (x-small–x-large) und einen Gerätenamen (mobile/phablet/tablet/laptop/desktop) als Alias — beides zugunsten des kurzen Namens veraltet — sowie die unskalierte, thematische content/content-full-width-Stufen (maximale Breite des Hauptinhaltsbereichs).

Source: index.ts

Verwendung

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

Beispiele

<div class="instui-hidden-max-sm">Bei oder unter dem kleinen Breakpoint ausgeblendet.</div>
<div class="instui-show-min-sm">Nur bei oder über dem kleinen Breakpoint angezeigt.</div>

Modifikatoren

Modifikator	Beschreibung
.-cq-hidden-max-content	Ausblenden, wenn der markierte Container beim oder unter dem Breakpoint content (68.75em) ist.
.-cq-hidden-max-content-full-width	Ausblenden, wenn der markierte Container beim oder unter dem Breakpoint content-full-width (98.75em) ist.
.-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	Ausblenden, wenn der markierte Container beim oder unter dem Breakpoint lg (48em) ist.
.-cq-hidden-max-md	Ausblenden, wenn der markierte Container beim oder unter dem Breakpoint lg (48em) ist.
.-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	Ausblenden, wenn der markierte Container beim oder unter dem Breakpoint sm (20em) ist.
.-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	Ausblenden, wenn der markierte Container beim oder unter dem Breakpoint xl (62em) ist.
.-cq-hidden-max-xs	Ausblenden, wenn der markierte Container beim oder unter dem Breakpoint sm (20em) ist.
.-cq-hidden-min-content	Ausblenden, wenn der markierte Container beim oder über dem Breakpoint content (68.75em) ist.
.-cq-hidden-min-content-full-width	Ausblenden, wenn der markierte Container beim oder über dem Breakpoint content-full-width (98.75em) ist.
.-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	Ausblenden, wenn der markierte Container beim oder über dem Breakpoint lg (48em) ist.
.-cq-hidden-min-md	Ausblenden, wenn der markierte Container beim oder über dem Breakpoint lg (48em) ist.
.-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	Ausblenden, wenn der markierte Container beim oder über dem Breakpoint sm (20em) ist.
.-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	Ausblenden, wenn der markierte Container beim oder über dem Breakpoint xl (62em) ist.
.-cq-hidden-min-xs	Ausblenden, wenn der markierte Container beim oder über dem Breakpoint sm (20em) ist.
.-cq-show-max-content	Anzeigen, wenn der markierte Container beim oder unter dem Breakpoint content (68.75em) ist; sonst verborgen.
.-cq-show-max-content-full-width	Anzeigen, wenn der markierte Container beim oder unter dem Breakpoint content-full-width (98.75em) ist; sonst verborgen.
.-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	Anzeigen, wenn der markierte Container beim oder unter dem Breakpoint lg (48em) ist; sonst verborgen.
.-cq-show-max-md	Anzeigen, wenn der markierte Container beim oder unter dem Breakpoint lg (48em) ist; sonst verborgen.
.-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	Anzeigen, wenn der markierte Container beim oder unter dem Breakpoint sm (20em) ist; sonst verborgen.
.-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	Anzeigen, wenn der markierte Container beim oder unter dem Breakpoint xl (62em) ist; sonst verborgen.
.-cq-show-max-xs	Anzeigen, wenn der markierte Container beim oder unter dem Breakpoint sm (20em) ist; sonst verborgen.
.-cq-show-min-content	Anzeigen, wenn der markierte Container beim oder über dem Breakpoint content (68.75em) ist; sonst verborgen.
.-cq-show-min-content-full-width	Anzeigen, wenn der markierte Container beim oder über dem Breakpoint content-full-width (98.75em) ist; sonst verborgen.
.-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	Anzeigen, wenn der markierte Container beim oder über dem Breakpoint lg (48em) ist; sonst verborgen.
.-cq-show-min-md	Anzeigen, wenn der markierte Container beim oder über dem Breakpoint lg (48em) ist; sonst verborgen.
.-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	Anzeigen, wenn der markierte Container beim oder über dem Breakpoint sm (20em) ist; sonst verborgen.
.-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	Anzeigen, wenn der markierte Container beim oder über dem Breakpoint xl (62em) ist; sonst verborgen.
.-cq-show-min-xs	Anzeigen, wenn der markierte Container beim oder über dem Breakpoint sm (20em) ist; sonst verborgen.
.-hidden-max-content	Ausblenden, wenn der Viewport beim oder unter dem Breakpoint content (68.75em) ist.
.-hidden-max-content-full-width	Ausblenden, wenn der Viewport beim oder unter dem Breakpoint content-full-width (98.75em) ist.
.-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	Ausblenden, wenn der Viewport beim oder unter dem Breakpoint lg (48em) ist.
.-hidden-max-md	Ausblenden, wenn der Viewport beim oder unter dem Breakpoint lg (48em) ist.
.-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	Ausblenden, wenn der Viewport beim oder unter dem Breakpoint md (30em) ist.
.-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	Ausblenden, wenn der Viewport beim oder unter dem Breakpoint xl (62em) ist.
.-hidden-max-xs	Ausblenden, wenn der Viewport beim oder unter dem Breakpoint xs (16em) ist.
.-hidden-min-content	Ausblenden, wenn der Viewport beim oder über dem Breakpoint content (68.75em) ist.
.-hidden-min-content-full-width	Ausblenden, wenn der Viewport beim oder über dem Breakpoint content-full-width (98.75em) ist.
.-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	Ausblenden, wenn der Viewport beim oder über dem Breakpoint lg (48em) ist.
.-hidden-min-md	Ausblenden, wenn der Viewport beim oder über dem Breakpoint lg (48em) ist.
.-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	Ausblenden, wenn der Viewport bei oder über dem Breakpoint sm (20em) liegt.
.-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	Ausblenden, wenn der Viewport bei oder über dem Breakpoint xl (62em) liegt.
.-hidden-min-xs	Ausblenden, wenn der Viewport bei oder über dem Breakpoint sm (20em) liegt.
.-show-max-content	Anzeigen (Inverse von -hidden-min-content), wenn der Viewport bei oder unter dem Breakpoint content (68.75em) liegt; andernfalls verborgen.
.-show-max-content-full-width	Anzeigen (Inverse von -hidden-min-content-full-width), wenn der Viewport bei oder unter dem Breakpoint content-full-width (98.75em) liegt; andernfalls verborgen.
.-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	Anzeigen (Inverse von -hidden-min-lg), wenn der Viewport bei oder unter dem Breakpoint lg (48em) liegt; andernfalls verborgen.
.-show-max-md	Anzeigen (Inverse von -hidden-min-md), wenn der Viewport bei oder unter dem Breakpoint md (30em) liegt; andernfalls verborgen.
.-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	Anzeigen (Inverse von -hidden-min-sm), wenn der Viewport bei oder unter dem Breakpoint sm (20em) liegt; andernfalls verborgen.
.-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	Anzeigen (Inverse von -hidden-min-xl), wenn der Viewport bei oder unter dem Breakpoint xl (62em) liegt; andernfalls verborgen.
.-show-max-xs	Anzeigen (Inverse von -hidden-min-xs), wenn der Viewport bei oder unter dem Breakpoint xs (16em) liegt; andernfalls verborgen.
.-show-min-content	Anzeigen (Inverse von -hidden-max-content), wenn der Viewport bei oder über dem Breakpoint content (68.75em) liegt; andernfalls verborgen.
.-show-min-content-full-width	Anzeigen (Inverse von -hidden-max-content-full-width), wenn der Viewport bei oder über dem Breakpoint content-full-width (98.75em) liegt; andernfalls verborgen.
.-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	Anzeigen (Inverse von -hidden-max-lg), wenn der Viewport bei oder über dem Breakpoint lg (48em) liegt; andernfalls verborgen.
.-show-min-md	Anzeigen (Inverse von -hidden-max-md), wenn der Viewport bei oder über dem Breakpoint md (30em) liegt; andernfalls verborgen.
.-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	Anzeigen (Inverse von -hidden-max-sm), wenn der Viewport bei oder über dem Breakpoint sm (20em) liegt; andernfalls verborgen.
.-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	Anzeigen (Inverse von -hidden-max-xl), wenn der Viewport bei oder über dem Breakpoint xl (62em) liegt; andernfalls verborgen.
.-show-min-xs	Anzeigen (Inverse von -hidden-max-xs), wenn der Viewport bei oder über dem Breakpoint xs (16em) liegt; andernfalls verborgen.

Benutzerdefinierte Eigenschaften

Eigenschaft	Typ	Standard	Beschreibung
--pantoken-bp-content	<length>	68.75em	Der Wert des Breakpoints content (68.75em, handverfasst, thematisch (nicht im Token-IR)). Sein Überschreiben verschiebt die kompilierten Schwellenwerte @media/@container nicht nach oben.
--pantoken-bp-content-full-width	<length>	98.75em	Der Wert des Breakpoints content-full-width (98.75em, handverfasst, thematisch (nicht im Token-IR)). Sein Überschreiben verschiebt die kompilierten Schwellenwerte @media/@container nicht nach oben.
--pantoken-bp-lg	<length>	64em	Der Wert des Breakpoints lg (48em, spiegelt --instui-component-tray-width-lg wider). Sein Überschreiben verschiebt die kompilierten Schwellenwerte @media/@container nicht nach oben.
--pantoken-bp-md	<length>	48em	Der Wert des Breakpoints md (30em, spiegelt --instui-component-tray-width-md wider). Sein Überschreiben verschiebt die kompilierten Schwellenwerte @media/@container nicht nach oben.
--pantoken-bp-sm	<length>	30em	Der Wert des Breakpoints sm (20em, spiegelt --instui-component-tray-width-sm wider). Sein Überschreiben verschiebt die kompilierten Schwellenwerte @media/@container nicht nach oben.
--pantoken-bp-xl	<length>	80em	Der Wert des Breakpoints xl (62em, spiegelt --instui-component-tray-width-xl wider). Sein Überschreiben verschiebt die kompilierten Schwellenwerte @media/@container nicht nach oben.
--pantoken-bp-xs	<length>	20em	Der Wert des Breakpoints content (68.75em, handverfasst, thematisch (nicht im Token-IR)). Sein Überschreiben verschiebt die kompilierten Schwellenwerte @media/@container nicht nach oben.

Bedingungen

Typ	Abfrage	Beschreibung
media	(max-width: 20em)	Obere Grenze des Breakpoints xs.
media	(min-width: 20em)	Untere Grenze des Breakpoints xs.
media	(max-width: 30em)	Obere Grenze des Breakpoints sm.
media	(min-width: 30em)	Untere Grenze des Breakpoints sm.
media	(max-width: 48em)	Obere Grenze des Breakpoints md.
media	(min-width: 48em)	Untere Grenze des Breakpoints md.
media	(max-width: 64em)	Obere Grenze des Breakpoints lg.
media	(min-width: 64em)	Untere Grenze des Breakpoints lg.
media	(max-width: 80em)	Obere Grenze des Breakpoints xl.
media	(min-width: 80em)	Untere Grenze des Breakpoints xl.
media	(max-width: 68.75em)	Obere Grenze des Breakpoints content.
media	(min-width: 68.75em)	Untere Grenze des Breakpoints content.
media	(max-width: 98.75em)	Obere Grenze des Breakpoints content-full-width.
media	(min-width: 98.75em)	Untere Grenze des Breakpoints content-full-width.
container	(max-width: 20em)	Obere Grenze des Breakpoints xs, ausgewertet gegen einen markierten Container.
container	(min-width: 20em)	Untere Grenze des Breakpoints xs, ausgewertet gegen einen markierten Container.
container	(max-width: 30em)	Obere Grenze des Breakpoints sm, ausgewertet gegen einen markierten Container.
container	(min-width: 30em)	Untere Grenze des Breakpoints sm, ausgewertet gegen einen markierten Container.
container	(max-width: 48em)	Obere Grenze des md-Breakpoints, ausgewertet an einem markierten Container.
container	(min-width: 48em)	Untere Grenze des md-Breakpoints, ausgewertet an einem markierten Container.
container	(max-width: 64em)	Obere Grenze des lg-Breakpoints, ausgewertet an einem markierten Container.
container	(min-width: 64em)	Untere Grenze des lg-Breakpoints, ausgewertet an einem markierten Container.
container	(max-width: 80em)	Obere Grenze des xl-Breakpoints, ausgewertet an einem markierten Container.
container	(min-width: 80em)	Untere Grenze des xl-Breakpoints, ausgewertet an einem markierten Container.
container	(max-width: 68.75em)	Obere Grenze des content-Breakpoints, ausgewertet an einem markierten Container.
container	(min-width: 68.75em)	Untere Grenze des content-Breakpoints, ausgewertet an einem markierten Container.
container	(max-width: 98.75em)	Obere Grenze des content-full-width-Breakpoints, ausgewertet an einem markierten Container.
container	(min-width: 98.75em)	Untere Grenze des content-full-width-Breakpoints, ausgewertet an einem markierten Container.

Verbrauchte Tokens

Token	Typ	Wert
--instui-breakpoints-lg	<length>	64em
--instui-breakpoints-md	<length>	48em
--instui-breakpoints-sm	<length>	30em
--instui-breakpoints-xl	<length>	80em