styles: Inline obsolete flexbox mixins

These CSS property are supported by all of our target browsers by now

see https://caniuse.com/#feat=flexbox

Author: Turbo87

app/styles/_helpers.scss

@@ -23,44 +23,3 @@
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
 }
-
-@mixin display-flex {
-    display: -ms-flexbox;      /* TWEENER - IE 10 */
-    display: -webkit-flex;     /* NEW - Chrome */
-    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-}
-
-@mixin flex-direction($which) {
-    -webkit-flex-direction: $which;
-    flex-direction: $which;
-}
-
-@mixin justify-content($how) {
-    -webkit-justify-content: $how;
-    justify-content: $how;
-}
-
-@mixin flex-grow($amt) {
-    -webkit-flex-grow: $amt;
-    flex-grow: $amt;
-}
-
-@mixin align-items($how) {
-    -webkit-align-items: $how;
-    align-items: $how;
-}
-
-@mixin align-self($how) {
-    -webkit-align-self: $how;
-    align-self: $how;
-}
-
-@mixin flex-wrap($how) {
-    -webkit-flex-wrap: $how;
-    flex-wrap: $how;
-}
-
-@mixin flex($stuff) {
-    -webkit-flex: $stuff;
-    flex: $stuff;
-}

app/styles/app.scss

@@ -27,9 +27,9 @@ html, body { margin: 0; }
 body {
   font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
   font-size: 16px;
-  @include display-flex;
-  @include flex-direction(column);
-  @include align-items(center);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 /* .ember-application is added by Ember after initial rendering */
@@ -42,8 +42,8 @@ body > div {
 }
 
 #main {
-  @include display-flex;
-  @include flex-direction(column);
+  display: flex;
+  flex-direction: column;
 
   margin-bottom: 10px;
   background-color: $main-bg;
@@ -58,9 +58,9 @@ body > div {
     color: white;
     position: relative;
     height: 100px;
-    @include display-flex;
-    @include align-items(center);
-    @include justify-content(space-between);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     a {
         color: white; text-decoration: none;
@@ -74,7 +74,7 @@ body > div {
     }
 
     .menu {
-        @include flex-grow(2);
+        flex-grow: 2;
         display: none;
     }
     .menu ul.dropdown {
@@ -108,8 +108,8 @@ body > div {
         min-width: 150px;
     }
     form.search {
-        @include display-flex;
-        @include flex-grow(1);
+        display: flex;
+        flex-grow: 1;
     }
     @media only screen and (max-width: 820px) {
         form.search { display: none; }
@@ -235,8 +235,8 @@ a {
     @media only screen and (max-width: 450px) {
         margin: 20px;
         .sep { display: none; }
-        @include display-flex;
-        @include flex-direction(column);
+        display: flex;
+        flex-direction: column;
 
         a {
             width: 50%;