CSS: responsive

[class*="-hidden-"],[class*="-show-"] — کلاس‌های نمایش/پنهان‌شدن بر اساس عرض نما (viewport) یا عرض کانتینر در مقیاس نقاط گسست themed.

.instui-hidden-max-<bp>/-hidden-min-<bp> با عرض نما پنهان می‌کنند؛ .instui-show-max-<bp>/-show-min-<bp> معکوس هستند (به‌صورت پیش‌فرض پنهان، تنها در محدوده با display: revert نشان داده می‌شوند)؛ و واریانت‌های -cq- به‌جای عرض نما، به عرض جدّ .instui-container اجدادی واکنش نشان می‌دهند. لایه‌های مقیاس xs/sm/md/lg/xl (منبع از توکن‌های component tray-width در IR) به هر یک یک نام بلند‌نویسیده (x-small–x-large) و یک نام دستگاه (mobile/phablet/tablet/laptop/desktop) منتسب شده — که هر دو در برابر نام کوتاه منسوخ‌شده‌اند — به‌علاوه لایه‌های بدون مقیاس و themed 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	پنهان کن وقتی نما (viewport) در یا پایین نقطه‌گسست content (68.75em) باشد.
.-hidden-max-content-full-width	پنهان کن وقتی نما (viewport) در یا پایین نقطه‌گسست 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	پنهان کن وقتی نما (viewport) در یا پایین نقطه‌گسست lg (48em) باشد.
.-hidden-max-md	پنهان کن وقتی نما (viewport) در یا پایین نقطه‌گسست 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	پنهان کن وقتی نما (viewport) در یا پایین نقطه‌گسست 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	پنهان کن وقتی نما (viewport) در یا پایین نقطه‌گسست xl (62em) باشد.
.-hidden-max-xs	پنهان کن وقتی نما (viewport) در یا پایین نقطه‌گسست xs (16em) باشد.
.-hidden-min-content	پنهان کن وقتی نما (viewport) در یا بالاتر از نقطه‌گسست content (68.75em) باشد.
.-hidden-min-content-full-width	پنهان کن وقتی نما (viewport) در یا بالاتر از نقطه‌گسست 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	پنهان کن وقتی نما (viewport) در یا بالاتر از نقطه‌گسست lg (48em) باشد.
.-hidden-min-md	مخفی شود وقتی نما (viewport) در نقطهٔ شکست 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	مخفی شود وقتی نما (viewport) در نقطهٔ شکست 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	مخفی شود وقتی نما (viewport) در نقطهٔ شکست xl یا بالاتر است (62em).
.-hidden-min-xs	مخفی شود وقتی نما (viewport) در نقطهٔ شکست 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