%PDF- %PDF-
| Direktori : /www/specpages-backup/node_modules/nib/lib/nib/ |
| Current File : /www/specpages-backup/node_modules/nib/lib/nib/flex.styl |
/*
* Vendor "display: flex" support with fallback to obsolete versions.
*/
flex-version ?= box flex
//
// 1. Display values
// - http://www.w3.org/TR/css3-flexbox/#flex-containers
//
display(type, args...)
if flex == type || inline-flex == type
if box in flex-version
if flex == type
display: -ms-flexbox args
display: vendor-value(box args, only: moz webkit)
else
display: -ms-inline-flexbox args
display: vendor-value(inline-box args, only: moz webkit)
if flex in flex-version
display: vendor-value(arguments, only: webkit official) // overwrites old webkit
else
display: arguments
/*
* New syntax for browsers like Google Chrome.
* Plus a translation to the old syntax, if possible.
*/
//
// 5. Ordering and Orientation
// - http://www.w3.org/TR/css3-flexbox/#ordering-and-orientation
//
-flex-obsolete-direction(direction)
if box in flex-version
if row-reverse == direction || column-reverse == direction
vendor('box-direction', reverse, ignore: ms official)
if row == direction || row-reverse == direction
vendor('box-orient', horizontal, ignore: ms official)
else if column == direction || column-reverse == direction
vendor('box-orient', vertical, ignore: ms official)
-flex-obsolete-wrap(value)
if box in flex-version
// WARN: wrap-reverse does not have a box equivalent. This will render in different manners
// on box vs. flex values.
if 'wrap' == value || wrap-reverse == value
vendor('box-lines', multiple, ignore: ms official)
else if nowrap == value
vendor('box-lines', single, ignore: ms official)
flex-direction(direction)
// obsolete
-flex-obsolete-direction(direction)
// new
if flex in flex-version
vendor('flex-direction', arguments, only: webkit ms official)
flex-wrap(value)
// obsolete
-flex-obsolete-wrap(value)
if flex in flex-version
vendor('flex-wrap', arguments, only: webkit ms official)
flex-flow()
// obsolete
-flex-obsolete-direction(arguments[0])
-flex-obsolete-direction(arguments[1])
-flex-obsolete-wrap(arguments[0])
-flex-obsolete-wrap(arguments[1])
// new
if flex in flex-version
vendor('flex-flow', arguments, only: webkit ms official)
order()
// obsolete
if box in flex-version
vendor('box-ordinal-group', arguments, ignore: ms official)
// new
if flex in flex-version
vendor('flex-order', arguments, only: ms)
vendor('order', arguments, only: webkit official)
//
// 7. Flexibility
// - http://www.w3.org/TR/css3-flexbox/#flexibility
//
flex-grow(growth)
// obsolete
if box in flex-version
vendor('box-flex', growth)
// new
if flex in flex-version
vendor('flex-grow', arguments, only: webkit official)
flex-basis()
if flex in flex-version
vendor('flex-basis', arguments, only: webkit official)
flex-shrink()
if flex in flex-version
vendor('flex-shrink', arguments, only: webkit official)
flex(growth)
// obsolete
if box in flex-version
shrink = 1
if none == growth || initial == growth
// Well known values
shrink = 0 if none == growth
growth = 0
else if is-width(growth) == true
// Basis is defined as the first parameter
growth = arguments[1] || 0
shrink = arguments[2] if 3 <= length(arguments)
else if arguments[1] && is-width(arguments[1]) == false
// Growth is first and shrink is second
shrink = arguments[1]
// Since we can't make the distinction between growing and shrinking in the box model, take
// the one that provides the most flexibility.
vendor('box-flex', max(growth, shrink), ignore: ms)
// new
if flex in flex-version
vendor('flex', arguments, only: webkit ms official)
// converts the justification alignment
-convert-justify(align)
if flex-start == align
return start
else if flex-end == align
return end
else if space-around == align
return distribute
else if space-between == align
return justify
else
return align
//
// 8. Alignment
// - http://www.w3.org/TR/css3-flexbox/#alignment
//
justify-content(align)
// obsolete
if box in flex-version
vendor('box-pack', -convert-justify(align), ignore: ms official)
// new
if flex in flex-version
vendor('flex-pack', -convert-justify(align), only: ms)
vendor('justify-content', align, only: webkit official)
align-content(align)
// WARN: Obsolete spec does not allow for adjustment here
if flex in flex-version
vendor('flex-line-pack', -convert-justify(align), only: ms)
vendor('align-content', align, only: webkit official)
// converts alignment from 'flex' to normal value
-convert-alignment(align)
if flex-start == align
return start
else if flex-end == align
return end
else
return align
align-items(align)
// obsolete
if box in flex-version
vendor('box-align', -convert-alignment(align), ignore: ms official)
// new
if flex in flex-version
vendor('flex-align', -convert-alignment(align), only: ms)
vendor('align-items', arguments, only: webkit official)
align-self(align)
// WARN: Obsolete spec does not allow for overriding alignment on individual items.
if flex in flex-version
vendor('align-self', align, only: webkit official)
vendor('flex-item-align', -convert-alignment(align), only: ms)