Permalink
Browse files

fix(form-file): invalid/valid feedback display for plain file input m…

…issing in Bootstrap V4 (#1373)

* fix(form-file): invalid/valid feedbcack display for plain file input

Bootstrap V4.beta.2 is missing the styles to display invalid and valid feedback for plain `form-control-file` inputs.

twbs/bootstrap#24831

* Update form-file.vue
  • Loading branch information...
tmorehouse committed Nov 20, 2017
1 parent 281945d commit 85ab0d0b418559d36cd693d235167e933a3d906e
Showing with 10 additions and 1 deletion.
  1. +10 −1 src/components/form-file/form-file.vue
@@ -27,6 +27,15 @@
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
border-color: #28a745;
}
/* Interim fix (until BS V4.beta.3) for is-{state} feedback for plain form-file input */
/* See issue https://github.com/twbs/bootstrap/issues/24831 */
.form-control-file.is-invalid ~ .invalid-feedback,
.form-control-file.is-valid ~ .valid-feedback,
.was-validated .form-control-file:invalid ~ .invalid-feedback,
.was-validated .form-control-file:valid ~ .valid-feedback {
display: block;
}
/* Drag/Drop and filenames/prompts handling */
.b-form-file.custom-file .custom-file-control {
@@ -138,7 +147,7 @@
return h(
'label',
{
class: [ 'custom-file', 'b-form-file', 'w-100', t.stateClass ],
class: [ 'custom-file', 'b-form-file', t.stateClass, 'w-100', 'd-block' ],
attrs: { id: t.safeId('_BV_file_outer_') },
on: { dragover: t.dragover }
},

0 comments on commit 85ab0d0

Please sign in to comment.