flewkey
/
tooty
1
0
Fork 0
Code Releases Activity

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:
Vincent Jousse 2017-05-12 11:41:53 +02:00 committed by Nicolas Perriault
parent 2f856a8bc3
commit 7f6bfce7ba
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/style.css
View File

@ -444,16 +444,21 @@ li.load-more {
background: rgba(0, 0, 0, 0.85);
}
.draft-attachment-input {
#draft-attachment {
display:none;
}
.draft-attachment-input-label {
display: block;
position: relative;
width: 100%;
cursor: pointer;
height: 38px;
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);
color: #c8c8c8;
line-height: 34px;
@ -472,14 +477,14 @@ input.form-control[type=file] {
background: none;
}
input[type=file]:focus {
.draft-attachment-input-label:focus {
outline: 0;
outline-offset: 0;
border-color: #000;
box-shadow: none;
}
.draft-attachment-input:hover:after {
.draft-attachment-input-label:hover:after {
background-image: linear-gradient(#020202, #101112 40%, #141618);
}

14
src/View/Draft.elm
View File

@ -323,13 +323,15 @@ fileUploadField draft =
button [ class "btn btn-default btn-loading", disabled True ]
[ text "Uploading media..." ]
else if List.length draft.attachments < 4 then
input
[ type_ "file"
, id "draft-attachment"
, class "form-control draft-attachment-input"
, on "change" (Decode.succeed <| DraftEvent (UploadMedia "draft-attachment"))
label [ class "form-control draft-attachment-input-label" ]
[ input
[ type_ "file"
, id "draft-attachment"
, on "change" (Decode.succeed <| DraftEvent (UploadMedia "draft-attachment"))
]
[]
, text ""
]
[]
else
text ""
]