#4132 : width.scss

Structure du code

Règles 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

Utilisations d'inclusions : hook

Code source (abrégé)

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


/* ========================================================================
   Composant : Largeur
 ========================================================================== */


/* Largeurs égales des enfants
 ========================================================================== */

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

/*
 *    Au lieu de 0, 1px est nécessaire pour que la cellule passe à la ligne suivante
 *    si le prédécesseur est large de 100 % et que la gouttière de la grille est de 0 pixel.
 */

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

/*
 * 1. Faire fonctionner `width: 1px`, car selon la spécification, les éléments flexibles
 *    ne rétrécissent pas en dessous de leur taille de contenu minimale. Pour changer cela,
 *    définir la largeur minimale. Nécessaire uniquement pour Firefox. Tous les autres
 *    navigateurs ignorent cela.
 *
 * 2. `width` est ignorée lors de l'habillage des éléments flexibles dans 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;
}

/* Paysage téléphone et plus grand */
@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;
    }

}

/* Tablette paysage et plus grand */
@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;
    }

}

/* Bureau et plus grand */
@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;
    }

}

// ... (tronqué, total 390 lignes)

Historique Git

ac75fabf3 Pages Github migrées vers Asciidoc (actions Github requises).