Foundation - Pagination SASS Reference
Variabili
È possibile modificare gli stili dei componenti utilizzando le seguenti variabili SASS elencate nella tabella.
Sr.No. | Nome e descrizione | genere | Valore predefinito |
---|---|---|---|
1 | $pagination-font-size Imposta la dimensione del carattere dell'impaginazione. |
Numero | rem-calc (14) |
2 | $pagination-margin-bottom Imposta il margine predefinito per la parte inferiore dell'oggetto multimediale. |
Numero | $ margine globale |
3 | $pagination-item-color Imposta il colore per il testo dell'elemento di impaginazione. |
Colore | $ nero |
4 | $pagination-item-padding Imposta il riempimento all'interno dell'elemento di impaginazione. |
Numero | rem-calc (3 10) |
5 | $pagination-item-spacing Imposta il margine a destra per mantenere lo spazio nell'elemento di impaginazione. |
Numero | rem-calc (1) |
6 | $pagination-radius Imposta il raggio predefinito |
Numero | $ raggio-globale |
7 | $pagination-item-background-hover Imposta il colore di sfondo al passaggio del mouse. |
Colore | $ grigio chiaro |
8 | $pagination-item-background-current Imposta il colore di sfondo per la pagina corrente dell'elemento di impaginazione. |
Colore | $ colore-primario |
9 | $pagination-item-color-current Imposta il colore del testo per la pagina corrente. |
Colore | primo piano ($ pagination-item-background-current) |
10 | $pagination-item-color-disabled Imposta il colore del testo per l'elemento di impaginazione disabilitato. |
Colore | $ grigio medio |
11 | $pagination-ellipsis-color Imposta il colore dei puntini di sospensione. |
Colore | $ nero |
12 | $pagination-mobile-items Visualizza solo il pulsante precedente / successivo nella schermata del cellulare. |
Booleano | falso |
13 | $pagination-arrows Le frecce sono incluse nei collegamenti precedenti e successivi dell'impaginazione. |
Booleano | vero |
Mixins
È possibile utilizzare i mixin per creare la struttura della classe CSS per i componenti come elencato nella tabella.
impaginazione-contenitore
Gli stili sono inclusi nel contenitore dell'impaginazione. Viene applicato a <ul>
@include pagination-container;
pagination-item-current
Gli stili sono inclusi per l'elemento di impaginazione corrente. Viene applicato a <a>
@include pagination-item-current;
impaginazione-elemento-disabilitato
Gli stili sono inclusi per un'impaginazione disabilitata. Viene applicato a <a>
@include pagination-item-disabled;
impaginazione-ellissi
Gli stili sono inclusi per i puntini di sospensione da utilizzare in un elenco di impaginazione.
@include pagination-ellipsis;