Fix input file (attachment) styling for Firefox (#162)
The trick is to hide the input field and style the label instead.
This commit is contained in:
parent
2f856a8bc3
commit
7f6bfce7ba
|
@ -444,16 +444,21 @@ li.load-more {
|
||||||
background: rgba(0, 0, 0, 0.85);
|
background: rgba(0, 0, 0, 0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
.draft-attachment-input {
|
#draft-attachment {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.draft-attachment-input-label {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.draft-attachment-input:after {
|
.draft-attachment-input-label:after {
|
||||||
background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
|
background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
|
||||||
color: #c8c8c8;
|
color: #c8c8c8;
|
||||||
line-height: 34px;
|
line-height: 34px;
|
||||||
|
@ -472,14 +477,14 @@ input.form-control[type=file] {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=file]:focus {
|
.draft-attachment-input-label:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
outline-offset: 0;
|
outline-offset: 0;
|
||||||
border-color: #000;
|
border-color: #000;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.draft-attachment-input:hover:after {
|
.draft-attachment-input-label:hover:after {
|
||||||
background-image: linear-gradient(#020202, #101112 40%, #141618);
|
background-image: linear-gradient(#020202, #101112 40%, #141618);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -323,13 +323,15 @@ fileUploadField draft =
|
||||||
button [ class "btn btn-default btn-loading", disabled True ]
|
button [ class "btn btn-default btn-loading", disabled True ]
|
||||||
[ text "Uploading media..." ]
|
[ text "Uploading media..." ]
|
||||||
else if List.length draft.attachments < 4 then
|
else if List.length draft.attachments < 4 then
|
||||||
input
|
label [ class "form-control draft-attachment-input-label" ]
|
||||||
[ type_ "file"
|
[ input
|
||||||
, id "draft-attachment"
|
[ type_ "file"
|
||||||
, class "form-control draft-attachment-input"
|
, id "draft-attachment"
|
||||||
, on "change" (Decode.succeed <| DraftEvent (UploadMedia "draft-attachment"))
|
, on "change" (Decode.succeed <| DraftEvent (UploadMedia "draft-attachment"))
|
||||||
|
]
|
||||||
|
[]
|
||||||
|
, text ""
|
||||||
]
|
]
|
||||||
[]
|
|
||||||
else
|
else
|
||||||
text ""
|
text ""
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in New Issue