From 2ee201b67f6f606b4e4936233859401e878d1e56 Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <shout@k-ris.com>
Date: Wed, 4 Mar 2015 22:15:21 -0500
Subject: [PATCH] rebuilding the category badge css

---
 .../stylesheets/common/base/_topic-list.scss  |  26 --
 .../stylesheets/common/base/combobox.scss     |   1 -
 .../stylesheets/common/base/header.scss       |   9 +-
 .../stylesheets/common/base/user-badges.scss  |   3 +-
 .../common/components/badges.css.scss         | 248 ++++++++----------
 app/assets/stylesheets/desktop/discourse.scss |   1 -
 app/assets/stylesheets/desktop/header.scss    |   4 -
 .../stylesheets/desktop/topic-list.scss       |  19 +-
 .../stylesheets/desktop/topic-post.scss       |  16 --
 app/assets/stylesheets/desktop/topic.scss     |   1 -
 app/assets/stylesheets/mobile/topic-list.scss |   1 -
 11 files changed, 116 insertions(+), 213 deletions(-)

diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index b86750dbdaa..e9b1645da41 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -99,10 +99,6 @@
     }
   }
 
-  td.category a {
-    max-width:150px;
-  }
-
 }
 
 
@@ -156,24 +152,6 @@
     margin-left: 8px;
   }
 
-  .badge-category {
-    padding: 4px 10px;
-    display: inline-block;
-    margin-bottom: 10px;
-  }
-
-  .category-dropdown-menu .badge-category {
-    width: 100%;
-  }
-  .category-dropdown-button {
-    font-size: 1.143em;
-    width: 10px;
-    text-align: center;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
   clear: both;
 }
 
@@ -223,10 +201,6 @@ ol.category-breadcrumb {
   background-color: $secondary;
   z-index: 100;
 
-  .cat {
-    margin-right: 20px;
-  }
-
   a.badge-category, a.badge-category-parent {
     line-height: 19px;
     overflow:hidden;
diff --git a/app/assets/stylesheets/common/base/combobox.scss b/app/assets/stylesheets/common/base/combobox.scss
index 5c743b34e07..82c982ffbe2 100644
--- a/app/assets/stylesheets/common/base/combobox.scss
+++ b/app/assets/stylesheets/common/base/combobox.scss
@@ -13,7 +13,6 @@
   }
   .category-desc {
     color: $primary;
-    margin: 6px 0 0 3px;
     font-size: 0.857em;
     line-height: 16px;
   }
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 8549fabc482..c5bbac496ba 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -233,11 +233,6 @@
     @include unselectable;
   }
 
-  .category-links li:not(.heading) a {
-    display: inline-block;
-  }
-
-
   // Site map
 
   &#site-map-dropdown {
@@ -296,12 +291,14 @@
   .category {
     float: left;
     background-color: transparent;
-    line-height: 20px;
+    line-height: 1.25;
     width: 45%;
     margin: 5px 5px 0 5px;
     .badge-notification {
       color: scale-color($primary, $lightness: 50%);
       background-color: transparent;
+      vertical-align: top;
+      padding: 5px 5px 2px 5px;
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 3c8405def39..0ce5a3b128a 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -3,7 +3,6 @@
   padding: 3px 8px;
   color: $primary;
   border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
-  font-size: $base-font-size * 0.86;
   line-height: 19px;
   margin: 0;
   display: inline-block;
@@ -144,7 +143,7 @@ table.badges-listing {
   width: 45%;
   padding: 0 0 0 4%;
   margin-bottom: 20px;
-  
+
   .badge-info {
     width: 100px;
     display: block;
diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index 8506cb89171..6d604b3f6fc 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/app/assets/stylesheets/common/components/badges.css.scss
@@ -12,164 +12,138 @@
   @include border-radius-all(10px);
 }
 
-// Category badge
+// Category badges
 // --------------------------------------------------
 
-.badge-wrapper span {
+.badge-wrapper {
   font-size: 0.857em;
   font-weight: bold;
   white-space: nowrap;
   display: inline-block;
-  line-height: 1;
   position: relative;
-}
 
-.badge-wrapper {
-  white-space: nowrap;
-  position: relative;
-  display: inline-block;
-}
-
-.badge-category {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: top;
-  .fa {
-    line-height: 0;
-  }
-}
-
-.badge-wrapper > .badge-category {
-  // ie9?
-  width: 100%;
-  padding: 5px 4px;
-}
-
-.d-header li.category .badge-wrapper {
-  max-width: calc(100% - 30px)
-}
-
-h3 .badge-category {
-  padding-left: 3px;
-}
-
-h3 .badge-wrapper {
-  padding-left: 4px;
-}
-
-
-header .title-wrapper {
-
-  .badge-category-bg, .badge-category {
-    vertical-align: middle;
-  }
-
-  .badge-category-bg {
-    padding-top:0;
-    padding-bottom:0;
-  }
-}
-
-.badge-category-parent-bg, .badge-category-bg {
-  padding: 5px 2px 4px 2px;
-  width: 2px;
-  .category-name {
-    display: none;
-  }
-  &:before {
-    content: "\a0";
-  }
-}
-
-.d-dropdown .badge-category {
-&.restricted {
-    span {
-      display: inline-block;
-      margin: 0;
-    }
-}}
-
-h1 a.badge-category div {vertical-align: top;}
-
-.category-breadcrumb li > .badge-category {
-  float: left;
-  &:not(.home):first-child {
-    .badge-category-bg {
-      display: none;
-    }
-  }
-}
-
-
-.user-preferences .autocomplete .badge-wrapper .badge-category {
-  margin: 2px;
-  font-weight: normal;
-}
-
-.user-preferences .autocomplete .selected .badge-wrapper .badge-category {
-  font-weight: bold;
-}
-
-.ac-wrap {
-  .badge-wrapper span {
-    padding-top: 3px;
-    padding-bottom: 0;
-    height: 20px;
-    max-width: 200px;
-  }
-}
-
-// specific styles for badge categories
-
-.bar .badge-category {
+  &.bar { //general bar category style
+    line-height: 1.25;
+    span.badge-category {
     color: $primary !important;
-}
+    padding: 3px;
+    vertical-align: text-top;
+    margin-top: -3px; //vertical alignment fix
 
-header .title-wrapper .bar .badge-category {
-    color: $header-primary !important;
-}
+   }
 
+   .badge-category-parent-bg, .badge-category-bg {
+     display: inline-block;
+     padding: 1px;
 
-.category-breadcrumb li.bar > .badge-category {
-  background: dark-light-diff($primary, $secondary, 95%, -65%) !important;
-  line-height: 24px;
-  &:not(.home):first-child {
-    border-left-width: 5px;
-    border-left-style: solid;
-  }
-}
+     &:before {
+       content: "\a0";
+     }
+   }
 
-.category-breadcrumb .box > a.badge-category {
-  margin-bottom: 0;
-  height: 24px;
-  // TODO clean this up
-  padding-top: 6px !important;
-  padding-bottom: 0 !important;
-}
-
-.category-dropdown-menu .cat .badge-wrapper.box {
-  width: 110%;
-}
-.badge-wrapper.box {
-  .badge-category-bg {
-    position: absolute;
-    padding: 0;
-    width: 100%;
-    height: 100%;
   }
 
-  > .badge-category {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 5px 6px 4px 6px;
+  &.box {  //general box category style
+    margin: 5px 2px 0 0;
+    line-height: 1.25;
+    i {line-height: 0;}
+    .badge-category-bg, .badge-category-parent-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: -3px;
+    }
+    .badge-category-parent-bg + .badge-category-bg { //nesting box categories
+      margin-left: 5px;
+      }
+    .badge-category-parent-bg + .badge-category-bg + .badge-category {
+      margin-left: 5px;
+      padding-right: 0;
+      }
+    span.badge-category {
+      position: relative;
+      padding: 0 5px;
+    }
   }
+  span.badge-category {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+
+  .d-dropdown & {
+    max-width: 100px;
+
+  }
+
+  }
+
 }
 
-.title-wrapper .badge-wrapper.box .badge-category {
-  vertical-align: middle;
+// Category badge dropdown
+// --------------------------------------------------
+
+
+.list-controls {
+.category-breadcrumb {
+  a.badge-category {
+      display: inline-block;
+      padding: 5px 12px;
+      line-height: 20px;
+    &.category-dropdown-button {
+      margin-left: -4px;
+      padding: 5px 0 5px 0;
+      width: 13px;
+      .fa-caret-down {
+        margin-left: -5px;
+        }
+      .fa-caret-right {
+        margin-left: -2px;
+        }
+      }
+    }
+    li.bar>.badge-category:not(.home):first-child {
+      border-left: 5px solid;
+    }
+    li.bar>.badge-category {
+      background: dark-light-diff($primary, $secondary, 95%, -65%) !important;
+      color: $primary !important;}
+  }
+
+  .category-dropdown-menu {
+    .badge-category {
+      &.home {
+        margin-left: 4px;
+        padding-left: 0;
+      }
+    }
+    .cat {
+        line-height: 0;
+      }
+    .badge-wrapper {
+      &.bar {
+        margin: 5px 0;
+
+      }
+      &.box {
+        width: 100%;
+        line-height: 0;
+        margin: 0;
+        span.badge-category {
+          padding: 15px 5px;
+          margin-top: -5px;
+        }
+      }
+
+    }
+
+  }
+
 }
 
 
+
+
 // Notification badge
 // --------------------------------------------------
 
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 6b96e29599b..97231859588 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -90,7 +90,6 @@ body {
 
 .topic-statuses {
   float: left;
-  margin: 0 3px 0 0;
   padding: 0;
   .topic-status {
     padding: 0 2px 0 0;
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 7d2a411f4e3..b5c775d4c8a 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -40,10 +40,6 @@ and (max-width : 570px) {
 
   // Categories
 
-  .category {
-    line-height: 20px;
-  }
-
   .btn {
     padding: 2px 8px;
     margin-bottom: 2px;
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 089863a1c66..130264e2244 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -22,13 +22,6 @@
   a.badge-category {
     padding: 3px 12px;
     font-size: 1.143em;
-
-    &.category-dropdown-button {
-      height: 24px;
-      padding: 3px 9px 3px 0;
-      i { height: 20px; }
-    }
-
   }
 
 }
@@ -95,10 +88,6 @@
     }
   }
 
-  .category {
-    padding: 0 20px 0 20px;
-    min-width: 80px;
-  }
   .posters {
     // we know there are up to 5 avatars of fixed size
     // will be overridden by media width queries on narrow displays to 1 avatar's width
@@ -250,11 +239,6 @@
       top: -1px;
     }
   }
-
-  .category .badge-category {
-    display: inline-block;
-    margin-top: 1px;
-  }
 }
 
 .topic-list-bottom {
@@ -274,8 +258,7 @@
 
 .category-dropdown-menu {
   max-height: 350px;
-  margin-top: 30px;
-  min-width: 152px;
+  min-width: 129px;
 }
 
 #bulk-select {
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 6451a4e9b2d..230e28b1490 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -558,22 +558,6 @@ video {
   .topic-statuses {
     margin-top: -2px;
   }
-
-  .badge-wrapper {
-    margin: 0 0 0 2px;
-    padding: 0;
-
-    .badge-category {
-      color: $header_primary;
-      margin-right: 5px;
-    }
-
-    .badge-category-parent {
-      margin: 0;
-      padding: 0px 1px;
-    }
-  }
-
 }
 
 /* override docked header CSS for topics with categories */
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index e17e9fa2e3f..06ac6b7f919 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -41,7 +41,6 @@
     line-height: 1.2em;
     overflow: hidden;
     a {color: $primary;}
-    margin-bottom: 5px;
   }
 
 
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 22ea3fc3b73..e924161bf4b 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -263,7 +263,6 @@ ol.category-breadcrumb {
 
 .category-dropdown-menu {
   height: 200px;
-  margin-top: 31px;
 
   a.badge-category {
     line-height: 26px !important;