scss: add never-alone class to keep grid on very small widths (#29561)
This commit is contained in:
parent
942445a661
commit
2432490908
|
@ -30,11 +30,20 @@ en faisant les deux-tiers. Les dénominateurs possibles sont 2, 3, 4, 6
|
||||||
et 12.
|
et 12.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<note><p>
|
<note>
|
||||||
Sur les petits écrans, les éléments de grille sont affichés sur toute la
|
<p>
|
||||||
largeur.
|
Sur des écrans de petite dimension, la grille est automatiquement adaptée pour
|
||||||
|
ne pas rétrécir outre mesure les éléments, la largeur de ceux-ci est doublée,
|
||||||
|
par exemple un élément configuré pour une largeur d'un quart d'écran prendra
|
||||||
|
non pas un quart d'écran mais un demi écran.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Sur les très petits écrans, la mécanique de grille est totalement annulée et
|
||||||
|
tous les éléments de grille sont affichés sur toute la largeur disponible.
|
||||||
|
Il est cependant possible d'empêcher ce comportement en accompagnant la classe
|
||||||
|
<code>grid-x-y</code> de la classe <code>never-alone</code>.
|
||||||
|
</p>
|
||||||
</note>
|
</note>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
|
@ -14,8 +14,10 @@ div[class*=grid-] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-right: $grid-gutter;
|
padding-right: $grid-gutter;
|
||||||
@media screen and (max-width: $very-small-limit) {
|
@media screen and (max-width: $very-small-limit) {
|
||||||
width: 100%;
|
&:not(.never-alone) {
|
||||||
padding-right: 0;
|
width: 100%;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
table, textarea, select, input[type=text], input[type=password], input[type=email] {
|
table, textarea, select, input[type=text], input[type=password], input[type=email] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
Loading…
Reference in New Issue