diff --git a/CHANGELOG.md b/CHANGELOG.md index 479b506fad..814723dd85 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ This was added in [pull request #2164: Enable cookie banner to set link styled a - [#2186: Fix display of warning text in Edge when Windows High Contrast Mode is enabled](https://github.com/alphagov/govuk-frontend/pull/2186) - [#2192: Add data-nosnippet to prevent cookie banner text appearing in Google Search snippets](https://github.com/alphagov/govuk-frontend/pull/2192) - [#2201: Set -webkit-appearance: button on file upload so text is aligned in Safari](https://github.com/alphagov/govuk-frontend/pull/2201) +- [#2205: Stop file upload component 'jumping' on focus](https://github.com/alphagov/govuk-frontend/pull/2205) ## 3.11.0 (Feature release) diff --git a/src/govuk/components/file-upload/_index.scss b/src/govuk/components/file-upload/_index.scss index 0f73ee4cbb..97ffc19e31 100644 --- a/src/govuk/components/file-upload/_index.scss +++ b/src/govuk/components/file-upload/_index.scss @@ -8,8 +8,8 @@ .govuk-file-upload { @include govuk-font($size: 19); @include govuk-text-colour; - padding-top: $component-padding; - padding-bottom: $component-padding; + margin-left: -$component-padding; + padding: $component-padding; // The default file upload button in Safari does not // support setting a custom font-size. Set `-webkit-appearance` @@ -23,13 +23,6 @@ } &:focus { - // "Yank" the padding with negative margin to avoid a jump - // when element is focused - margin-right: -$component-padding; - margin-left: -$component-padding; - padding-right: $component-padding; - padding-left: $component-padding; - outline: $govuk-focus-width solid $govuk-focus-colour; // Use `box-shadow` to add border instead of changing `border-width` // (which changes element size) and since `outline` is already used for the @@ -48,11 +41,6 @@ // to recognise `focus-within` and don't set any styles from the block // when it's a selector. &:focus-within { - margin-right: -$component-padding; - margin-left: -$component-padding; - padding-right: $component-padding; - padding-left: $component-padding; - outline: $govuk-focus-width solid $govuk-focus-colour; box-shadow: inset 0 0 0 4px $govuk-input-border-colour;