autogrid object
This commit is contained in:
parent
d33da95e34
commit
ba693cefba
3 changed files with 27 additions and 22 deletions
|
@ -1,6 +1,7 @@
|
|||
# changelog v7.0.0beta (31 juillet 2017)
|
||||
- architecture globale revisitée (_vendor, _config, _library, components)
|
||||
- architecture globale revisitée (vendor, config, library, components)
|
||||
- normalize.css v7.0.0
|
||||
- autogrid object en Grid Layout
|
||||
|
||||
# changelog v6.1.2 (21 juin 2017)
|
||||
- alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)
|
||||
|
|
|
@ -57,5 +57,8 @@ $extra-large-plus-value : 12rem !default; // extra large value for margins / pad
|
|||
$ultra-large-value : 16rem !default; // ultra large value for margins / paddings
|
||||
$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings
|
||||
|
||||
// grid gutters (for .has-gutter-* classes)
|
||||
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
|
||||
|
||||
//kna-namespace (default : null)
|
||||
$kna-namespace: null !default;
|
||||
|
|
|
@ -1,28 +1,29 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Autogrid object */
|
||||
/* ----------------------------- */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
|
||||
/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
|
||||
|
||||
.o-autogrid {
|
||||
@media (min-width: $small) {
|
||||
[class^="autogrid"],
|
||||
[class*=" autogrid"] {
|
||||
display: flex;
|
||||
}
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-column: 1fr;
|
||||
|
||||
[class^="autogrid"] > *,
|
||||
[class*=" autogrid"] > * {
|
||||
flex: 1;
|
||||
min-width: 0; /* avoid min-width:auto */
|
||||
// gutters
|
||||
@if variable_exists(grid-gutters) {
|
||||
$gutter: $grid-gutters !global;
|
||||
|
||||
} @else {
|
||||
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
|
||||
}
|
||||
@each $affix, $size in $gutter {
|
||||
&.has-gutter#{$affix} {
|
||||
grid-column-gap: $size;
|
||||
}
|
||||
}
|
||||
|
||||
/* Autogrid variants */
|
||||
@media (min-width: $small) {
|
||||
.has-gutter > *:not(:first-child) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
[class*="--reverse"] {
|
||||
flex-direction: row-reverse;
|
||||
& > * {
|
||||
min-width: 0; /* avoid min-width: auto on children */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue