KNACSS/sass/_library/_layout.scss

142 lines
1.9 KiB
SCSS
Raw Permalink Normal View History

/* ----------------------------- */
/* ==Global Micro Layout */
/* ----------------------------- */
/* module, gains superpower "BFC" Block Formating Context */
2015-12-12 11:20:29 +01:00
.mod,
.bfc {
2015-07-01 13:47:48 +02:00
overflow: hidden;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
/* blocks that needs to be placed under floats */
.clear {
2015-07-01 13:47:48 +02:00
clear: both;
}
/* blocks that must contain floats */
.clearfix {
2015-07-01 13:47:48 +02:00
&::after {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
}
/* simple blocks alignment */
2017-07-31 11:45:22 +02:00
.left {
2015-07-01 13:47:48 +02:00
margin-right: auto;
}
2017-07-31 11:45:22 +02:00
.right {
2015-07-01 13:47:48 +02:00
margin-left: auto;
}
2017-07-31 11:45:22 +02:00
.center {
2015-07-01 13:47:48 +02:00
margin-left: auto;
margin-right: auto;
}
/* text and contents alignment */
2017-07-31 11:45:22 +02:00
.txtleft {
2015-07-01 13:47:48 +02:00
text-align: left;
}
2017-07-31 11:45:22 +02:00
.txtright {
2015-07-01 13:47:48 +02:00
text-align: right;
}
2017-07-31 11:45:22 +02:00
.txtcenter {
2015-07-01 13:47:48 +02:00
text-align: center;
}
/* floating elements */
2017-07-31 11:45:22 +02:00
.fl {
2015-07-01 13:47:48 +02:00
float: left;
}
2017-07-31 11:45:22 +02:00
img.fl {
margin-right: $spacer-small;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2017-07-31 11:45:22 +02:00
.fr {
2015-07-01 13:47:48 +02:00
float: right;
}
2017-07-31 11:45:22 +02:00
img.fr {
margin-left: $spacer-small;
}
2017-07-31 11:45:22 +02:00
img.fl,
img.fr {
margin-bottom: $spacer-tiny;
}
/* inline-block */
2017-07-31 11:45:22 +02:00
.inbl {
2015-07-01 13:47:48 +02:00
display: inline-block;
vertical-align: top;
}
/* flexbox layout
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/
2017-07-31 11:45:22 +02:00
.flex-container,
2017-06-21 10:50:33 +02:00
.d-flex {
display: flex;
2015-07-01 13:47:48 +02:00
flex-wrap: wrap;
2015-04-13 16:10:55 +02:00
}
2017-10-16 16:03:25 +02:00
.flex-container--row,
2017-06-21 10:50:33 +02:00
.flex-row {
2017-10-16 16:03:25 +02:00
@extend .flex-container;
2015-07-01 13:47:48 +02:00
flex-direction: row;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2017-10-16 16:03:25 +02:00
.flex-container--column,
.flex-column {
2017-10-16 16:03:25 +02:00
@extend .flex-container;
2015-07-01 13:47:48 +02:00
flex-direction: column;
}
2017-10-16 16:03:25 +02:00
.flex-container--row-reverse,
2017-09-06 14:25:58 +02:00
.flex-row-reverse {
2017-10-16 16:03:25 +02:00
@extend .flex-container;
2017-09-06 14:25:58 +02:00
flex-direction: row-reverse;
justify-content: flex-end;
}
2017-10-16 16:03:25 +02:00
.flex-container--column-reverse,
.flex-column-reverse {
@extend .flex-container;
flex-direction: column-reverse;
justify-content: flex-end;
}
2017-08-02 14:28:24 +02:00
.flex-item-fluid,
.item-fluid {
2017-09-13 12:19:07 +02:00
flex: 1 1 0%;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2017-07-31 11:45:22 +02:00
.flex-item-first,
.item-first {
order: -1;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2017-07-31 11:45:22 +02:00
.flex-item-medium,
.item-medium {
order: 0;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2017-07-31 11:45:22 +02:00
.flex-item-last,
.item-last {
order: 1;
2014-05-07 10:45:47 +02:00
}
2015-03-07 14:36:58 +01:00
2017-07-31 11:45:22 +02:00
.flex-item-center,
.item-center,
2017-06-21 10:50:33 +02:00
.mr-auto {
2015-07-01 13:47:48 +02:00
margin: auto;
2015-03-07 14:36:58 +01:00
}