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

bug fix on uneven grids

Browse source
This commit is contained in:
Raphael Goetter 2016-05-23 15:45:44 +02:00
parent a9ac18fd61
commit 22973c4b86
5 changed files with 22 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/grillade.css
View file

@ -1 +1 @@
[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - 2rem - .01px);min-width:0;min-height:0;margin-left:2rem}@media (min-width:321px) and (max-width:640px){[class*=grid-]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.grid-item-double{width:calc(100% * 2 / 2 - 2rem)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.grid-item-double{width:calc(100% * 2 / 4 - 2rem)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.grid-item-double{width:calc(100% * 2 / 5 - 2rem)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.grid-item-double{width:calc(100% * 2 / 6 - 2rem)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.grid-item-double{width:calc(100% * 2 / 7 - 2rem)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.grid-item-double{width:calc(100% * 2 / 8 - 2rem)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9]>.grid-item-double{width:calc(100% * 2 / 9 - 2rem)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.grid-item-double{width:calc(100% * 2 / 10 - 2rem)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11]>.grid-item-double{width:calc(100% * 2 / 11 - 2rem)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.grid-item-double{width:calc(100% * 2 / 12 - 2rem)}}@media (min-width:321px) and (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.grid-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.grid-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){.grid-2-1 :nth-child(odd){width:calc(66.66667% - 2rem)}.grid-1-2 :nth-child(odd),.grid-2-1 :nth-child(even){width:calc(33.33333% - 2rem)}.grid-1-2 :nth-child(even){width:calc(66.66667% - 2rem)}.grid-3-1 :nth-child(odd){width:calc(75% - 2rem)}.grid-1-3 :nth-child(odd),.grid-3-1 :nth-child(even){width:calc(25% - 2rem)}.grid-1-3 :nth-child(even){width:calc(75% - 2rem)}.grid-3-2 :nth-child(odd){width:calc(60% - 2rem)}.grid-2-3 :nth-child(odd),.grid-3-2 :nth-child(even){width:calc(40% - 2rem)}.grid-2-3 :nth-child(even){width:calc(60% - 2rem)}.grid-4-1 :nth-child(odd){width:calc(80% - 2rem)}.grid-1-4 :nth-child(odd),.grid-4-1 :nth-child(even){width:calc(20% - 2rem)}.grid-1-4 :nth-child(even){width:calc(80% - 2rem)}}.pull{margin-right:auto}.push{margin-left:auto}
[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - 2rem - .01px);min-width:0;min-height:0;margin-left:2rem}@media (min-width:321px) and (max-width:640px){[class*=grid-]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.grid-item-double{width:calc(100% * 2 / 2 - 2rem)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.grid-item-double{width:calc(100% * 2 / 4 - 2rem)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.grid-item-double{width:calc(100% * 2 / 5 - 2rem)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.grid-item-double{width:calc(100% * 2 / 6 - 2rem)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.grid-item-double{width:calc(100% * 2 / 7 - 2rem)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.grid-item-double{width:calc(100% * 2 / 8 - 2rem)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9]>.grid-item-double{width:calc(100% * 2 / 9 - 2rem)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.grid-item-double{width:calc(100% * 2 / 10 - 2rem)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11]>.grid-item-double{width:calc(100% * 2 / 11 - 2rem)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.grid-item-double{width:calc(100% * 2 / 12 - 2rem)}}@media (min-width:321px) and (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.grid-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.grid-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){.grid-2-1>:nth-child(odd){width:calc(66.66667% - 2rem)}.grid-1-2>:nth-child(odd),.grid-2-1>:nth-child(even){width:calc(33.33333% - 2rem)}.grid-1-2>:nth-child(even){width:calc(66.66667% - 2rem)}.grid-3-1>:nth-child(odd){width:calc(75% - 2rem)}.grid-1-3>:nth-child(odd),.grid-3-1>:nth-child(even){width:calc(25% - 2rem)}.grid-1-3>:nth-child(even){width:calc(75% - 2rem)}.grid-3-2>:nth-child(odd){width:calc(60% - 2rem)}.grid-2-3>:nth-child(odd),.grid-3-2>:nth-child(even){width:calc(40% - 2rem)}.grid-2-3>:nth-child(even){width:calc(60% - 2rem)}.grid-4-1>:nth-child(odd){width:calc(80% - 2rem)}.grid-1-4>:nth-child(odd),.grid-4-1>:nth-child(even){width:calc(20% - 2rem)}.grid-1-4>:nth-child(even){width:calc(80% - 2rem)}}.pull{margin-right:auto}.push{margin-left:auto}

4
css/grillade.scss
View file

@ -751,11 +751,11 @@ $kna-namespace: null !default;
}
}
@include media('>small-screen') {
& :nth-child(odd) {
& > :nth-child(odd) {
$size: ($grid-left / ($grid-left + $grid-right)) * 100%;
width: calc(#{$size} - #{$newgutter});
}
& :nth-child(even) {
& > :nth-child(even) {
$size: ($grid-right / ($grid-left + $grid-right)) * 100%;
width: calc(#{$size} - #{$newgutter});
}

32
css/knacss-unminified.css
View file

@ -1003,51 +1003,51 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: calc(100% - 2rem - .01px); } }
@media (min-width: 641px) {
.grid-2-1 :nth-child(odd) {
.grid-2-1 > :nth-child(odd) {
width: calc(66.66667% - 2rem); }
.grid-2-1 :nth-child(even) {
.grid-2-1 > :nth-child(even) {
width: calc(33.33333% - 2rem); } }
@media (min-width: 641px) {
.grid-1-2 :nth-child(odd) {
.grid-1-2 > :nth-child(odd) {
width: calc(33.33333% - 2rem); }
.grid-1-2 :nth-child(even) {
.grid-1-2 > :nth-child(even) {
width: calc(66.66667% - 2rem); } }
@media (min-width: 641px) {
.grid-3-1 :nth-child(odd) {
.grid-3-1 > :nth-child(odd) {
width: calc(75% - 2rem); }
.grid-3-1 :nth-child(even) {
.grid-3-1 > :nth-child(even) {
width: calc(25% - 2rem); } }
@media (min-width: 641px) {
.grid-1-3 :nth-child(odd) {
.grid-1-3 > :nth-child(odd) {
width: calc(25% - 2rem); }
.grid-1-3 :nth-child(even) {
.grid-1-3 > :nth-child(even) {
width: calc(75% - 2rem); } }
@media (min-width: 641px) {
.grid-3-2 :nth-child(odd) {
.grid-3-2 > :nth-child(odd) {
width: calc(60% - 2rem); }
.grid-3-2 :nth-child(even) {
.grid-3-2 > :nth-child(even) {
width: calc(40% - 2rem); } }
@media (min-width: 641px) {
.grid-2-3 :nth-child(odd) {
.grid-2-3 > :nth-child(odd) {
width: calc(40% - 2rem); }
.grid-2-3 :nth-child(even) {
.grid-2-3 > :nth-child(even) {
width: calc(60% - 2rem); } }
@media (min-width: 641px) {
.grid-4-1 :nth-child(odd) {
.grid-4-1 > :nth-child(odd) {
width: calc(80% - 2rem); }
.grid-4-1 :nth-child(even) {
.grid-4-1 > :nth-child(even) {
width: calc(20% - 2rem); } }
@media (min-width: 641px) {
.grid-1-4 :nth-child(odd) {
.grid-1-4 > :nth-child(odd) {
width: calc(20% - 2rem); }
.grid-1-4 :nth-child(even) {
.grid-1-4 > :nth-child(even) {
width: calc(80% - 2rem); } }
.pull {

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

4
sass/_layout-grids.scss
View file

@ -111,11 +111,11 @@
}
}
@include media('>small-screen') {
& :nth-child(odd) {
& > :nth-child(odd) {
$size: ($grid-left / ($grid-left + $grid-right)) * 100%;
width: calc(#{$size} - #{$newgutter});
}
& :nth-child(even) {
& > :nth-child(even) {
$size: ($grid-right / ($grid-left + $grid-right)) * 100%;
width: calc(#{$size} - #{$newgutter});
}