Add custom file upload component

The default browser file upload control is difficult to style, but looks totally
out of place.

This commit replaces it with one that has a GOV.UK style button, as a first
step.

Based heavily on this example:
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
This commit is contained in:
Chris Hill-Scott
2016-02-03 17:16:17 +00:00
parent 44045b2d09
commit 4447af3fec
9 changed files with 103 additions and 2 deletions
@@ -0,0 +1,36 @@
.js-enabled {
.file-upload {
&-label {
@include bold-19;
display: block;
margin: 0 0 10px 0;
}
&-field {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
&-field:focus + .file-upload-button {
outline: 3px solid $yellow;
}
&-button {
@include button($panel-colour);
display: inline-block;
}
&-filename {
display: inline-block;
padding-left: $gutter-half;
}
}
}