Permalink
Browse files

feat(form-file): Use `label` as wrapper element + name-spaced custom …

…CSS (#1353)

The original Microsoft Edge bug that affected for inputs wrapped in a label element has been fixed as of May 2017. https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8282613/

So we can revert back to using the `<label>` element as the wrapper for the custom file input.

This PR also name-spaces the Bootstrap-Vue custom `custom-file` CSS to negate the need for scoped CSS.
  • Loading branch information...
tmorehouse committed Nov 15, 2017
1 parent 6a1ef4f commit e2bc891a1cd65703a412643eba60438a2a7b1ee9
Showing with 23 additions and 21 deletions.
  1. +23 −21 src/components/form-file/form-file.vue
@@ -1,49 +1,51 @@
<style scoped>
/* Custom-file focus styling: These can be removed once BSV4.beta.3 is released */
<style>
/* Custom-file focus styling: These can possibly be removed once BSV4.beta.3 is released */
/* Although the focus handling/style will still be needed for Firefox keyboard-only users */
/* Regular focus styling */
.custom-file-input.focus ~ .custom-file-control,
.custom-file-input:focus ~ .custom-file-control {
.b-form-file.custom-file .custom-file-input.focus ~ .custom-file-control,
.b-form-file.custom-file .custom-file-input:focus ~ .custom-file-control {
color: #495057;
background-color: #fff;
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
outline: none;
}
/* Invalid focus styling */
.custom-file-input.is-invalid.focus ~ .custom-file-control,
.custom-file-input.is-invalid:focus ~ .custom-file-control,
.was-validated .custom-file-input:invalid.focus ~ .custom-file-control,
.was-validated .custom-file-input:invalid:focus ~ .custom-file-control {
.b-form-file.custom-file .custom-file-input.is-invalid.focus ~ .custom-file-control,
.b-form-file.custom-file .custom-file-input.is-invalid:focus ~ .custom-file-control,
.was-validated .b-form-file.custom-file .custom-file-input:invalid.focus ~ .custom-file-control,
.was-validated .b-form-file.custom-file .custom-file-input:invalid:focus ~ .custom-file-control {
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
border-color: #dc3545;
}
/* valid focus styling */
.custom-file-input.is-valid.focus ~ .custom-file-control,
.custom-file-input.is-valid:focus ~ .custom-file-control,
.was-validated .custom-file-input:valid.focus ~ .custom-file-control,
.was-validated .custom-file-input:valid:focus ~ .custom-file-control {
.b-form-file.custom-file .custom-file-input.is-valid.focus ~ .custom-file-control,
.b-form-file.custom-file .custom-file-input.is-valid:focus ~ .custom-file-control,
.was-validated .b-form-file.custom-file .custom-file-input:valid.focus ~ .custom-file-control,
.was-validated .b-form-file.custom-file .custom-file-input:valid:focus ~ .custom-file-control {
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
border-color: #28a745;
}
/* Drag/Drop and filenames/prompts handling */
.custom-file-control {
.b-form-file.custom-file .custom-file-control {
overflow: hidden;
}
.custom-file-control {
.b-form-file.custom-file .custom-file-control {
overflow: hidden;
}
.custom-file-control.dragging {
.b-form-file.custom-file .custom-file-control.dragging {
overflow: hidden;
filter: blur(3px);
}
.custom-file-control[data-selected]::after {
.b-form-file.custom-file .custom-file-control[data-selected]::after {
content: attr(data-selected);
}
.custom-file-control[data-choose]::before {
.b-form-file.custom-file .custom-file-control[data-choose]::before {
content: attr(data-choose);
}
.custom-file .drop-here {
.b-form-file.custom-file .drop-here {
position: absolute;
left: 0;
right: 0;
@@ -56,7 +58,7 @@
justify-content: center;
align-items: center;
}
.custom-file .drop-here::before {
.b-form-file.custom-file .drop-here::before {
color: white;
content: attr(data-drop);
}
@@ -134,9 +136,9 @@
// Return rendered custom file input
return h(
'div',
'label',
{
class: [ 'custom-file', 'w-100', t.stateClass ],
class: [ 'custom-file', 'b-form-file', 'w-100', t.stateClass ],
attrs: { id: t.safeId('_BV_file_outer_') },
on: { dragover: t.dragover }
},

0 comments on commit e2bc891

Please sign in to comment.