CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Temalı bir kırılma noktası ölçeği boyunca görüntüleme/gizleme sınıfları (viewport veya konteyner genişliğine göre).

.instui-hidden-max-<bp>/-hidden-min-<bp> viewport genişliğine göre gizler; .instui-show-max-<bp>/-show-min-<bp> bunun tersidir (varsayılan gizli, yalnızca aralık içinde display: revert ile gösterilir); -cq- varyantları ise viewport yerine bir .instui-container atasının genişliğine tepki verir. Ölçek kademeleri xs/sm/md/lg/xl (IR'nin tray-width bileşen token'larından alınır) her biri uzun biçim yazımı (x-small–x-large) ve bir cihaz adı (mobile/phablet/tablet/laptop/desktop) ile eşlenmiştir — her iki biçim de kısa adın yerini alması için kullanımdan kalkmıştır — ayrıca ölçeklenmemiş, temalı content/content-full-width kademeleri (ana içerik alanının maks-genişliği) mevcuttur.

Source: index.ts

Kullanım

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

Örnekler

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

Değiştiriciler

Değiştirici	Açıklama
.-cq-hidden-max-content	İşaretli konteyner content kırılma noktasında veya altında olduğunda gizle (68.75em).
.-cq-hidden-max-content-full-width	İşaretli konteyner content-full-width kırılma noktasında veya altında olduğunda gizle (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	İşaretli konteyner lg kırılma noktasında veya altında olduğunda gizle (48em).
.-cq-hidden-max-md	İşaretli konteyner md kırılma noktasında veya altında olduğunda gizle (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	İşaretli konteyner sm kırılma noktasında veya altında olduğunda gizle (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	İşaretli konteyner xl kırılma noktasında veya altında olduğunda gizle (62em).
.-cq-hidden-max-xs	İşaretli konteyner xs kırılma noktasında veya altında olduğunda gizle (16em).
.-cq-hidden-min-content	İşaretli konteyner content kırılma noktasında veya üstünde olduğunda gizle (68.75em).
.-cq-hidden-min-content-full-width	İşaretli konteyner content-full-width kırılma noktasında veya üstünde olduğunda gizle (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	İşaretli konteyner lg kırılma noktasında veya üstünde olduğunda gizle (48em).
.-cq-hidden-min-md	İşaretli konteyner md kırılma noktasında veya üstünde olduğunda gizle (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	İşaretli konteyner sm kırılma noktasında veya üstünde olduğunda gizle (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	İşaretli konteyner xl kırılma noktasında veya üstünde olduğunda gizle (62em).
.-cq-hidden-min-xs	İşaretli konteyner xs kırılma noktasında veya üstünde olduğunda gizle (16em).
.-cq-show-max-content	İşaretli konteyner content kırılma noktasında veya altında olduğunda göster; aksi halde gizli (68.75em).
.-cq-show-max-content-full-width	İşaretli konteyner content-full-width kırılma noktasında veya altında olduğunda göster; aksi halde gizli (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	İşaretli konteyner lg kırılma noktasında veya altında olduğunda göster; aksi halde gizli (48em).
.-cq-show-max-md	İşaretli konteyner md kırılma noktasında veya altında olduğunda göster; aksi halde gizli (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	İşaretli konteyner sm kırılma noktasında veya altında olduğunda göster; aksi halde gizli (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	İşaretli konteyner xl kırılma noktasında veya altında olduğunda göster; aksi halde gizli (62em).
.-cq-show-max-xs	İşaretli konteyner xs kırılma noktasında veya altında olduğunda göster; aksi halde gizli (16em).
.-cq-show-min-content	İşaretli konteyner content kırılma noktasında veya üstünde olduğunda göster; aksi halde gizli (68.75em).
.-cq-show-min-content-full-width	İşaretli konteyner content-full-width kırılma noktasında veya üstünde olduğunda göster; aksi halde gizli (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	İşaretli konteyner lg kırılma noktasında veya üstünde olduğunda göster; aksi halde gizli (48em).
.-cq-show-min-md	İşaretli konteyner md kırılma noktasında veya üstünde olduğunda göster; aksi halde gizli (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	İşaretli konteyner sm kırılma noktasında veya üstünde olduğunda göster; aksi halde gizli (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	İşaretli konteyner xl kırılma noktasında veya üstünde olduğunda göster; aksi halde gizli (62em).
.-cq-show-min-xs	İşaretli konteyner xs kırılma noktasında veya üstünde olduğunda göster; aksi halde gizli (16em).
.-hidden-max-content	Viewport content kırılma noktasında veya altında olduğunda gizle (68.75em).
.-hidden-max-content-full-width	Viewport content-full-width kırılma noktasında veya altında olduğunda gizle (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	Viewport lg kırılma noktasında veya altında olduğunda gizle (48em).
.-hidden-max-md	Viewport md kırılma noktasında veya altında olduğunda gizle (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	Viewport sm kırılma noktasında veya altında olduğunda gizle (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	Viewport xl kırılma noktasında veya altında olduğunda gizle (62em).
.-hidden-max-xs	Viewport xs kırılma noktasında veya altında olduğunda gizle (16em).
.-hidden-min-content	Viewport content kırılma noktasında veya üstünde olduğunda gizle (68.75em).
.-hidden-min-content-full-width	Viewport content-full-width kırılma noktasında veya üstünde olduğunda gizle (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	Viewport lg kırılma noktasında veya üstünde olduğunda gizle (48em).
.-hidden-min-md	Görünüm alanı md kırılma noktasında veya üzerinde olduğunda gizle (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	Görünüm alanı sm kırılma noktasında veya üzerinde olduğunda gizle (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	Görünüm alanı xl kırılma noktasında veya üzerinde olduğunda gizle (62em).
.-hidden-min-xs	Görünüm alanı xs kırılma noktasında veya üzerinde olduğunda gizle (16em).
.-show-max-content	Görüntüle (-hidden-min-content'ın tersine) — görünüm alanı content kırılma noktasında veya altında olduğunda (68.75em); aksi hâlde gizli.
.-show-max-content-full-width	Görüntüle (-hidden-min-content-full-width'ın tersine) — görünüm alanı content-full-width kırılma noktasında veya altında olduğunda (98.75em); aksi hâlde gizli.
.-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	Görüntüle (-hidden-min-lg'ın tersine) — görünüm alanı lg kırılma noktasında veya altında olduğunda (48em); aksi hâlde gizli.
.-show-max-md	Görüntüle (-hidden-min-md'ın tersine) — görünüm alanı md kırılma noktasında veya altında olduğunda (30em); aksi hâlde gizli.
.-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	Görüntüle (-hidden-min-sm'ın tersine) — görünüm alanı sm kırılma noktasında veya altında olduğunda (20em); aksi hâlde gizli.
.-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	Görüntüle (-hidden-min-xl'ın tersine) — görünüm alanı xl kırılma noktasında veya altında olduğunda (62em); aksi hâlde gizli.
.-show-max-xs	Görüntüle (-hidden-min-xs'ın tersine) — görünüm alanı xs kırılma noktasında veya altında olduğunda (16em); aksi hâlde gizli.
.-show-min-content	Görüntüle (-hidden-max-content'ın tersine) — görünüm alanı content kırılma noktasında veya üzerinde olduğunda (68.75em); aksi hâlde gizli.
.-show-min-content-full-width	Görüntüle (-hidden-max-content-full-width'ın tersine) — görünüm alanı content-full-width kırılma noktasında veya üzerinde olduğunda (98.75em); aksi hâlde gizli.
.-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	Görüntüle (-hidden-max-lg'ın tersine) — görünüm alanı lg kırılma noktasında veya üzerinde olduğunda (48em); aksi hâlde gizli.
.-show-min-md	Görüntüle (-hidden-max-md'ın tersine) — görünüm alanı md kırılma noktasında veya üzerinde olduğunda (30em); aksi hâlde gizli.
.-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	Görüntüle (-hidden-max-sm'ın tersine) — görünüm alanı sm kırılma noktasında veya üzerinde olduğunda (20em); aksi hâlde gizli.
.-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	Görüntüle (-hidden-max-xl'ın tersine) — görünüm alanı xl kırılma noktasında veya üzerinde olduğunda (62em); aksi hâlde gizli.
.-show-min-xs	Görüntüle (-hidden-max-xs'ın tersine) — görünüm alanı xs kırılma noktasında veya üzerinde olduğunda (16em); aksi hâlde gizli.

Özel özellikler

Özellik	Tür	Varsayılan	Açıklama
--pantoken-bp-content	<length>	68.75em	content kırılma noktasının değeri (68.75em, elle yazılmış, temalı (token IR içinde değil)). Bunu geçersiz kılmak derlenmiş @media/@container eşiklerini yukarı taşımaz.
--pantoken-bp-content-full-width	<length>	98.75em	content-full-width kırılma noktasının değeri (98.75em, elle yazılmış, temalı (token IR içinde değil)). Bunu geçersiz kılmak derlenmiş @media/@container eşiklerini yukarı taşımaz.
--pantoken-bp-lg	<length>	48em	lg kırılma noktasının değeri (48em, --instui-component-tray-width-lg'yi yansıtır). Bunu geçersiz kılmak derlenmiş @media/@container eşiklerini yukarı taşımaz.
--pantoken-bp-md	<length>	30em	md kırılma noktasının değeri (30em, --instui-component-tray-width-md'yi yansıtır). Bunu geçersiz kılmak derlenmiş @media/@container eşiklerini yukarı taşımaz.
--pantoken-bp-sm	<length>	20em	sm kırılma noktasının değeri (20em, --instui-component-tray-width-sm'yi yansıtır). Bunu geçersiz kılmak derlenmiş @media/@container eşiklerini yukarı taşımaz.
--pantoken-bp-xl	<length>	62em	xl kırılma noktasının değeri (62em, --instui-component-tray-width-xl'yi yansıtır). Bunu geçersiz kılmak derlenmiş @media/@container eşiklerini yukarı taşımaz.
--pantoken-bp-xs	<length>	16em	xs kırılma noktasının değeri (16em, --instui-component-tray-width-xs'yi yansıtır). Bunu geçersiz kılmak derlenmiş @media/@container eşiklerini yukarı taşımaz.

Koşullar

Tür	Sorgu	Açıklama
media	(max-width: 16em)	xs kırılma noktasının üst sınırı.
media	(min-width: 16em)	xs kırılma noktasının alt sınırı.
media	(max-width: 20em)	sm kırılma noktasının üst sınırı.
media	(min-width: 20em)	sm kırılma noktasının alt sınırı.
media	(max-width: 30em)	md kırılma noktasının üst sınırı.
media	(min-width: 30em)	md kırılma noktasının alt sınırı.
media	(max-width: 48em)	lg kırılma noktasının üst sınırı.
media	(min-width: 48em)	lg kırılma noktasının alt sınırı.
media	(max-width: 62em)	xl kırılma noktasının üst sınırı.
media	(min-width: 62em)	xl kırılma noktasının alt sınırı.
media	(max-width: 68.75em)	content kırılma noktasının üst sınırı.
media	(min-width: 68.75em)	content kırılma noktasının alt sınırı.
media	(max-width: 98.75em)	content-full-width kırılma noktasının üst sınırı.
media	(min-width: 98.75em)	content-full-width kırılma noktasının alt sınırı.
container	(max-width: 16em)	xs kırılma noktasının üst sınırı, etiketlenmiş bir konteynere göre değerlendirildiğinde.
container	(min-width: 16em)	xs kırılma noktasının alt sınırı, etiketlenmiş bir konteynere göre değerlendirildiğinde.
container	(max-width: 20em)	sm kırılma noktasının üst sınırı, etiketlenmiş bir konteynere göre değerlendirildiğinde.
container	(min-width: 20em)	sm kırılma noktasının alt sınırı, etiketlenmiş bir konteynere göre değerlendirildiğinde.
container	(max-width: 30em)	İşaretlenmiş bir konteynere karşı değerlendirilen md kesme noktasının üst sınırı.
container	(min-width: 30em)	İşaretlenmiş bir konteynere karşı değerlendirilen md kesme noktasının alt sınırı.
container	(max-width: 48em)	İşaretlenmiş bir konteynere karşı değerlendirilen lg kesme noktasının üst sınırı.
container	(min-width: 48em)	İşaretlenmiş bir konteynere karşı değerlendirilen lg kesme noktasının alt sınırı.
container	(max-width: 62em)	İşaretlenmiş bir konteynere karşı değerlendirilen xl kesme noktasının üst sınırı.
container	(min-width: 62em)	İşaretlenmiş bir konteynere karşı değerlendirilen xl kesme noktasının alt sınırı.
container	(max-width: 68.75em)	İşaretlenmiş bir konteynere karşı değerlendirilen content kesme noktasının üst sınırı.
container	(min-width: 68.75em)	İşaretlenmiş bir konteynere karşı değerlendirilen content kesme noktasının alt sınırı.
container	(max-width: 98.75em)	İşaretlenmiş bir konteynere karşı değerlendirilen content-full-width kesme noktasının üst sınırı.
container	(min-width: 98.75em)	İşaretlenmiş bir konteynere karşı değerlendirilen content-full-width kesme noktasının alt sınırı.

Tüketilen tokenler

Token	Tür	Değer
--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