159360692f
- Display validation errors. - Rerender validated form data correctly. - Clear error state correctly.
72 lines
1.2 KiB
SCSS
72 lines
1.2 KiB
SCSS
.upload-widget {
|
|
position: relative;
|
|
|
|
label.upload-label {
|
|
text-align: right;
|
|
border: 1px solid black;
|
|
padding: 0;
|
|
display: block;
|
|
|
|
.upload-button {
|
|
padding: 1rem 1.5rem;
|
|
display: inline-block;
|
|
background-color: $color-blue;
|
|
border: 1px solid $color-blue;
|
|
margin: -1px;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: $color-blue-darker;
|
|
}
|
|
}
|
|
}
|
|
|
|
input {
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.uploaded-file {
|
|
.icon {
|
|
vertical-align: middle;
|
|
|
|
svg * {
|
|
fill: $color-green;
|
|
}
|
|
}
|
|
|
|
.uploaded-file__name {
|
|
vertical-align: middle;
|
|
margin-left: 0.5rem;
|
|
font-weight: $font-bold;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.uploaded-file__remove {
|
|
vertical-align: middle;
|
|
margin-left: 2rem;
|
|
font-size: $small-font-size;
|
|
}
|
|
}
|
|
|
|
.usa-input--error {
|
|
.upload-widget {
|
|
label.upload-label {
|
|
border: 1px solid $color-red;
|
|
box-shadow: inset 0 0 0 2px $color-red;
|
|
position: relative;
|
|
|
|
.upload-button {
|
|
margin-left: -3px;
|
|
border-left: 3px solid $color-red;
|
|
}
|
|
|
|
.icon {
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|