diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index 85c956228e..a929536624 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -903,3 +903,31 @@ underscore:
gpl-compatible: true
js:
assets/vendor/underscore/underscore-min.js: { weight: -20, minified: true }
+
+drupal.dialog.off_canvas:
+ version: VERSION
+ js:
+ misc/dialog/off-canvas.js: {}
+ css:
+ base:
+ misc/dialog/off-canvas.reset.css: {}
+ misc/dialog/off-canvas.base.css: {}
+ misc/dialog/off-canvas.css: {}
+ # Add group setting to make sure this CSS load before any jQuery UI Dialog
+ # CSS.
+ misc/dialog/off-canvas.theme.css: { group: 200 }
+ component:
+ misc/dialog/off-canvas.motion.css: {}
+ misc/dialog/off-canvas.button.css: {}
+ misc/dialog/off-canvas.form.css: {}
+ misc/dialog/off-canvas.table.css: {}
+ misc/dialog/off-canvas.details.css: {}
+ misc/dialog/off-canvas.tabledrag.css: {}
+ misc/dialog/off-canvas.dropbutton.css: {}
+ dependencies:
+ - core/jquery
+ - core/drupal
+ - core/drupal.ajax
+ - core/drupal.announce
+ - core/drupal.dialog
+ - core/drupal.dialog.ajax
diff --git a/core/core.services.yml b/core/core.services.yml
index 76088786cd..98996a6101 100644
--- a/core/core.services.yml
+++ b/core/core.services.yml
@@ -1065,6 +1065,11 @@ services:
arguments: ['@title_resolver']
tags:
- { name: render.main_content_renderer, format: drupal_dialog }
+ main_content_renderer.off_canvas:
+ class: Drupal\Core\Render\MainContent\OffCanvasRenderer
+ arguments: ['@title_resolver', '@renderer']
+ tags:
+ - { 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/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php
similarity index 96%
rename from core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
rename to core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php
index c5e2b2a5d1..da6a26e35a 100644
--- a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
+++ b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php
@@ -1,15 +1,11 @@
renderer->renderRoot($main_content);
// Attach the library necessary for using the OpenOffCanvasDialogCommand and
// set the attachments for this Ajax response.
- $main_content['#attached']['library'][] = 'outside_in/drupal.off_canvas';
+ $main_content['#attached']['library'][] = 'core/drupal.dialog.off_canvas';
$response->setAttachments($main_content['#attached']);
// If the main content doesn't provide a title, use the title resolver.
diff --git a/core/modules/outside_in/css/off-canvas.base.css b/core/misc/dialog/off-canvas.base.css
similarity index 95%
rename from core/modules/outside_in/css/off-canvas.base.css
rename to core/misc/dialog/off-canvas.base.css
index 4263886b24..8747b286e7 100644
--- a/core/modules/outside_in/css/off-canvas.base.css
+++ b/core/misc/dialog/off-canvas.base.css
@@ -1,6 +1,6 @@
/*
* @file
- * Set base styles for the settings tray.
+ * Set base styles for the off-canvas dialog.
*/
/* Set some global attributes. */
@@ -217,18 +217,18 @@
}
#drupal-off-canvas .messages--status {
background-color: #f3faef;
- background-image: url(../../../misc/icons/73b355/check.svg);
+ background-image: url(../icons/73b355/check.svg);
color: #325e1c;
}
#drupal-off-canvas .messages--warning {
background-color: #fdf8ed;
- background-image: url(../../../misc/icons/e29700/warning.svg);
+ background-image: url(../icons/e29700/warning.svg);
color: #734c00;
}
#drupal-off-canvas .messages--error {
background-color: #fcf4f2;
- background-image: url(../../../misc/icons/e32700/error.svg);
+ background-image: url(../icons/e32700/error.svg);
color: #a51b00;
}
diff --git a/core/modules/outside_in/css/off-canvas.button.css b/core/misc/dialog/off-canvas.button.css
similarity index 96%
rename from core/modules/outside_in/css/off-canvas.button.css
rename to core/misc/dialog/off-canvas.button.css
index 4f7987aa7c..e37b7ac4e0 100644
--- a/core/modules/outside_in/css/off-canvas.button.css
+++ b/core/misc/dialog/off-canvas.button.css
@@ -1,7 +1,7 @@
/**
- * Visual styling for buttons in the off canvas tray.
+ * Visual styling for buttons in the off-canvas dialog.
*
- * See seven/css/components/buttons.css
+ * @see seven/css/components/buttons.css
*/
#drupal-off-canvas button,
diff --git a/core/misc/dialog/off-canvas.css b/core/misc/dialog/off-canvas.css
new file mode 100644
index 0000000000..52a8b9e079
--- /dev/null
+++ b/core/misc/dialog/off-canvas.css
@@ -0,0 +1,55 @@
+/**
+ * @file
+ * CSS for off-canvas dialog.
+ */
+
+/* Position the off-canvas dialog 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 off-canvas dialog. */
+.ui-dialog-off-canvas .ui-dialog-content {
+ padding: 0 20px;
+ /* Prevent horizontal scrollbar. */
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content {
+ text-align: right;
+}
+
+/* Position the off-canvas dialog 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 off-canvas dialog. */
+.ui-dialog-off-canvas #drupal-off-canvas {
+ padding: 0 20px;
+ /* Prevent horizontal scrollbar. */
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+[dir="rtl"] .ui-dialog-off-canvas #drupal-off-canvas {
+ text-align: right;
+}
+
+/*
+ * Force the off-canvas dialog 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-off-canvas {
+ width: 100% !important;
+ }
+ /* When off-canvas dialog is at 100% width stop the body from scrolling */
+ .js-off-canvas-dialog-open {
+ height: 100%;
+ overflow-y: hidden;
+ }
+}
diff --git a/core/modules/outside_in/css/off-canvas.details.css b/core/misc/dialog/off-canvas.details.css
similarity index 93%
rename from core/modules/outside_in/css/off-canvas.details.css
rename to core/misc/dialog/off-canvas.details.css
index dcac6a5b04..fcd526f0b0 100644
--- a/core/modules/outside_in/css/off-canvas.details.css
+++ b/core/misc/dialog/off-canvas.details.css
@@ -1,6 +1,6 @@
/**
* @file
- * Visual styling for summary and details in the Settings Tray module's off canvas tray.
+ * Visual styling for summary and details in the off-canvas dialog.
*/
#drupal-off-canvas details,
diff --git a/core/modules/outside_in/css/off-canvas.dropbutton.css b/core/misc/dialog/off-canvas.dropbutton.css
similarity index 98%
rename from core/modules/outside_in/css/off-canvas.dropbutton.css
rename to core/misc/dialog/off-canvas.dropbutton.css
index e467a4f341..7211dceaf5 100644
--- a/core/modules/outside_in/css/off-canvas.dropbutton.css
+++ b/core/misc/dialog/off-canvas.dropbutton.css
@@ -1,6 +1,6 @@
/**
* @file
- * Styles for dropbuttons in the off-canvas tray.
+ * Styles for dropbuttons in the off-canvas dialog.
*/
#drupal-off-canvas .dropbutton-wrapper,
@@ -241,7 +241,7 @@
content: '.';
display: block;
color: transparent;
- background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat center;
+ background: transparent url(../icons/ffffff/pencil.svg) no-repeat center;
background-size: 14px;
}
diff --git a/core/modules/outside_in/js/off-canvas.es6.js b/core/misc/dialog/off-canvas.es6.js
similarity index 95%
rename from core/modules/outside_in/js/off-canvas.es6.js
rename to core/misc/dialog/off-canvas.es6.js
index 507c4fe3d2..3b540cef81 100644
--- a/core/modules/outside_in/js/off-canvas.es6.js
+++ b/core/misc/dialog/off-canvas.es6.js
@@ -2,10 +2,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
- *
* @private
*/
@@ -22,7 +18,7 @@
/**
* 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 core/misc/dialog/off-canvas.css
* @type {Number}
*/
minDisplaceWidth: 768,
@@ -52,8 +48,7 @@
* @return {undefined}
*/
beforeCreate(settings) {
- $('body').addClass('js-tray-open');
- settings.dialogClass += ' ui-dialog-off-canvas';
+ $('body').addClass('js-off-canvas-dialog-open');
// @see http://api.jqueryui.com/position/
settings.position = {
my: 'left top',
@@ -73,7 +68,7 @@
* @return {undefined}
*/
beforeClose() {
- $('body').removeClass('js-tray-open');
+ $('body').removeClass('js-off-canvas-dialog-open');
// Remove all *.off-canvas events
$(document).off('.off-canvas');
$(window).off('.off-canvas');
diff --git a/core/misc/dialog/off-canvas.form.css b/core/misc/dialog/off-canvas.form.css
new file mode 100644
index 0000000000..217f3d1f2c
--- /dev/null
+++ b/core/misc/dialog/off-canvas.form.css
@@ -0,0 +1,136 @@
+/**
+ * @file
+ * Visual styling for forms in the off-canvas dialog.
+ */
+
+#drupal-off-canvas form {
+ font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+ color: #ddd;
+}
+#drupal-off-canvas input[type="checkbox"] {
+ -webkit-appearance: checkbox;
+}
+#drupal-off-canvas input[type="radio"] {
+ -webkit-appearance: radio;
+}
+#drupal-off-canvas select {
+ -webkit-appearance: menulist;
+ -moz-appearance: menulist;
+}
+#drupal-off-canvas option {
+ display: block;
+ font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+}
+#drupal-off-canvas label {
+ line-height: normal;
+ font-family: inherit;
+ font-size: 12px;
+ font-weight: bold;
+ color: #ddd;
+}
+#drupal-off-canvas .visually-hidden {
+ opacity: 0;
+ height: 0;
+ width: 0;
+ letter-spacing: -2em;
+}
+#drupal-off-canvas .description,
+#drupal-off-canvas .form-item .description,
+#drupal-off-canvas .details-description {
+ color: #ddd;
+ margin-top: 5px;
+ font-family: inherit;
+ font-size: 12px;
+ font-style: normal;
+}
+#drupal-off-canvas .details-wrapper .description {
+ color: #bbb;
+}
+#drupal-off-canvas .form-item {
+ margin-bottom: 10px;
+ margin-top: 10px;
+}
+/* Set size and position for all inputs. */
+#drupal-off-canvas .form-select,
+#drupal-off-canvas .form-text,
+#drupal-off-canvas .form-tel,
+#drupal-off-canvas .form-email,
+#drupal-off-canvas .form-url,
+#drupal-off-canvas .form-search,
+#drupal-off-canvas .form-number,
+#drupal-off-canvas .form-color,
+#drupal-off-canvas .form-file,
+#drupal-off-canvas .form-textarea,
+#drupal-off-canvas .form-date,
+#drupal-off-canvas .form-time {
+ box-sizing: border-box;
+ max-width: 100%;
+ padding: 6px;
+ margin: 5px 0 0 0;
+ border-width: 1px;
+ border-radius: 2px;
+ display: block;
+ font-family: inherit;
+ font-size: 14px;
+ color: #333;
+ line-height: 16px;
+ cursor: pointer;
+}
+/* Reduce contrast for fields against dark background. */
+#drupal-off-canvas .form-text,
+#drupal-off-canvas .form-tel,
+#drupal-off-canvas .form-email,
+#drupal-off-canvas .form-url,
+#drupal-off-canvas .form-search,
+#drupal-off-canvas .form-number,
+#drupal-off-canvas .form-color,
+#drupal-off-canvas .form-file,
+#drupal-off-canvas .form-textarea,
+#drupal-off-canvas .form-date,
+#drupal-off-canvas .form-time {
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
+ background-color: #eee;
+ border-color: #333;
+ color: #595959;
+}
+#drupal-off-canvas .form-text:focus,
+#drupal-off-canvas .form-tel:focus,
+#drupal-off-canvas .form-email:focus,
+#drupal-off-canvas .form-url:focus,
+#drupal-off-canvas .form-search:focus,
+#drupal-off-canvas .form-number:focus,
+#drupal-off-canvas .form-color:focus,
+#drupal-off-canvas .form-file:focus,
+#drupal-off-canvas .form-textarea:focus,
+#drupal-off-canvas .form-date:focus,
+#drupal-off-canvas .form-time:focus {
+ border-color: #40b6ff;
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125), 0 0 8px #40b6ff;
+ background-color: #fff;
+}
+#drupal-off-canvas td .form-item,
+#drupal-off-canvas td .form-select {
+ margin: 0;
+}
+#drupal-off-canvas .form-file {
+ margin-bottom: 5px;
+ width: 100%;
+}
+#drupal-off-canvas .form-actions {
+ text-align: center;
+ margin: 10px 0;
+}
+#drupal-off-canvas .ui-autocomplete {
+ background-color: white;
+ position: absolute;
+ top: 0;
+ left: 0;
+ cursor: default;
+}
+#drupal-off-canvas .ui-autocomplete li {
+ display: block;
+}
+#drupal-off-canvas .ui-autocomplete li a {
+ color: #595959 !important;
+ padding: 5px;
+}
diff --git a/core/modules/outside_in/js/off-canvas.js b/core/misc/dialog/off-canvas.js
similarity index 96%
rename from core/modules/outside_in/js/off-canvas.js
rename to core/misc/dialog/off-canvas.js
index 84df39d319..3034769b81 100644
--- a/core/modules/outside_in/js/off-canvas.js
+++ b/core/misc/dialog/off-canvas.js
@@ -15,8 +15,7 @@
return $element.is('#drupal-off-canvas');
},
beforeCreate: function beforeCreate(settings) {
- $('body').addClass('js-tray-open');
- settings.dialogClass += ' ui-dialog-off-canvas';
+ $('body').addClass('js-off-canvas-dialog-open');
settings.position = {
my: 'left top',
@@ -27,7 +26,7 @@
settings.height = $(window).height();
},
beforeClose: function beforeClose() {
- $('body').removeClass('js-tray-open');
+ $('body').removeClass('js-off-canvas-dialog-open');
$(document).off('.off-canvas');
$(window).off('.off-canvas');
diff --git a/core/misc/dialog/off-canvas.motion.css b/core/misc/dialog/off-canvas.motion.css
new file mode 100644
index 0000000000..335bd2fe5a
--- /dev/null
+++ b/core/misc/dialog/off-canvas.motion.css
@@ -0,0 +1,13 @@
+/**
+ * @file
+ * Motion effects for off-canvas dialog.
+ *
+ * Motion effects are in a separate file so that they can be easily turned off
+ * to improve performance if desired.
+ */
+
+.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/off-canvas.reset.css b/core/misc/dialog/off-canvas.reset.css
similarity index 100%
rename from core/modules/outside_in/css/off-canvas.reset.css
rename to core/misc/dialog/off-canvas.reset.css
diff --git a/core/modules/outside_in/css/off-canvas.table.css b/core/misc/dialog/off-canvas.table.css
similarity index 96%
rename from core/modules/outside_in/css/off-canvas.table.css
rename to core/misc/dialog/off-canvas.table.css
index 3a6e749757..7e7cd2e662 100644
--- a/core/modules/outside_in/css/off-canvas.table.css
+++ b/core/misc/dialog/off-canvas.table.css
@@ -1,6 +1,6 @@
/**
* @file
- * Visual styling for tables in the Settings Tray module's off canvas tray.
+ * Visual styling for tables in the off-canvas dialog.
*/
#drupal-off-canvas table * {
diff --git a/core/modules/outside_in/css/off-canvas.tabledrag.css b/core/misc/dialog/off-canvas.tabledrag.css
similarity index 94%
rename from core/modules/outside_in/css/off-canvas.tabledrag.css
rename to core/misc/dialog/off-canvas.tabledrag.css
index 4f6f9bee5e..9b5e97343f 100644
--- a/core/modules/outside_in/css/off-canvas.tabledrag.css
+++ b/core/misc/dialog/off-canvas.tabledrag.css
@@ -1,6 +1,6 @@
/**
* @file
- * Table drag behavior for Settings Tray module.
+ * Table drag behavior for off-canvas dialog.
*
* @see tabledrag.js
*/
@@ -38,7 +38,7 @@
}
#drupal-off-canvas a.tabledrag-handle .handle {
/* Use lighter drag icon against dark background. */
- background-image: url(../../../misc/icons/bebebe/move.svg);
+ background-image: url(../icons/bebebe/move.svg);
background-repeat: no-repeat;
background-position: center;
height: auto;
@@ -49,7 +49,7 @@
}
#drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
#drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {
- background-image: url(../../../misc/icons/787878/move.svg);
+ background-image: url(../icons/787878/move.svg);
text-decoration: none;
}
#drupal-off-canvas tr td {
diff --git a/core/modules/outside_in/css/off-canvas.theme.css b/core/misc/dialog/off-canvas.theme.css
similarity index 90%
rename from core/modules/outside_in/css/off-canvas.theme.css
rename to core/misc/dialog/off-canvas.theme.css
index 47bdcfbbcf..3f43266e4d 100644
--- a/core/modules/outside_in/css/off-canvas.theme.css
+++ b/core/misc/dialog/off-canvas.theme.css
@@ -10,7 +10,7 @@
z-index: 501;
}
-/* Style the tray header. */
+/* Style the off-canvas dialog header. */
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
padding: 1em;
background: #2d2d2d;
@@ -25,7 +25,7 @@
visibility: hidden;
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- background-image: url(../../../misc/icons/bebebe/ex.svg);
+ background-image: url(../icons/bebebe/ex.svg);
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
@@ -36,7 +36,7 @@
transition: background .5s ease;
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover {
- background-image: url(../../../misc/icons/ffffff/ex.svg);
+ background-image: url(../icons/ffffff/ex.svg);
}
[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
left: 1em;
@@ -60,7 +60,7 @@
padding-right: 30px;
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
- background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
+ background: transparent url(../icons/ffffff/pencil.svg) no-repeat scroll center center;
background-size: 100% auto;
content: '';
display: block;
diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/modules/outside_in/css/outside_in.motion.css
index 4bdd236321..620180a4a7 100644
--- a/core/modules/outside_in/css/outside_in.motion.css
+++ b/core/modules/outside_in/css/outside_in.motion.css
@@ -16,7 +16,7 @@
/* Transition the editables on the page, their contextual links and their hover states. */
.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 {
+.dialog-off-canvas__main-canvas.js-off-canvas-dialog-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/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml
index 06e24a8291..64e1eddd19 100644
--- a/core/modules/outside_in/outside_in.libraries.yml
+++ b/core/modules/outside_in/outside_in.libraries.yml
@@ -17,29 +17,3 @@ drupal.outside_in:
- core/drupal
- core/jquery.once
- core/drupal.ajax
-drupal.off_canvas:
- version: VERSION
- js:
- js/off-canvas.js: {}
- css:
- base:
- css/off-canvas.reset.css: {}
- css/off-canvas.base.css: {}
- css/off-canvas.css: {}
- css/off-canvas.theme.css: { group: 200 }
- component:
- css/off-canvas.motion.css: {}
- css/off-canvas.button.css: {}
- css/off-canvas.form.css: {}
- css/off-canvas.table.css: {}
- css/off-canvas.details.css: {}
- css/off-canvas.tabledrag.css: {}
- css/off-canvas.dropbutton.css: {}
-
- dependencies:
- - core/jquery
- - core/drupal
- - core/drupal.ajax
- - core/drupal.announce
- - core/drupal.dialog
- - core/drupal.dialog.ajax
diff --git a/core/modules/outside_in/outside_in.module b/core/modules/outside_in/outside_in.module
index acded3af11..eb4ada9f5c 100644
--- a/core/modules/outside_in/outside_in.module
+++ b/core/modules/outside_in/outside_in.module
@@ -44,7 +44,7 @@ function outside_in_contextual_links_view_alter(&$element, $items) {
$element['#links']['outside-inblock-configure']['title'] = t('Quick edit settings');
}
- $element['#attached']['library'][] = 'outside_in/drupal.off_canvas';
+ $element['#attached']['library'][] = 'core/drupal.dialog.off_canvas';
}
}
@@ -60,26 +60,6 @@ function outside_in_block_view_alter(array &$build) {
];
}
-/**
- * Implements hook_element_info_alter().
- */
-function outside_in_element_info_alter(&$type) {
- if (isset($type['page'])) {
- $type['page']['#theme_wrappers']['outside_in_page_wrapper'] = ['#weight' => -1000];
- }
-}
-
-/**
- * Implements hook_theme().
- */
-function outside_in_theme() {
- return [
- 'outside_in_page_wrapper' => [
- 'variables' => ['children' => NULL],
- ],
- ];
-}
-
/**
* Implements hook_entity_type_build().
*/
diff --git a/core/modules/outside_in/outside_in.services.yml b/core/modules/outside_in/outside_in.services.yml
deleted file mode 100644
index ce8214697a..0000000000
--- a/core/modules/outside_in/outside_in.services.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-services:
- main_content_renderer.off_canvas:
- class: Drupal\outside_in\Render\MainContent\OffCanvasRenderer
- arguments: ['@title_resolver', '@renderer']
- tags:
- - { name: render.main_content_renderer, format: drupal_dialog.off_canvas }
diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php
index daf3d1f737..b59b89f3e4 100644
--- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php
+++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php
@@ -5,6 +5,7 @@
use Drupal\block\Entity\Block;
use Drupal\block_content\Entity\BlockContent;
use Drupal\block_content\Entity\BlockContentType;
+use Drupal\Tests\system\FunctionalJavascript\OffCanvasTestBase;
use Drupal\user\Entity\Role;
/**
@@ -12,7 +13,7 @@
*
* @group outside_in
*/
-class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
+class OutsideInBlockFormTest extends OffCanvasTestBase {
const TOOLBAR_EDIT_LINK_SELECTOR = '#toolbar-bar div.contextual-toolbar-tab button';
@@ -528,4 +529,59 @@ public function testValidationMessages() {
}
}
+ /**
+ * Clicks a contextual link.
+ *
+ * @todo Remove this function when related trait added in
+ * https://www.drupal.org/node/2821724.
+ *
+ * @param string $selector
+ * The selector for the element that contains the contextual link.
+ * @param string $link_locator
+ * The link id, title, or text.
+ * @param bool $force_visible
+ * If true then the button will be forced to visible so it can be clicked.
+ */
+ protected function clickContextualLink($selector, $link_locator, $force_visible = TRUE) {
+ if ($force_visible) {
+ $this->toggleContextualTriggerVisibility($selector);
+ }
+
+ $element = $this->getSession()->getPage()->find('css', $selector);
+ $element->find('css', '.contextual button')->press();
+ $element->findLink($link_locator)->click();
+
+ if ($force_visible) {
+ $this->toggleContextualTriggerVisibility($selector);
+ }
+ }
+
+ /**
+ * Toggles the visibility of a contextual trigger.
+ *
+ * @todo Remove this function when related trait added in
+ * https://www.drupal.org/node/2821724.
+ *
+ * @param string $selector
+ * The selector for the element that contains the contextual link.
+ */
+ protected function toggleContextualTriggerVisibility($selector) {
+ // Hovering over the element itself with should be enough, but does not
+ // work. Manually remove the visually-hidden class.
+ $this->getSession()->executeScript("jQuery('{$selector} .contextual .trigger').toggleClass('visually-hidden');");
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function getTestThemes() {
+ $themes = parent::getTestThemes();
+ // Remove 'seven' theme. Setting Tray "Edit Mode" will not work with 'seven'
+ // because it removes all contextual links the off-canvas dialog should.
+ if (($key = array_search('seven', $themes)) !== FALSE) {
+ unset($themes[$key]);
+ }
+ return $themes;
+ }
+
}
diff --git a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php b/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php
similarity index 85%
rename from core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
rename to core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php
index ce3356f112..6d7ddbb9d4 100644
--- a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
+++ b/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php
@@ -1,30 +1,22 @@
drupalLogin($this->drupalCreateUser(['administer contact forms']));
// Ensure the elements render without notices or exceptions.
$this->drupalGet('ajax-test/dialog');
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index d327d4e74b..cb366ac49c 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -268,6 +268,9 @@ function system_theme() {
],
'template' => 'entity-add-list',
],
+ 'off_canvas_page_wrapper' => [
+ 'variables' => ['children' => NULL],
+ ],
]);
}
@@ -1515,3 +1518,12 @@ function system_query_entity_reference_alter(AlterableInterface $query) {
$handler = $query->getMetadata('entity_reference_selection_handler');
$handler->entityQueryAlter($query);
}
+
+/**
+ * Implements hook_element_info_alter().
+ */
+function system_element_info_alter(&$type) {
+ if (isset($type['page'])) {
+ $type['page']['#theme_wrappers']['off_canvas_page_wrapper'] = ['#weight' => -1000];
+ }
+}
diff --git a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig b/core/modules/system/templates/off-canvas-page-wrapper.html.twig
similarity index 58%
rename from core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
rename to core/modules/system/templates/off-canvas-page-wrapper.html.twig
index 11c7f5311d..98b67ba2c2 100644
--- a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
+++ b/core/modules/system/templates/off-canvas-page-wrapper.html.twig
@@ -5,13 +5,13 @@
*
* For consistent wrapping to {{ page }} render in all themes. The
* "data-off-canvas-main-canvas" attribute is required by the off-canvas dialog.
- * This is used by the outside_in/drupal.off_canvas library to select the
- * "main canvas" page element as opposed to the "off canvas" which is the tray
+ * This is used by the core/drupal.dialog.off_canvas library to select the
+ * "main canvas" page element as opposed to the "off canvas" which is the dialog
* itself. The "main canvas" element must be resized according to the width of
- * the "off canvas" tray so that no portion of the "main canvas" is obstructed
- * by the tray. The tray can vary in width when opened and can be resized by the
- * user. The "data-off-canvas-main-canvas" attribute cannot be removed without
- * breaking the off-canvas dialog functionality.
+ * the "off canvas" dialog so that no portion of the "main canvas" is obstructed
+ * by the off-canvas dialog. The off-canvas dialog can vary in width when opened
+ * and can be resized by the user. The "data-off-canvas-main-canvas" attribute
+ * cannot be removed without breaking the off-canvas dialog functionality.
*
* Available variables:
* - children: Contains the child elements of the page.
@@ -20,7 +20,7 @@
*/
#}
{% if children %}
-
+
{{ children }}
{% endif %}
diff --git a/core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.info.yml b/core/modules/system/tests/modules/off_canvas_test/off_canvas_test.info.yml
similarity index 76%
rename from core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.info.yml
rename to core/modules/system/tests/modules/off_canvas_test/off_canvas_test.info.yml
index 8c6cc80242..9680b1842d 100644
--- a/core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.info.yml
+++ b/core/modules/system/tests/modules/off_canvas_test/off_canvas_test.info.yml
@@ -4,6 +4,3 @@ description: 'Provides off-canvas test links.'
package: Testing
version: VERSION
core: 8.x
-dependencies:
- - block
- - outside_in
diff --git a/core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.routing.yml b/core/modules/system/tests/modules/off_canvas_test/off_canvas_test.routing.yml
similarity index 100%
rename from core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.routing.yml
rename to core/modules/system/tests/modules/off_canvas_test/off_canvas_test.routing.yml
diff --git a/core/modules/outside_in/tests/modules/off_canvas_test/src/Controller/TestController.php b/core/modules/system/tests/modules/off_canvas_test/src/Controller/TestController.php
similarity index 88%
rename from core/modules/outside_in/tests/modules/off_canvas_test/src/Controller/TestController.php
rename to core/modules/system/tests/modules/off_canvas_test/src/Controller/TestController.php
index 6164b06fc2..ea310fa0bd 100644
--- a/core/modules/outside_in/tests/modules/off_canvas_test/src/Controller/TestController.php
+++ b/core/modules/system/tests/modules/off_canvas_test/src/Controller/TestController.php
@@ -53,11 +53,6 @@ public function linksDisplay() {
'data-dialog-type' => 'dialog',
'data-dialog-renderer' => 'off_canvas',
],
- '#attached' => [
- 'library' => [
- 'outside_in/drupal.outside_in',
- ],
- ],
],
'off_canvas_link_2' => [
'#title' => 'Click Me 2!',
@@ -71,11 +66,6 @@ public function linksDisplay() {
'width' => 555,
]),
],
- '#attached' => [
- 'library' => [
- 'outside_in/drupal.outside_in',
- ],
- ],
],
'other_dialog_links' => [
'#title' => 'Display more links!',
@@ -86,10 +76,10 @@ public function linksDisplay() {
'data-dialog-type' => 'dialog',
'data-dialog-renderer' => 'off_canvas',
],
- '#attached' => [
- 'library' => [
- 'outside_in/drupal.outside_in',
- ],
+ ],
+ '#attached' => [
+ 'library' => [
+ 'core/drupal.dialog.ajax',
],
],
];
@@ -129,11 +119,6 @@ public function otherDialogLinks() {
],
],
],
- '#attached' => [
- 'library' => [
- 'outside_in/drupal.outside_in',
- ],
- ],
];
}
diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php
similarity index 89%
rename from core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php
rename to core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php
index 2f64d9fe2c..80b1980eea 100644
--- a/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php
+++ b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php
@@ -1,22 +1,18 @@
elementExists('css', '#drupal-off-canvas');
// Check that response text is on page.
$web_assert->pageTextContains("Thing $link_index says hello");
- $off_canvas_tray = $this->getTray();
+ $off_canvas_tray = $this->getOffCanvasDialog();
// Check that tray is visible.
$this->assertEquals(TRUE, $off_canvas_tray->isVisible());
@@ -111,13 +107,4 @@ public function testNarrowWidth() {
}
}
- /**
- * {@inheritdoc}
- */
- protected function getTestThemes() {
- // Add 'seven' theme. Setting Tray "Edit Mode" will not work with 'seven'
- // because it removes all contextual links the off-canvas dialog should.
- return array_merge(parent::getTestThemes(), ['seven']);
- }
-
}
diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTestBase.php
similarity index 54%
rename from core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php
rename to core/modules/system/tests/src/FunctionalJavascript/OffCanvasTestBase.php
index 2ce2bf64d6..6b74b5efcb 100644
--- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php
+++ b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTestBase.php
@@ -1,13 +1,13 @@
assertSession()->assertWaitOnAjaxRequest();
return $return;
@@ -41,6 +41,9 @@ protected function enableTheme($theme) {
*/
protected function waitForOffCanvasToOpen() {
$web_assert = $this->assertSession();
+ // Wait just slightly longer than the off-canvas dialog CSS animation.
+ // @see core/misc/dialog/off-canvas.motion.css
+ $this->getSession()->wait(800);
$web_assert->assertWaitOnAjaxRequest();
$this->assertElementVisibleAfterWait('css', '#drupal-off-canvas');
}
@@ -57,10 +60,10 @@ protected function waitForOffCanvasToClose() {
*
* @return \Behat\Mink\Element\NodeElement|null
*/
- protected function getTray() {
- $tray = $this->getSession()->getPage()->find('css', '.ui-dialog[aria-describedby="drupal-off-canvas"]');
- $this->assertEquals(FALSE, empty($tray), 'The tray was found.');
- return $tray;
+ protected function getOffCanvasDialog() {
+ $off_canvas_dialog = $this->getSession()->getPage()->find('css', '.ui-dialog[aria-describedby="drupal-off-canvas"]');
+ $this->assertEquals(FALSE, empty($off_canvas_dialog), 'The off-canvas dialog was found.');
+ return $off_canvas_dialog;
}
/**
@@ -70,54 +73,14 @@ protected function getTray() {
* CSS selector.
* @param int $timeout
* (optional) Timeout in milliseconds, defaults to 10000.
+ *
+ * @todo Remove in https://www.drupal.org/node/2892440.
*/
protected function waitForNoElement($selector, $timeout = 10000) {
$condition = "(jQuery('$selector').length == 0)";
$this->assertJsCondition($condition, $timeout);
}
- /**
- * Clicks a contextual link.
- *
- * @todo Remove this function when related trait added in
- * https://www.drupal.org/node/2821724.
- *
- * @param string $selector
- * The selector for the element that contains the contextual link.
- * @param string $link_locator
- * The link id, title, or text.
- * @param bool $force_visible
- * If true then the button will be forced to visible so it can be clicked.
- */
- protected function clickContextualLink($selector, $link_locator, $force_visible = TRUE) {
- if ($force_visible) {
- $this->toggleContextualTriggerVisibility($selector);
- }
-
- $element = $this->getSession()->getPage()->find('css', $selector);
- $element->find('css', '.contextual button')->press();
- $element->findLink($link_locator)->click();
-
- if ($force_visible) {
- $this->toggleContextualTriggerVisibility($selector);
- }
- }
-
- /**
- * Toggles the visibility of a contextual trigger.
- *
- * @todo Remove this function when related trait added in
- * https://www.drupal.org/node/2821724.
- *
- * @param string $selector
- * The selector for the element that contains the contextual link.
- */
- protected function toggleContextualTriggerVisibility($selector) {
- // Hovering over the element itself with should be enough, but does not
- // work. Manually remove the visually-hidden class.
- $this->getSession()->executeScript("jQuery('{$selector} .contextual .trigger').toggleClass('visually-hidden');");
- }
-
/**
* Get themes to test.
*
@@ -125,7 +88,7 @@ protected function toggleContextualTriggerVisibility($selector) {
* Theme names to test.
*/
protected function getTestThemes() {
- return ['bartik', 'stark', 'classy', 'stable'];
+ return ['bartik', 'stark', 'classy', 'stable', 'seven'];
}
/**
diff --git a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php b/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php
similarity index 81%
rename from core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
rename to core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php
index 314fd1c2f3..e2d933a657 100644
--- a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
+++ b/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php
@@ -1,13 +1,13 @@
legend {
+ font-weight: bold;
+}
+#drupal-off-canvas h1,
+#drupal-off-canvas .heading-a {
+ display: block;
+ font-weight: bold;
+ font-size: 1.625em;
+ line-height: 1.875em;
+}
+#drupal-off-canvas h2,
+#drupal-off-canvas .heading-b {
+ display: block;
+ font-weight: bold;
+ margin: 10px 0;
+ font-size: 1.385em;
+}
+#drupal-off-canvas h3,
+#drupal-off-canvas .heading-c {
+ display: block;
+ font-weight: bold;
+ margin: 10px 0;
+ font-size: 1.231em;
+}
+#drupal-off-canvas h4,
+#drupal-off-canvas .heading-d {
+ display: block;
+ font-weight: bold;
+ margin: 10px 0;
+ font-size: 1.154em;
+}
+#drupal-off-canvas h5,
+#drupal-off-canvas .heading-e {
+ display: block;
+ font-weight: bold;
+ margin: 10px 0;
+ font-size: 1.077em;
+}
+#drupal-off-canvas h6,
+#drupal-off-canvas .heading-f {
+ display: block;
+ font-weight: bold;
+ margin: 10px 0;
+ font-size: 1.077em;
+}
+#drupal-off-canvas p {
+ margin: 1em 0;
+}
+#drupal-off-canvas dl {
+ margin: 0 0 20px;
+}
+#drupal-off-canvas dl dd,
+#drupal-off-canvas dl dl {
+ margin-left: 20px; /* LTR */
+ margin-bottom: 10px;
+}
+[dir="rtl"] #drupal-off-canvas dl dd,
+[dir="rtl"] #drupal-off-canvas dl dl {
+ margin-right: 20px;
+}
+#drupal-off-canvas blockquote {
+ margin: 1em 40px;
+}
+#drupal-off-canvas address {
+ font-style: italic;
+}
+#drupal-off-canvas u,
+#drupal-off-canvas ins {
+ text-decoration: underline;
+}
+#drupal-off-canvas s,
+#drupal-off-canvas strike,
+#drupal-off-canvas del {
+ text-decoration: line-through;
+}
+#drupal-off-canvas big {
+ font-size: larger;
+}
+#drupal-off-canvas small {
+ font-size: smaller;
+}
+#drupal-off-canvas sub {
+ vertical-align: sub;
+ font-size: smaller;
+ line-height: normal;
+}
+#drupal-off-canvas sup {
+ vertical-align: super;
+ font-size: smaller;
+ line-height: normal;
+}
+#drupal-off-canvas nobr {
+ white-space: nowrap;
+}
+#drupal-off-canvas abbr,
+#drupal-off-canvas acronym {
+ border-bottom: dotted 1px;
+ background: transparent;
+}
+
+#drupal-off-canvas ul {
+ list-style-type: disc;
+ list-style-image: none;
+}
+[dir="rtl"] #drupal-off-canvas .messages__list {
+ margin-right: 0;
+}
+#drupal-off-canvas ol {
+ list-style-type: decimal;
+}
+#drupal-off-canvas ul li,
+#drupal-off-canvas ol li {
+ display: block;
+}
+#drupal-off-canvas quote,
+#drupal-off-canvas code {
+ margin: 20px 0;
+}
+#drupal-off-canvas pre {
+ margin: 20px 0;
+ white-space: pre-wrap;
+}
+
+/* Classes for hidden and visually hidden elements. See hidden.module.css. */
+#drupal-off-canvas .hidden {
+ display: none;
+}
+#drupal-off-canvas .visually-hidden {
+ position: absolute !important;
+ clip: rect(1px, 1px, 1px, 1px);
+ overflow: hidden;
+ height: 1px;
+ width: 1px;
+ word-wrap: normal;
+}
+#drupal-off-canvas .visually-hidden.focusable:active,
+#drupal-off-canvas .visually-hidden.focusable:focus {
+ position: static !important;
+ clip: auto;
+ overflow: visible;
+ height: auto;
+ width: auto;
+}
+#drupal-off-canvas .invisible {
+ visibility: hidden;
+}
+
+/* Some system classes. See system.admin.css. */
+#drupal-off-canvas .panel {
+ padding: 5px 5px 15px;
+}
+#drupal-off-canvas .panel__description {
+ margin: 0 0 3px;
+ padding: 2px 0 3px 0;
+}
+#drupal-off-canvas .compact-link {
+ margin: 0 0 10px 0;
+}
+#drupal-off-canvas small .admin-link:before {
+ content: ' [';
+}
+#drupal-off-canvas small .admin-link:after {
+ content: ']';
+}
+
+/* Override jquery UI */
+#drupal-off-canvas .ui-widget-content a {
+ color: #85bef4 !important;
+}
+
+/* Message styles */
+#drupal-off-canvas .messages {
+ background: no-repeat 10px 17px;
+}
+[dir="rtl"] #drupal-off-canvas .messages {
+ background-position: right 10px top 17px;
+}
+#drupal-off-canvas .messages abbr {
+ color: #444;
+}
+#drupal-off-canvas .messages--status {
+ background-color: #f3faef;
+ background-image: url(../../../images/core/icons/73b355/check.svg);
+ color: #325e1c;
+}
+#drupal-off-canvas .messages--warning {
+ background-color: #fdf8ed;
+ background-image: url(../../../images/core/icons/e29700/warning.svg);
+ color: #734c00;
+}
+
+#drupal-off-canvas .messages--error {
+ background-color: #fcf4f2;
+ background-image: url(../../../images/core/icons/e32700/error.svg);
+ color: #a51b00;
+}
+
+#drupal-off-canvas .messages--error div[role="alert"] {
+ background: transparent;
+ color: inherit;
+}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.button.css b/core/themes/stable/css/core/dialog/off-canvas.button.css
new file mode 100644
index 0000000000..e37b7ac4e0
--- /dev/null
+++ b/core/themes/stable/css/core/dialog/off-canvas.button.css
@@ -0,0 +1,117 @@
+/**
+ * Visual styling for buttons in the off-canvas dialog.
+ *
+ * @see seven/css/components/buttons.css
+ */
+
+#drupal-off-canvas button,
+#drupal-off-canvas .button {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ margin: 0 0 10px;
+ padding: 0;
+ border: 0;
+ box-shadow: none;
+ font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+ line-height: normal;
+ text-transform: none;
+ text-decoration: none;
+ cursor: pointer;
+}
+#drupal-off-canvas button.link {
+ display: inline;
+ background: transparent;
+ font-size: 14px;
+ color: #85bef4;
+ transition: color .5s ease;
+}
+#drupal-off-canvas button.link:hover,
+#drupal-off-canvas button.link:focus {
+ color: #46a0f5;
+ text-decoration: none;
+}
+#drupal-off-canvas input[type="submit"].button {
+ display: inline-block;
+ position: relative;
+ width: 100%;
+ height: auto;
+ padding: 4px 20px;
+ border: 0;
+ border-radius: 20em;
+ background: #777;
+ font-weight: 600;
+ font-size: 14px;
+ color: #f5f5f5;
+ text-align: center;
+ cursor: pointer;
+ transition: background .5s ease;
+}
+#drupal-off-canvas input[type="submit"].button:hover,
+#drupal-off-canvas input[type="submit"].button:focus,
+#drupal-off-canvas input[type="submit"].button:active {
+ border: 0;
+ color: #fff;
+ text-decoration: none;
+ outline: none;
+ z-index: 10;
+}
+#drupal-off-canvas input[type="submit"].button:focus,
+#drupal-off-canvas input[type="submit"].button:active {
+ box-shadow: 0 3px 3px 2px rgba(0,0,0,0.1);
+}
+#drupal-off-canvas input[type="submit"].button--primary {
+ border: 0;
+ background: #277abd;
+ color: #fff;
+ margin-top: 15px;
+}
+#drupal-off-canvas input[type="submit"].button--primary:hover,
+#drupal-off-canvas input[type="submit"].button--primary:focus,
+#drupal-off-canvas input[type="submit"].button--primary:active {
+ background: #2b8bd8;
+ outline: none;
+}
+#drupal-off-canvas .button-action:before {
+ margin-left: -0.2em; /* LTR */
+ padding-right: 0.2em; /* LTR */
+ font-size: 14px;
+ line-height: 16px;
+}
+[dir="rtl"] #drupal-off-canvas .button-action:before {
+ margin-right: -0.2em;
+ margin-left: 0;
+ padding-right: 0;
+ padding-left: 0.2em;
+}
+#drupal-off-canvas .no-touchevents .button--small {
+ font-size: 13px;
+ padding: 2px 1em; /* 1 */
+}
+#drupal-off-canvas .button:disabled,
+#drupal-off-canvas .button:disabled:active,
+#drupal-off-canvas .button.is-disabled,
+#drupal-off-canvas .button.is-disabled:active {
+ border: 0;
+ background: #555;
+ color: #5c5c5c;
+ font-weight: normal;
+ cursor: default;
+}
+#drupal-off-canvas .button--danger {
+ border-radius: 0;
+ color: #c72100;
+ font-weight: 400;
+ text-decoration: none;
+}
+#drupal-off-canvas .button--danger:hover,
+#drupal-off-canvas .button--danger:focus,
+#drupal-off-canvas .button--danger:active {
+ color: #ff2a00;
+ text-decoration: none;
+ text-shadow: none;
+}
+#drupal-off-canvas .button--danger:disabled,
+#drupal-off-canvas .button--danger.is-disabled {
+ color: #737373;
+ cursor: default;
+}
diff --git a/core/modules/outside_in/css/off-canvas.css b/core/themes/stable/css/core/dialog/off-canvas.css
similarity index 69%
rename from core/modules/outside_in/css/off-canvas.css
rename to core/themes/stable/css/core/dialog/off-canvas.css
index d7f3258b26..52a8b9e079 100644
--- a/core/modules/outside_in/css/off-canvas.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.css
@@ -1,8 +1,6 @@
/**
* @file
* CSS for off-canvas dialog.
- *
- * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443.
*/
/* Position the off-canvas dialog container outside the right of the viewport. */
@@ -23,14 +21,14 @@
text-align: right;
}
-/* Position the dialog-off-canvas tray container outside the right of the viewport. */
+/* Position the off-canvas dialog 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-off-canvas tray. */
+/* Wrap the form that's inside the off-canvas dialog. */
.ui-dialog-off-canvas #drupal-off-canvas {
padding: 0 20px;
/* Prevent horizontal scrollbar. */
@@ -42,15 +40,15 @@
}
/*
- * Force the tray to be 100% width at the same breakpoint the dialog system uses
- * to expand dialog widths.
+ * Force the off-canvas dialog 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-off-canvas {
width: 100% !important;
}
- /* When tray is at 100% width stop the body from scrolling */
- .js-tray-open {
+ /* When off-canvas dialog is at 100% width stop the body from scrolling */
+ .js-off-canvas-dialog-open {
height: 100%;
overflow-y: hidden;
}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.details.css b/core/themes/stable/css/core/dialog/off-canvas.details.css
new file mode 100644
index 0000000000..fcd526f0b0
--- /dev/null
+++ b/core/themes/stable/css/core/dialog/off-canvas.details.css
@@ -0,0 +1,61 @@
+/**
+ * @file
+ * Visual styling for summary and details in the off-canvas dialog.
+ */
+
+#drupal-off-canvas details,
+#drupal-off-canvas summary {
+ display: block;
+ font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+}
+#drupal-off-canvas details,
+#drupal-off-canvas summary,
+#drupal-off-canvas .ui-dialog-content {
+ background: #474747;
+ color: #ddd;
+}
+#drupal-off-canvas summary a {
+ color: #ddd;
+ padding-top: 0;
+ padding-bottom: 0;
+}
+#drupal-off-canvas summary a:hover,
+#drupal-off-canvas summary a:focus {
+ color: #fff;
+}
+#drupal-off-canvas details,
+#drupal-off-canvas summary,
+#drupal-off-canvas .details-wrapper {
+ border-width: 0;
+ /* Cancel out the padding of the parent. */
+ margin: 0 -20px;
+ padding: 0 20px;
+}
+#drupal-off-canvas summary {
+ text-shadow: none;
+ padding: 10px 20px;
+ font-size: 14px;
+ transition: all .5s ease;
+}
+#drupal-off-canvas summary:hover,
+#drupal-off-canvas summary:focus {
+ background-color: #222;
+ outline: none;
+}
+#drupal-off-canvas details[open] {
+ padding-bottom: 10px;
+}
+#drupal-off-canvas details[open] > summary {
+ background-color: #333;
+ color: #eee;
+}
+#drupal-off-canvas details[open] > summary:hover {
+ background-color: #222;
+ color: #fff;
+}
+#drupal-off-canvas details .placeholder {
+ font: inherit;
+ color: inherit;
+ font-style: italic;
+ background: transparent;
+}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.dropbutton.css b/core/themes/stable/css/core/dialog/off-canvas.dropbutton.css
new file mode 100644
index 0000000000..99f5c61a9d
--- /dev/null
+++ b/core/themes/stable/css/core/dialog/off-canvas.dropbutton.css
@@ -0,0 +1,291 @@
+/**
+ * @file
+ * Styles for dropbuttons in the off-canvas dialog.
+ */
+
+#drupal-off-canvas .dropbutton-wrapper,
+#drupal-off-canvas .dropbutton-widget {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ display: block;
+ position: static;
+ transition: none;
+}
+#drupal-off-canvas .dropbutton-widget {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: #277abd;
+ border-radius: 1em;
+ font-weight: 600;
+ color: #fff;
+ text-transform: none;
+ text-decoration: none;
+ text-align: center;
+ line-height: normal;
+ cursor: pointer;
+ transition: background .5s ease;
+}
+#drupal-off-canvas .dropbutton-widget:hover {
+ background: #2b8bd8;
+}
+
+/*
+ * Style dropbutton single.
+ */
+
+#drupal-off-canvas .dropbutton-single .dropbutton-action a {
+ padding: 0;
+ /* Overlap icon for trigger. */
+ margin-top: -2em;
+ height: 2.2em;
+ cursor: pointer;
+}
+#drupal-off-canvas .dropbutton-single .dropbutton-action:hover,
+#drupal-off-canvas .dropbutton-single .dropbutton-action:focus,
+#drupal-off-canvas .dropbutton-single .dropbutton-action a:hover,
+#drupal-off-canvas .dropbutton-single .dropbutton-action a:focus {
+ text-decoration: none;
+ outline: none;
+}
+#drupal-off-canvas .dropbutton-widget .dropbutton {
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+}
+#drupal-off-canvas .dropbutton li,
+#drupal-off-canvas .dropbutton a {
+ display: block;
+ width: auto;
+ padding: 4px 0;
+ text-align: left;
+ color: #555;
+ outline: none;
+}
+#drupal-off-canvas .dropbutton li:hover,
+#drupal-off-canvas .dropbutton li:focus,
+#drupal-off-canvas .dropbutton a:hover,
+#drupal-off-canvas .dropbutton a:focus {
+ background: transparent;
+ color: #333;
+ outline: none;
+}
+
+/*
+ * Style dropbutton multiple.
+ */
+
+#drupal-off-canvas .dropbutton-multiple .dropbutton-widget {
+ width: 2em;
+ height: 2em;
+}
+#drupal-off-canvas .dropbutton-multiple .dropbutton-widget:hover {
+ background-color: #2b8bd8;
+}
+
+/* Hide the other actions until the dropbutton is triggered. */
+#drupal-off-canvas .dropbutton-multiple .dropbutton .secondary-action {
+ display: none;
+}
+
+/* The toggle to expand the button. */
+#drupal-off-canvas .dropbutton-toggle {
+ position: absolute;
+ top: 0;
+ right: 0; /* LTR */
+ bottom: 0;
+ display: block;
+ width: 2em;
+ color: #fff;
+ text-indent: 110%;
+ white-space: nowrap;
+}
+#drupal-off-canvas .dropbutton-toggle button {
+ display: block;
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ border: 0 solid transparent;
+ border-bottom-right-radius: 1em; /* LTR */
+ border-top-right-radius: 1em; /* LTR */
+ cursor: pointer;
+}
+#drupal-off-canvas .dropbutton-toggle button:hover,
+#drupal-off-canvas .dropbutton-toggle button:focus {
+ outline: none;
+}
+
+/* The toggle arrow. */
+#drupal-off-canvas .dropbutton-arrow {
+ position: absolute;
+ display: block;
+ height: 0;
+ width: 0;
+ margin-top: 0;
+ border-bottom-color: transparent;
+ border-left-color: transparent;
+ border-right-color: transparent;
+ border-style: solid;
+ border-width: 0.3333em 0.3333em 0;
+ color: #fff;
+ line-height: 0;
+ overflow: hidden;
+}
+#drupal-off-canvas span.dropbutton-arrow {
+ top: 7px;
+ right: 7px; /* LTR */
+ background: transparent;
+}
+#drupal-off-canvas span.dropbutton-arrow:hover {
+ background: transparent;
+}
+
+#drupal-off-canvas .dropbutton-action > .js-form-submit.form-submit,
+#drupal-off-canvas .dropbutton-toggle button {
+ position: relative;
+ text-shadow: none;
+}
+
+/*
+ * Dropbuttons when in a table cell.
+ */
+
+/* Make sure table cell doesn't collapse around absolute positioned dropbutton. */
+#drupal-off-canvas td .dropbutton-single {
+ min-width: 2em;
+}
+#drupal-off-canvas td .dropbutton-multiple {
+ min-width: 2em;
+ padding-right: 0;
+ padding-left: 0;
+ margin-right: 0;
+ margin-left: 0;
+ border: 0;
+}
+#drupal-off-canvas td .dropbutton-multiple .dropbutton-action a,
+#drupal-off-canvas td .dropbutton-multiple .dropbutton-action input,
+#drupal-off-canvas td .dropbutton-multiple .dropbutton-action button {
+ width: auto;
+ padding: 0;
+ font-size: inherit;
+}
+#drupal-off-canvas td .dropbutton-wrapper {
+ margin-bottom: 0;
+}
+
+/* Push the widget to the right so text expands left. */
+#drupal-off-canvas td .dropbutton-widget {
+ position: absolute;
+ right: 12px; /* LTR */
+ padding: 0;
+ background: #277abd none;
+}
+
+/* Push the wrapper to the right edge of the td. */
+#drupal-off-canvas td .dropbutton-single,
+#drupal-off-canvas td .dropbutton-multiple {
+ float: right; /* LTR */
+ padding-right: 0;
+ margin-right: 0;
+ max-width: initial;
+ min-width: initial;
+ position: relative;
+}
+#drupal-off-canvas td .dropbutton-widget .dropbutton {
+ margin: 0;
+ width: 2em;
+ height: 2em;
+ overflow: hidden;
+ background: transparent;
+}
+
+/* Push text out of the way. */
+#drupal-off-canvas td .dropbutton-multiple li,
+#drupal-off-canvas td .dropbutton-multiple a {
+ margin-left: -9999px;
+ background: transparent;
+}
+#drupal-off-canvas td .dropbutton-multiple.open .dropbutton li,
+#drupal-off-canvas td .dropbutton-multiple.open .dropbutton a {
+ margin-left: 0;
+ width: auto;
+ color: #fff;
+}
+
+/* Collapse the button to a circle. */
+#drupal-off-canvas td .dropbutton-toggle {
+ width: 2em;
+ height: 2em;
+ border-radius: 1em;
+}
+#drupal-off-canvas td .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
+ border: 0;
+ background: transparent;
+}
+
+/* Prevent list item from expanding it's container. */
+#drupal-off-canvas td ul.dropbutton li.edit {
+ width: 2em;
+ height: 2em;
+}
+
+/* Make li text transparent above icon so it's clickable. */
+#drupal-off-canvas td .dropbutton-single li.edit.dropbutton-action > a {
+ color: transparent;
+ z-index: 1;
+}
+
+/* Put pencil icon in place of hidden 'edit' text on single buttons. */
+#drupal-off-canvas td .dropbutton-single .edit:before {
+ content: '.';
+ display: block;
+ color: transparent;
+ background: transparent url(../../../images/core/icons/ffffff/pencil.svg) no-repeat center;
+ background-size: 14px;
+}
+
+/* Dropbutton when triggered expands to show secondary items. */
+#drupal-off-canvas .dropbutton-multiple.open {
+ z-index: 100;
+}
+
+/* Create visual separation if there is an adjacent button. */
+#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
+ box-shadow: 0 3px 3px 2px rgba(0,0,0,0.5);
+}
+
+/* Triggered dropbutton expands to show secondary items. */
+#drupal-off-canvas .dropbutton-multiple.open,
+#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
+ display: block;
+ width: auto;
+ height: auto;
+ max-width: none;
+ min-width: 0;
+ padding: 0;
+ overflow: visible;
+}
+
+/* Triggered dropbutton in td expands to show secondary items. */
+#drupal-off-canvas td .dropbutton-multiple.open .dropbutton,
+#drupal-off-canvas .dropbutton-multiple.open .dropbutton .secondary-action {
+ display: block;
+ width: auto;
+ height: auto;
+ padding-right: 1em; /* LTR */
+}
+[dir="rtl"] #drupal-off-canvas td .dropbutton-multiple.open .dropbutton {
+ padding-left: 1em;
+ padding-right: inherit;
+}
+#drupal-off-canvas .dropbutton-multiple.open .dropbutton li a {
+ padding: 2px 1em;
+}
+
+/* When open, the toggle arrow points upward. */
+#drupal-off-canvas .dropbutton-multiple.open span.dropbutton-arrow {
+ border-bottom: 0.3333em solid;
+ border-top-color: transparent;
+ top: 2px;
+}
diff --git a/core/modules/outside_in/css/off-canvas.form.css b/core/themes/stable/css/core/dialog/off-canvas.form.css
similarity index 97%
rename from core/modules/outside_in/css/off-canvas.form.css
rename to core/themes/stable/css/core/dialog/off-canvas.form.css
index 254b2c74e9..b47dbcc6f2 100644
--- a/core/modules/outside_in/css/off-canvas.form.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.form.css
@@ -1,6 +1,6 @@
/**
* @file
- * Visual styling for forms in the Settings Tray module's off canvas tray.
+ * Visual styling for forms in the off-canvas dialog.
*/
#drupal-off-canvas form {
diff --git a/core/modules/outside_in/css/off-canvas.motion.css b/core/themes/stable/css/core/dialog/off-canvas.motion.css
similarity index 60%
rename from core/modules/outside_in/css/off-canvas.motion.css
rename to core/themes/stable/css/core/dialog/off-canvas.motion.css
index e8df8dbbd2..335bd2fe5a 100644
--- a/core/modules/outside_in/css/off-canvas.motion.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.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.
*/
.dialog-off-canvas__main-canvas {
diff --git a/core/themes/stable/css/core/dialog/off-canvas.reset.css b/core/themes/stable/css/core/dialog/off-canvas.reset.css
new file mode 100644
index 0000000000..cd87eda9c9
--- /dev/null
+++ b/core/themes/stable/css/core/dialog/off-canvas.reset.css
@@ -0,0 +1,386 @@
+/**
+ * @file
+ * Reset most HTML elements styles for the off-canvas dialog.
+ *
+ * This is a generic reset. Drupal-specific classes are reset in components.
+ */
+
+/**
+ * Do not include div in then initial overrides because including div will
+ * cause the need for many more overrides in this file.
+ */
+#drupal-off-canvas *:not(div),
+#drupal-off-canvas *:after,
+#drupal-off-canvas *:before {
+ all: initial;
+ box-sizing: border-box;
+ text-shadow: none;
+ -webkit-font-smoothing: antialiased;
+ -webkit-tap-highlight-color: initial;
+}
+
+/* Reset size and position on elements. */
+#drupal-off-canvas a,
+#drupal-off-canvas abbr,
+#drupal-off-canvas acronym,
+#drupal-off-canvas address,
+#drupal-off-canvas applet,
+#drupal-off-canvas article,
+#drupal-off-canvas aside,
+#drupal-off-canvas audio,
+#drupal-off-canvas b,
+#drupal-off-canvas big,
+#drupal-off-canvas blockquote,
+#drupal-off-canvas body,
+#drupal-off-canvas canvas,
+#drupal-off-canvas caption,
+#drupal-off-canvas cite,
+#drupal-off-canvas code,
+#drupal-off-canvas dd,
+#drupal-off-canvas del,
+#drupal-off-canvas dfn,
+#drupal-off-canvas dialog,
+#drupal-off-canvas dl,
+#drupal-off-canvas dt,
+#drupal-off-canvas em,
+#drupal-off-canvas embed,
+#drupal-off-canvas fieldset,
+#drupal-off-canvas figcaption,
+#drupal-off-canvas figure,
+#drupal-off-canvas footer,
+#drupal-off-canvas form,
+#drupal-off-canvas h1,
+#drupal-off-canvas h2,
+#drupal-off-canvas h3,
+#drupal-off-canvas h4,
+#drupal-off-canvas h5,
+#drupal-off-canvas h6,
+#drupal-off-canvas header,
+#drupal-off-canvas hgroup,
+#drupal-off-canvas hr,
+#drupal-off-canvas html,
+#drupal-off-canvas i,
+#drupal-off-canvas iframe,
+#drupal-off-canvas img,
+#drupal-off-canvas ins,
+#drupal-off-canvas kbd,
+#drupal-off-canvas label,
+#drupal-off-canvas legend,
+#drupal-off-canvas li,
+#drupal-off-canvas main,
+#drupal-off-canvas mark,
+#drupal-off-canvas menu,
+#drupal-off-canvas meter,
+#drupal-off-canvas nav,
+#drupal-off-canvas object,
+#drupal-off-canvas ol,
+#drupal-off-canvas output,
+#drupal-off-canvas p,
+#drupal-off-canvas pre,
+#drupal-off-canvas progress,
+#drupal-off-canvas q,
+#drupal-off-canvas rp,
+#drupal-off-canvas rt,
+#drupal-off-canvas s,
+#drupal-off-canvas samp,
+#drupal-off-canvas section,
+#drupal-off-canvas small,
+#drupal-off-canvas span,
+#drupal-off-canvas strike,
+#drupal-off-canvas strong,
+#drupal-off-canvas sub,
+#drupal-off-canvas sup,
+#drupal-off-canvas table,
+#drupal-off-canvas tbody,
+#drupal-off-canvas td,
+#drupal-off-canvas tfoot,
+#drupal-off-canvas th,
+#drupal-off-canvas thead,
+#drupal-off-canvas time,
+#drupal-off-canvas tr,
+#drupal-off-canvas tt,
+#drupal-off-canvas u,
+#drupal-off-canvas ul,
+#drupal-off-canvas var,
+#drupal-off-canvas video,
+#drupal-off-canvas xmp {
+ border: 0;
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+}
+
+/*
+ * Override the default (display: inline) for browsers that do not recognize HTML5 tags.
+ * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
+ */
+#drupal-off-canvas article,
+#drupal-off-canvas aside,
+#drupal-off-canvas figcaption,
+#drupal-off-canvas figure,
+#drupal-off-canvas footer,
+#drupal-off-canvas header,
+#drupal-off-canvas hgroup,
+#drupal-off-canvas main,
+#drupal-off-canvas menu,
+#drupal-off-canvas nav,
+#drupal-off-canvas section {
+ display: block;
+ line-height: normal;
+ border-radius: 0;
+}
+
+/*
+ * Makes browsers agree.
+ * IE + Opera = font-weight: bold.
+ * Gecko + WebKit = font-weight: bolder.
+ */
+#drupal-off-canvas b,
+#drupal-off-canvas strong {
+ font-weight: bold;
+}
+
+#drupal-off-canvas em,
+#drupal-off-canvas i {
+ font-style: italic;
+}
+
+#drupal-off-canvas img {
+ color: transparent;
+ font-size: 0;
+ vertical-align: middle;
+}
+
+#drupal-off-canvas ul,
+#drupal-off-canvas ol {
+ list-style: none;
+}
+
+/* reset table styling. */
+#drupal-off-canvas table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+#drupal-off-canvas table thead,
+#drupal-off-canvas table tbody,
+#drupal-off-canvas table tbody tr:nth-child(even),
+#drupal-off-canvas table tbody tr:nth-child(odd),
+#drupal-off-canvas table tfoot {
+ border: 0;
+ background: none;
+ background-color: transparent;
+}
+#drupal-off-canvas th,
+#drupal-off-canvas td,
+#drupal-off-canvas caption {
+ font-weight: normal;
+}
+#drupal-off-canvas q {
+ quotes: none;
+}
+#drupal-off-canvas q:before,
+#drupal-off-canvas q:after {
+ content: none;
+}
+#drupal-off-canvas sub,
+#drupal-off-canvas sup,
+#drupal-off-canvas small {
+ font-size: 75%;
+}
+#drupal-off-canvas sub,
+#drupal-off-canvas sup {
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+#drupal-off-canvas sub {
+ bottom: -0.25em;
+}
+#drupal-off-canvas sup {
+ top: -0.5em;
+}
+
+/*
+ * For IE9. Without, occasionally draws shapes
+ * outside the boundaries of