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
sass/_02-layout.scss
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
sass/_03-grids.scss
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
sass/_07-responsive.scss
View file

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