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