From 4a594e9b86c0c8f7352425aa5563dd7d8cf26c10 Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Tue, 27 Oct 2015 02:54:45 +0000
Subject: [PATCH] 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
---
 RELEASE-NOTES-1.27                            |  6 +++-
 .../src/mediawiki.less/mediawiki.mixins.less  | 35 +++++++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/RELEASE-NOTES-1.27 b/RELEASE-NOTES-1.27
index 442e70d624..6019a8149f 100644
--- 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 79549c33d5..43bd21aad3 100644
--- 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;
+}
-- 
2.20.1