dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

autogrid object

Browse source
This commit is contained in:
Raphael Goetter 2017-07-31 11:37:12 +02:00
parent d33da95e34
commit ba693cefba
3 changed files with 27 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
changelog.md
View file

@ -1,6 +1,7 @@
# changelog v7.0.0beta (31 juillet 2017) # 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 - normalize.css v7.0.0
- autogrid object en Grid Layout
# changelog v6.1.2 (21 juin 2017) # changelog v6.1.2 (21 juin 2017)
- alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`) - alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)

3
sass/_config/_variables.scss
View file

@ -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-value : 16rem !default; // ultra large value for margins / paddings
$ultra-large-plus-value : 20rem !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 (default : null)
$kna-namespace: null !default; $kna-namespace: null !default;

41
sass/components/autogrid.scss
View file

@ -1,28 +1,29 @@
/* ----------------------------- */ /* ----------------------------- */
/* ==Autogrid object */ /* ==Autogrid object */
/* ----------------------------- */ /* ----------------------------- */
/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */ /* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
@media (min-width: $small) { .o-autogrid {
[class^="autogrid"], @media (min-width: $small) {
[class*=" autogrid"] { display: grid;
display: flex; grid-auto-flow: column;
grid-auto-column: 1fr;
// 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;
}
} }
[class^="autogrid"] > *, & > * {
[class*=" autogrid"] > * { min-width: 0; /* avoid min-width: auto on children */
flex: 1; }
min-width: 0; /* avoid min-width:auto */
}
}
/* Autogrid variants */
@media (min-width: $small) {
.has-gutter > *:not(:first-child) {
margin-left: 1rem;
}
[class*="--reverse"] {
flex-direction: row-reverse;
} }
} }