Ajout des classes pull et push pour grid
Les classes `.left` et `.right` ne sont pas applicables sur la grid. Ajout de 2 classes pour la grid.
This commit is contained in:
parent
17f2a3bcfc
commit
24f35a241a
5 changed files with 27 additions and 4 deletions
|
@ -920,6 +920,12 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.pull {
|
||||
margin-right: auto;
|
||||
}
|
||||
.push {
|
||||
margin-left: auto;
|
||||
}
|
||||
/* ----------------------------- */
|
||||
/* ==tables */
|
||||
/* ----------------------------- */
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -84,14 +84,14 @@ Il vous est très facile de "pousser" un élément à droite ou à gauche de sa
|
|||
|
||||
Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'élément :
|
||||
|
||||
- la classe `.right` pour le pousser à droite sur sa ligne (applique un `margin-left: auto`)
|
||||
- la classe `.left` pour le pousser à gauche sur sa ligne (applique un `margin-right: auto`)
|
||||
- la classe `.push` pour le pousser à droite sur sa ligne (applique un `margin-left: auto`)
|
||||
- la classe `.pull` pour le pousser à gauche sur sa ligne (applique un `margin-right: auto`)
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-4">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div class="right">je suis poussé à droite</div>
|
||||
<div class="push">je suis poussé à droite</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
|
|
|
@ -170,3 +170,11 @@
|
|||
.@{kna-namespace}grid-1-4 {
|
||||
.uneven-grid(1,4);
|
||||
}
|
||||
|
||||
.@{kna-namespace}pull {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.@{kna-namespace}push {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
|
@ -188,3 +188,12 @@
|
|||
.#{$kna-namespace}grid-1-4 {
|
||||
@include uneven-grid(1,4);
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pull {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}push {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue