Skip to content

Commit

Permalink
Add support for new FlexBox specs and fallback to old specs
Browse files Browse the repository at this point in the history
  • Loading branch information
buschtoens committed Aug 8, 2012
1 parent 639307f commit c8a9091
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 28 deletions.
28 changes: 0 additions & 28 deletions lib/nib/box.styl

This file was deleted.

84 changes: 84 additions & 0 deletions lib/nib/flex.styl
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
/*
* Vendor "display: flex" support with fallback to obsolete versions.
*/

display(type)
if flex == type || inline-flex == type
display: vendor-value(box, only: moz ms webkit)
display: vendor-value(type, only: webkit official) // overwrites old webkit
else
display: type

/*
* New syntax for browsers like Google Chrome.
* Plus a translation to the old syntax, if possible.
*/
align-content()
vendor('align-content', arguments, only: webkit official)

align-self()
vendor('align-self', arguments, only: webkit official)

flex-basis()
vendor('flex-basics', arguments, only: webkit official)

flex-shrink()
vendor('flex-shrink', arguments, only: webkit official)

flex-wrap()
vendor('flex-wrap', arguments, only: webkit official)

justify-content()
vendor('justify-content', arguments, only: webkit official)

align-items(align)
/* obsolete */
if flex-start == align
align = start
else if flex-end == align
align = end
vendor('box-align', align, ignore: official)

/* new */
vendor('align-items', arguments, only: webkit official)

flex(growth)
/* obsolete */
vendor('flex', arguments, only: webkit official)

/* new */
vendor('box-flex', growth)

flex-direction(direction)
/* obsolete */
if row-reverse == direction || column-reverse == direction
vendor('box-direction', reverse, ignore: official)
if row == direction || row-reverse == direction
vendor('box-orient', horizontal, ignore: official)
else if column == direction || column-reverse == direction
vendor('box-orient', vertical, ignore: official)

/* new */
vendor('flex-direction', arguments, only: webkit official)

flex-flow(direction)
/* obsolete */
if row-reverse == direction || column-reverse == direction || wrap-reverse == direction
vendor('box-direction', 'reverse', ignore: official)

/* new */
vendor('flex-flow', arguments, only: webkit official)

flex-grow(growth)
/* obsolete */
vendor('flex-grow', arguments, only: webkit official)

/* new */
vendor('box-flex', growth)

order()
/* obsolete */
vendor('box-ordinal-group', arguments, ignore: official)

/* new */
vendor('order', arguments, only: webkit official)

0 comments on commit c8a9091

Please sign in to comment.