Improve :focus state style

1 files changed, 9 insertions, 1 deletions

diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
index 66d8a45..0d0ea94 100644
--- a/docs/css/spectre-exp.css
+++ b/docs/css/spectre-exp.css
@@ -63,6 +63,7 @@
   cursor: pointer;
   height: 2.8rem;
   line-height: 2rem;
+  outline: none;
   padding: .3rem;
   position: relative;
   text-align: center;
@@ -76,6 +77,9 @@
   border-color: #e4e6f6;
   color: #5764c6;
 }
+.calendar .calendar-date .date-item:focus {
+  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+}
 .calendar .calendar-date .date-item:focus,
 .calendar .calendar-date .date-item:hover {
   background: #fbfbfe;
@@ -407,7 +411,7 @@
   max-width: 100%;
   min-width: 1.6rem;
   opacity: 0;
-  outline: 0;
+  outline: none;
   position: relative;
   resize: horizontal;
   top: 50%;
@@ -714,6 +718,10 @@
   height: 2.4rem;
   width: 100%;
 }
+.slider:focus {
+  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+  outline: none;
+}
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   background: #5764c6;