CSS: responsive

[class*="-hidden-"],[class*="-show-"] — थीम-ब्रेकपॉइंट स्केल में viewport या container-चौड़ाई के आधार पर दिखाने/छिपाने की क्लासें।

.instui-hidden-max-<bp>/-hidden-min-<bp> viewport चौड़ाई द्वारा छुपाती हैं; .instui-show-max-<bp>/-show-min-<bp> उनका विपरीत हैं (डिफ़ॉल्ट रूप से छिपी हुई, केवल display: revert के ज़रिए रेंज के भीतर दिखाई देती हैं); -cq- वैरिएंट किसी .instui-container पूर्वज की चौड़ाई पर प्रतिक्रिया करते हैं, viewport पर नहीं। स्केल टियर्स xs/sm/md/lg/xl (IR के tray-width component टोकन्स से स्रोत) को प्रत्येक लंबी-फॉर्म स्पेलिंग (x-small–x-large) और डिवाइस नाम (mobile/phablet/tablet/laptop/desktop) से एलियस किया गया है — दोनों शॉर्ट नाम के पक्ष में अप्रचलित हैं — साथ ही अनस्केल्ड, थीम्ड content/content-full-width टियर्स (मुख्य कंटेंट एरिया की max-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	जब viewport content ब्रेकपॉइंट (68.75em) पर या उसके नीचे हो तो दिखाएँ (-hidden-min-content का विपरीत); अन्यथा छिपा रहेगा।
.-show-max-content-full-width	जब viewport content-full-width ब्रेकपॉइंट (98.75em) पर या उसके नीचे हो तो दिखाएँ (-hidden-min-content-full-width का विपरीत); अन्यथा छिपा रहेगा।
.-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	जब viewport lg ब्रेकपॉइंट (48em) पर या उसके नीचे हो तो दिखाएँ (-hidden-min-lg का विपरीत); अन्यथा छिपा रहेगा।
.-show-max-md	जब viewport md ब्रेकपॉइंट (30em) पर या उसके नीचे हो तो दिखाएँ (-hidden-min-md का विपरीत); अन्यथा छिपा रहेगा।
.-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	जब viewport sm ब्रेकपॉइंट (20em) पर या उसके नीचे हो तो दिखाएँ (-hidden-min-sm का विपरीत); अन्यथा छिपा रहेगा।
.-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	जब viewport xl ब्रेकपॉइंट (62em) पर या उसके नीचे हो तो दिखाएँ (-hidden-min-xl का विपरीत); अन्यथा छिपा रहेगा।
.-show-max-xs	जब viewport xs ब्रेकपॉइंट (16em) पर या उसके नीचे हो तो दिखाएँ (-hidden-min-xs का विपरीत); अन्यथा छिपा रहेगा।
.-show-min-content	जब viewport content ब्रेकपॉइंट (68.75em) पर या उससे ऊपर हो तो दिखाएँ (-hidden-max-content का विपरीत); अन्यथा छिपा रहेगा।
.-show-min-content-full-width	जब viewport content-full-width ब्रेकपॉइंट (98.75em) पर या उससे ऊपर हो तो दिखाएँ (-hidden-max-content-full-width का विपरीत); अन्यथा छिपा रहेगा।
.-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	जब viewport lg ब्रेकपॉइंट (48em) पर या उससे ऊपर हो तो दिखाएँ (-hidden-max-lg का विपरीत); अन्यथा छिपा रहेगा।
.-show-min-md	जब viewport md ब्रेकपॉइंट (30em) पर या उससे ऊपर हो तो दिखाएँ (-hidden-max-md का विपरीत); अन्यथा छिपा रहेगा।
.-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	जब viewport sm ब्रेकपॉइंट (20em) पर या उससे ऊपर हो तो दिखाएँ (-hidden-max-sm का विपरीत); अन्यथा छिपा रहेगा।
.-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	जब viewport xl ब्रेकपॉइंट (62em) पर या उससे ऊपर हो तो दिखाएँ (-hidden-max-xl का विपरीत); अन्यथा छिपा रहेगा।
.-show-min-xs	जब viewport xs ब्रेकपॉइंट (16em) पर या उससे ऊपर हो तो दिखाएँ (-hidden-max-xs का विपरीत); अन्यथा छिपा रहेगा।

कस्टम प्रॉपर्टीज

प्रॉपर्टी	प्रकार	डिफ़ॉल्ट	विवरण
--pantoken-bp-content	<length>	68.75em	content ब्रेकपॉइंट का मान (68.75em, हस्तलिखित, थीम-आधारित (token IR में नहीं)). इसे ओवरराइड करने से संकलित @media/@container थ्रेशोल्ड ऊपर नहीं खिसकते।
--pantoken-bp-content-full-width	<length>	98.75em	content-full-width ब्रेकपॉइंट का मान (98.75em, हस्तलिखित, थीम-आधारित (token 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