#4106: pagination.scss

Codestruktur

CSS-Regeln (1): .uk-pagination

SCSS-Variablen (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

Include-Verwendungen: hook, hook, hook, hook, hook, hook

Quellcode (gekürzt)

// Variablen
// ========================================================================

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


/* ========================================================================
   Komponente: Paginierung
 ========================================================================== */

/*
 * 1. Ermöglicht Umbruch von Elementen in die nächste Zeile
 * 2. Abstand
 * 3. Liste zurücksetzen
 */

.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. Platz wird ausschließlich basierend auf Inhaltsdimensionen zugewiesen: 0 0 auto
 * 2. Abstand
 * 3. Positionskontext für Dropdowns erstellen
 */

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


/* Elemente
 ========================================================================== */

/*
 * 1. Lücke verhindern, wenn Kindelement `inline-block` ist, z. B. ein Symbol
 * 2. Stil
 */

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

/* Hover + Fokus */
.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();}
}

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

/* Deaktiviert */
.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(){}


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

Git-Verlauf

ac75fabf3 Github-Seiten zu Asciidoc migriert (Github-Aktionen erforderlich).