CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Տեսադաշտի (viewport) կամ կոնտեյների լայնության վրա հիմնված ցուցադրման/թաքցման դասեր՝ թեմատիկ ընդհատման կետերի սանդղակում։

.instui-hidden-max-<bp>/-hidden-min-<bp> թաքցնում են ըստ տեսադաշտի լայնության; .instui-show-max-<bp>/-show-min-<bp> եռացվում են հակառակ կերպով (առաջնայինում թաքնված են, միայն տիրույթում ցույց են տալիս display: revert-ով); -cq- տարբերակները փոխարենը արձագանքում են .instui-container նախնորդի լայնությանը, ոչ թե տեսադաշտի լայնությանը: Սանդղակի մակարդակները xs/sm/md/lg/xl (ստացվում են IR-ի tray-width կոմպոնենտի տոկէններից) յուրաքանչյուրն ունեն երկար ձևով անուն (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); այլwise թաքնված է։
.-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); այլwise թաքնված է։
.-cq-show-min-content-full-width	Ցույց տալ, երբ նշված կոնտեյները գտնվում է content-full-width ընդհատման կետից վեր կամ հավասար (98.75em); այլwise թաքնված է։
.-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); այլwise թաքնված է։
.-cq-show-min-md	Ցույց տալ, երբ նշված կոնտեյները գտնվում է md ընդհատման կետից վեր կամ հավասար (30em); այլwise թաքնված է։
.-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); այլwise թաքնված է։
.-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); այլwise թաքնված է։
.-cq-show-min-xs	Ցույց տալ, երբ նշված կոնտեյները գտնվում է xs ընդհատման կետից վեր կամ հավասար (16em); այլwise թաքնված է։
.-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, ձեռքով գրած, թեմատիկ (չի գտնվի 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 breakpoint-ի վերին սահմանը։
container	(min-width: 30em)	Նշագրված կոնտեյների նկատմամբ գնահատված md breakpoint-ի ստորին սահմանը։
container	(max-width: 48em)	Նշագրված կոնտեյների նկատմամբ գնահատված lg breakpoint-ի վերին սահմանը։
container	(min-width: 48em)	Նշագրված կոնտեյների նկատմամբ գնահատված lg breakpoint-ի ստորին սահմանը։
container	(max-width: 62em)	Նշագրված կոնտեյների նկատմամբ գնահատված xl breakpoint-ի վերին սահմանը։
container	(min-width: 62em)	Նշագրված կոնտեյների նկատմամբ գնահատված xl breakpoint-ի ստորին սահմանը։
container	(max-width: 68.75em)	Նշագրված կոնտեյների նկատմամբ գնահատված content breakpoint-ի վերին սահմանը։
container	(min-width: 68.75em)	Նշագրված կոնտեյների նկատմամբ գնահատված content breakpoint-ի ստորին սահմանը։
container	(max-width: 98.75em)	Նշագրված կոնտեյների նկատմամբ գնահատված content-full-width breakpoint-ի վերին սահմանը։
container	(min-width: 98.75em)	Նշագրված կոնտեյների նկատմամբ գնահատված content-full-width breakpoint-ի ստորին սահմանը։

Ցուցիչներ սպառված

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