Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #188 from edgecampus/ie10-flexbox-fix

Corrections for IE10 flexbox
  • Loading branch information...
commit 39888143d1089d1fb67d9b0183c318ae82d401a5 2 parents b6e3bca + a770cbb
@slang800 slang800 authored
View
90 lib/nib/flex.styl
@@ -10,8 +10,11 @@ flex-version ?= box flex
//
display(type, args...)
if flex == type || inline-flex == type
- display: vendor-value(box args, only: moz ms webkit) if box in flex-version
- display: vendor-value(arguments, only: webkit official) if flex in flex-version // overwrites old webkit
+ if box in flex-version
+ display: -ms-flexbox args
+ display: vendor-value(box args, only: moz webkit)
+ if flex in flex-version
+ display: vendor-value(arguments, only: webkit official) // overwrites old webkit
else
display: arguments
@@ -28,21 +31,21 @@ display(type, args...)
-flex-obsolete-direction(direction)
if box in flex-version
if row-reverse == direction || column-reverse == direction
- vendor('box-direction', reverse, ignore: official)
+ vendor('box-direction', reverse, ignore: ms official)
if row == direction || row-reverse == direction
- vendor('box-orient', horizontal, ignore: official)
+ vendor('box-orient', horizontal, ignore: ms official)
else if column == direction || column-reverse == direction
- vendor('box-orient', vertical, ignore: official)
+ 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: official)
+ vendor('box-lines', multiple, ignore: ms official)
else if nowrap == value
- vendor('box-lines', single, ignore: official)
+ vendor('box-lines', single, ignore: ms official)
flex-direction(direction)
// obsolete
@@ -50,14 +53,14 @@ flex-direction(direction)
// new
if flex in flex-version
- vendor('flex-direction', arguments, only: webkit official)
+ 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 official)
+ vendor('flex-wrap', arguments, only: webkit ms official)
flex-flow()
// obsolete
@@ -68,15 +71,17 @@ flex-flow()
// new
if flex in flex-version
- vendor('flex-flow', arguments, only: webkit official)
+ vendor('flex-flow', arguments, only: webkit ms official)
+
order()
// obsolete
if box in flex-version
- vendor('box-ordinal-group', arguments, ignore: official)
+ 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)
@@ -121,11 +126,25 @@ flex(growth)
// Since we can't make the distinction between growing and shrinking in the box model, take
// the one that provides the most flexibility.
- box-flex max(growth, shrink)
+ vendor('box-flex', max(growth, shrink), ignore: ms)
// new
if flex in flex-version
- vendor('flex', arguments, only: webkit official)
+ 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
@@ -134,39 +153,40 @@ flex(growth)
justify-content(align)
// obsolete
if box in flex-version
- if flex-start == align
- align = start
- else if flex-end == align
- align = end
- else if space-around == align || space-between == align
- // WARN: space-around does not match exactly to the align pack method but this is the
- // closest option available.
- align = justify
- vendor('box-pack', align, ignore: official)
+ vendor('box-pack', -convert-justify(align), ignore: ms official)
// new
if flex in flex-version
- vendor('justify-content', arguments, only: webkit official)
+ 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
- if flex-start == align
- align = start
- else if flex-end == align
- align = end
- vendor('box-align', align, ignore: official)
+ 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-self(align)
// WARN: Obsolete spec does not allow for overriding alignment on individual items.
if flex in flex-version
- vendor('align-self', arguments, only: webkit official)
-
-align-content()
- // WARN: Obsolete spec does not allow for adjustment here
- if flex in flex-version
- vendor('align-content', arguments, only: webkit official)
+ vendor('align-self', align, only: webkit official)
+ vendor('flex-item-align', -convert-alignment(align), only: ms)
View
9 lib/nib/vendor.styl
@@ -344,14 +344,7 @@ box-sizing()
*/
box-orient()
- vendor('box-orient', arguments, only: webkit moz ms official)
-
-/*
- * Vendor "box-flex" support.
- */
-
-box-flex()
- vendor('box-flex', arguments, only: webkit moz o ms official)
+ vendor('box-orient', arguments, only: webkit moz official)
/*
* Vendor "box-flex-group" support.
View
89 test/cases/flex.css
@@ -1,91 +1,87 @@
section {
display: -webkit-box;
display: -moz-box;
- display: -ms-box;
display: -webkit-flex;
+ display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
- -ms-box-orient: horizontal;
-webkit-flex-direction: row;
+ -ms-flex-direction: row;
flex-direction: row;
}
section div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
- -ms-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 0;
+ -ms-flex: 1 0;
flex: 1 0;
}
flex-flow {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-o-box-direction: reverse;
- -ms-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
- -ms-box-orient: horizontal;
-webkit-flex-flow: row-reverse;
+ -ms-flex-flow: row-reverse;
flex-flow: row-reverse;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
- -ms-box-orient: horizontal;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
- -ms-box-lines: multiple;
-webkit-flex-flow: row wrap;
+ -ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-o-box-direction: reverse;
- -ms-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
- -ms-box-orient: vertical;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
- -ms-box-lines: multiple;
-webkit-flex-flow: wrap-reverse column-reverse;
+ -ms-flex-flow: wrap-reverse column-reverse;
flex-flow: wrap-reverse column-reverse;
}
justify-content {
-webkit-box-pack: start;
-moz-box-pack: start;
-o-box-pack: start;
- -ms-box-pack: start;
+ -ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-pack: end;
-moz-box-pack: end;
-o-box-pack: end;
- -ms-box-pack: end;
+ -ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
- -ms-box-pack: center;
+ -ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-o-box-pack: justify;
- -ms-box-pack: justify;
+ -ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
- -webkit-box-pack: justify;
- -moz-box-pack: justify;
- -o-box-pack: justify;
- -ms-box-pack: justify;
+ -webkit-box-pack: distribute;
+ -moz-box-pack: distribute;
+ -o-box-pack: distribute;
+ -ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
@@ -93,119 +89,144 @@ align-items {
-webkit-box-align: start;
-moz-box-align: start;
-o-box-align: start;
- -ms-box-align: start;
+ -ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-box-align: end;
-moz-box-align: end;
-o-box-align: end;
- -ms-box-align: end;
+ -ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
- -ms-box-align: center;
+ -ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
+align-content {
+ -ms-flex-line-pack: start;
+ -webkit-align-content: flex-start;
+ align-content: flex-start;
+ -ms-flex-line-pack: end;
+ -webkit-align-content: flex-end;
+ align-content: flex-end;
+ -ms-flex-line-pack: center;
+ -webkit-align-content: center;
+ align-content: center;
+ -ms-flex-line-pack: justify;
+ -webkit-align-content: space-between;
+ align-content: space-between;
+ -ms-flex-line-pack: distribute;
+ -webkit-align-content: space-around;
+ align-content: space-around;
+}
flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
- -ms-box-flex: 1;
box-flex: 1;
-webkit-flex: 0 auto;
+ -ms-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;
+ -ms-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;
+ -ms-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;
+ -ms-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;
+ -ms-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;
+ -ms-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;
+ -ms-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;
+ -ms-flex: 1 2 0;
flex: 1 2 0;
}
+order {
+ -webkit-box-ordinal-group: 0;
+ -moz-box-ordinal-group: 0;
+ -o-box-ordinal-group: 0;
+ -ms-flex-order: 0;
+ -webkit-order: 0;
+ order: 0;
+}
section {
display: -webkit-box !important;
display: -moz-box !important;
- display: -ms-box !important;
display: -webkit-flex !important;
+ display: -ms-flexbox !important;
display: box !important;
display: flex !important;
}
section {
display: -webkit-box;
display: -moz-box;
- display: -ms-box;
+ display: -ms-flexbox;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
- -ms-box-orient: horizontal;
}
section div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
- -ms-box-flex: 1;
box-flex: 1;
}
section {
display: -webkit-box !important;
display: -moz-box !important;
- display: -ms-box !important;
+ display: -ms-flexbox !important;
display: box !important;
}
section {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
+ -ms-flex-direction: row;
flex-direction: row;
}
section div {
-webkit-flex: 1 0;
+ -ms-flex: 1 0;
flex: 1 0;
}
section {
View
10 test/cases/flex.styl
@@ -26,6 +26,13 @@ align-items
align-items flex-end
align-items center
+align-content
+ align-content flex-start
+ align-content flex-end
+ align-content center
+ align-content space-between
+ align-content space-around
+
flex
flex 0 auto
flex auto 0
@@ -36,6 +43,9 @@ flex
flex 0px 0 0
flex 1 2 0
+order
+ order 0
+
section
display: flex !important
View
2  test/server.js
@@ -36,4 +36,4 @@ server.use(function(req, res){
});
server.listen(3000);
-console.log('Server listening on port 3000');
+console.log('Server listening on port 3000');
Please sign in to comment.
Something went wrong with that request. Please try again.