Skip to content

Commit

Permalink
Style the file upload component
Browse files Browse the repository at this point in the history 
New styles for file upload component. Includes adjusting the `z-index`
when the dropzone is toggled.
  • Loading branch information
@patrickpatrickpatrick
patrickpatrickpatrick committed Jan 28, 2025
1 parent d8f48a6 commit dffc168
Showing 1 changed file with 82 additions and 56 deletions.
138 changes: 82 additions & 56 deletions packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -48,34 +49,21 @@
}

.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;
outline: 3px solid #ffdd00;
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%;
Expand All @@ -85,62 +73,100 @@
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-color: transparent;
}

.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;
}

.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;
}
}

0 comments on commit dffc168

Please sign in to comment.