Merge pull request #470 from StackExchange/bkelly/badge-mini

Let badge__mini be used with any coloration
StackExchange · Apr 4, 2020 · c8f4c7e · c8f4c7e
2 parents 32c0fe5 + d280a39
commit c8f4c7e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/docs/_data/badges.json b/docs/_data/badges.json
@@ -83,17 +83,17 @@
     "description": "Badge which notes reputation points taken away."
   },
   {
-    "name": "Mini Number Count",
-    "class": "s-badge__mini",
-    "html": "s-badge s-badge__mini",
-    "label": "99+",
-    "description": "Badge which notes activity."
-  },
-  {
-    "name": "Mini Number Count, Important",
+    "name": "Number Count, Important",
     "class": "s-badge__important",
     "html": "s-badge s-badge__mini s-badge__important",
     "label": "99+",
     "description": "Badge which notes important activity."
+  },
+  {
+    "name": "Badge, Small",
+    "class": "s-badge__sm",
+    "html": "s-badge s-badge__sm",
+    "label": "99+",
+    "description": "Decreases the badge size."
   }
 ]
diff --git a/docs/product/components/badges.html b/docs/product/components/badges.html
@@ -102,8 +102,7 @@
 <span class="s-badge s-badge__answered">154</span>
 <span class="s-badge s-badge__rep">+15</span>
 <span class="s-badge s-badge__rep-down">-2</span>
-<span class="s-badge s-badge__mini">99+</span>
-<span class="s-badge s-badge__mini s-badge__important">99+</span>
+<span class="s-badge s-badge__important">99+</span>
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="grid gs4 fw-wrap">
@@ -112,8 +111,24 @@
                 <span class="grid--cell s-badge s-badge__answered">154</span>
                 <span class="grid--cell s-badge s-badge__rep">+15</span>
                 <span class="grid--cell s-badge s-badge__rep-down">-2</span>
-                <span class="grid--cell s-badge s-badge__mini">99+</span>
-                <span class="grid--cell s-badge s-badge__mini s-badge__important">99+</span>
+                <span class="grid--cell s-badge s-badge__important">99+</span>
+            </div>
+        </div>
+    </div>
+</section>
+
+    {% header "h3", "Badge sizes" %}
+    <div class="stacks-preview">
+{% highlight html %}
+<span class="s-badge">Regular</span>
+<span class="s-badge s-badge__sm">Small</span>
+<span class="s-badge s-badge__sm s-badge__gold">Small gold</span>
+{% endhighlight %}
+        <div class="stacks-preview--example">
+            <div class="grid gs4 fw-wrap">
+                <span class="grid--cell s-badge">Regular</span>
+                <span class="grid--cell s-badge s-badge__sm">Small</span>
+                <span class="grid--cell s-badge s-badge__sm s-badge__gold">Small gold</span>
             </div>
         </div>
     </div>

diff --git a/lib/css/components/_stacks-badges.less b/lib/css/components/_stacks-badges.less
@@ -63,6 +63,16 @@
     margin-left: -(@su4 + 1);
 }
 
+//  $   BADGE SIZE
+//  ---------------------------------------------------------------------------
+.s-badge__sm {
+    align-self: flex-start;
+    padding-right: @su4;
+    padding-left: @su4 - 1;
+    font-size: @fs-fine;
+    line-height: 1.8;
+}
+
 //  $$  Badge Counts
 //  ---------------------------------------------------------------------------
 .s-badge__gold {
@@ -92,14 +102,6 @@
 .s-badge__rep-down {
     .badge-styles(var(--red-400), var(--white), var(--red-500));
 }
-.s-badge__mini {
-    align-self: flex-start;
-    padding-right: @su4;
-    padding-left: @su4 - 1;
-    font-size: @fs-fine;
-    line-height: 1.8;
-    .badge-styles(transparent, var(--blue-600), var(--white));
-}
 .s-badge__important {
     .badge-styles(transparent, var(--red-600), var(--white));
 }