diff --git a/docs/_data/badges.json b/docs/_data/badges.json
index ffff82c4d0..9be5496d30 100755
--- 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."
}
]
\ No newline at end of file
diff --git a/docs/product/components/badges.html b/docs/product/components/badges.html
index 978716feb8..186c5bb8ec 100644
--- a/docs/product/components/badges.html
+++ b/docs/product/components/badges.html
@@ -102,8 +102,7 @@
154
+15
-2
-99+
-99+
+99+
{% endhighlight %}
@@ -112,8 +111,24 @@
154
+15
-2
- 99+
- 99+
+ 99+
+
+
+
+
+
+ {% header "h3", "Badge sizes" %}
+
+{% highlight html %}
+
Regular
+
Small
+
Small gold
+{% endhighlight %}
+
+
+ Regular
+ Small
+ Small gold
diff --git a/lib/css/components/_stacks-badges.less b/lib/css/components/_stacks-badges.less
index b93afb24d3..1fc818e51a 100644
--- 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));
}