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

flexbox renommage des classes

Browse source
This commit is contained in:
raphaelgoettter 2015-04-13 16:10:55 +02:00
parent 0d9c9d9477
commit 7e73344592
8 changed files with 34 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

19
less/_02-layout.less
View file

@ -102,34 +102,35 @@ body > script {
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/
.flexbox,
.flexbox-h,
.flexbox-v {
.flex-container {
display : flex;
flex-wrap: wrap;
}
.flex-container-h {
flex-direction: row;
}
.flexbox-v {
.flex-container-v {
flex-direction: column;
}
.flexitem-fluid {
.flex-item-fluid {
flex: 1;
}
.flexitem-first {
.flex-item-first {
order : -1;
}
.flexitem-medium {
.flex-item-medium {
order : 0;
}
.flexitem-last {
.flex-item-last {
order : 1;
}
.flexitem-center {
.flex-item-center {
margin: auto;
}

6
less/_03-grids.less
View file

@ -38,14 +38,14 @@
& > * {
width: ~'calc(100% * 1 / @{number} - @{gutter})';
}
& > .flexitem-double {
& > .flex-item-double {
width: ~'calc(100% * 2 / @{number} - @{gutter})';
}
@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
& > * {
width: ~'calc(100% * 1 / 2 - @{gutter})';
}
& > .flexitem-double {
& > .flex-item-double {
width: ~'calc(100% - @{gutter})';
}
}
@ -53,7 +53,7 @@
& > * {
width: ~'calc(100% - @{gutter})';
}
& > .flexitem-double {
& > .flex-item-double {
width: ~'calc(100% - @{gutter})';
}
}

2
less/_07-responsive.less
View file

@ -269,7 +269,7 @@
border: 0;
}
.flexbox {
.flex-container {
flex-direction: column;
}