KNACSS/sass/_02-layout.scss

138 lines
2.2 KiB
SCSS
Raw Permalink Normal View History

/* ----------------------------- */
/* ==layout and modules */
/* ----------------------------- */
/* module, gains superpower "BFC" Block Formating Context */
.#{$kna-namespace}mod,
.#{$kna-namespace}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,
.#{$kna-namespace}line,
.#{$kna-namespace}row {
2015-07-01 13:47:48 +02:00
clear: both;
}
/* blocks that must contain floats */
.clearfix,
.#{$kna-namespace}line {
2015-07-01 13:47:48 +02:00
&::after {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
}
/* simple blocks alignment */
.#{$kna-namespace}left {
2015-07-01 13:47:48 +02:00
margin-right: auto;
}
.#{$kna-namespace}right {
2015-07-01 13:47:48 +02:00
margin-left: auto;
}
.#{$kna-namespace}center {
2015-07-01 13:47:48 +02:00
margin-left: auto;
margin-right: auto;
}
/* text and contents alignment */
.#{$kna-namespace}txtleft {
2015-07-01 13:47:48 +02:00
text-align: left;
}
.#{$kna-namespace}txtright {
2015-07-01 13:47:48 +02:00
text-align: right;
}
.#{$kna-namespace}txtcenter {
2015-07-01 13:47:48 +02:00
text-align: center;
}
/* floating elements */
.#{$kna-namespace}fl {
2015-07-01 13:47:48 +02:00
float: left;
}
img.#{$kna-namespace}fl {
2015-07-01 13:47:48 +02:00
margin-right: $small-value;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
.#{$kna-namespace}fr {
2015-07-01 13:47:48 +02:00
float: right;
}
img.#{$kna-namespace}fr {
2015-07-01 13:47:48 +02:00
margin-left: $small-value;
}
img.#{$kna-namespace}fl,
img.#{$kna-namespace}fr {
2015-07-01 13:47:48 +02:00
margin-bottom: $tiny-value;
}
/* table layout */
.#{$kna-namespace}row {
2015-07-01 13:47:48 +02:00
display: table;
table-layout: fixed;
width: 100%;
}
.#{$kna-namespace}row > *,
.#{$kna-namespace}col {
2015-07-01 13:47:48 +02:00
display: table-cell;
vertical-align: top;
}
/* no table-cell for script tag when body is a .row */
body > script {
2015-07-01 13:47:48 +02:00
display: none !important;
}
/* inline-block */
.#{$kna-namespace}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
*/
[class*="#{$kna-namespace}flex-container"] {
2015-07-01 13:47:48 +02:00
display : flex;
flex-wrap: wrap;
2015-04-13 16:10:55 +02:00
}
.#{$kna-namespace}flex-container-h {
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
.#{$kna-namespace}flex-container-v {
2015-07-01 13:47:48 +02:00
flex-direction: column;
}
.#{$kna-namespace}flex-item-fluid {
2015-07-01 13:47:48 +02:00
flex: 1;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
.#{$kna-namespace}flex-item-first {
2015-07-01 13:47:48 +02:00
order : -1;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
.#{$kna-namespace}flex-item-medium {
2015-07-01 13:47:48 +02:00
order : 0;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
.#{$kna-namespace}flex-item-last {
2015-07-01 13:47:48 +02:00
order : 1;
2014-05-07 10:45:47 +02:00
}
2015-03-07 14:36:58 +01:00
.#{$kna-namespace}flex-item-center {
2015-07-01 13:47:48 +02:00
margin: auto;
2015-03-07 14:36:58 +01:00
}