CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Ngā kara huna/wātea ā-whānui-tirohanga rānei ā-ipu i roto i te rēreti tapawhā tōpū.

.instui-hidden-max-<bp>/-hidden-min-<bp> ka huna mā te whānuitanga tirohanga; ko .instui-show-max-<bp>/-show-min-<bp> te whakahē (kua huna mā te taunoa, ka whakaatuhia anake i roto i te awhi mā display: revert); ko ngā momo -cq- ka urupare ki te whānui o tētahi tūpuna .instui-container, ehara i te whānuitanga tirohanga. Ko ngā wāhanga rahi xs/sm/md/lg/xl (i ahu mai i ngā tohu wā-whānui o te IR) kua whakatūturuhia ki te āhua roa (x-small–x-large) me te ingoa pūrere (mobile/phablet/tablet/laptop/desktop) — kua tuku iho ēnei ki te whakamahi i te ingoa pōtiki — me ngā taumata kāore i te whakatōpū, ā-tāroaro content/content-full-width (te whānuitanga mōrahi o te wāhanga ihirangi matua).

Source: index.ts

Ngā Whakamahi

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

Ngā tauira

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

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.-cq-hidden-max-content	Huna mēnā kei te taumata content te ipu kua tohu, kei raro rānei (68.75em).
.-cq-hidden-max-content-full-width	Huna mēnā kei te taumata content-full-width te ipu kua tohu, kei raro rānei (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	Huna mēnā kei te taumata lg te ipu kua tohu, kei raro rānei (48em).
.-cq-hidden-max-md	Huna mēnā kei te taumata md te ipu kua tohu, kei raro rānei (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	Huna mēnā kei te taumata sm te ipu kua tohu, kei raro rānei (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	Huna mēnā kei te taumata xl te ipu kua tohu, kei raro rānei (62em).
.-cq-hidden-max-xs	Huna mēnā kei te taumata xs te ipu kua tohu, kei raro rānei (16em).
.-cq-hidden-min-content	Huna mēnā kei te taumata content te ipu kua tohu, kei runga rānei (68.75em).
.-cq-hidden-min-content-full-width	Huna mēnā kei te taumata content-full-width te ipu kua tohu, kei runga rānei (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	Huna mēnā kei te taumata lg te ipu kua tohu, kei runga rānei (48em).
.-cq-hidden-min-md	Huna mēnā kei te taumata md te ipu kua tohu, kei runga rānei (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	Huna mēnā kei te taumata sm te ipu kua tohu, kei runga rānei (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	Huna mēnā kei te taumata xl te ipu kua tohu, kei runga rānei (62em).
.-cq-hidden-min-xs	Huna mēnā kei te taumata xs te ipu kua tohu, kei runga rānei (16em).
.-cq-show-max-content	Whakaatuhia mēnā kei te taumata content te ipu kua tohu, kei raro rānei (68.75em); koinei anō te wā ka huna kē.
.-cq-show-max-content-full-width	Whakaatuhia mēnā kei te taumata content-full-width te ipu kua tohu, kei raro rānei (98.75em); koinei anō te wā ka huna kē.
.-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	Whakaatuhia mēnā kei te taumata lg te ipu kua tohu, kei raro rānei (48em); koinei anō te wā ka huna kē.
.-cq-show-max-md	Whakaatuhia mēnā kei te taumata md te ipu kua tohu, kei raro rānei (30em); koinei anō te wā ka huna kē.
.-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	Whakaatuhia mēnā kei te taumata sm te ipu kua tohu, kei raro rānei (20em); koinei anō te wā ka huna kē.
.-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	Whakaatuhia mēnā kei te taumata xl te ipu kua tohu, kei raro rānei (62em); koinei anō te wā ka huna kē.
.-cq-show-max-xs	Whakaatuhia mēnā kei te taumata xs te ipu kua tohu, kei raro rānei (16em); koinei anō te wā ka huna kē.
.-cq-show-min-content	Whakaatuhia mēnā kei te taumata content te ipu kua tohu, kei runga rānei (68.75em); koinei anō te wā ka huna kē.
.-cq-show-min-content-full-width	Whakaatuhia mēnā kei te taumata content-full-width te ipu kua tohu, kei runga rānei (98.75em); koinei anō te wā ka huna kē.
.-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	Whakaatuhia mēnā kei te taumata lg te ipu kua tohu, kei runga rānei (48em); koinei anō te wā ka huna kē.
.-cq-show-min-md	Whakaatuhia mēnā kei te taumata md te ipu kua tohu, kei runga rānei (30em); koinei anō te wā ka huna kē.
.-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	Whakaatuhia mēnā kei te taumata sm te ipu kua tohu, kei runga rānei (20em); koinei anō te wā ka huna kē.
.-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	Whakaatuhia mēnā kei te taumata xl te ipu kua tohu, kei runga rānei (62em); koinei anō te wā ka huna kē.
.-cq-show-min-xs	Whakaatuhia mēnā kei te taumata xs te ipu kua tohu, kei runga rānei (16em); koinei anō te wā ka huna kē.
.-hidden-max-content	Huna mēnā kei te matapihi tirohanga te taumata content, kei raro rānei (68.75em).
.-hidden-max-content-full-width	Huna mēnā kei te matapihi tirohanga te taumata content-full-width, kei raro rānei (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	Huna mēnā kei te matapihi tirohanga te taumata lg, kei raro rānei (48em).
.-hidden-max-md	Huna mēnā kei te matapihi tirohanga te taumata md, kei raro rānei (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	Huna mēnā kei te matapihi tirohanga te taumata sm, kei raro rānei (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	Huna mēnā kei te matapihi tirohanga te taumata xl, kei raro rānei (62em).
.-hidden-max-xs	Huna mēnā kei te matapihi tirohanga te taumata xs, kei raro rānei (16em).
.-hidden-min-content	Huna mēnā kei te matapihi tirohanga te taumata content, kei runga rānei (68.75em).
.-hidden-min-content-full-width	Huna mēnā kei te matapihi tirohanga te taumata content-full-width, kei runga rānei (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	Huna mēnā kei te matapihi tirohanga te taumata lg, kei runga rānei (48em).
.-hidden-min-md	Huna ina kei te taumata wehenga md te matapihi tirohanga, i runga rānei (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	Huna ina kei te taumata wehenga sm te matapihi tirohanga, i runga rānei (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	Huna ina kei te taumata wehenga xl te matapihi tirohanga, i runga rānei (62em).
.-hidden-min-xs	Huna ina kei te taumata wehenga xs te matapihi tirohanga, i runga rānei (16em).
.-show-max-content	Whakaatu (te whakawāhanga o -hidden-min-content) ina kei te taumata wehenga content te matapihi tirohanga, i raro rānei (68.75em); ā, ka huna i ērā atu.
.-show-max-content-full-width	Whakaatu (te whakawāhanga o -hidden-min-content-full-width) ina kei te taumata wehenga content-full-width te matapihi tirohanga, i raro rānei (98.75em); ā, ka huna i ērā atu.
.-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	Whakaatu (te whakawāhanga o -hidden-min-lg) ina kei te taumata wehenga lg te matapihi tirohanga, i raro rānei (48em); ā, ka huna i ērā atu.
.-show-max-md	Whakaatu (te whakawāhanga o -hidden-min-md) ina kei te taumata wehenga md te matapihi tirohanga, i raro rānei (30em); ā, ka huna i ērā atu.
.-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	Whakaatu (te whakawāhanga o -hidden-min-sm) ina kei te taumata wehenga sm te matapihi tirohanga, i raro rānei (20em); ā, ka huna i ērā atu.
.-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	Whakaatu (te whakawāhanga o -hidden-min-xl) ina kei te taumata wehenga xl te matapihi tirohanga, i raro rānei (62em); ā, ka huna i ērā atu.
.-show-max-xs	Whakaatu (te whakawāhanga o -hidden-min-xs) ina kei te taumata wehenga xs te matapihi tirohanga, i raro rānei (16em); ā, ka huna i ērā atu.
.-show-min-content	Whakaatu (te whakawāhanga o -hidden-max-content) ina kei te taumata wehenga content te matapihi tirohanga, i runga rānei (68.75em); ā, ka huna i ērā atu.
.-show-min-content-full-width	Whakaatu (te whakawāhanga o -hidden-max-content-full-width) ina kei te taumata wehenga content-full-width te matapihi tirohanga, i runga rānei (98.75em); ā, ka huna i ērā atu.
.-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	Whakaatu (te whakawāhanga o -hidden-max-lg) ina kei te taumata wehenga lg te matapihi tirohanga, i runga rānei (48em); ā, ka huna i ērā atu.
.-show-min-md	Whakaatu (te whakawāhanga o -hidden-max-md) ina kei te taumata wehenga md te matapihi tirohanga, i runga rānei (30em); ā, ka huna i ērā atu.
.-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	Whakaatu (te whakawāhanga o -hidden-max-sm) ina kei te taumata wehenga sm te matapihi tirohanga, i runga rānei (20em); ā, ka huna i ērā atu.
.-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	Whakaatu (te whakawāhanga o -hidden-max-xl) ina kei te taumata wehenga xl te matapihi tirohanga, i runga rānei (62em); ā, ka huna i ērā atu.
.-show-min-xs	Whakaatu (te whakawāhanga o -hidden-max-xs) ina kei te taumata wehenga xs te matapihi tirohanga, i runga rānei (16em); ā, ka huna i ērā atu.

Ngā taonga ritenga

Rawa	Momo	Taunoa	Whakamārama
--pantoken-bp-content	<length>	68.75em	Ko te uara o te taumata wehenga content (68.75em, i tuhia ā-ringa, kua āhua-mātiti (kāore i roto i te token IR)). Kāore te whakamāori ake i tēnei e neke ai ngā paearu kua whakakotahihia @media/@container ki runga.
--pantoken-bp-content-full-width	<length>	98.75em	Ko te uara o te taumata wehenga content-full-width (98.75em, i tuhia ā-ringa, kua āhua-mātiti (kāore i roto i te token IR)). Kāore te whakamāori ake i tēnei e neke ai ngā paearu kua whakakotahihia @media/@container ki runga.
--pantoken-bp-lg	<length>	48em	Ko te uara o te taumata wehenga lg (48em, e ōrite ana ki --instui-component-tray-width-lg). Kāore te whakamāori ake i tēnei e neke ai ngā paearu kua whakakotahihia @media/@container ki runga.
--pantoken-bp-md	<length>	30em	Ko te uara o te taumata wehenga md (30em, e ōrite ana ki --instui-component-tray-width-md). Kāore te whakamāori ake i tēnei e neke ai ngā paearu kua whakakotahihia @media/@container ki runga.
--pantoken-bp-sm	<length>	20em	Ko te uara o te taumata wehenga sm (20em, e ōrite ana ki --instui-component-tray-width-sm). Kāore te whakamāori ake i tēnei e neke ai ngā paearu kua whakakotahihia @media/@container ki runga.
--pantoken-bp-xl	<length>	62em	Ko te uara o te taumata wehenga xl (62em, e ōrite ana ki --instui-component-tray-width-xl). Kāore te whakamāori ake i tēnei e neke ai ngā paearu kua whakakotahihia @media/@container ki runga.
--pantoken-bp-xs	<length>	16em	Ko te uara o te taumata wehenga xs (16em, e ōrite ana ki --instui-component-tray-width-xs). Kāore te whakamāori ake i tēnei e neke ai ngā paearu kua whakakotahihia @media/@container ki runga.

Ngā Conditions

Momo	Pātai	Whakamārama
media	(max-width: 16em)	Te here runga o te taumata wehenga xs.
media	(min-width: 16em)	Te here raro o te taumata wehenga xs.
media	(max-width: 20em)	Te here runga o te taumata wehenga sm.
media	(min-width: 20em)	Te here raro o te taumata wehenga sm.
media	(max-width: 30em)	Te here runga o te taumata wehenga md.
media	(min-width: 30em)	Te here raro o te taumata wehenga md.
media	(max-width: 48em)	Te here runga o te taumata wehenga lg.
media	(min-width: 48em)	Te here raro o te taumata wehenga lg.
media	(max-width: 62em)	Te here runga o te taumata wehenga xl.
media	(min-width: 62em)	Te here raro o te taumata wehenga xl.
media	(max-width: 68.75em)	Te here runga o te taumata wehenga content.
media	(min-width: 68.75em)	Te here raro o te taumata wehenga content.
media	(max-width: 98.75em)	Te here runga o te taumata wehenga content-full-width.
media	(min-width: 98.75em)	Te here raro o te taumata wehenga content-full-width.
container	(max-width: 16em)	Te here runga o te taumata wehenga xs, i aromatawaihia anō ki tētahi ipu tohu.
container	(min-width: 16em)	Te here raro o te taumata wehenga xs, i aromatawaihia anō ki tētahi ipu tohu.
container	(max-width: 20em)	Te here runga o te taumata wehenga sm, i aromatawaihia anō ki tētahi ipu tohu.
container	(min-width: 20em)	Te here raro o te taumata wehenga sm, i aromatawaihia anō ki tētahi ipu tohu.
container	(max-width: 30em)	Tapeke runga o te wehenga-tara md, i aromātai ki tētahi ipu tohu.
container	(min-width: 30em)	Tapeke raro o te wehenga-tara md, i aromātai ki tētahi ipu tohu.
container	(max-width: 48em)	Tapeke runga o te wehenga-tara lg, i aromātai ki tētahi ipu tohu.
container	(min-width: 48em)	Tapeke raro o te wehenga-tara lg, i aromātai ki tētahi ipu tohu.
container	(max-width: 62em)	Tapeke runga o te wehenga-tara xl, i aromātai ki tētahi ipu tohu.
container	(min-width: 62em)	Tapeke raro o te wehenga-tara xl, i aromātai ki tētahi ipu tohu.
container	(max-width: 68.75em)	Tapeke runga o te wehenga-tara content, i aromātai ki tētahi ipu tohu.
container	(min-width: 68.75em)	Tapeke raro o te wehenga-tara content, i aromātai ki tētahi ipu tohu.
container	(max-width: 98.75em)	Tapeke runga o te wehenga-tara content-full-width, i aromātai ki tētahi ipu tohu.
container	(min-width: 98.75em)	Tapeke raro o te wehenga-tara content-full-width, i aromātai ki tētahi ipu tohu.

Ngā tohu i whakamahia

Token	Momo	Uara
--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