CHG: Cleanup codes and add more focus style

6 files changed, 32 insertions, 18 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index 97f7612..a9adc07 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -17,6 +17,7 @@
 
     .form-input {
       border-color: transparent;
+      box-shadow: none;
       display: inline-block;
       flex: 1 0 auto;
       padding: .3rem;
diff --git a/src/buttons.less b/src/buttons.less
index 6adbc19..3f0900a 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -5,6 +5,7 @@
   border: .1rem solid @core-color;
   border-radius: @border-radius;
   color: @core-link-color;
+  .control-transition();
   cursor: pointer;
   display: inline-block;
   font-size: 1.4rem;
@@ -19,6 +20,7 @@
   white-space: nowrap;
   &:focus {
     background: lighten(@core-secondary-color, 1%);
+    .control-shadow();
   }
   &:hover {
     background: @core-color;
@@ -69,12 +71,10 @@
     color: @core-link-color;
     &:focus,
     &:hover {
-      background: fade(@core-border-color, 25%);
       color: darken(@core-link-color, 15%);
     }
     &:active,
     &.active {
-      background: fade(@core-border-color, 50%);
       color: darken(@core-link-color, 25%);
     }
   }
@@ -109,10 +109,12 @@
     font-family: sans-serif;
     height: 2rem;
     line-height: 1.8rem;
-    margin-left: .4rem;
+    margin-left: .2rem;
+    margin-right: -.4rem;
     opacity: .45;
-    padding: 0;
+    padding: 0 .4rem;
     text-decoration: none;
+    width: 2rem;
 
     &:hover {
       opacity: .85;
diff --git a/src/chips.less b/src/chips.less
index 11c6ab3..6b48df9 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -2,7 +2,6 @@
 .chip {
   align-content: space-around;
   align-items: center;
-  border: .1rem solid transparent;
   border-radius: @border-radius;
   display: flex;
   list-style: none;
@@ -14,18 +13,25 @@
   }
   .chip-content {
     flex: 1 1 auto;
-    padding: 0 1rem;
     .text-ellipsis;
+    &:not(:first-child) {
+      padding-left: 1rem;
+    }
+    &:not(:last-child) {
+      padding-right: 1rem;
+    }
   }
   .chip-action {
     flex: 0 0 auto;
   }
   .chip-title {
     font-size: 1.4rem;
+    line-height: 1.6rem;
   }
   .chip-meta {
     color: lighten(@body-font-color, 50%);
     font-size: 1.2rem;
+    line-height: 1.6rem;
   }
 }
 
@@ -51,16 +57,10 @@
   .avatar {
     font-size: 1rem;
     height: 2rem;
+    margin-right: .4rem;
     width: 2rem;
   }
 
-  .chip-name {
-    .text-ellipsis;
-    &:not(:first-child) {
-      margin-left: .4rem;
-    }
-  }
-
   .btn-clear {
     &::before {
       color: currentColor;
diff --git a/src/forms.less b/src/forms.less
index 1bc59e0..7e0db4d 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -10,6 +10,7 @@
   border: .1rem solid @control-color;
   border-radius: @border-radius;
   color: @body-font-color;
+  .control-transition();
   display: block;
   font-size: 1.4rem;
   height: 3.2rem;
@@ -21,6 +22,7 @@
   width: 100%;
   &:focus {
     border-color: @core-color;
+    .control-shadow();
   }
   &[disabled] {
     background: #eeeff2;
@@ -115,6 +117,7 @@
   }
   &:focus {
     border-color: @core-color;
+    .control-shadow();
   }
   &::-ms-expand {
     display: none;
@@ -156,6 +159,10 @@
     overflow: hidden;
     position: absolute;
     width: .1rem;
+    &:focus + .form-icon {
+      border-color: @core-color;
+      .control-shadow();
+    }
   }
 }
 .form-checkbox,
@@ -168,6 +175,7 @@
 
   .form-icon {
     border: .1rem solid @control-color;
+    .control-transition();
     display: inline-block;
     font-size: 1.4rem;
     height: 1.4rem;
@@ -177,7 +185,6 @@
     padding: 0;
     position: absolute;
     top: .5rem;
-    transition: all .15s ease;
     vertical-align: top;
     width: 1.4rem;
   }
@@ -186,9 +193,6 @@
   }
 
   input {
-    &:focus + .form-icon {
-      border-color: @core-color;
-    }
     &:checked + .form-icon {
       background: @core-color;
       border-color: @core-color;
diff --git a/src/menus.less b/src/menus.less
index 1a3e239..434beec 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -46,7 +46,7 @@
     font-size: 1.2rem;
     line-height: 1.8rem;
     margin-top: 0;
-    padding: .2rem 1rem;
+    padding: .2rem .8rem;
 
     .menu-header-text {
       background: #fff;
diff --git a/src/variables.less b/src/variables.less
index f74297f..1a9d6ab 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -44,12 +44,19 @@
     display: table;
   }
 }
+.control-shadow() {
+  box-shadow: 0 0 .4rem fade(@core-color, 25%);
+}
+.control-transition() {
+  transition: all .15s ease;
+}
 .toast-variant(@color) {
   background: fade(@color, 90%);
   border-color: @color;
 }
 .label-base() {
   border-radius: .2rem;
+  font-size: .9em;
   padding: .1em .3em;
   vertical-align: baseline;
 }