From e507548b29e942bf32641a222423944d6ef7af07 Mon Sep 17 00:00:00 2001
From: Tyson Gach <tyson@tysongach.com>
Date: Fri, 5 May 2017 17:14:50 -0400
Subject: [PATCH] Redesign focus outline styles (#863)

---
 app/assets/stylesheets/administrate/base/_forms.scss   | 10 ++++++++++
 .../stylesheets/administrate/base/_typography.scss     |  7 +++++--
 .../stylesheets/administrate/components/_buttons.scss  |  8 ++++++--
 .../stylesheets/administrate/library/_variables.scss   |  5 +++++
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/administrate/base/_forms.scss b/app/assets/stylesheets/administrate/base/_forms.scss
index c6212624c2..0ed514a4a1 100644
--- a/app/assets/stylesheets/administrate/base/_forms.scss
+++ b/app/assets/stylesheets/administrate/base/_forms.scss
@@ -92,3 +92,13 @@ textarea {
 select {
   width: 100%;
 }
+
+[type="checkbox"],
+[type="radio"],
+[type="file"],
+select {
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}
diff --git a/app/assets/stylesheets/administrate/base/_typography.scss b/app/assets/stylesheets/administrate/base/_typography.scss
index d8bffda803..92af4668aa 100644
--- a/app/assets/stylesheets/administrate/base/_typography.scss
+++ b/app/assets/stylesheets/administrate/base/_typography.scss
@@ -26,11 +26,14 @@ a {
   text-decoration: none;
   transition: color $base-duration $base-timing;
 
-  &:active,
-  &:focus,
   &:hover {
     color: shade($action-color, 25%);
   }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
 }
 
 hr {
diff --git a/app/assets/stylesheets/administrate/components/_buttons.scss b/app/assets/stylesheets/administrate/components/_buttons.scss
index 369e26e9d2..a75b3dddf0 100644
--- a/app/assets/stylesheets/administrate/components/_buttons.scss
+++ b/app/assets/stylesheets/administrate/components/_buttons.scss
@@ -19,12 +19,16 @@
   vertical-align: middle;
   white-space: nowrap;
 
-  &:hover,
-  &:focus {
+  &:hover {
     background-color: shade($action-color, 20%);
     color: $white;
   }
 
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.5;
diff --git a/app/assets/stylesheets/administrate/library/_variables.scss b/app/assets/stylesheets/administrate/library/_variables.scss
index 1cc7ac70d0..5ae7f00d72 100644
--- a/app/assets/stylesheets/administrate/library/_variables.scss
+++ b/app/assets/stylesheets/administrate/library/_variables.scss
@@ -40,6 +40,11 @@ $action-color: $blue;
 // Background Colors
 $base-background-color: $grey-0;
 
+// Focus
+$focus-outline-color: transparentize($action-color, 0.4);
+$focus-outline: 3px solid $focus-outline-color;
+$focus-outline-offset: 1px;
+
 // Flash Colors
 $flash-colors: (
   alert: $light-yellow,