Update button groups and tabs style

2 files changed, 22 insertions, 23 deletions

diff --git a/src/buttons.less b/src/buttons.less
index df38742..03179d3 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -127,7 +127,9 @@
 // Button groups
 .btn-group {
   display: inline-flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  overflow-x: auto;
 
   .btn {
     flex: 1 0 auto;
@@ -153,12 +155,6 @@
     }
   }
 
-  &.is-scrollable {
-    flex-wrap: nowrap;
-    max-width: 100%;
-    overflow-x: auto;
-  }
-
   &.btn-group-block {
     display: flex;
   }
diff --git a/src/navigation.less b/src/navigation.less
index 503ca72..f6295bc 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -35,18 +35,22 @@
 
 // Tabs
 .tab {
-  border-bottom: .1rem solid @control-color;
   display: flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  overflow-x: auto;
 
   .tab-item {
-    margin-bottom: -.1rem;
+    border-bottom: .1rem solid @control-color;
     margin-top: 0;
 
     a {
       border-bottom: .2rem solid transparent;
       color: @body-font-color;
       display: block;
-      padding: .5rem 1.2rem;
+      margin-bottom: -.1rem;
+      margin-top: 0;
+      padding: .8rem 1.4rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -54,10 +58,18 @@
       }
     }
 
-    &.active {
-      a {
-        border-bottom-color: darken(@core-color, 10%);
-        color: darken(@core-link-color, 10%);
+    &.active a,
+    a.active {
+      border-bottom-color: darken(@core-color, 10%);
+      color: darken(@core-link-color, 10%);
+    }
+
+    .badge {
+      &[data-badge]::after {
+        position: absolute;
+        right: -1.4rem;
+        top: 1rem;
+        transform: translate(-50%, -1rem);
       }
     }
   }
@@ -66,15 +78,6 @@
     .tab-item {
       flex: 1 0 auto;
       text-align: center;
-
-      .badge {
-        &[data-badge]::after {
-          position: absolute;
-          right: 1.5rem;
-          top: .6rem;
-          transform: translate(50%, -.8rem);
-        }
-      }
     }
   }
 }