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

flex naming

Browse source
This commit is contained in:
Raphael Goetter 2017-10-16 16:03:25 +02:00
parent 71b0d7e745
commit 9ab034471c
3 changed files with 38 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
css/knacss-unminified.css
View file

@ -1012,8 +1012,10 @@ img.fr {
/* flexbox layout /* flexbox layout
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/ */
[class*="flex-container"], .flex-container, .flex-container--row,
.flex-container, .flex-row, .flex-container--column, .flex-container--row-reverse,
.flex-row-reverse, .flex-container--column-reverse,
.flex-column-reverse,
.d-flex { .d-flex {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -1022,32 +1024,24 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex-container-h, .flex-container--row,
.flex-row { .flex-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
} }
.flex-container-v, .flex-container--column,
.flex-column { .flex-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
} }
.flex-container--row-reverse,
.flex-row-reverse { .flex-row-reverse {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-webkit-box-direction: reverse; -webkit-box-direction: reverse;
-ms-flex-direction: row-reverse; -ms-flex-direction: row-reverse;
@ -1057,6 +1051,17 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
justify-content: flex-end; justify-content: flex-end;
} }
.flex-container--column-reverse,
.flex-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.flex-item-fluid, .flex-item-fluid,
.item-fluid { .item-fluid {
-webkit-box-flex: 1; -webkit-box-flex: 1;
@ -1692,7 +1697,10 @@ ul.is-unstyled, ul.unstyled {
margin-right: 0 !important; margin-right: 0 !important;
border: 0; border: 0;
} }
.flex-container { .flex-container, .flex-container--row,
.flex-row, .flex-container--column, .flex-container--row-reverse,
.flex-row-reverse, .flex-container--column-reverse,
.flex-column-reverse {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

21
sass/_library/_layout.scss
View file

@ -82,31 +82,38 @@ img.fr {
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/ */
[class*="flex-container"],
.flex-container, .flex-container,
.d-flex { .d-flex {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex-container-h, .flex-container--row,
.flex-row { .flex-row {
display: flex; @extend .flex-container;
flex-direction: row; flex-direction: row;
} }
.flex-container-v, .flex-container--column,
.flex-column { .flex-row {
display: flex; @extend .flex-container;
flex-direction: column; flex-direction: column;
} }
.flex-container--row-reverse,
.flex-row-reverse { .flex-row-reverse {
display: flex; @extend .flex-container;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-end; justify-content: flex-end;
} }
.flex-container--column-reverse,
.flex-column-reverse {
@extend .flex-container;
flex-direction: column-reverse;
justify-content: flex-end;
}
.flex-item-fluid, .flex-item-fluid,
.item-fluid { .item-fluid {
flex: 1 1 0%; flex: 1 1 0%;