From 5c2f1d1c69c013970235950fcd6b3cf35b0d7c87 Mon Sep 17 00:00:00 2001 From: kpdecker Date: Fri, 23 Nov 2012 23:00:09 -0600 Subject: [PATCH] Update flexibility overrides --- lib/nib/flex.styl | 67 ++++++++++++++++++++++++++++++-------------- test/cases/flex.css | 58 ++++++++++++++++++++++++++++++++++++++ test/cases/flex.styl | 10 +++++++ 3 files changed, 114 insertions(+), 21 deletions(-) diff --git a/lib/nib/flex.styl b/lib/nib/flex.styl index e55a2f1a..fb78af6a 100644 --- 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 index bec7ad01..9727621c 100644 --- 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 index e5a82b88..251d4285 100644 --- 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