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)); }