#4106: pagination.scss

Estructura del código

Reglas CSS (1): .uk-pagination

Variables SCSS (10): $pagination-margin-horizontal, $pagination-item-color, $pagination-item-hover-color, $pagination-item-hover-text-decoration, $pagination-item-active-color, $pagination-item-disabled-color, $inverse-pagination-item-color, $inverse-pagination-item-hover-color, $inverse-pagination-item-active-color, $inverse-pagination-item-disabled-color

Mixins: hook, hook, hook, hook, hook, hook, hook, hook, hook, hook

Usos de include: hook, hook, hook, hook, hook, hook

Código fuente (resumido)

// Variables
// ========================================================================

$pagination-margin-horizontal:                   20px !default;

$pagination-item-color:                          $global-muted-color !default;
$pagination-item-hover-color:                    $global-color !default;
$pagination-item-hover-text-decoration:          none !default;
$pagination-item-active-color:                   $global-color !default;
$pagination-item-disabled-color:                 $global-muted-color !default;


/* ========================================================================
   Component: Pagination
 ========================================================================== */

/*
 * 1. Permitir que los elementos se envuelvan en la siguiente línea
 * 2. Canalón
 * 3. Reiniciar lista
 */

.uk-pagination {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin-left: (-$pagination-margin-horizontal);
    /* 3 */
    padding: 0;
    list-style: none;
    @if(mixin-exists(hook-pagination)) {@include hook-pagination();}
}

/*
 * 1. El espacio se asigna únicamente según las dimensiones del contenido: 0 0 auto
 * 2. Canalón
 * 3. Crear contexto de posición para menús desplegables
 */

.uk-pagination > * {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: $pagination-margin-horizontal;
    /* 3 */
    position: relative;
}


/* Elementos
 ========================================================================== */

/*
 * 1. Evitar espacio si el elemento hijo es `inline-block`, p. ej., un icono
 * 2. Estilo
 */

.uk-pagination > * > * {
    /* 1 */
    display: block;
    /* 2 */
    color: $pagination-item-color;
    @if(mixin-exists(hook-pagination-item)) {@include hook-pagination-item();}
}

/* Hover + Focus */
.uk-pagination > * > :hover,
.uk-pagination > * > :focus {
    color: $pagination-item-hover-color;
    text-decoration: $pagination-item-hover-text-decoration;
    @if(mixin-exists(hook-pagination-item-hover)) {@include hook-pagination-item-hover();}
}

/* Activo */
.uk-pagination > .uk-active > * {
    color: $pagination-item-active-color;
    @if(mixin-exists(hook-pagination-item-active)) {@include hook-pagination-item-active();}
}

/* Deshabilitado */
.uk-pagination > .uk-disabled > * {
    color: $pagination-item-disabled-color;
    @if(mixin-exists(hook-pagination-item-disabled)) {@include hook-pagination-item-disabled();}
}


// Hooks
// ========================================================================

@if(mixin-exists(hook-pagination-misc)) {@include hook-pagination-misc();}

// @mixin hook-pagination(){}
// @mixin hook-pagination-item(){}
// @mixin hook-pagination-item-hover(){}
// @mixin hook-pagination-item-active(){}
// @mixin hook-pagination-item-disabled(){}
// @mixin hook-pagination-misc(){}


// Inverso
// ========================================================================

$inverse-pagination-item-color:                 $inverse-global-muted-color !default;
$inverse-pagination-item-hover-color:           $inverse-global-color !default;
$inverse-pagination-item-active-color:          $inverse-global-color !default;
$inverse-pagination-item-disabled-color:        $inverse-global-muted-color !default;



// @mixin hook-inverse-pagination-item(){}
// @mixin hook-inverse-pagination-item-hover(){}
// @mixin hook-inverse-pagination-item-active(){}
// @mixin hook-inverse-pagination-item-disabled(){}

Historial Git

ac75fabf3 Páginas de Github migradas a Asciidoc (se requieren acciones de Github).