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

autogrid object

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;

43
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;
[class^="autogrid"] > *, // gutters
[class*=" autogrid"] > * { @if variable_exists(grid-gutters) {
flex: 1; $gutter: $grid-gutters !global;
min-width: 0; /* avoid min-width:auto */
} } @else {
} $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
}
/* Autogrid variants */ @each $affix, $size in $gutter {
@media (min-width: $small) { &.has-gutter#{$affix} {
.has-gutter > *:not(:first-child) { grid-column-gap: $size;
margin-left: 1rem; }
} }
[class*="--reverse"] { & > * {
flex-direction: row-reverse; min-width: 0; /* avoid min-width: auto on children */
}
} }
} }