Add flexbox mixins to mediawiki.mixins

Includes some fallback support for 2009 (old firefox and some mobile
browsers) and 2012 (IE10) specs.

Change-Id: I0c6fca82b778a28930bf83fd43a3059858fe9243

diff --git a/RELEASE-NOTES-1.27 b/RELEASE-NOTES-1.27
index 442e70d..6019a81 100644 (file)
--- a/RELEASE-NOTES-1.27
+++ b/RELEASE-NOTES-1.27
@@ -45,7 +45,7 @@ production.
    creation of passwordless "system" users for logged actions.
 * $wgMaxSquidPurgeTitles was removed.
 * $wgAjaxWatch was removed. This is now enabled by default.
-* $wgUseInstantCommons now hotlinks Commons images by default instead of 
+* $wgUseInstantCommons now hotlinks Commons images by default instead of
   downloading originals and thumbnailing them locally. This allows wikis to save
   on CPU and bandwidth while reducing time to first byte for pages, even without
   a thumbnail handler. See $wgForeignFileRepos documentation for tweaks.
@@ -73,6 +73,10 @@ production.
   by using ApiMessage instances instead of strings for the $result value.
 * $wgAPIMaxLagThreshold was added to limit bot changes when databases lag
   becomes too high.
+* Skins and extensions can now use FlexBox mixins (.flex-display(@display: flex)
+  and .flex(@grow: 1, @shrink: 1, @width: auto, @order: 1)) in Less to create
+  cross-browser-compatible FlexBox rules. Users will still need to add fallback
+  float rules or the like for compatibility with IE9- separately.
 
 ==== External libraries ====
 

diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index 79549c3..43bd21a 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -80,9 +80,9 @@
 }
 
 .column-width(@value) {
-       -webkit-column-width: @value;// Chrome Any, Safari 3+, Opera 11.1+
-       -moz-column-width: @value;// Firefox 1.5+
-       column-width: @value;// IE 10+
+       -webkit-column-width: @value; // Chrome Any, Safari 3+, Opera 11.1+
+       -moz-column-width: @value; // Firefox 1.5+
+       column-width: @value; // IE 10+
 }
 
 .column-break-inside-avoid() {
@@ -90,3 +90,32 @@
        page-break-inside: avoid; // Firefox 1.5+
        break-inside: avoid-column; // IE 10+
 }
+
+.flex-display(@display: flex) {
+       display: ~"-webkit-@{display}"; // iOS 6-, Safari 3.1-6
+       display: ~"-moz-@{display}"; // Firefox 21-
+       display: ~"-ms-@{display}box"; // IE 10
+       display: @display;
+}
+
+.flex(@grow: 1, @shrink: 1, @width: auto, @order: 1) {
+       // For 2009/2012 spec alignment consistency with current default
+       -webkit-box-pack: justify; // iOS 6-, Safari 3.1-6
+       -moz-box-pack: justify; // Firefox 21-
+       -ms-flex-pack: justify; // IE10 (2012 spec)
+       justify-content: space-between; // Current default
+
+       // 2009 spec only supports 'flexible' as opposed to grow (flexPositive)
+       // and shrink (flexNegative); default to grow value
+       -webkit-box-flex: @grow; // iOS 6-, Safari 3.1-6
+       -moz-box-flex: @grow; // Firefox 21-
+       width: @width; // Fallback for flex-basis
+
+       -ms-flex: @grow @shrink @width; // IE10
+       flex: @grow @shrink @width;
+
+       -webkit-box-ordinal-group: @order; // iOS 6-, Safari 3.1-6
+       -moz-box-ordinal-group: @order; // Firefox 21-
+       -ms-flex-order: @order; // IE10
+       order: @order;
+}