bar style fixes

app/assets/javascripts/discourse/components/category-drop.js.es6

@@ -1,7 +1,12 @@
 var get = Ember.get;
 
 export default Ember.Component.extend({
-  classNameBindings: ['category::no-category', 'categories:has-drop'],
+  classNameBindings: ['category::no-category', 'categories:has-drop','categoryStyle'],
+
+  categoryStyle: function(){
+    return Discourse.SiteSettings.category_style;
+  }.property(),
+
   tagName: 'li',
 
   iconClass: function() {
@@ -45,7 +50,7 @@ export default Ember.Component.extend({
 
       if (color || textColor) {
         var style = "";
-        if (color) { style += "background-color: #" + color + "; "; }
+        if (color) { style += "background-color: #" + color + "; border-color: #" + color + ";"; }
         if (textColor) { style += "color: #" + textColor + "; "; }
         return style;
       }
@@ -84,24 +89,33 @@ export default Ember.Component.extend({
         self.close();
       });
 
-      $('html').on(this.get('clickEventName'), function(e) {
-        var $target = $(e.target),
-            closest = $target.closest($dropdown);
+      Em.run.next(function(){
+        self.$('.cat a').add('html').on(self.get('clickEventName'), function(e) {
+          var $target = $(e.target),
+              closest = $target.closest($dropdown);
 
-        return ($(e.currentTarget).hasClass('badge-category') || (closest.length && closest[0] === $dropdown)) ? true : self.close();
+          if ($(e.currentTarget).hasClass('badge-wrapper')){
+            self.close();
+          }
+
+          return ($(e.currentTarget).hasClass('badge-category') || (closest.length && closest[0] === $dropdown)) ? true : self.close();
+        });
       });
     }
   },
 
-  close: function() {
+  removeEvents: function(){
     $('html').off(this.get('clickEventName'));
     this.$('a[data-drop-close]').off('click.category-drop');
+  },
+
+  close: function() {
+    this.removeEvents();
     this.set('expanded', false);
   },
 
   willDestroyElement: function() {
-    $('html').off(this.get('clickEventName'));
-    this.$('a[data-drop-close]').off('click.category-drop');
+    this.removeEvents();
   }
 
 });

app/assets/javascripts/discourse/helpers/category-link.js.es6

@@ -51,7 +51,7 @@ export function categoryBadgeHTML(category, opts) {
 
   var name = escapeExpression(get(category, 'name'));
   if (restricted) {
-    html += "<span>" + iconHTML('lock') + " " + name + "</span>";
+    html += iconHTML('lock') + " " + name;
   } else {
     html += name;
   }

app/assets/stylesheets/common/base/_topic-list.scss

@@ -158,18 +158,17 @@
     color: $primary;
     margin-left: 8px;
   }
+
   .badge-category {
     padding: 4px 10px;
     display: inline-block;
     line-height: 24px;
-    float: left;
   }
 
   .category-dropdown-menu .badge-category {
     width: 100%;
   }
   .category-dropdown-button {
-    border-left: 1px solid rgba(0,0,0,0.15);
     font-size: 1.143em;
     width: 10px;
     text-align: center;
@@ -178,7 +177,7 @@
       opacity: 0.8;
     }
   }
-clear: both;
+  clear: both;
 }
 
 #list-area {

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

@@ -296,6 +296,7 @@
     float: left;
     background-color: transparent;
     line-height: 20px;
+    width: 45%;
     margin: 5px 5px 0 5px;
     .badge-notification {
       color: scale-color($primary, $lightness: 50%);

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

@@ -28,15 +28,29 @@
   white-space: nowrap;
   position: relative;
   display: inline-block;
-  overflow: hidden;
 }
 
 .badge-category {
-  padding: 0;
-  left: 3px;
-  top: 2px;
+  padding: 6px 4px;
   overflow: hidden;
   text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.badge-wrapper > .badge-category {
+  // ie9?
+  width: 100%;
+  width: calc(100% - 10px)
+}
+
+.d-header li.category .badge-wrapper {
+  max-width: calc(100% - 30px)
+}
+
+.title-wrapper .badge-category-bg {
+  vertical-align: top;
+  padding-top:0;
+  padding-bottom:0;
 }
 
 .badge-category-parent-bg, .badge-category-bg {
@@ -60,15 +74,28 @@
 
 h1 a.badge-category div {vertical-align: top;}
 
+.category-breadcrumb li > .badge-category {
+  float: left;
+}
+
 // specific styles for badge categories
 
-.badge-wrapper.bar {
+.bar {
   .badge-category {
     color: $primary !important;
   }
 }
 
 
+.category-breadcrumb li.bar > .badge-category {
+  background: dark-light-diff($primary, $secondary, 95%, -65%) !important;
+  &:not(.home):first-child {
+    border-left-width: 5px;
+    border-left-style: solid;
+  }
+}
+
+
 .badge-wrapper.box {
   .badge-category-bg {
     position: absolute;