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

box-sizing on grid childs

Browse source
This commit is contained in:
Raphael Goetter 2015-12-24 09:18:58 +01:00
parent e514522b08
commit bde9e261a7
7 changed files with 63 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

1
sass/_03-grids.scss
View file

@ -30,6 +30,7 @@
/* grid childs */
[class*="#{$kna-namespace}grid-"] > * {
box-sizing: border-box;
flex: 0 0 auto;
width: calc(100% * 1 / #{$number} - #{$gutter} - .01px);
margin-left: $gutter;

113
sass/knacss.css
View file

@ -750,6 +750,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
/* grid childs */
/* line 32, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-"] > * {
box-sizing: border-box;
flex: 0 0 auto;
width: calc(100% * 1 / 4 - 2rem - .01px);
margin-left: 2rem;
@ -759,228 +760,228 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
letter-spacing: normal;
text-rendering: auto; }
/* line 47, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 48, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-2"] > * {
width: calc(100% * 1 / 2 - 2rem - .01px); }
/* line 49, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 50, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-2"] > .flex-item-double {
width: calc(100% * 2 / 2 - 2rem); }
/* line 47, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 48, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-3"] > * {
width: calc(100% * 1 / 3 - 2rem - .01px); }
/* line 49, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 50, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-3"] > .flex-item-double {
width: calc(100% * 2 / 3 - 2rem); }
/* line 47, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 48, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-4"] > * {
width: calc(100% * 1 / 4 - 2rem - .01px); }
/* line 49, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 50, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-4"] > .flex-item-double {
width: calc(100% * 2 / 4 - 2rem); }
/* line 47, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 48, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-5"] > * {
width: calc(100% * 1 / 5 - 2rem - .01px); }
/* line 49, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 50, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-5"] > .flex-item-double {
width: calc(100% * 2 / 5 - 2rem); }
/* line 47, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 48, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-6"] > * {
width: calc(100% * 1 / 6 - 2rem - .01px); }
/* line 49, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 50, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-6"] > .flex-item-double {
width: calc(100% * 2 / 6 - 2rem); }
/* line 47, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 48, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-7"] > * {
width: calc(100% * 1 / 7 - 2rem - .01px); }
/* line 49, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 50, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-7"] > .flex-item-double {
width: calc(100% * 2 / 7 - 2rem); }
/* line 47, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 48, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-8"] > * {
width: calc(100% * 1 / 8 - 2rem - .01px); }
/* line 49, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 50, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-8"] > .flex-item-double {
width: calc(100% * 2 / 8 - 2rem); }
/* line 47, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 48, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-10"] > * {
width: calc(100% * 1 / 10 - 2rem - .01px); }
/* line 49, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 50, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-10"] > .flex-item-double {
width: calc(100% * 2 / 10 - 2rem); }
/* line 47, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 48, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-12"] > * {
width: calc(100% * 1 / 12 - 2rem - .01px); }
/* line 49, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 50, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="grid-12"] > .flex-item-double {
width: calc(100% * 2 / 12 - 2rem); }
/* Responsive grid */
@media (max-width: 640px) {
/* line 97, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 98, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-small-4"] > * {
width: calc(100% * 1 / 4 - 2rem - .01px); }
/* line 100, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 101, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-small-4"] > .flex-item-double {
width: calc(100% * 1 / 2 - 2rem - .01px); }
/* line 103, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 104, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-small-3"] > * {
width: calc(100% * 1 / 3 - 2rem - .01px); }
/* line 106, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 107, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-small-3"] > .flex-item-double {
width: calc(100% * 2 / 3 - 2rem - .01px); }
/* line 109, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 110, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-small-2"] > * {
width: calc(100% * 1 / 2 - 2rem - .01px); }
/* line 112, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 113, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-small-2"] > .flex-item-double {
width: calc(100% - 2rem - .01px); }
/* line 115, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 116, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-small-1"] > * {
width: calc(100% - 2rem - .01px); }
/* line 118, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 119, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-small-1"] > .flex-item-double {
width: calc(100% - 2rem - .01px); } }
@media (max-width: 320px) {
/* line 125, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 126, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-tiny-2"] > * {
width: calc(100% * 1 / 2 - 2rem - .01px); }
/* line 128, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 129, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-tiny-2"] > .flex-item-double {
width: calc(100% - 2rem - .01px); }
/* line 131, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 132, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-tiny-1"] > * {
width: calc(100% - 2rem - .01px); }
/* line 134, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 135, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
[class*="-tiny-1"] > .flex-item-double {
width: calc(100% - 2rem - .01px); } }
/* line 142, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 143, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-2-1 > *:nth-child(odd) {
width: calc(66.66667% - 2rem); }
/* line 146, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 147, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-2-1 > *:nth-child(even) {
width: calc(33.33333% - 2rem); }
@media (max-width: 640px) {
/* line 151, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 152, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-2-1 > *:nth-child(n) {
width: calc(100% - 2rem); } }
/* line 142, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 143, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-1-2 > *:nth-child(odd) {
width: calc(33.33333% - 2rem); }
/* line 146, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 147, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-1-2 > *:nth-child(even) {
width: calc(66.66667% - 2rem); }
@media (max-width: 640px) {
/* line 151, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 152, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-1-2 > *:nth-child(n) {
width: calc(100% - 2rem); } }
/* line 142, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 143, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-3-1 > *:nth-child(odd) {
width: calc(75% - 2rem); }
/* line 146, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 147, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-3-1 > *:nth-child(even) {
width: calc(25% - 2rem); }
@media (max-width: 640px) {
/* line 151, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 152, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-3-1 > *:nth-child(n) {
width: calc(100% - 2rem); } }
/* line 142, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 143, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-1-3 > *:nth-child(odd) {
width: calc(25% - 2rem); }
/* line 146, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 147, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-1-3 > *:nth-child(even) {
width: calc(75% - 2rem); }
@media (max-width: 640px) {
/* line 151, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 152, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-1-3 > *:nth-child(n) {
width: calc(100% - 2rem); } }
/* line 142, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 143, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-3-2 > *:nth-child(odd) {
width: calc(60% - 2rem); }
/* line 146, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 147, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-3-2 > *:nth-child(even) {
width: calc(40% - 2rem); }
@media (max-width: 640px) {
/* line 151, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 152, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-3-2 > *:nth-child(n) {
width: calc(100% - 2rem); } }
/* line 142, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 143, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-2-3 > *:nth-child(odd) {
width: calc(40% - 2rem); }
/* line 146, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 147, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-2-3 > *:nth-child(even) {
width: calc(60% - 2rem); }
@media (max-width: 640px) {
/* line 151, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 152, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-2-3 > *:nth-child(n) {
width: calc(100% - 2rem); } }
/* line 142, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 143, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-4-1 > *:nth-child(odd) {
width: calc(80% - 2rem); }
/* line 146, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 147, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-4-1 > *:nth-child(even) {
width: calc(20% - 2rem); }
@media (max-width: 640px) {
/* line 151, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 152, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-4-1 > *:nth-child(n) {
width: calc(100% - 2rem); } }
/* line 142, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 143, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-1-4 > *:nth-child(odd) {
width: calc(20% - 2rem); }
/* line 146, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 147, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-1-4 > *:nth-child(even) {
width: calc(80% - 2rem); }
@media (max-width: 640px) {
/* line 151, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 152, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.grid-1-4 > *:nth-child(n) {
width: calc(100% - 2rem); } }
/* line 188, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 189, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.pull {
margin-right: auto; }
/* line 192, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
/* line 193, /Users/raphael/Documents/GitHub/KNACSS/sass/_03-grids.scss */
.push {
margin-left: auto; }

2
sass/knacss.css.map
View file

File diff suppressed because one or more lines are too long