diff -u b/core/themes/seven/css/components/dropzone.css b/core/themes/seven/css/components/dropzone.css --- b/core/themes/seven/css/components/dropzone.css +++ b/core/themes/seven/css/components/dropzone.css @@ -24,7 +24,8 @@ border-left: 1px solid #bfbfbf; } -.dropzone__trigger.is-hovering { +.dropzone__trigger.is-hovering, +.dropzone__trigger.is-focused { background-position: -100px center; } @@ -77,7 +78,7 @@ } .dropzone__no-trigger .description li { - display: inline-block; + display: inline; } .dropzone__no-trigger .description li:after { diff -u b/core/themes/seven/css/components/managed-file.css b/core/themes/seven/css/components/managed-file.css --- b/core/themes/seven/css/components/managed-file.css +++ b/core/themes/seven/css/components/managed-file.css @@ -51,38 +51,38 @@ .form-type-managed-file .remove-button { position: absolute; - top: 15px; - right: 10px; /* LTR */ + top: 13px; + right: 8px; /* LTR */ width: auto; margin: 0; - padding: 0 20px 0 0; + padding: 2px 20px 2px 2px; text-transform: lowercase; color: transparent; border: 0; - background: transparent url(../../../../misc/icons/787878/ex.svg) right 0 no-repeat; /* LTR */ - box-shadow: none; + background: transparent url(../../../../misc/icons/787878/ex.svg) right 2px no-repeat; /* LTR */ font-weight: normal; line-height: 16px; } [dir="rtl"] .form-type-managed-file .remove-button { right: auto; - left: 10px; - background-position: left 0; + left: 8px; + padding: 2px 2px 2px 20px; + background-position: left 2px; } .form-type-managed-file .remove-button:focus { - outline: none; - box-shadow: none; + color: #787878; + border-radius: 0; } .form-type-managed-file .remove-button:hover { color: #e00; border: 0; - background: url(../../../../misc/icons/ee0000/ex.svg) right 0 no-repeat; /* LTR */ + background: url(../../../../misc/icons/ee0000/ex.svg) right 2px no-repeat; /* LTR */ box-shadow: none; } [dir="rtl"] .form-type-managed-file .remove-button:hover { - background-position: left 0; + background-position: left 2px; } /** @@ -116,14 +116,14 @@ display: table; } -.form-type-managed-file .draggable td:first-child a.tabledrag-handle, +.form-type-managed-file .draggable td:first-child .tabledrag-handle, .form-type-managed-file .draggable td:first-child .form-managed-file { display: table-cell; padding-top: 10px; vertical-align: top; } -.form-type-managed-file .draggable td:first-child a.tabledrag-handle { +.form-type-managed-file .draggable td:first-child .tabledrag-handle { float: none; } @@ -160,7 +160,7 @@ /** * Stop input elements from breaking out of their container. */ -.form-type-managed-file input.form-text { +.form-type-managed-file .form-text { width: 100%; max-width: 500px; } diff -u b/core/themes/seven/js/dropzone.es6.js b/core/themes/seven/js/dropzone.es6.js --- b/core/themes/seven/js/dropzone.es6.js +++ b/core/themes/seven/js/dropzone.es6.js @@ -88,6 +88,18 @@ .closest('.dropzone') .find('.dropzone__trigger') .removeClass('is-hovering'); + }) + .on('focus', e => { + $(e.currentTarget) + .closest('.dropzone') + .find('.dropzone__trigger') + .addClass('is-focused'); + }) + .on('blur', e => { + $(e.currentTarget) + .closest('.dropzone') + .find('.dropzone__trigger') + .removeClass('is-focused'); }); }); @@ -161,7 +173,6 @@ $(this) - .closest('div.js-form-managed-file') + .closest('.js-form-managed-file') .find('.file-upload-js-error') .insertBefore($(this).closest('.js-form-item')); }; - })(jQuery, Drupal, drupalSettings); diff -u b/core/themes/seven/js/dropzone.js b/core/themes/seven/js/dropzone.js --- b/core/themes/seven/js/dropzone.js +++ b/core/themes/seven/js/dropzone.js @@ -46,6 +46,10 @@ $(e.currentTarget).closest('.dropzone').find('.dropzone__trigger').addClass('is-hovering'); }).on('dragleave mouseleave', function (e) { $(e.currentTarget).closest('.dropzone').find('.dropzone__trigger').removeClass('is-hovering'); + }).on('focus', function (e) { + $(e.currentTarget).closest('.dropzone').find('.dropzone__trigger').addClass('is-focused'); + }).on('blur', function (e) { + $(e.currentTarget).closest('.dropzone').find('.dropzone__trigger').removeClass('is-focused'); }); }); @@ -92,5 +96,5 @@ Drupal.file.validateExtension = function (event) { validateExtension.bind(this)(event); - $(this).closest('div.js-form-managed-file').find('.file-upload-js-error').insertBefore($(this).closest('.js-form-item')); + $(this).closest('.js-form-managed-file').find('.file-upload-js-error').insertBefore($(this).closest('.js-form-item')); }; })(jQuery, Drupal, drupalSettings); \ No newline at end of file