Improve button group block and tabs with badges

3 files changed, 13 insertions, 8 deletions

diff --git a/src/badges.less b/src/badges.less
index f6dfdbf..677cc9b 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -8,8 +8,8 @@
     &::after {
       background: @primary-color;
       background-clip: padding-box;
-      border: @border-width solid @bg-color-light;
       border-radius: 1rem;
+      box-shadow: 0 0 0 .2rem @bg-color-light;
       color: @light-color;
       content: attr(data-badge);
       display: inline-block;
@@ -19,9 +19,9 @@
   &[data-badge] {
     &::after {
       font-size: @font-size-sm;
-      height: 2rem;
+      height: 1.8rem;
       line-height: 1;
-      min-width: 2rem;
+      min-width: 1.8rem;
       padding: .3rem .5rem;
       text-align: center;
       white-space: nowrap;
@@ -30,10 +30,10 @@
   &:not([data-badge]),
   &[data-badge=''] {
     &::after {
-      height: .8rem;
-      min-width: .8rem;
+      height: .6rem;
+      min-width: .6rem;
       padding: 0;
-      width: .8rem;
+      width: .6rem;
     }
   }
 
diff --git a/src/buttons.less b/src/buttons.less
index 4cf1d50..88f87bf 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -123,7 +123,8 @@
     color: currentColor;
     height: 1.6rem;
     line-height: 1.6rem;
-    margin: .2rem -.2rem .2rem .4rem;
+    margin-left: .4rem;
+    margin-right: -.2rem;
     opacity: .45;
     padding: 0 .2rem;
     text-decoration: none;
@@ -169,5 +170,9 @@
 
   &.btn-group-block {
     display: flex;
+
+    .btn {
+      flex: 1 0 0;
+    }
   }
 }
diff --git a/src/tabs.less b/src/tabs.less
index 84e451f..781c2f2 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -49,7 +49,7 @@
 
   &:not(.tab-block) {
     .badge {
-      padding-right: 0;
+      padding-right: .2rem;
     }
   }
 }