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