mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-11 18:37:33 -04:00
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:
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user