CHG: Improve all components

14 files changed, 49 insertions, 67 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index 5e6d65f..97f7612 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -6,30 +6,20 @@
     align-content: flex-start;
     background: #fff;
     border: .1rem solid @control-color;
-    border-radius: .3rem;
+    border-radius: @border-radius;
     color: @body-font-color;
     display: flex;
     flex-wrap: wrap;
-    max-width: 100%;
-    min-height: 4rem;
+    min-height: 3.6rem;
     outline: 0;
-    padding: .4rem .4rem 0 .4rem;
+    padding: .1rem 0 .1rem .2rem;
     width: 100%;
 
-    .chip-sm {
-      margin-bottom: .4rem;
-      margin-right: .4rem;
-    }
-
     .form-input {
-      background: #fff;
       border-color: transparent;
-      display: inline-block;;
+      display: inline-block;
       flex: 1 0 auto;
-      height: 3rem;
-      margin-bottom: .3rem;
       padding: .3rem;
-      vertical-align: top;
       width: auto;
     }
   }
diff --git a/src/buttons.less b/src/buttons.less
index b4e6c93..f2beca0 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -3,7 +3,7 @@
   -webkit-appearance: none;
   background: #fff;
   border: .1rem solid @core-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   color: @core-link-color;
   cursor: pointer;
   display: inline-block;
@@ -81,7 +81,6 @@
 
   // Button Small
   &.btn-sm {
-    border-radius: .2rem;
     font-size: 1.2rem;
     height: 2.4rem;
     line-height: 1.4rem;
@@ -90,7 +89,6 @@
 
   // Button Large
   &.btn-lg {
-    border-radius: .4rem;
     font-size: 1.8rem;
     height: 4.2rem;
     line-height: 2rem;
@@ -128,9 +126,7 @@
 // Button groups
 .btn-group {
   display: inline-flex;
-  flex-wrap: nowrap;
-  max-width: 100%;
-  overflow-x: auto;
+  flex-wrap: wrap;
 
   .btn {
     flex: 1 0 auto;
diff --git a/src/cards.less b/src/cards.less
index b95b7d4..f11b8e6 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -2,7 +2,7 @@
 .card {
   background: #fff;
   border: .1rem solid @core-border-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   display: block;
   margin: 0;
   padding: 0;
@@ -25,8 +25,8 @@
       padding-top: 0;
 
       img {
-        border-top-left-radius: .3rem;
-        border-top-right-radius: .3rem;
+        border-top-left-radius: @border-radius;
+        border-top-right-radius: @border-radius;
       }
     }
 
diff --git a/src/chips.less b/src/chips.less
index df312cf..11c6ab3 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -3,7 +3,7 @@
   align-content: space-around;
   align-items: center;
   border: .1rem solid transparent;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   display: flex;
   list-style: none;
   margin: 0;
@@ -33,37 +33,38 @@
 .chip-sm {
   align-items: center;
   background: @core-border-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   color: #666;
   display: inline-flex;
   height: 3rem;
-  margin-bottom: .1rem;
-  margin-top: .1rem;
+  margin: .1rem .2rem .1rem 0;
   max-width: 100%;
-  padding: .4rem .8rem;
+  padding: .5rem .7rem;
   text-decoration: none;
   vertical-align: middle;
 
-  .btn-clear {
-    &::before {
-      color: currentColor;
-      font-size: 1.6rem;
-    }
-  }
-
   &.selected {
     background: @core-color;
     color: @core-light-color;
   }
 
-  .chip-name {
-    margin: 0 .4rem;
-    .text-ellipsis;
-  }
-
   .avatar {
     font-size: 1rem;
     height: 2rem;
     width: 2rem;
   }
+
+  .chip-name {
+    .text-ellipsis;
+    &:not(:first-child) {
+      margin-left: .4rem;
+    }
+  }
+
+  .btn-clear {
+    &::before {
+      color: currentColor;
+      font-size: 1.6rem;
+    }
+  }
 }
diff --git a/src/empty.less b/src/empty.less
index 8accae1..1108fa2 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -1,7 +1,7 @@
 // Empty states (or Blank slates)
 .empty {
   background: @core-empty-bg;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   text-align: center;
   padding: 4 * @layout-gutter;
 
@@ -15,4 +15,4 @@
   .empty-action {
     margin-top: 1.5rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/forms.less b/src/forms.less
index 131fbc5..1bc59e0 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -8,15 +8,15 @@
   background: #fff;
   background-image: none;
   border: .1rem solid @control-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   color: @body-font-color;
   display: block;
   font-size: 1.4rem;
   height: 3.2rem;
-  line-height: 1.6rem;
+  line-height: 1.8rem;
   max-width: 100%;
   outline: 0;
-  padding: .7rem .8rem;
+  padding: .6rem .8rem;
   position: relative;
   width: 100%;
   &:focus {
@@ -28,14 +28,12 @@
 
   // Input sizes
   &.input-sm {
-    border-radius: .2rem;
     font-size: 1.2rem;
     height: 2.4rem;
     padding: .3rem .6rem;
   }
 
   &.input-lg {
-    border-radius: .4rem;
     font-size: 1.6rem;
     height: 4.2rem;
     line-height: 2rem;
@@ -98,7 +96,7 @@
 .form-select {
   appearance: none;
   border: .1rem solid @control-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   font-size: 1.4rem;
   line-height: 1.6rem;
   min-width: @control-min-width;
@@ -124,7 +122,6 @@
 
   // Select sizes
   &.select-sm {
-    border-radius: .2rem;
     font-size: 1.2rem;
     height: 2.4rem;
     padding: .4rem 2rem .4rem .6rem;
@@ -203,7 +200,7 @@
 }
 .form-checkbox {
   .form-icon {
-    border-radius: .2rem;
+    border-radius: @border-radius;
   }
 
   input {
@@ -249,7 +246,7 @@
   input:checked + .form-icon {
     &::after {
       background: #fff;
-      border-radius: .2rem;
+      border-radius: @border-radius;
       content: "";
       height: .4rem;
       left: 50%;
@@ -320,7 +317,7 @@
   .input-group-addon {
     background: lighten(@core-border-color, 4%);
     border: .1rem solid @control-color;
-    border-radius: .3rem;
+    border-radius: @border-radius;
     line-height: 1.6rem;
     padding: .7rem .8rem;
 
diff --git a/src/layout.less b/src/layout.less
index 628ebe4..657b59e 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -367,7 +367,7 @@
   }
   .form-checkbox,
   .form-radio {
-    margin: .5rem 0;
+    margin: .4rem 0;
   }
 }
 
diff --git a/src/menus.less b/src/menus.less
index 0167185..1a3e239 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -1,7 +1,7 @@
 // Menus
 .menu {
   background: #fff;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   display: block;
   margin: 0;
   min-width: @control-min-width;
@@ -12,21 +12,21 @@
   z-index: 999;
 
   .menu-item {
-    border-radius: .3rem;
+    border-radius: @border-radius;
     color: @body-font-color;
     display: block;
     line-height: 2.4rem;
     margin-top: .1rem;
-    padding: .2rem 1rem;
+    padding: .2rem .8rem;
     text-decoration: none;
     user-select: none;
 
     a {
-      border-radius: .3rem;
+      border-radius: @border-radius;
       color: inherit;
       display: block;
-      margin: -.2rem -1rem;
-      padding: .2rem 1rem;
+      margin: -.2rem -.8rem;
+      padding: .2rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
diff --git a/src/modals.less b/src/modals.less
index d5e6af0..f151ccb 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -33,7 +33,7 @@
 .modal-container {
   animation: slide-up .216s;
   background: #fff;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   display: block;
   margin: 0 auto;
   padding: 0;
diff --git a/src/navigation.less b/src/navigation.less
index 00bf86d..ae7da3d 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -83,9 +83,6 @@
 
 // Pagination
 .pagination {
-  display: inline-block;
-  padding: 1.2rem;
-
   .page-item {
     display: inline-block;
 
@@ -95,7 +92,7 @@
     }
 
     a {
-      border-radius: .3rem;
+      border-radius: @border-radius;
       display: inline-block;
       margin: 0 .1rem;
       padding: .6rem .8rem;
diff --git a/src/toasts.less b/src/toasts.less
index 7126b75..929edaa 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -1,7 +1,7 @@
 // Toasts
 .toast {
   border: .1rem solid @core-dark-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   color: @core-light-color;
   display: block;
   padding: 1.4rem;
diff --git a/src/tooltips.less b/src/tooltips.less
index 7eb25c0..80468ac 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -3,7 +3,7 @@
   position: relative;
   &::after {
     background: fade(@core-dark-color, 90%);
-    border-radius: .3rem;
+    border-radius: @border-radius;
     bottom: 100%;
     color: @core-light-color;
     content: attr(data-tooltip);
diff --git a/src/utilities.less b/src/utilities.less
index 49d71a4..3030565 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -201,7 +201,7 @@
 
 // Shapes
 .rounded {
-  border-radius: .3rem;
+  border-radius: @border-radius;
 }
 .circle {
   border-radius: 50%;
diff --git a/src/variables.less b/src/variables.less
index 6d84e1b..f74297f 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -12,6 +12,7 @@
 // Sizes
 @layout-gutter: 1rem;
 @control-min-width: 18rem;
+@border-radius: .2rem;
 
 // Colors
 @core-color: #5764c6;