adding flexbox to header via mixins (all prefixes)

app/assets/stylesheets/common/base/header.scss

@@ -13,10 +13,9 @@
 
     .contents {
       margin: 8px 0;
-    }
 
-    .title {
-      float: left;
+      @include flexbox();
+      @include align-items(center);
     }
 
     .valign-helper {
@@ -34,8 +33,10 @@
     }
 
     .panel {
-      float: right;
       position: relative;
+      margin-left: auto;
+
+      @include order(3);
     }
 
     .login-button, button.sign-up-button {

app/assets/stylesheets/common/base/topic-post.scss

@@ -261,6 +261,9 @@ table.md-table {
 }
 
 .small-action {
+  @include flexbox();
+  @include align-items(center);
+
   .topic-avatar {
     padding: 5px 0;
     border-top: none;
@@ -274,8 +277,7 @@ table.md-table {
   }
 
   .small-action-desc {
-    padding: 0.5em 0 0.5em 4em;
-    margin-top: 5px;
+    padding: 0 1.5%;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 0.9em;
@@ -287,7 +289,7 @@ table.md-table {
       font-weight: normal;
       font-size: 14px;
       p {
-        margin: 5px 0;
+        margin: 0;
       }
     }
 
@@ -298,7 +300,6 @@ table.md-table {
 
     > p {
       margin: 0;
-      padding-top: 4px;
     }
   }
 

app/assets/stylesheets/common/base/topic.scss

@@ -27,11 +27,11 @@
 }
 
 .extra-info-wrapper {
+  @include order(2);
+
+  line-height: 1.5;
   .badge-wrapper {
     float: left;
-    &.bullet {
-      margin-top: 5px;
-    }
   }
 
 }

app/assets/stylesheets/common/components/badges.css.scss

@@ -52,8 +52,10 @@
 
 
   &.bullet { //bullet category style
-    display: inline-flex;
-    align-items: baseline;
+    @include inline-flex();
+
+    @include align-items(baseline);
+
     margin-right: 10px;
 
     span.badge-category {

app/assets/stylesheets/common/foundation/mixins.scss

@@ -92,3 +92,40 @@
      -moz-user-select: none;
       -ms-user-select: none;
 }
+
+// ---------------------------------------------------
+
+//Flexbox
+
+@mixin flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin inline-flex() {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -moz-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+
+@mixin align-items($alignment) {
+    -webkit-box-align: $alignment;
+    -webkit-align-items: $alignment;
+    -ms-flex-align: $alignment;  
+    -ms-align-items: $alignment;
+    align-items:$alignment;
+}
+
+@mixin order($val) {
+  -webkit-box-ordinal-group: $val;
+  -moz-box-ordinal-group: $val;
+  -ms-flex-order: $val;
+  -webkit-order: $val;
+  order: $val;
+}