fix badge issue on tabs

3 files changed, 77 insertions, 66 deletions

diff --git a/src/badges.less b/src/badges.less
index a8b454f..0e727eb 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -2,17 +2,18 @@
 .badge {
   position: relative;
 
-  &::after {
+  &[data-badge]::after {
     background: @core-color;
+    background-clip: padding-box;
     border: .1rem solid #fff;
     border-radius: 1rem;
     color: @core-text-color;
     content: attr(data-badge);
     display: inline-block;
-    font-size: 1.2rem;
-    height: 2rem;
-    line-height: 1.4rem;
-    min-width: 2rem;
+    font-size: 1.1rem;
+    height: 1.8rem;
+    line-height: 1.2rem;
+    min-width: 1.8rem;
     padding: .2rem .5rem;
     text-align: center;
     transform: translate(-.2rem, -.8rem);
diff --git a/src/forms.less b/src/forms.less
index 55f4aad..3479fb3 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -4,21 +4,21 @@
 }
 // Form element: Input boxes
 .form-input {
-  position: relative;
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  height: 3.2rem;
+  -webkit-appearance: none;
   background: #fff;
   background-image: none;
   border: .1rem solid @control-color;
   border-radius: .3rem;
   color: @body-font-color;
+  display: block;
   font-size: 1.4rem;
+  height: 3.2rem;
   line-height: 1.6rem;
-  padding: .7rem .8rem;
-  -webkit-appearance: none;
+  max-width: 100%;
   outline: 0;
+  padding: .7rem .8rem;
+  position: relative;
+  width: 100%;
 
   &:focus {
     border-color: @core-color;
@@ -30,23 +30,23 @@
 
   // Input sizes
   &.input-sm {
-    height: 2.4rem;
     border-radius: .2rem;
     font-size: 1.2rem;
+    height: 2.4rem;
     padding: .3rem .6rem;
   }
 
   &.input-lg {
-    height: 4.2rem;
     border-radius: .4rem;
     font-size: 1.6rem;
+    height: 4.2rem;
     line-height: 2rem;
     padding: 1rem 1.2rem;
   }
 
   &.input-inline {
-    width: auto;
     display: inline-block;
+    width: auto;
   }
 
   // Textarea
@@ -68,22 +68,22 @@
 // Form element: Label
 .form-label {
   display: block;
-  margin-bottom: .5rem;
   line-height: 1.6rem;
+  margin-bottom: .5rem;
 }
 // Form element: Select
 .form-select {
   appearance: none;
 
   &:not([multiple]) {
-    height: 3.2rem;
-    font-size: 1.4rem;
-    vertical-align: middle;
-    padding: .5rem 2.4rem .5rem .8rem;
+    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
     border: .1rem solid @control-color;
     border-radius: .3rem;
+    font-size: 1.4rem;
+    height: 3.2rem;
     outline: 0;
-    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 0.75rem center / 0.8rem 1rem;
+    padding: .5rem 2.4rem .5rem .8rem;
+    vertical-align: middle;
   }
 
   &:focus {
@@ -95,13 +95,12 @@
 
   // Select small
   &.select-sm {
-    height: 2.4rem;
     border-radius: .2rem;
     font-size: 1.2rem;
+    height: 2.4rem;
     padding: .4rem 2rem .4rem .6rem;
   }
 }
-
 // Form element: Checkbox and radio
 .form-checkbox,
 .form-radio,
@@ -112,25 +111,25 @@
 }
 .form-checkbox,
 .form-radio {
-  line-height: 1.8rem;
-  padding: .3rem 2rem;
   cursor: pointer;
   display: inline-block;
+  line-height: 1.8rem;
+  padding: .3rem 2rem;
   position: relative;
 
   .form-icon {
-    font-size: 1.4rem;
-    line-height: 2.4rem;
-    vertical-align: top;
     border: .1rem solid @control-color;
     display: inline-block;
-    width: 1.4rem;
+    font-size: 1.4rem;
     height: 1.4rem;
+    left: 0;
+    line-height: 2.4rem;
+    outline: none;
     padding: 0;
     position: absolute;
     top: .5rem;
-    left: 0;
-    outline: none;
+    vertical-align: top;
+    width: 1.4rem;
   }
   &:hover .form-icon {
     border-color: darken(@control-color, 15%);
@@ -147,18 +146,19 @@
 
   input:checked + .form-icon {
     &::after {
-      width: .6rem;
-      height: 1rem;
+      background-clip: padding-box;
+      border: .2rem solid #fff;
+      border-left-width: 0;
+      border-top-width: 0;
       content: "";
-      position: absolute;
-      top: 50%;
+      height: 1rem;
       left: 50%;
-      margin-top: -.6rem;
       margin-left: -.3rem;
-      border: .2rem solid #fff;
-      border-top-width: 0;
-      border-left-width: 0;
+      margin-top: -.6rem;
+      position: absolute;
+      top: 50%;
       transform: rotate(45deg);
+      width: .6rem;
     }
   }
 }
@@ -169,53 +169,54 @@
 
   input:checked + .form-icon {
     &::after {
-      width: .4rem;
-      height: .4rem;
+      background: #fff;
+      border-radius: .2rem;
       content: "";
-      position: absolute;
-      top: 50%;
+      height: .4rem;
       left: 50%;
-      margin-top: -.2rem;
       margin-left: -.2rem;
-      border-radius: .2rem;
-      background: #fff;
+      margin-top: -.2rem;
+      position: absolute;
+      top: 50%;
+      width: .4rem;
     }
   }
 }
 // Form element: Switch
 .form-switch {
-  line-height: 1.8rem;
-  padding: .3rem 2rem .3rem 3.6rem;
   cursor: pointer;
   display: inline-block;
+  line-height: 1.8rem;
+  padding: .3rem 2rem .3rem 3.6rem;
   position: relative;
 
   .form-icon {
-    line-height: 2.4rem;
-    vertical-align: top;
-    border: .1rem solid @control-color;
     background: @control-color;
+    background-clip: padding-box;
+    border: .1rem solid @control-color;
+    border-radius: .9rem;
     display: inline-block;
-    width: 3rem;
     height: 1.8rem;
+    left: 0;
+    line-height: 2.4rem;
+    outline: none;
     padding: 0;
-    border-radius: .9rem;
     position: absolute;
     top: .3rem;
-    left: 0;
-    outline: none;
+    vertical-align: top;
+    width: 3rem;
 
     &::after {
+      background: #fff;
+      border-radius: .8rem;
       content: "";
       display: block;
-      width: 1.6rem;
       height: 1.6rem;
-      border-radius: .8rem;
+      left: 0;
       position: absolute;
       top: 0;
-      left: 0;
-      background: #fff;
       transition: left .15s ease;
+      width: 1.6rem;
     }
   }
 
@@ -234,11 +235,11 @@
   display: flex;
 
   .input-group-addon {
-    line-height: 1.6rem;
-    padding: .7rem .8rem;
+    background: @core-border-color;
     border: .1rem solid @control-color;
     border-radius: .3rem;
-    background: @core-border-color;
+    line-height: 1.6rem;
+    padding: .7rem .8rem;
   }
   .input-group-addon,
   .input-group-btn {
@@ -249,17 +250,17 @@
   .input-group-addon,
   .input-group-btn {
     &:first-child:not(:last-child) {
-      border-top-right-radius: 0;
       border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
     }
     &:not(:first-child):not(:last-child) {
-      margin-left: -.1rem;
       border-radius: 0;
+      margin-left: -.1rem;
     }
     &:last-child:not(:first-child) {
-      margin-left: -.1rem;
-      border-top-left-radius: 0;
       border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: -.1rem;
     }
     &:focus {
       z-index: 99;
diff --git a/src/navigation.less b/src/navigation.less
index 1523327..7e1967b 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -68,6 +68,15 @@
     .tab-item {
       flex: 1 0 auto;
       text-align: center;
+
+      .badge {
+        &[data-badge]::after {
+          position: absolute;
+          right: 1.5rem;
+          top: .5rem;
+          transform: translate(50%, -.8rem);
+        }
+      }
     }
   }
 }