Fondation - Pagination SASS Reference

Variables

Vous pouvez modifier les styles des composants à l'aide des variables SASS suivantes, comme indiqué dans le tableau.

N ° Sr. Nom et description Type Valeur par défaut
1

$pagination-font-size

Définit la taille de police de la pagination.

 Nombre rem-calc (14)
2

$pagination-margin-bottom

Définit la marge par défaut pour le bas de l'objet multimédia.

 Nombre marge globale $
3

$pagination-item-color

Définit la couleur du texte de l'élément de pagination.

 Couleur $ noir
4

$pagination-item-padding

Définit le remplissage à l'intérieur de l'élément de pagination.

 Nombre rem-calc (3 10)
5

$pagination-item-spacing

Définit la marge à droite pour conserver de l'espace dans l'élément de pagination.

 Nombre rem-calc (1)
6

$pagination-radius

Définit le rayon par défaut

 Nombre $ global-radius
sept

$pagination-item-background-hover

Définissez la couleur d'arrière-plan en survol.

 Couleur $ gris clair
8

$pagination-item-background-current

Définit la couleur d'arrière-plan de la page actuelle de l'élément de pagination.

 Couleur $ couleur primaire
9

$pagination-item-color-current

Définissez la couleur du texte pour la page actuelle.

 Couleur premier plan ($ pagination-item-background-current)
dix

$pagination-item-color-disabled

Définissez la couleur du texte pour l'élément de pagination désactivé.

 Couleur $ gris moyen
11

$pagination-ellipsis-color

Définissez la couleur des points de suspension.

 Couleur $ noir
12

$pagination-mobile-items

Afficher uniquement le bouton précédent / suivant sur l'écran du mobile.

 Booléen faux
13

$pagination-arrows

Les flèches sont incluses dans les liens précédents et suivants de pagination.

 Booléen vrai

Mixins

Vous pouvez utiliser les mixins pour créer la structure de classe CSS pour vos composants comme indiqué dans le tableau.

conteneur de pagination

Les styles sont inclus dans le conteneur de pagination. Il est appliqué à <ul>

@include pagination-container;

élément de pagination actuel

Les styles sont inclus pour l'élément de pagination actuel. Il est appliqué à <a>

@include pagination-item-current;

élément de pagination désactivé

Les styles sont inclus pour une pagination désactivée. Il est appliqué à <a>

@include pagination-item-disabled;

pagination-ellipse

Les styles sont inclus pour les points de suspension à utiliser dans une liste de pagination.

@include pagination-ellipsis;