CSS compil
This commit is contained in:
Raphael Goetter
parent
e75663c70e
commit
46517b0baf
4 changed files with 32 additions and 28 deletions
|
|
@ -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-]>.flex-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.flex-item-double{width:calc(100% * 2 / 2 - 2rem)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.flex-item-double{width:calc(100% * 2 / 4 - 2rem)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.flex-item-double{width:calc(100% * 2 / 5 - 2rem)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.flex-item-double{width:calc(100% * 2 / 6 - 2rem)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.flex-item-double{width:calc(100% * 2 / 7 - 2rem)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.flex-item-double{width:calc(100% * 2 / 8 - 2rem)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9]>.flex-item-double{width:calc(100% * 2 / 9 - 2rem)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.flex-item-double{width:calc(100% * 2 / 10 - 2rem)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11]>.flex-item-double{width:calc(100% * 2 / 11 - 2rem)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.flex-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"]>.flex-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.flex-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.flex-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}
|
||||||
|
|
@ -676,7 +676,7 @@ $kna-namespace: null !default;
|
||||||
& {
|
& {
|
||||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
||||||
}
|
}
|
||||||
&.flex-item-double {
|
&.grid-item-double {
|
||||||
width: calc(100% - #{$grid-gutter} - .01px);
|
width: calc(100% - #{$grid-gutter} - .01px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -694,7 +694,7 @@ $kna-namespace: null !default;
|
||||||
margin-left: $newgutter;
|
margin-left: $newgutter;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > .#{$kna-namespace}flex-item-double {
|
& > .#{$kna-namespace}grid-item-double {
|
||||||
width: calc(100% * 2 / #{$grid-number} - #{$newgutter});
|
width: calc(100% * 2 / #{$grid-number} - #{$newgutter});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -714,25 +714,25 @@ $kna-namespace: null !default;
|
||||||
[class*="-small-4"] > * {
|
[class*="-small-4"] > * {
|
||||||
width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px);
|
width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px);
|
||||||
}
|
}
|
||||||
[class*="-small-4"] > .flex-item-double {
|
[class*="-small-4"] > .grid-item-double {
|
||||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
||||||
}
|
}
|
||||||
[class*="-small-3"] > * {
|
[class*="-small-3"] > * {
|
||||||
width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px);
|
width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px);
|
||||||
}
|
}
|
||||||
[class*="-small-3"] > .flex-item-double {
|
[class*="-small-3"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
|
width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
|
||||||
}
|
}
|
||||||
[class*="-small-2"] > * {
|
[class*="-small-2"] > * {
|
||||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
||||||
}
|
}
|
||||||
[class*="-small-2"] > .flex-item-double {
|
[class*="-small-2"] > .grid-item-double {
|
||||||
width: calc(100% - #{$grid-gutter} - .01px);
|
width: calc(100% - #{$grid-gutter} - .01px);
|
||||||
}
|
}
|
||||||
[class*="-small-1"] > * {
|
[class*="-small-1"] > * {
|
||||||
width: calc(100% - #{$grid-gutter} - .01px);
|
width: calc(100% - #{$grid-gutter} - .01px);
|
||||||
}
|
}
|
||||||
[class*="-small-1"] > .flex-item-double {
|
[class*="-small-1"] > .grid-item-double {
|
||||||
width: calc(100% - #{$grid-gutter} - .01px);
|
width: calc(100% - #{$grid-gutter} - .01px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -875,25 +875,29 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0; }
|
min-width: 0; }
|
||||||
|
|
||||||
.flex-item-first {
|
.flex-item-first,
|
||||||
|
.grid-item-first {
|
||||||
-webkit-box-ordinal-group: 0;
|
-webkit-box-ordinal-group: 0;
|
||||||
-webkit-order: -1;
|
-webkit-order: -1;
|
||||||
-ms-flex-order: -1;
|
-ms-flex-order: -1;
|
||||||
order: -1; }
|
order: -1; }
|
||||||
|
|
||||||
.flex-item-medium {
|
.flex-item-medium,
|
||||||
|
.grid-item-medium {
|
||||||
-webkit-box-ordinal-group: 1;
|
-webkit-box-ordinal-group: 1;
|
||||||
-webkit-order: 0;
|
-webkit-order: 0;
|
||||||
-ms-flex-order: 0;
|
-ms-flex-order: 0;
|
||||||
order: 0; }
|
order: 0; }
|
||||||
|
|
||||||
.flex-item-last {
|
.flex-item-last,
|
||||||
|
.grid-item-last {
|
||||||
-webkit-box-ordinal-group: 2;
|
-webkit-box-ordinal-group: 2;
|
||||||
-webkit-order: 1;
|
-webkit-order: 1;
|
||||||
-ms-flex-order: 1;
|
-ms-flex-order: 1;
|
||||||
order: 1; }
|
order: 1; }
|
||||||
|
|
||||||
.flex-item-center {
|
.flex-item-center,
|
||||||
|
.grid-item-center {
|
||||||
margin: auto; }
|
margin: auto; }
|
||||||
|
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
@ -930,72 +934,72 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||||
@media (min-width: 321px) and (max-width: 640px) {
|
@media (min-width: 321px) and (max-width: 640px) {
|
||||||
[class*="grid-"] > * {
|
[class*="grid-"] > * {
|
||||||
width: calc(100% * 1 / 2 - 2rem - .01px); }
|
width: calc(100% * 1 / 2 - 2rem - .01px); }
|
||||||
[class*="grid-"] > *.flex-item-double {
|
[class*="grid-"] > *.grid-item-double {
|
||||||
width: calc(100% - 2rem - .01px); } }
|
width: calc(100% - 2rem - .01px); } }
|
||||||
|
|
||||||
@media (min-width: 641px) {
|
@media (min-width: 641px) {
|
||||||
[class*="grid-2"] > * {
|
[class*="grid-2"] > * {
|
||||||
width: calc(100% * 1 / 2 - 2rem - .01px); }
|
width: calc(100% * 1 / 2 - 2rem - .01px); }
|
||||||
[class*="grid-2"] > .flex-item-double {
|
[class*="grid-2"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 2 - 2rem); }
|
width: calc(100% * 2 / 2 - 2rem); }
|
||||||
[class*="grid-3"] > * {
|
[class*="grid-3"] > * {
|
||||||
width: calc(100% * 1 / 3 - 2rem - .01px); }
|
width: calc(100% * 1 / 3 - 2rem - .01px); }
|
||||||
[class*="grid-3"] > .flex-item-double {
|
[class*="grid-3"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 3 - 2rem); }
|
width: calc(100% * 2 / 3 - 2rem); }
|
||||||
[class*="grid-4"] > * {
|
[class*="grid-4"] > * {
|
||||||
width: calc(100% * 1 / 4 - 2rem - .01px); }
|
width: calc(100% * 1 / 4 - 2rem - .01px); }
|
||||||
[class*="grid-4"] > .flex-item-double {
|
[class*="grid-4"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 4 - 2rem); }
|
width: calc(100% * 2 / 4 - 2rem); }
|
||||||
[class*="grid-5"] > * {
|
[class*="grid-5"] > * {
|
||||||
width: calc(100% * 1 / 5 - 2rem - .01px); }
|
width: calc(100% * 1 / 5 - 2rem - .01px); }
|
||||||
[class*="grid-5"] > .flex-item-double {
|
[class*="grid-5"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 5 - 2rem); }
|
width: calc(100% * 2 / 5 - 2rem); }
|
||||||
[class*="grid-6"] > * {
|
[class*="grid-6"] > * {
|
||||||
width: calc(100% * 1 / 6 - 2rem - .01px); }
|
width: calc(100% * 1 / 6 - 2rem - .01px); }
|
||||||
[class*="grid-6"] > .flex-item-double {
|
[class*="grid-6"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 6 - 2rem); }
|
width: calc(100% * 2 / 6 - 2rem); }
|
||||||
[class*="grid-7"] > * {
|
[class*="grid-7"] > * {
|
||||||
width: calc(100% * 1 / 7 - 2rem - .01px); }
|
width: calc(100% * 1 / 7 - 2rem - .01px); }
|
||||||
[class*="grid-7"] > .flex-item-double {
|
[class*="grid-7"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 7 - 2rem); }
|
width: calc(100% * 2 / 7 - 2rem); }
|
||||||
[class*="grid-8"] > * {
|
[class*="grid-8"] > * {
|
||||||
width: calc(100% * 1 / 8 - 2rem - .01px); }
|
width: calc(100% * 1 / 8 - 2rem - .01px); }
|
||||||
[class*="grid-8"] > .flex-item-double {
|
[class*="grid-8"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 8 - 2rem); }
|
width: calc(100% * 2 / 8 - 2rem); }
|
||||||
[class*="grid-9"] > * {
|
[class*="grid-9"] > * {
|
||||||
width: calc(100% * 1 / 9 - 2rem - .01px); }
|
width: calc(100% * 1 / 9 - 2rem - .01px); }
|
||||||
[class*="grid-9"] > .flex-item-double {
|
[class*="grid-9"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 9 - 2rem); }
|
width: calc(100% * 2 / 9 - 2rem); }
|
||||||
[class*="grid-10"] > * {
|
[class*="grid-10"] > * {
|
||||||
width: calc(100% * 1 / 10 - 2rem - .01px); }
|
width: calc(100% * 1 / 10 - 2rem - .01px); }
|
||||||
[class*="grid-10"] > .flex-item-double {
|
[class*="grid-10"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 10 - 2rem); }
|
width: calc(100% * 2 / 10 - 2rem); }
|
||||||
[class*="grid-11"] > * {
|
[class*="grid-11"] > * {
|
||||||
width: calc(100% * 1 / 11 - 2rem - .01px); }
|
width: calc(100% * 1 / 11 - 2rem - .01px); }
|
||||||
[class*="grid-11"] > .flex-item-double {
|
[class*="grid-11"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 11 - 2rem); }
|
width: calc(100% * 2 / 11 - 2rem); }
|
||||||
[class*="grid-12"] > * {
|
[class*="grid-12"] > * {
|
||||||
width: calc(100% * 1 / 12 - 2rem - .01px); }
|
width: calc(100% * 1 / 12 - 2rem - .01px); }
|
||||||
[class*="grid-12"] > .flex-item-double {
|
[class*="grid-12"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 12 - 2rem); } }
|
width: calc(100% * 2 / 12 - 2rem); } }
|
||||||
|
|
||||||
/* Responsive grid */
|
/* Responsive grid */
|
||||||
@media (min-width: 321px) and (max-width: 640px) {
|
@media (min-width: 321px) and (max-width: 640px) {
|
||||||
[class*="-small-4"] > * {
|
[class*="-small-4"] > * {
|
||||||
width: calc(100% * 1 / 4 - 2rem - .01px); }
|
width: calc(100% * 1 / 4 - 2rem - .01px); }
|
||||||
[class*="-small-4"] > .flex-item-double {
|
[class*="-small-4"] > .grid-item-double {
|
||||||
width: calc(100% * 1 / 2 - 2rem - .01px); }
|
width: calc(100% * 1 / 2 - 2rem - .01px); }
|
||||||
[class*="-small-3"] > * {
|
[class*="-small-3"] > * {
|
||||||
width: calc(100% * 1 / 3 - 2rem - .01px); }
|
width: calc(100% * 1 / 3 - 2rem - .01px); }
|
||||||
[class*="-small-3"] > .flex-item-double {
|
[class*="-small-3"] > .grid-item-double {
|
||||||
width: calc(100% * 2 / 3 - 2rem - .01px); }
|
width: calc(100% * 2 / 3 - 2rem - .01px); }
|
||||||
[class*="-small-2"] > * {
|
[class*="-small-2"] > * {
|
||||||
width: calc(100% * 1 / 2 - 2rem - .01px); }
|
width: calc(100% * 1 / 2 - 2rem - .01px); }
|
||||||
[class*="-small-2"] > .flex-item-double {
|
[class*="-small-2"] > .grid-item-double {
|
||||||
width: calc(100% - 2rem - .01px); }
|
width: calc(100% - 2rem - .01px); }
|
||||||
[class*="-small-1"] > * {
|
[class*="-small-1"] > * {
|
||||||
width: calc(100% - 2rem - .01px); }
|
width: calc(100% - 2rem - .01px); }
|
||||||
[class*="-small-1"] > .flex-item-double {
|
[class*="-small-1"] > .grid-item-double {
|
||||||
width: calc(100% - 2rem - .01px); } }
|
width: calc(100% - 2rem - .01px); } }
|
||||||
|
|
||||||
@media (min-width: 641px) {
|
@media (min-width: 641px) {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue