Add flexbox mixins (2factorauth#2254)

dmmulroy · Dec 15, 2016 · 047544a · 047544a
1 parent bb4d76a
commit 047544a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
@@ -11,3 +11,14 @@
   -moz-box-sizing: $type;
   box-sizing: $type;
 }
+
+@mixin display-flex() {
+  display: flex;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+}
+
+@mixin flex-direction($direction) {
+  flex-direction: $direction;
+  -ms-flex-direction: $direction;
+}
diff --git a/css/base.scss b/css/base.scss
@@ -185,11 +185,8 @@ input[type=search] {
 
     .main {
       .title {
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-        -ms-flex-direction: row;
-        flex-direction: row;
+        @include display-flex();
+        @include flex-direction(row);
         -ms-flex-align: center;
         align-items: center;
 
@@ -202,11 +199,8 @@ input[type=search] {
       }
 
       .button-group {
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-        -ms-flex-direction: row;
-        flex-direction: row;
+        @include display-flex();
+        @include flex-direction(row);
         justify-content: space-between;
       }
     }
@@ -233,11 +227,8 @@ input[type=search] {
     line-height: 2em;
 
     .title {
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      -ms-flex-direction: row;
-      flex-direction: row;
+      @include display-flex();
+      @include flex-direction(row);
       -ms-flex-align: center;
       align-items: center;
 
@@ -252,9 +243,7 @@ input[type=search] {
     }
 
     .progress-info {
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
+      @include display-flex();
       -webkit-justify-content: center;
       justify-content: center;