CSS: responsive

[class*="-hidden-"],[class*="-show-"] — класи показу/приховування за шириною вікна перегляду або контейнера по тематичній шкалі брейкпойнтів.

.instui-hidden-max-<bp>/-hidden-min-<bp> ховають за шириною вікна перегляду; .instui-show-max-<bp>/-show-min-<bp> — зворотні (зазвичай приховані, показуються лише в межах діапазону через display: revert); варіанти -cq- реагують на ширину предка .instui-container, а не на вікно перегляду. Рівні шкали xs/sm/md/lg/xl (взяті з токенів компонента tray-width в IR) мають псевдоніми у довгій формі (x-small–x-large) і назви пристроїв (mobile/phablet/tablet/laptop/desktop) — обидва застаріли на користь короткої назви — плюс масштабу ненастровані тематичні рівні content/content-full-width (максимальна ширина основної зони вмісту).

Source: index.ts

Використання

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

Приклади

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

Модифікатори

Модифікатор	Опис
.-cq-hidden-max-content	Ховати, коли позначений контейнер дорівнює або менший за брейкпойнт content (68.75em).
.-cq-hidden-max-content-full-width	Ховати, коли позначений контейнер дорівнює або менший за брейкпойнт 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	Ховати, коли позначений контейнер дорівнює або менший за брейкпойнт lg (48em).
.-cq-hidden-max-md	Ховати, коли позначений контейнер дорівнює або менший за брейкпойнт 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	Ховати, коли позначений контейнер дорівнює або менший за брейкпойнт 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	Ховати, коли позначений контейнер дорівнює або менший за брейкпойнт xl (62em).
.-cq-hidden-max-xs	Ховати, коли позначений контейнер дорівнює або менший за брейкпойнт xs (16em).
.-cq-hidden-min-content	Ховати, коли позначений контейнер дорівнює або більший за брейкпойнт content (68.75em).
.-cq-hidden-min-content-full-width	Ховати, коли позначений контейнер дорівнює або більший за брейкпойнт 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	Ховати, коли позначений контейнер дорівнює або більший за брейкпойнт lg (48em).
.-cq-hidden-min-md	Ховати, коли позначений контейнер дорівнює або більший за брейкпойнт 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	Ховати, коли позначений контейнер дорівнює або більший за брейкпойнт 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	Ховати, коли позначений контейнер дорівнює або більший за брейкпойнт xl (62em).
.-cq-hidden-min-xs	Ховати, коли позначений контейнер дорівнює або більший за брейкпойнт xs (16em).
.-cq-show-max-content	Показувати, коли позначений контейнер дорівнює або менший за брейкпойнт content (68.75em); в іншому випадку приховано.
.-cq-show-max-content-full-width	Показувати, коли позначений контейнер дорівнює або менший за брейкпойнт content-full-width (98.75em); в іншому випадку приховано.
.-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	Показувати, коли позначений контейнер дорівнює або менший за брейкпойнт lg (48em); в іншому випадку приховано.
.-cq-show-max-md	Показувати, коли позначений контейнер дорівнює або менший за брейкпойнт md (30em); в іншому випадку приховано.
.-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	Показувати, коли позначений контейнер дорівнює або менший за брейкпойнт sm (20em); в іншому випадку приховано.
.-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	Показувати, коли позначений контейнер дорівнює або менший за брейкпойнт xl (62em); в іншому випадку приховано.
.-cq-show-max-xs	Показувати, коли позначений контейнер дорівнює або менший за брейкпойнт xs (16em); в іншому випадку приховано.
.-cq-show-min-content	Показувати, коли позначений контейнер дорівнює або більший за брейкпойнт content (68.75em); в іншому випадку приховано.
.-cq-show-min-content-full-width	Показувати, коли позначений контейнер дорівнює або більший за брейкпойнт content-full-width (98.75em); в іншому випадку приховано.
.-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	Показувати, коли позначений контейнер дорівнює або більший за брейкпойнт lg (48em); в іншому випадку приховано.
.-cq-show-min-md	Показувати, коли позначений контейнер дорівнює або більший за брейкпойнт md (30em); в іншому випадку приховано.
.-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	Показувати, коли позначений контейнер дорівнює або більший за брейкпойнт sm (20em); в іншому випадку приховано.
.-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	Показувати, коли позначений контейнер дорівнює або більший за брейкпойнт xl (62em); в іншому випадку приховано.
.-cq-show-min-xs	Показувати, коли позначений контейнер дорівнює або більший за брейкпойнт xs (16em); в іншому випадку приховано.
.-hidden-max-content	Ховати, коли вікно перегляду дорівнює або менше за брейкпойнт content (68.75em).
.-hidden-max-content-full-width	Ховати, коли вікно перегляду дорівнює або менше за брейкпойнт 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	Ховати, коли вікно перегляду дорівнює або менше за брейкпойнт lg (48em).
.-hidden-max-md	Ховати, коли вікно перегляду дорівнює або менше за брейкпойнт 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	Ховати, коли вікно перегляду дорівнює або менше за брейкпойнт 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	Ховати, коли вікно перегляду дорівнює або менше за брейкпойнт xl (62em).
.-hidden-max-xs	Ховати, коли вікно перегляду дорівнює або менше за брейкпойнт xs (16em).
.-hidden-min-content	Ховати, коли вікно перегляду дорівнює або більше за брейкпойнт content (68.75em).
.-hidden-min-content-full-width	Ховати, коли вікно перегляду дорівнює або більше за брейкпойнт 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	Ховати, коли вікно перегляду дорівнює або більше за брейкпойнт lg (48em).
.-hidden-min-md	Приховувати, коли область перегляду знаходиться на або вище контрольної точки 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	Приховувати, коли область перегляду знаходиться на або вище контрольної точки 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	Приховувати, коли область перегляду знаходиться на або вище контрольної точки xl (62em).
.-hidden-min-xs	Приховувати, коли область перегляду знаходиться на або вище контрольної точки xs (16em).
.-show-max-content	Показувати (обернено до -hidden-min-content), коли область перегляду знаходиться на або нижче контрольної точки content (68.75em); інакше приховано.
.-show-max-content-full-width	Показувати (обернено до -hidden-min-content-full-width), коли область перегляду знаходиться на або нижче контрольної точки content-full-width (98.75em); інакше приховано.
.-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	Показувати (обернено до -hidden-min-lg), коли область перегляду знаходиться на або нижче контрольної точки lg (48em); інакше приховано.
.-show-max-md	Показувати (обернено до -hidden-min-md), коли область перегляду знаходиться на або нижче контрольної точки md (30em); інакше приховано.
.-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	Показувати (обернено до -hidden-min-sm), коли область перегляду знаходиться на або нижче контрольної точки sm (20em); інакше приховано.
.-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	Показувати (обернено до -hidden-min-xl), коли область перегляду знаходиться на або нижче контрольної точки xl (62em); інакше приховано.
.-show-max-xs	Показувати (обернено до -hidden-min-xs), коли область перегляду знаходиться на або нижче контрольної точки xs (16em); інакше приховано.
.-show-min-content	Показувати (обернено до -hidden-max-content), коли область перегляду знаходиться на або вище контрольної точки content (68.75em); інакше приховано.
.-show-min-content-full-width	Показувати (обернено до -hidden-max-content-full-width), коли область перегляду знаходиться на або вище контрольної точки content-full-width (98.75em); інакше приховано.
.-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	Показувати (обернено до -hidden-max-lg), коли область перегляду знаходиться на або вище контрольної точки lg (48em); інакше приховано.
.-show-min-md	Показувати (обернено до -hidden-max-md), коли область перегляду знаходиться на або вище контрольної точки md (30em); інакше приховано.
.-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	Показувати (обернено до -hidden-max-sm), коли область перегляду знаходиться на або вище контрольної точки sm (20em); інакше приховано.
.-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	Показувати (обернено до -hidden-max-xl), коли область перегляду знаходиться на або вище контрольної точки xl (62em); інакше приховано.
.-show-min-xs	Показувати (обернено до -hidden-max-xs), коли область перегляду знаходиться на або вище контрольної точки xs (16em); інакше приховано.

Користувацькі властивості

Властивість	Тип	За замовчуванням	Опис
--pantoken-bp-content	<length>	68.75em	Значення контрольної точки content (68.75em, створене вручну, з темою (не в токенному IR)). Перезапис цього значення не піднімає компільовані пороги @media/@container вище.
--pantoken-bp-content-full-width	<length>	98.75em	Значення контрольної точки content-full-width (98.75em, створене вручну, з темою (не в токенному IR)). Перезапис цього значення не піднімає компільовані пороги @media/@container вище.
--pantoken-bp-lg	<length>	48em	Значення контрольної точки lg (48em, віддзеркалює --instui-component-tray-width-lg). Перезапис цього значення не піднімає компільовані пороги @media/@container вище.
--pantoken-bp-md	<length>	30em	Значення контрольної точки md (30em, віддзеркалює --instui-component-tray-width-md). Перезапис цього значення не піднімає компільовані пороги @media/@container вище.
--pantoken-bp-sm	<length>	20em	Значення контрольної точки sm (20em, віддзеркалює --instui-component-tray-width-sm). Перезапис цього значення не піднімає компільовані пороги @media/@container вище.
--pantoken-bp-xl	<length>	62em	Значення контрольної точки xl (62em, віддзеркалює --instui-component-tray-width-xl). Перезапис цього значення не піднімає компільовані пороги @media/@container вище.
--pantoken-bp-xs	<length>	16em	Значення контрольної точки xs (16em, віддзеркалює --instui-component-tray-width-xs). Перезапис цього значення не піднімає компільовані пороги @media/@container вище.

Умови

Тип	Запит	Опис
media	(max-width: 16em)	Верхня межа контрольної точки xs.
media	(min-width: 16em)	Нижня межа контрольної точки xs.
media	(max-width: 20em)	Верхня межа контрольної точки sm.
media	(min-width: 20em)	Нижня межа контрольної точки sm.
media	(max-width: 30em)	Верхня межа контрольної точки md.
media	(min-width: 30em)	Нижня межа контрольної точки md.
media	(max-width: 48em)	Верхня межа контрольної точки lg.
media	(min-width: 48em)	Нижня межа контрольної точки lg.
media	(max-width: 62em)	Верхня межа контрольної точки xl.
media	(min-width: 62em)	Нижня межа контрольної точки xl.
media	(max-width: 68.75em)	Верхня межа контрольної точки content.
media	(min-width: 68.75em)	Нижня межа контрольної точки content.
media	(max-width: 98.75em)	Верхня межа контрольної точки content-full-width.
media	(min-width: 98.75em)	Нижня межа контрольної точки content-full-width.
container	(max-width: 16em)	Верхня межа контрольної точки xs, що оцінюється щодо позначеного контейнера.
container	(min-width: 16em)	Нижня межа контрольної точки xs, що оцінюється щодо позначеного контейнера.
container	(max-width: 20em)	Верхня межа контрольної точки sm, що оцінюється щодо позначеного контейнера.
container	(min-width: 20em)	Нижня межа контрольної точки sm, що оцінюється щодо позначеного контейнера.
container	(max-width: 30em)	Верхня межа брейкпоінта md, що оцінюється відносно позначеного контейнера.
container	(min-width: 30em)	Нижня межа брейкпоінта md, що оцінюється відносно позначеного контейнера.
container	(max-width: 48em)	Верхня межа брейкпоінта lg, що оцінюється відносно позначеного контейнера.
container	(min-width: 48em)	Нижня межа брейкпоінта lg, що оцінюється відносно позначеного контейнера.
container	(max-width: 62em)	Верхня межа брейкпоінта xl, що оцінюється відносно позначеного контейнера.
container	(min-width: 62em)	Нижня межа брейкпоінта xl, що оцінюється відносно позначеного контейнера.
container	(max-width: 68.75em)	Верхня межа брейкпоінта content, що оцінюється відносно позначеного контейнера.
container	(min-width: 68.75em)	Нижня межа брейкпоінта content, що оцінюється відносно позначеного контейнера.
container	(max-width: 98.75em)	Верхня межа брейкпоінта content-full-width, що оцінюється відносно позначеного контейнера.
container	(min-width: 98.75em)	Нижня межа брейкпоінта content-full-width, що оцінюється відносно позначеного контейнера.

Використано токенів

Token	Тип	Значення
--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