core/core.libraries.yml | 28 ++
core/core.services.yml | 5 +
.../Core}/Ajax/OpenOffCanvasDialogCommand.php | 6 +-
.../Core}/Render/MainContent/OffCanvasRenderer.php | 7 +-
core/misc/dialog/off-canvas.base.css | 238 +++++++++++++
core/misc/dialog/off-canvas.button.css | 117 +++++++
core/misc/dialog/off-canvas.css | 55 +++
core/misc/dialog/off-canvas.details.css | 61 ++++
.../css => misc/dialog}/off-canvas.dropbutton.css | 2 +-
.../js => misc/dialog}/off-canvas.es6.js | 11 +-
.../css => misc/dialog}/off-canvas.form.css | 2 +-
.../outside_in/js => misc/dialog}/off-canvas.js | 5 +-
.../css => misc/dialog}/off-canvas.motion.css | 4 -
.../css => misc/dialog}/off-canvas.reset.css | 0
.../css => misc/dialog}/off-canvas.table.css | 2 +-
.../css => misc/dialog}/off-canvas.tabledrag.css | 2 +-
.../css => misc/dialog}/off-canvas.theme.css | 2 +-
core/modules/outside_in/css/outside_in.motion.css | 2 +-
core/modules/outside_in/outside_in.libraries.yml | 26 --
core/modules/outside_in/outside_in.module | 22 +-
core/modules/outside_in/outside_in.services.yml | 6 -
.../OutsideInBlockFormTest.php | 58 +++-
.../src/Tests/Ajax/OffCanvasDialogTest.php | 12 +-
core/modules/system/system.module | 13 +
.../templates/off-canvas-page-wrapper.html.twig} | 14 +-
.../off_canvas_test/off_canvas_test.info.yml | 3 -
.../off_canvas_test/off_canvas_test.routing.yml | 0
.../src/Controller/TestController.php | 23 +-
.../src/FunctionalJavascript/OffCanvasTest.php | 19 +-
.../FunctionalJavascript/OffCanvasTestBase.php} | 67 +---
.../Core}/Ajax/OpenOffCanvasDialogCommandTest.php | 8 +-
.../stable/css/core/dialog}/off-canvas.base.css | 0
.../stable/css/core/dialog}/off-canvas.button.css | 2 +-
.../stable/css/core/dialog}/off-canvas.css | 6 +-
.../stable/css/core/dialog}/off-canvas.details.css | 2 +-
.../css/core/dialog/off-canvas.dropbutton.css | 291 ++++++++++++++++
.../stable/css/core/dialog/off-canvas.form.css | 137 ++++++++
.../stable/css/core/dialog/off-canvas.motion.css | 13 +
.../stable/css/core/dialog/off-canvas.reset.css | 386 +++++++++++++++++++++
.../stable/css/core/dialog/off-canvas.table.css | 90 +++++
.../css/core/dialog/off-canvas.tabledrag.css | 122 +++++++
.../stable/css/core/dialog/off-canvas.theme.css | 89 +++++
core/themes/stable/stable.info.yml | 16 +
.../content/off-canvas-page-wrapper.html.twig | 24 ++
44 files changed, 1797 insertions(+), 201 deletions(-)
diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index e645035..4bdf5cb 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 7608878..98996a6 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 c5e2b2a..da6a26e 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/misc/dialog/off-canvas.base.css b/core/misc/dialog/off-canvas.base.css
new file mode 100644
index 0000000..e43f607
--- /dev/null
+++ b/core/misc/dialog/off-canvas.base.css
@@ -0,0 +1,238 @@
+/*
+ * @file
+ * Set base styles for the off-canvas dialog.
+ */
+
+/* Set some global attributes. */
+#drupal-off-canvas *,
+#drupal-off-canvas *:not(div) {
+ background: #444;
+ font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+ color: #ddd;
+}
+
+/* Generic elements. */
+#drupal-off-canvas a,
+#drupal-off-canvas .link {
+ border-bottom: none;
+ font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+ font-size: inherit;
+ font-weight: normal;
+ color: #85bef4;
+ text-decoration: none;
+ transition: color .5s ease;
+}
+
+#drupal-off-canvas a:focus,
+#drupal-off-canvas .link:focus,
+#drupal-off-canvas a:hover,
+#drupal-off-canvas .link:hover {
+ outline: none;
+ color: #46a0f5;
+}
+#drupal-off-canvas hr {
+ height: 1px;
+ background: #cccccc;
+}
+#drupal-off-canvas summary,
+#drupal-off-canvas .fieldgroup:not(.form-composite) > 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(../../../misc/icons/73b355/check.svg);
+ color: #325e1c;
+}
+#drupal-off-canvas .messages--warning {
+ background-color: #fdf8ed;
+ background-image: url(../../../misc/icons/e29700/warning.svg);
+ color: #734c00;
+}
+
+#drupal-off-canvas .messages--error {
+ background-color: #fcf4f2;
+ background-image: url(../../../misc/icons/e32700/error.svg);
+ color: #a51b00;
+}
+
+#drupal-off-canvas .messages--error div[role="alert"] {
+ background: transparent;
+ color: inherit;
+}
diff --git a/core/misc/dialog/off-canvas.button.css b/core/misc/dialog/off-canvas.button.css
new file mode 100644
index 0000000..e37b7ac
--- /dev/null
+++ b/core/misc/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/misc/dialog/off-canvas.css b/core/misc/dialog/off-canvas.css
new file mode 100644
index 0000000..52a8b9e
--- /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/misc/dialog/off-canvas.details.css b/core/misc/dialog/off-canvas.details.css
new file mode 100644
index 0000000..fcd526f
--- /dev/null
+++ b/core/misc/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/modules/outside_in/css/off-canvas.dropbutton.css b/core/misc/dialog/off-canvas.dropbutton.css
similarity index 99%
rename from core/modules/outside_in/css/off-canvas.dropbutton.css
rename to core/misc/dialog/off-canvas.dropbutton.css
index e467a4f..463f334 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,
diff --git a/core/modules/outside_in/js/off-canvas.es6.js b/core/misc/dialog/off-canvas.es6.js
similarity index 92%
rename from core/modules/outside_in/js/off-canvas.es6.js
rename to core/misc/dialog/off-canvas.es6.js
index 480561a..a82ff22 100644
--- a/core/modules/outside_in/js/off-canvas.es6.js
+++ b/core/misc/dialog/off-canvas.es6.js
@@ -2,16 +2,12 @@
* @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
*/
(function ($, Drupal, debounce, displace) {
// 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 off-canvas dialog will be 100% width. @see core/misc/dialog/off-canvas.css
const minDisplaceWidth = 768;
/**
@@ -136,14 +132,13 @@
},
'dialog:beforecreate': function (event, dialog, $element, settings) {
if ($element.is('#drupal-off-canvas')) {
- $('body').addClass('js-tray-open');
+ $('body').addClass('js-off-canvas-dialog-open');
// @see http://api.jqueryui.com/position/
settings.position = {
my: 'left top',
at: `${edge} top`,
of: window,
};
- 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();
@@ -151,7 +146,7 @@
},
'dialog:beforeclose': function (event, dialog, $element) {
if ($element.is('#drupal-off-canvas')) {
- $('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/modules/outside_in/css/off-canvas.form.css b/core/misc/dialog/off-canvas.form.css
similarity index 97%
rename from core/modules/outside_in/css/off-canvas.form.css
rename to core/misc/dialog/off-canvas.form.css
index 8e95b78..670778e 100644
--- a/core/modules/outside_in/css/off-canvas.form.css
+++ b/core/misc/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/js/off-canvas.js b/core/misc/dialog/off-canvas.js
similarity index 94%
rename from core/modules/outside_in/js/off-canvas.js
rename to core/misc/dialog/off-canvas.js
index 85a9e53..0e645b1 100644
--- a/core/modules/outside_in/js/off-canvas.js
+++ b/core/misc/dialog/off-canvas.js
@@ -87,21 +87,20 @@
},
'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
if ($element.is('#drupal-off-canvas')) {
- $('body').addClass('js-tray-open');
+ $('body').addClass('js-off-canvas-dialog-open');
settings.position = {
my: 'left top',
at: edge + ' top',
of: window
};
- settings.dialogClass += ' ui-dialog-off-canvas';
settings.height = $(window).height();
}
},
'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
if ($element.is('#drupal-off-canvas')) {
- $('body').removeClass('js-tray-open');
+ $('body').removeClass('js-off-canvas-dialog-open');
$(document).off('.off-canvas');
$(window).off('.off-canvas');
diff --git a/core/modules/outside_in/css/off-canvas.motion.css b/core/misc/dialog/off-canvas.motion.css
similarity index 60%
rename from core/modules/outside_in/css/off-canvas.motion.css
rename to core/misc/dialog/off-canvas.motion.css
index e8df8db..335bd2f 100644
--- a/core/modules/outside_in/css/off-canvas.motion.css
+++ b/core/misc/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/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 3a6e749..7e7cd2e 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 98%
rename from core/modules/outside_in/css/off-canvas.tabledrag.css
rename to core/misc/dialog/off-canvas.tabledrag.css
index 4f6f9be..02e757e 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
*/
diff --git a/core/modules/outside_in/css/off-canvas.theme.css b/core/misc/dialog/off-canvas.theme.css
similarity index 98%
rename from core/modules/outside_in/css/off-canvas.theme.css
rename to core/misc/dialog/off-canvas.theme.css
index 47bdcfb..2004acb 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;
diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/modules/outside_in/css/outside_in.motion.css
index 4bdd236..620180a 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 06e24a8..64e1edd 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 69517b9..b465208 100644
--- a/core/modules/outside_in/outside_in.module
+++ b/core/modules/outside_in/outside_in.module
@@ -50,7 +50,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';
}
}
@@ -67,26 +67,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().
*/
function outside_in_entity_type_build(array &$entity_types) {
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 ce82146..0000000
--- 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 4e519f6..eb86487 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';
@@ -525,4 +526,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 ce3356f..6d7ddbb 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 d327d4e..3e75bcb 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,13 @@ 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 11c7f53..98b67ba 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 8c6cc80..9680b18 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 6164b06..ea310fa 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 2f64d9f..80b1980 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 2ce2bf6..6b74b5e 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,6 +73,8 @@ 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)";
@@ -77,55 +82,13 @@ protected function waitForNoElement($selector, $timeout = 10000) {
}
/**
- * 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.
*
* @return string[]
* 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 314fd1c..e2d933a 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 @@
.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(../../../misc/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/themes/stable/css/core/dialog/off-canvas.form.css b/core/themes/stable/css/core/dialog/off-canvas.form.css
new file mode 100644
index 0000000..f59400a
--- /dev/null
+++ b/core/themes/stable/css/core/dialog/off-canvas.form.css
@@ -0,0 +1,137 @@
+/**
+ * @file
+ * Visual styling for forms in the Settings Tray module's 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;
+ cursor: pointer;
+ padding: 5px;
+}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.motion.css b/core/themes/stable/css/core/dialog/off-canvas.motion.css
new file mode 100644
index 0000000..335bd2f
--- /dev/null
+++ b/core/themes/stable/css/core/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/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 0000000..cd87eda
--- /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