Refactor :focus styles

Closes #61

core/client/assets/sass/layouts/settings.scss

@@ -94,7 +94,9 @@
     bottom: 0;
     right: -1px;
     overflow: auto;
-    @media (max-width: 800px) { right: 0; };
+    @media (max-width: 800px) {
+        right: 0;
+    };
 
     // Create placeholder the same height as the floating header
     // to push content down by the same amount
@@ -122,7 +124,10 @@
             border-bottom: none;
             @media (max-width: 1000px) { padding-left: 15px; }
             @media (max-width: 800px) {
-                @include icon-after($i-chevron) {float: right;margin-top: 5px;};
+                @include icon-after($i-chevron) {
+                    float: right;
+                    margin-top: 5px;
+                };
             }
         }
 
@@ -148,7 +153,9 @@
                     color: $darkgrey;
                     font-weight: bold;
                     background: #fff;
-
+                    &:focus {
+                        background: $lightbrown;
+                    }
                 }
 
             }

core/client/assets/sass/modules/base.scss

@@ -8,6 +8,7 @@
  * Box Sizing
  * Text Selection
  * Colour Classes
+ * Focus Styles
  */
 
 /* ==========================================================================
@@ -57,4 +58,16 @@
     .#{nth($colour, 1)} {
         color: nth($colour, 2);
     }
+}
+
+
+/* ==========================================================================
+   Focus Styles
+   ---
+   These are applied globally, to everything except images
+   ========================================================================== */
+
+*:not(img):focus {
+    outline: 0;
+    outline-width: 0;
 }

core/client/assets/sass/modules/buttons.scss

@@ -36,7 +36,8 @@
     @include transition(background 0.3s ease, border-color 0.3s ease);
 
     &:hover,
-    &.hover {
+    &.hover,
+    &:focus {
         will-change: border-color, background;
         border-color: transparent;
         background: #f8f8f8;
@@ -116,7 +117,8 @@ input[type="button"] {
     font-weight: normal;
     background: #eee;
     box-shadow: none;
-    &:hover {
+    &:hover,
+    &:focus {
         border-color: rgba(0,0,0,0.1);
     }
 }
@@ -128,7 +130,8 @@ input[type="button"] {
     background: #A1ADB3;
     box-shadow: none;
     border-color: #A1ADB3;
-    &:hover {
+    &:hover,
+    &:focus {
         border-color: darken(#A1ADB3, 10%);
         background: darken(#A1ADB3, 10%);
     }
@@ -141,7 +144,8 @@ input[type="submit"] {
     @extend %btn;
     background: $blue;
     box-shadow: none;
-    &:hover {
+    &:hover,
+    &:focus {
         background: darken($blue, 10%);
     }
 }
@@ -152,7 +156,8 @@ button[type="submit"].button-add,
 input[type="submit"].button-add {
     @extend %btn;
     background: $green;
-    &:hover {
+    &:hover,
+    &:focus {
         background: darken($green, 8%);
     }
 }
@@ -164,7 +169,8 @@ input[type="reset"] {
     @extend %btn;
     background: $red;
     box-shadow: none;
-    &:hover {
+    &:hover,
+    &:focus {
         background: darken($red, 10%);
     }
 }
@@ -173,7 +179,8 @@ input[type="reset"] {
 .button-alt {
     @extend %btn;
     background: lighten($darkgrey, 10%);
-    &:hover {
+    &:hover,
+    &:focus {
         background: $darkgrey;
     }
     &[class*='icon-']:before {
@@ -185,7 +192,8 @@ input[type="reset"] {
 .button-info {
     @extend %btn;
     background: #A1ADB3;
-    &:hover {
+    &:hover,
+    &:focus {
         background: lighten(#A1ADB3, 10%);
     }
 }
@@ -196,7 +204,8 @@ input[type="reset"] {
     color: $blue;
     background: transparent;
     border: none;
-    &:hover {
+    &:hover,
+    &:focus {
         background: transparent;
         text-decoration: underline;
     }
@@ -231,7 +240,8 @@ input[type="reset"] {
         @include transition(border-color 0.3s ease);
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
         color: #fff;
         background: darken($blue, 10%);
         border-color: darken($blue, 10%);
@@ -304,7 +314,8 @@ input[type="reset"] {
         }
 
         // Spin the arrow on hover and while menu is open
-        &:hover {
+        &:hover,
+        &:focus {
             will-change: box-shadow, background;
             box-shadow: none;
             background: #f8f8f8;
@@ -315,7 +326,8 @@ input[type="reset"] {
         }
 
         // If it has a class of "up" spin it an extra 180degress to point up
-        &.up:hover {
+        &.up:hover,
+        &.up:focus {
             @include icon($i-chevron-down) {
                 margin-top:-4px;
                 @include transform(rotate(540deg));
@@ -332,7 +344,8 @@ input[type="reset"] {
     @extend %splitbtn;
     .options {
         color:#777;
-        &:hover {
+        &:hover,
+        &:focus {
             box-shadow:
                 rgba(0,0,0,0.07) 0 1px 0 inset,
                 rgba(0,0,0,0.07) -1px 0 0 inset,
@@ -346,7 +359,9 @@ input[type="reset"] {
     @extend %splitbtn;
     .options {
         background: darken($blue, 5%);
-        &:hover, &.active {
+        &:hover,
+        &.active,
+        &:focus {
             background: darken($blue, 10%);
         }
     }
@@ -357,7 +372,8 @@ input[type="reset"] {
     @extend %splitbtn;
     .options {
         background: darken($green, 6%);
-        &:hover {
+        &:hover,
+        &:focus {
             background: darken($green, 8%);
         }
     }
@@ -368,7 +384,8 @@ input[type="reset"] {
     @extend %splitbtn;
     .options {
         background: darken($red, 6%);
-        &:hover {
+        &:hover,
+        &:focus {
             background: darken($red, 10%);
         }
     }
@@ -379,7 +396,8 @@ input[type="reset"] {
     @extend %splitbtn;
     .options {
         background: lighten($darkgrey, 4%);
-        &:hover {
+        &:hover,
+        &:focus {
             background: $darkgrey;
         }
     }

core/client/assets/sass/modules/forms.scss

@@ -171,6 +171,10 @@ textarea,
 
     @include transition(border-color, 0.15s linear);
 
+    &:focus {
+        border-color: $brown;
+    }
+
 }
 
 textarea {
@@ -181,13 +185,6 @@ textarea {
     min-height: 6.5em;
 }
 
-#{$all-text-inputs-focus},
-textarea:focus {
-    border-color: $brown;
-    outline: 0;
-    outline-width: 0;
-}
-
 // 'vanilla' CSS hack to specifically target Firefox
 @-moz-document url-prefix() {
     select {

core/client/assets/sass/modules/navbar.scss

@@ -24,12 +24,14 @@
     color: lighten($grey, 10%);
     @include box-sizing(border-box);
 
-    &:hover {
+    &:hover,
+    &:focus {
         text-decoration: none;
     }
 }
 
-.ghost-logo:hover {
+.ghost-logo:hover,
+.ghost-logo:focus {
     color: $lightgrey;
     background: darken($darkgrey, 2%);
 }
@@ -75,6 +77,7 @@
             }
 
             a:hover,
+            a:focus,
             &.active a {
                 color: $lightgrey;
                 text-decoration: none;
@@ -174,7 +177,8 @@
             a {
                 color: $lightgrey;
 
-                &:hover {
+                &:hover,
+                &:focus {
                     background: darken($darkgrey, 10%);
                     @include transition(none);
                     box-shadow: none;
@@ -286,6 +290,7 @@
             border-bottom: $grey 1px solid;
 
             a:hover,
+            a:focus,
             &.active a {
                 box-shadow: none;
             }
@@ -329,7 +334,8 @@
                 @include transition(left 0.3s ease 0s);
             }
             > a {
-                &:hover {
+                &:hover,
+                &:focus {
                     background: inherit;
                 }
                 &.active {
@@ -354,7 +360,8 @@
                 a {
                     background: darken($grey, 3%);
 
-                    &:hover {
+                    &:hover,
+                    &:focus {
                         background: darken($grey, 8%);
                     }
                     &:before {

core/client/assets/sass/modules/navs.scss

@@ -26,7 +26,8 @@ nav {
             color: $brown;
             border-bottom: $lightbrown 1px solid;
 
-            &:hover {
+            &:hover,
+            &:focus {
                 color: $darkgrey;
                 background: $lightbrown;
                 text-decoration: none;