#4132: width.scss

Codestruktur

CSS-Regeln (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-Variablen (5): $width-small-width, $width-medium-width, $width-large-width, $width-xlarge-width, $width-xxlarge-width

Mixins: hook

Include-Verwendungen: hook

Quellcode (gekürzt)

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

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


/* ========================================================================
   Komponente: Width
 ========================================================================== */


/* Gleiche Kindbreiten
 ========================================================================== */

[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; }

/*
 *    Statt 0 wird 1px benötigt, damit die Zelle in die nächste Zeile umbricht, wenn der Vorgänger 100% breit ist
 *    und der Gitterabstand 0 Pixel breit ist
 */

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

/*
 * 1. `width: 1px` zum Funktionieren bringen, da laut Spezifikation Flex-Elemente nicht unter
 *    ihre minimale Inhaltsgröße schrumpfen. Um dies zu ändern, setzen Sie die min-width.
 *    Nur für Firefox erforderlich. Alle anderen Browser ignorieren dies.
 *
 * 2. `width` wird beim Umbruch von Flex-Elementen im Safari ignoriert
 *    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;
}

/* Telefon Querformat und größer */
@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;
    }

}

/* Tablet Querformat und größer */
@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;
    }

}

/* Desktop und größer */
@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;
    }

}

// ... (gekürzt, insgesamt 390 Zeilen)

Git-Verlauf

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