diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css index 0db7a3c..671b204 100644 --- a/core/modules/outside_in/css/outside_in.theme.css +++ b/core/modules/outside_in/css/outside_in.theme.css @@ -64,9 +64,23 @@ outline: 1px dashed rgba(0,0,0,0.5); box-shadow: 0 0 0 1px rgba(255,255,255,0.7); } -.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover, -.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable { - background-color: rgba(0,0,0,0.2); + +.js-tray-open .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable { + position: relative; + z-index: 100; + opacity: 1; + filter: alpha(opacity=100); +} +.js-tray-open .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover:not(.outside-in-active-editable) { + box-shadow: 0 0 0 1px rgba(255,255,255,0.6); + opacity: 0.6; + filter: alpha(opacity=60); + cursor: pointer; +} + +.js-tray-open .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:not(.outside-in-active-editable) { + opacity: 0.1; + filter: alpha(opacity=10); } /* Style the dialog-off-canvas container. */ diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js index 83416c2..f1618d1 100644 --- a/core/modules/outside_in/js/outside_in.js +++ b/core/modules/outside_in/js/outside_in.js @@ -156,6 +156,10 @@ $(window).on({ 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) { if ($element.is('#drupal-off-canvas')) { + // Attach ui-overlay + if(!$('.ui-widget-overlay').length) { + $('body').append('
'); + } $('body .outside-in-active-editable').removeClass('outside-in-active-editable'); var $activeElement = $('#' + settings.outsideInActiveEditableId); if ($activeElement.length) { @@ -166,8 +170,10 @@ }, 'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) { if ($element.is('#drupal-off-canvas')) { + // Remove ui-overlay + $('#widget-overlay-outside').remove(); $('body .outside-in-active-editable').removeClass('outside-in-active-editable'); } } }); -})(jQuery, Drupal); \ No newline at end of file +})(jQuery, Drupal);