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

CSS compil

Browse source
This commit is contained in:
Raphael Goetter 2016-05-23 14:39:00 +02:00
parent e75663c70e
commit 46517b0baf
4 changed files with 32 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

44
css/knacss-unminified.css
View file

@ -875,25 +875,29 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
flex: 1;
min-width: 0; }
.flex-item-first {
.flex-item-first,
.grid-item-first {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1; }
.flex-item-medium {
.flex-item-medium,
.grid-item-medium {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0; }
.flex-item-last {
.flex-item-last,
.grid-item-last {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1; }
.flex-item-center {
.flex-item-center,
.grid-item-center {
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) {
[class*="grid-"] > * {
width: calc(100% * 1 / 2 - 2rem - .01px); }
[class*="grid-"] > *.flex-item-double {
[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"] > .flex-item-double {
[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"] > .flex-item-double {
[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"] > .flex-item-double {
[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"] > .flex-item-double {
[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"] > .flex-item-double {
[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"] > .flex-item-double {
[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"] > .flex-item-double {
[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"] > .flex-item-double {
[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"] > .flex-item-double {
[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"] > .flex-item-double {
[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"] > .flex-item-double {
[class*="grid-12"] > .grid-item-double {
width: calc(100% * 2 / 12 - 2rem); } }
/* Responsive grid */
@media (min-width: 321px) and (max-width: 640px) {
[class*="-small-4"] > * {
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); }
[class*="-small-3"] > * {
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); }
[class*="-small-2"] > * {
width: calc(100% * 1 / 2 - 2rem - .01px); }
[class*="-small-2"] > .flex-item-double {
[class*="-small-2"] > .grid-item-double {
width: calc(100% - 2rem - .01px); }
[class*="-small-1"] > * {
width: calc(100% - 2rem - .01px); }
[class*="-small-1"] > .flex-item-double {
[class*="-small-1"] > .grid-item-double {
width: calc(100% - 2rem - .01px); } }
@media (min-width: 641px) {