Foundation - Pagination SASS Reference

Variáveis

Você pode alterar os estilos dos componentes usando as seguintes variáveis ​​SASS, conforme listado na tabela.

Sr. Não. Nome e Descrição Tipo Valor padrão
1

$pagination-font-size

Define o tamanho da fonte de paginação.

 Número rem-calc (14)
2

$pagination-margin-bottom

Define a margem padrão para a parte inferior do objeto de mídia.

 Número $ global-margin
3

$pagination-item-color

Define a cor do texto do item de paginação.

 Cor $ preto
4

$pagination-item-padding

Define o preenchimento dentro do item de paginação.

 Número rem-calc (3 10)
5

$pagination-item-spacing

Define a margem à direita para manter o espaço no item de paginação.

 Número rem-calc (1)
6

$pagination-radius

Define o raio padrão

 Número $ global-radius
7

$pagination-item-background-hover

Definir a cor do plano de fundo ao pairar.

 Cor $ cinza claro
8

$pagination-item-background-current

Defina a cor de fundo da página atual do item de paginação.

 Cor $ cor primária
9

$pagination-item-color-current

Defina a cor do texto para a página atual.

 Cor foreground ($ pagination-item-background-current)
10

$pagination-item-color-disabled

Defina a cor do texto para o item de paginação desativado.

 Cor $ cinza médio
11

$pagination-ellipsis-color

Defina a cor da elipse.

 Cor $ preto
12

$pagination-mobile-items

Exibir apenas o botão anterior / próximo na tela do celular.

 boleano falso
13

$pagination-arrows

As setas são incluídas nos links anterior e seguinte de paginação.

 boleano verdadeiro

Mixins

Você pode usar os mixins para construir a estrutura de classes CSS para seus componentes, conforme listado na tabela.

contêiner de paginação

Os estilos são incluídos no contêiner de paginação. É aplicado a <ul>

@include pagination-container;

paginação-item-atual

Os estilos são incluídos para o item de paginação atual. É aplicado a <a>

@include pagination-item-current;

paginação-item-desativado

Os estilos são incluídos para uma paginação desabilitada. É aplicado a <a>

@include pagination-item-disabled;

elipse de paginação

Os estilos são incluídos para reticências para uso em uma lista de paginação.

@include pagination-ellipsis;