diff --git a/core/misc/dialog/offcanvas.css b/core/misc/dialog/offcanvas.css index fb671db..0e46c6a 100644 --- a/core/misc/dialog/offcanvas.css +++ b/core/misc/dialog/offcanvas.css @@ -1,23 +1,39 @@ /** * @file * CSS for Offcanvas tray. - * - * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443. */ /* Position the dialog-offcanvas tray container outside the right of the viewport. */ .ui-dialog-offcanvas { - box-sizing: border-box; - height: 100%; - overflow: visible; + box-sizing: border-box; + height: 100%; + overflow: visible; } /* Wrap the form that's inside the dialog-offcanvas tray. */ .ui-dialog-offcanvas .ui-dialog-content { - padding: 0 20px; - /* Prevent horizontal scrollbar. */ - overflow-x: hidden; - overflow-y: auto; + padding: 0 20px; + /* Prevent horizontal scrollbar. */ + overflow-x: hidden; + overflow-y: auto; } + [dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content { - text-align: right; + text-align: right; +} + +/* + * Force the tray to be 100% width at the same breakpoint the dialog system uses + * to expand dialog widths. + */ +@media all and (max-width: 48em) { + /* 768px */ + .ui-dialog.ui-dialog-offcanvas { + width: 100% !important; + } + + /* When tray is at 100% width stop the body from scrolling */ + .js-tray-open { + height: 100%; + overflow-y: hidden; + } } diff --git a/core/misc/dialog/offcanvas.js b/core/misc/dialog/offcanvas.js index 8cda69d..7493e0a 100644 --- a/core/misc/dialog/offcanvas.js +++ b/core/misc/dialog/offcanvas.js @@ -1,10 +1,6 @@ /** * @file * Drupal's off-canvas library. - * - * @todo This functionality should extracted into a new core library or a part - * of the current drupal.dialog.ajax library. - * https://www.drupal.org/node/2784443 */ (function ($, Drupal, debounce, displace) { @@ -12,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 outside_in.module.css + // the tray will be %100 width. @see offcanvas.css var minDisplaceWidth = 768; /** diff --git a/core/misc/dialog/offcanvas.motion.css b/core/misc/dialog/offcanvas.motion.css index 1c06994..7228a29 100644 --- a/core/misc/dialog/offcanvas.motion.css +++ b/core/misc/dialog/offcanvas.motion.css @@ -5,24 +5,23 @@ * Motion effects are in a separate file so that they can be easily turned off * to improve performance if desired. * - * @todo Move motion effects file into a core Off-Canvas library and add a - * configuration option for browser rendering performance to disable this - * file: https://www.drupal.org/node/2784443. + * @todo Add a configuration option for browser rendering performance to disable + * this file: https://www.drupal.org/node/2784443. */ /* Transition the dialog-offcanvas tray container, with 2s delay to match main canvas speed. */ .ui-dialog-offcanvas .ui-dialog-content { - -webkit-transition: all .7s ease 2s; - -moz-transition: all .7s ease 2s; - transition: all .7s ease 2s; + -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 { - -webkit-transition: all .7s ease; - -moz-transition: all .7s ease; - transition: all .7s ease; - } + .ui-dialog-offcanvas .ui-dialog-content { + -webkit-transition: all .7s ease; + -moz-transition: all .7s ease; + transition: all .7s ease; + } } .dialog-offcanvas__main-canvas { diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css index 5ac00ab..2022837 100644 --- a/core/modules/outside_in/css/outside_in.module.css +++ b/core/modules/outside_in/css/outside_in.module.css @@ -21,18 +21,3 @@ #main-canvas.js-outside-in-edit-mode .contextual-links a { pointer-events: inherit; } - -/* - * Force the tray to be 100% width at the same breakpoint the dialog system uses - * to expand dialog widths. - */ -@media all and (max-width: 48em) { /* 768px */ - .ui-dialog.ui-dialog-offcanvas { - width: 100% !important; - } - /* When tray is at 100% width stop the body from scrolling */ - .js-tray-open { - height: 100%; - overflow-y: hidden; - } -} diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/modules/outside_in/css/outside_in.motion.css index 450bffe..1177225 100644 --- a/core/modules/outside_in/css/outside_in.motion.css +++ b/core/modules/outside_in/css/outside_in.motion.css @@ -4,10 +4,6 @@ * * Motion effects are in a separate file so that they can be easily turned off * to improve performance if desired. - * - * @todo Move motion effects file into a core Off-Canvas library and add a - * configuration option for browser rendering performance to disable this - * file: https://www.drupal.org/node/2784443. */ diff --git a/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php b/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php index b85f8dd..0debdc8 100644 --- a/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php +++ b/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php @@ -13,13 +13,6 @@ class OffCanvasDialogTest extends AjaxTestBase { /** - * Modules to enable. - * - * @var array - */ - public static $modules = ['outside_in']; - - /** * Test sending AJAX requests to open and manipulate offcanvas dialog. */ public function testDialog() { diff --git a/core/modules/system/tests/modules/offcanvas_test/src/Controller/TestController.php b/core/modules/system/tests/modules/offcanvas_test/src/Controller/TestController.php index 9ee8e17..e5fae3d 100644 --- a/core/modules/system/tests/modules/offcanvas_test/src/Controller/TestController.php +++ b/core/modules/system/tests/modules/offcanvas_test/src/Controller/TestController.php @@ -55,7 +55,7 @@ public function linksDisplay() { ], '#attached' => [ 'library' => [ - 'outside_in/drupal.outside_in', + 'core/drupal.ajax', ], ], ], @@ -73,7 +73,7 @@ public function linksDisplay() { ], '#attached' => [ 'library' => [ - 'outside_in/drupal.outside_in', + 'core/drupal.ajax', ], ], ], @@ -88,7 +88,7 @@ public function linksDisplay() { ], '#attached' => [ 'library' => [ - 'outside_in/drupal.outside_in', + 'core/drupal.ajax', ], ], ], @@ -131,7 +131,7 @@ public function otherDialogLinks() { ], '#attached' => [ 'library' => [ - 'outside_in/drupal.outside_in', + 'core/drupal.ajax', ], ], ]; diff --git a/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php index 98c4556..dc4b332 100644 --- a/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php +++ b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php @@ -5,7 +5,7 @@ /** * Tests the off-canvas tray functionality. * - * @group outside_in + * @group system */ class OffCanvasTest extends OffCanvasTestBase { diff --git a/core/themes/stable/css/core/dialog/offcanvas.css b/core/themes/stable/css/core/dialog/offcanvas.css index fb671db..0e46c6a 100644 --- a/core/themes/stable/css/core/dialog/offcanvas.css +++ b/core/themes/stable/css/core/dialog/offcanvas.css @@ -1,23 +1,39 @@ /** * @file * CSS for Offcanvas tray. - * - * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443. */ /* Position the dialog-offcanvas tray container outside the right of the viewport. */ .ui-dialog-offcanvas { - box-sizing: border-box; - height: 100%; - overflow: visible; + box-sizing: border-box; + height: 100%; + overflow: visible; } /* Wrap the form that's inside the dialog-offcanvas tray. */ .ui-dialog-offcanvas .ui-dialog-content { - padding: 0 20px; - /* Prevent horizontal scrollbar. */ - overflow-x: hidden; - overflow-y: auto; + padding: 0 20px; + /* Prevent horizontal scrollbar. */ + overflow-x: hidden; + overflow-y: auto; } + [dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content { - text-align: right; + text-align: right; +} + +/* + * Force the tray to be 100% width at the same breakpoint the dialog system uses + * to expand dialog widths. + */ +@media all and (max-width: 48em) { + /* 768px */ + .ui-dialog.ui-dialog-offcanvas { + width: 100% !important; + } + + /* When tray is at 100% width stop the body from scrolling */ + .js-tray-open { + height: 100%; + overflow-y: hidden; + } } diff --git a/core/themes/stable/css/core/dialog/offcanvas.motion.css b/core/themes/stable/css/core/dialog/offcanvas.motion.css index 1c06994..7228a29 100644 --- a/core/themes/stable/css/core/dialog/offcanvas.motion.css +++ b/core/themes/stable/css/core/dialog/offcanvas.motion.css @@ -5,24 +5,23 @@ * Motion effects are in a separate file so that they can be easily turned off * to improve performance if desired. * - * @todo Move motion effects file into a core Off-Canvas library and add a - * configuration option for browser rendering performance to disable this - * file: https://www.drupal.org/node/2784443. + * @todo Add a configuration option for browser rendering performance to disable + * this file: https://www.drupal.org/node/2784443. */ /* Transition the dialog-offcanvas tray container, with 2s delay to match main canvas speed. */ .ui-dialog-offcanvas .ui-dialog-content { - -webkit-transition: all .7s ease 2s; - -moz-transition: all .7s ease 2s; - transition: all .7s ease 2s; + -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 { - -webkit-transition: all .7s ease; - -moz-transition: all .7s ease; - transition: all .7s ease; - } + .ui-dialog-offcanvas .ui-dialog-content { + -webkit-transition: all .7s ease; + -moz-transition: all .7s ease; + transition: all .7s ease; + } } .dialog-offcanvas__main-canvas {