KNACSS/sass/_02-layout.scss

137 lines
2.1 KiB
SCSS
Raw Normal View History

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