Refactor button styles to avoid repeating styles

alphagov · May 13, 2019 · fe69862 · fe69862
1 parent c10173c
commit fe69862
Showing 1 changed file with 19 additions and 83 deletions.
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -27,7 +27,6 @@
 
   .govuk-button {
     @include govuk-font($size: 19, $line-height: 19px);
-    @include govuk-focusable;
 
     box-sizing: border-box;
     display: inline-block;
@@ -63,17 +62,6 @@
       text-decoration: none;
     }
 
-    // alphagov/govuk_template includes a specific a:link:focus selector
-    // designed to make unvisited links a slightly darker blue when focussed, so
-    // we need to override the text colour for that combination of selectors so
-    // so that unvisited links styled as buttons do not end up with dark blue
-    // text when focussed.
-    @include govuk-compatibility(govuk_template) {
-      &:link:focus {
-        color: $govuk-button-text-colour;
-      }
-    }
-
     // Fix unwanted button padding in Firefox
     &::-moz-focus-inner {
       padding: 0;
@@ -84,37 +72,37 @@
       background-color: $govuk-button-hover-colour;
     }
 
-    &:focus {
-      outline-color: transparent;
-      color: $govuk-focus-text-colour;
-      background-color: $govuk-focus-colour;
-      box-shadow: 0 2px 0 $govuk-focus-text-colour;
-    }
-
     &:active {
       // Bump the button down by 2px so it looks like its being pressed in
       position: relative;
       top: 2px;
 
-      border: $govuk-border-width-form-element solid $govuk-focus-colour;
-      color: $govuk-button-text-colour;
-      background-color: $govuk-button-hover-colour;
-      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
-
       @include govuk-if-ie8 {
         border-bottom-width: 0;
       }
     }
 
-    &:focus:hover {
-      border: $govuk-border-width-form-element solid $govuk-focus-colour;
-      color: $govuk-button-text-colour;
-      background-color: $govuk-button-hover-colour;
-      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
-
+    &:focus {
+      border-color: $govuk-focus-colour;
+      // When colours are overridden, for example when users have a dark mode,
+      // backgrounds and box-shadows disappear, so we need to ensure there's a
+      // transparent outline which will be set to a visible colour.
+      @include govuk-not-ie8 {
+        outline: $govuk-focus-width solid transparent;
+        outline-offset: 0;
+      }
       @include govuk-if-ie8 {
-        border-bottom-width: 0;
+        color: $govuk-text-colour;
+        background-color: $govuk-focus-colour;
       }
+      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+    }
+
+    &:focus:not(:active):not(:hover) {
+      border-color: $govuk-focus-colour;
+      color: $govuk-text-colour;
+      background-color: $govuk-focus-colour;
+      box-shadow: 0 2px 0 $govuk-focus-text-colour;
     }
 
     // The following adjustments do not work for <input type="button"> as
@@ -201,32 +189,6 @@
     &:hover {
       background-color: $govuk-secondary-button-hover-colour;
     }
-
-    &:active {
-      // Bump the button down by 2px so it looks like its being pressed in
-      position: relative;
-      top: 2px;
-
-      border: $govuk-border-width-form-element solid $govuk-focus-colour;
-      color: $govuk-secondary-button-text-colour;
-      background-color: $govuk-secondary-button-hover-colour;
-      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
-
-      @include govuk-if-ie8 {
-        border-bottom-width: 0;
-      }
-    }
-
-    &:focus:hover {
-      border: $govuk-border-width-form-element solid $govuk-focus-colour;
-      color: $govuk-secondary-button-text-colour;
-      background-color: $govuk-secondary-button-hover-colour;
-      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
-
-      @include govuk-if-ie8 {
-        border-bottom-width: 0;
-      }
-    }
   }
 
   .govuk-button--warning {
@@ -255,32 +217,6 @@
     &:hover {
       background-color: $govuk-warning-button-hover-colour;
     }
-
-    &:active {
-      // Bump the button down by 2px so it looks like its being pressed in
-      position: relative;
-      top: 2px;
-
-      border: $govuk-border-width-form-element solid $govuk-focus-colour;
-      color: $govuk-warning-button-text-colour;
-      background-color: $govuk-warning-button-hover-colour;
-      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
-
-      @include govuk-if-ie8 {
-        border-bottom-width: 0;
-      }
-    }
-
-    &:focus:hover {
-      border: $govuk-border-width-form-element solid $govuk-focus-colour;
-      color: $govuk-warning-button-text-colour;
-      background-color: $govuk-warning-button-hover-colour;
-      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
-
-      @include govuk-if-ie8 {
-        border-bottom-width: 0;
-      }
-    }
   }
 
   .govuk-button--start {