KNACSS/styl/utilities/_layout.styl

99 lines
1.8 KiB
Stylus
Raw Normal View History

2017-03-06 17:35:08 +01:00
/* ----------------------------- */
/* ==Global Layout */
/* ----------------------------- */
2017-03-09 14:21:09 +01:00
@import '../vendor/flexbox-stylus/stylus/flexbox.styl'
2017-03-06 17:35:08 +01:00
/* 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
*/
2017-03-09 14:21:09 +01:00
[class*={kna-namespace}"flex-container"]
2017-03-06 17:35:08 +01:00
.{kna-namespace}flex-container
2017-03-09 14:21:09 +01:00
flexbox(flex)
flex-wrap(wrap)
2017-03-06 17:35:08 +01:00
.{kna-namespace}flex-container-h
2017-03-09 14:21:09 +01:00
flex-direction(row)
2017-03-06 17:35:08 +01:00
.{kna-namespace}flex-container-v
2017-03-09 14:21:09 +01:00
flex-direction(column)
2017-03-06 17:35:08 +01:00
.{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