Simplify outline-offset usage

We don't need to set this to zero everywhere, only on some inputs.

alphagov/govuk_elements#346

src/components/accordion/_accordion.scss

@@ -132,7 +132,6 @@
       // backgrounds and box-shadows disappear, so we need to ensure there's a
       // transparent outline which will be set to a visible colour.
       outline: $govuk-focus-width solid transparent;
-      outline-offset: 0;
       color: $govuk-text-colour;
       // sass-lint:disable indentation
       box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-focus-colour,

src/components/button/_button.scss

@@ -89,7 +89,6 @@
       // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
       @include govuk-not-ie8 {
         outline: $govuk-focus-width solid transparent;
-        outline-offset: 0;
       }
       // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
       @include govuk-if-ie8 {

src/components/error-summary/_error-summary.scss

@@ -15,7 +15,7 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
+
     }
   }
 

src/components/file-upload/_file-upload.scss

@@ -24,7 +24,6 @@
       padding-left: $component-padding;
 
       outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
       // Use `box-shadow` to add border instead of changing `border-width`
       // (which changes element size) and since `outline` is already used for the
       // yellow focus state.
@@ -48,7 +47,7 @@
       padding-left: $component-padding;
 
       outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
+
 
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
     }

src/components/input/_input.scss

@@ -26,6 +26,7 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
+      //Ensure outline appears outside of the element
       outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
       // components such as textarea where we avoid changing `border-width` as

src/components/select/_select.scss

@@ -18,6 +18,7 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
+      //Ensure outline appears outside of the element
       outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` to do
       // this instead of changing `border-width` (which changes element size) and

src/components/skip-link/_skip-link.scss

@@ -25,7 +25,6 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
       background-color: $govuk-focus-colour;
     }
   }

src/components/textarea/_textarea.scss

@@ -26,8 +26,8 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
+      //Ensure outline appears outside of the element
       outline-offset: 0;
-
       // Double the border by adding its width again. Use `box-shadow` to do
       // this instead of changing `border-width` (which changes element size) and
       // since `outline` is already used for the yellow focus state.

src/helpers/_focused.scss

@@ -15,7 +15,6 @@
   // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
   @include govuk-not-ie8 {
     outline: $govuk-focus-width solid transparent;
-    outline-offset: 0;
   }
   color: $govuk-focus-text-colour;
   background-color: $govuk-focus-colour;