Skip to content

Commit

Permalink
Simplify outline-offset usage
Browse files Browse the repository at this point in the history
We don't need to set this to zero everywhere, only on some inputs.

alphagov/govuk_elements#346
  • Loading branch information
NickColley committed May 20, 2019
1 parent 38b445d commit 0b23b26
Show file tree
Hide file tree
Showing 9 changed files with 5 additions and 8 deletions.
1 change: 0 additions & 1 deletion src/components/accordion/_accordion.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion src/components/button/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/error-summary/_error-summary.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: 0;

}
}

Expand Down
3 changes: 1 addition & 2 deletions src/components/file-upload/_file-upload.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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;
}
Expand Down
1 change: 1 addition & 0 deletions src/components/input/_input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/components/select/_select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion src/components/skip-link/_skip-link.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@

&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: 0;
background-color: $govuk-focus-colour;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/textarea/_textarea.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
1 change: 0 additions & 1 deletion src/helpers/_focused.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 0b23b26

Please sign in to comment.