Update flexibility overrides

stylus · Nov 24, 2012 · 5c2f1d1 · 5c2f1d1
1 parent 467d806
commit 5c2f1d1
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 21 deletions.
diff --git a/lib/nib/flex.styl b/lib/nib/flex.styl
@@ -21,23 +21,6 @@ display(type, args...)
  */
 
 
-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
-    box-flex growth
-
-  // new
-  if flex in flex-version
-    vendor('flex', arguments, only: webkit official)
-
 //
 // 5. Ordering and Orientation
 //    - http://www.w3.org/TR/css3-flexbox/#ordering-and-orientation
@@ -87,6 +70,20 @@ flex-flow()
   if flex in flex-version
     vendor('flex-flow', arguments, only: webkit official)
 
+order()
+  // obsolete
+  if box in flex-version
+    vendor('box-ordinal-group', arguments, ignore: official)
+
+  // new
+  if flex in flex-version
+    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
@@ -96,15 +93,43 @@ flex-grow(growth)
   if flex in flex-version
     vendor('flex-grow', arguments, only: webkit official)
 
-order()
+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
-    vendor('box-ordinal-group', arguments, ignore: official)
+    if none == growth
+      growth = 0
+    else if initial == growth
+      growth = 1
+    else if is-width(growth) == true
+      // Basis is defined as the first parameter
+      if 1 == length(arguments)
+        growth = 1
+      else if 2 == length(arguments)
+        growth = max(arguments[1], 1)
+      else
+        growth = max(arguments[1], arguments[2])
+    else
+      shrink = arguments[1]
+      if is-width(shrink) == true || 1 == length(arguments)
+        // Basis is defined in the second parameter
+        growth = max(growth, 1)
+      else
+        growth = max(growth, shrink)
+
+    box-flex growth
 
   // new
   if flex in flex-version
-    vendor('order', arguments, only: webkit official)
-
+    vendor('flex', arguments, only: webkit official)
 
 //
 // 8. Alignment

diff --git a/test/cases/flex.css b/test/cases/flex.css
@@ -109,6 +109,64 @@ align-items {
   -webkit-align-items: center;
   align-items: center;
 }
+flex {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -o-box-flex: 1;
+  -ms-box-flex: 1;
+  box-flex: 1;
+  -webkit-flex: 0 auto;
+  flex: 0 auto;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -o-box-flex: 1;
+  -ms-box-flex: 1;
+  box-flex: 1;
+  -webkit-flex: auto 0;
+  flex: auto 0;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -o-box-flex: 1;
+  -ms-box-flex: 1;
+  box-flex: 1;
+  -webkit-flex: initial;
+  flex: initial;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -o-box-flex: 1;
+  -ms-box-flex: 1;
+  box-flex: 1;
+  -webkit-flex: auto;
+  flex: auto;
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  -o-box-flex: 0;
+  -ms-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: none;
+  flex: none;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -o-box-flex: 1;
+  -ms-box-flex: 1;
+  box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  -o-box-flex: 0;
+  -ms-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0px 0 0;
+  flex: 0px 0 0;
+  -webkit-box-flex: 2;
+  -moz-box-flex: 2;
+  -o-box-flex: 2;
+  -ms-box-flex: 2;
+  box-flex: 2;
+  -webkit-flex: 1 2 0;
+  flex: 1 2 0;
+}
 section {
   display: -webkit-box !important;
   display: -moz-box !important;

diff --git a/test/cases/flex.styl b/test/cases/flex.styl
@@ -26,6 +26,16 @@ align-items
   align-items flex-end
   align-items center
 
+flex
+  flex 0 auto
+  flex auto 0
+  flex initial
+  flex auto
+  flex none
+  flex 1
+  flex 0px 0 0
+  flex 1 2 0
+
 section
   display: flex !important