#4106 : pagination.scss

Structure du code

Règles 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

Utilisations d'inclusions : hook, hook, hook, hook, hook, hook

Code source (abrégé)

// 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;


/* ========================================================================
   Composant : Pagination
 ========================================================================== */

/*
 * 1. Permettre aux éléments de passer à la ligne suivante
 * 2. Gouttière
 * 3. Réinitialiser la liste
 */

.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. L'espace est alloué uniquement en fonction des dimensions du contenu : 0 0 auto
 * 2. Gouttière
 * 3. Créer un contexte de position pour les menus déroulants
 */

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


/* Éléments
 ========================================================================== */

/*
 * 1. Empêcher un espace si l'élément enfant est `inline-block`, par ex. une icône
 * 2. Style
 */

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

/* Survol + 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();}
}

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

/* Désactivé */
.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(){}


// Inverse
// ========================================================================

$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(){}

Historique Git

ac75fabf3 Pages Github migrées vers Asciidoc (actions Github requises).