CSS: responsive

[class*="-hidden-"],[class*="-show-"] — klasy pokaz/ukryj według szerokości viewportu lub kontenera w ramach skalowanej, tematycznej listy punktów przerwania.

.instui-hidden-max-<bp>/-hidden-min-<bp> ukrywają według szerokości viewportu; .instui-show-max-<bp>/-show-min-<bp> to odwrotność (domyślnie ukryte, widoczne tylko w zakresie dzięki display: revert); warianty -cq- reagują zamiast tego na szerokość przodka .instui-container, a nie viewportu. Poziomy skali xs/sm/md/lg/xl (pobrane z tokenów komponentu tray-width w IR) mają aliasy długiej formy (x-small–x-large) i nazw urządzeń (mobile/phablet/tablet/laptop/desktop) — obie przestarzałe na rzecz krótkiej nazwy — oraz nieskalowane, tematyczne poziomy content/content-full-width (maksymalna szerokość głównego obszaru treści).

Source: index.ts

Użycie

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

Przykłady

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

Modyfikatory

Modyfikator	Opis
.-cq-hidden-max-content	Ukryj, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania content (68.75em).
.-cq-hidden-max-content-full-width	Ukryj, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania 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	Ukryj, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania lg (48em).
.-cq-hidden-max-md	Ukryj, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania 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	Ukryj, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania 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	Ukryj, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania xl (62em).
.-cq-hidden-max-xs	Ukryj, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania xs (16em).
.-cq-hidden-min-content	Ukryj, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania content (68.75em).
.-cq-hidden-min-content-full-width	Ukryj, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania 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	Ukryj, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania lg (48em).
.-cq-hidden-min-md	Ukryj, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania 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	Ukryj, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania 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	Ukryj, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania xl (62em).
.-cq-hidden-min-xs	Ukryj, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania xs (16em).
.-cq-show-max-content	Pokaż, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania content (68.75em); w przeciwnym razie ukryte.
.-cq-show-max-content-full-width	Pokaż, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania content-full-width (98.75em); w przeciwnym razie ukryte.
.-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	Pokaż, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania lg (48em); w przeciwnym razie ukryte.
.-cq-show-max-md	Pokaż, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania md (30em); w przeciwnym razie ukryte.
.-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	Pokaż, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania sm (20em); w przeciwnym razie ukryte.
.-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	Pokaż, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania xl (62em); w przeciwnym razie ukryte.
.-cq-show-max-xs	Pokaż, gdy oznaczony kontener znajduje się na lub poniżej punktu przerwania xs (16em); w przeciwnym razie ukryte.
.-cq-show-min-content	Pokaż, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania content (68.75em); w przeciwnym razie ukryte.
.-cq-show-min-content-full-width	Pokaż, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania content-full-width (98.75em); w przeciwnym razie ukryte.
.-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	Pokaż, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania lg (48em); w przeciwnym razie ukryte.
.-cq-show-min-md	Pokaż, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania md (30em); w przeciwnym razie ukryte.
.-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	Pokaż, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania sm (20em); w przeciwnym razie ukryte.
.-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	Pokaż, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania xl (62em); w przeciwnym razie ukryte.
.-cq-show-min-xs	Pokaż, gdy oznaczony kontener znajduje się na lub powyżej punktu przerwania xs (16em); w przeciwnym razie ukryte.
.-hidden-max-content	Ukryj, gdy viewport znajduje się na lub poniżej punktu przerwania content (68.75em).
.-hidden-max-content-full-width	Ukryj, gdy viewport znajduje się na lub poniżej punktu przerwania 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	Ukryj, gdy viewport znajduje się na lub poniżej punktu przerwania lg (48em).
.-hidden-max-md	Ukryj, gdy viewport znajduje się na lub poniżej punktu przerwania 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	Ukryj, gdy viewport znajduje się na lub poniżej punktu przerwania 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	Ukryj, gdy viewport znajduje się na lub poniżej punktu przerwania xl (62em).
.-hidden-max-xs	Ukryj, gdy viewport znajduje się na lub poniżej punktu przerwania xs (16em).
.-hidden-min-content	Ukryj, gdy viewport znajduje się na lub powyżej punktu przerwania content (68.75em).
.-hidden-min-content-full-width	Ukryj, gdy viewport znajduje się na lub powyżej punktu przerwania 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	Ukryj, gdy viewport znajduje się na lub powyżej punktu przerwania lg (48em).
.-hidden-min-md	Ukryj, gdy obszar widoku jest równy lub większy niż punkt przerwania 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	Ukryj, gdy obszar widoku jest równy lub większy niż punkt przerwania 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	Ukryj, gdy obszar widoku jest równy lub większy niż punkt przerwania xl (62em).
.-hidden-min-xs	Ukryj, gdy obszar widoku jest równy lub większy niż punkt przerwania xs (16em).
.-show-max-content	Pokaż (przeciwieństwo -hidden-min-content), gdy obszar widoku jest równy lub mniejszy niż punkt przerwania content (68.75em); w przeciwnym razie ukryte.
.-show-max-content-full-width	Pokaż (przeciwieństwo -hidden-min-content-full-width), gdy obszar widoku jest równy lub mniejszy niż punkt przerwania content-full-width (98.75em); w przeciwnym razie ukryte.
.-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	Pokaż (przeciwieństwo -hidden-min-lg), gdy obszar widoku jest równy lub mniejszy niż punkt przerwania lg (48em); w przeciwnym razie ukryte.
.-show-max-md	Pokaż (przeciwieństwo -hidden-min-md), gdy obszar widoku jest równy lub mniejszy niż punkt przerwania md (30em); w przeciwnym razie ukryte.
.-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	Pokaż (przeciwieństwo -hidden-min-sm), gdy obszar widoku jest równy lub mniejszy niż punkt przerwania sm (20em); w przeciwnym razie ukryte.
.-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	Pokaż (przeciwieństwo -hidden-min-xl), gdy obszar widoku jest równy lub mniejszy niż punkt przerwania xl (62em); w przeciwnym razie ukryte.
.-show-max-xs	Pokaż (przeciwieństwo -hidden-min-xs), gdy obszar widoku jest równy lub mniejszy niż punkt przerwania xs (16em); w przeciwnym razie ukryte.
.-show-min-content	Pokaż (przeciwieństwo -hidden-max-content), gdy obszar widoku jest równy lub większy niż punkt przerwania content (68.75em); w przeciwnym razie ukryte.
.-show-min-content-full-width	Pokaż (przeciwieństwo -hidden-max-content-full-width), gdy obszar widoku jest równy lub większy niż punkt przerwania content-full-width (98.75em); w przeciwnym razie ukryte.
.-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	Pokaż (przeciwieństwo -hidden-max-lg), gdy obszar widoku jest równy lub większy niż punkt przerwania lg (48em); w przeciwnym razie ukryte.
.-show-min-md	Pokaż (przeciwieństwo -hidden-max-md), gdy obszar widoku jest równy lub większy niż punkt przerwania md (30em); w przeciwnym razie ukryte.
.-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	Pokaż (przeciwieństwo -hidden-max-sm), gdy obszar widoku jest równy lub większy niż punkt przerwania sm (20em); w przeciwnym razie ukryte.
.-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	Pokaż (przeciwieństwo -hidden-max-xl), gdy obszar widoku jest równy lub większy niż punkt przerwania xl (62em); w przeciwnym razie ukryte.
.-show-min-xs	Pokaż (przeciwieństwo -hidden-max-xs), gdy obszar widoku jest równy lub większy niż punkt przerwania xs (16em); w przeciwnym razie ukryte.

Własne właściwości

Właściwość	Typ	Domyślny	Opis
--pantoken-bp-content	<length>	68.75em	Wartość punktu przerwania content (68.75em, ręcznie utworzona, z motywem (nie w token IR)). Nadpisanie jej nie przesuwa powyżej skompilowanych progów @media/@container.
--pantoken-bp-content-full-width	<length>	98.75em	Wartość punktu przerwania content-full-width (98.75em, ręcznie utworzona, z motywem (nie w token IR)). Nadpisanie jej nie przesuwa powyżej skompilowanych progów @media/@container.
--pantoken-bp-lg	<length>	48em	Wartość punktu przerwania lg (48em, odzwierciedla --instui-component-tray-width-lg). Nadpisanie jej nie przesuwa powyżej skompilowanych progów @media/@container.
--pantoken-bp-md	<length>	30em	Wartość punktu przerwania md (30em, odzwierciedla --instui-component-tray-width-md). Nadpisanie jej nie przesuwa powyżej skompilowanych progów @media/@container.
--pantoken-bp-sm	<length>	20em	Wartość punktu przerwania sm (20em, odzwierciedla --instui-component-tray-width-sm). Nadpisanie jej nie przesuwa powyżej skompilowanych progów @media/@container.
--pantoken-bp-xl	<length>	62em	Wartość punktu przerwania xl (62em, odzwierciedla --instui-component-tray-width-xl). Nadpisanie jej nie przesuwa powyżej skompilowanych progów @media/@container.
--pantoken-bp-xs	<length>	16em	Wartość punktu przerwania xs (16em, odzwierciedla --instui-component-tray-width-xs). Nadpisanie jej nie przesuwa powyżej skompilowanych progów @media/@container.

Warunki

Typ	Zapytanie	Opis
media	(max-width: 16em)	Górna granica punktu przerwania xs.
media	(min-width: 16em)	Dolna granica punktu przerwania xs.
media	(max-width: 20em)	Górna granica punktu przerwania sm.
media	(min-width: 20em)	Dolna granica punktu przerwania sm.
media	(max-width: 30em)	Górna granica punktu przerwania md.
media	(min-width: 30em)	Dolna granica punktu przerwania md.
media	(max-width: 48em)	Górna granica punktu przerwania lg.
media	(min-width: 48em)	Dolna granica punktu przerwania lg.
media	(max-width: 62em)	Górna granica punktu przerwania xl.
media	(min-width: 62em)	Dolna granica punktu przerwania xl.
media	(max-width: 68.75em)	Górna granica punktu przerwania content.
media	(min-width: 68.75em)	Dolna granica punktu przerwania content.
media	(max-width: 98.75em)	Górna granica punktu przerwania content-full-width.
media	(min-width: 98.75em)	Dolna granica punktu przerwania content-full-width.
container	(max-width: 16em)	Górna granica punktu przerwania xs, oceniana względem oznaczonego kontenera.
container	(min-width: 16em)	Dolna granica punktu przerwania xs, oceniana względem oznaczonego kontenera.
container	(max-width: 20em)	Górna granica punktu przerwania sm, oceniana względem oznaczonego kontenera.
container	(min-width: 20em)	Dolna granica punktu przerwania sm, oceniana względem oznaczonego kontenera.
container	(max-width: 30em)	Górna granica punktu przerwania md, oceniana względem oznaczonego kontenera.
container	(min-width: 30em)	Dolna granica punktu przerwania md, oceniana względem oznaczonego kontenera.
container	(max-width: 48em)	Górna granica punktu przerwania lg, oceniana względem oznaczonego kontenera.
container	(min-width: 48em)	Dolna granica punktu przerwania lg, oceniana względem oznaczonego kontenera.
container	(max-width: 62em)	Górna granica punktu przerwania xl, oceniana względem oznaczonego kontenera.
container	(min-width: 62em)	Dolna granica punktu przerwania xl, oceniana względem oznaczonego kontenera.
container	(max-width: 68.75em)	Górna granica punktu przerwania content, oceniana względem oznaczonego kontenera.
container	(min-width: 68.75em)	Dolna granica punktu przerwania content, oceniana względem oznaczonego kontenera.
container	(max-width: 98.75em)	Górna granica punktu przerwania content-full-width, oceniana względem oznaczonego kontenera.
container	(min-width: 98.75em)	Dolna granica punktu przerwania content-full-width, oceniana względem oznaczonego kontenera.

Zużyte tokeny

Token	Typ	Wartość
--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