From 6a4b97640646a3af0a838ce3d413b029eba4b6ea Mon Sep 17 00:00:00 2001 From: Patrick Cartlidge Date: Tue, 28 Jan 2025 10:24:55 +0000 Subject: [PATCH] Style the file upload component New styles for file upload component. Includes adjusting the `z-index` when the dropzone is toggled. --- .../govuk/components/file-upload/_index.scss | 138 +++++++++++------- 1 file changed, 82 insertions(+), 56 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss index 2f0b702a7b..b14f587151 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss @@ -3,6 +3,7 @@ @import "../label/index"; @include govuk-exports("govuk/component/file-upload") { + $file-upload-border-width: 2px; $component-padding: govuk-spacing(1); .govuk-file-upload { @@ -48,34 +49,20 @@ } .govuk-file-upload-wrapper { - display: inline-flex; - align-items: baseline; + display: block; position: relative; + z-index: 0; } .govuk-file-upload-wrapper--show-dropzone { - $dropzone-padding: govuk-spacing(2); - $dropzone-offset: $dropzone-padding + $govuk-border-width-form-element; - - // Add negative margins to all sides so that content doesn't jump due to - // the addition of the padding and border. - margin: -$dropzone-offset; - padding: $dropzone-padding; - border: $govuk-border-width-form-element dashed $govuk-input-border-colour; background-color: $govuk-body-background-colour; - - .govuk-file-upload__pseudo-button, - .govuk-file-upload__status { - // When the dropzone is hovered over, make these aspects not accept - // mouse events, so dropped files fall through to the input beneath them - pointer-events: none; - } } .govuk-file-upload-wrapper .govuk-file-upload { + position: absolute; // Make the native control take up the entire space of the element, but // invisible and behind the other elements until we need it - position: absolute; + z-index: -1; top: 0; left: 0; width: 100%; @@ -85,62 +72,101 @@ opacity: 0; } + .govuk-file-upload-wrapper--show-dropzone .govuk-file-upload { + z-index: 1; + } + .govuk-file-upload__pseudo-button { width: auto; - margin-bottom: 0; - flex-grow: 0; flex-shrink: 0; } - .govuk-file-upload__status { + .govuk-file-upload__pseudo-button-container > * { margin-bottom: 0; + } + + .govuk-file-upload__instruction { margin-left: govuk-spacing(2); } -} -.govuk-file-upload__button:focus { - outline: none; -} + .govuk-file-upload__status { + display: block; + margin-bottom: govuk-spacing(2); + padding: govuk-spacing(3) govuk-spacing(2); + text-align: left; + } -.govuk-file-upload__button:focus .govuk-file-upload__pseudo-button { - outline: 3px solid transparent; - background-color: $govuk-focus-colour; - box-shadow: 0 2px 0 govuk-colour("black"); -} + .govuk-file-upload__status--empty { + color: govuk-shade(govuk-colour("blue"), 60%); + background-color: govuk-tint(govuk-colour("blue"), 70%); + } -.govuk-file-upload__button:focus .govuk-file-upload__pseudo-button:hover { - border-color: $govuk-focus-colour; - outline: 3px solid transparent; - background-color: govuk-colour("light-grey"); - box-shadow: inset 0 0 0 1px $govuk-focus-colour; -} + .govuk-file-upload__pseudo-button-container { + display: flex; + align-items: baseline; + } -.govuk-file-upload__button:active .govuk-file-upload__pseudo-button:hover { - background-color: govuk-shade(govuk-colour("light-grey"), 20%); -} + .govuk-file-upload__button { + width: 100%; + // align the padding to be same as notification banner and error summary accounting for the thicker borders + padding: govuk-spacing(3) (govuk-spacing(3) + $govuk-border-width - $file-upload-border-width); + border: $file-upload-border-width govuk-colour("mid-grey") dashed; + background-color: govuk-colour("white"); + cursor: pointer; + + @include govuk-media-query($from: tablet) { + padding: govuk-spacing(3) (govuk-spacing(4) + $govuk-border-width - $file-upload-border-width); + } + } -.govuk-file-upload__button { - align-items: center; - display: flex; - padding: 0; - border: 0; - background-color: transparent; -} + .govuk-file-upload__button:hover { + border-color: govuk-shade(govuk-colour("mid-grey"), 20%); + } -.govuk-file-upload:disabled + .govuk-file-upload__button { - pointer-events: none; -} + .govuk-file-upload-wrapper--show-dropzone .govuk-file-upload__button, + .govuk-file-upload__button:hover, + .govuk-file-upload__button:hover .govuk-file-upload__pseudo-button { + background-color: govuk-colour("light-grey"); + } -.govuk-file-upload:disabled + .govuk-file-upload__button .govuk-file-upload__pseudo-button { - opacity: (0.5); + .govuk-file-upload-wrapper--show-dropzone .govuk-file-upload__status--empty, + .govuk-file-upload__button:hover .govuk-file-upload__status--empty, + .govuk-file-upload__button:focus .govuk-file-upload__status--empty { + background-color: govuk-tint(govuk-colour("blue"), 80%); + } + + .govuk-file-upload-wrapper--show-dropzone .govuk-file-upload__button { + border: $file-upload-border-width solid govuk-colour("black"); + } + + .govuk-file-upload-wrapper--show-dropzone .govuk-file-upload__pseudo-button { + background-color: govuk-colour("white"); + } - &:hover { + .govuk-file-upload__button:active, + .govuk-file-upload__button:focus { + border: 2px solid govuk-colour("black"); + outline: $govuk-focus-width solid $govuk-focus-colour; + // Ensure outline appears outside of the element + outline-offset: 0; background-color: govuk-colour("light-grey"); - cursor: not-allowed; + // 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 + // it will change the element size. Also, `outline` cannot be utilised + // here as it is already used for the yellow focus state. + box-shadow: inset 0 0 0 $govuk-border-width-form-element; } - &:active { - top: 0; - box-shadow: 0 $govuk-border-width-form-element 0 govuk-shade(govuk-colour("white"), 60%); // s0 + .govuk-file-upload__button:focus .govuk-file-upload__pseudo-button { + background-color: $govuk-focus-colour; + box-shadow: 0 2px 0 govuk-colour("black"); + } + + .govuk-file-upload__button:focus:hover .govuk-file-upload__pseudo-button { + border-color: $govuk-focus-colour; + outline: 3px solid transparent; + background-color: govuk-colour("light-grey"); + box-shadow: inset 0 0 0 1px $govuk-focus-colour; } }