#4132: width.scss

Code Structure

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

Mixins: hook

Include uses: hook

Source Code (abridged)

// Variables
// ========================================================================

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


/* ========================================================================
   Component: Width
 ========================================================================== */


/* Equal child widths
 ========================================================================== */

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

/*
 *    Instead of 0, 1px is needed to make cell wrap into next row if predecessor is 100% wide
 *    and the grid gutter is 0 pixels wide
 */

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

/*
 * 1. Make `width: 1px` work, because according to the spec flex items won’t shrink
 *    below their minimum content size. To change this, set the min-width.
 *    Only needed for Firefox. All other browsers ignore this.
 *
 * 2. `width` is ignored when wrapping flex items in 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;
}

/* Phone landscape and bigger */
@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 landscape and bigger */
@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 and bigger */
@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;
    }

}

// ... (truncated, total 390 lines)

Git History

ac75fabf3 Github pages migrated to Asciidoc (Gihub actions required).