Merge pull request #266 from picturepan2/0.4.0 v0.4.0

0.4.0

1 files changed, 70 insertions, 0 deletions

diff --git a/src/_badges.scss b/src/_badges.scss
new file mode 100644
index 0000000..9f1d734
--- /dev/null
+++ b/src/_badges.scss
@@ -0,0 +1,70 @@
+// Badges
+.badge {
+  position: relative;
+  white-space: nowrap;
+
+  &[data-badge],
+  &:not([data-badge]) {
+    &::after {
+      background: $primary-color;
+      background-clip: padding-box;
+      border-radius: .5rem;
+      box-shadow: 0 0 0 .1rem $bg-color-light;
+      color: $light-color;
+      content: attr(data-badge);
+      display: inline-block;
+      transform: translate(-.1rem, -.5rem);
+    }
+  }
+  &[data-badge] {
+    &::after {
+      font-size: $font-size-sm;
+      height: 18px;
+      line-height: 1;
+      min-width: 18px;
+      padding: 3px 5px;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+  &:not([data-badge]),
+  &[data-badge=''] {
+    &::after {
+      height: 6px;
+      min-width: 6px;
+      padding: 0;
+      width: 6px;
+    }
+  }
+
+  // Badges for Buttons
+  &.btn {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
+
+  // Badges for Avatars
+  &.avatar {
+    &::after {
+      position: absolute;
+      top: 14.64%;
+      right: 14.64%;
+      transform: translate(50%, -50%);
+      z-index: $zindex-1;
+    }
+  }
+
+  &.avatar-xs {
+    &::after {
+      content: "";
+      height: $unit-2;
+      min-width: $unit-2;
+      padding: 0;
+      width: $unit-2;
+    }
+  }
+}