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;