CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Κλάσεις εμφάνισης/απόκρυψης βάσει πλάτους του viewport ή του κοντέινερ σε μια θεματική κλίμακα σημείων διακοπής.

.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 (που προέρχονται από τα token του component tray-width στο IR) έχουν το καθένα συνώνυμα με μια μακροσκελή γραφή (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 βρίσκεται στο ή πάνω από το breakpoint 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 βρίσκεται στο ή πάνω από το breakpoint 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 βρίσκεται στο ή πάνω από το breakpoint xl (62em).
.-hidden-min-xs	Απόκρυψη όταν το viewport βρίσκεται στο ή πάνω από το breakpoint xs (16em).
.-show-max-content	Εμφάνιση (αντίστροφο του -hidden-min-content) όταν το viewport βρίσκεται στο ή κάτω από το breakpoint content (68.75em); αλλιώς κρυφό.
.-show-max-content-full-width	Εμφάνιση (αντίστροφο του -hidden-min-content-full-width) όταν το viewport βρίσκεται στο ή κάτω από το breakpoint 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) όταν το viewport βρίσκεται στο ή κάτω από το breakpoint lg (48em); αλλιώς κρυφό.
.-show-max-md	Εμφάνιση (αντίστροφο του -hidden-min-md) όταν το viewport βρίσκεται στο ή κάτω από το breakpoint 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) όταν το viewport βρίσκεται στο ή κάτω από το breakpoint 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) όταν το viewport βρίσκεται στο ή κάτω από το breakpoint xl (62em); αλλιώς κρυφό.
.-show-max-xs	Εμφάνιση (αντίστροφο του -hidden-min-xs) όταν το viewport βρίσκεται στο ή κάτω από το breakpoint xs (16em); αλλιώς κρυφό.
.-show-min-content	Εμφάνιση (αντίστροφο του -hidden-max-content) όταν το viewport βρίσκεται στο ή πάνω από το breakpoint content (68.75em); αλλιώς κρυφό.
.-show-min-content-full-width	Εμφάνιση (αντίστροφο του -hidden-max-content-full-width) όταν το viewport βρίσκεται στο ή πάνω από το breakpoint 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) όταν το viewport βρίσκεται στο ή πάνω από το breakpoint lg (48em); αλλιώς κρυφό.
.-show-min-md	Εμφάνιση (αντίστροφο του -hidden-max-md) όταν το viewport βρίσκεται στο ή πάνω από το breakpoint 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) όταν το viewport βρίσκεται στο ή πάνω από το breakpoint 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) όταν το viewport βρίσκεται στο ή πάνω από το breakpoint xl (62em); αλλιώς κρυφό.
.-show-min-xs	Εμφάνιση (αντίστροφο του -hidden-max-xs) όταν το viewport βρίσκεται στο ή πάνω από το breakpoint xs (16em); αλλιώς κρυφό.

Προσαρμοσμένες ιδιότητες

Ιδιότητα	Τύπος	Προεπιλογή	Περιγραφή
--pantoken-bp-content	<length>	68.75em	Η τιμή του breakpoint content (68.75em, χειροποίητη, με θέμα (όχι στο token IR)). Η παράκαμψή της δεν μετακινεί προς τα πάνω τα μεταγλωττισμένα όρια @media/@container.
--pantoken-bp-content-full-width	<length>	98.75em	Η τιμή του breakpoint content-full-width (98.75em, χειροποίητη, με θέμα (όχι στο token IR)). Η παράκαμψή της δεν μετακινεί προς τα πάνω τα μεταγλωττισμένα όρια @media/@container.
--pantoken-bp-lg	<length>	48em	Η τιμή του breakpoint lg (48em, καθρέφτης του --instui-component-tray-width-lg). Η παράκαμψή της δεν μετακινεί προς τα πάνω τα μεταγλωττισμένα όρια @media/@container.
--pantoken-bp-md	<length>	30em	Η τιμή του breakpoint md (30em, καθρέφτης του --instui-component-tray-width-md). Η παράκαμψή της δεν μετακινεί προς τα πάνω τα μεταγλωττισμένα όρια @media/@container.
--pantoken-bp-sm	<length>	20em	Η τιμή του breakpoint sm (20em, καθρέφτης του --instui-component-tray-width-sm). Η παράκαμψή της δεν μετακινεί προς τα πάνω τα μεταγλωττισμένα όρια @media/@container.
--pantoken-bp-xl	<length>	62em	Η τιμή του breakpoint xl (62em, καθρέφτης του --instui-component-tray-width-xl). Η παράκαμψή της δεν μετακινεί προς τα πάνω τα μεταγλωττισμένα όρια @media/@container.
--pantoken-bp-xs	<length>	16em	Η τιμή του breakpoint xs (16em, καθρέφτης του --instui-component-tray-width-xs). Η παράκαμψή της δεν μετακινεί προς τα πάνω τα μεταγλωττισμένα όρια @media/@container.

Συνθήκες

Τύπος	Ερώτημα	Περιγραφή
media	(max-width: 16em)	Άνω όριο του breakpoint xs.
media	(min-width: 16em)	Κάτω όριο του breakpoint xs.
media	(max-width: 20em)	Άνω όριο του breakpoint sm.
media	(min-width: 20em)	Κάτω όριο του breakpoint sm.
media	(max-width: 30em)	Άνω όριο του breakpoint md.
media	(min-width: 30em)	Κάτω όριο του breakpoint md.
media	(max-width: 48em)	Άνω όριο του breakpoint lg.
media	(min-width: 48em)	Κάτω όριο του breakpoint lg.
media	(max-width: 62em)	Άνω όριο του breakpoint xl.
media	(min-width: 62em)	Κάτω όριο του breakpoint xl.
media	(max-width: 68.75em)	Άνω όριο του breakpoint content.
media	(min-width: 68.75em)	Κάτω όριο του breakpoint content.
media	(max-width: 98.75em)	Άνω όριο του breakpoint content-full-width.
media	(min-width: 98.75em)	Κάτω όριο του breakpoint content-full-width.
container	(max-width: 16em)	Άνω όριο του breakpoint xs, αξιολογημένο σε επισημασμένο container.
container	(min-width: 16em)	Κάτω όριο του breakpoint xs, αξιολογημένο σε επισημασμένο container.
container	(max-width: 20em)	Άνω όριο του breakpoint sm, αξιολογημένο σε επισημασμένο container.
container	(min-width: 20em)	Κάτω όριο του breakpoint sm, αξιολογημένο σε επισημασμένο container.
container	(max-width: 30em)	Άνω όριο του md σημείου διακοπής, αξιολογείται σε επισημασμένο container.
container	(min-width: 30em)	Κάτω όριο του md σημείου διακοπής, αξιολογείται σε επισημασμένο container.
container	(max-width: 48em)	Άνω όριο του lg σημείου διακοπής, αξιολογείται σε επισημασμένο container.
container	(min-width: 48em)	Κάτω όριο του lg σημείου διακοπής, αξιολογείται σε επισημασμένο container.
container	(max-width: 62em)	Άνω όριο του xl σημείου διακοπής, αξιολογείται σε επισημασμένο container.
container	(min-width: 62em)	Κάτω όριο του xl σημείου διακοπής, αξιολογείται σε επισημασμένο container.
container	(max-width: 68.75em)	Άνω όριο του content σημείου διακοπής, αξιολογείται σε επισημασμένο container.
container	(min-width: 68.75em)	Κάτω όριο του content σημείου διακοπής, αξιολογείται σε επισημασμένο container.
container	(max-width: 98.75em)	Άνω όριο του content-full-width σημείου διακοπής, αξιολογείται σε επισημασμένο container.
container	(min-width: 98.75em)	Κάτω όριο του content-full-width σημείου διακοπής, αξιολογείται σε επισημασμένο container.

Καταναλωμένα tokens

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