refonte du module flexbox
ajouté dans layout.css et remis à jour
This commit is contained in:
raphaelgoettter
parent
5e6bacda74
commit
ed601d0f18
4 changed files with 230 additions and 231 deletions
|
|
@ -283,103 +283,3 @@ table {
|
|||
margin-bottom: @medium-value;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* simple blocks alignment */
|
||||
.left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* text and contents alignment */
|
||||
.txtleft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.txtright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.txtcenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* floating elements */
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
img.fl {
|
||||
margin-right: @small-value;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.fr {
|
||||
margin-left: @small-value;
|
||||
}
|
||||
|
||||
img.fl,
|
||||
img.fr {
|
||||
margin-bottom: @tiny-value;
|
||||
}
|
||||
|
||||
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* blocks that needs to be placed under floats */
|
||||
.clear,
|
||||
.line,
|
||||
.row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
.clearfix,
|
||||
.line {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
/* table layout */
|
||||
.row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row > *,
|
||||
.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 */
|
||||
.inbl {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,130 @@
|
|||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* blocks that needs to be placed under floats */
|
||||
.clear,
|
||||
.line,
|
||||
.row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
.clearfix,
|
||||
.line {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
/* simple blocks alignment */
|
||||
.left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* text and contents alignment */
|
||||
.txtleft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.txtright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.txtcenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* floating elements */
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
img.fl {
|
||||
margin-right: @small-value;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.fr {
|
||||
margin-left: @small-value;
|
||||
}
|
||||
|
||||
img.fl,
|
||||
img.fr {
|
||||
margin-bottom: @tiny-value;
|
||||
}
|
||||
|
||||
/* table layout */
|
||||
.row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row > *,
|
||||
.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 */
|
||||
.inbl {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* flexbox layout
|
||||
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||
*/
|
||||
|
||||
.flex {
|
||||
.flexbox,
|
||||
.flexbox-v {
|
||||
display : flex;
|
||||
}
|
||||
|
||||
.flex-h {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-v {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-fluid {
|
||||
.flexbox-h {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flexitem-fluid {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-start {
|
||||
.flexitem-first {
|
||||
order : -1;
|
||||
}
|
||||
|
||||
.flex-mid {
|
||||
order : 1;
|
||||
.flexitem-medium {
|
||||
order : 0;
|
||||
}
|
||||
|
||||
.flex-end {
|
||||
order : 42;
|
||||
.flexitem-last {
|
||||
order : 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -275,104 +275,3 @@ video {
|
|||
table {
|
||||
margin-bottom: $medium-value;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* simple blocks alignment */
|
||||
.left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* text and contents alignment */
|
||||
.txtleft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.txtright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.txtcenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* floating elements */
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
img.fl {
|
||||
margin-right: $small-value;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.fr {
|
||||
margin-left: $small-value;
|
||||
}
|
||||
|
||||
img.fl,
|
||||
img.fr {
|
||||
margin-bottom: $tiny-value;
|
||||
}
|
||||
|
||||
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* blocks that needs to be placed under floats */
|
||||
.clear,
|
||||
.line,
|
||||
.row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
.clearfix,
|
||||
.line {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
/* table layout */
|
||||
.row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row > *,
|
||||
.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 */
|
||||
.inbl {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,130 @@
|
|||
/* flexbox layout
|
||||
Tutorial: http://knacss.com/demos/tutoriel.html#flex */
|
||||
.flex {
|
||||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* blocks that needs to be placed under floats */
|
||||
.clear,
|
||||
.line,
|
||||
.row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
.clearfix,
|
||||
.line {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
/* simple blocks alignment */
|
||||
.left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* text and contents alignment */
|
||||
.txtleft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.txtright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.txtcenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* floating elements */
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
img.fl {
|
||||
margin-right: $small-value;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.fr {
|
||||
margin-left: $small-value;
|
||||
}
|
||||
|
||||
img.fl,
|
||||
img.fr {
|
||||
margin-bottom: $tiny-value;
|
||||
}
|
||||
|
||||
/* table layout */
|
||||
.row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row > *,
|
||||
.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 */
|
||||
.inbl {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* flexbox layout
|
||||
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||
*/
|
||||
|
||||
.flexbox,
|
||||
.flexbox-v {
|
||||
display : flex;
|
||||
}
|
||||
|
||||
.flex-h {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-v {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-fluid {
|
||||
.flexbox-h {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flexitem-fluid {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-start {
|
||||
.flexitem-first {
|
||||
order : -1;
|
||||
}
|
||||
|
||||
.flex-mid {
|
||||
order : 1;
|
||||
.flexitem-medium {
|
||||
order : 0;
|
||||
}
|
||||
|
||||
.flex-end {
|
||||
order : 42;
|
||||
.flexitem-last {
|
||||
order : 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue