ADD: Bars component experimental support and badges for buttons

5 files changed, 50 insertions, 9 deletions

diff --git a/src/badges.less b/src/badges.less
index c9f571e..e274184 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -1,5 +1,6 @@
 // Badges
 .badge {
+  display: inline-block;
   position: relative;
 
   &[data-badge],
@@ -12,10 +13,7 @@
       color: @core-light-color;
       content: attr(data-badge);
       display: inline-block;
-      position: absolute;
-      right: 0;
-      top: 0;
-      transform: translate(100%, -50%);
+      transform: translate(-.4rem, -1rem);
     }
   }
   &[data-badge] {
@@ -38,4 +36,14 @@
       width: .8rem;
     }
   }
+
+  // Badges for Buttons
+  &.btn {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
 }
diff --git a/src/bars.less b/src/bars.less
new file mode 100644
index 0000000..61426c3
--- /dev/null
+++ b/src/bars.less
@@ -0,0 +1,34 @@
+// Bars
+.bar {
+  background: @core-border-color;
+  border-radius: @border-radius;
+  display: flex;
+  height: 1.6rem;
+  width: 100%;
+
+  &.bar-sm {
+    height: .4rem;
+  }
+
+  // TODO: attr() support
+  .bar-item {
+    background: @core-color;
+    color: @core-light-color;
+    display: block;
+    font-size: 1.2rem;
+    line-height: 1;
+    height: 100%;
+    padding: .2rem 0;
+    text-align: center;
+    width: 0;
+
+    &:first-of-type {
+      border-bottom-left-radius: @border-radius;
+      border-top-left-radius: @border-radius;
+    }
+    &:last-of-type {
+      border-bottom-right-radius: @border-radius;
+      border-top-right-radius: @border-radius;
+    }
+  }
+}
diff --git a/src/chips.less b/src/chips.less
index 4143211..69b1f7c 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -18,6 +18,7 @@
   }
 
   .avatar {
+    margin-left: -.4rem;
     margin-right: .4rem;
   }
 }
diff --git a/src/tabs.less b/src/tabs.less
index e2d5ad2..cb172f4 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -50,12 +50,8 @@
   }
 
   &:not(.tab-block) {
-    a.badge {
+    .badge {
       padding-right: 0;
-      &::after {
-        position: static;
-        transform: translate(-.2rem, -1rem);
-      }
     }
   }
 }
diff --git a/src/variables.less b/src/variables.less
index ef1ce34..3ac57b1 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -6,6 +6,8 @@
 @body-bg: #fff;
 @body-font-color: #333;
 @body-font-size: 1.4rem;
+
+// Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
 @base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
 @fallback-font-family: "Helvetica Neue", sans-serif;