flexbox for the post header

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

@@ -6,6 +6,14 @@
     background-color: $header_background;
     box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
 
+    .ember-view {
+      min-width: 0; //flexbox fix
+    }
+
+    .title {
+      @include flex(0,0,auto);
+    }
+
     .docked & {
       position: fixed;
       backface-visibility: hidden;  /** do magic for scrolling performance **/
@@ -13,6 +21,8 @@
 
     .contents {
       margin: 8px 0;
+      @include flexbox();
+      @include align-items(center);
     }
 
     .title {
@@ -34,8 +44,10 @@
     }
 
     .panel {
-      float: right;
       position: relative;
+      margin-left: auto;
+      min-width: 125px;
+      @include order(3)
     }
 
     .login-button, button.sign-up-button {

app/assets/stylesheets/common/base/menu-panel.scss

@@ -268,6 +268,3 @@ div.menu-links-header {
     margin-right: 0.2em;
   }
 }
-
-
-

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

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

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

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

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

@@ -113,3 +113,57 @@
 	-webkit-transform: $transforms;
           transform: $transforms;
 }
+
+// ---------------------------------------------------
+
+//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;
+}
+
+@mixin flex($fg: 1, $fs: null, $fb: null) {
+
+	$fg-boxflex: $fg;
+
+	// Box-Flex only supports a flex-grow value
+	@if type-of($fg) == 'list' {
+		$fg-boxflex: nth($fg, 1);
+	}
+
+	-webkit-box-flex: $fg-boxflex;
+	-webkit-flex: $fg $fs $fb;
+	-moz-box-flex: $fg-boxflex;
+	-moz-flex: $fg $fs $fb;
+	-ms-flex: $fg $fs $fb;
+	flex: $fg $fs $fb;
+}