#4132: width.scss

Estructura del código

Reglas 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

Variables SCSS (5): $width-small-width, $width-medium-width, $width-large-width, $width-xlarge-width, $width-xxlarge-width

Mixins: hook

Usos de include: hook

Código fuente (resumido)

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


/* ========================================================================
   Componente: Width
 ========================================================================== */


/* Anchuras iguales para hijos
 ========================================================================== */

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

/*
 *    En lugar de 0, se necesita 1px para que la celda pase a la siguiente fila si la predecesora tiene un ancho del 100%
 *    y el gutter de la cuadrícula tiene 0 píxeles de ancho
 */

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

/*
 * 1. Hacer que `width: 1px` funcione, porque según la especificación, los elementos flex no se encogerán
 *    por debajo de su tamaño de contenido mínimo. Para cambiar esto, establece el min-width.
 *    Solo necesario para Firefox. Todos los demás navegadores ignoran esto.
 *
 * 2. `width` se ignora al ajustar elementos flex en 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;
}

/* Tableta en vertical y más grande */
@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;
    }

}

/* Tableta en horizontal y más grande */
@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;
    }

}

/* Escritorio y más grande */
@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;
    }

}

// ... (truncado, total 390 líneas)

Historial de Git

ac75fabf3 Sitio de Github migrado a Asciidoc (se requieren acciones de Github).