Improve :focus state style

7 files changed, 22 insertions, 11 deletions

diff --git a/src/bars.less b/src/bars.less
index a996142..e494a3e 100644
--- a/src/bars.less
+++ b/src/bars.less
@@ -54,18 +54,15 @@
   }
 
   .bar-slider-btn {
-    appearance: none;
     background: @primary-color;
     border: 0;
     border-radius: 50%;
-    cursor: pointer;
     height: 1.2rem;
     padding: 0;
     position: absolute;
     right: 0;
     top: 50%;
     transform: translate(50%, -50%);
-    transition: all .2s ease;
     width: 1.2rem;
 
     &:active {
diff --git a/src/base.less b/src/base.less
index 7b20a39..ba21bee 100644
--- a/src/base.less
+++ b/src/base.less
@@ -23,8 +23,13 @@ body {
 
 a {
   color: @link-color;
+  outline: none;
   text-decoration: none;
 
+  &:focus {
+    .control-shadow();
+  }
+
   &:focus,
   &:hover,
   &:active,
@@ -33,9 +38,3 @@ a {
     text-decoration: underline;
   }
 }
-
-// Focus state
-:focus {
-  .control-shadow();
-  outline: none;
-}
diff --git a/src/buttons.less b/src/buttons.less
index 96eb084..4cf1d50 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -11,6 +11,7 @@
   font-size: @font-size;
   height: 3.2rem;
   line-height: 2rem;
+  outline: none;
   padding: .5rem .8rem;
   text-align: center;
   text-decoration: none;
@@ -19,6 +20,7 @@
   white-space: nowrap;
   &:focus {
     background: @secondary-color-light;
+    .control-shadow();
     text-decoration: none;
   }
   &:hover {
diff --git a/src/calendars.less b/src/calendars.less
index 32711a4..46fd286 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -54,6 +54,7 @@
       cursor: pointer;
       height: 2.8rem;
       line-height: 2rem;
+      outline: none;
       padding: .3rem;
       position: relative;
       text-align: center;
@@ -67,6 +68,10 @@
         color: @primary-color;
       }
 
+      &:focus {
+        .control-shadow();
+      }
+
       &:focus,
       &:hover {
         background: @secondary-color-light;
diff --git a/src/comparison-sliders.less b/src/comparison-sliders.less
index 9c8f409..5007f70 100644
--- a/src/comparison-sliders.less
+++ b/src/comparison-sliders.less
@@ -78,7 +78,7 @@
     max-width: 100%;
     min-width: 1.6rem;
     opacity: 0;
-    outline: 0;
+    outline: none;
     position: relative;
     resize: horizontal;
     top: 50%;
diff --git a/src/forms.less b/src/forms.less
index 561df6f..fe08dc7 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -33,12 +33,13 @@
   height: 3.2rem;
   line-height: 2rem;
   max-width: 100%;
-  outline: 0;
+  outline: none;
   padding: .5rem .8rem;
   position: relative;
   width: 100%;
   &:focus {
     border-color: @primary-color;
+    .control-shadow();
   }
   &::placeholder {
     color: @gray-color;
@@ -98,6 +99,7 @@
   color: inherit;
   font-size: @font-size;
   line-height: 2rem;
+  outline: none;
   padding: .5rem .8rem;
   vertical-align: middle;
 
@@ -115,6 +117,7 @@
   }
   &:focus {
     border-color: @primary-color;
+    .control-shadow();
   }
   &::-ms-expand {
     display: none;
diff --git a/src/sliders.less b/src/sliders.less
index 46d6b87..779117d 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -7,6 +7,11 @@
   width: 100%;
   height: 2.4rem;
 
+  &:focus {
+    .control-shadow();
+    outline: none;
+  }
+
   // Slider Thumb
   &::-webkit-slider-thumb {
     -webkit-appearance: none;