Fundación - Referencia SASS de paginación
Variables
Puede cambiar los estilos de los componentes utilizando las siguientes variables SASS que se enumeran en la tabla.
| No Señor. | Nombre y descripción | Tipo | Valor por defecto |
|---|---|---|---|
| 1 | $pagination-font-size Establece el tamaño de fuente de la paginación. |
Número | rem-calc (14) |
| 2 | $pagination-margin-bottom Establece el margen predeterminado para la parte inferior del objeto multimedia. |
Número | $ margen-global |
| 3 | $pagination-item-color Establece el color del texto del elemento de paginación. |
Color | $ negro |
| 4 | $pagination-item-padding Establece el relleno dentro del elemento de paginación. |
Número | rem-calc (3 10) |
| 5 | $pagination-item-spacing Establece el margen a la derecha para mantener el espacio en el elemento de paginación. |
Número | rem-calc (1) |
| 6 | $pagination-radius Establece el radio predeterminado |
Número | $ radio-global |
| 7 | $pagination-item-background-hover Establecer el color de fondo al pasar el mouse. |
Color | $ gris claro |
| 8 | $pagination-item-background-current Establecer el color de fondo de la página actual del elemento de paginación. |
Color | $ color primario |
| 9 | $pagination-item-color-current Establece el color del texto para la página actual. |
Color | primer plano ($ paginación-elemento-fondo-actual) |
| 10 | $pagination-item-color-disabled Establezca el color del texto para el elemento de paginación deshabilitado. |
Color | $ gris medio |
| 11 | $pagination-ellipsis-color Establecer el color de puntos suspensivos. |
Color | $ negro |
| 12 | $pagination-mobile-items Mostrar solo el botón anterior / siguiente en la pantalla del móvil. |
Booleano | falso |
| 13 | $pagination-arrows Las flechas se incluyen en los enlaces de paginación anterior y siguiente. |
Booleano | cierto |
Mixins
Puede usar los mixins para construir la estructura de clases CSS para sus componentes como se enumera en la tabla.
contenedor de paginación
Los estilos se incluyen en el contenedor de paginación. Se aplica a <ul>
@include pagination-container;paginación-elemento-actual
Se incluyen estilos para el elemento de paginación actual. Se aplica a <a>
@include pagination-item-current;elemento de paginación desactivado
Se incluyen estilos para una paginación deshabilitada. Se aplica a <a>
@include pagination-item-disabled;paginación-elipsis
Los estilos se incluyen como puntos suspensivos para su uso en una lista de paginación.
@include pagination-ellipsis;