/* —————————– */ /* ==Global Layout */ /* —————————– */
/* module, gains superpower “BFC” Block Formating Context */ .mod, .bfc {
overflow: hidden;
}
/* blocks that needs to be placed under floats */ .clear {
clear: both;
}
/* blocks that must contain floats */ .clearfix {
&::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;
}
.#{$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;
}
/* inline-block */ .#{$kna-namespace}inbl {
display: inline-block; vertical-align: top;
}
/* flexbox layout www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html */
[class*=“#{$kna-namespace}flex-container”], .#{$kna-namespace}flex-container{
display : flex; flex-wrap: wrap;
}
.#{$kna-namespace}flex-container-h {
flex-direction: row;
}
.#{$kna-namespace}flex-container-v {
flex-direction: column;
}
.#{$kna-namespace}flex-item-fluid {
flex: 1; min-width: 0;
}
.#{$kna-namespace}flex-item-first, .#{$kna-namespace}grid-item-first {
order : -1;
}
.#{$kna-namespace}flex-item-medium, .#{$kna-namespace}grid-item-medium {
order : 0;
}
.#{$kna-namespace}flex-item-last, .#{$kna-namespace}grid-item-last {
order : 1;
}
.#{$kna-namespace}flex-item-center, .#{$kna-namespace}grid-item-center {
margin: auto;
}