Merge pull request TryGhost#4441 from PaulAdamDavis/cleanup-sass-comp…

…onents Refactor component styles
hilln · Nov 14, 2014 · 1cdafae · 1cdafae
2 parents 6e6c2d9 + f8282ad
commit 1cdafae
Show file tree

Hide file tree

Showing 14 changed files with 604 additions and 504 deletions.
diff --git a/core/client/assets/sass/components/badges.scss b/core/client/assets/sass/components/badges.scss
@@ -1,83 +1,98 @@
-//
+// ------------------------------------------------------------
 // Badges
-// --------------------------------------------------
+//
+// Badges are numbers that sit inside buttons or text, for
+// things like an unread count.
+//
+// * Base Class
+// * Hover state, but only for links
+// * Colours
+// ------------------------------------------------------------
+
 
+//
+// Base Class
+// --------------------------------------------------
 
-// Base class
 .badge {
-  display: inline-block;
-  min-width: 10px;
-  padding: 2px 4px;
-  box-shadow: 0 0 0 1px #777; // Fix due to our smaller than default button sizes
-  font-size: 1rem;
-  font-weight: inherit;
-  color: #FFF;
-  line-height: 1;
-  vertical-align: baseline;
-  white-space: nowrap;
-  text-align: center;
-  background-color: #777;
-  border-radius: 10px;
-
-  // Empty badges collapse automatically (not available in IE8)
-  &:empty {
-    display: none;
-  }
-
-  // Quick fix for badges in buttons
-  .btn & {
-    position: relative;
-    top: -1px;
-  }
-  .btn-xs & {
-    top: 0;
-    padding: 1px 5px;
-  }
-
-  // Account for badges in text tags
-  p & {
-    padding: 0px 4px 3px;
-    position: relative;
-    top: -2px;
-    margin-left: -1px;
-  }
-
-  // Account for badges in navs
-  a.list-group-item.active > &,
-  .nav-pills > .active > a > & {
-    color: #428BCA;
-    background-color: #FFF;
-    box-shadow: 0 0 0 1px #FFF;
-  }
-  .nav-pills > li > a > & {
-    margin-left: 3px;
-  }
-  .nav-item & {
-    margin-top: -5px;
-    margin-left: 3px;
-  }
-}
+    display: inline-block;
+    min-width: 10px;
+    padding: 2px 4px;
+    box-shadow: 0 0 0 1px #777; // Fix due to our smaller than default button sizes
+    font-size: 1rem;
+    font-weight: inherit;
+    color: #FFF;
+    line-height: 1;
+    vertical-align: baseline;
+    white-space: nowrap;
+    text-align: center;
+    background-color: #777;
+    border-radius: 10px;
+
+    // Empty badges collapse automatically (not available in IE8)
+    &:empty {
+        display: none;
+    }
+
+    // Quick fix for badges in buttons
+    .btn & {
+        position: relative;
+        top: -1px;
+    }
+
+    .btn-xs & {
+        top: 0;
+        padding: 1px 5px;
+    }
+
+    // Account for badges in text tags
+    p & {
+        padding: 0px 4px 3px;
+        position: relative;
+        top: -2px;
+        margin-left: -1px;
+    }
 
+    // Account for badges in navs
+    .nav-pills > li > a > & {
+        margin-left: 3px;
+    }
+
+    .nav-item & {
+        margin-top: -5px;
+        margin-left: 3px;
+    }
+}//.badge
+
+
+//
 // Hover state, but only for links
+// --------------------------------------------------
+
 a.badge {
-  &:hover,
-  &:focus {
-    color: #fff;
-    text-decoration: none;
-    cursor: pointer;
-  }
+    &:hover,
+    &:focus {
+        color: #fff;
+        text-decoration: none;
+        cursor: pointer;
+    }
 }
 
+//
 // Colours
+// --------------------------------------------------
+
 .badge.badge-blue {
-  background-color: $blue;
-  box-shadow: 0 0 0 1px $blue;
+    background-color: $blue;
+    box-shadow: 0 0 0 1px $blue;
 }
+
 .badge.badge-green {
-  background-color: $green;
-  box-shadow: 0 0 0 1px $green;
+    background-color: $green;
+    box-shadow: 0 0 0 1px $green;
 }
+
 .badge.badge-red {
-  background-color: $red;
-  box-shadow: 0 0 0 1px $red;
+    background-color: $red;
+    box-shadow: 0 0 0 1px $red;
 }