KNACSS/less/_02-layout.less
Raphael Goetter 4a34da1c8b version 4.4.5
# changelog v4.4.5 (1er avril 2016)

- mise à jour vers Normalize 4 :
https://github.com/necolas/normalize.css/blob/4.0.0/CHANGELOG.md
- application de min-width: 0 sur les flex-item-fluid pour éviter les
minimum automatiques des flex-items
- suppression des styles spécifiques à Gmap (sélecteurs trop lourds
pour un cas très particuliers)
2016-04-01 15:48:24 +02:00

139 lines
2.2 KiB
Text

/* ----------------------------- */
/* ==layout and modules */
/* ----------------------------- */
/* module, gains superpower "BFC" Block Formating Context */
.mod,
.bfc {
overflow: hidden;
}
/* blocks that needs to be placed under floats */
.clear,
.@{kna-namespace}line,
.@{kna-namespace}row {
clear: both;
}
/* blocks that must contain floats */
.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;
}
.@{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"],
.@{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 {
order : -1;
}
.@{kna-namespace}flex-item-medium {
order : 0;
}
.@{kna-namespace}flex-item-last {
order : 1;
}
.@{kna-namespace}flex-item-center {
margin: auto;
}