KNACSS/styl/utilities/_layout.styl
2017-03-06 17:35:08 +01:00

99 lines
1.7 KiB
Stylus

/* ----------------------------- */
/* ==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
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
.{kna-namespace}item-first
order -1
.{kna-namespace}flex-item-medium
.{kna-namespace}item-medium
order 0
.{kna-namespace}flex-item-last
.{kna-namespace}item-last
order 1
.{kna-namespace}flex-item-center
.{kna-namespace}item-center
margin auto