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