add badges code

4 files changed, 74 insertions, 0 deletions

diff --git a/demo/index.html b/demo/index.html
index f9c8ac2..5d642e5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -500,6 +500,31 @@
                 </div>
             </div>
         </section>
+        <section class="badges">
+            <header class="text-center"><h4>badges</h4></header>
+            <div class="columns">
+                <div class="column">
+                    <span class="badge" data-badge="1">
+                        Notifications
+                    </span>
+                </div>
+                <div class="column">
+                    <span class="badge" data-badge="99">
+                        Notifications
+                    </span>
+                </div>
+                <div class="column">
+                    <span class="badge" data-badge="999">
+                        Notifications
+                    </span>
+                </div>
+                <div class="column">
+                    <span class="badge" data-badge="●">
+                        Notifications
+                    </span>
+                </div>
+            </div>
+        </section>
     </section>
 </body>
 </html>
\ No newline at end of file
diff --git a/dist/spectre.css b/dist/spectre.css
index c902411..aed5fa6 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -1078,6 +1078,29 @@ textarea.form-input {
   font-size: 1.4rem;
   line-height: 1.8rem;
 }
+.badge {
+  position: relative;
+  margin-right: 2.4rem;
+}
+.badge::after {
+  content: attr(data-badge);
+  color: #fff;
+  font-size: 1.2rem;
+  text-align: center;
+  line-height: 1.4rem;
+  background-color: #5764C6;
+  display: block;
+  width: 2rem;
+  height: 2rem;
+  padding: .3rem .1rem;
+  border-radius: 50%;
+  position: absolute;
+  top: -1rem;
+  right: -2.4rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .toast {
   display: block;
   width: 100%;
diff --git a/spectre.less b/spectre.less
index d0b7a71..c5ebcf0 100644
--- a/spectre.less
+++ b/spectre.less
@@ -17,6 +17,7 @@
 
 // Components
 @import 'src/labels.less';
+@import 'src/badges.less';
 @import 'src/toasts.less';
 @import 'src/menus.less';
 @import 'src/navigation.less';
diff --git a/src/badges.less b/src/badges.less
new file mode 100644
index 0000000..e0f1d46
--- /dev/null
+++ b/src/badges.less
@@ -0,0 +1,25 @@
+// Badges
+.badge {
+  position: relative;
+  margin-right: 2.4rem;
+
+  &::after {
+    content: attr(data-badge);
+    color: #fff;
+    font-size: 1.2rem;
+    text-align: center;
+    line-height: 1.4rem;
+    background-color: @core-color;
+    display: block;
+    width: 2rem;
+    height: 2rem;
+    padding: .3rem .1rem;
+    border-radius: 50%;
+    position: absolute;
+    top: -1rem;
+    right: -2.4rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
\ No newline at end of file