#4132: width.scss

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

CSS-правила (18): .uk-width-1-2, .uk-width-1-3, .uk-width-2-3, .uk-width-1-4, .uk-width-3-4, .uk-width-1-5, .uk-width-2-5, .uk-width-3-5, .uk-width-4-5, .uk-width-1-6, .uk-width-5-6, .uk-width-small, .uk-width-medium, .uk-width-large, .uk-width-xlarge, .uk-width-xxlarge, .uk-width-auto, .uk-width-expand

SCSS-переменные (5): $width-small-width, $width-medium-width, $width-large-width, $width-xlarge-width, $width-xxlarge-width

Миксины: hook

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

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

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

$width-small-width:                              150px !default;
$width-medium-width:                             300px !default;
$width-large-width:                              450px !default;
$width-xlarge-width:                             600px !default;
$width-xxlarge-width:                            750px !default;


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


/* Равная ширина дочерних элементов
 ========================================================================== */

[class*='uk-child-width'] > * {
    box-sizing: border-box;
    width: 100%;
}

.uk-child-width-1-2 > * { width: 50%; }
.uk-child-width-1-3 > * { width: unquote('calc(100% * 1 / 3.001)'); }
.uk-child-width-1-4 > * { width: 25%; }
.uk-child-width-1-5 > * { width: 20%; }
.uk-child-width-1-6 > * { width: unquote('calc(100% * 1 / 6.001)'); }

.uk-child-width-auto > * { width: auto; }

/*
 *    Вместо 0 используется 1px, чтобы ячейка переносилась на следующую строку,
 *    если предыдущий элемент имеет ширину 100%, а ширина сетки равна 0 пикселей.
 */

.uk-child-width-expand > * { width: 1px; }

/*
 * 1. Заставляем `width: 1px` работать, так как по спецификации flex-элементы не сжимаются
 *    ниже минимального размера содержимого. Чтобы изменить это, установите min-width.
 *    Требуется только для Firefox. Все остальные браузеры игнорируют это.
 *
 * 2. `width` игнорируется при переносе flex-элементов в Safari
 *    https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items
 */

.uk-child-width-expand > :not([class*='uk-width']) {
    flex: 1;
    /* 1 */
    min-width: 0;
    /* 2 */
    flex-basis: 1px;
}

/* Телефонная ориентация (ландшафт) и больше */
@media (min-width: $breakpoint-small) {

    .uk-child-width-1-1\@s > * { width: 100%; }
    .uk-child-width-1-2\@s > * { width: 50%; }
    .uk-child-width-1-3\@s > * { width: unquote('calc(100% * 1 / 3.001)'); }
    .uk-child-width-1-4\@s > * { width: 25%; }
    .uk-child-width-1-5\@s > * { width: 20%; }
    .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); }

    .uk-child-width-auto\@s > * { width: auto; }
    .uk-child-width-expand\@s > * { width: 1px; }

    .uk-child-width-expand\@s > :not([class*='uk-width']) {
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }

}

/* Планшетная ориентация (ландшафт) и больше */
@media (min-width: $breakpoint-medium) {

    .uk-child-width-1-1\@m > * { width: 100%; }
    .uk-child-width-1-2\@m > * { width: 50%; }
    .uk-child-width-1-3\@m > * { width: unquote('calc(100% * 1 / 3.001)'); }
    .uk-child-width-1-4\@m > * { width: 25%; }
    .uk-child-width-1-5\@m > * { width: 20%; }
    .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); }

    .uk-child-width-auto\@m > * { width: auto; }
    .uk-child-width-expand\@m > * { width: 1px; }

    .uk-child-width-expand\@m > :not([class*='uk-width']) {
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }

}

/* Десктоп и больше */
@media (min-width: $breakpoint-large) {

    .uk-child-width-1-1\@l > * { width: 100%; }
    .uk-child-width-1-2\@l > * { width: 50%; }
    .uk-child-width-1-3\@l > * { width: unquote('calc(100% * 1 / 3.001)'); }
    .uk-child-width-1-4\@l > * { width: 25%; }
    .uk-child-width-1-5\@l > * { width: 20%; }
    .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); }

    .uk-child-width-auto\@l > * { width: auto; }
    .uk-child-width-expand\@l > * { width: 1px; }

    .uk-child-width-expand\@l > :not([class*='uk-width']) {
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }

}

// ... (сокращено, всего 390 строк)

История Git

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