diff --git a/core/core.libraries.yml b/core/core.libraries.yml index 04b0d94..95d4ca7 100644 --- a/core/core.libraries.yml +++ b/core/core.libraries.yml @@ -192,6 +192,10 @@ drupal.dialog.offcanvas: - core/drupal.announce - core/drupal.dialog - core/drupal.dialog.ajax + css: + component: + misc/dialog/css/offcanvas.css: {} + misc/dialog/css/offcanvas.motion.css: {} drupal.displace: version: VERSION diff --git a/core/misc/dialog/css/offcanvas.css b/core/misc/dialog/css/offcanvas.css new file mode 100644 index 0000000..0c2841c --- /dev/null +++ b/core/misc/dialog/css/offcanvas.css @@ -0,0 +1,36 @@ +/** + * @file + * Styling for off-canvas dialog. + */ + +/* Position the offcanvas tray container outside the right of the viewport. */ +.ui-dialog-offcanvas { + box-sizing: border-box; + height: 100%; + overflow: visible; +} + +/* Shift the main canvas to the right for right-to-left languages. */ +[dir="rtl"] #main-canvas-wrapper.js-tray-open #main-canvas { + right: 0; +} + +/* Wrap the form that's inside the offcanvas tray. */ +.ui-dialog-offcanvas .ui-dialog-content { + padding: 0 20px; + /* Prevent horizontal scrollbar. */ + overflow-x: hidden; + overflow-y: auto; +} +[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content { + text-align: right; +} + +.offcanvas-lining { + background: #333; + position: absolute; + top: 0; + height: 100%; + width: 100%; + z-index: -1; +} diff --git a/core/misc/dialog/css/offcanvas.motion.css b/core/misc/dialog/css/offcanvas.motion.css new file mode 100644 index 0000000..fef966e --- /dev/null +++ b/core/misc/dialog/css/offcanvas.motion.css @@ -0,0 +1,30 @@ +/** + * @file + * Motion effects for offcanvas dialog. + */ + +/* Transition the offcanvas tray container, with 2s delay to match main canvas speed. */ +#offcanvas { + -webkit-transition: all .7s ease 2s; + -moz-transition: all .7s ease 2s; + transition: all .7s ease 2s; +} +#main-canvas-wrapper #main-canvas, +#main-canvas-wrapper.js-tray-open #main-canvas { + -webkit-transition: all .7s ease; + -moz-transition: all .7s ease; + transition: all .7s ease; +} + +@media (max-width: 700px) { + #offcanvas { + -webkit-transition: all .7s ease; + -moz-transition: all .7s ease; + transition: all .7s ease; + } + #main-canvas-wrapper.js-tray-open #offcanvas { + -webkit-transition: all .7s ease; + -moz-transition: all .7s ease; + transition: all .7s ease; + } +} diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css index 9e36037..da417d6 100644 --- a/core/modules/outside_in/css/outside_in.module.css +++ b/core/modules/outside_in/css/outside_in.module.css @@ -3,30 +3,6 @@ * Styling for Settings Tray module. */ -/* Position the offcanvas tray container outside the right of the viewport. */ -.ui-dialog-offcanvas { - box-sizing: border-box; - height: 100%; - overflow: visible; -} - -/* Shift the main canvas to the right for right-to-left languages. */ -[dir="rtl"] #main-canvas-wrapper.js-tray-open #main-canvas { - right: 0; -} - - -/* Wrap the form that's inside the offcanvas tray. */ -.ui-dialog-offcanvas .ui-dialog-content { - padding: 0 20px; - /* Prevent horizontal scrollbar. */ - overflow-x: hidden; - overflow-y: auto; -} -[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content { - text-align: right; -} - /* * Position the edit toolbar tab. * @todo Move changes into contextual module when Settings Tray is not @@ -38,12 +14,3 @@ [dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab { float: right; } - -.offcanvas-lining { - background: #333; - position: absolute; - top: 0; - height: 100%; - width: 100%; - z-index: -1; -} diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/modules/outside_in/css/outside_in.motion.css index 8fbf5cb..692a358 100644 --- a/core/modules/outside_in/css/outside_in.motion.css +++ b/core/modules/outside_in/css/outside_in.motion.css @@ -4,25 +4,8 @@ * * 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. */ -/* Transition the offcanvas tray container, with 2s delay to match main canvas speed. */ -#offcanvas { - -webkit-transition: all .7s ease 2s; - -moz-transition: all .7s ease 2s; - transition: all .7s ease 2s; -} -#main-canvas-wrapper #main-canvas, -#main-canvas-wrapper.js-tray-open #main-canvas { - -webkit-transition: all .7s ease; - -moz-transition: all .7s ease; - transition: all .7s ease; -} - /* Transition the edit icon in the toolbar. */ #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before { -webkit-transition: all .7s ease; @@ -47,19 +30,6 @@ transition: all .5s ease; } -@media (max-width: 700px) { - #offcanvas { - -webkit-transition: all .7s ease; - -moz-transition: all .7s ease; - transition: all .7s ease; - } - #main-canvas-wrapper.js-tray-open #offcanvas { - -webkit-transition: all .7s ease; - -moz-transition: all .7s ease; - transition: all .7s ease; - } -} - /* Transition the administration tray. #toolbar-administration, #toolbar-administration * { diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php index 706b5b7..da0be1b 100644 --- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php +++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php @@ -10,6 +10,20 @@ abstract class OutsideInJavascriptTestBase extends JavascriptTestBase { /** + * Enables a theme. + * + * @param string $theme + * The theme. + */ + public function enableTheme($theme) { + // Enable the theme. + \Drupal::service('theme_installer')->install([$theme]); + $theme_config = \Drupal::configFactory()->getEditable('system.theme'); + $theme_config->set('default', $theme); + $theme_config->save(); + } + + /** * Waits for Off-canvas tray to open. */ protected function waitForOffCanvasToOpen() { diff --git a/core/themes/stable/templates/layout/offcanvas-page-wrapper.html.twig b/core/themes/stable/templates/layout/offcanvas-page-wrapper.html.twig new file mode 100644 index 0000000..feaf81c --- /dev/null +++ b/core/themes/stable/templates/layout/offcanvas-page-wrapper.html.twig @@ -0,0 +1,21 @@ +{# +/** + * @file + * Default theme implementation for a page wrapper. + * + * For consistent wrapping to {{ page }} render in all themes. + * + * Available variables: + * - children: Contains the child elements of the page. + * + * @ingroup themeable + */ +#} +{% if children %} +
+
+ {{ children }} +
+
+
+{% endif %}