/* * 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)