#4124: thumbnav.scss

Содержание

// Имя:            Thumbnav
// Описание:       Компонент для создания навигации по миниатюрам
//
// Компонент:      `uk-thumbnav`
//
// Модификатор:    `uk-thumbnav-vertical`
//
// Состояния:      `uk-active`
//
// ========================================================================


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

$thumbnav-margin-horizontal:                     15px !default;
$thumbnav-margin-vertical:                       $thumbnav-margin-horizontal !default;


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

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

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

/*
 * 1. Пространство выделяется исключительно на основе размеров содержимого: 0 0 auto
 * 2. Отступ
 */

.uk-thumbnav > * {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: $thumbnav-margin-horizontal;
}


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

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

.uk-thumbnav > * > * {
    display: inline-block;
    @if(mixin-exists(hook-thumbnav-item)) {@include hook-thumbnav-item();}
}

/* Наведение + Фокус */
.uk-thumbnav > * > :hover,
.uk-thumbnav > * > :focus {
    outline: none;
    @if(mixin-exists(hook-thumbnav-item-hover)) {@include hook-thumbnav-item-hover();}
}

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


/* Модификатор: 'uk-thumbnav-vertical'
 ========================================================================== */

/*
 * 1. Изменить направление
 * 2. Отступ
 */

.uk-thumbnav-vertical {
    /* 1 */
    flex-direction: column;
    /* 2 */
    margin-left: 0;
    margin-top: (-$thumbnav-margin-vertical);
}

/* 2 */
.uk-thumbnav-vertical > * {
    padding-left: 0;
    padding-top: $thumbnav-margin-vertical;
}


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

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

// @mixin hook-thumbnav(){}
// @mixin hook-thumbnav-item(){}
// @mixin hook-thumbnav-item-hover(){}
// @mixin hook-thum

История Git

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