From a9cc12455ca64f57a1e3403559321aebe4161e00 Mon Sep 17 00:00:00 2001
From: Carl Eberhard <carlfeberhard@gmail.com>
Date: Tue, 24 Jun 2014 16:11:57 -0400
Subject: [PATCH] Style fix: use MS/IE specific syntax for flexbox to correct
 layout of paired-collection-creator in IE10 (Note: IE9 has no flexbox and
 this interface can't be used with it)

---
 static/style/blue/base.css                         | 14 +++++++-------
 .../src/less/ui/paired-collection-creator.less     | 10 ++++++++++
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/static/style/blue/base.css b/static/style/blue/base.css
index 0bde462f8e4..fa12285831d 100644
--- a/static/style/blue/base.css
+++ b/static/style/blue/base.css
@@ -1367,13 +1367,13 @@ button.toast-close-button{padding:0;cursor:pointer;background:transparent;border
 .collection-creator .scroll-container{overflow:auto}
 .collection-creator .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .collection-creator .empty-message{color:grey;font-style:italic}
-.collection-creator.flex-row-container,.collection-creator .flex-row-container,.collection-creator .flex-column-container{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:stretch;align-items:stretch;-webkit-align-content:stretch;align-content:stretch}
-.collection-creator.flex-row-container,.collection-creator .flex-row-container{-webkit-flex-direction:column;flex-direction:column}
-.collection-creator .flex-row{-webkit-flex:1 auto;flex:1 0 auto}
-.collection-creator .flex-row.no-flex{-webkit-flex:0 auto;flex:0 0 auto}
-.collection-creator .flex-column-container{-webkit-flex-direction:row;flex-direction:row}
-.collection-creator .flex-column{-webkit-flex:1 auto;flex:1 1 auto}
-.collection-creator .flex-column.no-flex{-webkit-flex:0 auto;flex:0 0 auto}
+.collection-creator.flex-row-container,.collection-creator .flex-row-container,.collection-creator .flex-column-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-ms-align-items:stretch;align-items:stretch;-webkit-align-content:stretch;-ms-align-content:stretch;align-content:stretch}
+.collection-creator.flex-row-container,.collection-creator .flex-row-container{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
+.collection-creator .flex-row{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 0 auto}
+.collection-creator .flex-row.no-flex{-webkit-flex:0 auto;-ms-flex:0 auto;flex:0 0 auto}
+.collection-creator .flex-column-container{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}
+.collection-creator .flex-column{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 1 auto}
+.collection-creator .flex-column.no-flex{-webkit-flex:0 auto;-ms-flex:0 auto;flex:0 0 auto}
 .collection-creator .choose-filters .help{margin-bottom:2px;font-size:90%;color:grey}
 .collection-creator .choose-filters button{width:100%;margin-top:2px}
 .collection-creator .header .alert{display:none}
diff --git a/static/style/src/less/ui/paired-collection-creator.less b/static/style/src/less/ui/paired-collection-creator.less
index 7558be9c0ec..95d17d2a317 100644
--- a/static/style/src/less/ui/paired-collection-creator.less
+++ b/static/style/src/less/ui/paired-collection-creator.less
@@ -44,11 +44,15 @@
     .flex-column-container {
         display: -webkit-box;
         display: -webkit-flex;
+        display: -ms-flexbox;
         display: flex;
 
         -webkit-align-items: stretch;
+        -ms-align-items: stretch;
         align-items: stretch;
+
         -webkit-align-content: stretch;
+        -ms-align-content: stretch;
         align-content: stretch;
     }
 
@@ -56,28 +60,34 @@
     &.flex-row-container,
     .flex-row-container {
         -webkit-flex-direction: column;
+        -ms-flex-direction: column;
         flex-direction: column;
     }
     .flex-row {
         -webkit-flex: 1 auto;
+        -ms-flex: 1 auto;
         flex: 1 0 auto;
     }
     .flex-row.no-flex {
         -webkit-flex: 0 auto;
+        -ms-flex: 0 auto;
         flex: 0 0 auto;
     }
 
     // a series of horizontal elements that will expand to fill available space
     .flex-column-container {
         -webkit-flex-direction: row;
+        -ms-flex-direction: row;
         flex-direction: row;
     }
     .flex-column {
         -webkit-flex: 1 auto;
+        -ms-flex: 1 auto;
         flex: 1 1 auto;
     }
     .flex-column.no-flex {
         -webkit-flex: 0 auto;
+        -ms-flex: 0 auto;
         flex: 0 0 auto;
     }