diff --git a/core/core.libraries.yml b/core/core.libraries.yml index 7698576..48ecfe4 100644 --- a/core/core.libraries.yml +++ b/core/core.libraries.yml @@ -185,11 +185,11 @@ drupal.dialog.ajax: drupal.dialog.off_canvas: version: VERSION js: - misc/dialog/offcanvas.js: {} + misc/dialog/off-canvas.js: {} css: component: - misc/dialog/offcanvas.css: {} - misc/dialog/offcanvas.motion.css: {} + misc/dialog/off-canvas.css: {} + misc/dialog/off-canvas.motion.css: {} dependencies: - core/jquery - core/drupal diff --git a/core/core.services.yml b/core/core.services.yml index f8b1522..a7b1654 100644 --- a/core/core.services.yml +++ b/core/core.services.yml @@ -1063,7 +1063,7 @@ services: class: Drupal\Core\Render\MainContent\OffCanvasRender arguments: ['@title_resolver', '@renderer'] tags: - - { name: render.main_content_renderer, format: drupal_dialog.offcanvas } + - { name: render.main_content_renderer, format: drupal_dialog.off_canvas } main_content_renderer.modal: class: Drupal\Core\Render\MainContent\ModalRenderer arguments: ['@title_resolver'] diff --git a/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php index fbb4761..96ad51c 100644 --- a/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php +++ b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php @@ -31,7 +31,7 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand { * populated automatically from the current request. */ public function __construct($title, $content, array $dialog_options = [], $settings = NULL) { - parent::__construct('#drupal-offcanvas', $title, $content, $dialog_options, $settings); + parent::__construct('#drupal-off-canvas', $title, $content, $dialog_options, $settings); $this->dialogOptions['modal'] = FALSE; $this->dialogOptions['autoResize'] = FALSE; $this->dialogOptions['resizable'] = 'w'; diff --git a/core/lib/Drupal/Core/Render/MainContent/OffCanvasRender.php b/core/lib/Drupal/Core/Render/MainContent/OffCanvasRender.php index 0729d3b..c1eeaab 100644 --- a/core/lib/Drupal/Core/Render/MainContent/OffCanvasRender.php +++ b/core/lib/Drupal/Core/Render/MainContent/OffCanvasRender.php @@ -10,7 +10,7 @@ use Symfony\Component\HttpFoundation\Request; /** - * Default main content renderer for offcanvas dialog requests. + * Default main content renderer for off_canvas dialog requests. */ class OffCanvasRender extends DialogRenderer { diff --git a/core/misc/ajax.js b/core/misc/ajax.js index fa32e05..524e978 100644 --- a/core/misc/ajax.js +++ b/core/misc/ajax.js @@ -314,7 +314,7 @@ * @prop {string} [dialogType] * One of `'modal'` or `'dialog'`. * @prop {string} [drupalDialogRenderer] - * Renderer for the dialog, 'offcanvas' supported. + * Renderer for the dialog, 'off_canvas' supported. * @prop {string} [prevent] * List of events on which to stop default action and stop propagation. */ diff --git a/core/misc/dialog/offcanvas.css b/core/misc/dialog/off-canvas.css similarity index 64% rename from core/misc/dialog/offcanvas.css rename to core/misc/dialog/off-canvas.css index 0e46c6a..170e962 100644 --- a/core/misc/dialog/offcanvas.css +++ b/core/misc/dialog/off-canvas.css @@ -2,22 +2,22 @@ * @file * CSS for Offcanvas tray. */ -/* Position the dialog-offcanvas tray container outside the right of the viewport. */ -.ui-dialog-offcanvas { +/* Position the dialog-off-canvas tray container outside the right of the viewport. */ +.ui-dialog-off-canvas { box-sizing: border-box; height: 100%; overflow: visible; } -/* Wrap the form that's inside the dialog-offcanvas tray. */ -.ui-dialog-offcanvas .ui-dialog-content { +/* Wrap the form that's inside the dialog-off-canvas tray. */ +.ui-dialog-off-canvas .ui-dialog-content { padding: 0 20px; /* Prevent horizontal scrollbar. */ overflow-x: hidden; overflow-y: auto; } -[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content { +[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content { text-align: right; } @@ -27,7 +27,7 @@ */ @media all and (max-width: 48em) { /* 768px */ - .ui-dialog.ui-dialog-offcanvas { + .ui-dialog.ui-dialog-off-canvas { width: 100% !important; } diff --git a/core/misc/dialog/offcanvas.js b/core/misc/dialog/off-canvas.js similarity index 75% rename from core/misc/dialog/offcanvas.js rename to core/misc/dialog/off-canvas.js index 7493e0a..3d37fd6 100644 --- a/core/misc/dialog/offcanvas.js +++ b/core/misc/dialog/off-canvas.js @@ -8,7 +8,7 @@ 'use strict'; // The minimum width to use body displace needs to match the width at which - // the tray will be %100 width. @see offcanvas.css + // the tray will be %100 width. @see off-canvas.css var minDisplaceWidth = 768; /** @@ -18,7 +18,7 @@ */ var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right'; - var $mainCanvasWrapper = $('[data-offcanvas-main-canvas]'); + var $mainCanvasWrapper = $('[data-off-canvas-main-canvas]'); /** * Resets the size of the dialog. @@ -47,7 +47,7 @@ $element .dialog('option', adjustedOptions) - .trigger('dialogContentResize.offcanvas'); + .trigger('dialogContentResize.off-canvas'); } /** @@ -60,7 +60,7 @@ var $element = event.data.$element; var $widget = $element.dialog('widget'); - var $offsets = $widget.find('> :not(#drupal-offcanvas, .ui-resizable-handle)'); + var $offsets = $widget.find('> :not(#drupal-off-canvas, .ui-resizable-handle)'); var offset = 0; var modalHeight; @@ -98,25 +98,25 @@ $(window).on({ 'dialog:aftercreate': function (event, dialog, $element, settings) { - if ($element.is('#drupal-offcanvas')) { + if ($element.is('#drupal-off-canvas')) { var eventData = {settings: settings, $element: $element}; - $('.ui-dialog-offcanvas, .ui-dialog-offcanvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title); + $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title); $element - .on('dialogresize.offcanvas', eventData, debounce(bodyPadding, 100)) - .on('dialogContentResize.offcanvas', eventData, handleDialogResize) - .on('dialogContentResize.offcanvas', eventData, debounce(bodyPadding, 100)) - .trigger('dialogresize.offcanvas'); + .on('dialogresize.off-canvas', eventData, debounce(bodyPadding, 100)) + .on('dialogContentResize.off-canvas', eventData, handleDialogResize) + .on('dialogContentResize.off-canvas', eventData, debounce(bodyPadding, 100)) + .trigger('dialogresize.off-canvas'); $element.dialog('widget').attr('data-offset-' + edge, ''); $(window) - .on('resize.offcanvas scroll.offcanvas', eventData, debounce(resetSize, 100)) - .trigger('resize.offcanvas'); + .on('resize.off-canvas scroll.off-canvas', eventData, debounce(resetSize, 100)) + .trigger('resize.off-canvas'); } }, 'dialog:beforecreate': function (event, dialog, $element, settings) { - if ($element.is('#drupal-offcanvas')) { + if ($element.is('#drupal-off-canvas')) { $('body').addClass('js-tray-open'); // @see http://api.jqueryui.com/position/ settings.position = { @@ -124,17 +124,17 @@ at: edge + ' top', of: window }; - settings.dialogClass += ' ui-dialog-offcanvas'; + settings.dialogClass += ' ui-dialog-off-canvas'; // Applies initial height to dialog based on window height. // See http://api.jqueryui.com/dialog for all dialog options. settings.height = $(window).height(); } }, 'dialog:beforeclose': function (event, dialog, $element) { - if ($element.is('#drupal-offcanvas')) { + if ($element.is('#drupal-off-canvas')) { $('body').removeClass('js-tray-open'); - $(document).off('.offcanvas'); - $(window).off('.offcanvas'); + $(document).off('.off-canvas'); + $(window).off('.off-canvas'); $mainCanvasWrapper.css('padding-' + edge, 0); } } diff --git a/core/misc/dialog/offcanvas.motion.css b/core/misc/dialog/off-canvas.motion.css similarity index 86% rename from core/misc/dialog/offcanvas.motion.css rename to core/misc/dialog/off-canvas.motion.css index 7228a29..c1379be 100644 --- a/core/misc/dialog/offcanvas.motion.css +++ b/core/misc/dialog/off-canvas.motion.css @@ -10,21 +10,21 @@ */ /* Transition the dialog-offcanvas tray container, with 2s delay to match main canvas speed. */ -.ui-dialog-offcanvas .ui-dialog-content { +.ui-dialog-off-canvas .ui-dialog-content { -webkit-transition: all .7s ease 2s; -moz-transition: all .7s ease 2s; transition: all .7s ease 2s; } @media (max-width: 700px) { - .ui-dialog-offcanvas .ui-dialog-content { + .ui-dialog-off-canvas .ui-dialog-content { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; transition: all .7s ease; } } -.dialog-offcanvas__main-canvas { +.dialog-off-canvas__main-canvas { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; transition: all .7s ease; diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/modules/outside_in/css/outside_in.motion.css index 1177225..61d68b7 100644 --- a/core/modules/outside_in/css/outside_in.motion.css +++ b/core/modules/outside_in/css/outside_in.motion.css @@ -15,9 +15,9 @@ } /* Transition the editables on the page, their contextual links and their hover states. */ -.dialog-offcanvas__main-canvas .contextual, -.dialog-offcanvas__main-canvas .js-outside-in-edit-mode .outside-in-editable, -.dialog-offcanvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable { +.dialog-off-canvas__main-canvas .contextual, +.dialog-off-canvas__main-canvas .js-outside-in-edit-mode .outside-in-editable, +.dialog-off-canvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; transition: all .7s ease; diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css index 91c01ab..011d198 100644 --- a/core/modules/outside_in/css/outside_in.theme.css +++ b/core/modules/outside_in/css/outside_in.theme.css @@ -60,16 +60,16 @@ } /* Style the editables while in edit mode. */ -.dialog-offcanvas__main-canvas.js-outside-in-edit-mode .outside-in-editable { +.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable { outline: 1px dashed rgba(0,0,0,0.5); box-shadow: 0 0 0 1px rgba(255,255,255,0.7); } -.dialog-offcanvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover, -.dialog-offcanvas__main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable { +.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); } -/* Style the dialog-offcanvas container. */ +/* Style the dialog-off-canvas container. */ .ui-dialog-outside-in { background: #444; border: 0 solid transparent; diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js index 650af46..9ec88de 100644 --- a/core/modules/outside_in/js/outside_in.js +++ b/core/modules/outside_in/js/outside_in.js @@ -9,7 +9,7 @@ var blockConfigureSelector = '[data-outside-in-edit]'; var toggleEditSelector = '[data-drupal-outsidein="toggle"]'; - var itemsToToggleSelector = '[data-offcanvas-main-canvas], #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button'; + var itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button'; var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button'; var quickEditItemSelector = '[data-quickedit-entity-id]'; @@ -115,10 +115,10 @@ } /** - * Closes/removes offcanvas. + * Closes/removes off canvas. */ function closeOffCanvas() { - $('.ui-dialog-offcanvas .ui-dialog-titlebar-close').trigger('click'); + $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click'); } /** @@ -139,7 +139,7 @@ $editables = $('[data-drupal-outsidein="editable"]').once('outsidein'); if ($editables.length) { // Use event capture to prevent clicks on links. - document.querySelector('[data-offcanvas-main-canvas]').addEventListener('click', preventClick, true); + document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true); // When a click occurs try and find the outside-in edit link // and click it. @@ -172,7 +172,7 @@ else { $editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein'); if ($editables.length) { - document.querySelector('[data-offcanvas-main-canvas]').removeEventListener('click', preventClick, true); + document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true); $editables.off('.outsidein'); $(quickEditItemSelector).off('.outsidein'); } @@ -220,7 +220,7 @@ var hasElement = instance && !!instance.element; var rendererOffcanvas = false; if (hasElement) { - rendererOffcanvas = $(instance.element).attr('data-dialog-renderer') === 'offcanvas'; + rendererOffcanvas = $(instance.element).attr('data-dialog-renderer') === 'off_canvas'; } return hasElement && rendererOffcanvas; }) @@ -238,7 +238,7 @@ // Manage Active editable class on opening and closing of the dialog. $(window).on({ 'dialog:beforecreate': function (event, dialog, $element, settings) { - if ($element.is('#drupal-offcanvas')) { + if ($element.is('#drupal-off-canvas')) { $('body .outside-in-active-editable').removeClass('outside-in-active-editable'); var $activeElement = $('#' + settings.outsideInActiveEditableId); if ($activeElement.length) { @@ -248,7 +248,7 @@ } }, 'dialog:beforeclose': function (event, dialog, $element) { - if ($element.is('#drupal-offcanvas')) { + if ($element.is('#drupal-off-canvas')) { $('body .outside-in-active-editable').removeClass('outside-in-active-editable'); } } diff --git a/core/modules/outside_in/outside_in.links.contextual.yml b/core/modules/outside_in/outside_in.links.contextual.yml index 99b36ef..b0c0f13 100644 --- a/core/modules/outside_in/outside_in.links.contextual.yml +++ b/core/modules/outside_in/outside_in.links.contextual.yml @@ -1,4 +1,4 @@ outside_in.block_configure: title: 'Quick edit' - route_name: 'entity.block.offcanvas_form' + route_name: 'entity.block.off_canvas_form' group: 'block' diff --git a/core/modules/outside_in/outside_in.module b/core/modules/outside_in/outside_in.module index 54a3525..3da4520 100644 --- a/core/modules/outside_in/outside_in.module +++ b/core/modules/outside_in/outside_in.module @@ -30,14 +30,14 @@ function outside_in_help($route_name, RouteMatchInterface $route_match) { /** * Implements hook_contextual_links_view_alter(). * - * Change Configure Blocks into offcanvas links. + * Change Configure Blocks into off canvas links. */ function outside_in_contextual_links_view_alter(&$element, $items) { if (isset($element['#links']['outside-inblock-configure'])) { $element['#links']['outside-inblock-configure']['attributes'] = [ 'class' => ['use-ajax'], 'data-dialog-type' => 'dialog', - 'data-dialog-renderer' => 'offcanvas', + 'data-dialog-renderer' => 'off_canvas', 'data-outside-in-edit' => TRUE, ]; @@ -63,8 +63,8 @@ function outside_in_block_view_alter(array &$build) { function outside_in_entity_type_build(array &$entity_types) { /* @var $entity_types \Drupal\Core\Entity\EntityTypeInterface[] */ $entity_types['block'] - ->setFormClass('offcanvas', BlockEntityOffCanvasForm::class) - ->setLinkTemplate('offcanvas-form', '/admin/structure/block/manage/{block}/offcanvas'); + ->setFormClass('off_canvas', BlockEntityOffCanvasForm::class) + ->setLinkTemplate('off_canvas-form', '/admin/structure/block/manage/{block}/off-canvas'); } /** @@ -110,14 +110,14 @@ function outside_in_toolbar_alter(&$items) { */ function outside_in_block_alter(&$definitions) { if (!empty($definitions['system_branding_block'])) { - $definitions['system_branding_block']['forms']['offcanvas'] = SystemBrandingOffCanvasForm::class; + $definitions['system_branding_block']['forms']['off_canvas'] = SystemBrandingOffCanvasForm::class; } // Since menu blocks use derivatives, check the definition ID instead of // relying on the plugin ID. foreach ($definitions as &$definition) { if ($definition['id'] === 'system_menu_block') { - $definition['forms']['offcanvas'] = SystemMenuOffCanvasForm::class; + $definition['forms']['off_canvas'] = SystemMenuOffCanvasForm::class; } } } diff --git a/core/modules/outside_in/outside_in.routing.yml b/core/modules/outside_in/outside_in.routing.yml index 79bc38d..18a564c 100644 --- a/core/modules/outside_in/outside_in.routing.yml +++ b/core/modules/outside_in/outside_in.routing.yml @@ -1,7 +1,7 @@ -entity.block.offcanvas_form: - path: '/admin/structure/block/manage/{block}/offcanvas' +entity.block.off_canvas_form: + path: '/admin/structure/block/manage/{block}/off-canvas' defaults: - _entity_form: 'block.offcanvas' + _entity_form: 'block.off_canvas' _title_callback: '\Drupal\outside_in\Block\BlockEntityOffCanvasForm::title' requirements: _permission: 'administer blocks' diff --git a/core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php b/core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php index a77f51f..1d6ea37 100644 --- a/core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php +++ b/core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php @@ -92,7 +92,7 @@ protected function submitVisibility(array $form, FormStateInterface $form_state) */ protected function getPluginForm(BlockPluginInterface $block) { if ($block instanceof PluginWithFormsInterface) { - return $this->pluginFormFactory->createInstance($block, 'offcanvas', 'configure'); + return $this->pluginFormFactory->createInstance($block, 'off_canvas', 'configure'); } return $block; } diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php index c39f2f8..4242620 100644 --- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php +++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php @@ -119,14 +119,14 @@ public function testBlocks($block_id, $new_page_text, $element_selector, $label_ // Exit edit mode using ESC. $web_assert->elementTextContains('css', '.contextual-toolbar-tab button', 'Editing'); - $web_assert->elementAttributeContains('css', '.dialog-offcanvas__main-canvas', 'class', 'js-outside-in-edit-mode'); + $web_assert->elementAttributeContains('css', '.dialog-off-canvas__main-canvas', 'class', 'js-outside-in-edit-mode'); // Simulate press the Escape key. $this->getSession()->executeScript('jQuery("body").trigger(jQuery.Event("keyup", { keyCode: 27 }));'); $this->waitForOffCanvasToClose(); $this->getSession()->wait(100); $web_assert->elementTextContains('css', '#drupal-live-announce', 'Exited edit mode.'); $web_assert->elementTextNotContains('css', '.contextual-toolbar-tab button', 'Editing'); - $web_assert->elementAttributeNotContains('css', '.dialog-offcanvas__main-canvas', 'class', 'js-outside-in-edit-mode'); + $web_assert->elementAttributeNotContains('css', '.dialog-off-canvas__main-canvas', 'class', 'js-outside-in-edit-mode'); } /** diff --git a/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php b/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php index 0debdc8..ca0ce04 100644 --- a/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php +++ b/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php @@ -13,7 +13,7 @@ class OffCanvasDialogTest extends AjaxTestBase { /** - * Test sending AJAX requests to open and manipulate offcanvas dialog. + * Test sending AJAX requests to open and manipulate off canvas dialog. */ public function testDialog() { $this->drupalLogin($this->drupalCreateUser(['administer contact forms'])); @@ -24,9 +24,9 @@ public function testDialog() { $dialog_renderable = AjaxTestController::dialogContents(); $dialog_contents = \Drupal::service('renderer')->renderRoot($dialog_renderable); - $offcanvas_expected_response = [ + $off_canvas_expected_response = [ 'command' => 'openDialog', - 'selector' => '#drupal-offcanvas', + 'selector' => '#drupal-off-canvas', 'settings' => NULL, 'data' => $dialog_contents, 'dialogOptions' => @@ -44,8 +44,8 @@ public function testDialog() { ]; // Emulate going to the JS version of the page and check the JSON response. - $ajax_result = $this->drupalGetAjax('ajax-test/dialog-contents', ['query' => [MainContentViewSubscriber::WRAPPER_FORMAT => 'drupal_dialog.offcanvas']]); - $this->assertEqual($offcanvas_expected_response, $ajax_result[3], 'Off-canvas dialog JSON response matches.'); + $ajax_result = $this->drupalGetAjax('ajax-test/dialog-contents', ['query' => [MainContentViewSubscriber::WRAPPER_FORMAT => 'drupal_dialog.off_canvas']]); + $this->assertEqual($off_canvas_expected_response, $ajax_result[3], 'Off-canvas dialog JSON response matches.'); } } diff --git a/core/modules/system/system.module b/core/modules/system/system.module index 043fc0f..d5e14ef 100644 --- a/core/modules/system/system.module +++ b/core/modules/system/system.module @@ -224,7 +224,7 @@ function system_theme() { ), 'template' => 'entity-add-list', ), - 'offcanvas_page_wrapper' => [ + 'off_canvas_page_wrapper' => [ 'variables' => ['children' => NULL], ], )); @@ -1454,6 +1454,6 @@ function system_query_entity_reference_alter(AlterableInterface $query) { */ function system_element_info_alter(&$type) { if (isset($type['page'])) { - $type['page']['#theme_wrappers']['offcanvas_page_wrapper'] = ['#weight' => -1000]; + $type['page']['#theme_wrappers']['off_canvas_page_wrapper'] = ['#weight' => -1000]; } } diff --git a/core/themes/stable/templates/layout/offcanvas-page-wrapper.html.twig b/core/modules/system/templates/off-canvas-page-wrapper.html.twig similarity index 80% rename from core/themes/stable/templates/layout/offcanvas-page-wrapper.html.twig rename to core/modules/system/templates/off-canvas-page-wrapper.html.twig index adedc6b..c2f5fb9 100644 --- a/core/themes/stable/templates/layout/offcanvas-page-wrapper.html.twig +++ b/core/modules/system/templates/off-canvas-page-wrapper.html.twig @@ -12,7 +12,7 @@ */ #} {% if children %} -
Text!
', 'dialogOptions' => [ diff --git a/core/themes/stable/css/core/dialog/offcanvas.css b/core/themes/stable/css/core/dialog/off-canvas.css similarity index 81% rename from core/themes/stable/css/core/dialog/offcanvas.css rename to core/themes/stable/css/core/dialog/off-canvas.css index 0e46c6a..cf5f47f 100644 --- a/core/themes/stable/css/core/dialog/offcanvas.css +++ b/core/themes/stable/css/core/dialog/off-canvas.css @@ -3,21 +3,21 @@ * CSS for Offcanvas tray. */ /* Position the dialog-offcanvas tray container outside the right of the viewport. */ -.ui-dialog-offcanvas { +.ui-dialog-off-canvas { box-sizing: border-box; height: 100%; overflow: visible; } /* Wrap the form that's inside the dialog-offcanvas tray. */ -.ui-dialog-offcanvas .ui-dialog-content { +.ui-dialog-off-canvas .ui-dialog-content { padding: 0 20px; /* Prevent horizontal scrollbar. */ overflow-x: hidden; overflow-y: auto; } -[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content { +[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content { text-align: right; } @@ -27,7 +27,7 @@ */ @media all and (max-width: 48em) { /* 768px */ - .ui-dialog.ui-dialog-offcanvas { + .ui-dialog.ui-dialog-off-canvas { width: 100% !important; } diff --git a/core/themes/stable/css/core/dialog/offcanvas.motion.css b/core/themes/stable/css/core/dialog/off-canvas.motion.css similarity index 86% rename from core/themes/stable/css/core/dialog/offcanvas.motion.css rename to core/themes/stable/css/core/dialog/off-canvas.motion.css index 7228a29..c1379be 100644 --- a/core/themes/stable/css/core/dialog/offcanvas.motion.css +++ b/core/themes/stable/css/core/dialog/off-canvas.motion.css @@ -10,21 +10,21 @@ */ /* Transition the dialog-offcanvas tray container, with 2s delay to match main canvas speed. */ -.ui-dialog-offcanvas .ui-dialog-content { +.ui-dialog-off-canvas .ui-dialog-content { -webkit-transition: all .7s ease 2s; -moz-transition: all .7s ease 2s; transition: all .7s ease 2s; } @media (max-width: 700px) { - .ui-dialog-offcanvas .ui-dialog-content { + .ui-dialog-off-canvas .ui-dialog-content { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; transition: all .7s ease; } } -.dialog-offcanvas__main-canvas { +.dialog-off-canvas__main-canvas { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; transition: all .7s ease; diff --git a/core/themes/stable/stable.info.yml b/core/themes/stable/stable.info.yml index 7efa1e0..3aceac6 100644 --- a/core/themes/stable/stable.info.yml +++ b/core/themes/stable/stable.info.yml @@ -68,8 +68,8 @@ libraries-override: core/drupal.dialog.off_canvas: css: component: - misc/dialog/offcanvas.css: css/core/dialog/offcanvas.css - misc/dialog/offcanvas.motion.css: css/core/dialog/offcanvas.motion.css + misc/dialog/off-canvas.css: css/core/dialog/off-canvas.css + misc/dialog/off-canvas.motion.css: css/core/dialog/off-canvas.motion.css dblog/drupal.dblog: css: diff --git a/core/modules/system/templates/offcanvas-page-wrapper.html.twig b/core/themes/stable/templates/layout/off-canvas-page-wrapper.html.twig similarity index 80% rename from core/modules/system/templates/offcanvas-page-wrapper.html.twig rename to core/themes/stable/templates/layout/off-canvas-page-wrapper.html.twig index adedc6b..c2f5fb9 100644 --- a/core/modules/system/templates/offcanvas-page-wrapper.html.twig +++ b/core/themes/stable/templates/layout/off-canvas-page-wrapper.html.twig @@ -12,7 +12,7 @@ */ #} {% if children %} -