Redesign focus outline styles (#863)

thoughtbot · May 5, 2017 · e507548 · e507548
1 parent d840e13
commit e507548
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,