From 82da251218a7e54244e990f128cd515cc240e350 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Wed, 11 Jan 2017 16:20:10 +0100
Subject: [PATCH] Add vendor prefixes

---
 src/styles/_layer.scss |  9 ++++++---
 src/styles/_modal.scss | 23 ++++++++++++++---------
 src/styles/index.scss  |  1 +
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index a1716196..e00dcb11 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -9,7 +9,8 @@
     font-size: $font-size-5;
     color: $color-lowgray;
     display: flex;
-    flex-direction: row;
+    display: -ms-flexbox;
+    @include vendor-prefix(flex-direction, row)
 
     > * {
       vertical-align: middle;
@@ -39,7 +40,8 @@
     background-color: $color-black;
     line-height: 1.3;
     display: flex;
-    flex-direction: row;
+    display: -ms-flexbox;
+    @include vendor-prefix(flex-direction, row)
   }
 
   &-icon-action svg {
@@ -80,7 +82,8 @@
   user-select: none;
   padding: $margin-2;
   display: flex;
-  flex-direction: row;
+  display: -ms-flexbox;
+  @include vendor-prefix(flex-direction, row)
   line-height: 20px;
 
   &:hover {
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 2d006ad1..cf436e3a 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -13,7 +13,8 @@
 .maputnik-modal-header {
   background-color: $color-gray;
   display: flex;
-  flex-direction: row;
+  display: -ms-flexbox;
+  @include vendor-prefix(flex-direction, row)
   padding: $margin-3;
 }
 .maputnik-modal-header-title {
@@ -50,8 +51,9 @@
     bottom: 0px;
     left: 0px;
     position: fixed;
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: column;
+    @include vendor-prefix(flex-direction, column)
     align-items: center;
     justify-content: center;
 }
@@ -81,7 +83,8 @@
 }
 .maputnik-public-style-header {
 	display: flex;
-	flex-direction: row;
+  display: -ms-flexbox;
+  @include vendor-prefix(flex-direction, row)
 }
 
 .maputnik-public-style-thumbnail {
@@ -119,7 +122,8 @@
 	font-size: $font-size-5;
 	color: $color-lowgray;
 	display: flex;
-	flex-direction: row;
+  display: -ms-flexbox;
+  @include vendor-prefix(flex-direction, row)
   background-color: transparent;
 }
 
@@ -135,11 +139,12 @@
   min-width: 500px;
 }
 .maputnik-active-source-type-editor-header {
-    background-color: $color-gray;
-    color: $color-lowgray;
-    padding: $margin-2;
-    display: flex;
-    flex-direction: row;
+  background-color: $color-gray;
+  color: $color-lowgray;
+  padding: $margin-2;
+  display: flex;
+  display: -ms-flexbox;
+  @include vendor-prefix(flex-direction, row)
 }
 .maputnik-active-source-type-editor-header-id {
   font-weight: 700;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a3449131..5be0e7a6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -19,6 +19,7 @@ $font-family: Roboto, sans-serif;
 
 $toolbar-height: 40px;
 
+@import 'mixins';
 @import 'reset';
 @import 'base';