CSS: responsive

[class*="-hidden-"],[class*="-show-"] — razredi za prikaz/skritje glede na širino viewporta ali vsebnika po tematski lestvici prelomnih točk.

.instui-hidden-max-<bp>/-hidden-min-<bp> skrijejo glede na širino viewporta; .instui-show-max-<bp>/-show-min-<bp> so obratno (privzeto skriti, prikazani samo znotraj območja prek display: revert); različice -cq- se namesto na viewport odzivajo na širino prednika .instui-container. Stopnje lestvice xs/sm/md/lg/xl (izvirajo iz IR-jevih tokenov komponent tray-width) imajo vsaka alias v dolgi obliki (x-small–x-large) in ime naprave (mobile/phablet/tablet/laptop/desktop) — oboji so zastareli v primerjavi s kratkim imenom — plus neskalirane, tematske stopnje content/content-full-width (maksimalna širina glavnega vsebinskega območja).

Source: index.ts

Uporaba

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

Primeri

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

Spremenljivke (modifikatorji)

Modifikator	Opis
.-cq-hidden-max-content	Skrij, ko je označen vsebnik na ali pod prelomno točko content (68.75em).
.-cq-hidden-max-content-full-width	Skrij, ko je označen vsebnik na ali pod prelomno točko 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	Skrij, ko je označen vsebnik na ali pod prelomno točko lg (48em).
.-cq-hidden-max-md	Skrij, ko je označen vsebnik na ali pod prelomno točko 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	Skrij, ko je označen vsebnik na ali pod prelomno točko 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	Skrij, ko je označen vsebnik na ali pod prelomno točko xl (62em).
.-cq-hidden-max-xs	Skrij, ko je označen vsebnik na ali pod prelomno točko xs (16em).
.-cq-hidden-min-content	Skrij, ko je označen vsebnik na ali nad prelomno točko content (68.75em).
.-cq-hidden-min-content-full-width	Skrij, ko je označen vsebnik na ali nad prelomno točko 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	Skrij, ko je označen vsebnik na ali nad prelomno točko lg (48em).
.-cq-hidden-min-md	Skrij, ko je označen vsebnik na ali nad prelomno točko 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	Skrij, ko je označen vsebnik na ali nad prelomno točko 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	Skrij, ko je označen vsebnik na ali nad prelomno točko xl (62em).
.-cq-hidden-min-xs	Skrij, ko je označen vsebnik na ali nad prelomno točko xs (16em).
.-cq-show-max-content	Prikaži, ko je označen vsebnik na ali pod prelomno točko content (68.75em); sicer skrito.
.-cq-show-max-content-full-width	Prikaži, ko je označen vsebnik na ali pod prelomno točko content-full-width (98.75em); sicer skrito.
.-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	Prikaži, ko je označen vsebnik na ali pod prelomno točko lg (48em); sicer skrito.
.-cq-show-max-md	Prikaži, ko je označen vsebnik na ali pod prelomno točko md (30em); sicer skrito.
.-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	Prikaži, ko je označen vsebnik na ali pod prelomno točko sm (20em); sicer skrito.
.-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	Prikaži, ko je označen vsebnik na ali pod prelomno točko xl (62em); sicer skrito.
.-cq-show-max-xs	Prikaži, ko je označen vsebnik na ali pod prelomno točko xs (16em); sicer skrito.
.-cq-show-min-content	Prikaži, ko je označen vsebnik na ali nad prelomno točko content (68.75em); sicer skrito.
.-cq-show-min-content-full-width	Prikaži, ko je označen vsebnik na ali nad prelomno točko content-full-width (98.75em); sicer skrito.
.-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	Prikaži, ko je označen vsebnik na ali nad prelomno točko lg (48em); sicer skrito.
.-cq-show-min-md	Prikaži, ko je označen vsebnik na ali nad prelomno točko md (30em); sicer skrito.
.-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	Prikaži, ko je označen vsebnik na ali nad prelomno točko sm (20em); sicer skrito.
.-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	Prikaži, ko je označen vsebnik na ali nad prelomno točko xl (62em); sicer skrito.
.-cq-show-min-xs	Prikaži, ko je označen vsebnik na ali nad prelomno točko xs (16em); sicer skrito.
.-hidden-max-content	Skrij, ko je viewport na ali pod prelomno točko content (68.75em).
.-hidden-max-content-full-width	Skrij, ko je viewport na ali pod prelomno točko 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	Skrij, ko je viewport na ali pod prelomno točko lg (48em).
.-hidden-max-md	Skrij, ko je viewport na ali pod prelomno točko 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	Skrij, ko je viewport na ali pod prelomno točko 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	Skrij, ko je viewport na ali pod prelomno točko xl (62em).
.-hidden-max-xs	Skrij, ko je viewport na ali pod prelomno točko xs (16em).
.-hidden-min-content	Skrij, ko je viewport na ali nad prelomno točko content (68.75em).
.-hidden-min-content-full-width	Skrij, ko je viewport na ali nad prelomno točko 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	Skrij, ko je viewport na ali nad prelomno točko lg (48em).
.-hidden-min-md	Skrij, ko je vidno polje pri ali nad prelomno točko 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	Skrij, ko je vidno polje pri ali nad prelomno točko 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	Skrij, ko je vidno polje pri ali nad prelomno točko xl (62em).
.-hidden-min-xs	Skrij, ko je vidno polje pri ali nad prelomno točko xs (16em).
.-show-max-content	Prikaži (obratno od -hidden-min-content), ko je vidno polje pri ali pod prelomno točko content (68.75em); sicer skrito.
.-show-max-content-full-width	Prikaži (obratno od -hidden-min-content-full-width), ko je vidno polje pri ali pod prelomno točko content-full-width (98.75em); sicer skrito.
.-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	Prikaži (obratno od -hidden-min-lg), ko je vidno polje pri ali pod prelomno točko lg (48em); sicer skrito.
.-show-max-md	Prikaži (obratno od -hidden-min-md), ko je vidno polje pri ali pod prelomno točko md (30em); sicer skrito.
.-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	Prikaži (obratno od -hidden-min-sm), ko je vidno polje pri ali pod prelomno točko sm (20em); sicer skrito.
.-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	Prikaži (obratno od -hidden-min-xl), ko je vidno polje pri ali pod prelomno točko xl (62em); sicer skrito.
.-show-max-xs	Prikaži (obratno od -hidden-min-xs), ko je vidno polje pri ali pod prelomno točko xs (16em); sicer skrito.
.-show-min-content	Prikaži (obratno od -hidden-max-content), ko je vidno polje pri ali nad prelomno točko content (68.75em); sicer skrito.
.-show-min-content-full-width	Prikaži (obratno od -hidden-max-content-full-width), ko je vidno polje pri ali nad prelomno točko content-full-width (98.75em); sicer skrito.
.-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	Prikaži (obratno od -hidden-max-lg), ko je vidno polje pri ali nad prelomno točko lg (48em); sicer skrito.
.-show-min-md	Prikaži (obratno od -hidden-max-md), ko je vidno polje pri ali nad prelomno točko md (30em); sicer skrito.
.-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	Prikaži (obratno od -hidden-max-sm), ko je vidno polje pri ali nad prelomno točko sm (20em); sicer skrito.
.-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	Prikaži (obratno od -hidden-max-xl), ko je vidno polje pri ali nad prelomno točko xl (62em); sicer skrito.
.-show-min-xs	Prikaži (obratno od -hidden-max-xs), ko je vidno polje pri ali nad prelomno točko xs (16em); sicer skrito.

Lastnosti po meri

Lastnost	Tip	Privzeto	Opis
--pantoken-bp-content	<length>	68.75em	Vrednost prelomne točke content (68.75em, ročno ustvarjena, tematska (ni v token IR)). Njeno prepisovanje ne prestavi prevedenih pragov @media/@container navzgor.
--pantoken-bp-content-full-width	<length>	98.75em	Vrednost prelomne točke content-full-width (98.75em, ročno ustvarjena, tematska (ni v token IR)). Njeno prepisovanje ne prestavi prevedenih pragov @media/@container navzgor.
--pantoken-bp-lg	<length>	48em	Vrednost prelomne točke lg (48em, odseva --instui-component-tray-width-lg). Njeno prepisovanje ne prestavi prevedenih pragov @media/@container navzgor.
--pantoken-bp-md	<length>	30em	Vrednost prelomne točke md (30em, odseva --instui-component-tray-width-md). Njeno prepisovanje ne prestavi prevedenih pragov @media/@container navzgor.
--pantoken-bp-sm	<length>	20em	Vrednost prelomne točke sm (20em, odseva --instui-component-tray-width-sm). Njeno prepisovanje ne prestavi prevedenih pragov @media/@container navzgor.
--pantoken-bp-xl	<length>	62em	Vrednost prelomne točke xl (62em, odseva --instui-component-tray-width-xl). Njeno prepisovanje ne prestavi prevedenih pragov @media/@container navzgor.
--pantoken-bp-xs	<length>	16em	Vrednost prelomne točke xs (16em, odseva --instui-component-tray-width-xs). Njeno prepisovanje ne prestavi prevedenih pragov @media/@container navzgor.

Pogoji

Tip	Poizvedba	Opis
media	(max-width: 16em)	Zgornja meja prelomne točke xs.
media	(min-width: 16em)	Spodnja meja prelomne točke xs.
media	(max-width: 20em)	Zgornja meja prelomne točke sm.
media	(min-width: 20em)	Spodnja meja prelomne točke sm.
media	(max-width: 30em)	Zgornja meja prelomne točke md.
media	(min-width: 30em)	Spodnja meja prelomne točke md.
media	(max-width: 48em)	Zgornja meja prelomne točke lg.
media	(min-width: 48em)	Spodnja meja prelomne točke lg.
media	(max-width: 62em)	Zgornja meja prelomne točke xl.
media	(min-width: 62em)	Spodnja meja prelomne točke xl.
media	(max-width: 68.75em)	Zgornja meja prelomne točke content.
media	(min-width: 68.75em)	Spodnja meja prelomne točke content.
media	(max-width: 98.75em)	Zgornja meja prelomne točke content-full-width.
media	(min-width: 98.75em)	Spodnja meja prelomne točke content-full-width.
container	(max-width: 16em)	Zgornja meja prelomne točke xs, ocenjena glede na označen vsebnik.
container	(min-width: 16em)	Spodnja meja prelomne točke xs, ocenjena glede na označen vsebnik.
container	(max-width: 20em)	Zgornja meja prelomne točke sm, ocenjena glede na označen vsebnik.
container	(min-width: 20em)	Spodnja meja prelomne točke sm, ocenjena glede na označen vsebnik.
container	(max-width: 30em)	Zgornja meja prelomne točke md, ocenjena glede na označen vsebnik.
container	(min-width: 30em)	Spodnja meja prelomne točke md, ocenjena glede na označen vsebnik.
container	(max-width: 48em)	Zgornja meja prelomne točke lg, ocenjena glede na označen vsebnik.
container	(min-width: 48em)	Spodnja meja prelomne točke lg, ocenjena glede na označen vsebnik.
container	(max-width: 62em)	Zgornja meja prelomne točke xl, ocenjena glede na označen vsebnik.
container	(min-width: 62em)	Spodnja meja prelomne točke xl, ocenjena glede na označen vsebnik.
container	(max-width: 68.75em)	Zgornja meja prelomne točke content, ocenjena glede na označen vsebnik.
container	(min-width: 68.75em)	Spodnja meja prelomne točke content, ocenjena glede na označen vsebnik.
container	(max-width: 98.75em)	Zgornja meja prelomne točke content-full-width, ocenjena glede na označen vsebnik.
container	(min-width: 98.75em)	Spodnja meja prelomne točke content-full-width, ocenjena glede na označen vsebnik.

Porabljeni žetoni

Token	Tip	Vrednost
--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