#4106: pagination.scss

Структура кода

CSS-правила (1): .uk-pagination

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

Миксины: hook, hook, hook, hook, hook, hook, hook, hook, hook, hook

Использование include: hook, hook, hook, hook, hook, hook

Исходный код (сокращённый)

// Переменные
// ========================================================================

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


/* ========================================================================
   Компонент: Pagination
 ========================================================================== */

/*
 * 1. Разрешить перенос элементов на следующую строку
 * 2. Отступ
 * 3. Сброс списка
 */

.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. Пространство выделяется исключительно на основе размеров содержимого: 0 0 auto
 * 2. Отступ
 * 3. Создание контекста позиционирования для выпадающих списков
 */

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


/* Элементы
 ========================================================================== */

/*
 * 1. Предотвратить появление зазора, если дочерний элемент является `inline-block`, например, иконка
 * 2. Стиль
 */

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

/* Наведение + Фокус */
.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();}
}

/* Активный */
.uk-pagination > .uk-active > * {
    color: $pagination-item-active-color;
    @if(mixin-exists(hook-pagination-item-active)) {@include hook-pagination-item-active();}
}

/* Отключённый */
.uk-pagination > .uk-disabled > * {
    color: $pagination-item-disabled-color;
    @if(mixin-exists(hook-pagination-item-disabled)) {@include hook-pagination-item-disabled();}
}


// Хуки
// ========================================================================

@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-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

ac75fabf3 Страницы Github перенесены на Asciidoc (требуются действия Github).