[Scorecards 2023] More prominent focus styles

GOV.UK-inspired focus styles for links, buttons, and form controls.

Part of #545.

scoring/static/scoring/scss/buttons.scss

@@ -7,8 +7,9 @@
   width: 250px;
 
   &:focus {
-      outline: 3px solid $color-scorecard-yellow;
-      @include box-shadow(0px, 0px, 0px, 5px, $black);
+      outline: 0 !important;
+      border-color: $black !important;
+      box-shadow: 0 0 0 1px $black inset, 0 0 0 2px $black, 0 0 0 6px $color-scorecard-yellow !important;
       background-color: $white !important;
   }
 
@@ -18,3 +19,23 @@
     padding-left: 28px;
   }
 }
+
+a,
+.btn,
+.link-light,
+button {
+  &:focus {
+    outline: 0 !important;
+    color: $black !important;
+    background-color: $color-scorecard-yellow !important;
+    box-shadow: 0 -2px $color-scorecard-yellow, 0 4px $black !important;
+    text-decoration: none !important;
+  }
+}
+
+// No need for yellow top-shadow on buttons
+.btn {
+  &:focus {
+    box-shadow: 0 4px $black !important;
+  }
+}

scoring/static/scoring/scss/input.scss

@@ -18,6 +18,16 @@
   }
 }
 
+.form-check-input,
+.form-control,
+.form-select {
+  &:focus {
+    outline: 0 !important;
+    border-color: $black !important;
+    box-shadow: 0 0 0 1px $black inset, 0 0 0 2px $black, 0 0 0 6px $color-scorecard-yellow !important;
+  }
+}
+
 // Radio buttons
 .radio-btn.is--with-label {
   @include responsive(font-size, 12, 13);

scoring/static/scoring/scss/mixins.scss

@@ -69,16 +69,6 @@ $max-viewport: 1792;
     }
 }
 
-// Cross-browser mixin
-/* Usage for input focus
-    @include box-shadow(0px, 0px, 0px, 5px, $black);
-*/
-@mixin box-shadow($top, $left, $blur, $size, $color) {
-    -webkit-box-shadow: $top $left $blur $size $color;
-    -moz-box-shadow: $top $left $blur $size $color;
-    box-shadow: $top $left $blur $size $color;
- }
-
 // Bootstrap 4 backwards compatability mixins
 
 @mixin hover-focus() {