docs/_sass/uikit/components/width.scss

// Name:            Width
// Description:     Utilities for widths
//
// Component:       `uk-child-width-*`
//                  `uk-width-*`
//
// ========================================================================


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

/*
 * 1. Reset the `min-width`, which is set to auto by default, because
 *    flex items won't shrink below their minimum intrinsic content size.
 *    Using `1px` instead of `0`, so items still wrap into the next line,
 *    if they have zero width and padding and the predecessor is 100% wide.
 */

.uk-child-width-expand > :not([class*='uk-width']) {
    flex: 1;
    /* 1 */
    min-width: 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 > :not([class*='uk-width']) {
        flex: 1;
        min-width: 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 > :not([class*='uk-width']) {
        flex: 1;
        min-width: 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 > :not([class*='uk-width']) {
        flex: 1;
        min-width: 1px;
    }

}

/* Large screen and bigger */
@media (min-width: $breakpoint-xlarge) {

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

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

}


/* Single Widths
 ========================================================================== */

/*
 * 1. `max-width` is needed for the pixel-based classes
 */

[class*='uk-width'] {
    box-sizing: border-box;
    width: 100%;
    /* 1 */
    max-width: 100%;
}

/* Halves */
.uk-width-1-2 { width: 50%; }

/* Thirds */
.uk-width-1-3 { width: unquote('calc(100% * 1 / 3.001)'); }
.uk-width-2-3 { width: unquote('calc(100% * 2 / 3.001)'); }

/* Quarters */
.uk-width-1-4 { width: 25%; }
.uk-width-3-4 { width: 75%; }

/* Fifths */
.uk-width-1-5 { width: 20%; }
.uk-width-2-5 { width: 40%; }
.uk-width-3-5 { width: 60%; }
.uk-width-4-5 { width: 80%; }

/* Sixths */
.uk-width-1-6 { width: unquote('calc(100% * 1 / 6.001)'); }
.uk-width-5-6 { width: unquote('calc(100% * 5 / 6.001)'); }

/* Pixel */
.uk-width-small { width: $width-small-width; }
.uk-width-medium { width: $width-medium-width; }
.uk-width-large { width: $width-large-width; }
.uk-width-xlarge { width: $width-xlarge-width; }
.uk-width-xxlarge { width: $width-xxlarge-width; }

/* Auto */
.uk-width-auto { width: auto; }

/* Expand */
.uk-width-expand {
    flex: 1;
    min-width: 1px;
}

/* Phone landscape and bigger */
@media (min-width: $breakpoint-small) {

    /* Whole */
    .uk-width-1-1\@s { width: 100%; }

    /* Halves */
    .uk-width-1-2\@s { width: 50%; }

    /* Thirds */
    .uk-width-1-3\@s { width: unquote('calc(100% * 1 / 3.001)'); }
    .uk-width-2-3\@s { width: unquote('calc(100% * 2 / 3.001)'); }

    /* Quarters */
    .uk-width-1-4\@s { width: 25%; }
    .uk-width-3-4\@s { width: 75%; }

    /* Fifths */
    .uk-width-1-5\@s { width: 20%; }
    .uk-width-2-5\@s { width: 40%; }
    .uk-width-3-5\@s { width: 60%; }
    .uk-width-4-5\@s { width: 80%; }

    /* Sixths */
    .uk-width-1-6\@s { width: unquote('calc(100% * 1 / 6.001)'); }
    .uk-width-5-6\@s { width: unquote('calc(100% * 5 / 6.001)'); }

    /* Pixel */
    .uk-width-small\@s { width: $width-small-width; }
    .uk-width-medium\@s { width: $width-medium-width; }
    .uk-width-large\@s { width: $width-large-width; }
    .uk-width-xlarge\@s { width: $width-xlarge-width; }
    .uk-width-xxlarge\@s { width: $width-xxlarge-width; }

    /* Auto */
    .uk-width-auto\@s { width: auto; }

    /* Expand */
    .uk-width-expand\@s {
        flex: 1;
        min-width: 1px;
    }

}

/* Tablet landscape and bigger */
@media (min-width: $breakpoint-medium) {

    /* Whole */
    .uk-width-1-1\@m { width: 100%; }

    /* Halves */
    .uk-width-1-2\@m { width: 50%; }

    /* Thirds */
    .uk-width-1-3\@m { width: unquote('calc(100% * 1 / 3.001)'); }
    .uk-width-2-3\@m { width: unquote('calc(100% * 2 / 3.001)'); }

    /* Quarters */
    .uk-width-1-4\@m { width: 25%; }
    .uk-width-3-4\@m { width: 75%; }

    /* Fifths */
    .uk-width-1-5\@m { width: 20%; }
    .uk-width-2-5\@m { width: 40%; }
    .uk-width-3-5\@m { width: 60%; }
    .uk-width-4-5\@m { width: 80%; }

    /* Sixths */
    .uk-width-1-6\@m { width: unquote('calc(100% * 1 / 6.001)'); }
    .uk-width-5-6\@m { width: unquote('calc(100% * 5 / 6.001)'); }

    /* Pixel */
    .uk-width-small\@m { width: $width-small-width; }
    .uk-width-medium\@m { width: $width-medium-width; }
    .uk-width-large\@m { width: $width-large-width; }
    .uk-width-xlarge\@m { width: $width-xlarge-width; }
    .uk-width-xxlarge\@m { width: $width-xxlarge-width; }

     /* Auto */
    .uk-width-auto\@m { width: auto; }

    /* Expand */
    .uk-width-expand\@m {
        flex: 1;
        min-width: 1px;
    }

}

/* Desktop and bigger */
@media (min-width: $breakpoint-large) {

    /* Whole */
    .uk-width-1-1\@l { width: 100%; }

    /* Halves */
    .uk-width-1-2\@l { width: 50%; }

    /* Thirds */
    .uk-width-1-3\@l { width: unquote('calc(100% * 1 / 3.001)'); }
    .uk-width-2-3\@l { width: unquote('calc(100% * 2 / 3.001)'); }

    /* Quarters */
    .uk-width-1-4\@l { width: 25%; }
    .uk-width-3-4\@l { width: 75%; }

    /* Fifths */
    .uk-width-1-5\@l { width: 20%; }
    .uk-width-2-5\@l { width: 40%; }
    .uk-width-3-5\@l { width: 60%; }
    .uk-width-4-5\@l { width: 80%; }

    /* Sixths */
    .uk-width-1-6\@l { width: unquote('calc(100% * 1 / 6.001)'); }
    .uk-width-5-6\@l { width: unquote('calc(100% * 5 / 6.001)'); }

    /* Pixel */
    .uk-width-small\@l { width: $width-small-width; }
    .uk-width-medium\@l { width: $width-medium-width; }
    .uk-width-large\@l { width: $width-large-width; }
    .uk-width-xlarge\@l { width: $width-xlarge-width; }
    .uk-width-xxlarge\@l { width: $width-xxlarge-width; }

    /* Auto */
    .uk-width-auto\@l { width: auto; }

    /* Expand */
    .uk-width-expand\@l {
        flex: 1;
        min-width: 1px;
    }

}

/* Large screen and bigger */
@media (min-width: $breakpoint-xlarge) {

    /* Whole */
    .uk-width-1-1\@xl { width: 100%; }

    /* Halves */
    .uk-width-1-2\@xl { width: 50%; }

    /* Thirds */
    .uk-width-1-3\@xl { width: unquote('calc(100% * 1 / 3.001)'); }
    .uk-width-2-3\@xl { width: unquote('calc(100% * 2 / 3.001)'); }

    /* Quarters */
    .uk-width-1-4\@xl { width: 25%; }
    .uk-width-3-4\@xl { width: 75%; }

    /* Fifths */
    .uk-width-1-5\@xl { width: 20%; }
    .uk-width-2-5\@xl { width: 40%; }
    .uk-width-3-5\@xl { width: 60%; }
    .uk-width-4-5\@xl { width: 80%; }

    /* Sixths */
    .uk-width-1-6\@xl { width: unquote('calc(100% * 1 / 6.001)'); }
    .uk-width-5-6\@xl { width: unquote('calc(100% * 5 / 6.001)'); }

    /* Pixel */
    .uk-width-small\@xl { width: $width-small-width; }
    .uk-width-medium\@xl { width: $width-medium-width; }
    .uk-width-large\@xl { width: $width-large-width; }
    .uk-width-xlarge\@xl { width: $width-xlarge-width; }
    .uk-width-xxlarge\@xl { width: $width-xxlarge-width; }

    /* Auto */
    .uk-width-auto\@xl { width: auto; }

    /* Expand */
    .uk-width-expand\@xl {
        flex: 1;
        min-width: 1px;
    }

}


// Hooks
// ========================================================================

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

// @mixin hook-width-misc(){}