From c2af57548d3e5a4cee5a365a522844d97c40e43b Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Mon, 29 Aug 2022 11:47:09 +0300
Subject: [PATCH] Issue #3291797 by mherchel, andy-blum, lauriii, xjm, catch:
Refactor Drupal 10 settings tray / off-canvas to use modern CSS
---
core/.stylelintignore | 8 +-
core/core.libraries.yml | 30 +-
.../Core/Ajax/OpenOffCanvasDialogCommand.php | 4 +
core/misc/dialog/off-canvas.base.css | 399 ----------
core/misc/dialog/off-canvas.base.pcss.css | 346 ---------
core/misc/dialog/off-canvas.button.css | 116 ---
core/misc/dialog/off-canvas.css | 55 --
core/misc/dialog/off-canvas.details.css | 62 --
core/misc/dialog/off-canvas.dropbutton.css | 291 --------
core/misc/dialog/off-canvas.form.css | 133 ----
core/misc/dialog/off-canvas.layout.css | 9 -
core/misc/dialog/off-canvas.motion.css | 11 -
core/misc/dialog/off-canvas.reset.css | 685 ------------------
core/misc/dialog/off-canvas.reset.pcss.css | 478 ------------
core/misc/dialog/off-canvas.table.css | 89 ---
core/misc/dialog/off-canvas.tabledrag.css | 122 ----
core/misc/dialog/off-canvas.theme.css | 102 ---
core/misc/dialog/off-canvas/css/base.css | 100 +++
core/misc/dialog/off-canvas/css/base.pcss.css | 93 +++
core/misc/dialog/off-canvas/css/button.css | 108 +++
.../dialog/off-canvas/css/button.pcss.css | 112 +++
core/misc/dialog/off-canvas/css/details.css | 72 ++
.../dialog/off-canvas/css/details.pcss.css | 62 ++
.../misc/dialog/off-canvas/css/dropbutton.css | 198 +++++
.../dialog/off-canvas/css/dropbutton.pcss.css | 179 +++++
core/misc/dialog/off-canvas/css/drupal.css | 35 +
.../dialog/off-canvas/css/drupal.pcss.css | 30 +
core/misc/dialog/off-canvas/css/form.css | 229 ++++++
core/misc/dialog/off-canvas/css/form.pcss.css | 183 +++++
core/misc/dialog/off-canvas/css/messages.css | 157 ++++
.../dialog/off-canvas/css/messages.pcss.css | 107 +++
core/misc/dialog/off-canvas/css/reset.css | 27 +
.../misc/dialog/off-canvas/css/reset.pcss.css | 20 +
core/misc/dialog/off-canvas/css/table.css | 55 ++
.../misc/dialog/off-canvas/css/table.pcss.css | 35 +
core/misc/dialog/off-canvas/css/tabledrag.css | 139 ++++
.../dialog/off-canvas/css/tabledrag.pcss.css | 102 +++
core/misc/dialog/off-canvas/css/throbber.css | 66 ++
.../dialog/off-canvas/css/throbber.pcss.css | 44 ++
core/misc/dialog/off-canvas/css/titlebar.css | 135 ++++
.../dialog/off-canvas/css/titlebar.pcss.css | 91 +++
core/misc/dialog/off-canvas/css/utility.css | 38 +
.../dialog/off-canvas/css/utility.pcss.css | 33 +
core/misc/dialog/off-canvas/css/wrapper.css | 54 ++
.../dialog/off-canvas/css/wrapper.pcss.css | 42 ++
.../{ => off-canvas/js}/off-canvas.es6.js | 1 +
.../dialog/{ => off-canvas/js}/off-canvas.js | 1 +
core/misc/icons/545560/chevron-down.svg | 1 +
core/misc/icons/868686/magnifier.svg | 1 +
core/misc/icons/spinner.gif | 10 +
core/modules/ckeditor5/js/ckeditor5.es6.js | 49 +-
core/modules/ckeditor5/js/ckeditor5.js | 6 +-
.../CKEditor5OffCanvasTest.php | 4 +-
.../layout_builder/css/layout-builder.css | 178 ++---
.../css/layout-builder.pcss.css | 168 +++++
.../modules/layout_builder/css/off-canvas.css | 159 ++++
.../layout_builder/css/off-canvas.pcss.css | 121 ++++
.../layout_builder.libraries.yml | 1 +
.../Functional/Ajax/OffCanvasDialogTest.php | 1 +
.../workspaces/css/workspaces.off-canvas.css | 246 +++++++
.../css/workspaces.off-canvas.pcss.css | 181 +++++
.../workspaces/css/workspaces.overview.css | 8 +
.../css/workspaces.overview.pcss.css | 9 +
.../workspaces/css/workspaces.toolbar.css | 283 ++------
.../css/workspaces.toolbar.pcss.css | 60 ++
.../workspaces/src/WorkspaceListBuilder.php | 4 +-
.../workspaces/workspaces.libraries.yml | 1 +
.../Core/Theme/Stable9LibraryOverrideTest.php | 2 +
.../Core/Theme/StableLibraryOverrideTest.php | 2 +
.../Ajax/OpenOffCanvasDialogCommandTest.php | 1 +
core/themes/claro/claro.info.yml | 5 -
.../claro/css/base/off-canvas.theme.css | 87 ---
.../claro/css/base/off-canvas.theme.pcss.css | 73 --
.../olivero/css/components/off-canvas.css | 136 ----
.../css/components/off-canvas.pcss.css | 81 ---
core/themes/olivero/olivero.info.yml | 2 -
core/themes/olivero/olivero.libraries.yml | 6 -
.../css/core/dialog/off-canvas.base.css | 399 ----------
.../css/core/dialog/off-canvas.base.pcss.css | 346 ---------
.../css/core/dialog/off-canvas.button.css | 116 ---
.../stable/css/core/dialog/off-canvas.css | 55 --
.../css/core/dialog/off-canvas.details.css | 62 --
.../css/core/dialog/off-canvas.dropbutton.css | 291 --------
.../css/core/dialog/off-canvas.form.css | 133 ----
.../css/core/dialog/off-canvas.layout.css | 9 -
.../css/core/dialog/off-canvas.motion.css | 11 -
.../css/core/dialog/off-canvas.reset.css | 685 ------------------
.../css/core/dialog/off-canvas.reset.pcss.css | 478 ------------
.../css/core/dialog/off-canvas.table.css | 89 ---
.../css/core/dialog/off-canvas.tabledrag.css | 122 ----
.../css/core/dialog/off-canvas.theme.css | 102 ---
.../css/core/dialog/off-canvas.base.css | 399 ----------
.../css/core/dialog/off-canvas.base.pcss.css | 346 ---------
.../css/core/dialog/off-canvas.button.css | 116 ---
.../stable9/css/core/dialog/off-canvas.css | 55 --
.../css/core/dialog/off-canvas.details.css | 62 --
.../css/core/dialog/off-canvas.dropbutton.css | 291 --------
.../css/core/dialog/off-canvas.form.css | 133 ----
.../css/core/dialog/off-canvas.layout.css | 9 -
.../css/core/dialog/off-canvas.motion.css | 11 -
.../css/core/dialog/off-canvas.reset.css | 685 ------------------
.../css/core/dialog/off-canvas.reset.pcss.css | 478 ------------
.../css/core/dialog/off-canvas.table.css | 89 ---
.../css/core/dialog/off-canvas.tabledrag.css | 122 ----
.../css/core/dialog/off-canvas.theme.css | 102 ---
105 files changed, 3674 insertions(+), 9496 deletions(-)
delete mode 100644 core/misc/dialog/off-canvas.base.css
delete mode 100644 core/misc/dialog/off-canvas.base.pcss.css
delete mode 100644 core/misc/dialog/off-canvas.button.css
delete mode 100644 core/misc/dialog/off-canvas.css
delete mode 100644 core/misc/dialog/off-canvas.details.css
delete mode 100644 core/misc/dialog/off-canvas.dropbutton.css
delete mode 100644 core/misc/dialog/off-canvas.form.css
delete mode 100644 core/misc/dialog/off-canvas.layout.css
delete mode 100644 core/misc/dialog/off-canvas.motion.css
delete mode 100644 core/misc/dialog/off-canvas.reset.css
delete mode 100644 core/misc/dialog/off-canvas.reset.pcss.css
delete mode 100644 core/misc/dialog/off-canvas.table.css
delete mode 100644 core/misc/dialog/off-canvas.tabledrag.css
delete mode 100644 core/misc/dialog/off-canvas.theme.css
create mode 100644 core/misc/dialog/off-canvas/css/base.css
create mode 100644 core/misc/dialog/off-canvas/css/base.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/button.css
create mode 100644 core/misc/dialog/off-canvas/css/button.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/details.css
create mode 100644 core/misc/dialog/off-canvas/css/details.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/dropbutton.css
create mode 100644 core/misc/dialog/off-canvas/css/dropbutton.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/drupal.css
create mode 100644 core/misc/dialog/off-canvas/css/drupal.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/form.css
create mode 100644 core/misc/dialog/off-canvas/css/form.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/messages.css
create mode 100644 core/misc/dialog/off-canvas/css/messages.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/reset.css
create mode 100644 core/misc/dialog/off-canvas/css/reset.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/table.css
create mode 100644 core/misc/dialog/off-canvas/css/table.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/tabledrag.css
create mode 100644 core/misc/dialog/off-canvas/css/tabledrag.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/throbber.css
create mode 100644 core/misc/dialog/off-canvas/css/throbber.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/titlebar.css
create mode 100644 core/misc/dialog/off-canvas/css/titlebar.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/utility.css
create mode 100644 core/misc/dialog/off-canvas/css/utility.pcss.css
create mode 100644 core/misc/dialog/off-canvas/css/wrapper.css
create mode 100644 core/misc/dialog/off-canvas/css/wrapper.pcss.css
rename core/misc/dialog/{ => off-canvas/js}/off-canvas.es6.js (99%)
rename core/misc/dialog/{ => off-canvas/js}/off-canvas.js (98%)
create mode 100644 core/misc/icons/545560/chevron-down.svg
create mode 100644 core/misc/icons/868686/magnifier.svg
create mode 100644 core/misc/icons/spinner.gif
create mode 100644 core/modules/layout_builder/css/layout-builder.pcss.css
create mode 100644 core/modules/layout_builder/css/off-canvas.css
create mode 100644 core/modules/layout_builder/css/off-canvas.pcss.css
create mode 100644 core/modules/workspaces/css/workspaces.off-canvas.css
create mode 100644 core/modules/workspaces/css/workspaces.off-canvas.pcss.css
create mode 100644 core/modules/workspaces/css/workspaces.overview.pcss.css
create mode 100644 core/modules/workspaces/css/workspaces.toolbar.pcss.css
delete mode 100644 core/themes/claro/css/base/off-canvas.theme.css
delete mode 100644 core/themes/claro/css/base/off-canvas.theme.pcss.css
delete mode 100644 core/themes/olivero/css/components/off-canvas.css
delete mode 100644 core/themes/olivero/css/components/off-canvas.pcss.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.base.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.base.pcss.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.button.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.details.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.dropbutton.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.form.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.layout.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.motion.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.reset.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.table.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.tabledrag.css
delete mode 100644 core/themes/stable/css/core/dialog/off-canvas.theme.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.base.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.base.pcss.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.button.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.details.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.dropbutton.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.form.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.layout.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.motion.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.reset.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.reset.pcss.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.table.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.tabledrag.css
delete mode 100644 core/themes/stable9/css/core/dialog/off-canvas.theme.css
diff --git a/core/.stylelintignore b/core/.stylelintignore
index 08a66fc807d9..30542830a372 100644
--- a/core/.stylelintignore
+++ b/core/.stylelintignore
@@ -2,8 +2,12 @@ themes/claro/**/*.css
!themes/claro/**/*.pcss.css
themes/olivero/**/*.css
!themes/olivero/**/*.pcss.css
-misc/dialog/off-canvas.reset.css
-misc/dialog/off-canvas.base.css
+misc/dialog/off-canvas/css/**/*.css
+!misc/dialog/off-canvas/css/**/*.pcss.css
+modules/layout_builder/css/**/*.css
+!modules/layout_builder/css/**/*.pcss.css
+modules/workspaces/css/**/*.css
+!modules/workspaces/css/**/*.pcss.css
themes/stable/css/core/dialog/off-canvas.reset.css
themes/stable/css/core/dialog/off-canvas.base.css
themes/stable9/css/core/dialog/off-canvas.reset.css
diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index 8bcb611deb16..33fc3388844b 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -913,24 +913,24 @@ internal.underscore:
drupal.dialog.off_canvas:
version: VERSION
js:
- misc/dialog/off-canvas.js: {}
+ misc/dialog/off-canvas/js/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 }
+ misc/dialog/off-canvas/css/reset.css: {}
+ misc/dialog/off-canvas/css/base.css: {}
+ misc/dialog/off-canvas/css/utility.css: {}
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: {}
- misc/dialog/off-canvas.layout.css: {}
+ misc/dialog/off-canvas/css/button.css: {}
+ misc/dialog/off-canvas/css/drupal.css: {}
+ misc/dialog/off-canvas/css/form.css: {}
+ misc/dialog/off-canvas/css/table.css: {}
+ misc/dialog/off-canvas/css/details.css: {}
+ misc/dialog/off-canvas/css/messages.css: {}
+ misc/dialog/off-canvas/css/tabledrag.css: {}
+ misc/dialog/off-canvas/css/throbber.css: {}
+ misc/dialog/off-canvas/css/dropbutton.css: {}
+ misc/dialog/off-canvas/css/titlebar.css: {}
+ misc/dialog/off-canvas/css/wrapper.css: {}
dependencies:
- core/jquery
- core/once
diff --git a/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php
index eb868aaf5f6e..9602b73964b9 100644
--- a/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php
+++ b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php
@@ -51,6 +51,10 @@ public function __construct($title, $content, array $dialog_options = [], $setti
if (empty($dialog_options['dialogClass'])) {
$this->dialogOptions['dialogClass'] = "ui-dialog-off-canvas ui-dialog-position-$position";
}
+ // Add CSS class to #drupal-off-canvas element. This enables developers to
+ // select previous versions of off-canvas styles by using custom selector:
+ // #drupal-off-canvas:not(.drupal-off-canvas-reset).
+ $this->dialogOptions['classes']['ui-dialog-content'] = 'drupal-off-canvas-reset';
// If no width option is provided then use the default width to avoid the
// dialog staying at the width of the previous instance when opened
// more than once, with different widths, on a single page.
diff --git a/core/misc/dialog/off-canvas.base.css b/core/misc/dialog/off-canvas.base.css
deleted file mode 100644
index bb87933a55a8..000000000000
--- a/core/misc/dialog/off-canvas.base.css
+++ /dev/null
@@ -1,399 +0,0 @@
-/*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
-/**
- * @file
- * Set base styles for the off-canvas dialog.
- */
-
-/* Set some global attributes. */
-
-#drupal-off-canvas {
- color: #ddd;
- background: #444;
-}
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-
-#drupal-off-canvas span,
- #drupal-off-canvas applet,
- #drupal-off-canvas object,
- #drupal-off-canvas iframe,
- #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 p,
- #drupal-off-canvas blockquote,
- #drupal-off-canvas pre,
- #drupal-off-canvas a,
- #drupal-off-canvas abbr,
- #drupal-off-canvas acronym,
- #drupal-off-canvas address,
- #drupal-off-canvas big,
- #drupal-off-canvas button,
- #drupal-off-canvas cite,
- #drupal-off-canvas code,
- #drupal-off-canvas del,
- #drupal-off-canvas dfn,
- #drupal-off-canvas em,
- #drupal-off-canvas img,
- #drupal-off-canvas ins,
- #drupal-off-canvas kbd,
- #drupal-off-canvas q,
- #drupal-off-canvas s,
- #drupal-off-canvas samp,
- #drupal-off-canvas small,
- #drupal-off-canvas strike,
- #drupal-off-canvas strong,
- #drupal-off-canvas sub,
- #drupal-off-canvas sup,
- #drupal-off-canvas tt,
- #drupal-off-canvas var,
- #drupal-off-canvas b,
- #drupal-off-canvas u,
- #drupal-off-canvas i,
- #drupal-off-canvas center,
- #drupal-off-canvas dl,
- #drupal-off-canvas dt,
- #drupal-off-canvas dd,
- #drupal-off-canvas ol,
- #drupal-off-canvas ul,
- #drupal-off-canvas li,
- #drupal-off-canvas fieldset,
- #drupal-off-canvas form,
- #drupal-off-canvas label,
- #drupal-off-canvas legend,
- #drupal-off-canvas table,
- #drupal-off-canvas caption,
- #drupal-off-canvas tbody,
- #drupal-off-canvas tfoot,
- #drupal-off-canvas thead,
- #drupal-off-canvas tr,
- #drupal-off-canvas th,
- #drupal-off-canvas td,
- #drupal-off-canvas article,
- #drupal-off-canvas aside,
- #drupal-off-canvas canvas,
- #drupal-off-canvas details,
- #drupal-off-canvas embed,
- #drupal-off-canvas figure,
- #drupal-off-canvas figcaption,
- #drupal-off-canvas footer,
- #drupal-off-canvas header,
- #drupal-off-canvas hgroup,
- #drupal-off-canvas main,
- #drupal-off-canvas menu,
- #drupal-off-canvas meter,
- #drupal-off-canvas nav,
- #drupal-off-canvas output,
- #drupal-off-canvas progress,
- #drupal-off-canvas ruby,
- #drupal-off-canvas section,
- #drupal-off-canvas summary,
- #drupal-off-canvas time,
- #drupal-off-canvas mark,
- #drupal-off-canvas audio,
- #drupal-off-canvas video,
- #drupal-off-canvas input,
- #drupal-off-canvas select,
- #drupal-off-canvas textarea {
- color: inherit;
- background: inherit;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- }
-
-/* Generic elements. */
-
-#drupal-off-canvas a,
-#drupal-off-canvas .link {
- cursor: pointer;
- transition: color 0.5s ease;
- text-decoration: none;
- color: #85bef4;
- border-bottom: none;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- font-size: inherit;
- font-weight: normal;
-}
-
-#drupal-off-canvas a:focus,
-#drupal-off-canvas .link:focus,
-#drupal-off-canvas a:hover,
-#drupal-off-canvas .link:hover {
- text-decoration: underline;
-}
-
-#drupal-off-canvas hr {
- height: 1px;
- background: #ccc;
-}
-
-#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-size: 1.625em;
- font-weight: bold;
- line-height: 1.875em;
-}
-
-#drupal-off-canvas h2,
-#drupal-off-canvas .heading-b {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.385em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h3,
-#drupal-off-canvas .heading-c {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.231em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h4,
-#drupal-off-canvas .heading-d {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.154em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h5,
-#drupal-off-canvas .heading-e {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h6,
-#drupal-off-canvas .heading-f {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-
-#drupal-off-canvas p {
- margin: 1em 0;
-}
-
-#drupal-off-canvas dl {
- margin: 0 0 1.25rem;
-}
-
-#drupal-off-canvas dl dd,
-#drupal-off-canvas dl dl {
- margin-bottom: 0.625rem;
- margin-left: 1.25rem; /* LTR */
-}
-
-[dir="rtl"] #drupal-off-canvas dl dd,
-[dir="rtl"] #drupal-off-canvas dl dl {
- margin-right: 1.25rem;
-}
-
-#drupal-off-canvas blockquote {
- margin: 1em 2.5rem;
-}
-
-#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 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;
- padding: 0.3125rem 0;
- border-bottom: 1px solid #333
-}
-
-#drupal-off-canvas ul li:last-child, #drupal-off-canvas ol li:last-child {
- padding-bottom: 0;
- border-bottom: none;
- }
-
-#drupal-off-canvas blockquote,
-#drupal-off-canvas code {
- margin: 1.25rem 0;
-}
-
-#drupal-off-canvas pre {
- margin: 1.25rem 0;
- white-space: pre-wrap;
-}
-
-#drupal-off-canvas details {
- display: block;
-}
-
-#drupal-off-canvas summary {
- display: list-item;
-}
-
-#drupal-off-canvas select::-ms-expand {
- display: block;
-}
-
-/* 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;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- width: 1px;
- height: 1px;
- word-wrap: normal;
-}
-
-#drupal-off-canvas .visually-hidden.focusable:active,
-#drupal-off-canvas .visually-hidden.focusable:focus {
- position: static !important;
- overflow: visible;
- clip: auto;
- width: auto;
- height: auto;
-}
-
-#drupal-off-canvas .invisible {
- visibility: hidden;
-}
-
-/* Some system classes. See system.admin.css. */
-
-#drupal-off-canvas .panel {
- padding: 0.3125rem 0.3125rem 0.9375rem;
-}
-
-#drupal-off-canvas .panel__description {
- margin: 0 0 0.1875rem;
- padding: 2px 0 0.1875rem 0;
-}
-
-#drupal-off-canvas .compact-link {
- margin: 0 0 0.625rem 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 0.625rem 1.0625rem;
-}
-
-[dir="rtl"] #drupal-off-canvas .messages {
- background-position: right 10px top 17px;
-}
-
-#drupal-off-canvas .messages abbr {
- color: #444;
-}
-
-#drupal-off-canvas .messages--status {
- color: #325e1c;
- background-color: #f3faef;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z'/%3e%3c/svg%3e");
-}
-
-#drupal-off-canvas .messages--warning {
- color: #734c00;
- background-color: #fdf8ed;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e29700'%3e%3cpath d='M14.66 12.316l-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002v-5zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.239z'/%3e%3c/svg%3e");
-}
-
-#drupal-off-canvas .messages--error {
- color: #a51b00;
- background-color: #fcf4f2;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e32700'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
-}
-
-#drupal-off-canvas .messages--error div[role="alert"] {
- color: inherit;
- background: transparent;
-}
diff --git a/core/misc/dialog/off-canvas.base.pcss.css b/core/misc/dialog/off-canvas.base.pcss.css
deleted file mode 100644
index 6ee3a286c2cb..000000000000
--- a/core/misc/dialog/off-canvas.base.pcss.css
+++ /dev/null
@@ -1,346 +0,0 @@
-/**
- * @file
- * Set base styles for the off-canvas dialog.
- */
-
-/* Set some global attributes. */
-#drupal-off-canvas {
- color: #ddd;
- background: #444;
-}
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-#drupal-off-canvas {
- & span,
- & applet,
- & object,
- & iframe,
- & h1,
- & h2,
- & h3,
- & h4,
- & h5,
- & h6,
- & p,
- & blockquote,
- & pre,
- & a,
- & abbr,
- & acronym,
- & address,
- & big,
- & button,
- & cite,
- & code,
- & del,
- & dfn,
- & em,
- & img,
- & ins,
- & kbd,
- & q,
- & s,
- & samp,
- & small,
- & strike,
- & strong,
- & sub,
- & sup,
- & tt,
- & var,
- & b,
- & u,
- & i,
- & center,
- & dl,
- & dt,
- & dd,
- & ol,
- & ul,
- & li,
- & fieldset,
- & form,
- & label,
- & legend,
- & table,
- & caption,
- & tbody,
- & tfoot,
- & thead,
- & tr,
- & th,
- & td,
- & article,
- & aside,
- & canvas,
- & details,
- & embed,
- & figure,
- & figcaption,
- & footer,
- & header,
- & hgroup,
- & main,
- & menu,
- & meter,
- & nav,
- & output,
- & progress,
- & ruby,
- & section,
- & summary,
- & time,
- & mark,
- & audio,
- & video,
- & input,
- & select,
- & textarea {
- color: inherit;
- background: inherit;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- }
-}
-
-/* Generic elements. */
-#drupal-off-canvas a,
-#drupal-off-canvas .link {
- cursor: pointer;
- transition: color 0.5s ease;
- text-decoration: none;
- color: #85bef4;
- border-bottom: none;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- font-size: inherit;
- font-weight: normal;
-}
-
-#drupal-off-canvas a:focus,
-#drupal-off-canvas .link:focus,
-#drupal-off-canvas a:hover,
-#drupal-off-canvas .link:hover {
- text-decoration: underline;
-}
-#drupal-off-canvas hr {
- height: 1px;
- background: #ccc;
-}
-#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-size: 1.625em;
- font-weight: bold;
- line-height: 1.875em;
-}
-#drupal-off-canvas h2,
-#drupal-off-canvas .heading-b {
- display: block;
- margin: 10px 0;
- font-size: 1.385em;
- font-weight: bold;
-}
-#drupal-off-canvas h3,
-#drupal-off-canvas .heading-c {
- display: block;
- margin: 10px 0;
- font-size: 1.231em;
- font-weight: bold;
-}
-#drupal-off-canvas h4,
-#drupal-off-canvas .heading-d {
- display: block;
- margin: 10px 0;
- font-size: 1.154em;
- font-weight: bold;
-}
-#drupal-off-canvas h5,
-#drupal-off-canvas .heading-e {
- display: block;
- margin: 10px 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-#drupal-off-canvas h6,
-#drupal-off-canvas .heading-f {
- display: block;
- margin: 10px 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-#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-bottom: 10px;
- margin-left: 20px; /* LTR */
-}
-[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 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;
- padding: 5px 0;
- border-bottom: 1px solid #333;
- &:last-child {
- padding-bottom: 0;
- border-bottom: none;
- }
-}
-#drupal-off-canvas blockquote,
-#drupal-off-canvas code {
- margin: 20px 0;
-}
-#drupal-off-canvas pre {
- margin: 20px 0;
- white-space: pre-wrap;
-}
-#drupal-off-canvas details {
- display: block;
-}
-#drupal-off-canvas summary {
- display: list-item;
-}
-
-#drupal-off-canvas select::-ms-expand {
- display: block;
-}
-
-/* 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;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- width: 1px;
- height: 1px;
- word-wrap: normal;
-}
-#drupal-off-canvas .visually-hidden.focusable:active,
-#drupal-off-canvas .visually-hidden.focusable:focus {
- position: static !important;
- overflow: visible;
- clip: auto;
- width: auto;
- height: 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 {
- color: #325e1c;
- background-color: #f3faef;
- background-image: url(../icons/73b355/check.svg);
-}
-#drupal-off-canvas .messages--warning {
- color: #734c00;
- background-color: #fdf8ed;
- background-image: url(../icons/e29700/warning.svg);
-}
-
-#drupal-off-canvas .messages--error {
- color: #a51b00;
- background-color: #fcf4f2;
- background-image: url(../icons/e32700/error.svg);
-}
-
-#drupal-off-canvas .messages--error div[role="alert"] {
- color: inherit;
- background: transparent;
-}
diff --git a/core/misc/dialog/off-canvas.button.css b/core/misc/dialog/off-canvas.button.css
deleted file mode 100644
index afc391898097..000000000000
--- a/core/misc/dialog/off-canvas.button.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * @file
- * Visual styling for buttons in the off-canvas dialog.
- */
-
-#drupal-off-canvas button,
-#drupal-off-canvas .button {
- margin: 0 0 10px;
- padding: 0;
- cursor: pointer;
- text-decoration: none;
- text-transform: none;
- border: 0;
- box-shadow: none;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- line-height: normal;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-#drupal-off-canvas button.link {
- display: inline;
- transition: color 0.5s ease;
- color: #85bef4;
- background: transparent;
- font-size: 14px;
-}
-#drupal-off-canvas button.link:hover,
-#drupal-off-canvas button.link:focus {
- text-decoration: none;
- color: #46a0f5;
-}
-#drupal-off-canvas input[type="submit"].button {
- position: relative;
- display: inline-block;
- width: 100%;
- height: auto;
- padding: 4px 20px;
- cursor: pointer;
- transition: background 0.5s ease;
- text-align: center;
- color: #f5f5f5;
- border: 0;
- border-radius: 20em;
- background: #777;
- font-size: 14px;
- font-weight: 600;
-}
-#drupal-off-canvas input[type="submit"].button:hover,
-#drupal-off-canvas input[type="submit"].button:focus,
-#drupal-off-canvas input[type="submit"].button:active {
- z-index: 10;
- text-decoration: none;
- color: #fff;
- border: 0;
- outline: none;
-}
-#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 {
- margin-top: 15px;
- color: #fff;
- border: 0;
- background: #277abd;
-}
-#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 {
- outline: none;
- background: #236aaf;
-}
-#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 {
- padding: 2px 1em;
- font-size: 13px;
-}
-#drupal-off-canvas .button:disabled,
-#drupal-off-canvas .button:disabled:active,
-#drupal-off-canvas .button.is-disabled,
-#drupal-off-canvas .button.is-disabled:active {
- cursor: default;
- color: #5c5c5c;
- border: 0;
- background: #555;
- font-weight: normal;
-}
-#drupal-off-canvas .button--danger {
- text-decoration: none;
- color: #c72100;
- border-radius: 0;
- font-weight: 400;
-}
-#drupal-off-canvas .button--danger:hover,
-#drupal-off-canvas .button--danger:focus,
-#drupal-off-canvas .button--danger:active {
- text-decoration: none;
- color: #ff2a00;
- text-shadow: none;
-}
-#drupal-off-canvas .button--danger:disabled,
-#drupal-off-canvas .button--danger.is-disabled {
- cursor: default;
- color: #737373;
-}
diff --git a/core/misc/dialog/off-canvas.css b/core/misc/dialog/off-canvas.css
deleted file mode 100644
index 245dc7adb9f3..000000000000
--- a/core/misc/dialog/off-canvas.css
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * @file
- * CSS for off-canvas dialog.
- */
-
-/* Position the off-canvas dialog container outside the right of the viewport. */
-.ui-dialog-off-canvas {
- overflow: visible;
- box-sizing: border-box;
- height: 100%;
-}
-
-/* Wrap the form that's inside the off-canvas dialog. */
-.ui-dialog-off-canvas .ui-dialog-content {
- /* Prevent horizontal scrollbar. */
- overflow-x: hidden;
- overflow-y: auto;
- padding: 0 20px;
-}
-[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 {
- overflow: visible;
- box-sizing: border-box;
- height: 100%;
-}
-
-/* Wrap the form that's inside the off-canvas dialog. */
-.ui-dialog-off-canvas #drupal-off-canvas {
- /* Prevent horizontal scrollbar. */
- overflow-x: hidden;
- overflow-y: auto;
- padding: 0 20px 20px;
-}
-[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 {
- overflow-y: hidden;
- height: 100%;
- }
-}
diff --git a/core/misc/dialog/off-canvas.details.css b/core/misc/dialog/off-canvas.details.css
deleted file mode 100644
index 6991dd00c402..000000000000
--- a/core/misc/dialog/off-canvas.details.css
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * @file
- * Visual styling for summary and details in the off-canvas dialog.
- */
-
-#drupal-off-canvas details {
- display: block;
-}
-#drupal-off-canvas details,
-#drupal-off-canvas summary {
- 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 {
- color: #ddd;
- background: #474747;
-}
-#drupal-off-canvas summary a {
- padding-top: 0;
- padding-bottom: 0;
- color: #ddd;
-}
-#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 {
- /* Cancel out the padding of the parent. */
- margin: 0 -20px;
- padding: 0 20px;
- border-width: 0;
-}
-#drupal-off-canvas summary {
- padding: 10px 20px;
- transition: all 0.5s ease;
- text-shadow: none;
- font-size: 14px;
-}
-#drupal-off-canvas summary:hover,
-#drupal-off-canvas summary:focus {
- background-color: #222;
-}
-#drupal-off-canvas details[open] {
- padding-bottom: 10px;
-}
-#drupal-off-canvas details[open] > summary {
- color: #eee;
- background-color: #333;
-}
-#drupal-off-canvas details[open] > summary:hover {
- color: #fff;
- background-color: #222;
-}
-#drupal-off-canvas details .placeholder {
- color: inherit;
- background: transparent;
- font: inherit;
- font-style: italic;
-}
diff --git a/core/misc/dialog/off-canvas.dropbutton.css b/core/misc/dialog/off-canvas.dropbutton.css
deleted file mode 100644
index 69a1a489b963..000000000000
--- a/core/misc/dialog/off-canvas.dropbutton.css
+++ /dev/null
@@ -1,291 +0,0 @@
-/**
- * @file
- * Styles for dropbuttons in the off-canvas dialog.
- */
-
-#drupal-off-canvas .dropbutton-wrapper,
-#drupal-off-canvas .dropbutton-widget {
- position: static;
- display: block;
- transition: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-#drupal-off-canvas .dropbutton-widget {
- margin: 0;
- padding: 0;
- cursor: pointer;
- transition: background 0.5s ease;
- text-align: center;
- text-decoration: none;
- text-transform: none;
- color: #fff;
- border: 0;
- border-radius: 1em;
- background: #277abd;
- font-weight: 600;
- line-height: normal;
-}
-#drupal-off-canvas .dropbutton-widget:hover {
- background: #2b8bd8;
-}
-
-/*
- * Style dropbutton single.
- */
-
-#drupal-off-canvas .dropbutton-single .dropbutton-action a {
- height: 2.2em;
- /* Overlap icon for trigger. */
- margin-top: -2em;
- padding: 0;
- 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 {
- overflow: hidden;
- margin: 0;
- 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 {
- color: #333;
- outline: none;
- background: transparent;
-}
-
-/*
- * 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;
- white-space: nowrap;
- text-indent: 110%;
- color: #fff;
-}
-#drupal-off-canvas .dropbutton-toggle button {
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- cursor: pointer;
- border: 0 solid transparent;
- border-top-right-radius: 1em; /* LTR */
- border-bottom-right-radius: 1em; /* LTR */
-}
-#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;
- overflow: hidden;
- width: 0;
- height: 0;
- margin-top: 0;
- color: #fff;
- border-width: 0.3333em 0.3333em 0;
- border-style: solid;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: transparent;
- line-height: 0;
-}
-#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;
- margin-right: 0;
- margin-left: 0;
- padding-right: 0;
- padding-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 {
- position: relative;
- float: right; /* LTR */
- min-width: initial;
- max-width: initial;
- margin-right: 0;
- padding-right: 0;
-}
-#drupal-off-canvas td .dropbutton-widget .dropbutton {
- overflow: hidden;
- width: 2em;
- height: 2em;
- margin: 0;
- 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 {
- width: auto;
- margin-left: 0;
- 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 its 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 {
- z-index: 1;
- color: transparent;
-}
-
-/* Put pencil icon in place of hidden 'edit' text on single buttons. */
-#drupal-off-canvas td .dropbutton-single .edit:before {
- display: block;
- content: ".";
- color: transparent;
- background: transparent url(../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;
- overflow: visible;
- width: auto;
- min-width: 0;
- max-width: none;
- height: auto;
- padding: 0;
-}
-
-/* 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-right: inherit;
- padding-left: 1em;
-}
-#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 {
- top: 2px;
- border-top-color: transparent;
- border-bottom: 0.3333em solid;
-}
diff --git a/core/misc/dialog/off-canvas.form.css b/core/misc/dialog/off-canvas.form.css
deleted file mode 100644
index d4c39be5d949..000000000000
--- a/core/misc/dialog/off-canvas.form.css
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * @file
- * Visual styling for forms in the off-canvas dialog.
- */
-
-#drupal-off-canvas form {
- color: #ddd;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-}
-#drupal-off-canvas input[type="checkbox"] {
- -webkit-appearance: checkbox;
-}
-#drupal-off-canvas input[type="radio"] {
- -webkit-appearance: radio;
-}
-#drupal-off-canvas select:not([multiple]) {
- -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 {
- color: #ddd;
- font-family: inherit;
- font-size: 12px;
- font-weight: bold;
- line-height: normal;
-}
-#drupal-off-canvas .visually-hidden {
- width: 0;
- height: 0;
- letter-spacing: -2em;
- opacity: 0;
-}
-#drupal-off-canvas .description,
-#drupal-off-canvas .form-item .description,
-#drupal-off-canvas .details-description {
- margin-top: 5px;
- color: #ddd;
- font-family: inherit;
- font-size: 12px;
- font-style: normal;
-}
-#drupal-off-canvas .form-item {
- margin-top: 10px;
- margin-bottom: 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 {
- display: block;
- box-sizing: border-box;
- max-width: 100%;
- margin: 5px 0 0 0;
- padding: 6px;
- color: #333;
- border-width: 1px;
- border-radius: 2px;
- font-family: inherit;
- font-size: 14px;
- line-height: 16px;
-}
-/* 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 {
- color: #595959;
- border-color: #333;
- background-color: #eee;
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
-}
-#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;
- background-color: #fff;
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.125), 0 0 8px #40b6ff;
-}
-#drupal-off-canvas td .form-item,
-#drupal-off-canvas td .form-select {
- margin: 0;
-}
-#drupal-off-canvas .form-file {
- width: 100%;
- margin-bottom: 5px;
-}
-#drupal-off-canvas .form-actions {
- margin: 10px 0;
- text-align: center;
-}
-#drupal-off-canvas .ui-autocomplete {
- position: absolute;
- top: 0;
- left: 0;
- cursor: default;
- background-color: white;
-}
-#drupal-off-canvas .ui-autocomplete li {
- display: block;
-}
-#drupal-off-canvas .ui-autocomplete li a {
- padding: 5px;
- cursor: pointer;
- color: #595959 !important;
-}
diff --git a/core/misc/dialog/off-canvas.layout.css b/core/misc/dialog/off-canvas.layout.css
deleted file mode 100644
index 3b2b52e38760..000000000000
--- a/core/misc/dialog/off-canvas.layout.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * @file
- * Visual styling for layouts in the off-canvas dialog.
- */
-
-.layout-icon__region {
- fill: #f5f5f2;
- stroke: #666;
-}
diff --git a/core/misc/dialog/off-canvas.motion.css b/core/misc/dialog/off-canvas.motion.css
deleted file mode 100644
index 60d8d6a1dd2d..000000000000
--- a/core/misc/dialog/off-canvas.motion.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @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 {
- transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
-}
diff --git a/core/misc/dialog/off-canvas.reset.css b/core/misc/dialog/off-canvas.reset.css
deleted file mode 100644
index b0f121e74f8b..000000000000
--- a/core/misc/dialog/off-canvas.reset.css
+++ /dev/null
@@ -1,685 +0,0 @@
-/*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
-/**
- * @file
- * Reset most HTML elements styles for the off-canvas dialog.
- *
- * This is a generic reset. Drupal-specific classes are reset in components.
- */
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-
-#drupal-off-canvas span,
- #drupal-off-canvas applet,
- #drupal-off-canvas object,
- #drupal-off-canvas iframe,
- #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 p,
- #drupal-off-canvas blockquote,
- #drupal-off-canvas pre,
- #drupal-off-canvas a,
- #drupal-off-canvas abbr,
- #drupal-off-canvas acronym,
- #drupal-off-canvas address,
- #drupal-off-canvas big,
- #drupal-off-canvas button,
- #drupal-off-canvas cite,
- #drupal-off-canvas code,
- #drupal-off-canvas del,
- #drupal-off-canvas dfn,
- #drupal-off-canvas em,
- #drupal-off-canvas img,
- #drupal-off-canvas ins,
- #drupal-off-canvas kbd,
- #drupal-off-canvas q,
- #drupal-off-canvas s,
- #drupal-off-canvas samp,
- #drupal-off-canvas small,
- #drupal-off-canvas strike,
- #drupal-off-canvas strong,
- #drupal-off-canvas sub,
- #drupal-off-canvas sup,
- #drupal-off-canvas tt,
- #drupal-off-canvas var,
- #drupal-off-canvas b,
- #drupal-off-canvas u,
- #drupal-off-canvas i,
- #drupal-off-canvas center,
- #drupal-off-canvas dl,
- #drupal-off-canvas dt,
- #drupal-off-canvas dd,
- #drupal-off-canvas ol,
- #drupal-off-canvas ul,
- #drupal-off-canvas li,
- #drupal-off-canvas fieldset,
- #drupal-off-canvas form,
- #drupal-off-canvas label,
- #drupal-off-canvas legend,
- #drupal-off-canvas table,
- #drupal-off-canvas caption,
- #drupal-off-canvas tbody,
- #drupal-off-canvas tfoot,
- #drupal-off-canvas thead,
- #drupal-off-canvas tr,
- #drupal-off-canvas th,
- #drupal-off-canvas td,
- #drupal-off-canvas article,
- #drupal-off-canvas aside,
- #drupal-off-canvas canvas,
- #drupal-off-canvas details,
- #drupal-off-canvas embed,
- #drupal-off-canvas figure,
- #drupal-off-canvas figcaption,
- #drupal-off-canvas footer,
- #drupal-off-canvas header,
- #drupal-off-canvas hgroup,
- #drupal-off-canvas main,
- #drupal-off-canvas menu,
- #drupal-off-canvas meter,
- #drupal-off-canvas nav,
- #drupal-off-canvas output,
- #drupal-off-canvas progress,
- #drupal-off-canvas ruby,
- #drupal-off-canvas section,
- #drupal-off-canvas summary,
- #drupal-off-canvas time,
- #drupal-off-canvas mark,
- #drupal-off-canvas audio,
- #drupal-off-canvas video,
- #drupal-off-canvas input,
- #drupal-off-canvas select,
- #drupal-off-canvas textarea {
- all: initial;
- box-sizing: border-box;
- text-shadow: none;
- -webkit-font-smoothing: antialiased;
- -webkit-tap-highlight-color: initial
- }
-
-#drupal-off-canvas span:after,
- #drupal-off-canvas span:before,
- #drupal-off-canvas applet:after,
- #drupal-off-canvas applet:before,
- #drupal-off-canvas object:after,
- #drupal-off-canvas object:before,
- #drupal-off-canvas iframe:after,
- #drupal-off-canvas iframe:before,
- #drupal-off-canvas h1:after,
- #drupal-off-canvas h1:before,
- #drupal-off-canvas h2:after,
- #drupal-off-canvas h2:before,
- #drupal-off-canvas h3:after,
- #drupal-off-canvas h3:before,
- #drupal-off-canvas h4:after,
- #drupal-off-canvas h4:before,
- #drupal-off-canvas h5:after,
- #drupal-off-canvas h5:before,
- #drupal-off-canvas h6:after,
- #drupal-off-canvas h6:before,
- #drupal-off-canvas p:after,
- #drupal-off-canvas p:before,
- #drupal-off-canvas blockquote:after,
- #drupal-off-canvas blockquote:before,
- #drupal-off-canvas pre:after,
- #drupal-off-canvas pre:before,
- #drupal-off-canvas a:after,
- #drupal-off-canvas a:before,
- #drupal-off-canvas abbr:after,
- #drupal-off-canvas abbr:before,
- #drupal-off-canvas acronym:after,
- #drupal-off-canvas acronym:before,
- #drupal-off-canvas address:after,
- #drupal-off-canvas address:before,
- #drupal-off-canvas big:after,
- #drupal-off-canvas big:before,
- #drupal-off-canvas button:after,
- #drupal-off-canvas button:before,
- #drupal-off-canvas cite:after,
- #drupal-off-canvas cite:before,
- #drupal-off-canvas code:after,
- #drupal-off-canvas code:before,
- #drupal-off-canvas del:after,
- #drupal-off-canvas del:before,
- #drupal-off-canvas dfn:after,
- #drupal-off-canvas dfn:before,
- #drupal-off-canvas em:after,
- #drupal-off-canvas em:before,
- #drupal-off-canvas img:after,
- #drupal-off-canvas img:before,
- #drupal-off-canvas ins:after,
- #drupal-off-canvas ins:before,
- #drupal-off-canvas kbd:after,
- #drupal-off-canvas kbd:before,
- #drupal-off-canvas q:after,
- #drupal-off-canvas q:before,
- #drupal-off-canvas s:after,
- #drupal-off-canvas s:before,
- #drupal-off-canvas samp:after,
- #drupal-off-canvas samp:before,
- #drupal-off-canvas small:after,
- #drupal-off-canvas small:before,
- #drupal-off-canvas strike:after,
- #drupal-off-canvas strike:before,
- #drupal-off-canvas strong:after,
- #drupal-off-canvas strong:before,
- #drupal-off-canvas sub:after,
- #drupal-off-canvas sub:before,
- #drupal-off-canvas sup:after,
- #drupal-off-canvas sup:before,
- #drupal-off-canvas tt:after,
- #drupal-off-canvas tt:before,
- #drupal-off-canvas var:after,
- #drupal-off-canvas var:before,
- #drupal-off-canvas b:after,
- #drupal-off-canvas b:before,
- #drupal-off-canvas u:after,
- #drupal-off-canvas u:before,
- #drupal-off-canvas i:after,
- #drupal-off-canvas i:before,
- #drupal-off-canvas center:after,
- #drupal-off-canvas center:before,
- #drupal-off-canvas dl:after,
- #drupal-off-canvas dl:before,
- #drupal-off-canvas dt:after,
- #drupal-off-canvas dt:before,
- #drupal-off-canvas dd:after,
- #drupal-off-canvas dd:before,
- #drupal-off-canvas ol:after,
- #drupal-off-canvas ol:before,
- #drupal-off-canvas ul:after,
- #drupal-off-canvas ul:before,
- #drupal-off-canvas li:after,
- #drupal-off-canvas li:before,
- #drupal-off-canvas fieldset:after,
- #drupal-off-canvas fieldset:before,
- #drupal-off-canvas form:after,
- #drupal-off-canvas form:before,
- #drupal-off-canvas label:after,
- #drupal-off-canvas label:before,
- #drupal-off-canvas legend:after,
- #drupal-off-canvas legend:before,
- #drupal-off-canvas table:after,
- #drupal-off-canvas table:before,
- #drupal-off-canvas caption:after,
- #drupal-off-canvas caption:before,
- #drupal-off-canvas tbody:after,
- #drupal-off-canvas tbody:before,
- #drupal-off-canvas tfoot:after,
- #drupal-off-canvas tfoot:before,
- #drupal-off-canvas thead:after,
- #drupal-off-canvas thead:before,
- #drupal-off-canvas tr:after,
- #drupal-off-canvas tr:before,
- #drupal-off-canvas th:after,
- #drupal-off-canvas th:before,
- #drupal-off-canvas td:after,
- #drupal-off-canvas td:before,
- #drupal-off-canvas article:after,
- #drupal-off-canvas article:before,
- #drupal-off-canvas aside:after,
- #drupal-off-canvas aside:before,
- #drupal-off-canvas canvas:after,
- #drupal-off-canvas canvas:before,
- #drupal-off-canvas details:after,
- #drupal-off-canvas details:before,
- #drupal-off-canvas embed:after,
- #drupal-off-canvas embed:before,
- #drupal-off-canvas figure:after,
- #drupal-off-canvas figure:before,
- #drupal-off-canvas figcaption:after,
- #drupal-off-canvas figcaption:before,
- #drupal-off-canvas footer:after,
- #drupal-off-canvas footer:before,
- #drupal-off-canvas header:after,
- #drupal-off-canvas header:before,
- #drupal-off-canvas hgroup:after,
- #drupal-off-canvas hgroup:before,
- #drupal-off-canvas main:after,
- #drupal-off-canvas main:before,
- #drupal-off-canvas menu:after,
- #drupal-off-canvas menu:before,
- #drupal-off-canvas meter:after,
- #drupal-off-canvas meter:before,
- #drupal-off-canvas nav:after,
- #drupal-off-canvas nav:before,
- #drupal-off-canvas output:after,
- #drupal-off-canvas output:before,
- #drupal-off-canvas progress:after,
- #drupal-off-canvas progress:before,
- #drupal-off-canvas ruby:after,
- #drupal-off-canvas ruby:before,
- #drupal-off-canvas section:after,
- #drupal-off-canvas section:before,
- #drupal-off-canvas summary:after,
- #drupal-off-canvas summary:before,
- #drupal-off-canvas time:after,
- #drupal-off-canvas time:before,
- #drupal-off-canvas mark:after,
- #drupal-off-canvas mark:before,
- #drupal-off-canvas audio:after,
- #drupal-off-canvas audio:before,
- #drupal-off-canvas video:after,
- #drupal-off-canvas video:before,
- #drupal-off-canvas input:after,
- #drupal-off-canvas input:before,
- #drupal-off-canvas select:after,
- #drupal-off-canvas select:before,
- #drupal-off-canvas textarea:after,
- #drupal-off-canvas textarea: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 {
- margin: 0;
- padding: 0;
- border: 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;
- border-radius: 0;
- line-height: normal;
-}
-
-/*
- * 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 {
- vertical-align: middle;
- color: transparent;
- font-size: 0;
-}
-
-#drupal-off-canvas ul,
-#drupal-off-canvas ol {
- list-style: none;
-}
-
-/* reset table styling. */
-
-#drupal-off-canvas table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-
-#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: transparent none;
-}
-
-#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 {
- position: relative;
- vertical-align: baseline;
- line-height: 0;
-}
-
-#drupal-off-canvas sub {
- bottom: -0.25em;
-}
-
-#drupal-off-canvas sup {
- top: -0.5em;
-}
-
-/*
- * For IE9. Without, occasionally draws shapes
- * outside the boundaries of <svg> rectangle.
- */
-
-#drupal-off-canvas svg {
- overflow: hidden;
-}
-
-/* Specific resets for inputs. */
-
-#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
- display: none;
-}
-
-#drupal-off-canvas input {
- margin: 0;
- padding: 0;
-}
-
-#drupal-off-canvas input[type="checkbox"],
-#drupal-off-canvas input[type="radio"] {
- position: static;
- margin: 0;
-}
-
-#drupal-off-canvas input:invalid,
-#drupal-off-canvas button:invalid,
-#drupal-off-canvas select:invalid,
-#drupal-off-canvas textarea:invalid,
-#drupal-off-canvas input:focus,
-#drupal-off-canvas button:focus,
-#drupal-off-canvas select:focus,
-#drupal-off-canvas textarea:focus,
-#drupal-off-canvas input[type="file"]:focus,
-#drupal-off-canvas input[type="file"]:active,
-#drupal-off-canvas input[type="radio"]:focus,
-#drupal-off-canvas input[type="radio"]:active,
-#drupal-off-canvas input[type="checkbox"]:focus,
-#drupal-off-canvas input[type="checkbox"]:active {
- z-index: 1;
- box-shadow: none;
-}
-
-#drupal-off-canvas input[role="button"] {
- cursor: pointer;
-}
-
-#drupal-off-canvas button,
-#drupal-off-canvas input[type="reset"],
-#drupal-off-canvas input[type="submit"],
-#drupal-off-canvas input[type="button"] {
- display: inline-block;
- overflow: visible;
- cursor: pointer;
- vertical-align: middle;
- text-decoration: none;
- border: 0;
- outline: 0;
- background-image: none;
- text-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-
-#drupal-off-canvas button:hover,
-#drupal-off-canvas input[type="reset"]:hover,
-#drupal-off-canvas input[type="submit"]:hover,
-#drupal-off-canvas input[type="button"]:hover {
- text-decoration: none;
- background-image: none;
-}
-
-#drupal-off-canvas button:active,
-#drupal-off-canvas input[type="reset"]:active,
-#drupal-off-canvas input[type="submit"]:active,
-#drupal-off-canvas input[type="button"]:active {
- border-color: gray;
- background-image: none;
- box-shadow: none;
-}
-
-#drupal-off-canvas button::-moz-focus-inner,
-#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
-#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
-#drupal-off-canvas input[type="button"]::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-
-#drupal-off-canvas textarea,
-#drupal-off-canvas select,
-#drupal-off-canvas input[type="date"],
-#drupal-off-canvas input[type="datetime"],
-#drupal-off-canvas input[type="datetime-local"],
-#drupal-off-canvas input[type="email"],
-#drupal-off-canvas input[type="month"],
-#drupal-off-canvas input[type="number"],
-#drupal-off-canvas input[type="password"],
-#drupal-off-canvas input[type="search"],
-#drupal-off-canvas input[type="tel"],
-#drupal-off-canvas input[type="text"],
-#drupal-off-canvas input[type="time"],
-#drupal-off-canvas input[type="url"],
-#drupal-off-canvas input[type="week"] {
- height: auto;
- vertical-align: middle;
- border-radius: 0;
-}
-
-#drupal-off-canvas textarea[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas input[type="date"][disabled],
-#drupal-off-canvas input[type="datetime"][disabled],
-#drupal-off-canvas input[type="datetime-local"][disabled],
-#drupal-off-canvas input[type="email"][disabled],
-#drupal-off-canvas input[type="month"][disabled],
-#drupal-off-canvas input[type="number"][disabled],
-#drupal-off-canvas input[type="password"][disabled],
-#drupal-off-canvas input[type="search"][disabled],
-#drupal-off-canvas input[type="tel"][disabled],
-#drupal-off-canvas input[type="text"][disabled],
-#drupal-off-canvas input[type="time"][disabled],
-#drupal-off-canvas input[type="url"][disabled],
-#drupal-off-canvas input[type="week"][disabled] {
- background-color: gray;
-}
-
-#drupal-off-canvas input[type="hidden"] {
- visibility: hidden;
-}
-
-#drupal-off-canvas button[disabled],
-#drupal-off-canvas input[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas select[disabled] option,
-#drupal-off-canvas select[disabled] optgroup,
-#drupal-off-canvas textarea[disabled] {
- cursor: default;
- -webkit-user-select: none;
- user-select: none;
- box-shadow: none;
-}
-
-#drupal-off-canvas input:placeholder,
-#drupal-off-canvas textarea:placeholder {
- color: gray;
-}
-
-#drupal-off-canvas textarea,
-#drupal-off-canvas select[size],
-#drupal-off-canvas select[multiple] {
- height: auto;
-}
-
-#drupal-off-canvas select[size="0"],
-#drupal-off-canvas select[size="1"] {
- height: auto;
-}
-
-#drupal-off-canvas textarea {
- overflow: auto;
- width: 100%;
- min-height: 2.5rem;
- resize: vertical;
-}
-
-#drupal-off-canvas select[multiple] {
- overflow: auto;
-}
-
-#drupal-off-canvas optgroup {
- color: black;
- font-weight: normal;
- font-style: normal;
-}
-
-#drupal-off-canvas optgroup::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-
-#drupal-off-canvas * button {
- overflow: visible;
- width: auto;
- padding: 0;
- vertical-align: middle;
- text-decoration: none;
- color: black;
- border: 1px solid gray;
- background: none;
-}
-
-#drupal-off-canvas * textarea,
-#drupal-off-canvas * select,
-#drupal-off-canvas *:not(div) textarea,
-#drupal-off-canvas *:not(div) select {
- padding: 0;
- vertical-align: top;
- color: black;
- border: 1px solid gray;
- background: white;
-}
diff --git a/core/misc/dialog/off-canvas.reset.pcss.css b/core/misc/dialog/off-canvas.reset.pcss.css
deleted file mode 100644
index facb3f9a460a..000000000000
--- a/core/misc/dialog/off-canvas.reset.pcss.css
+++ /dev/null
@@ -1,478 +0,0 @@
-/**
- * @file
- * Reset most HTML elements styles for the off-canvas dialog.
- *
- * This is a generic reset. Drupal-specific classes are reset in components.
- */
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-#drupal-off-canvas {
- & span,
- & applet,
- & object,
- & iframe,
- & h1,
- & h2,
- & h3,
- & h4,
- & h5,
- & h6,
- & p,
- & blockquote,
- & pre,
- & a,
- & abbr,
- & acronym,
- & address,
- & big,
- & button,
- & cite,
- & code,
- & del,
- & dfn,
- & em,
- & img,
- & ins,
- & kbd,
- & q,
- & s,
- & samp,
- & small,
- & strike,
- & strong,
- & sub,
- & sup,
- & tt,
- & var,
- & b,
- & u,
- & i,
- & center,
- & dl,
- & dt,
- & dd,
- & ol,
- & ul,
- & li,
- & fieldset,
- & form,
- & label,
- & legend,
- & table,
- & caption,
- & tbody,
- & tfoot,
- & thead,
- & tr,
- & th,
- & td,
- & article,
- & aside,
- & canvas,
- & details,
- & embed,
- & figure,
- & figcaption,
- & footer,
- & header,
- & hgroup,
- & main,
- & menu,
- & meter,
- & nav,
- & output,
- & progress,
- & ruby,
- & section,
- & summary,
- & time,
- & mark,
- & audio,
- & video,
- & input,
- & select,
- & textarea {
- all: initial;
- box-sizing: border-box;
- text-shadow: none;
- -webkit-font-smoothing: antialiased;
- -webkit-tap-highlight-color: initial;
-
- &:after,
- &: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 {
- margin: 0;
- padding: 0;
- border: 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;
- border-radius: 0;
- line-height: normal;
-}
-
-/*
- * 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 {
- vertical-align: middle;
- color: transparent;
- font-size: 0;
-}
-
-#drupal-off-canvas ul,
-#drupal-off-canvas ol {
- list-style: none;
-}
-
-/* reset table styling. */
-#drupal-off-canvas table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-#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: transparent none;
-}
-#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 {
- position: relative;
- vertical-align: baseline;
- line-height: 0;
-}
-#drupal-off-canvas sub {
- bottom: -0.25em;
-}
-#drupal-off-canvas sup {
- top: -0.5em;
-}
-
-/*
- * For IE9. Without, occasionally draws shapes
- * outside the boundaries of <svg> rectangle.
- */
-#drupal-off-canvas svg {
- overflow: hidden;
-}
-
-/* Specific resets for inputs. */
-#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
- display: none;
-}
-#drupal-off-canvas input {
- margin: 0;
- padding: 0;
-}
-#drupal-off-canvas input[type="checkbox"],
-#drupal-off-canvas input[type="radio"] {
- position: static;
- margin: 0;
-}
-#drupal-off-canvas input:invalid,
-#drupal-off-canvas button:invalid,
-#drupal-off-canvas select:invalid,
-#drupal-off-canvas textarea:invalid,
-#drupal-off-canvas input:focus,
-#drupal-off-canvas button:focus,
-#drupal-off-canvas select:focus,
-#drupal-off-canvas textarea:focus,
-#drupal-off-canvas input[type="file"]:focus,
-#drupal-off-canvas input[type="file"]:active,
-#drupal-off-canvas input[type="radio"]:focus,
-#drupal-off-canvas input[type="radio"]:active,
-#drupal-off-canvas input[type="checkbox"]:focus,
-#drupal-off-canvas input[type="checkbox"]:active {
- z-index: 1;
- box-shadow: none;
-}
-#drupal-off-canvas input[role="button"] {
- cursor: pointer;
-}
-#drupal-off-canvas button,
-#drupal-off-canvas input[type="reset"],
-#drupal-off-canvas input[type="submit"],
-#drupal-off-canvas input[type="button"] {
- display: inline-block;
- overflow: visible;
- cursor: pointer;
- vertical-align: middle;
- text-decoration: none;
- border: 0;
- outline: 0;
- background-image: none;
- text-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-#drupal-off-canvas button:hover,
-#drupal-off-canvas input[type="reset"]:hover,
-#drupal-off-canvas input[type="submit"]:hover,
-#drupal-off-canvas input[type="button"]:hover {
- text-decoration: none;
- background-image: none;
-}
-#drupal-off-canvas button:active,
-#drupal-off-canvas input[type="reset"]:active,
-#drupal-off-canvas input[type="submit"]:active,
-#drupal-off-canvas input[type="button"]:active {
- border-color: gray;
- background-image: none;
- box-shadow: none;
-}
-#drupal-off-canvas button::-moz-focus-inner,
-#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
-#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
-#drupal-off-canvas input[type="button"]::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-#drupal-off-canvas textarea,
-#drupal-off-canvas select,
-#drupal-off-canvas input[type="date"],
-#drupal-off-canvas input[type="datetime"],
-#drupal-off-canvas input[type="datetime-local"],
-#drupal-off-canvas input[type="email"],
-#drupal-off-canvas input[type="month"],
-#drupal-off-canvas input[type="number"],
-#drupal-off-canvas input[type="password"],
-#drupal-off-canvas input[type="search"],
-#drupal-off-canvas input[type="tel"],
-#drupal-off-canvas input[type="text"],
-#drupal-off-canvas input[type="time"],
-#drupal-off-canvas input[type="url"],
-#drupal-off-canvas input[type="week"] {
- height: auto;
- vertical-align: middle;
- border-radius: 0;
-}
-#drupal-off-canvas textarea[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas input[type="date"][disabled],
-#drupal-off-canvas input[type="datetime"][disabled],
-#drupal-off-canvas input[type="datetime-local"][disabled],
-#drupal-off-canvas input[type="email"][disabled],
-#drupal-off-canvas input[type="month"][disabled],
-#drupal-off-canvas input[type="number"][disabled],
-#drupal-off-canvas input[type="password"][disabled],
-#drupal-off-canvas input[type="search"][disabled],
-#drupal-off-canvas input[type="tel"][disabled],
-#drupal-off-canvas input[type="text"][disabled],
-#drupal-off-canvas input[type="time"][disabled],
-#drupal-off-canvas input[type="url"][disabled],
-#drupal-off-canvas input[type="week"][disabled] {
- background-color: gray;
-}
-#drupal-off-canvas input[type="hidden"] {
- visibility: hidden;
-}
-#drupal-off-canvas button[disabled],
-#drupal-off-canvas input[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas select[disabled] option,
-#drupal-off-canvas select[disabled] optgroup,
-#drupal-off-canvas textarea[disabled] {
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- box-shadow: none;
-}
-#drupal-off-canvas input:placeholder,
-#drupal-off-canvas textarea:placeholder {
- color: gray;
-}
-#drupal-off-canvas textarea,
-#drupal-off-canvas select[size],
-#drupal-off-canvas select[multiple] {
- height: auto;
-}
-#drupal-off-canvas select[size="0"],
-#drupal-off-canvas select[size="1"] {
- height: auto;
-}
-#drupal-off-canvas textarea {
- overflow: auto;
- width: 100%;
- min-height: 40px;
- resize: vertical;
-}
-#drupal-off-canvas select[multiple] {
- overflow: auto;
-}
-#drupal-off-canvas optgroup {
- color: black;
- font-weight: normal;
- font-style: normal;
-}
-#drupal-off-canvas optgroup::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-#drupal-off-canvas * button {
- overflow: visible;
- width: auto;
- padding: 0;
- vertical-align: middle;
- text-decoration: none;
- color: black;
- border: 1px solid gray;
- background: none;
-}
-#drupal-off-canvas * textarea,
-#drupal-off-canvas * select,
-#drupal-off-canvas *:not(div) textarea,
-#drupal-off-canvas *:not(div) select {
- padding: 0;
- vertical-align: top;
- color: black;
- border: 1px solid gray;
- background: white;
-}
diff --git a/core/misc/dialog/off-canvas.table.css b/core/misc/dialog/off-canvas.table.css
deleted file mode 100644
index 24154cdff3e5..000000000000
--- a/core/misc/dialog/off-canvas.table.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * @file
- * Visual styling for tables in the off-canvas dialog.
- */
-
-#drupal-off-canvas table * {
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-}
-#drupal-off-canvas table {
- display: table;
- width: 100%;
- min-width: calc(100% + 40px);
- /* Cancel out the padding of the parent to make the table full width. */
- margin: 0 -20px -10px -20px;
- color: #ddd;
- border: 0;
- border-collapse: collapse;
- font-size: 12px;
-}
-#drupal-off-canvas table thead {
- display: table-header-group;
-}
-#drupal-off-canvas table tbody {
- display: table-row-group;
-}
-#drupal-off-canvas tr {
- display: table-row;
-}
-#drupal-off-canvas tr:hover td {
- background-color: transparent;
-}
-
-#drupal-off-canvas td,
-#drupal-off-canvas th {
- display: table-cell;
- width: auto;
- height: auto;
- padding: 2px 8px;
- vertical-align: middle;
- border-bottom: 1px solid #777;
- background-color: transparent;
-}
-[dir="rtl"] #drupal-off-canvas th,
-[dir="rtl"] #drupal-off-canvas td {
- text-align: right;
-}
-#drupal-off-canvas th {
- font-weight: bold;
-}
-#drupal-off-canvas th.checkbox,
-#drupal-off-canvas td.checkbox {
- width: 20px;
- padding: 0;
- text-align: center;
-}
-#drupal-off-canvas div.checkbox.menu-enabled {
- position: static;
- display: inline;
- width: auto;
-}
-#drupal-off-canvas th:first-child,
-#drupal-off-canvas td:first-child {
- width: 150px;
-}
-/* For lack of a better class, using this to grab the operations th. */
-#drupal-off-canvas .tabledrag-has-colspan {
- padding-right: 20px;
- text-align: right;
-}
-#drupal-off-canvas td {
- padding: 6px 8px;
- color: #ddd;
-}
-/* Hide overflow with ellipsis for links. */
-#drupal-off-canvas td a {
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- background: transparent;
-}
-#drupal-off-canvas tr td:first-child,
-#drupal-off-canvas tr th:first-child {
- padding-left: 20px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas tr td:first-child,
-[dir="rtl"] #drupal-off-canvas tr th:first-child {
- padding-right: 20px;
-}
diff --git a/core/misc/dialog/off-canvas.tabledrag.css b/core/misc/dialog/off-canvas.tabledrag.css
deleted file mode 100644
index ba2e5e982646..000000000000
--- a/core/misc/dialog/off-canvas.tabledrag.css
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * @file
- * Table drag behavior for off-canvas dialog.
- *
- * @see tabledrag.js
- */
-
-#drupal-off-canvas .drag {
- cursor: move;
-}
-#drupal-off-canvas tr.region-title {
- font-weight: normal;
-}
-#drupal-off-canvas table .region-message {
- color: #fff;
-}
-#drupal-off-canvas table .region-populated {
- display: none;
-}
-#drupal-off-canvas .add-new .tabledrag-changed {
- display: none;
-}
-#drupal-off-canvas .draggable a.tabledrag-handle {
- float: left; /* LTR */
- overflow: hidden;
- min-width: 20px;
- height: auto;
- margin: 0 5px 0 0;
- padding: 0;
- cursor: move;
- text-decoration: none;
- background-image: none;
-}
-[dir="rtl"] #drupal-off-canvas .draggable a.tabledrag-handle {
- float: right;
- margin-right: 0;
- margin-left: 5px;
-}
-#drupal-off-canvas a.tabledrag-handle .handle {
- width: auto;
- height: auto;
- margin: 0;
- padding: 0;
- background-color: transparent;
- /* Use lighter drag icon against dark background. */
- background-image: url(../icons/bebebe/move.svg);
- background-repeat: no-repeat;
- background-position: center;
-}
-#drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
-#drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {
- text-decoration: none;
- background-image: url(../icons/787878/move.svg);
-}
-#drupal-off-canvas tr td {
- transition: background 0.3s ease;
-}
-
-#drupal-off-canvas tr td abbr {
- margin-left: 5px; /* LTR */
-}
-
-[dir="rtl"] #drupal-off-canvas tr td abbr {
- margin-right: 5px;
- margin-left: 0;
-}
-#drupal-off-canvas tr:hover td {
- background: #222;
-}
-#drupal-off-canvas tr.drag td {
- background: #111;
-}
-#drupal-off-canvas tr.drag-previous td {
- background: #000;
-}
-#drupal-off-canvas tr.drag-previous:hover td {
- background: #222;
-}
-body div.tabledrag-changed-warning {
- margin-bottom: 0.5em;
- font-size: 14px;
-}
-#drupal-off-canvas .touchevents .draggable td {
- padding: 0 10px;
-}
-#drupal-off-canvas .touchevents .draggable .menu-item__link {
- display: inline-block;
- padding: 10px 0;
-}
-#drupal-off-canvas .touchevents a.tabledrag-handle {
- width: 40px;
- height: 44px;
-}
-#drupal-off-canvas .touchevents a.tabledrag-handle .handle {
- height: 21px;
- background-position: 40% 19px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .touch a.tabledrag-handle .handle {
- background-position: right 40% top 19px;
-}
-#drupal-off-canvas .touchevents .draggable.drag a.tabledrag-handle .handle {
- background-position: 50% -32px;
-}
-#drupal-off-canvas .tabledrag-toggle-weight-wrapper {
- padding-top: 10px;
- text-align: right; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .tabledrag-toggle-weight-wrapper {
- text-align: left;
-}
-#drupal-off-canvas .indentation {
- float: left; /* LTR */
- width: auto;
- height: auto;
- margin: 0 3px 0 -10px; /* LTR */
- padding: 0 0 0 10px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .indentation {
- float: right;
- margin: 0 -10px 0 3px;
- padding: 0 10px 0 0;
-}
diff --git a/core/misc/dialog/off-canvas.theme.css b/core/misc/dialog/off-canvas.theme.css
deleted file mode 100644
index 9ae8a2f13077..000000000000
--- a/core/misc/dialog/off-canvas.theme.css
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * @file
- * Styling for the off-canvas ui dialog. Including overrides for jQuery UI.
- */
-
-/* Style the dialog-off-canvas container. */
-.ui-dialog.ui-dialog-off-canvas {
- /* Layer the dialog just under the toolbar. */
- z-index: 501;
- padding: 0;
- color: #ddd;
- border-radius: 0;
- background: #444;
- box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
-}
-.ui-widget.ui-dialog.ui-dialog-off-canvas {
- border: 1px solid transparent;
-}
-
-/* Style the off-canvas dialog header. */
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- padding: 1em;
- color: #fff;
- border: 0;
- border-bottom: 1px solid #000;
- border-radius: 0;
- background: #2d2d2d;
- font-weight: normal;
-}
-/* Hide the default jQuery UI dialog close button. */
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
- visibility: hidden;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- position: absolute;
- top: calc(50% - 6px);
- right: 1em;
- width: 30px;
- height: 30px;
- transition: all 0.5s ease;
- border: 3px solid transparent;
- background-color: transparent;
- background-image: url(../icons/bebebe/ex.svg);
- background-repeat: no-repeat;
- background-position: center center;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
- border: 3px solid #fff;
- background-image: url(../icons/ffffff/ex.svg);
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- right: auto;
- left: 1em;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- /* Ensure that long titles do not overlap the close button. */
- max-width: 210px;
- margin: 0;
- padding-right: 0; /* LTR */
- /* Push the text away from the icon. */
- padding-left: 30px; /* LTR */
- text-align: left; /* LTR */
- /* Ensure that long titles are not truncated. */
- white-space: normal;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- font-size: 16px;
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- float: right;
- padding-right: 30px;
- padding-left: 0;
- text-align: right;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
- position: absolute;
- top: 0;
- left: 1em; /* LTR */
- display: block;
- width: 20px;
- height: 100%;
- content: "";
- background: transparent url(../icons/ffffff/pencil.svg) no-repeat scroll center center;
- background-size: 100% auto;
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
- right: 1em;
- left: auto;
-}
-
-/* Override default styling from jQuery UI. */
-#drupal-off-canvas .ui-state-default,
-#drupal-off-canvas .ui-widget-content .ui-state-default,
-#drupal-off-canvas .ui-widget-header .ui-state-default {
- color: #333;
- border: 0;
- font-size: 14px;
- font-weight: normal;
-}
-#drupal-off-canvas .ui-widget-content a {
- color: #85bef4;
-}
diff --git a/core/misc/dialog/off-canvas/css/base.css b/core/misc/dialog/off-canvas/css/base.css
new file mode 100644
index 000000000000..0add3a17498e
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/base.css
@@ -0,0 +1,100 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Set base styles for the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --off-canvas-background-color-light: #666;
+ --off-canvas-background-color-medium: #444;
+ --off-canvas-background-color-dark: #333;
+ --off-canvas-background-color: var(--off-canvas-background-color-medium);
+ --off-canvas-padding: 1.25rem;
+ --off-canvas-text-color: #e5e5e5;
+ --off-canvas-link-color: #85bef4;
+ --off-canvas-border-color: #666;
+ --off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+ --off-canvas-vertical-spacing-unit: 0.5rem;
+ --off-canvas-focus-outline-width: 2px;
+ --off-canvas-focus-outline-color: #fff;
+
+ padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
+ color: var(--off-canvas-text-color);
+ background-color: var(--off-canvas-background-color);
+ font-family: var(--off-canvas-font-family)
+}
+
+#drupal-off-canvas-wrapper *:focus {
+ outline: solid var(--off-canvas-focus-outline-width) var(--off-canvas-focus-outline-color);
+ outline-offset: 2px;
+ }
+
+#drupal-off-canvas-wrapper a,
+ #drupal-off-canvas-wrapper .link {
+ text-decoration: none;
+ color: var(--off-canvas-link-color);
+ }
+
+#drupal-off-canvas-wrapper hr {
+ height: 1px;
+ background: var(--off-canvas-border-color);
+ }
+
+#drupal-off-canvas-wrapper h1,
+ #drupal-off-canvas-wrapper .heading-a {
+ font-size: 1.4375rem;
+ line-height: 1.2;
+ }
+
+#drupal-off-canvas-wrapper h2,
+ #drupal-off-canvas-wrapper .heading-b {
+ margin: var(--off-canvas-vertical-spacing-unit) 0;
+ font-size: 1.1875rem;
+ }
+
+#drupal-off-canvas-wrapper h3,
+ #drupal-off-canvas-wrapper .heading-c {
+ margin: var(--off-canvas-vertical-spacing-unit) 0;
+ font-size: 1.0625rem;
+ }
+
+#drupal-off-canvas-wrapper h4,
+ #drupal-off-canvas-wrapper .heading-d {
+ margin: var(--off-canvas-vertical-spacing-unit) 0;
+ font-size: 1rem;
+ }
+
+#drupal-off-canvas-wrapper h5,
+ #drupal-off-canvas-wrapper .heading-e,
+ #drupal-off-canvas-wrapper h6,
+ #drupal-off-canvas-wrapper .heading-f {
+ margin: var(--off-canvas-vertical-spacing-unit) 0;
+ font-size: 0.9375rem;
+ }
+
+#drupal-off-canvas-wrapper p {
+ margin: var(--off-canvas-vertical-spacing-unit) 0;
+ }
+
+#drupal-off-canvas-wrapper img {
+ max-width: 100%;
+ height: auto;
+ }
+
+#drupal-off-canvas-wrapper .links {
+ margin: 0;
+ padding: 0;
+ list-style: none
+ }
+
+#drupal-off-canvas-wrapper .links li {
+ margin: calc(var(--off-canvas-vertical-spacing-unit) /2) 0;
+ }
diff --git a/core/misc/dialog/off-canvas/css/base.pcss.css b/core/misc/dialog/off-canvas/css/base.pcss.css
new file mode 100644
index 000000000000..3736a0b0a51a
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/base.pcss.css
@@ -0,0 +1,93 @@
+/**
+ * @file
+ * Set base styles for the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --off-canvas-background-color-light: #666;
+ --off-canvas-background-color-medium: #444;
+ --off-canvas-background-color-dark: #333;
+ --off-canvas-background-color: var(--off-canvas-background-color-medium);
+ --off-canvas-padding: 20px;
+ --off-canvas-text-color: #e5e5e5;
+ --off-canvas-link-color: #85bef4;
+ --off-canvas-border-color: #666;
+ --off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+ --off-canvas-vertical-spacing-unit: 8px;
+ --off-canvas-focus-outline-width: 2px;
+ --off-canvas-focus-outline-color: #fff;
+
+ padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
+ color: var(--off-canvas-text-color);
+ background-color: var(--off-canvas-background-color);
+ font-family: var(--off-canvas-font-family);
+
+ & *:focus {
+ outline: solid var(--off-canvas-focus-outline-width) var(--off-canvas-focus-outline-color);
+ outline-offset: 2px;
+ }
+
+ & a,
+ & .link {
+ text-decoration: none;
+ color: var(--off-canvas-link-color);
+ }
+
+ & hr {
+ height: 1px;
+ background: var(--off-canvas-border-color);
+ }
+
+ & h1,
+ & .heading-a {
+ font-size: 23px;
+ line-height: 1.2;
+ }
+
+ & h2,
+ & .heading-b {
+ margin: var(--off-canvas-vertical-spacing-unit) 0;
+ font-size: 19px;
+ }
+
+ & h3,
+ & .heading-c {
+ margin: var(--off-canvas-vertical-spacing-unit) 0;
+ font-size: 17px;
+ }
+
+ & h4,
+ & .heading-d {
+ margin: var(--off-canvas-vertical-spacing-unit) 0;
+ font-size: 16px;
+ }
+
+ & h5,
+ & .heading-e,
+ & h6,
+ & .heading-f {
+ margin: var(--off-canvas-vertical-spacing-unit) 0;
+ font-size: 15px;
+ }
+
+ & p {
+ margin: var(--off-canvas-vertical-spacing-unit) 0;
+ }
+
+ & img {
+ max-width: 100%;
+ height: auto;
+ }
+
+ & .links {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ & li {
+ margin: calc(var(--off-canvas-vertical-spacing-unit) /2) 0;
+ }
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/button.css b/core/misc/dialog/off-canvas/css/button.css
new file mode 100644
index 000000000000..a9efd359a22a
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/button.css
@@ -0,0 +1,108 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+ * @file
+ * Visual styling for buttons in the off-canvas dialog.
+ *
+ * @internal
+ */
+#drupal-off-canvas-wrapper {
+ --off-canvas-button-background-color: #777;
+ --off-canvas-button-background-color-hover: #999;
+ --off-canvas-button-text-color: #f5f5f5;
+ --off-canvas-button-text-color-hover: #fff;
+ --off-canvas-button-font-size: 0.875rem;
+ --off-canvas-button-padding: calc(var(--off-canvas-vertical-spacing-unit) / 2) 1.25rem;
+ --off-canvas-button-border-color: transparent;
+ --off-canvas-button-border-radius: 20em;
+ --off-canvas-button-font-weight: 600;
+ --off-canvas-primary-button-background-color: #277abd;
+ --off-canvas-primary-button-background-color-hover: #236aaf;
+ --off-canvas-primary-button-text-color: #fff;
+ --off-canvas-primary-button-text-color-hover: #fff
+}
+#drupal-off-canvas-wrapper .button {
+ display: inline-block;
+ width: 100%;
+ height: auto;
+ margin: 0 0 0.625rem;
+ padding: var(--off-canvas-button-padding);
+ cursor: pointer;
+ transition: background 0.5s ease;
+ text-align: center;
+ color: var(--off-canvas-button-text-color);
+ border: solid 1px var(--off-canvas-button-border-color);
+ border-radius: var(--off-canvas-button-border-radius);
+ background: var(--off-canvas-button-background-color);
+ font-family: inherit;
+ font-size: var(--off-canvas-button-font-size);
+ font-weight: var(--off-canvas-button-font-weight);
+ line-height: normal;
+ -webkit-appearance: none;
+ appearance: none
+ }
+#drupal-off-canvas-wrapper .button:hover,
+ #drupal-off-canvas-wrapper .button:active {
+ z-index: 10;
+ text-decoration: none;
+ color: var(--off-canvas-button-text-color-hover);
+ background-color: var(--off-canvas-button-background-color-hover);
+ }
+#drupal-off-canvas-wrapper .button:disabled,
+ #drupal-off-canvas-wrapper .button:disabled:active,
+ #drupal-off-canvas-wrapper .button.is-disabled,
+ #drupal-off-canvas-wrapper .button.is-disabled:active {
+ cursor: default;
+ color: #5c5c5c;
+ background: #555;
+ font-weight: normal;
+ }
+#drupal-off-canvas-wrapper .button--primary {
+ margin-top: 0.9375rem;
+ color: var(--off-canvas-primary-button-text-color);
+ background: var(--off-canvas-primary-button-background-color)
+ }
+#drupal-off-canvas-wrapper .button--primary:hover,
+ #drupal-off-canvas-wrapper .button--primary:active {
+ color: var(--off-canvas-primary-button-text-color-hover);
+ background: var(--off-canvas-primary-button-background-color-hover);
+ }
+#drupal-off-canvas-wrapper button.link {
+ display: inline;
+ transition: color 0.5s ease;
+ color: var(--off-canvas-link-color);
+ border: 0;
+ background: transparent;
+ font-size: var(--off-canvas-button-font-size)
+ }
+#drupal-off-canvas-wrapper button.link:hover,
+ #drupal-off-canvas-wrapper button.link:focus {
+ text-decoration: none;
+ color: var(--off-canvas-link-color);
+ }
+#drupal-off-canvas-wrapper .button--danger {
+ text-decoration: none;
+ color: #c72100;
+ border-radius: 0;
+ font-weight: 400
+ }
+#drupal-off-canvas-wrapper .button--danger:hover,
+ #drupal-off-canvas-wrapper .button--danger:focus,
+ #drupal-off-canvas-wrapper .button--danger:active {
+ text-decoration: none;
+ color: #ff2a00;
+ text-shadow: none;
+ }
+#drupal-off-canvas-wrapper .button--danger:disabled,
+ #drupal-off-canvas-wrapper .button--danger.is-disabled {
+ cursor: default;
+ color: #737373;
+ }
+.no-touchevents #drupal-off-canvas-wrapper .button--small {
+ padding: 2px 1em;
+ font-size: 0.8125rem
+}
diff --git a/core/misc/dialog/off-canvas/css/button.pcss.css b/core/misc/dialog/off-canvas/css/button.pcss.css
new file mode 100644
index 000000000000..fb693d9bf3ef
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/button.pcss.css
@@ -0,0 +1,112 @@
+/**
+ * @file
+ * Visual styling for buttons in the off-canvas dialog.
+ *
+ * @internal
+ */
+#drupal-off-canvas-wrapper {
+ --off-canvas-button-background-color: #777;
+ --off-canvas-button-background-color-hover: #999;
+ --off-canvas-button-text-color: #f5f5f5;
+ --off-canvas-button-text-color-hover: #fff;
+ --off-canvas-button-font-size: 14px;
+ --off-canvas-button-padding: calc(var(--off-canvas-vertical-spacing-unit) / 2) 20px;
+ --off-canvas-button-border-color: transparent;
+ --off-canvas-button-border-radius: 20em;
+ --off-canvas-button-font-weight: 600;
+ --off-canvas-primary-button-background-color: #277abd;
+ --off-canvas-primary-button-background-color-hover: #236aaf;
+ --off-canvas-primary-button-text-color: #fff;
+ --off-canvas-primary-button-text-color-hover: #fff;
+
+ & .button {
+ display: inline-block;
+ width: 100%;
+ height: auto;
+ margin: 0 0 10px;
+ padding: var(--off-canvas-button-padding);
+ cursor: pointer;
+ transition: background 0.5s ease;
+ text-align: center;
+ color: var(--off-canvas-button-text-color);
+ border: solid 1px var(--off-canvas-button-border-color);
+ border-radius: var(--off-canvas-button-border-radius);
+ background: var(--off-canvas-button-background-color);
+ font-family: inherit;
+ font-size: var(--off-canvas-button-font-size);
+ font-weight: var(--off-canvas-button-font-weight);
+ line-height: normal;
+ appearance: none;
+
+ &:hover,
+ &:active {
+ z-index: 10;
+ text-decoration: none;
+ color: var(--off-canvas-button-text-color-hover);
+ background-color: var(--off-canvas-button-background-color-hover);
+ }
+
+ &:disabled,
+ &:disabled:active,
+ &.is-disabled,
+ &.is-disabled:active {
+ cursor: default;
+ color: #5c5c5c;
+ background: #555;
+ font-weight: normal;
+ }
+ }
+
+ & .button--primary {
+ margin-top: 15px;
+ color: var(--off-canvas-primary-button-text-color);
+ background: var(--off-canvas-primary-button-background-color);
+
+ &:hover,
+ &:active {
+ color: var(--off-canvas-primary-button-text-color-hover);
+ background: var(--off-canvas-primary-button-background-color-hover);
+ }
+ }
+
+ & button.link {
+ display: inline;
+ transition: color 0.5s ease;
+ color: var(--off-canvas-link-color);
+ border: 0;
+ background: transparent;
+ font-size: var(--off-canvas-button-font-size);
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ color: var(--off-canvas-link-color);
+ }
+ }
+
+ & .button--danger {
+ text-decoration: none;
+ color: #c72100;
+ border-radius: 0;
+ font-weight: 400;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ color: #ff2a00;
+ text-shadow: none;
+ }
+
+ &:disabled,
+ &.is-disabled {
+ cursor: default;
+ color: #737373;
+ }
+ }
+
+ @nest .no-touchevents & .button--small {
+ padding: 2px 1em;
+ font-size: 13px;
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/details.css b/core/misc/dialog/off-canvas/css/details.css
new file mode 100644
index 000000000000..8f3b0d4d6edd
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/details.css
@@ -0,0 +1,72 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Visual styling for summary and details in the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --off-canvas-details-border-width: 0;
+ --off-canvas-details-border-color: none;
+ --off-canvas-details-background-color: #474747;
+ --off-canvas-details-text-color: #ddd;
+ --off-canvas-details-summary-border: none;
+ --off-canvas-details-summary-padding: 0.625rem 1.25rem;
+ --off-canvas-details-summary-font-size: 0.875rem;
+ --off-canvas-details-summary-background-color: #333;
+ --off-canvas-details-summary-background-color-hover: #222;
+ --off-canvas-details-summary-text-color: #eee;
+ --off-canvas-details-summary-text-color-hover: #fff
+}
+
+#drupal-off-canvas-wrapper details {
+ margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding)); /* Cancel out the padding of the parent. */
+ padding: 0 var(--off-canvas-padding);
+ color: var(--off-canvas-details-text-color);
+ border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width);
+ background: var(--off-canvas-details-background-color)
+ }
+
+#drupal-off-canvas-wrapper details + details {
+ margin-top: calc(-1 * var(--off-canvas-details-border-width));
+ }
+
+#drupal-off-canvas-wrapper summary {
+ margin: 0 calc(-1 * var(--off-canvas-padding));
+ padding: var(--off-canvas-details-summary-padding);
+ color: var(--off-canvas-details-summary-text-color);
+ border: var(--off-canvas-details-summary-border);
+ background-color: var(--off-canvas-details-summary-background-color);
+ font-size: var(--off-canvas-details-summary-font-size)
+ }
+
+#drupal-off-canvas-wrapper summary:hover {
+ color: var(--off-canvas-details-summary-text-color-hover);
+ background-color: var(--off-canvas-details-summary-background-color-hover);
+ }
+
+#drupal-off-canvas-wrapper summary:focus {
+ outline-offset: -4px; /* Ensure focus doesn't get cut off. */
+ }
+
+#drupal-off-canvas-wrapper summary {
+
+ a {
+ color: var(--off-canvas-details-text-color)
+ }
+
+ a:hover {
+ color: var(--off-canvas-details-summary-text-color-hover);
+ }
+ }
+
+#drupal-off-canvas-wrapper .details-wrapper {
+ padding: var(--off-canvas-vertical-spacing-unit) 0;
+ }
diff --git a/core/misc/dialog/off-canvas/css/details.pcss.css b/core/misc/dialog/off-canvas/css/details.pcss.css
new file mode 100644
index 000000000000..3c32dace9c35
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/details.pcss.css
@@ -0,0 +1,62 @@
+/**
+ * @file
+ * Visual styling for summary and details in the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --off-canvas-details-border-width: 0;
+ --off-canvas-details-border-color: none;
+ --off-canvas-details-background-color: #474747;
+ --off-canvas-details-text-color: #ddd;
+ --off-canvas-details-summary-border: none;
+ --off-canvas-details-summary-padding: 10px 20px;
+ --off-canvas-details-summary-font-size: 14px;
+ --off-canvas-details-summary-background-color: #333;
+ --off-canvas-details-summary-background-color-hover: #222;
+ --off-canvas-details-summary-text-color: #eee;
+ --off-canvas-details-summary-text-color-hover: #fff;
+
+ & details {
+ margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding)); /* Cancel out the padding of the parent. */
+ padding: 0 var(--off-canvas-padding);
+ color: var(--off-canvas-details-text-color);
+ border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width);
+ background: var(--off-canvas-details-background-color);
+
+ & + details {
+ margin-top: calc(-1 * var(--off-canvas-details-border-width));
+ }
+ }
+
+ & summary {
+ margin: 0 calc(-1 * var(--off-canvas-padding));
+ padding: var(--off-canvas-details-summary-padding);
+ color: var(--off-canvas-details-summary-text-color);
+ border: var(--off-canvas-details-summary-border);
+ background-color: var(--off-canvas-details-summary-background-color);
+ font-size: var(--off-canvas-details-summary-font-size);
+
+ &:hover {
+ color: var(--off-canvas-details-summary-text-color-hover);
+ background-color: var(--off-canvas-details-summary-background-color-hover);
+ }
+
+ &:focus {
+ outline-offset: -4px; /* Ensure focus doesn't get cut off. */
+ }
+
+ a {
+ color: var(--off-canvas-details-text-color);
+
+ &:hover {
+ color: var(--off-canvas-details-summary-text-color-hover);
+ }
+ }
+ }
+
+ & .details-wrapper {
+ padding: var(--off-canvas-vertical-spacing-unit) 0;
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/dropbutton.css b/core/misc/dialog/off-canvas/css/dropbutton.css
new file mode 100644
index 000000000000..3669399b4659
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/dropbutton.css
@@ -0,0 +1,198 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+ * @file
+ * Styles for dropbuttons in the off-canvas dialog.
+ *
+ * @internal
+ */
+#drupal-off-canvas-wrapper {
+ --off-canvas-dropbutton-height: 1.5rem;
+ --off-canvas-dropbutton-primary-background-color: var(--off-canvas-button-background-color);
+ --off-canvas-dropbutton-secondary-background-color: var(--off-canvas-button-hover-background-color);
+ --off-canvas-dropbutton-border-color: transparent;
+ --off-canvas-dropbutton-border-width: 1px;
+ --off-canvas-dropbutton-border-radius: 2px;
+ --off-canvas-dropbutton-focus-outline-color: var(--off-canvas-focus-outline-color);
+ --off-canvas-dropbutton-font-size: 0.75rem;
+ --off-canvas-dropbutton-text-color: var(--off-canvas-button-text-color); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
+ --off-canvas-dropbutton-text-color-hover: var(--off-canvas-button-text-color-hover) /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
+}
+#drupal-off-canvas-wrapper .dropbutton-wrapper {
+ margin-top: var(--off-canvas-vertical-spacing-unit);
+ margin-bottom: var(--off-canvas-vertical-spacing-unit)
+
+ /*
+ * Styles for when the dropbutton is expanded.
+ */
+ }
+#drupal-off-canvas-wrapper .dropbutton-wrapper.open {
+ position: relative;
+ z-index: 100
+ }
+#drupal-off-canvas-wrapper .dropbutton-wrapper.open .secondary-action {
+ visibility: visible;
+ }
+#drupal-off-canvas-wrapper .dropbutton-wrapper.open .dropbutton-widget {
+ border-radius: var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0 0;
+ }
+#drupal-off-canvas-wrapper .dropbutton-wrapper.open .dropbutton-toggle button:before {
+ transform: translateY(25%) rotate(225deg);
+ }
+#drupal-off-canvas-wrapper .dropbutton-wrapper {
+
+ /*
+ * Styles for single link variant of dropbutton.
+ */
+ }
+[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {
+ padding-right: 0
+}
+[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {
+ padding-left: 0
+}
+#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child {
+ border-right: solid 1px var(--off-canvas-dropbutton-border-color); /* LTR */
+ border-radius: var(--off-canvas-dropbutton-border-radius)
+ }
+[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child {
+ border: solid 1px var(--off-canvas-dropbutton-border-color);
+ }
+#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action a {
+ justify-content: center;
+ }
+[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-widget {
+ padding-right: var(--off-canvas-dropbutton-height)
+}
+[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-widget {
+ padding-left: var(--off-canvas-dropbutton-height)
+}
+#drupal-off-canvas-wrapper .dropbutton-widget {
+ position: relative;
+ width: max-content;
+ max-width: 100%;
+ height: var(--off-canvas-dropbutton-height);
+ border-radius: var(--off-canvas-dropbutton-border-radius);
+ }
+[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {
+ margin-left: 0
+}
+[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {
+ margin-right: 0
+}
+[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {
+ padding-left: 0
+}
+[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {
+ padding-right: 0
+}
+#drupal-off-canvas-wrapper .dropbutton {
+ height: var(--off-canvas-dropbutton-height);
+ margin-top: 0;
+ margin-bottom: 0;
+ list-style: none;
+ font-size: var(--off-canvas-dropbutton-font-size);
+ }
+#drupal-off-canvas-wrapper {
+
+ /* This is the button that expands/collapses the secondary options. */
+}
+#drupal-off-canvas-wrapper .dropbutton-toggle {
+ padding: 0;
+ border: 0
+ }
+[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
+ right: 0
+}
+[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
+ left: 0
+}
+#drupal-off-canvas-wrapper .dropbutton-toggle button {
+ position: absolute;
+ top: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--off-canvas-dropbutton-height);
+ height: var(--off-canvas-dropbutton-height);
+ padding: 0;
+ cursor: pointer;
+ border-color: var(--off-canvas-dropbutton-border-color);
+ border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
+ background: var(--off-canvas-dropbutton-primary-background-color)
+ }
+#drupal-off-canvas-wrapper .dropbutton-toggle button:focus {
+ outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
+ outline-offset: -2px;
+ }
+#drupal-off-canvas-wrapper .dropbutton-toggle button:before {
+ display: block;
+ width: 0.375rem;
+ height: 0.375rem;
+ content: "";
+ transform: translateY(-25%) rotate(45deg);
+ border-right: solid 2px var(--off-canvas-dropbutton-text-color);
+ border-bottom: solid 2px var(--off-canvas-dropbutton-text-color);
+ }
+[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
+ border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius);
+ }
+#drupal-off-canvas-wrapper {
+
+ /* This is the first <li> element in the list of actions. */
+}
+[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
+ margin-right: 2px
+}
+[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
+ margin-left: 2px
+}
+#drupal-off-canvas-wrapper .dropbutton-action:first-child {
+ border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
+ border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius); /* LTR */
+ background: var(--off-canvas-dropbutton-primary-background-color)
+ }
+[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
+ border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
+ border-radius: 0 var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0;
+ }
+#drupal-off-canvas-wrapper .dropbutton-action a {
+ display: flex;
+ align-items: center;
+ min-height: var(--off-canvas-dropbutton-height);
+ margin-bottom: -2px;
+ padding: 0 0.5625rem;
+ text-decoration: none;
+ color: var(--off-canvas-dropbutton-text-color);
+ font-weight: 600
+ }
+#drupal-off-canvas-wrapper .dropbutton-action a:hover {
+ color: var(--off-canvas-dropbutton-text-color);
+ }
+#drupal-off-canvas-wrapper .dropbutton-action a:focus {
+ outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
+ outline-offset: -1px; /* Overlap parent container by 1px. */
+ }
+#drupal-off-canvas-wrapper {
+
+ /* These are the <li> elements other than the first. */
+}
+#drupal-off-canvas-wrapper .secondary-action {
+ visibility: hidden;
+ width: calc(100% + var(--off-canvas-dropbutton-height));
+ margin-top: var(--off-canvas-dropbutton-border-width);
+ border-right: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
+ border-left: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
+ background-color: var(--off-canvas-dropbutton-primary-background-color)
+ }
+#drupal-off-canvas-wrapper .secondary-action:last-child {
+ border-bottom: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
+ }
+#drupal-off-canvas-wrapper .secondary-action a:hover {
+ color: var(--off-canvas-dropbutton-text-color-hover);
+ background-color: var(--off-canvas-dropbutton-secondary-background-color);
+ }
diff --git a/core/misc/dialog/off-canvas/css/dropbutton.pcss.css b/core/misc/dialog/off-canvas/css/dropbutton.pcss.css
new file mode 100644
index 000000000000..b1e225dfb14a
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/dropbutton.pcss.css
@@ -0,0 +1,179 @@
+/**
+ * @file
+ * Styles for dropbuttons in the off-canvas dialog.
+ *
+ * @internal
+ */
+#drupal-off-canvas-wrapper {
+ --off-canvas-dropbutton-height: 24px;
+ --off-canvas-dropbutton-primary-background-color: var(--off-canvas-button-background-color);
+ --off-canvas-dropbutton-secondary-background-color: var(--off-canvas-button-hover-background-color);
+ --off-canvas-dropbutton-border-color: transparent;
+ --off-canvas-dropbutton-border-width: 1px;
+ --off-canvas-dropbutton-border-radius: 2px;
+ --off-canvas-dropbutton-focus-outline-color: var(--off-canvas-focus-outline-color);
+ --off-canvas-dropbutton-font-size: 12px;
+ --off-canvas-dropbutton-text-color: var(--off-canvas-button-text-color); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
+ --off-canvas-dropbutton-text-color-hover: var(--off-canvas-button-text-color-hover); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
+
+ & .dropbutton-wrapper {
+ margin-block: var(--off-canvas-vertical-spacing-unit);
+
+ /*
+ * Styles for when the dropbutton is expanded.
+ */
+ &.open {
+ position: relative;
+ z-index: 100;
+
+ & .secondary-action {
+ visibility: visible;
+ }
+
+ & .dropbutton-widget {
+ border-radius: var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0 0;
+ }
+
+ & .dropbutton-toggle button:before {
+ transform: translateY(25%) rotate(225deg);
+ }
+ }
+
+ /*
+ * Styles for single link variant of dropbutton.
+ */
+ &.dropbutton-single {
+ & .dropbutton-widget {
+ padding-inline-end: 0;
+ }
+
+ & .dropbutton-action {
+ &:first-child {
+ border-right: solid 1px var(--off-canvas-dropbutton-border-color); /* LTR */
+ border-radius: var(--off-canvas-dropbutton-border-radius);
+
+ &:dir(rtl) {
+ border: solid 1px var(--off-canvas-dropbutton-border-color);
+ }
+ }
+
+ & a {
+ justify-content: center;
+ }
+ }
+ }
+ }
+
+ & .dropbutton-widget {
+ position: relative;
+ width: max-content;
+ max-width: 100%;
+ height: var(--off-canvas-dropbutton-height);
+ padding-inline-end: var(--off-canvas-dropbutton-height);
+ border-radius: var(--off-canvas-dropbutton-border-radius);
+ }
+
+ & .dropbutton {
+ height: var(--off-canvas-dropbutton-height);
+ margin-block: 0;
+ margin-inline-start: 0;
+ padding-inline-start: 0;
+ list-style: none;
+ font-size: var(--off-canvas-dropbutton-font-size);
+ }
+
+ /* This is the button that expands/collapses the secondary options. */
+ & .dropbutton-toggle {
+ padding: 0;
+ border: 0;
+
+ & button {
+ position: absolute;
+ top: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--off-canvas-dropbutton-height);
+ height: var(--off-canvas-dropbutton-height);
+ padding: 0;
+ cursor: pointer;
+ border-color: var(--off-canvas-dropbutton-border-color);
+ border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
+ background: var(--off-canvas-dropbutton-primary-background-color);
+ inset-inline-end: 0;
+
+ &:focus {
+ outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
+ outline-offset: -2px;
+ }
+
+ &:before {
+ display: block;
+ width: 6px;
+ height: 6px;
+ content: "";
+ transform: translateY(-25%) rotate(45deg);
+ border-right: solid 2px var(--off-canvas-dropbutton-text-color);
+ border-bottom: solid 2px var(--off-canvas-dropbutton-text-color);
+ }
+
+ &:dir(rtl) {
+ border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius);
+ }
+ }
+ }
+
+ /* This is the first <li> element in the list of actions. */
+ & .dropbutton-action {
+ &:first-child {
+ margin-inline-end: 2px;
+ border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
+ border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius); /* LTR */
+ background: var(--off-canvas-dropbutton-primary-background-color);
+
+ &:dir(rtl) {
+ border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
+ border-radius: 0 var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0;
+ }
+ }
+
+ & a {
+ display: flex;
+ align-items: center;
+ min-height: var(--off-canvas-dropbutton-height);
+ margin-bottom: -2px;
+ padding: 0 9px;
+ text-decoration: none;
+ color: var(--off-canvas-dropbutton-text-color);
+ font-weight: 600;
+
+ &:hover {
+ color: var(--off-canvas-dropbutton-text-color);
+ }
+
+ &:focus {
+ outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
+ outline-offset: -1px; /* Overlap parent container by 1px. */
+ }
+ }
+ }
+
+ /* These are the <li> elements other than the first. */
+ & .secondary-action {
+ visibility: hidden;
+ width: calc(100% + var(--off-canvas-dropbutton-height));
+ margin-top: var(--off-canvas-dropbutton-border-width);
+ border-right: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
+ border-left: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
+ background-color: var(--off-canvas-dropbutton-primary-background-color);
+
+ &:last-child {
+ border-bottom: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
+ }
+
+ & a:hover {
+ color: var(--off-canvas-dropbutton-text-color-hover);
+ background-color: var(--off-canvas-dropbutton-secondary-background-color);
+ }
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/drupal.css b/core/misc/dialog/off-canvas/css/drupal.css
new file mode 100644
index 000000000000..03397fc1dda3
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/drupal.css
@@ -0,0 +1,35 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Recreate Drupal admin styling that was removed with reset.
+ * @see system.admin.css
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper .panel {
+ padding: 0.3125rem 0.3125rem 0.9375rem;
+ }
+
+#drupal-off-canvas-wrapper .panel__description {
+ margin: 0 0 0.1875rem;
+ padding: 2px 0 0.1875rem 0;
+ }
+
+#drupal-off-canvas-wrapper .compact-link {
+ margin: 0 0 0.625rem 0;
+ }
+
+#drupal-off-canvas-wrapper small .admin-link:before {
+ content: " [";
+ }
+
+#drupal-off-canvas-wrapper small .admin-link:after {
+ content: "]";
+ }
diff --git a/core/misc/dialog/off-canvas/css/drupal.pcss.css b/core/misc/dialog/off-canvas/css/drupal.pcss.css
new file mode 100644
index 000000000000..9916b2883032
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/drupal.pcss.css
@@ -0,0 +1,30 @@
+/**
+ * @file
+ * Recreate Drupal admin styling that was removed with reset.
+ * @see system.admin.css
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ & .panel {
+ padding: 5px 5px 15px;
+ }
+
+ & .panel__description {
+ margin: 0 0 3px;
+ padding: 2px 0 3px 0;
+ }
+
+ & .compact-link {
+ margin: 0 0 10px 0;
+ }
+
+ & small .admin-link:before {
+ content: " [";
+ }
+
+ & small .admin-link:after {
+ content: "]";
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/form.css b/core/misc/dialog/off-canvas/css/form.css
new file mode 100644
index 000000000000..ea71b1268e38
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/form.css
@@ -0,0 +1,229 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Visual styling for forms in the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --drupal-off-canvas-input-padding: var(--off-canvas-vertical-spacing-unit);
+ --drupal-off-canvas-input-background-color: #fff;
+ --drupal-off-canvas-input-border: solid 1px transparent;
+ --drupal-off-canvas-input-border-radius: 2px;
+ --drupal-off-canvas-input-font-size: 0.875rem;
+ --drupal-off-canvas-input-text-color: #333;
+ --drupal-off-canvas-fieldset-background-color: transparent;
+ --drupal-off-canvas-fieldset-border-width: 1px;
+ --drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color)
+}
+
+#drupal-off-canvas-wrapper form {
+ padding-top: var(--off-canvas-padding);
+ padding-bottom: var(--off-canvas-padding)
+ }
+
+#drupal-off-canvas-wrapper form > *:first-child {
+ margin-top: 0;
+ padding-top: 0;
+ }
+
+#drupal-off-canvas-wrapper .ck-content {
+ color: var(--drupal-off-canvas-input-text-color);
+ }
+
+#drupal-off-canvas-wrapper .form-item:where(:not(fieldset)) {
+ padding: var(--off-canvas-vertical-spacing-unit) 0;
+ }
+
+#drupal-off-canvas-wrapper .form-items-inline > * {
+ display: inline-block;
+ }
+
+#drupal-off-canvas-wrapper label {
+ display: block;
+ }
+
+#drupal-off-canvas-wrapper .form-type-boolean {
+ padding: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
+ }
+
+#drupal-off-canvas-wrapper .description,
+ #drupal-off-canvas-wrapper .form-item__description {
+ margin: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
+ font-size: 0.75rem;
+ }
+
+#drupal-off-canvas-wrapper .form-required:after {
+ content: "*";
+ }
+
+#drupal-off-canvas-wrapper .fieldset,
+ #drupal-off-canvas-wrapper fieldset {
+ margin: calc(2 * var(--off-canvas-vertical-spacing-unit)) 0;
+ padding: var(--off-canvas-vertical-spacing-unit);
+ border: solid var(--drupal-off-canvas-fieldset-border-width) var(--drupal-off-canvas-fieldset-border-color);
+ background-color: var(--drupal-off-canvas-fieldset-background-color);
+ }
+
+#drupal-off-canvas-wrapper legend,
+ #drupal-off-canvas-wrapper .fieldset__legend {
+ display: contents;
+ font-weight: bold;
+ }
+
+#drupal-off-canvas-wrapper {
+
+ /* Bartik uses the .field-multiple-table CSS class on its tabledrag tables. */
+}
+
+#drupal-off-canvas-wrapper :is(.fieldset, fieldset, .draggable-table, .field-multiple-table) input:where(:not([type="submit"], [type="checkbox"], [type="radio"])) {
+ width: 100%; /* Prevent text fields from breaking out of tables and fieldsets at narrow widths. */
+ }
+
+#drupal-off-canvas-wrapper input,
+ #drupal-off-canvas-wrapper textarea {
+ font-family: inherit;
+ }
+
+#drupal-off-canvas-wrapper input:where(:not([type="submit"], [type="checkbox"], [type="radio"], [type="file"])), #drupal-off-canvas-wrapper select, #drupal-off-canvas-wrapper textarea {
+ max-width: 100%;
+ padding: var(--drupal-off-canvas-input-padding);
+ color: var(--drupal-off-canvas-input-text-color);
+ border: var(--drupal-off-canvas-input-border);
+ border-radius: var(--drupal-off-canvas-input-border-radius);
+ background-color: var(--drupal-off-canvas-input-background-color);
+ font-size: var(--drupal-off-canvas-input-font-size);
+ }
+
+#drupal-off-canvas-wrapper input[type="checkbox"] + label, #drupal-off-canvas-wrapper input[type="radio"] + label {
+ display: inline;
+ }
+
+#drupal-off-canvas-wrapper input[type="file"] {
+ margin-bottom: var(--off-canvas-vertical-spacing-unit);
+ }
+
+#drupal-off-canvas-wrapper input[type="search"] {
+ -webkit-appearance: none;
+ appearance: none; /* Necessary for Safari. */
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper select {
+ padding-right: 1.25rem
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper select {
+ padding-left: 1.25rem
+}
+
+#drupal-off-canvas-wrapper select {
+ -webkit-appearance: none;
+ appearance: none;
+ border: var(--drupal-off-canvas-input-border);
+ border-radius: var(--drupal-off-canvas-input-border-radius);
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-position: center right 5px; /* LTR */
+ background-size: 0.75rem
+ }
+
+[dir="rtl"] #drupal-off-canvas-wrapper select {
+ background-position: center left 5px;
+ }
+
+@media (forced-colors: active) {
+
+[dir="ltr"] #drupal-off-canvas-wrapper select {
+ padding-right: 0
+ }
+
+[dir="rtl"] #drupal-off-canvas-wrapper select {
+ padding-left: 0
+ }
+
+#drupal-off-canvas-wrapper select {
+ -webkit-appearance: revert;
+ appearance: revert;
+ background: revert
+ }
+ }
+
+#drupal-off-canvas-wrapper {
+
+ /*
+ * Autocomplete.
+ */
+}
+
+[dir="ltr"] #drupal-off-canvas-wrapper .form-autocomplete {
+ padding-right: 2.5rem
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper .form-autocomplete {
+ padding-left: 2.5rem
+}
+
+#drupal-off-canvas-wrapper .form-autocomplete { /* Room for icon. */
+ background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-position: center right 1px /* LTR */
+ }
+
+#drupal-off-canvas-wrapper .form-autocomplete.ui-autocomplete-loading {
+ background-image: url(../../../icons/spinner.gif);
+ }
+
+[dir="rtl"] #drupal-off-canvas-wrapper .form-autocomplete {
+ background-position: center left 1px;
+ }
+
+#drupal-off-canvas-wrapper {
+
+ /* This is the background <ul> for the autocomplete dropdown. */
+}
+
+#drupal-off-canvas-wrapper .ui-autocomplete {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ border: var(--drupal-off-canvas-input-border);
+ background-color: var(--drupal-off-canvas-input-background-color);
+ box-shadow: 0 1px 1px 0 var(--off-canvas-background-color) /* Ensure edge is visible if appearing over another form element. */
+ }
+
+#drupal-off-canvas-wrapper .ui-autocomplete a {
+ display: block;
+ padding: var(--drupal-off-canvas-input-padding);
+ cursor: pointer;
+ color: var(--drupal-off-canvas-input-text-color);
+ font-size: var(--drupal-off-canvas-input-font-size)
+ }
+
+#drupal-off-canvas-wrapper .ui-autocomplete a:hover {
+ background-color: #eee;
+ }
+
+#drupal-off-canvas-wrapper .ui-autocomplete a:focus,
+ #drupal-off-canvas-wrapper .ui-autocomplete a.ui-state-active {
+ outline: solid 2px currentColor;
+ outline-offset: -2px;
+ }
+
+#drupal-off-canvas-wrapper {
+
+ /*
+ * Claro injects a "Loading" autocomplete message that affects the positioning
+ * of the ui-autocomplete dropdown. We remove this to normalize the markup.
+ */
+}
+
+#drupal-off-canvas-wrapper .claro-autocomplete__message {
+ display: none;
+ }
diff --git a/core/misc/dialog/off-canvas/css/form.pcss.css b/core/misc/dialog/off-canvas/css/form.pcss.css
new file mode 100644
index 000000000000..ad1f532bb2c8
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/form.pcss.css
@@ -0,0 +1,183 @@
+/**
+ * @file
+ * Visual styling for forms in the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --drupal-off-canvas-input-padding: var(--off-canvas-vertical-spacing-unit);
+ --drupal-off-canvas-input-background-color: #fff;
+ --drupal-off-canvas-input-border: solid 1px transparent;
+ --drupal-off-canvas-input-border-radius: 2px;
+ --drupal-off-canvas-input-font-size: 14px;
+ --drupal-off-canvas-input-text-color: #333;
+ --drupal-off-canvas-fieldset-background-color: transparent;
+ --drupal-off-canvas-fieldset-border-width: 1px;
+ --drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color);
+
+ & form {
+ padding-block: var(--off-canvas-padding);
+
+ & > *:first-child {
+ margin-top: 0;
+ padding-top: 0;
+ }
+ }
+
+ & .ck-content {
+ color: var(--drupal-off-canvas-input-text-color);
+ }
+
+ & .form-item:where(:not(fieldset)) {
+ padding: var(--off-canvas-vertical-spacing-unit) 0;
+ }
+
+ & .form-items-inline > * {
+ display: inline-block;
+ }
+
+ & label {
+ display: block;
+ }
+
+ & .form-type-boolean {
+ padding: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
+ }
+
+ & .description,
+ & .form-item__description {
+ margin: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
+ font-size: 12px;
+ }
+
+ & .form-required:after {
+ content: "*";
+ }
+
+ & .fieldset,
+ & fieldset {
+ margin: calc(2 * var(--off-canvas-vertical-spacing-unit)) 0;
+ padding: var(--off-canvas-vertical-spacing-unit);
+ border: solid var(--drupal-off-canvas-fieldset-border-width) var(--drupal-off-canvas-fieldset-border-color);
+ background-color: var(--drupal-off-canvas-fieldset-background-color);
+ }
+
+ & legend, /* Bartik doesn't apply BEM classes, so we use the element. */
+ & .fieldset__legend {
+ display: contents;
+ font-weight: bold;
+ }
+
+ /* Bartik uses the .field-multiple-table CSS class on its tabledrag tables. */
+ & :is(.fieldset, fieldset, .draggable-table, .field-multiple-table) input:where(:not([type="submit"], [type="checkbox"], [type="radio"])) {
+ width: 100%; /* Prevent text fields from breaking out of tables and fieldsets at narrow widths. */
+ }
+
+ & input,
+ & textarea {
+ font-family: inherit;
+ }
+
+ & input:where(:not([type="submit"], [type="checkbox"], [type="radio"], [type="file"])),
+ & select,
+ & textarea {
+ max-width: 100%;
+ padding: var(--drupal-off-canvas-input-padding);
+ color: var(--drupal-off-canvas-input-text-color);
+ border: var(--drupal-off-canvas-input-border);
+ border-radius: var(--drupal-off-canvas-input-border-radius);
+ background-color: var(--drupal-off-canvas-input-background-color);
+ font-size: var(--drupal-off-canvas-input-font-size);
+ }
+
+ & input[type="checkbox"],
+ & input[type="radio"] {
+ & + label {
+ display: inline;
+ }
+ }
+
+ & input[type="file"] {
+ margin-bottom: var(--off-canvas-vertical-spacing-unit);
+ }
+
+ & input[type="search"] {
+ appearance: none; /* Necessary for Safari. */
+ }
+
+ & select {
+ appearance: none;
+ padding-inline-end: 20px;
+ border: var(--drupal-off-canvas-input-border);
+ border-radius: var(--drupal-off-canvas-input-border-radius);
+ background-image: url(../../../icons/545560/chevron-down.svg);
+ background-repeat: no-repeat;
+ background-position: center right 5px; /* LTR */
+ background-size: 12px;
+
+ &:dir(rtl) {
+ background-position: center left 5px;
+ }
+
+ @media (forced-colors: active) {
+ appearance: revert;
+ padding-inline-end: 0;
+ background: revert;
+ }
+ }
+
+ /*
+ * Autocomplete.
+ */
+ & .form-autocomplete {
+ padding-inline-end: 40px; /* Room for icon. */
+ background-image: url(../../../icons/868686/magnifier.svg);
+ background-repeat: no-repeat;
+ background-position: center right 1px; /* LTR */
+
+ &.ui-autocomplete-loading {
+ background-image: url(../../../icons/spinner.gif);
+ }
+
+ &:dir(rtl) {
+ background-position: center left 1px;
+ }
+ }
+
+ /* This is the background <ul> for the autocomplete dropdown. */
+ & .ui-autocomplete {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ border: var(--drupal-off-canvas-input-border);
+ background-color: var(--drupal-off-canvas-input-background-color);
+ box-shadow: 0 1px 1px 0 var(--off-canvas-background-color); /* Ensure edge is visible if appearing over another form element. */
+
+ & a {
+ display: block;
+ padding: var(--drupal-off-canvas-input-padding);
+ cursor: pointer;
+ color: var(--drupal-off-canvas-input-text-color);
+ font-size: var(--drupal-off-canvas-input-font-size);
+
+ &:hover {
+ background-color: #eee;
+ }
+
+ &:focus,
+ &.ui-state-active {
+ outline: solid 2px currentColor;
+ outline-offset: -2px;
+ }
+ }
+ }
+
+ /*
+ * Claro injects a "Loading" autocomplete message that affects the positioning
+ * of the ui-autocomplete dropdown. We remove this to normalize the markup.
+ */
+ & .claro-autocomplete__message {
+ display: none;
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/messages.css b/core/misc/dialog/off-canvas/css/messages.css
new file mode 100644
index 000000000000..6d644aa33d11
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/messages.css
@@ -0,0 +1,157 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling for messages in the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --off-canvas-messages-icon-size: 1.25rem;
+ --off-canvas-messages-background-color: #f3faef;
+ --off-canvas-messages-text-color-status: #325e1c;
+ --off-canvas-messages-text-color-warning: #734c00;
+ --off-canvas-messages-text-color-error: #a51b00;
+ --off-canvas-messages-icon-status: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z'/%3e%3c/svg%3e");
+ --off-canvas-messages-icon-warning: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e29700'%3e%3cpath d='M14.66 12.316l-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002v-5zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.239z'/%3e%3c/svg%3e");
+ --off-canvas-messages-icon-error: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e32700'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e")
+}
+
+[dir="ltr"] #drupal-off-canvas-wrapper .messages {
+ padding-left: calc(2 * var(--off-canvas-messages-icon-size))
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper .messages {
+ padding-right: calc(2 * var(--off-canvas-messages-icon-size))
+}
+
+#drupal-off-canvas-wrapper .messages {
+ position: relative; /* Anchor :before pseudo-element. */
+ margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit));
+ padding: calc(2 * var(--off-canvas-vertical-spacing-unit)); /* Room for icon. */
+ border: solid 1px transparent;
+ background-color: var(--off-canvas-messages-background-color)
+
+ /* Icon. */
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper .messages:before {
+ left: 0.625rem
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper .messages:before {
+ right: 0.625rem
+}
+
+#drupal-off-canvas-wrapper .messages:before {
+ position: absolute;
+ top: 50%;
+ display: block;
+ width: var(--off-canvas-messages-icon-size);
+ height: var(--off-canvas-messages-icon-size);
+ content: "";
+ transform: translateY(-50%);
+ background-repeat: no-repeat;
+ background-size: contain
+ }
+
+@media (forced-colors: active) {
+
+#drupal-off-canvas-wrapper .messages:before {
+ background: canvastext;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain
+ }
+ }
+
+#drupal-off-canvas-wrapper h2 {
+ margin-top: 0;
+ }
+
+#drupal-off-canvas-wrapper {
+
+ /*
+ * Some themes (Olivero) insert SVG icon. We use a background icon, so we
+ * need to remove this.
+ */
+}
+
+#drupal-off-canvas-wrapper .messages__icon,
+ #drupal-off-canvas-wrapper .messages__close {
+ display: none;
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper .messages__list {
+ padding-left: 1.25rem
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper .messages__list {
+ padding-right: 1.25rem
+}
+
+#drupal-off-canvas-wrapper .messages__list {
+ margin: 0;
+ }
+
+#drupal-off-canvas-wrapper .messages abbr {
+ text-decoration: none;
+ }
+
+#drupal-off-canvas-wrapper .messages--status {
+ color: var(--off-canvas-messages-text-color-status)
+ }
+
+#drupal-off-canvas-wrapper .messages--status:before {
+ background-image: var(--off-canvas-messages-icon-status)
+ }
+
+@media (forced-colors: active) {
+
+#drupal-off-canvas-wrapper .messages--status:before {
+ background: canvastext;
+ -webkit-mask-image: var(--off-canvas-messages-icon-status);
+ mask-image: var(--off-canvas-messages-icon-status)
+ }
+ }
+
+#drupal-off-canvas-wrapper .messages--warning {
+ color: var(--off-canvas-messages-text-color-warning)
+ }
+
+#drupal-off-canvas-wrapper .messages--warning:before {
+ background-image: var(--off-canvas-messages-icon-warning)
+ }
+
+@media (forced-colors: active) {
+
+#drupal-off-canvas-wrapper .messages--warning:before {
+ background: canvastext;
+ -webkit-mask-image: var(--off-canvas-messages-icon-warning);
+ mask-image: var(--off-canvas-messages-icon-warning)
+ }
+ }
+
+#drupal-off-canvas-wrapper .messages--error {
+ color: var(--off-canvas-messages-text-color-error)
+ }
+
+#drupal-off-canvas-wrapper .messages--error:before {
+ background-image: var(--off-canvas-messages-icon-error)
+ }
+
+@media (forced-colors: active) {
+
+#drupal-off-canvas-wrapper .messages--error:before {
+ background: canvastext;
+ -webkit-mask-image: var(--off-canvas-messages-icon-error);
+ mask-image: var(--off-canvas-messages-icon-error)
+ }
+ }
diff --git a/core/misc/dialog/off-canvas/css/messages.pcss.css b/core/misc/dialog/off-canvas/css/messages.pcss.css
new file mode 100644
index 000000000000..0321b7491ae2
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/messages.pcss.css
@@ -0,0 +1,107 @@
+/**
+ * @file
+ * Styling for messages in the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --off-canvas-messages-icon-size: 20px;
+ --off-canvas-messages-background-color: #f3faef;
+ --off-canvas-messages-text-color-status: #325e1c;
+ --off-canvas-messages-text-color-warning: #734c00;
+ --off-canvas-messages-text-color-error: #a51b00;
+ --off-canvas-messages-icon-status: url(../../../icons/73b355/check.svg);
+ --off-canvas-messages-icon-warning: url(../../../icons/e29700/warning.svg);
+ --off-canvas-messages-icon-error: url(../../../icons/e32700/error.svg);
+
+ & .messages {
+ position: relative; /* Anchor :before pseudo-element. */
+ margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit));
+ padding: calc(2 * var(--off-canvas-vertical-spacing-unit));
+ padding-inline-start: calc(2 * var(--off-canvas-messages-icon-size)); /* Room for icon. */
+ border: solid 1px transparent;
+ background-color: var(--off-canvas-messages-background-color);
+
+ /* Icon. */
+ &:before {
+ position: absolute;
+ top: 50%;
+ display: block;
+ width: var(--off-canvas-messages-icon-size);
+ height: var(--off-canvas-messages-icon-size);
+ content: "";
+ transform: translateY(-50%);
+ background-repeat: no-repeat;
+ background-size: contain;
+ inset-inline-start: 10px;
+
+ @media (forced-colors: active) {
+ background: canvastext;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ }
+ }
+ }
+
+ & h2 {
+ margin-top: 0;
+ }
+
+ /*
+ * Some themes (Olivero) insert SVG icon. We use a background icon, so we
+ * need to remove this.
+ */
+ & .messages__icon,
+ & .messages__close {
+ display: none;
+ }
+
+ & .messages__list {
+ margin: 0;
+ padding-inline-start: 20px;
+ }
+
+ & .messages abbr {
+ text-decoration: none;
+ }
+
+ & .messages--status {
+ color: var(--off-canvas-messages-text-color-status);
+
+ &:before {
+ background-image: var(--off-canvas-messages-icon-status);
+
+ @media (forced-colors: active) {
+ background: canvastext;
+ mask-image: var(--off-canvas-messages-icon-status);
+ }
+ }
+ }
+
+ & .messages--warning {
+ color: var(--off-canvas-messages-text-color-warning);
+
+ &:before {
+ background-image: var(--off-canvas-messages-icon-warning);
+
+ @media (forced-colors: active) {
+ background: canvastext;
+ mask-image: var(--off-canvas-messages-icon-warning);
+ }
+ }
+ }
+
+ & .messages--error {
+ color: var(--off-canvas-messages-text-color-error);
+
+ &:before {
+ background-image: var(--off-canvas-messages-icon-error);
+
+ @media (forced-colors: active) {
+ background: canvastext;
+ mask-image: var(--off-canvas-messages-icon-error);
+ }
+ }
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/reset.css b/core/misc/dialog/off-canvas/css/reset.css
new file mode 100644
index 000000000000..020370031888
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/reset.css
@@ -0,0 +1,27 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Reset HTML elements styles for the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)) {
+ all: revert;
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ line-height: 1.4
+}
+
+#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)):after,
+ #drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)):before {
+ all: revert;
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ }
diff --git a/core/misc/dialog/off-canvas/css/reset.pcss.css b/core/misc/dialog/off-canvas/css/reset.pcss.css
new file mode 100644
index 000000000000..ebbcb761b553
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/reset.pcss.css
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Reset HTML elements styles for the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)) {
+ all: revert;
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ line-height: 1.4;
+
+ &:after,
+ &:before {
+ all: revert;
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/table.css b/core/misc/dialog/off-canvas/css/table.css
new file mode 100644
index 000000000000..a0136052854f
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/table.css
@@ -0,0 +1,55 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling for tables in the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --off-canvas-table-cell-padding: 2px;
+ --off-canvas-first-cell-padding-start: calc(var(--off-canvas-padding) / 2)
+}
+
+#drupal-off-canvas-wrapper table {
+ width: calc(100% + 2 * var(--off-canvas-padding));
+ margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding));
+ }
+
+#drupal-off-canvas-wrapper tr {
+ border-bottom: 1px solid var(--off-canvas-border-color);
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper td,[dir="ltr"]
+ #drupal-off-canvas-wrapper th {
+ text-align: left
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper td,[dir="rtl"]
+ #drupal-off-canvas-wrapper th {
+ text-align: right
+}
+
+#drupal-off-canvas-wrapper td,
+ #drupal-off-canvas-wrapper th {
+ padding: var(--off-canvas-table-cell-padding);
+ vertical-align: middle
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper td:first-child,[dir="ltr"] #drupal-off-canvas-wrapper th:first-child {
+ padding-left: var(--off-canvas-first-cell-padding-start)
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper td:first-child,[dir="rtl"] #drupal-off-canvas-wrapper th:first-child {
+ padding-right: var(--off-canvas-first-cell-padding-start)
+}
+
+#drupal-off-canvas-wrapper td:not(:last-child) td, #drupal-off-canvas-wrapper th:not(:last-child) td {
+ border-bottom: solid 1px var(--off-canvas-border-color);
+ }
diff --git a/core/misc/dialog/off-canvas/css/table.pcss.css b/core/misc/dialog/off-canvas/css/table.pcss.css
new file mode 100644
index 000000000000..87e4ff1122fe
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/table.pcss.css
@@ -0,0 +1,35 @@
+/**
+ * @file
+ * Styling for tables in the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --off-canvas-table-cell-padding: 2px;
+ --off-canvas-first-cell-padding-start: calc(var(--off-canvas-padding) / 2);
+
+ & table {
+ width: calc(100% + 2 * var(--off-canvas-padding));
+ margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding));
+ }
+
+ & tr {
+ border-bottom: 1px solid var(--off-canvas-border-color);
+ }
+
+ & td,
+ & th {
+ padding: var(--off-canvas-table-cell-padding);
+ text-align: start;
+ vertical-align: middle;
+
+ &:first-child {
+ padding-inline-start: var(--off-canvas-first-cell-padding-start);
+ }
+
+ &:not(:last-child) td {
+ border-bottom: solid 1px var(--off-canvas-border-color);
+ }
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/tabledrag.css b/core/misc/dialog/off-canvas/css/tabledrag.css
new file mode 100644
index 000000000000..33b236e29156
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/tabledrag.css
@@ -0,0 +1,139 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Table drag styling for off-canvas dialog.
+ *
+ * @see tabledrag.js
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ /* The draggable <tr> element. */
+}
+
+#drupal-off-canvas-wrapper .draggable:hover,
+ #drupal-off-canvas-wrapper .draggable:focus-within {
+ background-color: var(--off-canvas-background-color-light);
+ }
+
+#drupal-off-canvas-wrapper .draggable {
+
+ /* Appears when the row is being dragged. */
+ }
+
+#drupal-off-canvas-wrapper .draggable.drag {
+ cursor: move;
+ background-color: var(--off-canvas-background-color-dark);
+ }
+
+#drupal-off-canvas-wrapper td {
+ transition: background-color 0.3s ease
+
+ /* We have to horizontally align all descendent nodes including text nodes
+ * that do not have wrapper elements. Since we use flex to do this, we need
+ * try to keep it vertically centered, so we have to give it a minimum height
+ * to match the rest of the table cells. */
+ }
+
+#drupal-off-canvas-wrapper td:first-child {
+ display: flex;
+ align-items: center;
+ min-height: 3.125rem;
+ grid-gap: var(--off-canvas-table-cell-padding);
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper td abbr {
+ margin-left: 0;
+ margin-right: 0.3125rem;
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper td abbr {
+ margin-right: 0;
+ margin-left: 0.3125rem;
+}
+
+#drupal-off-canvas-wrapper td abbr {
+ text-decoration: none;
+ }
+
+#drupal-off-canvas-wrapper .tabledrag-handle {
+ flex-shrink: 0
+ }
+
+#drupal-off-canvas-wrapper .tabledrag-handle:after {
+ display: block;
+ width: 1.25rem;
+ height: 1.25rem;
+ margin: 0;
+ padding: 0;
+ content: "";
+ cursor: move;
+ background-color: transparent;
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-position: center
+ }
+
+@media (forced-colors: active) {
+
+#drupal-off-canvas-wrapper .tabledrag-handle:after {
+ background: linktext;
+ -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
+ mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center
+ }
+ }
+
+#drupal-off-canvas-wrapper {
+
+ /* Make the "row weight" <select> as small as possible. */
+}
+
+#drupal-off-canvas-wrapper .tabledrag-hide select {
+ all: revert;
+ }
+
+#drupal-off-canvas-wrapper .tabledrag-changed-warning {
+ margin-bottom: var(--off-canvas-vertical-spacing-unit);
+ font-size: 0.875rem;
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
+ text-align: right;
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
+ text-align: left;
+}
+
+#drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
+ padding-top: 0.625rem;
+ }
+
+#drupal-off-canvas-wrapper .indentation {
+ width: 0.3125rem;
+ }
+
+.touchevents #drupal-off-canvas-wrapper .draggable td {
+ padding: 0 0.625rem
+}
+
+.touchevents #drupal-off-canvas-wrapper .draggable .menu-item__link {
+ display: inline-block;
+ padding: 0.625rem 0
+}
+
+.touchevents #drupal-off-canvas-wrapper a.tabledrag-handle {
+ width: 2.5rem;
+ height: 2.75rem
+}
diff --git a/core/misc/dialog/off-canvas/css/tabledrag.pcss.css b/core/misc/dialog/off-canvas/css/tabledrag.pcss.css
new file mode 100644
index 000000000000..1bb6773b79e0
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/tabledrag.pcss.css
@@ -0,0 +1,102 @@
+/**
+ * @file
+ * Table drag styling for off-canvas dialog.
+ *
+ * @see tabledrag.js
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ /* The draggable <tr> element. */
+ & .draggable {
+ &:hover,
+ &:focus-within {
+ background-color: var(--off-canvas-background-color-light);
+ }
+
+ /* Appears when the row is being dragged. */
+ &.drag {
+ cursor: move;
+ background-color: var(--off-canvas-background-color-dark);
+ }
+ }
+
+ & td {
+ transition: background-color 0.3s ease;
+
+ /* We have to horizontally align all descendent nodes including text nodes
+ * that do not have wrapper elements. Since we use flex to do this, we need
+ * try to keep it vertically centered, so we have to give it a minimum height
+ * to match the rest of the table cells. */
+ &:first-child {
+ display: flex;
+ align-items: center;
+ min-height: 50px;
+ gap: var(--off-canvas-table-cell-padding);
+ }
+
+ & abbr {
+ margin-inline: 0 5px;
+ text-decoration: none;
+ }
+ }
+
+ & .tabledrag-handle {
+ flex-shrink: 0;
+
+ &:after {
+ display: block;
+ width: 20px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ content: "";
+ cursor: move;
+ background-color: transparent;
+ background-image: url(../../../icons/bebebe/move.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+
+ @media (forced-colors: active) {
+ background: linktext;
+ mask-image: url(../../../icons/bebebe/move.svg);
+ mask-repeat: no-repeat;
+ mask-position: center;
+ }
+ }
+ }
+
+ /* Make the "row weight" <select> as small as possible. */
+ & .tabledrag-hide select {
+ all: revert;
+ }
+
+ & .tabledrag-changed-warning {
+ margin-bottom: var(--off-canvas-vertical-spacing-unit);
+ font-size: 14px;
+ }
+
+ & .tabledrag-toggle-weight-wrapper {
+ padding-top: 10px;
+ text-align: end;
+ }
+
+ & .indentation {
+ width: 5px;
+ }
+
+ @nest .touchevents & .draggable td {
+ padding: 0 10px;
+ }
+
+ @nest .touchevents & .draggable .menu-item__link {
+ display: inline-block;
+ padding: 10px 0;
+ }
+
+ @nest .touchevents & a.tabledrag-handle {
+ width: 40px;
+ height: 44px;
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/throbber.css b/core/misc/dialog/off-canvas/css/throbber.css
new file mode 100644
index 000000000000..b85cf90457b4
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/throbber.css
@@ -0,0 +1,66 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling of AJAX actions throbber in off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper .ajax-progress,
+ #drupal-off-canvas-wrapper .ajax-progress-throbber {
+ display: inline-block;
+ overflow: hidden;
+ width: 0.9375rem;
+ height: 0.9375rem;
+ margin: 0 0.625rem;
+ animation: off-canvas-throbber-spin 1s linear infinite;
+ vertical-align: middle;
+ border: 2px solid var(--off-canvas-text-color);
+ border-top-color: transparent;
+ border-radius: 50%
+ }
+
+@media (forced-colors: active) {
+
+#drupal-off-canvas-wrapper .ajax-progress,
+ #drupal-off-canvas-wrapper .ajax-progress-throbber {
+ border-top-color: transparent
+ }
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper .layout-selection .ajax-progress,[dir="ltr"]
+ #drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,[dir="ltr"]
+ #drupal-off-canvas-wrapper .inline-block-list .ajax-progress,[dir="ltr"]
+ #drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
+ right: 0
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper .layout-selection .ajax-progress,[dir="rtl"]
+ #drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,[dir="rtl"]
+ #drupal-off-canvas-wrapper .inline-block-list .ajax-progress,[dir="rtl"]
+ #drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
+ left: 0
+}
+
+#drupal-off-canvas-wrapper .layout-selection .ajax-progress,
+ #drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,
+ #drupal-off-canvas-wrapper .inline-block-list .ajax-progress,
+ #drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+
+@keyframes off-canvas-throbber-spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/throbber.pcss.css b/core/misc/dialog/off-canvas/css/throbber.pcss.css
new file mode 100644
index 000000000000..bdbbc1e5db38
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/throbber.pcss.css
@@ -0,0 +1,44 @@
+/**
+ * @file
+ * Styling of AJAX actions throbber in off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ & .ajax-progress, /* This is the CSS class used in Claro. */
+ & .ajax-progress-throbber {
+ display: inline-block;
+ overflow: hidden;
+ width: 15px;
+ height: 15px;
+ margin: 0 10px;
+ animation: off-canvas-throbber-spin 1s linear infinite;
+ vertical-align: middle;
+ border: 2px solid var(--off-canvas-text-color);
+ border-top-color: transparent;
+ border-radius: 50%;
+
+ @media (forced-colors: active) {
+ border-top-color: transparent;
+ }
+ }
+
+ & .layout-selection,
+ & .inline-block-list {
+ & .ajax-progress,
+ & .ajax-progress-throbber {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-end: 0;
+ margin-block: auto;
+ }
+ }
+}
+
+@keyframes off-canvas-throbber-spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/titlebar.css b/core/misc/dialog/off-canvas/css/titlebar.css
new file mode 100644
index 000000000000..ca69df279b82
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/titlebar.css
@@ -0,0 +1,135 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling for the titlebar within the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --off-canvas-title-padding: calc(3 * var(--off-canvas-vertical-spacing-unit));
+ --off-canvas-title-background-color: #2d2d2d;
+ --off-canvas-title-text-color: #fff;
+ --off-canvas-title-font-size: 1rem
+}
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar {
+ position: relative;
+ margin: 0 calc(-1 * var(--off-canvas-padding));
+ padding: var(--off-canvas-title-padding) 3.125rem;
+ color: var(--off-canvas-title-text-color);
+ background-color: var(--off-canvas-title-background-color);
+ font-family: var(--off-canvas-title-font-family);
+ font-size: var(--off-canvas-title-font-size);
+ font-weight: bold
+
+ /* The pencil icon. */
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
+ left: 1em
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
+ right: 1em
+}
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
+ position: absolute;
+ top: 0;
+ display: block;
+ width: 1.25rem;
+ height: 100%;
+ content: "";
+ background-color: currentColor;
+ -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
+ mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center
+ }
+
+@media (forced-colors: active) {
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
+ background-color: canvastext
+ }
+ }
+
+#drupal-off-canvas-wrapper {
+
+ /* Close button. */
+}
+
+[dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
+ left: auto;
+ right: 0.625rem
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
+ right: auto;
+ left: 0.625rem
+}
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
+ position: absolute;
+ top: 50%;
+ overflow: hidden;
+ width: 1.875rem;
+ height: 1.875rem;
+ cursor: pointer;
+ transform: translateY(-50%);
+ text-indent: -624.9375rem;
+ color: inherit;
+ border: 1px solid transparent;
+ background-color: transparent;
+ -webkit-appearance: none;
+ appearance: none
+ }
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:focus {
+ outline: solid 2px currentColor;
+ outline-offset: 2px;
+ }
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
+
+ /* The plus icon. */
+ }
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:before,
+ #drupal-off-canvas-wrapper .ui-dialog-titlebar-close:after {
+ position: absolute;
+ top: calc(50% - 1px);
+ left: 50%;
+ width: 50%;
+ height: 0;
+ content: "";
+ border-top: solid 2px currentColor;
+ }
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:before {
+ transform: translate(-50%, 50%) rotate(-45deg);
+ }
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:after {
+ transform: translate(-50%, 50%) rotate(45deg);
+ }
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
+
+ /* Hide the default jQuery UI dialog close button. */
+ }
+
+#drupal-off-canvas-wrapper .ui-dialog-titlebar-close .ui-icon {
+ display: none;
+ }
diff --git a/core/misc/dialog/off-canvas/css/titlebar.pcss.css b/core/misc/dialog/off-canvas/css/titlebar.pcss.css
new file mode 100644
index 000000000000..320e3e71ba51
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/titlebar.pcss.css
@@ -0,0 +1,91 @@
+/**
+ * @file
+ * Styling for the titlebar within the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ --off-canvas-title-padding: calc(3 * var(--off-canvas-vertical-spacing-unit));
+ --off-canvas-title-background-color: #2d2d2d;
+ --off-canvas-title-text-color: #fff;
+ --off-canvas-title-font-size: 16px;
+
+ & .ui-dialog-titlebar {
+ position: relative;
+ margin: 0 calc(-1 * var(--off-canvas-padding));
+ padding: var(--off-canvas-title-padding) 50px;
+ color: var(--off-canvas-title-text-color);
+ background-color: var(--off-canvas-title-background-color);
+ font-family: var(--off-canvas-title-font-family);
+ font-size: var(--off-canvas-title-font-size);
+ font-weight: bold;
+
+ /* The pencil icon. */
+ &:before {
+ position: absolute;
+ top: 0;
+ inset-inline-start: 1em;
+ display: block;
+ width: 20px;
+ height: 100%;
+ content: "";
+ background-color: currentColor;
+ mask-image: url(../../../icons/ffffff/pencil.svg);
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ mask-position: center;
+
+ @media (forced-colors: active) {
+ background-color: canvastext;
+ }
+ }
+ }
+
+ /* Close button. */
+ & .ui-dialog-titlebar-close {
+ position: absolute;
+ top: 50%;
+ inset-inline: auto 10px;
+ overflow: hidden;
+ width: 30px;
+ height: 30px;
+ cursor: pointer;
+ transform: translateY(-50%);
+ text-indent: -9999px;
+ color: inherit;
+ border: 1px solid transparent;
+ background-color: transparent;
+ appearance: none;
+
+ &:focus {
+ outline: solid 2px currentColor;
+ outline-offset: 2px;
+ }
+
+ /* The plus icon. */
+ &:before,
+ &:after {
+ position: absolute;
+ top: calc(50% - 1px);
+ left: 50%;
+ width: 50%;
+ height: 0;
+ content: "";
+ border-top: solid 2px currentColor;
+ }
+
+ &:before {
+ transform: translate(-50%, 50%) rotate(-45deg);
+ }
+
+ &:after {
+ transform: translate(-50%, 50%) rotate(45deg);
+ }
+
+ /* Hide the default jQuery UI dialog close button. */
+ & .ui-icon {
+ display: none;
+ }
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/utility.css b/core/misc/dialog/off-canvas/css/utility.css
new file mode 100644
index 000000000000..9e76d3bf9868
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/utility.css
@@ -0,0 +1,38 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Re-create utility styles for off-canvas dialog that are removed in the reset.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper .hidden {
+ display: none;
+ }
+
+#drupal-off-canvas-wrapper .visually-hidden {
+ position: absolute !important;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ width: 1px !important;
+ height: 1px !important;
+ word-wrap: normal
+ }
+
+#drupal-off-canvas-wrapper .visually-hidden.focusable:is(:active, :focus) {
+ position: static !important;
+ overflow: visible;
+ clip: auto;
+ width: auto !important;
+ height: auto !important;
+ }
+
+#drupal-off-canvas-wrapper .invisible {
+ visibility: hidden;
+ }
diff --git a/core/misc/dialog/off-canvas/css/utility.pcss.css b/core/misc/dialog/off-canvas/css/utility.pcss.css
new file mode 100644
index 000000000000..5b65f2d923df
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/utility.pcss.css
@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Re-create utility styles for off-canvas dialog that are removed in the reset.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+ & .hidden {
+ display: none;
+ }
+
+ & .visually-hidden {
+ position: absolute !important;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ width: 1px !important;
+ height: 1px !important;
+ word-wrap: normal;
+
+ &.focusable:is(:active, :focus) {
+ position: static !important;
+ overflow: visible;
+ clip: auto;
+ width: auto !important;
+ height: auto !important;
+ }
+ }
+
+ & .invisible {
+ visibility: hidden;
+ }
+}
diff --git a/core/misc/dialog/off-canvas/css/wrapper.css b/core/misc/dialog/off-canvas/css/wrapper.css
new file mode 100644
index 000000000000..80c0097af87b
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/wrapper.css
@@ -0,0 +1,54 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+ * @file
+ * CSS for off-canvas dialog wrapper.
+ *
+ * @internal
+ */
+[dir="ltr"] #drupal-off-canvas-wrapper {
+ border-left: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color)
+}
+[dir="rtl"] #drupal-off-canvas-wrapper {
+ border-right: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color)
+}
+#drupal-off-canvas-wrapper {
+ --off-canvas-wrapper-box-shadow: 0 0 0.25rem 2px rgba(0, 0, 0, 0.3);
+ --off-canvas-wrapper-border-color: #2d2d2d;
+ --off-canvas-wrapper-border-width: 1px;
+
+ z-index: 501; /* Layer the dialog just under the toolbar. */
+ overflow: auto;
+ box-sizing: border-box;
+ height: 100%;
+ box-shadow: var(--off-canvas-wrapper-box-shadow)
+
+ /*
+ * Force the off-canvas dialog to be 100% width at the same breakpoint the
+ * dialog system uses to expand dialog widths.
+ */
+}
+@media (max-width: 48rem) {
+#drupal-off-canvas-wrapper {
+ width: 100% !important
+}
+ }
+/* When off-canvas dialog is at 100% width stop the body from scrolling */
+@media (max-width: 48rem) {
+body.js-off-canvas-dialog-open {
+ position: fixed
+}
+ }
+/* This is a page level content wrapper that shrinks when off-canvas is open. */
+.dialog-off-canvas-main-canvas {
+ transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease
+}
+@media (prefers-reduced-motion: reduce) {
+.dialog-off-canvas-main-canvas {
+ transition: none
+}
+ }
diff --git a/core/misc/dialog/off-canvas/css/wrapper.pcss.css b/core/misc/dialog/off-canvas/css/wrapper.pcss.css
new file mode 100644
index 000000000000..b74be8a236f6
--- /dev/null
+++ b/core/misc/dialog/off-canvas/css/wrapper.pcss.css
@@ -0,0 +1,42 @@
+/**
+ * @file
+ * CSS for off-canvas dialog wrapper.
+ *
+ * @internal
+ */
+#drupal-off-canvas-wrapper {
+ --off-canvas-wrapper-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3);
+ --off-canvas-wrapper-border-color: #2d2d2d;
+ --off-canvas-wrapper-border-width: 1px;
+
+ z-index: 501; /* Layer the dialog just under the toolbar. */
+ overflow: auto;
+ box-sizing: border-box;
+ height: 100%;
+ border-inline-start: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color);
+ box-shadow: var(--off-canvas-wrapper-box-shadow);
+
+ /*
+ * Force the off-canvas dialog to be 100% width at the same breakpoint the
+ * dialog system uses to expand dialog widths.
+ */
+ @media (max-width: 768px) {
+ width: 100% !important;
+ }
+}
+
+/* When off-canvas dialog is at 100% width stop the body from scrolling */
+body.js-off-canvas-dialog-open {
+ @media (max-width: 768px) {
+ position: fixed;
+ }
+}
+
+/* This is a page level content wrapper that shrinks when off-canvas is open. */
+.dialog-off-canvas-main-canvas {
+ transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
+
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+}
diff --git a/core/misc/dialog/off-canvas.es6.js b/core/misc/dialog/off-canvas/js/off-canvas.es6.js
similarity index 99%
rename from core/misc/dialog/off-canvas.es6.js
rename to core/misc/dialog/off-canvas/js/off-canvas.es6.js
index 86986c5109ad..dedd04907770 100644
--- a/core/misc/dialog/off-canvas.es6.js
+++ b/core/misc/dialog/off-canvas/js/off-canvas.es6.js
@@ -161,6 +161,7 @@
$(
'.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar',
).toggleClass('ui-dialog-empty-title', !settings.title);
+ $('.ui-dialog-off-canvas').attr('id', 'drupal-off-canvas-wrapper');
},
/**
diff --git a/core/misc/dialog/off-canvas.js b/core/misc/dialog/off-canvas/js/off-canvas.js
similarity index 98%
rename from core/misc/dialog/off-canvas.js
rename to core/misc/dialog/off-canvas/js/off-canvas.js
index 7ad8593275f1..99e5741949b1 100644
--- a/core/misc/dialog/off-canvas.js
+++ b/core/misc/dialog/off-canvas/js/off-canvas.js
@@ -70,6 +70,7 @@
settings
} = _ref4;
$('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
+ $('.ui-dialog-off-canvas').attr('id', 'drupal-off-canvas-wrapper');
},
handleDialogResize(event) {
diff --git a/core/misc/icons/545560/chevron-down.svg b/core/misc/icons/545560/chevron-down.svg
new file mode 100644
index 000000000000..488c0838f3f7
--- /dev/null
+++ b/core/misc/icons/545560/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 9"><path fill="none" stroke-width="1.5" d="M1 1l6 6 6-6" stroke="#545560"/></svg>
\ No newline at end of file
diff --git a/core/misc/icons/868686/magnifier.svg b/core/misc/icons/868686/magnifier.svg
new file mode 100644
index 000000000000..4e6f92b7cf2c
--- /dev/null
+++ b/core/misc/icons/868686/magnifier.svg
@@ -0,0 +1 @@
+<svg width="40" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z" fill="#868686"/></svg>
\ No newline at end of file
diff --git a/core/misc/icons/spinner.gif b/core/misc/icons/spinner.gif
new file mode 100644
index 000000000000..c325da5fe30d
--- /dev/null
+++ b/core/misc/icons/spinner.gif
@@ -0,0 +1,10 @@
+GIF89a(��ô�¦Ãõþÿüâîü»Îõ�@Ü�JÜTŽì�Fß h刬ïçëüQ€æ3kâVà\ŠêùÿÿC}è�Pà�6Ù`éFÛÓÞúJ„é}¤ïÀÓùéñúÞåûn™í6u塺ò–µó \á!ÿ NETSCAPE2.0���!ù�ÿ�,����(��@€` Ždižhj6„¢Š
+ѼôSE‘¸í›1
+¡´~©‰ÉD=ˆC@Å Š^Ó48Dh…Ã`K¢ú´Zr�QªÕƒIC’~¿–l2¶—l8;0 9ujlnD~J 4…vf>v,.~>]ž?B¢5PRš§&!�!ù��, �����J "Š˜3"æ©
+êÉ´gÑF0{À¢Õ¾:îÿ' Â�T¥,`²¨"˜£€3�E(
´ÂÑ «à–B´‹"*UÉ ¤×LÀ#@¯Ûé!�!ù� �, �����J #ŠÃ(¦(©‰´ÌÁDm1f±À tÈ¢„'Úåˆ#Z ÙB1ŸÐhJ u>C‰Æ, –Ï å%¢�È ‹³ÞÑ7\*¯Û!�!ù���, �����; Ž$à”ã# äÊŠ.ú¼èB1ï<}ŠžpHÜýˆÑè …Q³ùZ1*k@8Tf"'m£x4C�!ù���, �����B ŠØhž&ƒŽÙêFhv� n^«"œ›Ç/§HÀ¤óHžHÇ3`ô¨É#„rhý‰îÈ) xÆ„3}†��!ù��, �����J !ŠÃ8b¦™!éÈ©ˆ°xÈ›D&2» l•Š± c†dÈÔ3jzB‘5ªvGÔ©‹‚!»ÓŒE€„€6 |Á »aXŸ!�!ù��, �����@à#ŽÆ(¦©¤&Â>ÄS¼tý,¢ :^û@�e“‰„¢ ©l:ŸÐh”¨Ä¹¤)FbõXÍh�B3é^GÃ�!ù���, �����< Ž¤AŽÁ©*)¥ÎopÍj‹Ùî@ )H,Š£r68n ä�H*‡BøS ¨3ë 3•G!�!ù��, �����M !Š3ŠØy,£ŠÂ£²A%œ…A¼FÀŠAñãY ®â+¢l:aϨTŠHf3—bŽEÈIA ˆÂÍ ÛåTZöHVLþL#ü)�!ù���,
+�����G ŽAùHÀ4Œl[訴nð�3ï¢Àë�â§+y“#+w4•�I
+hrÐI!‘ FbÄ+©Ç3M òÉ‘�!ù��,
+�����_ Žc`dª
+&F0Ùš¢Á r>Æzï«“æ'p/ (¢à)}Ê^¬PõP‚á¯Aˆ¾‰à:ÂW\–5jxxNC„‰ö(
~)�\�'&!�!ù� �, �����` #Ž¤”h¬gŠ²Ó*—+¥ˆUÛ¤Á¡�ED†B¢824»¢€Ñ 0KÖëè9•R
ÚDÁ0` ‹…CÁX�! öè�O-ˆ]’2ªH LiQ(N"
,+!�!ù���, �����;`<Ê&žhúT1¤°(ŧ@^@7êåÀ 0Ç BrÉl:ŸCEN Z‘‚e}`™°÷H]†��!ù���, �����B Š˜“Œh*2GÁ©0PD‰ÙAAwߣˆ(:†¢" xt&̨T¥™Š ¦pàI ^ïQm‘åCŠQC�!ù��, �����I !ŠƒÑÄ5®c†ˆ¨°,1j4+Å’çŒß#,s;c`y\1›¢§â¨`¨ £–øj
[‘b˜Ž£¤ù'øÒ™!m°¬‡��!ù��, �����@à#Ždã $)¤Q@J"* #ïüˆ<‹^
+%,ȤÒh&›8pŠ‚½ÅÁ!Z—<a÷ãÙvÄ‘A�!ù���, �����< ŽÆ˜9*êx J G%+ÇÍÀÀ‚°©Æ¤rÉZ:ŸPh)¥~Á¬uy™=)“`3¹5M!�!ù��, �����N !ŽÎh”fʤé3ºbÄaÀAY¬Q… ÒY
++ŒV E€&k ”Z¯X© Ëeɸ+^VH!ö=S$¨Þ-‹ñF÷ª¤Gý �;
\ No newline at end of file
diff --git a/core/modules/ckeditor5/js/ckeditor5.es6.js b/core/modules/ckeditor5/js/ckeditor5.es6.js
index 5a33141260ce..cd76957c6d1e 100644
--- a/core/modules/ckeditor5/js/ckeditor5.es6.js
+++ b/core/modules/ckeditor5/js/ckeditor5.es6.js
@@ -321,7 +321,7 @@
// rules containing the #drupal-off-canvas selector.
[...document.styleSheets].forEach(processRules);
- const prefix = `#drupal-off-canvas [${fenceName}]`;
+ const prefix = `#drupal-off-canvas-wrapper [${fenceName}]`;
// Additional styles that need to be explicity added in addition to the
// prefixed versions of existing css in `existingCss`.
const addedCss = [
@@ -331,51 +331,8 @@
`${prefix} .ck.ck-content ol li {list-style-type: decimal}`,
`${prefix} .ck[contenteditable], ${prefix} .ck[contenteditable] * {-webkit-user-modify: read-write;-moz-user-modify: read-write;}`,
];
- // Styles to ensure block elements are displayed as such inside
- // off-canvas dialogs. These are all element types that are styled with
- // ` all: initial;` in the off-canvas reset that should default to being
- // displayed as blocks within CKEditor.
- // @see core/misc/dialog/off-canvas.reset.pcss.css
- const blockSelectors = [
- 'h1',
- 'h2',
- 'h3',
- 'h4',
- 'h5',
- 'h6',
- 'p',
- 'ol',
- 'ul',
- 'address',
- 'article',
- 'aside',
- 'blockquote',
- 'body',
- 'dd',
- 'div',
- 'dl',
- 'dt',
- 'fieldset',
- 'figcaption',
- 'figure',
- 'footer',
- 'form',
- 'header',
- 'hgroup',
- 'hr',
- 'html',
- 'legend',
- 'main',
- 'menu',
- 'pre',
- 'section',
- 'xmp',
- ]
- .map((blockElement) => `${prefix} .ck.ck-content ${blockElement}`)
- .join(', \n');
- const blockCss = `${blockSelectors} { display: block; }`;
-
- const prefixedCss = [...addedCss, blockCss].join('\n');
+
+ const prefixedCss = [...addedCss].join('\n');
// Create a new style tag with the prefixed styles added above.
const offCanvasCssStyle = document.createElement('style');
diff --git a/core/modules/ckeditor5/js/ckeditor5.js b/core/modules/ckeditor5/js/ckeditor5.js
index e4990cfb1016..aa25b3f40b8a 100644
--- a/core/modules/ckeditor5/js/ckeditor5.js
+++ b/core/modules/ckeditor5/js/ckeditor5.js
@@ -151,11 +151,9 @@
if (once('ckeditor5-off-canvas-reset', 'body').length) {
[...document.styleSheets].forEach(processRules);
- const prefix = `#drupal-off-canvas [${fenceName}]`;
+ const prefix = `#drupal-off-canvas-wrapper [${fenceName}]`;
const addedCss = [`${prefix} .ck.ck-content {display:block;min-height:5rem;}`, `${prefix} .ck.ck-content * {display:initial;background:initial;color:initial;padding:initial;}`, `${prefix} .ck.ck-content li {display:list-item}`, `${prefix} .ck.ck-content ol li {list-style-type: decimal}`, `${prefix} .ck[contenteditable], ${prefix} .ck[contenteditable] * {-webkit-user-modify: read-write;-moz-user-modify: read-write;}`];
- const blockSelectors = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'ol', 'ul', 'address', 'article', 'aside', 'blockquote', 'body', 'dd', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'header', 'hgroup', 'hr', 'html', 'legend', 'main', 'menu', 'pre', 'section', 'xmp'].map(blockElement => `${prefix} .ck.ck-content ${blockElement}`).join(', \n');
- const blockCss = `${blockSelectors} { display: block; }`;
- const prefixedCss = [...addedCss, blockCss].join('\n');
+ const prefixedCss = [...addedCss].join('\n');
const offCanvasCssStyle = document.createElement('style');
offCanvasCssStyle.textContent = prefixedCss;
offCanvasCssStyle.setAttribute('id', 'ckeditor5-off-canvas-reset');
diff --git a/core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5OffCanvasTest.php b/core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5OffCanvasTest.php
index b8e2f102ec45..8206021d76ea 100644
--- a/core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5OffCanvasTest.php
+++ b/core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5OffCanvasTest.php
@@ -33,11 +33,11 @@ public function testOffCanvasStyles() {
// The "Add Node" link triggers an off-canvas dialog with an add node form
// that includes CKEditor.
$page->clickLink('Add Node');
- $assert_session->waitForElementVisible('css', '#drupal-off-canvas');
+ $assert_session->waitForElementVisible('css', '#drupal-off-canvas-wrapper');
$assert_session->assertWaitOnAjaxRequest();
$styles = $assert_session->elementExists('css', 'style#ckeditor5-off-canvas-reset');
- $this->stringContains('#drupal-off-canvas [data-drupal-ck-style-fence]', $styles->getText());
+ $this->stringContains('#drupal-off-canvas-wrapper [data-drupal-ck-style-fence]', $styles->getText());
$assert_session->elementExists('css', '.ck');
diff --git a/core/modules/layout_builder/css/layout-builder.css b/core/modules/layout_builder/css/layout-builder.css
index cbd03bb31327..659e57ec7f53 100644
--- a/core/modules/layout_builder/css/layout-builder.css
+++ b/core/modules/layout_builder/css/layout-builder.css
@@ -1,3 +1,15 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Layout Builder UI styling.
+ */
+
.layout-builder {
padding: 1.5em 1.5em 0.5em;
border: 3px solid #2f91da;
@@ -13,41 +25,45 @@
background-color: #f7f7f7;
}
+[dir="ltr"] .layout-builder__link--add {
+ padding-left: 1.3em;
+}
+
+[dir="rtl"] .layout-builder__link--add {
+ padding-right: 1.3em;
+}
+
.layout-builder__link--add {
- padding-left: 1.3em; /* LTR */
color: #686868;
border-bottom: none;
- background: url(../../../misc/icons/787878/plus.svg) transparent center left / 1em no-repeat; /* LTR */
+ background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23787878' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e") transparent center left / 1em no-repeat /* LTR */
}
[dir="rtl"] .layout-builder__link--add {
- padding-right: 1.3em;
- padding-left: 0;
- background-position-x: right;
-}
+ background-position-x: right;
+ }
.layout-builder__link--add:hover,
-.layout-builder__link--add:active,
-.layout-builder__link--add:focus {
- color: #000;
- border-bottom-style: none;
-}
+ .layout-builder__link--add:active {
+ color: #000;
+ border-bottom-style: none;
+ }
.layout-builder__section {
- margin-bottom: 1.5em;
+ margin-bottom: 1.5em
}
.layout-builder__section .ui-sortable-helper {
- outline: 2px solid #f7f7f7;
- background-color: #fff;
-}
+ outline: 2px solid #f7f7f7;
+ background-color: #fff;
+ }
.layout-builder__section .ui-state-drop {
- margin: 20px;
- padding: 30px;
- outline: 2px dashed #fedb60;
- background-color: #ffd;
-}
+ margin: 1.25rem;
+ padding: 1.875rem;
+ outline: 2px dashed #fedb60;
+ background-color: #ffd;
+ }
.layout-builder__region {
outline: 2px dashed #2f91da;
@@ -59,53 +75,69 @@
background-color: #eff6fc;
}
+[dir="ltr"] .layout-builder__link--remove {
+ margin-left: -0.625rem;
+ margin-right: 0.375rem;
+}
+
+[dir="rtl"] .layout-builder__link--remove {
+ margin-right: -0.625rem;
+ margin-left: 0.375rem;
+}
+
.layout-builder__link--remove {
position: relative;
z-index: 2;
display: inline-block;
box-sizing: border-box;
- width: 26px;
- height: 26px;
- margin-right: 6px; /* LTR */
- margin-left: -10px; /* LTR */
+ width: 1.625rem;
+ height: 1.625rem;
padding: 0;
white-space: nowrap;
- text-indent: -9999px;
+ text-indent: -624.9375rem;
border: 1px solid #ccc;
- border-radius: 26px;
- background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;
- font-size: 1rem;
-}
-
-[dir="rtl"] .layout-builder__link--remove {
- margin-right: -10px;
- margin-left: 6px;
+ border-radius: 1.625rem;
+ background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e") #fff center center / 1rem 1rem no-repeat;
+ font-size: 1rem
}
.layout-builder__link--remove:hover {
- background-image: url(../../../misc/icons/787878/ex.svg);
-}
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
+ }
.layout-builder-block {
padding: 1.5em;
cursor: move;
- background-color: #fff;
+ background-color: #fff
}
.layout-builder-block [tabindex="-1"] {
- pointer-events: none;
+ pointer-events: none;
+ }
+
+.layout-builder--content-preview-disabled .layout-builder-block {
+ margin: 0;
+ border-bottom: 2px dashed #979797
}
+/*
+ * Layout Builder messages.
+ */
+
.layout-builder__message .messages {
background-repeat: no-repeat;
}
+
.layout-builder__message--defaults .messages {
- background-image: url("../../../misc/icons/73b355/globe.svg");
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M8,0.0309333333 C12.4181818,0.0309333333 16,3.5328 16,7.85315556 C16,12.1731556 12.4181818,15.6750222 8,15.6750222 C3.58181818,15.6750222 0,12.1731556 0,7.85315556 C0,3.5328 3.58181818,0.0309333333 8,0.0309333333 Z M12.7236364,4.69653333 C12.5116364,4.95288889 12.1872727,4.50133333 11.9,4.3552 C11.6130909,4.20871111 11.5505455,4.69653333 11.2138182,5.25795556 C10.8767273,5.81937778 10.6770909,5.56302222 10.3774545,5.25795556 C10.0781818,4.95288889 10.2650909,4.68444444 10.5774545,4.56248889 C10.8890909,4.44053333 10.9141818,4.39182222 10.6894545,4.14755556 C10.4650909,3.90364444 10.3650909,4.00106667 10.5898182,3.80586667 C10.8141818,3.61066667 10.9516364,3.6352 11.4385455,3.34222222 C11.9250909,3.04924444 11.3636364,2.7808 11.0389091,2.99484444 C10.7145455,3.20853333 10.3025455,2.56142222 10.2152727,2.01671111 C10.128,1.47164444 10.3901818,1.64622222 10.6894545,1.45066667 C10.7610909,1.40444444 10.7192727,1.29386667 10.6170909,1.15377778 C9.80363636,0.849066667 8.92181818,0.680177778 8,0.680177778 C7.08945455,0.680177778 6.21745455,0.8448 5.41236364,1.14275556 C5.26763636,1.33795556 5.23709091,1.49475556 5.53527273,1.4752 C6.284,1.42648889 6.29672727,1.26791111 6.55890909,1.6096 C6.82072727,1.95128889 6.696,2.65884444 6.22181818,2.46364444 C5.74763636,2.26844444 4.96145455,1.93884444 4.76181818,2.3296 C4.56181818,2.72 4.84909091,2.81742222 5.236,2.5856 C5.62254545,2.35377778 5.93490909,2.46364444 6.00945455,2.84195556 C6.08436364,3.22026667 6.05963636,3.95235556 5.63527273,3.81831111 C5.21090909,3.68391111 5.07345455,3.8912 5.32327273,4.09884444 C5.57272727,4.30613333 5.29818182,4.42844444 4.91127273,4.26951111 C4.52436364,4.11093333 4.53709091,4.59911111 4.01272727,4.57457778 C3.48872727,4.5504 3.45127273,5.11146667 3.28909091,5.31911111 C3.12690909,5.5264 3.10181818,6.19768889 3.06436364,6.35626667 C3.02690909,6.51484444 2.86472727,6.6368 2.77745455,6.13653333 C2.68981818,5.63626667 2.80218182,5.41653333 2.34072727,5.38026667 C1.87890909,5.34328889 1.41709091,6.29191111 1.65418182,6.49493333 C1.89127273,6.69795556 2.21563636,6.30755556 2.19090909,6.60017778 C2.16581818,6.89315556 2.00363636,8.22328889 2.49018182,8.28408889 C2.97709091,8.34524444 3.30145455,8.29653333 3.70072727,8.55288889 C4.1,8.80888889 4.84909091,8.83342222 5.38545455,9.66328889 C5.92218182,10.4928 6.54618182,10.5905778 7.14545455,10.7249778 C7.74436364,10.8590222 7.68181818,11.1886222 7.36981818,11.6277333 C7.05781818,12.0672 7.23272727,12.5184 6.18436364,12.8600889 C5.136,13.2017778 5.06109091,14.0561778 5.09854545,14.2147556 C5.10618182,14.2471111 5.092,14.3239111 5.06545455,14.4248889 C5.96472727,14.8103111 6.95709091,15.0257778 8,15.0257778 C10.0716364,15.0257778 11.944,14.1802667 13.2792727,12.8256 C13.1043636,12.2965333 12.9294545,11.6920889 12.9236364,11.3713778 C12.9109091,10.7249778 13.0981818,10.6759111 12.8610909,10.2488889 C12.624,9.82186667 12.1370909,10.2368 11.1887273,10.1144889 C10.2403636,9.99253333 10.3901818,9.40693333 9.72872727,8.6016 C9.06727273,7.79626667 10.34,7.13706667 10.6894545,6.30755556 C11.0389091,5.47768889 12.5614545,5.79484444 12.8985455,5.856 C13.2352727,5.91715556 13.1105455,5.69742222 13.8221818,5.18471111 C14.5334545,4.67235556 13.4727273,4.66026667 13.1854545,4.46506667 C12.8985455,4.26951111 12.936,4.44053333 12.7236364,4.69653333 Z M3.53854545,12.4088889 C3.47636364,11.8108444 3.02690909,11.4812444 2.50290909,10.3708444 C1.97854545,9.26044444 2.328,9.13848889 2.41527273,9.05315556 C2.50290909,8.96746667 1.82872727,8.61368889 1.85381818,7.75964444 C1.87890909,6.90524444 1.14254545,7.1008 1.27963636,6.19768889 C1.39745455,5.42328889 1.55018182,4.88426667 1.47381818,4.58417778 C0.957818182,5.56515556 0.664363636,6.67591111 0.664363636,7.85315556 C0.664363636,10.4938667 2.13272727,12.8046222 4.31236364,14.0494222 L4.27490909,13.8851556 C4.27490909,13.8851556 3.60109091,13.0065778 3.53854545,12.4088889 Z M8.48072727,1.69493333 C8.28109091,2.31715556 8.26109091,2.13333333 8.03127273,2.26844444 C7.78254545,2.41457778 7.65709091,2.51235556 7.44472727,2.80533333 C7.23272727,3.09831111 6.74581818,3.03715556 7.01381818,2.72 C7.28145455,2.40248889 7.18290909,1.54844444 7.03309091,1.31662222 C7.03309091,1.31662222 6.83345455,1.13351111 7.28254545,1.06026667 C7.732,0.987022222 8.68036364,1.07271111 8.48072727,1.69493333 Z'%3e%3c/path%3e%3c/svg%3e");
}
+
.layout-builder__message--overrides .messages {
- background-image: url("../../../misc/icons/73b355/location.svg");
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M5.4749999,0 C2.43935876,0 0,2.45021982 0,5.50153207 C0,8.5518841 5.4749999,16.0038459 5.4749999,16.0038459 C5.4749999,16.0038459 10.9499998,8.5518841 10.9499998,5.50153207 C10.9499998,2.45021982 8.51064105,0 5.4749999,0 Z M5.89615374,8.00192294 C4.48158136,8.00192294 3.36923071,6.89054251 3.36923071,5.4749999 C3.36923071,4.06042752 4.48061114,2.94807687 5.89615374,2.94807687 C7.31072613,2.94807687 8.42307678,4.0594573 8.42307678,5.4749999 C8.42307678,6.89051825 7.31075039,8.00192294 5.89615374,8.00192294 Z'%3e%3c/path%3e%3c/svg%3e");
}
+/* Label when "content preview" is disabled. */
+
.layout-builder-block__content-preview-placeholder-label {
margin: 0;
text-align: center;
@@ -113,62 +145,19 @@
line-height: 1.4;
}
-.layout-builder--content-preview-disabled .layout-builder-block {
- margin: 0;
- border-bottom: 2px dashed #979797;
-}
-
-#drupal-off-canvas .layout-selection li {
- display: block;
- padding-bottom: 1em;
-}
-
-#drupal-off-canvas .layout-selection li a {
- display: block;
- padding-top: 0.55em;
-}
-
-#drupal-off-canvas .inline-block-create-button {
- display: block;
- padding: 24px;
- padding-left: 44px;
- color: #eee;
- border-bottom: 1px solid #333;
- background: url(../../../misc/icons/bebebe/plus.svg) transparent 16px no-repeat;
- font-size: 16px;
-}
-
-#drupal-off-canvas .inline-block-create-button,
-#drupal-off-canvas .inline-block-list__item {
- margin: 0 -20px;
- background-color: #444;
-}
-
-#drupal-off-canvas .inline-block-create-button:hover,
-#drupal-off-canvas .inline-block-list__item:hover {
- background-color: #333;
-}
-
-#drupal-off-canvas .inline-block-list {
- margin-bottom: 15px;
-}
-
-#drupal-off-canvas .inline-block-list__item {
- display: block;
- padding: 15px 0 15px 25px;
-}
-
.layout-builder__add-section.is-layout-builder-highlighted {
- margin-bottom: calc(1.5em - 8px);
+ margin-bottom: calc(1.5em - 0.5rem);
outline: none;
}
+
.layout-builder__layout.is-layout-builder-highlighted,
.layout-builder-block.is-layout-builder-highlighted,
.layout-builder__add-block.is-layout-builder-highlighted {
position: relative;
z-index: 1;
- margin: -4px -2px;
+ margin: -0.25rem -2px;
}
+
.layout-builder__add-block.is-layout-builder-highlighted,
.layout-builder__add-section.is-layout-builder-highlighted,
.layout-builder__layout.is-layout-builder-highlighted:before,
@@ -177,22 +166,6 @@
border: 4px solid #000;
}
-/* Highlight the active block in the Move Block dialog. */
-#drupal-off-canvas .layout-builder-components-table__block-label--current {
- padding-left: 17px;
- border-left: solid 5px;
-}
-
-/**
- * @todo remove in https://www.drupal.org/project/drupal/issues/3042127
- * This rule ensures the row weight dropdowns in the Move Block dialog
- * maintain the background color of their container when they are hovered
- * over or are inside the active row.
- */
-#drupal-off-canvas .layout-builder-components-table__row .form-item {
- background-color: transparent;
-}
-
.layout-builder__region-label,
.layout-builder__section-label {
display: none;
@@ -217,6 +190,7 @@
* unsaved changes until "Save layout" is submitted.
* @todo create issue for todo.
*/
+
.layout-builder-components-table .tabledrag-changed-warning {
display: none !important;
}
diff --git a/core/modules/layout_builder/css/layout-builder.pcss.css b/core/modules/layout_builder/css/layout-builder.pcss.css
new file mode 100644
index 000000000000..f0d60e8ce998
--- /dev/null
+++ b/core/modules/layout_builder/css/layout-builder.pcss.css
@@ -0,0 +1,168 @@
+/**
+ * @file
+ * Layout Builder UI styling.
+ */
+
+.layout-builder {
+ padding: 1.5em 1.5em 0.5em;
+ border: 3px solid #2f91da;
+ background-color: #fff;
+}
+
+.layout-builder__add-section {
+ width: 100%;
+ margin-bottom: 1.5em;
+ padding: 1.5em 0;
+ text-align: center;
+ outline: 2px dashed #979797;
+ background-color: #f7f7f7;
+}
+
+.layout-builder__link--add {
+ padding-inline-start: 1.3em;
+ color: #686868;
+ border-bottom: none;
+ background: url(../../../misc/icons/787878/plus.svg) transparent center left / 1em no-repeat; /* LTR */
+
+ &:dir(rtl) {
+ background-position-x: right;
+ }
+
+ &:hover,
+ &:active {
+ color: #000;
+ border-bottom-style: none;
+ }
+}
+
+.layout-builder__section {
+ margin-bottom: 1.5em;
+
+ & .ui-sortable-helper {
+ outline: 2px solid #f7f7f7;
+ background-color: #fff;
+ }
+
+ & .ui-state-drop {
+ margin: 20px;
+ padding: 30px;
+ outline: 2px dashed #fedb60;
+ background-color: #ffd;
+ }
+}
+
+.layout-builder__region {
+ outline: 2px dashed #2f91da;
+}
+
+.layout-builder__add-block {
+ padding: 1.5em 0;
+ text-align: center;
+ background-color: #eff6fc;
+}
+
+.layout-builder__link--remove {
+ position: relative;
+ z-index: 2;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 26px;
+ height: 26px;
+ margin-inline: -10px 6px;
+ padding: 0;
+ white-space: nowrap;
+ text-indent: -9999px;
+ border: 1px solid #ccc;
+ border-radius: 26px;
+ background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;
+ font-size: 1rem;
+
+ &:hover {
+ background-image: url(../../../misc/icons/787878/ex.svg);
+ }
+}
+
+.layout-builder-block {
+ padding: 1.5em;
+ cursor: move;
+ background-color: #fff;
+
+ & [tabindex="-1"] {
+ pointer-events: none;
+ }
+
+ @nest .layout-builder--content-preview-disabled & {
+ margin: 0;
+ border-bottom: 2px dashed #979797;
+ }
+}
+
+/*
+ * Layout Builder messages.
+ */
+.layout-builder__message .messages {
+ background-repeat: no-repeat;
+}
+.layout-builder__message--defaults .messages {
+ background-image: url("../../../misc/icons/73b355/globe.svg");
+}
+.layout-builder__message--overrides .messages {
+ background-image: url("../../../misc/icons/73b355/location.svg");
+}
+
+/* Label when "content preview" is disabled. */
+.layout-builder-block__content-preview-placeholder-label {
+ margin: 0;
+ text-align: center;
+ font-size: 1.429em;
+ line-height: 1.4;
+}
+
+.layout-builder__add-section.is-layout-builder-highlighted {
+ margin-bottom: calc(1.5em - 8px);
+ outline: none;
+}
+
+.layout-builder__layout.is-layout-builder-highlighted,
+.layout-builder-block.is-layout-builder-highlighted,
+.layout-builder__add-block.is-layout-builder-highlighted {
+ position: relative;
+ z-index: 1;
+ margin: -4px -2px;
+}
+
+.layout-builder__add-block.is-layout-builder-highlighted,
+.layout-builder__add-section.is-layout-builder-highlighted,
+.layout-builder__layout.is-layout-builder-highlighted:before,
+.layout-builder__layout.is-layout-builder-highlighted,
+.layout-builder-block.is-layout-builder-highlighted {
+ border: 4px solid #000;
+}
+
+.layout-builder__region-label,
+.layout-builder__section-label {
+ display: none;
+}
+
+.layout-builder--move-blocks-active .layout-builder__region-label {
+ display: block;
+}
+
+.layout-builder--move-blocks-active .layout-builder__section-label {
+ display: inline;
+}
+
+.layout__region-info {
+ padding: 0.5em;
+ text-align: center;
+ border-bottom: 2px dashed #979797;
+}
+
+/**
+ * Remove "You have unsaved changes" warning because Layout Builder always has
+ * unsaved changes until "Save layout" is submitted.
+ * @todo create issue for todo.
+ */
+.layout-builder-components-table .tabledrag-changed-warning {
+ display: none !important;
+}
diff --git a/core/modules/layout_builder/css/off-canvas.css b/core/modules/layout_builder/css/off-canvas.css
new file mode 100644
index 000000000000..da8239ebcbba
--- /dev/null
+++ b/core/modules/layout_builder/css/off-canvas.css
@@ -0,0 +1,159 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Layout Builder styling for off-canvas UI.
+ */
+
+#drupal-off-canvas-wrapper .layout-selection {
+ margin: 0;
+ padding: 0;
+ list-style: none
+ }
+
+#drupal-off-canvas-wrapper .layout-selection li {
+ position: relative; /* Anchor throbber. */
+ padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit));
+ border-bottom: 1px solid var(--off-canvas-border-color)
+ }
+
+#drupal-off-canvas-wrapper .layout-selection li:last-child {
+ padding-bottom: 0;
+ border-bottom: none;
+ }
+
+#drupal-off-canvas-wrapper .layout-selection {
+
+ /* Horizontally align icon and text. */
+ }
+
+#drupal-off-canvas-wrapper .layout-selection a {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ grid-gap: 0.625rem;
+ padding: 0.625rem;
+ }
+
+#drupal-off-canvas-wrapper {
+
+ /*
+ * This is the styling of the SVG within the layout selection list.
+ */
+}
+
+#drupal-off-canvas-wrapper .layout-icon__region {
+ fill: var(--off-canvas-text-color);
+ stroke: transparent
+ }
+
+@media (forced-colors: active) {
+
+#drupal-off-canvas-wrapper .layout-icon__region {
+ fill: canvastext
+ }
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper .inline-block-create-button {
+ padding-left: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2)
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper .inline-block-create-button {
+ padding-right: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2)
+}
+
+#drupal-off-canvas-wrapper .inline-block-create-button {
+ --icon-size: 1rem;
+
+ position: relative; /* Anchor pseudo-element. */
+ display: block;
+ padding: 1.5rem; /* Room for icon */
+ border-bottom: 1px solid #333;
+ font-size: 1rem
+
+ /* Plus icon. */
+ }
+
+#drupal-off-canvas-wrapper .inline-block-create-button:before {
+ position: absolute;
+ top: 50%;
+ left: var(--off-canvas-padding);
+ width: var(--icon-size);
+ height: var(--icon-size);
+ content: "";
+ transform: translateY(-50%);
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-size: contain
+ }
+
+@media (forced-colors: active) {
+
+#drupal-off-canvas-wrapper .inline-block-create-button:before {
+ background: linktext;
+ -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e");
+ mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e");
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain
+ }
+ }
+
+#drupal-off-canvas-wrapper .inline-block-create-button,
+ #drupal-off-canvas-wrapper .inline-block-list__item {
+ margin: 0 calc(-1 * var(--off-canvas-padding));
+ color: var(--off-canvas-text-color)
+ }
+
+#drupal-off-canvas-wrapper .inline-block-create-button:hover, #drupal-off-canvas-wrapper .inline-block-list__item:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+ }
+
+#drupal-off-canvas-wrapper .inline-block-create-button:focus, #drupal-off-canvas-wrapper .inline-block-list__item:focus {
+ outline-offset: -4px; /* Prevent outline from being cut off. */
+ }
+
+#drupal-off-canvas-wrapper .inline-block-list {
+ margin: 0 0 calc(2 * var(--off-canvas-vertical-spacing-unit));
+ padding: 0;
+ list-style: none
+ }
+
+#drupal-off-canvas-wrapper .inline-block-list li {
+ position: relative; /* Anchor throbber. */
+ margin: 0;
+ padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit)) 0
+ }
+
+#drupal-off-canvas-wrapper .inline-block-list li:last-child {
+ padding-bottom: 0;
+ border-bottom: none;
+ }
+
+#drupal-off-canvas-wrapper {
+
+ /* This is the <a> tag. */
+}
+
+#drupal-off-canvas-wrapper .inline-block-list__item {
+ display: block;
+ flex-grow: 1;
+ padding: calc(2 * var(--off-canvas-vertical-spacing-unit)) var(--off-canvas-padding);
+ border-bottom: 1px solid var(--off-canvas-border-color);
+ }
+
+#drupal-off-canvas-wrapper {
+
+ /* Highlight the active block in the Move Block dialog. */
+}
+
+#drupal-off-canvas-wrapper .layout-builder-components-table__block-label--current {
+ padding-left: 1.0625rem;
+ border-left: solid 5px;
+ }
diff --git a/core/modules/layout_builder/css/off-canvas.pcss.css b/core/modules/layout_builder/css/off-canvas.pcss.css
new file mode 100644
index 000000000000..4673093b9524
--- /dev/null
+++ b/core/modules/layout_builder/css/off-canvas.pcss.css
@@ -0,0 +1,121 @@
+/**
+ * @file
+ * Layout Builder styling for off-canvas UI.
+ */
+
+#drupal-off-canvas-wrapper {
+ & .layout-selection {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ & li {
+ position: relative; /* Anchor throbber. */
+ padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit));
+ border-bottom: 1px solid var(--off-canvas-border-color);
+
+ &:last-child {
+ padding-bottom: 0;
+ border-bottom: none;
+ }
+ }
+
+ /* Horizontally align icon and text. */
+ & a {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 10px;
+ padding: 10px;
+ }
+ }
+
+ /*
+ * This is the styling of the SVG within the layout selection list.
+ */
+ & .layout-icon__region {
+ fill: var(--off-canvas-text-color);
+ stroke: transparent;
+
+ @media (forced-colors: active) {
+ fill: canvastext;
+ }
+ }
+
+ & .inline-block-create-button {
+ --icon-size: 16px;
+
+ position: relative; /* Anchor pseudo-element. */
+ display: block;
+ padding: 24px;
+ padding-inline-start: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2); /* Room for icon */
+ border-bottom: 1px solid #333;
+ font-size: 16px;
+
+ /* Plus icon. */
+ &:before {
+ position: absolute;
+ top: 50%;
+ left: var(--off-canvas-padding);
+ width: var(--icon-size);
+ height: var(--icon-size);
+ content: "";
+ transform: translateY(-50%);
+ background-image: url(../../../misc/icons/bebebe/plus.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+
+ @media (forced-colors: active) {
+ background: linktext;
+ mask-image: url(../../../misc/icons/bebebe/plus.svg);
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ }
+ }
+ }
+
+ & .inline-block-create-button,
+ & .inline-block-list__item {
+ margin: 0 calc(-1 * var(--off-canvas-padding));
+ color: var(--off-canvas-text-color);
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+ }
+
+ &:focus {
+ outline-offset: -4px; /* Prevent outline from being cut off. */
+ }
+ }
+
+ & .inline-block-list {
+ margin: 0 0 calc(2 * var(--off-canvas-vertical-spacing-unit));
+ padding: 0;
+ list-style: none;
+
+ & li {
+ position: relative; /* Anchor throbber. */
+ margin: 0;
+ padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit)) 0;
+
+ &:last-child {
+ padding-bottom: 0;
+ border-bottom: none;
+ }
+ }
+ }
+
+ /* This is the <a> tag. */
+ & .inline-block-list__item {
+ display: block;
+ flex-grow: 1;
+ padding: calc(2 * var(--off-canvas-vertical-spacing-unit)) var(--off-canvas-padding);
+ border-bottom: 1px solid var(--off-canvas-border-color);
+ }
+
+ /* Highlight the active block in the Move Block dialog. */
+ & .layout-builder-components-table__block-label--current {
+ padding-left: 17px;
+ border-left: solid 5px;
+ }
+}
diff --git a/core/modules/layout_builder/layout_builder.libraries.yml b/core/modules/layout_builder/layout_builder.libraries.yml
index 639c544db7e6..e0443d0f5e36 100644
--- a/core/modules/layout_builder/layout_builder.libraries.yml
+++ b/core/modules/layout_builder/layout_builder.libraries.yml
@@ -3,6 +3,7 @@ drupal.layout_builder:
css:
theme:
css/layout-builder.css: {}
+ css/off-canvas.css: {}
js:
js/layout-builder.js: {}
dependencies:
diff --git a/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php b/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php
index 709b4eb6af7f..6317b1a04d3f 100644
--- a/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php
+++ b/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php
@@ -54,6 +54,7 @@ public function testDialog($position) {
'drupalOffCanvasPosition' => $position ?: 'side',
'buttons' => [],
'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-' . ($position ?: 'side'),
+ 'classes' => ['ui-dialog-content' => 'drupal-off-canvas-reset'],
'width' => 300,
],
'effect' => 'fade',
diff --git a/core/modules/workspaces/css/workspaces.off-canvas.css b/core/modules/workspaces/css/workspaces.off-canvas.css
new file mode 100644
index 000000000000..8d1e652d2cbb
--- /dev/null
+++ b/core/modules/workspaces/css/workspaces.off-canvas.css
@@ -0,0 +1,246 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling for the Workspaces off-canvas user interface.
+ */
+
+#drupal-off-canvas-wrapper.workspaces-dialog {
+ padding-bottom: calc(var(--off-canvas-padding) / 2)
+}
+
+@media (min-width: 47.9375rem) {
+
+#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-content > div {
+ display: flex;
+ align-items: flex-end;
+ width: 100%;
+ height: 100%
+ }
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog {
+
+ /**
+ * The Workspace UI hides the titlebar, but we need to show and correctly
+ * position the close button that is nested within it.
+ */
+}
+
+#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar {
+ all: revert
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar:before {
+ content: none;
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-title {
+ display: none;
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
+ right: 1em
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
+ left: 1em
+}
+
+#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
+ top: 1em;
+ z-index: 1;
+ transform: none;
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace {
+ padding: 0 var(--off-canvas-padding)
+ }
+
+@media (min-width: 47.9375rem) {
+
+#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace {
+ display: flex;
+ flex-direction: column;
+ flex-basis: 12.5rem;
+ flex-grow: 2;
+ align-self: stretch;
+ order: 1;
+ padding: var(--off-canvas-padding) var(--off-canvas-padding) 0
+ }
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__title {
+ font-size: 0.8125rem;
+ font-weight: bold;
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label {
+ position: relative; /* Anchor icon pseudo-element. */
+ padding: 1.125rem 3.125rem 0;
+ color: #fff;
+ font-size: 1.125rem;
+ font-weight: bold;
+ line-height: 1.2
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
+ left: 0
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
+ right: 0
+}
+
+#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
+ position: absolute;
+ display: block;
+ width: 1.25rem;
+ height: 1.25rem;
+ content: "";
+ background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e %3cpath fill='%23F0A100' fill-rule='evenodd' d='M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z'/%3e%3c/svg%3e") center center no-repeat;
+ background-size: contain
+ }
+
+@media (min-width: 47.9375rem) {
+
+#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
+ width: 2.5rem;
+ height: 2.5rem
+ }
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog {
+
+ /* This is the "Manage workspace" link that appears when you're on a non-default workspace. */
+}
+
+#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__manage {
+ display: block;
+ font-size: 0.8125rem;
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog {
+
+ /* This is the link to "View all workspaces". */
+}
+
+#drupal-off-canvas-wrapper.workspaces-dialog .all-workspaces {
+ display: inline-block;
+ padding: var(--off-canvas-padding);
+ font-size: 0.875rem
+ }
+
+@media (min-width: 47.9375rem) {
+
+#drupal-off-canvas-wrapper.workspaces-dialog .all-workspaces {
+ grid-row: 1;
+ grid-column: 2;
+ justify-self: end;
+ padding: 0
+ }
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .workspaces > h3 {
+ margin-top: 0;
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .workspaces ul {
+ display: flex;
+ flex-direction: column;
+ grid-row: 2;
+ grid-column: 1 / -1;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ grid-gap: 2px
+ }
+
+@media (min-width: 47.9375rem) {
+
+#drupal-off-canvas-wrapper.workspaces-dialog .workspaces ul {
+ flex-direction: row
+ }
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .workspaces li {
+ flex: 1;
+ }
+
+@media (min-width: 47.9375rem) {
+
+#drupal-off-canvas-wrapper.workspaces-dialog .workspaces {
+ display: grid;
+ flex-grow: 8;
+ grid-template-columns: 1fr 1fr
+ }
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog {
+
+ /* This is the link to the workspace. */
+}
+
+[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
+ padding-left: 3.125rem
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
+ padding-right: 3.125rem
+}
+
+#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
+ position: relative;
+ display: block;
+ min-height: 4.6875rem;
+ padding-top: var(--off-canvas-padding);
+ color: var(--off-canvas-text-color);
+ outline-offset: -2px; /* Ensure focus outline doesn't overflow. */
+ background-color: var(--off-canvas-background-color-light);
+ font-size: 0.875rem;
+ font-weight: bold
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:hover,
+ #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:focus {
+ background-color: #666;
+ }
+
+[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
+ left: var(--off-canvas-padding)
+}
+
+[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
+ right: var(--off-canvas-padding)
+}
+
+#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
+ position: absolute;
+ display: block;
+ width: 1.25rem;
+ height: 1.25rem;
+ content: "";
+ background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e %3cpath fill='%23F0A100' fill-rule='evenodd' d='M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z'/%3e%3c/svg%3e") center center no-repeat;
+ background-size: 100% auto;
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace--default .active-workspace__label:before,
+ #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item--default:before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e %3cpath fill='%2381C071' fill-rule='evenodd' d='M19,0 L1,0 C0.449,0 0,0.448 0,1 L0,19 C0,19.552 0.45,20 1,20 L19,20 C19.552,20 20,19.55 20,19 L20,1 C20,0.44771525 19.5522847,3.38176876e-17 19,0 Z M17.001,2 C17.553,2 18.001,2.45 18.001,3 C18.001,3.55 17.551,3.999 17.001,3.999 C16.451,3.999 16.001,3.549 16.001,2.999 C16.001,2.44671525 16.4487153,1.999 17.001,1.999 L17.001,2 Z M13.001,2 C13.552,2 14.001,2.45 14.001,3 C14.001,3.55 13.551,3.999 13.001,3.999 C12.4487153,3.999 12.001,3.55128475 12.001,2.999 C12.001,2.44671525 12.4487153,1.999 13.001,1.999 L13.001,2 Z M9.001,2 C9.552,2 10.001,2.45 10.001,3 C10.001,3.55 9.551,3.999 9.001,3.999 C8.44871525,3.999 8.001,3.55128475 8.001,2.999 C8.001,2.44671525 8.44871525,1.999 9.001,1.999 L9.001,2 Z M18.001,18 L2,18 L2,6 L18.001,6 L18.001,18 Z M4.402,16 L7.598,16 C7.70460623,16.0005334 7.80701477,15.9584887 7.88249152,15.8831997 C7.95796827,15.8079107 8.00026785,15.7056072 8,15.599 L8,8.402 C8.00026565,8.29574025 7.95824022,8.19374159 7.88319685,8.11851062 C7.80815349,8.04327965 7.70626008,8.00099967 7.6,8.001 L4.396,8.001 C4.28956674,8.00073358 4.18741595,8.04289612 4.11215603,8.11815603 C4.03689612,8.19341595 3.99473358,8.29556674 3.995,8.402 L3.995,15.603 C3.999,15.823 4.177,16 4.401,16 L4.402,16 Z M10.402,12 L15.603,12 C15.7094333,12.0002664 15.811584,11.9581039 15.886844,11.882844 C15.9621039,11.807584 16.0042664,11.7054333 16.004,11.599 L16.004,8.398 C16.0042664,8.29156674 15.9621039,8.18941595 15.886844,8.11415603 C15.811584,8.03889612 15.7094333,7.99673358 15.603,7.997 L10.402,7.997 C10.2957402,7.99673435 10.1937416,8.03875978 10.1185106,8.11380315 C10.0432796,8.18884651 10.0009997,8.29073992 10.001,8.397 L10.001,11.6 C10.001,11.824 10.178,12 10.401,12 L10.402,12 Z M10.402,16 L15.603,16 C15.7094333,16.0002664 15.811584,15.9581039 15.886844,15.882844 C15.9621039,15.807584 16.0042664,15.7054333 16.004,15.599 L16.004,14.398 C16.0042664,14.2915667 15.9621039,14.189416 15.886844,14.114156 C15.811584,14.0388961 15.7094333,13.9967336 15.603,13.997 L10.402,13.997 C10.2957402,13.9967343 10.1937416,14.0387598 10.1185106,14.1138031 C10.0432796,14.1888465 10.0009997,14.2907399 10.001,14.397 L10.001,15.6 C10.001,15.824 10.178,16 10.401,16 L10.402,16 Z'/%3e%3c/svg%3e"); /* Green icon. */
+ }
+
+#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__actions .button {
+ margin: 0.625rem 0 0;
+ }
+
+@media (max-width: 47.9375rem) {
+
+#drupal-off-canvas-wrapper.workspaces-dialog {
+ height: 100% !important
+}
+ }
diff --git a/core/modules/workspaces/css/workspaces.off-canvas.pcss.css b/core/modules/workspaces/css/workspaces.off-canvas.pcss.css
new file mode 100644
index 000000000000..317c3f7247e3
--- /dev/null
+++ b/core/modules/workspaces/css/workspaces.off-canvas.pcss.css
@@ -0,0 +1,181 @@
+/**
+ * @file
+ * Styling for the Workspaces off-canvas user interface.
+ */
+
+@custom-media --workspace-layout-small (max-width: 767px);
+@custom-media --workspace-layout-large (min-width: 767px);
+
+#drupal-off-canvas-wrapper.workspaces-dialog {
+ padding-bottom: calc(var(--off-canvas-padding) / 2);
+
+ & .ui-dialog-content > div {
+ @media (--workspace-layout-large) {
+ display: flex;
+ align-items: flex-end;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ /**
+ * The Workspace UI hides the titlebar, but we need to show and correctly
+ * position the close button that is nested within it.
+ */
+ & .ui-dialog-titlebar {
+ all: revert;
+
+ &:before {
+ content: none;
+ }
+
+ & .ui-dialog-title {
+ display: none;
+ }
+
+ & .ui-dialog-titlebar-close {
+ inset-block-start: 1em;
+ inset-inline-end: 1em;
+ z-index: 1;
+ transform: none;
+ }
+ }
+
+ & .active-workspace {
+ padding: 0 var(--off-canvas-padding);
+
+ @media (--workspace-layout-large) {
+ display: flex;
+ flex-direction: column;
+ flex-basis: 200px;
+ flex-grow: 2;
+ align-self: stretch;
+ order: 1;
+ padding: var(--off-canvas-padding) var(--off-canvas-padding) 0;
+ }
+ }
+
+ & .active-workspace__title {
+ font-size: 13px;
+ font-weight: bold;
+ }
+
+ & .active-workspace__label {
+ position: relative; /* Anchor icon pseudo-element. */
+ padding: 18px 50px 0;
+ color: #fff;
+ font-size: 18px;
+ font-weight: bold;
+ line-height: 1.2;
+
+ &:before {
+ position: absolute;
+ inset-inline-start: 0;
+ display: block;
+ width: 20px;
+ height: 20px;
+ content: "";
+ background: url("../icons/f0a100/ws_icon.svg") center center no-repeat;
+ background-size: contain;
+
+ @media (--workspace-layout-large) {
+ width: 40px;
+ height: 40px;
+ }
+ }
+ }
+
+ /* This is the "Manage workspace" link that appears when you're on a non-default workspace. */
+ & .active-workspace__manage {
+ display: block;
+ font-size: 13px;
+ }
+
+ /* This is the link to "View all workspaces". */
+ & .all-workspaces {
+ display: inline-block;
+ padding: var(--off-canvas-padding);
+ font-size: 14px;
+
+ @media (--workspace-layout-large) {
+ grid-row: 1;
+ grid-column: 2;
+ justify-self: end;
+ padding: 0;
+ }
+ }
+
+ & .workspaces {
+ & > h3 {
+ margin-top: 0;
+ }
+
+ & ul {
+ display: flex;
+ flex-direction: column;
+ grid-row: 2;
+ grid-column: 1 / -1;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ gap: 2px;
+
+ @media (--workspace-layout-large) {
+ flex-direction: row;
+ }
+ }
+
+ & li {
+ flex: 1;
+ }
+
+ @media (--workspace-layout-large) {
+ display: grid;
+ flex-grow: 8;
+ grid-template-columns: 1fr 1fr;
+ }
+ }
+
+ /* This is the link to the workspace. */
+ & .workspaces__item {
+ position: relative;
+ display: block;
+ min-height: 75px;
+ padding-block-start: var(--off-canvas-padding);
+ padding-inline-start: 50px;
+ color: var(--off-canvas-text-color);
+ outline-offset: -2px; /* Ensure focus outline doesn't overflow. */
+ background-color: var(--off-canvas-background-color-light);
+ font-size: 14px;
+ font-weight: bold;
+
+ &:hover,
+ &:focus {
+ background-color: #666;
+ }
+
+ &:before {
+ position: absolute;
+ inset-inline-start: var(--off-canvas-padding);
+ display: block;
+ width: 20px;
+ height: 20px;
+ content: "";
+ background: url("../icons/f0a100/ws_icon.svg") center center no-repeat;
+ background-size: 100% auto;
+ }
+ }
+
+ & .active-workspace--default .active-workspace__label:before,
+ & .workspaces__item--default:before {
+ background-image: url("../icons/81c071/ws_icon.svg"); /* Green icon. */
+ }
+
+ & .active-workspace__actions .button {
+ margin: 10px 0 0;
+ }
+
+ @media (--workspace-layout-small) {
+ height: 100% !important;
+ }
+}
diff --git a/core/modules/workspaces/css/workspaces.overview.css b/core/modules/workspaces/css/workspaces.overview.css
index 0ac4d0deb5ef..a61a6bf5ed68 100644
--- a/core/modules/workspaces/css/workspaces.overview.css
+++ b/core/modules/workspaces/css/workspaces.overview.css
@@ -1,9 +1,17 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
/**
* @file
* Styling for the Workspaces overview table.
*/
/** @todo Move to Claro theme before Workspaces is marked stable. */
+
tr.active-workspace {
background-color: #ebeae4;
}
diff --git a/core/modules/workspaces/css/workspaces.overview.pcss.css b/core/modules/workspaces/css/workspaces.overview.pcss.css
new file mode 100644
index 000000000000..0ac4d0deb5ef
--- /dev/null
+++ b/core/modules/workspaces/css/workspaces.overview.pcss.css
@@ -0,0 +1,9 @@
+/**
+ * @file
+ * Styling for the Workspaces overview table.
+ */
+
+/** @todo Move to Claro theme before Workspaces is marked stable. */
+tr.active-workspace {
+ background-color: #ebeae4;
+}
diff --git a/core/modules/workspaces/css/workspaces.toolbar.css b/core/modules/workspaces/css/workspaces.toolbar.css
index fc727dbbe60c..85125f0eaf3e 100644
--- a/core/modules/workspaces/css/workspaces.toolbar.css
+++ b/core/modules/workspaces/css/workspaces.toolbar.css
@@ -1,36 +1,36 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
/**
* @file
* Styling for Workspaces module's toolbar tab.
*/
-/**
- * @todo Remove this after https://www.drupal.org/project/drupal/issues/2986056
- * has been solved.
- */
-.workspaces-dialog #drupal-off-canvas * {
- background: initial;
-}
-.workspaces-dialog #drupal-off-canvas {
- background: #444;
-}
+/* Toolbar tab */
-/* Tab appearance. */
.toolbar .toolbar-bar .workspaces-toolbar-tab {
color: #000;
background-color: #e09600;
}
+
.toolbar .toolbar-bar .workspaces-toolbar-tab--is-default {
background-color: #81c071;
}
-.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
- float: right; /* LTR */
+
+[dir="ltr"] .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
+ float: right;
}
+
[dir="rtl"] .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
float: left;
}
-@media (min-width: 16.5em) {
- .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
+@media (min-width: 16.5rem) {
+ [dir="ltr"] .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
float: right;
}
[dir="rtl"] .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
@@ -38,259 +38,64 @@
}
}
-.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
- width: 100%;
- margin: 0;
+/* Link within the toolbar tab. */
+
+[dir="ltr"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
text-align: left;
- color: inherit;
}
+
[dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
text-align: right;
}
-.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
- width: auto;
- text-align: initial;
-}
-
-.toolbar .toolbar-icon-workspace:before {
- background-image: url("../icons/000000/workspaces.svg");
-}
-
-/* Off canvas dialog */
-.workspaces-dialog.ui-dialog-off-canvas a:focus {
- outline: none;
-}
-
-.workspaces-dialog.ui-dialog-off-canvas #drupal-off-canvas,
-.workspaces-dialog.ui-dialog-off-canvas {
- padding: 0;
- background: #333;
-}
-
-.workspaces-dialog.ui-widget.ui-widget-content {
- height: 100% !important;
- border: 0;
- line-height: 20px;
-}
-
-.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- visibility: hidden;
- padding: 0;
- border: 0;
- line-height: 0;
-}
-
-.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- top: 1em;
- right: 0.5em;
-}
-.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar .ui-button {
- z-index: 101;
- visibility: visible;
-}
-
-#drupal-off-canvas .active-workspace {
- position: relative;
+.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
width: 100%;
- min-height: 70px;
- padding: 20px;
- background-color: #444;
-}
-
-#drupal-off-canvas .active-workspace__title {
- font-size: 0.8125rem;
- font-weight: bold;
-}
-
-#drupal-off-canvas .active-workspace__label {
- padding: 0.9em 3.2rem 1em;
-}
-
-#drupal-off-canvas .active-workspace__label span {
- color: #fff;
- font-size: 1.285em;
- font-weight: bold;
-}
-
-#drupal-off-canvas .active-workspace__manage {
- display: block;
- white-space: nowrap;
- outline-color: currentColor;
- font-size: 0.9286em;
-}
-
-#drupal-off-canvas .active-workspace__button {
- padding: 5px 22px;
- color: #fff;
- border: solid 1px #1e5c90;
- border-radius: 20px;
- background-image: linear-gradient(to bottom, #007bc6, #0071b8);
- text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
- font-weight: bold;
-}
-
-#drupal-off-canvas .active-workspace__button:hover {
- text-decoration: none;
-}
-
-#drupal-off-canvas .all-workspaces {
- display: inline-block;
- padding: 20px;
-}
-
-#drupal-off-canvas .workspaces__list h3 {
- padding-left: 20px;
- font-size: 0.8125rem;
-}
-
-[dir="rtl"] #drupal-off-canvas .workspaces__list h3 {
- padding: 0 20px 0;
-}
-
-#drupal-off-canvas .workspaces ul {
- display: block;
-}
-
-#drupal-off-canvas .workspaces li {
- flex: 1;
- margin-bottom: 1px;
-}
-
-#drupal-off-canvas .workspaces__item {
- position: relative;
- display: block;
- box-sizing: border-box;
- height: 73px;
- margin-right: 1px;
- padding: 20px 0 0 50px;
- color: #fff;
- background-color: #555;
- font-size: 0.929em;
- font-weight: bold;
-}
-
-[dir=rtl] #drupal-off-canvas .workspaces__item {
- padding: 20px 50px 0 0;
-}
-
-#drupal-off-canvas .workspaces__item:hover,
-#drupal-off-canvas .workspaces__item:focus {
- background-color: #666;
-}
-
-#drupal-off-canvas .active-workspace__label:before,
-#drupal-off-canvas .workspaces__item:before {
- position: absolute;
- left: 20px;
- display: block;
- width: 20px;
- height: 20px;
- content: "";
- background: url("../icons/f0a100/ws_icon.svg") center center no-repeat;
- background-size: 100% auto;
-}
-
-#drupal-off-canvas .active-workspace--default .active-workspace__label:before,
-#drupal-off-canvas .workspaces__item--default:before {
- background-image: url("../icons/81c071/ws_icon.svg");
+ margin: 0;
+ color: inherit
}
-[dir=rtl] #drupal-off-canvas .active-workspace__label:before,
-[dir=rtl] #drupal-off-canvas .workspaces__item:before {
- right: 20px;
- left: initial;
+.toolbar-oriented .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
+ width: auto;
+ text-align: initial
}
-#drupal-off-canvas .active-workspace__label:before {
- left: 20px;
- width: 40px;
- height: 40px;
+.toolbar .toolbar-icon-workspace:before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e %3cpath d='M14,12 L16,12 L16,0 L4,0 L4,2 L14,2 L14,12 Z M0,4 L12,4 L12,16 L0,16 L0,4 Z'/%3e%3c/svg%3e");
}
-@media all and (max-width: 766px) {
+@media all and (max-width: 47.875rem) {
.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
width: auto;
max-width: 8em;
}
- .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
- overflow: hidden;
+ [dir="ltr"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
+ padding-left: 2.75em;
padding-right: 1.3333em;
- padding-left: 2.75em; /* LTR */
- white-space: nowrap;
- text-indent: 0;
- text-overflow: ellipsis;
}
- [dir=rtl] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
+
+ [dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
padding-right: 2.75em;
padding-left: 1.3333em;
}
- .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
- left: 0.6667em; /* LTR */
- width: 20px;
- background-size: 100% auto;
- }
- [dir=rtl] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
- right: 0.6667em;
- left: auto;
- }
-}
-
-@media all and (min-width: 767px) {
- .workspaces-dialog.ui-widget.ui-widget-content {
- height: 161px !important;
- }
-
- /* The extra div is added by Drupal.theme.ajaxWrapperMultipleRootElements
- * because we are inserting multiple root elements. */
- .workspaces-dialog #drupal-off-canvas > div {
- display: flex;
- flex-direction: row-reverse;
- align-items: flex-end;
- }
-
- #drupal-off-canvas .active-workspace {
- flex-basis: 200px;
- flex-grow: 2;
- box-sizing: content-box;
- min-height: 140px;
- padding: 20px 40px 0;
- }
-
- #drupal-off-canvas .active-workspace__label:before {
- left: 40px;
- }
-
- [dir=rtl] #drupal-off-canvas .active-workspace__label:before {
- right: 40px;
- left: initial;
- }
-
- #drupal-off-canvas .workspaces {
- position: relative;
- flex-grow: 8;
- }
-
- #drupal-off-canvas .all-workspaces {
- position: absolute;
- top: 9px;
- right: 20px;
- padding: 0;
+ .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
+ overflow: hidden;
+ white-space: nowrap;
+ text-indent: 0;
+ text-overflow: ellipsis;
}
- [dir=rtl] #drupal-off-canvas .all-workspaces {
- right: initial;
- left: 20px;
+ [dir="ltr"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
+ left: 0.6667em;
}
- #drupal-off-canvas .workspaces ul {
- display: flex;
- flex-direction: row;
+ [dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
+ right: 0.6667em;
}
- #drupal-off-canvas .workspaces li {
- margin-bottom: 0;
+ .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
+ width: 1.25rem;
+ background-size: 100% auto;
}
}
diff --git a/core/modules/workspaces/css/workspaces.toolbar.pcss.css b/core/modules/workspaces/css/workspaces.toolbar.pcss.css
new file mode 100644
index 000000000000..f5da3ad75bc3
--- /dev/null
+++ b/core/modules/workspaces/css/workspaces.toolbar.pcss.css
@@ -0,0 +1,60 @@
+/**
+ * @file
+ * Styling for Workspaces module's toolbar tab.
+ */
+
+/* Toolbar tab */
+.toolbar .toolbar-bar .workspaces-toolbar-tab {
+ color: #000;
+ background-color: #e09600;
+}
+.toolbar .toolbar-bar .workspaces-toolbar-tab--is-default {
+ background-color: #81c071;
+}
+.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
+ float: inline-end;
+}
+
+@media (min-width: 264px) {
+ .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
+ float: inline-end;
+ }
+}
+
+/* Link within the toolbar tab. */
+.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
+ width: 100%;
+ margin: 0;
+ text-align: start;
+ color: inherit;
+
+ @nest .toolbar-oriented & {
+ width: auto;
+ text-align: initial;
+ }
+}
+
+.toolbar .toolbar-icon-workspace:before {
+ background-image: url("../icons/000000/workspaces.svg");
+}
+
+@media all and (max-width: 766px) {
+ .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
+ width: auto;
+ max-width: 8em;
+ }
+
+ .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
+ overflow: hidden;
+ padding-inline: 2.75em 1.3333em;
+ white-space: nowrap;
+ text-indent: 0;
+ text-overflow: ellipsis;
+ }
+
+ .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
+ inset-inline-start: 0.6667em;
+ width: 20px;
+ background-size: 100% auto;
+ }
+}
diff --git a/core/modules/workspaces/src/WorkspaceListBuilder.php b/core/modules/workspaces/src/WorkspaceListBuilder.php
index a6aa53a4dad6..0ed2d9f130e7 100644
--- a/core/modules/workspaces/src/WorkspaceListBuilder.php
+++ b/core/modules/workspaces/src/WorkspaceListBuilder.php
@@ -308,7 +308,7 @@ protected function offCanvasRender(array &$build) {
['query' => ['destination' => $active_workspace->toUrl('collection')->toString()]]
),
'#attributes' => [
- 'class' => ['button', 'active-workspace__button'],
+ 'class' => ['button', 'button--primary', 'active-workspace__button'],
],
];
}
@@ -326,7 +326,7 @@ protected function offCanvasRender(array &$build) {
]
),
'#attributes' => [
- 'class' => ['button', 'active-workspace__button'],
+ 'class' => ['button', 'button--primary', 'active-workspace__button'],
],
];
}
diff --git a/core/modules/workspaces/workspaces.libraries.yml b/core/modules/workspaces/workspaces.libraries.yml
index 9376653f0cfe..8e819b233f23 100644
--- a/core/modules/workspaces/workspaces.libraries.yml
+++ b/core/modules/workspaces/workspaces.libraries.yml
@@ -2,6 +2,7 @@ drupal.workspaces.toolbar:
version: VERSION
css:
theme:
+ css/workspaces.off-canvas.css: {}
css/workspaces.toolbar.css: {}
drupal.workspaces.overview:
version: VERSION
diff --git a/core/tests/Drupal/KernelTests/Core/Theme/Stable9LibraryOverrideTest.php b/core/tests/Drupal/KernelTests/Core/Theme/Stable9LibraryOverrideTest.php
index ccccf3dac28c..855fd0347ff9 100644
--- a/core/tests/Drupal/KernelTests/Core/Theme/Stable9LibraryOverrideTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Theme/Stable9LibraryOverrideTest.php
@@ -15,6 +15,8 @@ class Stable9LibraryOverrideTest extends StableLibraryOverrideTestBase {
* @var string[]
*/
protected $librariesToSkip = [
+ 'core/drupal.dialog.off_canvas',
+ 'layout_builder/drupal.layout_builder',
'views/views.responsive-grid',
];
diff --git a/core/tests/Drupal/KernelTests/Core/Theme/StableLibraryOverrideTest.php b/core/tests/Drupal/KernelTests/Core/Theme/StableLibraryOverrideTest.php
index 167b9eb2877e..30c9c27ce4c6 100644
--- a/core/tests/Drupal/KernelTests/Core/Theme/StableLibraryOverrideTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Theme/StableLibraryOverrideTest.php
@@ -43,6 +43,8 @@ class StableLibraryOverrideTest extends StableLibraryOverrideTestBase {
* @var string[]
*/
protected $librariesToSkip = [
+ 'core/drupal.dialog.off_canvas',
+ 'layout_builder/drupal.layout_builder',
'views/views.responsive-grid',
];
diff --git a/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php b/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php
index eca0c58f8a99..a53e10f1ecc5 100644
--- a/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php
+++ b/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php
@@ -34,6 +34,7 @@ public function testRender($position) {
'drupalAutoButtons' => FALSE,
'buttons' => [],
'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-' . $position,
+ 'classes' => ['ui-dialog-content' => 'drupal-off-canvas-reset'],
'width' => 300,
'drupalOffCanvasPosition' => $position,
],
diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml
index bdf31c0e7c3d..60213d54059f 100644
--- a/core/themes/claro/claro.info.yml
+++ b/core/themes/claro/claro.info.yml
@@ -37,11 +37,6 @@ libraries-override:
theme:
css/system.admin.css: false
- core/drupal.dialog.off_canvas:
- css:
- base:
- misc/dialog/off-canvas.theme.css: css/base/off-canvas.theme.css
-
core/drupal.dropbutton:
css:
component:
diff --git a/core/themes/claro/css/base/off-canvas.theme.css b/core/themes/claro/css/base/off-canvas.theme.css
deleted file mode 100644
index 923374242928..000000000000
--- a/core/themes/claro/css/base/off-canvas.theme.css
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
-/**
- * @file
- * Styling for the off-canvas ui dialog.
- *
- * Contains overrides for jQuery UI dialog.
- */
-
-/* Style the dialog-off-canvas container. */
-
-.ui-dialog.ui-dialog-off-canvas {
- /* Layer the dialog just under the toolbar. */
- z-index: var(--jui-dialog-off-canvas-z-index);
- padding: 0;
- color: #ddd;
- border-radius: 0;
- background: #444;
- box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
-}
-
-.ui-widget.ui-dialog.ui-dialog-off-canvas {
- border: 1px solid transparent;
-}
-
-/* Style the off-canvas dialog header. */
-
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- padding: var(--space-s) var(--jui-dialog-off-canvas-close-button-reserved-space) var(--space-s) var(--space-m); /* LTR */
- border: 0;
- border-bottom: 1px solid #000;
- border-radius: 0;
- background: #2d2d2d;
- line-height: var(--line-height);
-}
-
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- padding-right: var(--space-m);
- padding-left: var(--jui-dialog-off-canvas-close-button-reserved-space);
-}
-
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- /* Push the text away from the icon. */
- padding-left: calc(var(--space-m) + var(--space-s)); /* LTR */
- /* Ensure that long titles are not truncated. */
- white-space: normal;
- background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
- background-repeat: no-repeat;
- background-position: 0 50%; /* LTR */
- background-size: 1.25rem 1.25rem;
- font-size: var(--font-size-base);
-}
-
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- padding-right: calc(var(--space-m) + var(--space-s));
- padding-left: 0;
- background-position: 100% 50%;
-}
-
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- margin-right: var(--space-m);
- margin-left: var(--space-m);
-}
-
-/* Override default styling from jQuery UI. */
-
-#drupal-off-canvas .ui-state-default,
-#drupal-off-canvas .ui-widget-content .ui-state-default,
-#drupal-off-canvas .ui-widget-header .ui-state-default {
- color: #333;
- border: 0;
- font-size: var(--font-size-s);
- font-weight: normal;
-}
-
-#drupal-off-canvas .ui-widget-content a {
- color: var(--color-blue-200);
-}
-
-#drupal-off-canvas .form-actions {
- display: block;
-}
diff --git a/core/themes/claro/css/base/off-canvas.theme.pcss.css b/core/themes/claro/css/base/off-canvas.theme.pcss.css
deleted file mode 100644
index d50dfda931af..000000000000
--- a/core/themes/claro/css/base/off-canvas.theme.pcss.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * @file
- * Styling for the off-canvas ui dialog.
- *
- * Contains overrides for jQuery UI dialog.
- */
-
-/* Style the dialog-off-canvas container. */
-.ui-dialog.ui-dialog-off-canvas {
- /* Layer the dialog just under the toolbar. */
- z-index: var(--jui-dialog-off-canvas-z-index);
- padding: 0;
- color: #ddd;
- border-radius: 0;
- background: #444;
- box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
-}
-.ui-widget.ui-dialog.ui-dialog-off-canvas {
- border: 1px solid transparent;
-}
-
-/* Style the off-canvas dialog header. */
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- padding: var(--space-s) var(--jui-dialog-off-canvas-close-button-reserved-space) var(--space-s) var(--space-m); /* LTR */
- border: 0;
- border-bottom: 1px solid #000;
- border-radius: 0;
- background: #2d2d2d;
- line-height: var(--line-height);
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- padding-right: var(--space-m);
- padding-left: var(--jui-dialog-off-canvas-close-button-reserved-space);
-}
-
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- /* Push the text away from the icon. */
- padding-left: calc(var(--space-m) + var(--space-s)); /* LTR */
- /* Ensure that long titles are not truncated. */
- white-space: normal;
- background: transparent url(../../../../misc/icons/ffffff/pencil.svg);
- background-repeat: no-repeat;
- background-position: 0 50%; /* LTR */
- background-size: 1.25rem 1.25rem;
- font-size: var(--font-size-base);
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- padding-right: calc(var(--space-m) + var(--space-s));
- padding-left: 0;
- background-position: 100% 50%;
-}
-
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- margin-right: var(--space-m);
- margin-left: var(--space-m);
-}
-
-/* Override default styling from jQuery UI. */
-#drupal-off-canvas .ui-state-default,
-#drupal-off-canvas .ui-widget-content .ui-state-default,
-#drupal-off-canvas .ui-widget-header .ui-state-default {
- color: #333;
- border: 0;
- font-size: var(--font-size-s);
- font-weight: normal;
-}
-#drupal-off-canvas .ui-widget-content a {
- color: var(--color-blue-200);
-}
-
-#drupal-off-canvas .form-actions {
- display: block;
-}
diff --git a/core/themes/olivero/css/components/off-canvas.css b/core/themes/olivero/css/components/off-canvas.css
deleted file mode 100644
index 06f930538412..000000000000
--- a/core/themes/olivero/css/components/off-canvas.css
+++ /dev/null
@@ -1,136 +0,0 @@
-/*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
-/**
- * @file
- * Settings tray specific styles.
- */
-
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] #drupal-off-canvas .form-type-boolean {
- margin-left: 0
-}
-
-[dir="rtl"] #drupal-off-canvas .form-type-boolean {
- margin-right: 0
-}
-
-#drupal-off-canvas .form-type-boolean {
- line-height: var(--line-height-s)
- }
-
-#drupal-off-canvas .form-type-boolean input[type="checkbox"],
- #drupal-off-canvas .form-type-boolean input[type="radio"] {
- float: none;
- width: var(--sp0-75);
- height: var(--sp0-75);
- transform: none;
- vertical-align: middle;
- }
-
-[dir="ltr"] #drupal-off-canvas .form-type-boolean .form-item__description {
- margin-left: 0
-}
-
-[dir="rtl"] #drupal-off-canvas .form-type-boolean .form-item__description {
- margin-right: 0
-}
-
-#drupal-off-canvas {
-
- /* Necessary for Safari. */
-}
-
-#drupal-off-canvas .olivero-details {
- border-top: solid 1px rgba(255, 255, 255, 0.25);
- border-bottom: solid 1px rgba(255, 255, 255, 0.25);
- box-shadow: none;
- }
-
-#drupal-off-canvas .olivero-details__wrapper {
- padding: 1.25rem;
- }
-
-#drupal-off-canvas {
-
- /* Necessary for Safari. */
-}
-
-#drupal-off-canvas .olivero-details__summary {
- display: block;
- list-style: initial
- }
-
-#drupal-off-canvas .olivero-details__summary:focus {
- outline: solid 1px rgba(255, 255, 255, 0.25);
- }
-
-#drupal-off-canvas .olivero-details__summary:before {
- content: none;
- }
-
-#drupal-off-canvas .olivero-details__summary::-webkit-details-marker {
- display: inline-block;
- }
-
-#drupal-off-canvas .olivero-details__summary {
-
- /* Necessary for IE11. */
- }
-
-#drupal-off-canvas .olivero-details__summary .details-title:before {
- content: none;
- }
-
-#drupal-off-canvas .olivero-details__summary {
-
- /* Necessary for Firefox. */
- }
-
-@supports (list-style-type: disclosure-closed) {
-
-#drupal-off-canvas .olivero-details__summary {
- display: list-item;
- list-style-position: inside;
- list-style-type: disclosure-closed
- }
- }
-
-#drupal-off-canvas {
-
- /* Necessary for Firefox. */
-}
-
-@supports (list-style-type: disclosure-open) {
-
-#drupal-off-canvas .olivero-details[open] .olivero-details__summary {
- list-style-type: disclosure-open
- }
- }
-
-#drupal-off-canvas {
-
- /* Necessary for Safari. */
-}
-
-#drupal-off-canvas div {
- display: block;
- color: #ddd;
- font-size: 0.875rem;
- }
diff --git a/core/themes/olivero/css/components/off-canvas.pcss.css b/core/themes/olivero/css/components/off-canvas.pcss.css
deleted file mode 100644
index 5d67cd381469..000000000000
--- a/core/themes/olivero/css/components/off-canvas.pcss.css
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * @file
- * Settings tray specific styles.
- */
-
-@import "../base/media-queries.pcss.css";
-
-#drupal-off-canvas {
- & .form-type-boolean {
- margin-inline-start: 0;
- line-height: var(--line-height-s);
-
- & input[type="checkbox"],
- & input[type="radio"] {
- float: none;
- width: var(--sp0-75);
- height: var(--sp0-75);
- transform: none;
- vertical-align: middle;
- }
-
- & .form-item__description {
- margin-inline-start: 0;
- }
- }
-
- /* Necessary for Safari. */
- & .olivero-details {
- border-top: solid 1px rgba(255, 255, 255, 0.25);
- border-bottom: solid 1px rgba(255, 255, 255, 0.25);
- box-shadow: none;
- }
-
- & .olivero-details__wrapper {
- padding: 20px;
- }
-
- /* Necessary for Safari. */
- & .olivero-details__summary {
- display: block;
- list-style: initial;
-
- &:focus {
- outline: solid 1px rgba(255, 255, 255, 0.25);
- }
-
- &:before {
- content: none;
- }
-
- &::-webkit-details-marker {
- display: inline-block;
- }
-
- /* Necessary for IE11. */
- & .details-title:before {
- content: none;
- }
-
- /* Necessary for Firefox. */
- @supports (list-style-type: disclosure-closed) {
- display: list-item;
- list-style-position: inside;
- list-style-type: disclosure-closed;
- }
- }
-
- /* Necessary for Firefox. */
- & .olivero-details[open] .olivero-details__summary {
- @supports (list-style-type: disclosure-open) {
- list-style-type: disclosure-open;
- }
- }
-
- /* Necessary for Safari. */
- & div {
- display: block;
- color: #ddd;
- font-size: 14px;
- }
-}
diff --git a/core/themes/olivero/olivero.info.yml b/core/themes/olivero/olivero.info.yml
index 0143841641bb..0eb7d15af8ee 100644
--- a/core/themes/olivero/olivero.info.yml
+++ b/core/themes/olivero/olivero.info.yml
@@ -63,8 +63,6 @@ libraries-extend:
- olivero/details
core/drupal.dialog:
- olivero/drupal.dialog
- core/drupal.dialog.off_canvas:
- - olivero/dialog.off_canvas
core/drupal.progress:
- olivero/progress
layout_discovery/onecol:
diff --git a/core/themes/olivero/olivero.libraries.yml b/core/themes/olivero/olivero.libraries.yml
index 68a1fc056e2b..6edc6f23c1e3 100644
--- a/core/themes/olivero/olivero.libraries.yml
+++ b/core/themes/olivero/olivero.libraries.yml
@@ -110,12 +110,6 @@ details:
theme:
css/components/details.css: {}
-dialog.off_canvas:
- version: VERSION
- css:
- component:
- css/components/off-canvas.css: {}
-
dropbutton:
version: VERSION
css:
diff --git a/core/themes/stable/css/core/dialog/off-canvas.base.css b/core/themes/stable/css/core/dialog/off-canvas.base.css
deleted file mode 100644
index 3a8c6df9911b..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.base.css
+++ /dev/null
@@ -1,399 +0,0 @@
-/*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
-/**
- * @file
- * Set base styles for the off-canvas dialog.
- */
-
-/* Set some global attributes. */
-
-#drupal-off-canvas {
- color: #ddd;
- background: #444;
-}
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-
-#drupal-off-canvas span,
- #drupal-off-canvas applet,
- #drupal-off-canvas object,
- #drupal-off-canvas iframe,
- #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 p,
- #drupal-off-canvas blockquote,
- #drupal-off-canvas pre,
- #drupal-off-canvas a,
- #drupal-off-canvas abbr,
- #drupal-off-canvas acronym,
- #drupal-off-canvas address,
- #drupal-off-canvas big,
- #drupal-off-canvas button,
- #drupal-off-canvas cite,
- #drupal-off-canvas code,
- #drupal-off-canvas del,
- #drupal-off-canvas dfn,
- #drupal-off-canvas em,
- #drupal-off-canvas img,
- #drupal-off-canvas ins,
- #drupal-off-canvas kbd,
- #drupal-off-canvas q,
- #drupal-off-canvas s,
- #drupal-off-canvas samp,
- #drupal-off-canvas small,
- #drupal-off-canvas strike,
- #drupal-off-canvas strong,
- #drupal-off-canvas sub,
- #drupal-off-canvas sup,
- #drupal-off-canvas tt,
- #drupal-off-canvas var,
- #drupal-off-canvas b,
- #drupal-off-canvas u,
- #drupal-off-canvas i,
- #drupal-off-canvas center,
- #drupal-off-canvas dl,
- #drupal-off-canvas dt,
- #drupal-off-canvas dd,
- #drupal-off-canvas ol,
- #drupal-off-canvas ul,
- #drupal-off-canvas li,
- #drupal-off-canvas fieldset,
- #drupal-off-canvas form,
- #drupal-off-canvas label,
- #drupal-off-canvas legend,
- #drupal-off-canvas table,
- #drupal-off-canvas caption,
- #drupal-off-canvas tbody,
- #drupal-off-canvas tfoot,
- #drupal-off-canvas thead,
- #drupal-off-canvas tr,
- #drupal-off-canvas th,
- #drupal-off-canvas td,
- #drupal-off-canvas article,
- #drupal-off-canvas aside,
- #drupal-off-canvas canvas,
- #drupal-off-canvas details,
- #drupal-off-canvas embed,
- #drupal-off-canvas figure,
- #drupal-off-canvas figcaption,
- #drupal-off-canvas footer,
- #drupal-off-canvas header,
- #drupal-off-canvas hgroup,
- #drupal-off-canvas main,
- #drupal-off-canvas menu,
- #drupal-off-canvas meter,
- #drupal-off-canvas nav,
- #drupal-off-canvas output,
- #drupal-off-canvas progress,
- #drupal-off-canvas ruby,
- #drupal-off-canvas section,
- #drupal-off-canvas summary,
- #drupal-off-canvas time,
- #drupal-off-canvas mark,
- #drupal-off-canvas audio,
- #drupal-off-canvas video,
- #drupal-off-canvas input,
- #drupal-off-canvas select,
- #drupal-off-canvas textarea {
- color: inherit;
- background: inherit;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- }
-
-/* Generic elements. */
-
-#drupal-off-canvas a,
-#drupal-off-canvas .link {
- cursor: pointer;
- transition: color 0.5s ease;
- text-decoration: none;
- color: #85bef4;
- border-bottom: none;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- font-size: inherit;
- font-weight: normal;
-}
-
-#drupal-off-canvas a:focus,
-#drupal-off-canvas .link:focus,
-#drupal-off-canvas a:hover,
-#drupal-off-canvas .link:hover {
- text-decoration: underline;
-}
-
-#drupal-off-canvas hr {
- height: 1px;
- background: #ccc;
-}
-
-#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-size: 1.625em;
- font-weight: bold;
- line-height: 1.875em;
-}
-
-#drupal-off-canvas h2,
-#drupal-off-canvas .heading-b {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.385em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h3,
-#drupal-off-canvas .heading-c {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.231em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h4,
-#drupal-off-canvas .heading-d {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.154em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h5,
-#drupal-off-canvas .heading-e {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h6,
-#drupal-off-canvas .heading-f {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-
-#drupal-off-canvas p {
- margin: 1em 0;
-}
-
-#drupal-off-canvas dl {
- margin: 0 0 1.25rem;
-}
-
-#drupal-off-canvas dl dd,
-#drupal-off-canvas dl dl {
- margin-bottom: 0.625rem;
- margin-left: 1.25rem; /* LTR */
-}
-
-[dir="rtl"] #drupal-off-canvas dl dd,
-[dir="rtl"] #drupal-off-canvas dl dl {
- margin-right: 1.25rem;
-}
-
-#drupal-off-canvas blockquote {
- margin: 1em 2.5rem;
-}
-
-#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 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;
- padding: 0.3125rem 0;
- border-bottom: 1px solid #333
-}
-
-#drupal-off-canvas ul li:last-child, #drupal-off-canvas ol li:last-child {
- padding-bottom: 0;
- border-bottom: none;
- }
-
-#drupal-off-canvas blockquote,
-#drupal-off-canvas code {
- margin: 1.25rem 0;
-}
-
-#drupal-off-canvas pre {
- margin: 1.25rem 0;
- white-space: pre-wrap;
-}
-
-#drupal-off-canvas details {
- display: block;
-}
-
-#drupal-off-canvas summary {
- display: list-item;
-}
-
-#drupal-off-canvas select::-ms-expand {
- display: block;
-}
-
-/* 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;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- width: 1px;
- height: 1px;
- word-wrap: normal;
-}
-
-#drupal-off-canvas .visually-hidden.focusable:active,
-#drupal-off-canvas .visually-hidden.focusable:focus {
- position: static !important;
- overflow: visible;
- clip: auto;
- width: auto;
- height: auto;
-}
-
-#drupal-off-canvas .invisible {
- visibility: hidden;
-}
-
-/* Some system classes. See system.admin.css. */
-
-#drupal-off-canvas .panel {
- padding: 0.3125rem 0.3125rem 0.9375rem;
-}
-
-#drupal-off-canvas .panel__description {
- margin: 0 0 0.1875rem;
- padding: 2px 0 0.1875rem 0;
-}
-
-#drupal-off-canvas .compact-link {
- margin: 0 0 0.625rem 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 0.625rem 1.0625rem;
-}
-
-[dir="rtl"] #drupal-off-canvas .messages {
- background-position: right 10px top 17px;
-}
-
-#drupal-off-canvas .messages abbr {
- color: #444;
-}
-
-#drupal-off-canvas .messages--status {
- color: #325e1c;
- background-color: #f3faef;
- background-image: url(../icons/73b355/check.svg);
-}
-
-#drupal-off-canvas .messages--warning {
- color: #734c00;
- background-color: #fdf8ed;
- background-image: url(../icons/e29700/warning.svg);
-}
-
-#drupal-off-canvas .messages--error {
- color: #a51b00;
- background-color: #fcf4f2;
- background-image: url(../icons/e32700/error.svg);
-}
-
-#drupal-off-canvas .messages--error div[role="alert"] {
- color: inherit;
- background: transparent;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.base.pcss.css b/core/themes/stable/css/core/dialog/off-canvas.base.pcss.css
deleted file mode 100644
index 6ee3a286c2cb..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.base.pcss.css
+++ /dev/null
@@ -1,346 +0,0 @@
-/**
- * @file
- * Set base styles for the off-canvas dialog.
- */
-
-/* Set some global attributes. */
-#drupal-off-canvas {
- color: #ddd;
- background: #444;
-}
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-#drupal-off-canvas {
- & span,
- & applet,
- & object,
- & iframe,
- & h1,
- & h2,
- & h3,
- & h4,
- & h5,
- & h6,
- & p,
- & blockquote,
- & pre,
- & a,
- & abbr,
- & acronym,
- & address,
- & big,
- & button,
- & cite,
- & code,
- & del,
- & dfn,
- & em,
- & img,
- & ins,
- & kbd,
- & q,
- & s,
- & samp,
- & small,
- & strike,
- & strong,
- & sub,
- & sup,
- & tt,
- & var,
- & b,
- & u,
- & i,
- & center,
- & dl,
- & dt,
- & dd,
- & ol,
- & ul,
- & li,
- & fieldset,
- & form,
- & label,
- & legend,
- & table,
- & caption,
- & tbody,
- & tfoot,
- & thead,
- & tr,
- & th,
- & td,
- & article,
- & aside,
- & canvas,
- & details,
- & embed,
- & figure,
- & figcaption,
- & footer,
- & header,
- & hgroup,
- & main,
- & menu,
- & meter,
- & nav,
- & output,
- & progress,
- & ruby,
- & section,
- & summary,
- & time,
- & mark,
- & audio,
- & video,
- & input,
- & select,
- & textarea {
- color: inherit;
- background: inherit;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- }
-}
-
-/* Generic elements. */
-#drupal-off-canvas a,
-#drupal-off-canvas .link {
- cursor: pointer;
- transition: color 0.5s ease;
- text-decoration: none;
- color: #85bef4;
- border-bottom: none;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- font-size: inherit;
- font-weight: normal;
-}
-
-#drupal-off-canvas a:focus,
-#drupal-off-canvas .link:focus,
-#drupal-off-canvas a:hover,
-#drupal-off-canvas .link:hover {
- text-decoration: underline;
-}
-#drupal-off-canvas hr {
- height: 1px;
- background: #ccc;
-}
-#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-size: 1.625em;
- font-weight: bold;
- line-height: 1.875em;
-}
-#drupal-off-canvas h2,
-#drupal-off-canvas .heading-b {
- display: block;
- margin: 10px 0;
- font-size: 1.385em;
- font-weight: bold;
-}
-#drupal-off-canvas h3,
-#drupal-off-canvas .heading-c {
- display: block;
- margin: 10px 0;
- font-size: 1.231em;
- font-weight: bold;
-}
-#drupal-off-canvas h4,
-#drupal-off-canvas .heading-d {
- display: block;
- margin: 10px 0;
- font-size: 1.154em;
- font-weight: bold;
-}
-#drupal-off-canvas h5,
-#drupal-off-canvas .heading-e {
- display: block;
- margin: 10px 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-#drupal-off-canvas h6,
-#drupal-off-canvas .heading-f {
- display: block;
- margin: 10px 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-#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-bottom: 10px;
- margin-left: 20px; /* LTR */
-}
-[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 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;
- padding: 5px 0;
- border-bottom: 1px solid #333;
- &:last-child {
- padding-bottom: 0;
- border-bottom: none;
- }
-}
-#drupal-off-canvas blockquote,
-#drupal-off-canvas code {
- margin: 20px 0;
-}
-#drupal-off-canvas pre {
- margin: 20px 0;
- white-space: pre-wrap;
-}
-#drupal-off-canvas details {
- display: block;
-}
-#drupal-off-canvas summary {
- display: list-item;
-}
-
-#drupal-off-canvas select::-ms-expand {
- display: block;
-}
-
-/* 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;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- width: 1px;
- height: 1px;
- word-wrap: normal;
-}
-#drupal-off-canvas .visually-hidden.focusable:active,
-#drupal-off-canvas .visually-hidden.focusable:focus {
- position: static !important;
- overflow: visible;
- clip: auto;
- width: auto;
- height: 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 {
- color: #325e1c;
- background-color: #f3faef;
- background-image: url(../icons/73b355/check.svg);
-}
-#drupal-off-canvas .messages--warning {
- color: #734c00;
- background-color: #fdf8ed;
- background-image: url(../icons/e29700/warning.svg);
-}
-
-#drupal-off-canvas .messages--error {
- color: #a51b00;
- background-color: #fcf4f2;
- background-image: url(../icons/e32700/error.svg);
-}
-
-#drupal-off-canvas .messages--error div[role="alert"] {
- color: inherit;
- background: transparent;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.button.css b/core/themes/stable/css/core/dialog/off-canvas.button.css
deleted file mode 100644
index afc391898097..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.button.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * @file
- * Visual styling for buttons in the off-canvas dialog.
- */
-
-#drupal-off-canvas button,
-#drupal-off-canvas .button {
- margin: 0 0 10px;
- padding: 0;
- cursor: pointer;
- text-decoration: none;
- text-transform: none;
- border: 0;
- box-shadow: none;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- line-height: normal;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-#drupal-off-canvas button.link {
- display: inline;
- transition: color 0.5s ease;
- color: #85bef4;
- background: transparent;
- font-size: 14px;
-}
-#drupal-off-canvas button.link:hover,
-#drupal-off-canvas button.link:focus {
- text-decoration: none;
- color: #46a0f5;
-}
-#drupal-off-canvas input[type="submit"].button {
- position: relative;
- display: inline-block;
- width: 100%;
- height: auto;
- padding: 4px 20px;
- cursor: pointer;
- transition: background 0.5s ease;
- text-align: center;
- color: #f5f5f5;
- border: 0;
- border-radius: 20em;
- background: #777;
- font-size: 14px;
- font-weight: 600;
-}
-#drupal-off-canvas input[type="submit"].button:hover,
-#drupal-off-canvas input[type="submit"].button:focus,
-#drupal-off-canvas input[type="submit"].button:active {
- z-index: 10;
- text-decoration: none;
- color: #fff;
- border: 0;
- outline: none;
-}
-#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 {
- margin-top: 15px;
- color: #fff;
- border: 0;
- background: #277abd;
-}
-#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 {
- outline: none;
- background: #236aaf;
-}
-#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 {
- padding: 2px 1em;
- font-size: 13px;
-}
-#drupal-off-canvas .button:disabled,
-#drupal-off-canvas .button:disabled:active,
-#drupal-off-canvas .button.is-disabled,
-#drupal-off-canvas .button.is-disabled:active {
- cursor: default;
- color: #5c5c5c;
- border: 0;
- background: #555;
- font-weight: normal;
-}
-#drupal-off-canvas .button--danger {
- text-decoration: none;
- color: #c72100;
- border-radius: 0;
- font-weight: 400;
-}
-#drupal-off-canvas .button--danger:hover,
-#drupal-off-canvas .button--danger:focus,
-#drupal-off-canvas .button--danger:active {
- text-decoration: none;
- color: #ff2a00;
- text-shadow: none;
-}
-#drupal-off-canvas .button--danger:disabled,
-#drupal-off-canvas .button--danger.is-disabled {
- cursor: default;
- color: #737373;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.css b/core/themes/stable/css/core/dialog/off-canvas.css
deleted file mode 100644
index 245dc7adb9f3..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.css
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * @file
- * CSS for off-canvas dialog.
- */
-
-/* Position the off-canvas dialog container outside the right of the viewport. */
-.ui-dialog-off-canvas {
- overflow: visible;
- box-sizing: border-box;
- height: 100%;
-}
-
-/* Wrap the form that's inside the off-canvas dialog. */
-.ui-dialog-off-canvas .ui-dialog-content {
- /* Prevent horizontal scrollbar. */
- overflow-x: hidden;
- overflow-y: auto;
- padding: 0 20px;
-}
-[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 {
- overflow: visible;
- box-sizing: border-box;
- height: 100%;
-}
-
-/* Wrap the form that's inside the off-canvas dialog. */
-.ui-dialog-off-canvas #drupal-off-canvas {
- /* Prevent horizontal scrollbar. */
- overflow-x: hidden;
- overflow-y: auto;
- padding: 0 20px 20px;
-}
-[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 {
- overflow-y: hidden;
- height: 100%;
- }
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.details.css b/core/themes/stable/css/core/dialog/off-canvas.details.css
deleted file mode 100644
index 6991dd00c402..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.details.css
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * @file
- * Visual styling for summary and details in the off-canvas dialog.
- */
-
-#drupal-off-canvas details {
- display: block;
-}
-#drupal-off-canvas details,
-#drupal-off-canvas summary {
- 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 {
- color: #ddd;
- background: #474747;
-}
-#drupal-off-canvas summary a {
- padding-top: 0;
- padding-bottom: 0;
- color: #ddd;
-}
-#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 {
- /* Cancel out the padding of the parent. */
- margin: 0 -20px;
- padding: 0 20px;
- border-width: 0;
-}
-#drupal-off-canvas summary {
- padding: 10px 20px;
- transition: all 0.5s ease;
- text-shadow: none;
- font-size: 14px;
-}
-#drupal-off-canvas summary:hover,
-#drupal-off-canvas summary:focus {
- background-color: #222;
-}
-#drupal-off-canvas details[open] {
- padding-bottom: 10px;
-}
-#drupal-off-canvas details[open] > summary {
- color: #eee;
- background-color: #333;
-}
-#drupal-off-canvas details[open] > summary:hover {
- color: #fff;
- background-color: #222;
-}
-#drupal-off-canvas details .placeholder {
- color: inherit;
- background: transparent;
- font: inherit;
- font-style: italic;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.dropbutton.css b/core/themes/stable/css/core/dialog/off-canvas.dropbutton.css
deleted file mode 100644
index fba69d5a4c02..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.dropbutton.css
+++ /dev/null
@@ -1,291 +0,0 @@
-/**
- * @file
- * Styles for dropbuttons in the off-canvas dialog.
- */
-
-#drupal-off-canvas .dropbutton-wrapper,
-#drupal-off-canvas .dropbutton-widget {
- position: static;
- display: block;
- transition: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-#drupal-off-canvas .dropbutton-widget {
- margin: 0;
- padding: 0;
- cursor: pointer;
- transition: background 0.5s ease;
- text-align: center;
- text-decoration: none;
- text-transform: none;
- color: #fff;
- border: 0;
- border-radius: 1em;
- background: #277abd;
- font-weight: 600;
- line-height: normal;
-}
-#drupal-off-canvas .dropbutton-widget:hover {
- background: #2b8bd8;
-}
-
-/*
- * Style dropbutton single.
- */
-
-#drupal-off-canvas .dropbutton-single .dropbutton-action a {
- height: 2.2em;
- /* Overlap icon for trigger. */
- margin-top: -2em;
- padding: 0;
- 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 {
- overflow: hidden;
- margin: 0;
- 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 {
- color: #333;
- outline: none;
- background: transparent;
-}
-
-/*
- * 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;
- white-space: nowrap;
- text-indent: 110%;
- color: #fff;
-}
-#drupal-off-canvas .dropbutton-toggle button {
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- cursor: pointer;
- border: 0 solid transparent;
- border-top-right-radius: 1em; /* LTR */
- border-bottom-right-radius: 1em; /* LTR */
-}
-#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;
- overflow: hidden;
- width: 0;
- height: 0;
- margin-top: 0;
- color: #fff;
- border-width: 0.3333em 0.3333em 0;
- border-style: solid;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: transparent;
- line-height: 0;
-}
-#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;
- margin-right: 0;
- margin-left: 0;
- padding-right: 0;
- padding-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 {
- position: relative;
- float: right; /* LTR */
- min-width: initial;
- max-width: initial;
- margin-right: 0;
- padding-right: 0;
-}
-#drupal-off-canvas td .dropbutton-widget .dropbutton {
- overflow: hidden;
- width: 2em;
- height: 2em;
- margin: 0;
- 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 {
- width: auto;
- margin-left: 0;
- 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 its 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 {
- z-index: 1;
- color: transparent;
-}
-
-/* Put pencil icon in place of hidden 'edit' text on single buttons. */
-#drupal-off-canvas td .dropbutton-single .edit:before {
- display: block;
- content: ".";
- 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;
- overflow: visible;
- width: auto;
- min-width: 0;
- max-width: none;
- height: auto;
- padding: 0;
-}
-
-/* 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-right: inherit;
- padding-left: 1em;
-}
-#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 {
- top: 2px;
- border-top-color: transparent;
- border-bottom: 0.3333em solid;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.form.css b/core/themes/stable/css/core/dialog/off-canvas.form.css
deleted file mode 100644
index d4c39be5d949..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.form.css
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * @file
- * Visual styling for forms in the off-canvas dialog.
- */
-
-#drupal-off-canvas form {
- color: #ddd;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-}
-#drupal-off-canvas input[type="checkbox"] {
- -webkit-appearance: checkbox;
-}
-#drupal-off-canvas input[type="radio"] {
- -webkit-appearance: radio;
-}
-#drupal-off-canvas select:not([multiple]) {
- -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 {
- color: #ddd;
- font-family: inherit;
- font-size: 12px;
- font-weight: bold;
- line-height: normal;
-}
-#drupal-off-canvas .visually-hidden {
- width: 0;
- height: 0;
- letter-spacing: -2em;
- opacity: 0;
-}
-#drupal-off-canvas .description,
-#drupal-off-canvas .form-item .description,
-#drupal-off-canvas .details-description {
- margin-top: 5px;
- color: #ddd;
- font-family: inherit;
- font-size: 12px;
- font-style: normal;
-}
-#drupal-off-canvas .form-item {
- margin-top: 10px;
- margin-bottom: 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 {
- display: block;
- box-sizing: border-box;
- max-width: 100%;
- margin: 5px 0 0 0;
- padding: 6px;
- color: #333;
- border-width: 1px;
- border-radius: 2px;
- font-family: inherit;
- font-size: 14px;
- line-height: 16px;
-}
-/* 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 {
- color: #595959;
- border-color: #333;
- background-color: #eee;
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
-}
-#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;
- background-color: #fff;
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.125), 0 0 8px #40b6ff;
-}
-#drupal-off-canvas td .form-item,
-#drupal-off-canvas td .form-select {
- margin: 0;
-}
-#drupal-off-canvas .form-file {
- width: 100%;
- margin-bottom: 5px;
-}
-#drupal-off-canvas .form-actions {
- margin: 10px 0;
- text-align: center;
-}
-#drupal-off-canvas .ui-autocomplete {
- position: absolute;
- top: 0;
- left: 0;
- cursor: default;
- background-color: white;
-}
-#drupal-off-canvas .ui-autocomplete li {
- display: block;
-}
-#drupal-off-canvas .ui-autocomplete li a {
- padding: 5px;
- cursor: pointer;
- color: #595959 !important;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.layout.css b/core/themes/stable/css/core/dialog/off-canvas.layout.css
deleted file mode 100644
index 3b2b52e38760..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.layout.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * @file
- * Visual styling for layouts in the off-canvas dialog.
- */
-
-.layout-icon__region {
- fill: #f5f5f2;
- stroke: #666;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.motion.css b/core/themes/stable/css/core/dialog/off-canvas.motion.css
deleted file mode 100644
index 60d8d6a1dd2d..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.motion.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @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 {
- transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s 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
deleted file mode 100644
index 102c9491af3b..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.reset.css
+++ /dev/null
@@ -1,685 +0,0 @@
-/*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
-/**
- * @file
- * Reset most HTML elements styles for the off-canvas dialog.
- *
- * This is a generic reset. Drupal-specific classes are reset in components.
- */
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-
-#drupal-off-canvas span,
- #drupal-off-canvas applet,
- #drupal-off-canvas object,
- #drupal-off-canvas iframe,
- #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 p,
- #drupal-off-canvas blockquote,
- #drupal-off-canvas pre,
- #drupal-off-canvas a,
- #drupal-off-canvas abbr,
- #drupal-off-canvas acronym,
- #drupal-off-canvas address,
- #drupal-off-canvas big,
- #drupal-off-canvas button,
- #drupal-off-canvas cite,
- #drupal-off-canvas code,
- #drupal-off-canvas del,
- #drupal-off-canvas dfn,
- #drupal-off-canvas em,
- #drupal-off-canvas img,
- #drupal-off-canvas ins,
- #drupal-off-canvas kbd,
- #drupal-off-canvas q,
- #drupal-off-canvas s,
- #drupal-off-canvas samp,
- #drupal-off-canvas small,
- #drupal-off-canvas strike,
- #drupal-off-canvas strong,
- #drupal-off-canvas sub,
- #drupal-off-canvas sup,
- #drupal-off-canvas tt,
- #drupal-off-canvas var,
- #drupal-off-canvas b,
- #drupal-off-canvas u,
- #drupal-off-canvas i,
- #drupal-off-canvas center,
- #drupal-off-canvas dl,
- #drupal-off-canvas dt,
- #drupal-off-canvas dd,
- #drupal-off-canvas ol,
- #drupal-off-canvas ul,
- #drupal-off-canvas li,
- #drupal-off-canvas fieldset,
- #drupal-off-canvas form,
- #drupal-off-canvas label,
- #drupal-off-canvas legend,
- #drupal-off-canvas table,
- #drupal-off-canvas caption,
- #drupal-off-canvas tbody,
- #drupal-off-canvas tfoot,
- #drupal-off-canvas thead,
- #drupal-off-canvas tr,
- #drupal-off-canvas th,
- #drupal-off-canvas td,
- #drupal-off-canvas article,
- #drupal-off-canvas aside,
- #drupal-off-canvas canvas,
- #drupal-off-canvas details,
- #drupal-off-canvas embed,
- #drupal-off-canvas figure,
- #drupal-off-canvas figcaption,
- #drupal-off-canvas footer,
- #drupal-off-canvas header,
- #drupal-off-canvas hgroup,
- #drupal-off-canvas main,
- #drupal-off-canvas menu,
- #drupal-off-canvas meter,
- #drupal-off-canvas nav,
- #drupal-off-canvas output,
- #drupal-off-canvas progress,
- #drupal-off-canvas ruby,
- #drupal-off-canvas section,
- #drupal-off-canvas summary,
- #drupal-off-canvas time,
- #drupal-off-canvas mark,
- #drupal-off-canvas audio,
- #drupal-off-canvas video,
- #drupal-off-canvas input,
- #drupal-off-canvas select,
- #drupal-off-canvas textarea {
- all: initial;
- box-sizing: border-box;
- text-shadow: none;
- -webkit-font-smoothing: antialiased;
- -webkit-tap-highlight-color: initial
- }
-
-#drupal-off-canvas span:after,
- #drupal-off-canvas span:before,
- #drupal-off-canvas applet:after,
- #drupal-off-canvas applet:before,
- #drupal-off-canvas object:after,
- #drupal-off-canvas object:before,
- #drupal-off-canvas iframe:after,
- #drupal-off-canvas iframe:before,
- #drupal-off-canvas h1:after,
- #drupal-off-canvas h1:before,
- #drupal-off-canvas h2:after,
- #drupal-off-canvas h2:before,
- #drupal-off-canvas h3:after,
- #drupal-off-canvas h3:before,
- #drupal-off-canvas h4:after,
- #drupal-off-canvas h4:before,
- #drupal-off-canvas h5:after,
- #drupal-off-canvas h5:before,
- #drupal-off-canvas h6:after,
- #drupal-off-canvas h6:before,
- #drupal-off-canvas p:after,
- #drupal-off-canvas p:before,
- #drupal-off-canvas blockquote:after,
- #drupal-off-canvas blockquote:before,
- #drupal-off-canvas pre:after,
- #drupal-off-canvas pre:before,
- #drupal-off-canvas a:after,
- #drupal-off-canvas a:before,
- #drupal-off-canvas abbr:after,
- #drupal-off-canvas abbr:before,
- #drupal-off-canvas acronym:after,
- #drupal-off-canvas acronym:before,
- #drupal-off-canvas address:after,
- #drupal-off-canvas address:before,
- #drupal-off-canvas big:after,
- #drupal-off-canvas big:before,
- #drupal-off-canvas button:after,
- #drupal-off-canvas button:before,
- #drupal-off-canvas cite:after,
- #drupal-off-canvas cite:before,
- #drupal-off-canvas code:after,
- #drupal-off-canvas code:before,
- #drupal-off-canvas del:after,
- #drupal-off-canvas del:before,
- #drupal-off-canvas dfn:after,
- #drupal-off-canvas dfn:before,
- #drupal-off-canvas em:after,
- #drupal-off-canvas em:before,
- #drupal-off-canvas img:after,
- #drupal-off-canvas img:before,
- #drupal-off-canvas ins:after,
- #drupal-off-canvas ins:before,
- #drupal-off-canvas kbd:after,
- #drupal-off-canvas kbd:before,
- #drupal-off-canvas q:after,
- #drupal-off-canvas q:before,
- #drupal-off-canvas s:after,
- #drupal-off-canvas s:before,
- #drupal-off-canvas samp:after,
- #drupal-off-canvas samp:before,
- #drupal-off-canvas small:after,
- #drupal-off-canvas small:before,
- #drupal-off-canvas strike:after,
- #drupal-off-canvas strike:before,
- #drupal-off-canvas strong:after,
- #drupal-off-canvas strong:before,
- #drupal-off-canvas sub:after,
- #drupal-off-canvas sub:before,
- #drupal-off-canvas sup:after,
- #drupal-off-canvas sup:before,
- #drupal-off-canvas tt:after,
- #drupal-off-canvas tt:before,
- #drupal-off-canvas var:after,
- #drupal-off-canvas var:before,
- #drupal-off-canvas b:after,
- #drupal-off-canvas b:before,
- #drupal-off-canvas u:after,
- #drupal-off-canvas u:before,
- #drupal-off-canvas i:after,
- #drupal-off-canvas i:before,
- #drupal-off-canvas center:after,
- #drupal-off-canvas center:before,
- #drupal-off-canvas dl:after,
- #drupal-off-canvas dl:before,
- #drupal-off-canvas dt:after,
- #drupal-off-canvas dt:before,
- #drupal-off-canvas dd:after,
- #drupal-off-canvas dd:before,
- #drupal-off-canvas ol:after,
- #drupal-off-canvas ol:before,
- #drupal-off-canvas ul:after,
- #drupal-off-canvas ul:before,
- #drupal-off-canvas li:after,
- #drupal-off-canvas li:before,
- #drupal-off-canvas fieldset:after,
- #drupal-off-canvas fieldset:before,
- #drupal-off-canvas form:after,
- #drupal-off-canvas form:before,
- #drupal-off-canvas label:after,
- #drupal-off-canvas label:before,
- #drupal-off-canvas legend:after,
- #drupal-off-canvas legend:before,
- #drupal-off-canvas table:after,
- #drupal-off-canvas table:before,
- #drupal-off-canvas caption:after,
- #drupal-off-canvas caption:before,
- #drupal-off-canvas tbody:after,
- #drupal-off-canvas tbody:before,
- #drupal-off-canvas tfoot:after,
- #drupal-off-canvas tfoot:before,
- #drupal-off-canvas thead:after,
- #drupal-off-canvas thead:before,
- #drupal-off-canvas tr:after,
- #drupal-off-canvas tr:before,
- #drupal-off-canvas th:after,
- #drupal-off-canvas th:before,
- #drupal-off-canvas td:after,
- #drupal-off-canvas td:before,
- #drupal-off-canvas article:after,
- #drupal-off-canvas article:before,
- #drupal-off-canvas aside:after,
- #drupal-off-canvas aside:before,
- #drupal-off-canvas canvas:after,
- #drupal-off-canvas canvas:before,
- #drupal-off-canvas details:after,
- #drupal-off-canvas details:before,
- #drupal-off-canvas embed:after,
- #drupal-off-canvas embed:before,
- #drupal-off-canvas figure:after,
- #drupal-off-canvas figure:before,
- #drupal-off-canvas figcaption:after,
- #drupal-off-canvas figcaption:before,
- #drupal-off-canvas footer:after,
- #drupal-off-canvas footer:before,
- #drupal-off-canvas header:after,
- #drupal-off-canvas header:before,
- #drupal-off-canvas hgroup:after,
- #drupal-off-canvas hgroup:before,
- #drupal-off-canvas main:after,
- #drupal-off-canvas main:before,
- #drupal-off-canvas menu:after,
- #drupal-off-canvas menu:before,
- #drupal-off-canvas meter:after,
- #drupal-off-canvas meter:before,
- #drupal-off-canvas nav:after,
- #drupal-off-canvas nav:before,
- #drupal-off-canvas output:after,
- #drupal-off-canvas output:before,
- #drupal-off-canvas progress:after,
- #drupal-off-canvas progress:before,
- #drupal-off-canvas ruby:after,
- #drupal-off-canvas ruby:before,
- #drupal-off-canvas section:after,
- #drupal-off-canvas section:before,
- #drupal-off-canvas summary:after,
- #drupal-off-canvas summary:before,
- #drupal-off-canvas time:after,
- #drupal-off-canvas time:before,
- #drupal-off-canvas mark:after,
- #drupal-off-canvas mark:before,
- #drupal-off-canvas audio:after,
- #drupal-off-canvas audio:before,
- #drupal-off-canvas video:after,
- #drupal-off-canvas video:before,
- #drupal-off-canvas input:after,
- #drupal-off-canvas input:before,
- #drupal-off-canvas select:after,
- #drupal-off-canvas select:before,
- #drupal-off-canvas textarea:after,
- #drupal-off-canvas textarea: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 {
- margin: 0;
- padding: 0;
- border: 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;
- border-radius: 0;
- line-height: normal;
-}
-
-/*
- * 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 {
- vertical-align: middle;
- color: transparent;
- font-size: 0;
-}
-
-#drupal-off-canvas ul,
-#drupal-off-canvas ol {
- list-style: none;
-}
-
-/* reset table styling. */
-
-#drupal-off-canvas table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-
-#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: transparent none;
-}
-
-#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 {
- position: relative;
- vertical-align: baseline;
- line-height: 0;
-}
-
-#drupal-off-canvas sub {
- bottom: -0.25em;
-}
-
-#drupal-off-canvas sup {
- top: -0.5em;
-}
-
-/*
- * For IE9. Without, occasionally draws shapes
- * outside the boundaries of <svg> rectangle.
- */
-
-#drupal-off-canvas svg {
- overflow: hidden;
-}
-
-/* Specific resets for inputs. */
-
-#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
- display: none;
-}
-
-#drupal-off-canvas input {
- margin: 0;
- padding: 0;
-}
-
-#drupal-off-canvas input[type="checkbox"],
-#drupal-off-canvas input[type="radio"] {
- position: static;
- margin: 0;
-}
-
-#drupal-off-canvas input:invalid,
-#drupal-off-canvas button:invalid,
-#drupal-off-canvas select:invalid,
-#drupal-off-canvas textarea:invalid,
-#drupal-off-canvas input:focus,
-#drupal-off-canvas button:focus,
-#drupal-off-canvas select:focus,
-#drupal-off-canvas textarea:focus,
-#drupal-off-canvas input[type="file"]:focus,
-#drupal-off-canvas input[type="file"]:active,
-#drupal-off-canvas input[type="radio"]:focus,
-#drupal-off-canvas input[type="radio"]:active,
-#drupal-off-canvas input[type="checkbox"]:focus,
-#drupal-off-canvas input[type="checkbox"]:active {
- z-index: 1;
- box-shadow: none;
-}
-
-#drupal-off-canvas input[role="button"] {
- cursor: pointer;
-}
-
-#drupal-off-canvas button,
-#drupal-off-canvas input[type="reset"],
-#drupal-off-canvas input[type="submit"],
-#drupal-off-canvas input[type="button"] {
- display: inline-block;
- overflow: visible;
- cursor: pointer;
- vertical-align: middle;
- text-decoration: none;
- border: 0;
- outline: 0;
- background-image: none;
- text-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-
-#drupal-off-canvas button:hover,
-#drupal-off-canvas input[type="reset"]:hover,
-#drupal-off-canvas input[type="submit"]:hover,
-#drupal-off-canvas input[type="button"]:hover {
- text-decoration: none;
- background-image: none;
-}
-
-#drupal-off-canvas button:active,
-#drupal-off-canvas input[type="reset"]:active,
-#drupal-off-canvas input[type="submit"]:active,
-#drupal-off-canvas input[type="button"]:active {
- border-color: gray;
- background-image: none;
- box-shadow: none;
-}
-
-#drupal-off-canvas button::-moz-focus-inner,
-#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
-#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
-#drupal-off-canvas input[type="button"]::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-
-#drupal-off-canvas textarea,
-#drupal-off-canvas select,
-#drupal-off-canvas input[type="date"],
-#drupal-off-canvas input[type="datetime"],
-#drupal-off-canvas input[type="datetime-local"],
-#drupal-off-canvas input[type="email"],
-#drupal-off-canvas input[type="month"],
-#drupal-off-canvas input[type="number"],
-#drupal-off-canvas input[type="password"],
-#drupal-off-canvas input[type="search"],
-#drupal-off-canvas input[type="tel"],
-#drupal-off-canvas input[type="text"],
-#drupal-off-canvas input[type="time"],
-#drupal-off-canvas input[type="url"],
-#drupal-off-canvas input[type="week"] {
- height: auto;
- vertical-align: middle;
- border-radius: 0;
-}
-
-#drupal-off-canvas textarea[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas input[type="date"][disabled],
-#drupal-off-canvas input[type="datetime"][disabled],
-#drupal-off-canvas input[type="datetime-local"][disabled],
-#drupal-off-canvas input[type="email"][disabled],
-#drupal-off-canvas input[type="month"][disabled],
-#drupal-off-canvas input[type="number"][disabled],
-#drupal-off-canvas input[type="password"][disabled],
-#drupal-off-canvas input[type="search"][disabled],
-#drupal-off-canvas input[type="tel"][disabled],
-#drupal-off-canvas input[type="text"][disabled],
-#drupal-off-canvas input[type="time"][disabled],
-#drupal-off-canvas input[type="url"][disabled],
-#drupal-off-canvas input[type="week"][disabled] {
- background-color: gray;
-}
-
-#drupal-off-canvas input[type="hidden"] {
- visibility: hidden;
-}
-
-#drupal-off-canvas button[disabled],
-#drupal-off-canvas input[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas select[disabled] option,
-#drupal-off-canvas select[disabled] optgroup,
-#drupal-off-canvas textarea[disabled] {
- cursor: default;
- -webkit-user-select: none;
- user-select: none;
- box-shadow: none;
-}
-
-#drupal-off-canvas input::placeholder,
-#drupal-off-canvas textarea::placeholder {
- color: gray;
-}
-
-#drupal-off-canvas textarea,
-#drupal-off-canvas select[size],
-#drupal-off-canvas select[multiple] {
- height: auto;
-}
-
-#drupal-off-canvas select[size="0"],
-#drupal-off-canvas select[size="1"] {
- height: auto;
-}
-
-#drupal-off-canvas textarea {
- overflow: auto;
- width: 100%;
- min-height: 2.5rem;
- resize: vertical;
-}
-
-#drupal-off-canvas select[multiple] {
- overflow: auto;
-}
-
-#drupal-off-canvas optgroup {
- color: black;
- font-weight: normal;
- font-style: normal;
-}
-
-#drupal-off-canvas optgroup::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-
-#drupal-off-canvas * button {
- overflow: visible;
- width: auto;
- padding: 0;
- vertical-align: middle;
- text-decoration: none;
- color: black;
- border: 1px solid gray;
- background: none;
-}
-
-#drupal-off-canvas * textarea,
-#drupal-off-canvas * select,
-#drupal-off-canvas *:not(div) textarea,
-#drupal-off-canvas *:not(div) select {
- padding: 0;
- vertical-align: top;
- color: black;
- border: 1px solid gray;
- background: white;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css b/core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css
deleted file mode 100644
index 1446b85506ad..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css
+++ /dev/null
@@ -1,478 +0,0 @@
-/**
- * @file
- * Reset most HTML elements styles for the off-canvas dialog.
- *
- * This is a generic reset. Drupal-specific classes are reset in components.
- */
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-#drupal-off-canvas {
- & span,
- & applet,
- & object,
- & iframe,
- & h1,
- & h2,
- & h3,
- & h4,
- & h5,
- & h6,
- & p,
- & blockquote,
- & pre,
- & a,
- & abbr,
- & acronym,
- & address,
- & big,
- & button,
- & cite,
- & code,
- & del,
- & dfn,
- & em,
- & img,
- & ins,
- & kbd,
- & q,
- & s,
- & samp,
- & small,
- & strike,
- & strong,
- & sub,
- & sup,
- & tt,
- & var,
- & b,
- & u,
- & i,
- & center,
- & dl,
- & dt,
- & dd,
- & ol,
- & ul,
- & li,
- & fieldset,
- & form,
- & label,
- & legend,
- & table,
- & caption,
- & tbody,
- & tfoot,
- & thead,
- & tr,
- & th,
- & td,
- & article,
- & aside,
- & canvas,
- & details,
- & embed,
- & figure,
- & figcaption,
- & footer,
- & header,
- & hgroup,
- & main,
- & menu,
- & meter,
- & nav,
- & output,
- & progress,
- & ruby,
- & section,
- & summary,
- & time,
- & mark,
- & audio,
- & video,
- & input,
- & select,
- & textarea {
- all: initial;
- box-sizing: border-box;
- text-shadow: none;
- -webkit-font-smoothing: antialiased;
- -webkit-tap-highlight-color: initial;
-
- &:after,
- &: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 {
- margin: 0;
- padding: 0;
- border: 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;
- border-radius: 0;
- line-height: normal;
-}
-
-/*
- * 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 {
- vertical-align: middle;
- color: transparent;
- font-size: 0;
-}
-
-#drupal-off-canvas ul,
-#drupal-off-canvas ol {
- list-style: none;
-}
-
-/* reset table styling. */
-#drupal-off-canvas table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-#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: transparent none;
-}
-#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 {
- position: relative;
- vertical-align: baseline;
- line-height: 0;
-}
-#drupal-off-canvas sub {
- bottom: -0.25em;
-}
-#drupal-off-canvas sup {
- top: -0.5em;
-}
-
-/*
- * For IE9. Without, occasionally draws shapes
- * outside the boundaries of <svg> rectangle.
- */
-#drupal-off-canvas svg {
- overflow: hidden;
-}
-
-/* Specific resets for inputs. */
-#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
- display: none;
-}
-#drupal-off-canvas input {
- margin: 0;
- padding: 0;
-}
-#drupal-off-canvas input[type="checkbox"],
-#drupal-off-canvas input[type="radio"] {
- position: static;
- margin: 0;
-}
-#drupal-off-canvas input:invalid,
-#drupal-off-canvas button:invalid,
-#drupal-off-canvas select:invalid,
-#drupal-off-canvas textarea:invalid,
-#drupal-off-canvas input:focus,
-#drupal-off-canvas button:focus,
-#drupal-off-canvas select:focus,
-#drupal-off-canvas textarea:focus,
-#drupal-off-canvas input[type="file"]:focus,
-#drupal-off-canvas input[type="file"]:active,
-#drupal-off-canvas input[type="radio"]:focus,
-#drupal-off-canvas input[type="radio"]:active,
-#drupal-off-canvas input[type="checkbox"]:focus,
-#drupal-off-canvas input[type="checkbox"]:active {
- z-index: 1;
- box-shadow: none;
-}
-#drupal-off-canvas input[role="button"] {
- cursor: pointer;
-}
-#drupal-off-canvas button,
-#drupal-off-canvas input[type="reset"],
-#drupal-off-canvas input[type="submit"],
-#drupal-off-canvas input[type="button"] {
- display: inline-block;
- overflow: visible;
- cursor: pointer;
- vertical-align: middle;
- text-decoration: none;
- border: 0;
- outline: 0;
- background-image: none;
- text-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-#drupal-off-canvas button:hover,
-#drupal-off-canvas input[type="reset"]:hover,
-#drupal-off-canvas input[type="submit"]:hover,
-#drupal-off-canvas input[type="button"]:hover {
- text-decoration: none;
- background-image: none;
-}
-#drupal-off-canvas button:active,
-#drupal-off-canvas input[type="reset"]:active,
-#drupal-off-canvas input[type="submit"]:active,
-#drupal-off-canvas input[type="button"]:active {
- border-color: gray;
- background-image: none;
- box-shadow: none;
-}
-#drupal-off-canvas button::-moz-focus-inner,
-#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
-#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
-#drupal-off-canvas input[type="button"]::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-#drupal-off-canvas textarea,
-#drupal-off-canvas select,
-#drupal-off-canvas input[type="date"],
-#drupal-off-canvas input[type="datetime"],
-#drupal-off-canvas input[type="datetime-local"],
-#drupal-off-canvas input[type="email"],
-#drupal-off-canvas input[type="month"],
-#drupal-off-canvas input[type="number"],
-#drupal-off-canvas input[type="password"],
-#drupal-off-canvas input[type="search"],
-#drupal-off-canvas input[type="tel"],
-#drupal-off-canvas input[type="text"],
-#drupal-off-canvas input[type="time"],
-#drupal-off-canvas input[type="url"],
-#drupal-off-canvas input[type="week"] {
- height: auto;
- vertical-align: middle;
- border-radius: 0;
-}
-#drupal-off-canvas textarea[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas input[type="date"][disabled],
-#drupal-off-canvas input[type="datetime"][disabled],
-#drupal-off-canvas input[type="datetime-local"][disabled],
-#drupal-off-canvas input[type="email"][disabled],
-#drupal-off-canvas input[type="month"][disabled],
-#drupal-off-canvas input[type="number"][disabled],
-#drupal-off-canvas input[type="password"][disabled],
-#drupal-off-canvas input[type="search"][disabled],
-#drupal-off-canvas input[type="tel"][disabled],
-#drupal-off-canvas input[type="text"][disabled],
-#drupal-off-canvas input[type="time"][disabled],
-#drupal-off-canvas input[type="url"][disabled],
-#drupal-off-canvas input[type="week"][disabled] {
- background-color: gray;
-}
-#drupal-off-canvas input[type="hidden"] {
- visibility: hidden;
-}
-#drupal-off-canvas button[disabled],
-#drupal-off-canvas input[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas select[disabled] option,
-#drupal-off-canvas select[disabled] optgroup,
-#drupal-off-canvas textarea[disabled] {
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- box-shadow: none;
-}
-#drupal-off-canvas input::placeholder,
-#drupal-off-canvas textarea::placeholder {
- color: gray;
-}
-#drupal-off-canvas textarea,
-#drupal-off-canvas select[size],
-#drupal-off-canvas select[multiple] {
- height: auto;
-}
-#drupal-off-canvas select[size="0"],
-#drupal-off-canvas select[size="1"] {
- height: auto;
-}
-#drupal-off-canvas textarea {
- overflow: auto;
- width: 100%;
- min-height: 40px;
- resize: vertical;
-}
-#drupal-off-canvas select[multiple] {
- overflow: auto;
-}
-#drupal-off-canvas optgroup {
- color: black;
- font-weight: normal;
- font-style: normal;
-}
-#drupal-off-canvas optgroup::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-#drupal-off-canvas * button {
- overflow: visible;
- width: auto;
- padding: 0;
- vertical-align: middle;
- text-decoration: none;
- color: black;
- border: 1px solid gray;
- background: none;
-}
-#drupal-off-canvas * textarea,
-#drupal-off-canvas * select,
-#drupal-off-canvas *:not(div) textarea,
-#drupal-off-canvas *:not(div) select {
- padding: 0;
- vertical-align: top;
- color: black;
- border: 1px solid gray;
- background: white;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.table.css b/core/themes/stable/css/core/dialog/off-canvas.table.css
deleted file mode 100644
index 24154cdff3e5..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.table.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * @file
- * Visual styling for tables in the off-canvas dialog.
- */
-
-#drupal-off-canvas table * {
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-}
-#drupal-off-canvas table {
- display: table;
- width: 100%;
- min-width: calc(100% + 40px);
- /* Cancel out the padding of the parent to make the table full width. */
- margin: 0 -20px -10px -20px;
- color: #ddd;
- border: 0;
- border-collapse: collapse;
- font-size: 12px;
-}
-#drupal-off-canvas table thead {
- display: table-header-group;
-}
-#drupal-off-canvas table tbody {
- display: table-row-group;
-}
-#drupal-off-canvas tr {
- display: table-row;
-}
-#drupal-off-canvas tr:hover td {
- background-color: transparent;
-}
-
-#drupal-off-canvas td,
-#drupal-off-canvas th {
- display: table-cell;
- width: auto;
- height: auto;
- padding: 2px 8px;
- vertical-align: middle;
- border-bottom: 1px solid #777;
- background-color: transparent;
-}
-[dir="rtl"] #drupal-off-canvas th,
-[dir="rtl"] #drupal-off-canvas td {
- text-align: right;
-}
-#drupal-off-canvas th {
- font-weight: bold;
-}
-#drupal-off-canvas th.checkbox,
-#drupal-off-canvas td.checkbox {
- width: 20px;
- padding: 0;
- text-align: center;
-}
-#drupal-off-canvas div.checkbox.menu-enabled {
- position: static;
- display: inline;
- width: auto;
-}
-#drupal-off-canvas th:first-child,
-#drupal-off-canvas td:first-child {
- width: 150px;
-}
-/* For lack of a better class, using this to grab the operations th. */
-#drupal-off-canvas .tabledrag-has-colspan {
- padding-right: 20px;
- text-align: right;
-}
-#drupal-off-canvas td {
- padding: 6px 8px;
- color: #ddd;
-}
-/* Hide overflow with ellipsis for links. */
-#drupal-off-canvas td a {
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- background: transparent;
-}
-#drupal-off-canvas tr td:first-child,
-#drupal-off-canvas tr th:first-child {
- padding-left: 20px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas tr td:first-child,
-[dir="rtl"] #drupal-off-canvas tr th:first-child {
- padding-right: 20px;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.tabledrag.css b/core/themes/stable/css/core/dialog/off-canvas.tabledrag.css
deleted file mode 100644
index 708a1c936a82..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.tabledrag.css
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * @file
- * Table drag behavior for off-canvas dialog.
- *
- * @see tabledrag.js
- */
-
-#drupal-off-canvas .drag {
- cursor: move;
-}
-#drupal-off-canvas tr.region-title {
- font-weight: normal;
-}
-#drupal-off-canvas table .region-message {
- color: #fff;
-}
-#drupal-off-canvas table .region-populated {
- display: none;
-}
-#drupal-off-canvas .add-new .tabledrag-changed {
- display: none;
-}
-#drupal-off-canvas .draggable a.tabledrag-handle {
- float: left; /* LTR */
- overflow: hidden;
- min-width: 20px;
- height: auto;
- margin: 0 5px 0 0;
- padding: 0;
- cursor: move;
- text-decoration: none;
- background-image: none;
-}
-[dir="rtl"] #drupal-off-canvas .draggable a.tabledrag-handle {
- float: right;
- margin-right: 0;
- margin-left: 5px;
-}
-#drupal-off-canvas a.tabledrag-handle .handle {
- width: auto;
- height: auto;
- margin: 0;
- padding: 0;
- background-color: transparent;
- /* Use lighter drag icon against dark background. */
- background-image: url(../../../images/core/icons/bebebe/move.svg);
- background-repeat: no-repeat;
- background-position: center;
-}
-#drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
-#drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {
- text-decoration: none;
- background-image: url(../../../images/core/icons/787878/move.svg);
-}
-#drupal-off-canvas tr td {
- transition: background 0.3s ease;
-}
-
-#drupal-off-canvas tr td abbr {
- margin-left: 5px; /* LTR */
-}
-
-[dir="rtl"] #drupal-off-canvas tr td abbr {
- margin-right: 5px;
- margin-left: 0;
-}
-#drupal-off-canvas tr:hover td {
- background: #222;
-}
-#drupal-off-canvas tr.drag td {
- background: #111;
-}
-#drupal-off-canvas tr.drag-previous td {
- background: #000;
-}
-#drupal-off-canvas tr.drag-previous:hover td {
- background: #222;
-}
-body div.tabledrag-changed-warning {
- margin-bottom: 0.5em;
- font-size: 14px;
-}
-#drupal-off-canvas .touchevents .draggable td {
- padding: 0 10px;
-}
-#drupal-off-canvas .touchevents .draggable .menu-item__link {
- display: inline-block;
- padding: 10px 0;
-}
-#drupal-off-canvas .touchevents a.tabledrag-handle {
- width: 40px;
- height: 44px;
-}
-#drupal-off-canvas .touchevents a.tabledrag-handle .handle {
- height: 21px;
- background-position: 40% 19px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .touch a.tabledrag-handle .handle {
- background-position: right 40% top 19px;
-}
-#drupal-off-canvas .touchevents .draggable.drag a.tabledrag-handle .handle {
- background-position: 50% -32px;
-}
-#drupal-off-canvas .tabledrag-toggle-weight-wrapper {
- padding-top: 10px;
- text-align: right; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .tabledrag-toggle-weight-wrapper {
- text-align: left;
-}
-#drupal-off-canvas .indentation {
- float: left; /* LTR */
- width: auto;
- height: auto;
- margin: 0 3px 0 -10px; /* LTR */
- padding: 0 0 0 10px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .indentation {
- float: right;
- margin: 0 -10px 0 3px;
- padding: 0 10px 0 0;
-}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.theme.css b/core/themes/stable/css/core/dialog/off-canvas.theme.css
deleted file mode 100644
index 06139181b805..000000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.theme.css
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * @file
- * Styling for the off-canvas ui dialog. Including overrides for jQuery UI.
- */
-
-/* Style the dialog-off-canvas container. */
-.ui-dialog.ui-dialog-off-canvas {
- /* Layer the dialog just under the toolbar. */
- z-index: 501;
- padding: 0;
- color: #ddd;
- border-radius: 0;
- background: #444;
- box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
-}
-.ui-widget.ui-dialog.ui-dialog-off-canvas {
- border: 1px solid transparent;
-}
-
-/* Style the off-canvas dialog header. */
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- padding: 1em;
- color: #fff;
- border: 0;
- border-bottom: 1px solid #000;
- border-radius: 0;
- background: #2d2d2d;
- font-weight: normal;
-}
-/* Hide the default jQuery UI dialog close button. */
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
- visibility: hidden;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- position: absolute;
- top: calc(50% - 6px);
- right: 1em;
- width: 30px;
- height: 30px;
- transition: all 0.5s ease;
- border: 3px solid transparent;
- background-color: transparent;
- background-image: url(../../../images/core/icons/bebebe/ex.svg);
- background-repeat: no-repeat;
- background-position: center center;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
- border: 3px solid #fff;
- background-image: url(../../../images/core/icons/ffffff/ex.svg);
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- right: auto;
- left: 1em;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- /* Ensure that long titles do not overlap the close button. */
- max-width: 210px;
- margin: 0;
- padding-right: 0; /* LTR */
- /* Push the text away from the icon. */
- padding-left: 30px; /* LTR */
- text-align: left; /* LTR */
- /* Ensure that long titles are not truncated. */
- white-space: normal;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- font-size: 16px;
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- float: right;
- padding-right: 30px;
- padding-left: 0;
- text-align: right;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
- position: absolute;
- top: 0;
- left: 1em; /* LTR */
- display: block;
- width: 20px;
- height: 100%;
- content: "";
- background: transparent url(../../../images/core/icons/ffffff/pencil.svg) no-repeat scroll center center;
- background-size: 100% auto;
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
- right: 1em;
- left: auto;
-}
-
-/* Override default styling from jQuery UI. */
-#drupal-off-canvas .ui-state-default,
-#drupal-off-canvas .ui-widget-content .ui-state-default,
-#drupal-off-canvas .ui-widget-header .ui-state-default {
- color: #333;
- border: 0;
- font-size: 14px;
- font-weight: normal;
-}
-#drupal-off-canvas .ui-widget-content a {
- color: #85bef4;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.base.css b/core/themes/stable9/css/core/dialog/off-canvas.base.css
deleted file mode 100644
index 3a8c6df9911b..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.base.css
+++ /dev/null
@@ -1,399 +0,0 @@
-/*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
-/**
- * @file
- * Set base styles for the off-canvas dialog.
- */
-
-/* Set some global attributes. */
-
-#drupal-off-canvas {
- color: #ddd;
- background: #444;
-}
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-
-#drupal-off-canvas span,
- #drupal-off-canvas applet,
- #drupal-off-canvas object,
- #drupal-off-canvas iframe,
- #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 p,
- #drupal-off-canvas blockquote,
- #drupal-off-canvas pre,
- #drupal-off-canvas a,
- #drupal-off-canvas abbr,
- #drupal-off-canvas acronym,
- #drupal-off-canvas address,
- #drupal-off-canvas big,
- #drupal-off-canvas button,
- #drupal-off-canvas cite,
- #drupal-off-canvas code,
- #drupal-off-canvas del,
- #drupal-off-canvas dfn,
- #drupal-off-canvas em,
- #drupal-off-canvas img,
- #drupal-off-canvas ins,
- #drupal-off-canvas kbd,
- #drupal-off-canvas q,
- #drupal-off-canvas s,
- #drupal-off-canvas samp,
- #drupal-off-canvas small,
- #drupal-off-canvas strike,
- #drupal-off-canvas strong,
- #drupal-off-canvas sub,
- #drupal-off-canvas sup,
- #drupal-off-canvas tt,
- #drupal-off-canvas var,
- #drupal-off-canvas b,
- #drupal-off-canvas u,
- #drupal-off-canvas i,
- #drupal-off-canvas center,
- #drupal-off-canvas dl,
- #drupal-off-canvas dt,
- #drupal-off-canvas dd,
- #drupal-off-canvas ol,
- #drupal-off-canvas ul,
- #drupal-off-canvas li,
- #drupal-off-canvas fieldset,
- #drupal-off-canvas form,
- #drupal-off-canvas label,
- #drupal-off-canvas legend,
- #drupal-off-canvas table,
- #drupal-off-canvas caption,
- #drupal-off-canvas tbody,
- #drupal-off-canvas tfoot,
- #drupal-off-canvas thead,
- #drupal-off-canvas tr,
- #drupal-off-canvas th,
- #drupal-off-canvas td,
- #drupal-off-canvas article,
- #drupal-off-canvas aside,
- #drupal-off-canvas canvas,
- #drupal-off-canvas details,
- #drupal-off-canvas embed,
- #drupal-off-canvas figure,
- #drupal-off-canvas figcaption,
- #drupal-off-canvas footer,
- #drupal-off-canvas header,
- #drupal-off-canvas hgroup,
- #drupal-off-canvas main,
- #drupal-off-canvas menu,
- #drupal-off-canvas meter,
- #drupal-off-canvas nav,
- #drupal-off-canvas output,
- #drupal-off-canvas progress,
- #drupal-off-canvas ruby,
- #drupal-off-canvas section,
- #drupal-off-canvas summary,
- #drupal-off-canvas time,
- #drupal-off-canvas mark,
- #drupal-off-canvas audio,
- #drupal-off-canvas video,
- #drupal-off-canvas input,
- #drupal-off-canvas select,
- #drupal-off-canvas textarea {
- color: inherit;
- background: inherit;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- }
-
-/* Generic elements. */
-
-#drupal-off-canvas a,
-#drupal-off-canvas .link {
- cursor: pointer;
- transition: color 0.5s ease;
- text-decoration: none;
- color: #85bef4;
- border-bottom: none;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- font-size: inherit;
- font-weight: normal;
-}
-
-#drupal-off-canvas a:focus,
-#drupal-off-canvas .link:focus,
-#drupal-off-canvas a:hover,
-#drupal-off-canvas .link:hover {
- text-decoration: underline;
-}
-
-#drupal-off-canvas hr {
- height: 1px;
- background: #ccc;
-}
-
-#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-size: 1.625em;
- font-weight: bold;
- line-height: 1.875em;
-}
-
-#drupal-off-canvas h2,
-#drupal-off-canvas .heading-b {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.385em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h3,
-#drupal-off-canvas .heading-c {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.231em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h4,
-#drupal-off-canvas .heading-d {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.154em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h5,
-#drupal-off-canvas .heading-e {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-
-#drupal-off-canvas h6,
-#drupal-off-canvas .heading-f {
- display: block;
- margin: 0.625rem 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-
-#drupal-off-canvas p {
- margin: 1em 0;
-}
-
-#drupal-off-canvas dl {
- margin: 0 0 1.25rem;
-}
-
-#drupal-off-canvas dl dd,
-#drupal-off-canvas dl dl {
- margin-bottom: 0.625rem;
- margin-left: 1.25rem; /* LTR */
-}
-
-[dir="rtl"] #drupal-off-canvas dl dd,
-[dir="rtl"] #drupal-off-canvas dl dl {
- margin-right: 1.25rem;
-}
-
-#drupal-off-canvas blockquote {
- margin: 1em 2.5rem;
-}
-
-#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 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;
- padding: 0.3125rem 0;
- border-bottom: 1px solid #333
-}
-
-#drupal-off-canvas ul li:last-child, #drupal-off-canvas ol li:last-child {
- padding-bottom: 0;
- border-bottom: none;
- }
-
-#drupal-off-canvas blockquote,
-#drupal-off-canvas code {
- margin: 1.25rem 0;
-}
-
-#drupal-off-canvas pre {
- margin: 1.25rem 0;
- white-space: pre-wrap;
-}
-
-#drupal-off-canvas details {
- display: block;
-}
-
-#drupal-off-canvas summary {
- display: list-item;
-}
-
-#drupal-off-canvas select::-ms-expand {
- display: block;
-}
-
-/* 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;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- width: 1px;
- height: 1px;
- word-wrap: normal;
-}
-
-#drupal-off-canvas .visually-hidden.focusable:active,
-#drupal-off-canvas .visually-hidden.focusable:focus {
- position: static !important;
- overflow: visible;
- clip: auto;
- width: auto;
- height: auto;
-}
-
-#drupal-off-canvas .invisible {
- visibility: hidden;
-}
-
-/* Some system classes. See system.admin.css. */
-
-#drupal-off-canvas .panel {
- padding: 0.3125rem 0.3125rem 0.9375rem;
-}
-
-#drupal-off-canvas .panel__description {
- margin: 0 0 0.1875rem;
- padding: 2px 0 0.1875rem 0;
-}
-
-#drupal-off-canvas .compact-link {
- margin: 0 0 0.625rem 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 0.625rem 1.0625rem;
-}
-
-[dir="rtl"] #drupal-off-canvas .messages {
- background-position: right 10px top 17px;
-}
-
-#drupal-off-canvas .messages abbr {
- color: #444;
-}
-
-#drupal-off-canvas .messages--status {
- color: #325e1c;
- background-color: #f3faef;
- background-image: url(../icons/73b355/check.svg);
-}
-
-#drupal-off-canvas .messages--warning {
- color: #734c00;
- background-color: #fdf8ed;
- background-image: url(../icons/e29700/warning.svg);
-}
-
-#drupal-off-canvas .messages--error {
- color: #a51b00;
- background-color: #fcf4f2;
- background-image: url(../icons/e32700/error.svg);
-}
-
-#drupal-off-canvas .messages--error div[role="alert"] {
- color: inherit;
- background: transparent;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.base.pcss.css b/core/themes/stable9/css/core/dialog/off-canvas.base.pcss.css
deleted file mode 100644
index 6ee3a286c2cb..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.base.pcss.css
+++ /dev/null
@@ -1,346 +0,0 @@
-/**
- * @file
- * Set base styles for the off-canvas dialog.
- */
-
-/* Set some global attributes. */
-#drupal-off-canvas {
- color: #ddd;
- background: #444;
-}
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-#drupal-off-canvas {
- & span,
- & applet,
- & object,
- & iframe,
- & h1,
- & h2,
- & h3,
- & h4,
- & h5,
- & h6,
- & p,
- & blockquote,
- & pre,
- & a,
- & abbr,
- & acronym,
- & address,
- & big,
- & button,
- & cite,
- & code,
- & del,
- & dfn,
- & em,
- & img,
- & ins,
- & kbd,
- & q,
- & s,
- & samp,
- & small,
- & strike,
- & strong,
- & sub,
- & sup,
- & tt,
- & var,
- & b,
- & u,
- & i,
- & center,
- & dl,
- & dt,
- & dd,
- & ol,
- & ul,
- & li,
- & fieldset,
- & form,
- & label,
- & legend,
- & table,
- & caption,
- & tbody,
- & tfoot,
- & thead,
- & tr,
- & th,
- & td,
- & article,
- & aside,
- & canvas,
- & details,
- & embed,
- & figure,
- & figcaption,
- & footer,
- & header,
- & hgroup,
- & main,
- & menu,
- & meter,
- & nav,
- & output,
- & progress,
- & ruby,
- & section,
- & summary,
- & time,
- & mark,
- & audio,
- & video,
- & input,
- & select,
- & textarea {
- color: inherit;
- background: inherit;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- }
-}
-
-/* Generic elements. */
-#drupal-off-canvas a,
-#drupal-off-canvas .link {
- cursor: pointer;
- transition: color 0.5s ease;
- text-decoration: none;
- color: #85bef4;
- border-bottom: none;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- font-size: inherit;
- font-weight: normal;
-}
-
-#drupal-off-canvas a:focus,
-#drupal-off-canvas .link:focus,
-#drupal-off-canvas a:hover,
-#drupal-off-canvas .link:hover {
- text-decoration: underline;
-}
-#drupal-off-canvas hr {
- height: 1px;
- background: #ccc;
-}
-#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-size: 1.625em;
- font-weight: bold;
- line-height: 1.875em;
-}
-#drupal-off-canvas h2,
-#drupal-off-canvas .heading-b {
- display: block;
- margin: 10px 0;
- font-size: 1.385em;
- font-weight: bold;
-}
-#drupal-off-canvas h3,
-#drupal-off-canvas .heading-c {
- display: block;
- margin: 10px 0;
- font-size: 1.231em;
- font-weight: bold;
-}
-#drupal-off-canvas h4,
-#drupal-off-canvas .heading-d {
- display: block;
- margin: 10px 0;
- font-size: 1.154em;
- font-weight: bold;
-}
-#drupal-off-canvas h5,
-#drupal-off-canvas .heading-e {
- display: block;
- margin: 10px 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-#drupal-off-canvas h6,
-#drupal-off-canvas .heading-f {
- display: block;
- margin: 10px 0;
- font-size: 1.077em;
- font-weight: bold;
-}
-#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-bottom: 10px;
- margin-left: 20px; /* LTR */
-}
-[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 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;
- padding: 5px 0;
- border-bottom: 1px solid #333;
- &:last-child {
- padding-bottom: 0;
- border-bottom: none;
- }
-}
-#drupal-off-canvas blockquote,
-#drupal-off-canvas code {
- margin: 20px 0;
-}
-#drupal-off-canvas pre {
- margin: 20px 0;
- white-space: pre-wrap;
-}
-#drupal-off-canvas details {
- display: block;
-}
-#drupal-off-canvas summary {
- display: list-item;
-}
-
-#drupal-off-canvas select::-ms-expand {
- display: block;
-}
-
-/* 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;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- width: 1px;
- height: 1px;
- word-wrap: normal;
-}
-#drupal-off-canvas .visually-hidden.focusable:active,
-#drupal-off-canvas .visually-hidden.focusable:focus {
- position: static !important;
- overflow: visible;
- clip: auto;
- width: auto;
- height: 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 {
- color: #325e1c;
- background-color: #f3faef;
- background-image: url(../icons/73b355/check.svg);
-}
-#drupal-off-canvas .messages--warning {
- color: #734c00;
- background-color: #fdf8ed;
- background-image: url(../icons/e29700/warning.svg);
-}
-
-#drupal-off-canvas .messages--error {
- color: #a51b00;
- background-color: #fcf4f2;
- background-image: url(../icons/e32700/error.svg);
-}
-
-#drupal-off-canvas .messages--error div[role="alert"] {
- color: inherit;
- background: transparent;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.button.css b/core/themes/stable9/css/core/dialog/off-canvas.button.css
deleted file mode 100644
index afc391898097..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.button.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * @file
- * Visual styling for buttons in the off-canvas dialog.
- */
-
-#drupal-off-canvas button,
-#drupal-off-canvas .button {
- margin: 0 0 10px;
- padding: 0;
- cursor: pointer;
- text-decoration: none;
- text-transform: none;
- border: 0;
- box-shadow: none;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- line-height: normal;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-#drupal-off-canvas button.link {
- display: inline;
- transition: color 0.5s ease;
- color: #85bef4;
- background: transparent;
- font-size: 14px;
-}
-#drupal-off-canvas button.link:hover,
-#drupal-off-canvas button.link:focus {
- text-decoration: none;
- color: #46a0f5;
-}
-#drupal-off-canvas input[type="submit"].button {
- position: relative;
- display: inline-block;
- width: 100%;
- height: auto;
- padding: 4px 20px;
- cursor: pointer;
- transition: background 0.5s ease;
- text-align: center;
- color: #f5f5f5;
- border: 0;
- border-radius: 20em;
- background: #777;
- font-size: 14px;
- font-weight: 600;
-}
-#drupal-off-canvas input[type="submit"].button:hover,
-#drupal-off-canvas input[type="submit"].button:focus,
-#drupal-off-canvas input[type="submit"].button:active {
- z-index: 10;
- text-decoration: none;
- color: #fff;
- border: 0;
- outline: none;
-}
-#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 {
- margin-top: 15px;
- color: #fff;
- border: 0;
- background: #277abd;
-}
-#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 {
- outline: none;
- background: #236aaf;
-}
-#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 {
- padding: 2px 1em;
- font-size: 13px;
-}
-#drupal-off-canvas .button:disabled,
-#drupal-off-canvas .button:disabled:active,
-#drupal-off-canvas .button.is-disabled,
-#drupal-off-canvas .button.is-disabled:active {
- cursor: default;
- color: #5c5c5c;
- border: 0;
- background: #555;
- font-weight: normal;
-}
-#drupal-off-canvas .button--danger {
- text-decoration: none;
- color: #c72100;
- border-radius: 0;
- font-weight: 400;
-}
-#drupal-off-canvas .button--danger:hover,
-#drupal-off-canvas .button--danger:focus,
-#drupal-off-canvas .button--danger:active {
- text-decoration: none;
- color: #ff2a00;
- text-shadow: none;
-}
-#drupal-off-canvas .button--danger:disabled,
-#drupal-off-canvas .button--danger.is-disabled {
- cursor: default;
- color: #737373;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.css b/core/themes/stable9/css/core/dialog/off-canvas.css
deleted file mode 100644
index 245dc7adb9f3..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.css
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * @file
- * CSS for off-canvas dialog.
- */
-
-/* Position the off-canvas dialog container outside the right of the viewport. */
-.ui-dialog-off-canvas {
- overflow: visible;
- box-sizing: border-box;
- height: 100%;
-}
-
-/* Wrap the form that's inside the off-canvas dialog. */
-.ui-dialog-off-canvas .ui-dialog-content {
- /* Prevent horizontal scrollbar. */
- overflow-x: hidden;
- overflow-y: auto;
- padding: 0 20px;
-}
-[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 {
- overflow: visible;
- box-sizing: border-box;
- height: 100%;
-}
-
-/* Wrap the form that's inside the off-canvas dialog. */
-.ui-dialog-off-canvas #drupal-off-canvas {
- /* Prevent horizontal scrollbar. */
- overflow-x: hidden;
- overflow-y: auto;
- padding: 0 20px 20px;
-}
-[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 {
- overflow-y: hidden;
- height: 100%;
- }
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.details.css b/core/themes/stable9/css/core/dialog/off-canvas.details.css
deleted file mode 100644
index 6991dd00c402..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.details.css
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * @file
- * Visual styling for summary and details in the off-canvas dialog.
- */
-
-#drupal-off-canvas details {
- display: block;
-}
-#drupal-off-canvas details,
-#drupal-off-canvas summary {
- 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 {
- color: #ddd;
- background: #474747;
-}
-#drupal-off-canvas summary a {
- padding-top: 0;
- padding-bottom: 0;
- color: #ddd;
-}
-#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 {
- /* Cancel out the padding of the parent. */
- margin: 0 -20px;
- padding: 0 20px;
- border-width: 0;
-}
-#drupal-off-canvas summary {
- padding: 10px 20px;
- transition: all 0.5s ease;
- text-shadow: none;
- font-size: 14px;
-}
-#drupal-off-canvas summary:hover,
-#drupal-off-canvas summary:focus {
- background-color: #222;
-}
-#drupal-off-canvas details[open] {
- padding-bottom: 10px;
-}
-#drupal-off-canvas details[open] > summary {
- color: #eee;
- background-color: #333;
-}
-#drupal-off-canvas details[open] > summary:hover {
- color: #fff;
- background-color: #222;
-}
-#drupal-off-canvas details .placeholder {
- color: inherit;
- background: transparent;
- font: inherit;
- font-style: italic;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.dropbutton.css b/core/themes/stable9/css/core/dialog/off-canvas.dropbutton.css
deleted file mode 100644
index 308f386b7151..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.dropbutton.css
+++ /dev/null
@@ -1,291 +0,0 @@
-/**
- * @file
- * Styles for dropbuttons in the off-canvas dialog.
- */
-
-#drupal-off-canvas .dropbutton-wrapper,
-#drupal-off-canvas .dropbutton-widget {
- position: static;
- display: block;
- transition: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-#drupal-off-canvas .dropbutton-widget {
- margin: 0;
- padding: 0;
- cursor: pointer;
- transition: background 0.5s ease;
- text-align: center;
- text-decoration: none;
- text-transform: none;
- color: #fff;
- border: 0;
- border-radius: 1em;
- background: #277abd;
- font-weight: 600;
- line-height: normal;
-}
-#drupal-off-canvas .dropbutton-widget:hover {
- background: #2b8bd8;
-}
-
-/*
- * Style dropbutton single.
- */
-
-#drupal-off-canvas .dropbutton-single .dropbutton-action a {
- height: 2.2em;
- /* Overlap icon for trigger. */
- margin-top: -2em;
- padding: 0;
- 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 {
- overflow: hidden;
- margin: 0;
- 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 {
- color: #333;
- outline: none;
- background: transparent;
-}
-
-/*
- * 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;
- white-space: nowrap;
- text-indent: 110%;
- color: #fff;
-}
-#drupal-off-canvas .dropbutton-toggle button {
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- cursor: pointer;
- border: 0 solid transparent;
- border-top-right-radius: 1em; /* LTR */
- border-bottom-right-radius: 1em; /* LTR */
-}
-#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;
- overflow: hidden;
- width: 0;
- height: 0;
- margin-top: 0;
- color: #fff;
- border-width: 0.3333em 0.3333em 0;
- border-style: solid;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: transparent;
- line-height: 0;
-}
-#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;
- margin-right: 0;
- margin-left: 0;
- padding-right: 0;
- padding-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 {
- position: relative;
- float: right; /* LTR */
- min-width: initial;
- max-width: initial;
- margin-right: 0;
- padding-right: 0;
-}
-#drupal-off-canvas td .dropbutton-widget .dropbutton {
- overflow: hidden;
- width: 2em;
- height: 2em;
- margin: 0;
- 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 {
- width: auto;
- margin-left: 0;
- 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 its 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 {
- z-index: 1;
- color: transparent;
-}
-
-/* Put pencil icon in place of hidden 'edit' text on single buttons. */
-#drupal-off-canvas td .dropbutton-single .edit:before {
- display: block;
- content: ".";
- 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;
- overflow: visible;
- width: auto;
- min-width: 0;
- max-width: none;
- height: auto;
- padding: 0;
-}
-
-/* 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-right: inherit;
- padding-left: 1em;
-}
-#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 {
- top: 2px;
- border-top-color: transparent;
- border-bottom: 0.3333em solid;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.form.css b/core/themes/stable9/css/core/dialog/off-canvas.form.css
deleted file mode 100644
index d4c39be5d949..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.form.css
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * @file
- * Visual styling for forms in the off-canvas dialog.
- */
-
-#drupal-off-canvas form {
- color: #ddd;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-}
-#drupal-off-canvas input[type="checkbox"] {
- -webkit-appearance: checkbox;
-}
-#drupal-off-canvas input[type="radio"] {
- -webkit-appearance: radio;
-}
-#drupal-off-canvas select:not([multiple]) {
- -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 {
- color: #ddd;
- font-family: inherit;
- font-size: 12px;
- font-weight: bold;
- line-height: normal;
-}
-#drupal-off-canvas .visually-hidden {
- width: 0;
- height: 0;
- letter-spacing: -2em;
- opacity: 0;
-}
-#drupal-off-canvas .description,
-#drupal-off-canvas .form-item .description,
-#drupal-off-canvas .details-description {
- margin-top: 5px;
- color: #ddd;
- font-family: inherit;
- font-size: 12px;
- font-style: normal;
-}
-#drupal-off-canvas .form-item {
- margin-top: 10px;
- margin-bottom: 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 {
- display: block;
- box-sizing: border-box;
- max-width: 100%;
- margin: 5px 0 0 0;
- padding: 6px;
- color: #333;
- border-width: 1px;
- border-radius: 2px;
- font-family: inherit;
- font-size: 14px;
- line-height: 16px;
-}
-/* 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 {
- color: #595959;
- border-color: #333;
- background-color: #eee;
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
-}
-#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;
- background-color: #fff;
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.125), 0 0 8px #40b6ff;
-}
-#drupal-off-canvas td .form-item,
-#drupal-off-canvas td .form-select {
- margin: 0;
-}
-#drupal-off-canvas .form-file {
- width: 100%;
- margin-bottom: 5px;
-}
-#drupal-off-canvas .form-actions {
- margin: 10px 0;
- text-align: center;
-}
-#drupal-off-canvas .ui-autocomplete {
- position: absolute;
- top: 0;
- left: 0;
- cursor: default;
- background-color: white;
-}
-#drupal-off-canvas .ui-autocomplete li {
- display: block;
-}
-#drupal-off-canvas .ui-autocomplete li a {
- padding: 5px;
- cursor: pointer;
- color: #595959 !important;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.layout.css b/core/themes/stable9/css/core/dialog/off-canvas.layout.css
deleted file mode 100644
index 3b2b52e38760..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.layout.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * @file
- * Visual styling for layouts in the off-canvas dialog.
- */
-
-.layout-icon__region {
- fill: #f5f5f2;
- stroke: #666;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.motion.css b/core/themes/stable9/css/core/dialog/off-canvas.motion.css
deleted file mode 100644
index 60d8d6a1dd2d..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.motion.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @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 {
- transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.reset.css b/core/themes/stable9/css/core/dialog/off-canvas.reset.css
deleted file mode 100644
index b0f121e74f8b..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.reset.css
+++ /dev/null
@@ -1,685 +0,0 @@
-/*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
-/**
- * @file
- * Reset most HTML elements styles for the off-canvas dialog.
- *
- * This is a generic reset. Drupal-specific classes are reset in components.
- */
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-
-#drupal-off-canvas span,
- #drupal-off-canvas applet,
- #drupal-off-canvas object,
- #drupal-off-canvas iframe,
- #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 p,
- #drupal-off-canvas blockquote,
- #drupal-off-canvas pre,
- #drupal-off-canvas a,
- #drupal-off-canvas abbr,
- #drupal-off-canvas acronym,
- #drupal-off-canvas address,
- #drupal-off-canvas big,
- #drupal-off-canvas button,
- #drupal-off-canvas cite,
- #drupal-off-canvas code,
- #drupal-off-canvas del,
- #drupal-off-canvas dfn,
- #drupal-off-canvas em,
- #drupal-off-canvas img,
- #drupal-off-canvas ins,
- #drupal-off-canvas kbd,
- #drupal-off-canvas q,
- #drupal-off-canvas s,
- #drupal-off-canvas samp,
- #drupal-off-canvas small,
- #drupal-off-canvas strike,
- #drupal-off-canvas strong,
- #drupal-off-canvas sub,
- #drupal-off-canvas sup,
- #drupal-off-canvas tt,
- #drupal-off-canvas var,
- #drupal-off-canvas b,
- #drupal-off-canvas u,
- #drupal-off-canvas i,
- #drupal-off-canvas center,
- #drupal-off-canvas dl,
- #drupal-off-canvas dt,
- #drupal-off-canvas dd,
- #drupal-off-canvas ol,
- #drupal-off-canvas ul,
- #drupal-off-canvas li,
- #drupal-off-canvas fieldset,
- #drupal-off-canvas form,
- #drupal-off-canvas label,
- #drupal-off-canvas legend,
- #drupal-off-canvas table,
- #drupal-off-canvas caption,
- #drupal-off-canvas tbody,
- #drupal-off-canvas tfoot,
- #drupal-off-canvas thead,
- #drupal-off-canvas tr,
- #drupal-off-canvas th,
- #drupal-off-canvas td,
- #drupal-off-canvas article,
- #drupal-off-canvas aside,
- #drupal-off-canvas canvas,
- #drupal-off-canvas details,
- #drupal-off-canvas embed,
- #drupal-off-canvas figure,
- #drupal-off-canvas figcaption,
- #drupal-off-canvas footer,
- #drupal-off-canvas header,
- #drupal-off-canvas hgroup,
- #drupal-off-canvas main,
- #drupal-off-canvas menu,
- #drupal-off-canvas meter,
- #drupal-off-canvas nav,
- #drupal-off-canvas output,
- #drupal-off-canvas progress,
- #drupal-off-canvas ruby,
- #drupal-off-canvas section,
- #drupal-off-canvas summary,
- #drupal-off-canvas time,
- #drupal-off-canvas mark,
- #drupal-off-canvas audio,
- #drupal-off-canvas video,
- #drupal-off-canvas input,
- #drupal-off-canvas select,
- #drupal-off-canvas textarea {
- all: initial;
- box-sizing: border-box;
- text-shadow: none;
- -webkit-font-smoothing: antialiased;
- -webkit-tap-highlight-color: initial
- }
-
-#drupal-off-canvas span:after,
- #drupal-off-canvas span:before,
- #drupal-off-canvas applet:after,
- #drupal-off-canvas applet:before,
- #drupal-off-canvas object:after,
- #drupal-off-canvas object:before,
- #drupal-off-canvas iframe:after,
- #drupal-off-canvas iframe:before,
- #drupal-off-canvas h1:after,
- #drupal-off-canvas h1:before,
- #drupal-off-canvas h2:after,
- #drupal-off-canvas h2:before,
- #drupal-off-canvas h3:after,
- #drupal-off-canvas h3:before,
- #drupal-off-canvas h4:after,
- #drupal-off-canvas h4:before,
- #drupal-off-canvas h5:after,
- #drupal-off-canvas h5:before,
- #drupal-off-canvas h6:after,
- #drupal-off-canvas h6:before,
- #drupal-off-canvas p:after,
- #drupal-off-canvas p:before,
- #drupal-off-canvas blockquote:after,
- #drupal-off-canvas blockquote:before,
- #drupal-off-canvas pre:after,
- #drupal-off-canvas pre:before,
- #drupal-off-canvas a:after,
- #drupal-off-canvas a:before,
- #drupal-off-canvas abbr:after,
- #drupal-off-canvas abbr:before,
- #drupal-off-canvas acronym:after,
- #drupal-off-canvas acronym:before,
- #drupal-off-canvas address:after,
- #drupal-off-canvas address:before,
- #drupal-off-canvas big:after,
- #drupal-off-canvas big:before,
- #drupal-off-canvas button:after,
- #drupal-off-canvas button:before,
- #drupal-off-canvas cite:after,
- #drupal-off-canvas cite:before,
- #drupal-off-canvas code:after,
- #drupal-off-canvas code:before,
- #drupal-off-canvas del:after,
- #drupal-off-canvas del:before,
- #drupal-off-canvas dfn:after,
- #drupal-off-canvas dfn:before,
- #drupal-off-canvas em:after,
- #drupal-off-canvas em:before,
- #drupal-off-canvas img:after,
- #drupal-off-canvas img:before,
- #drupal-off-canvas ins:after,
- #drupal-off-canvas ins:before,
- #drupal-off-canvas kbd:after,
- #drupal-off-canvas kbd:before,
- #drupal-off-canvas q:after,
- #drupal-off-canvas q:before,
- #drupal-off-canvas s:after,
- #drupal-off-canvas s:before,
- #drupal-off-canvas samp:after,
- #drupal-off-canvas samp:before,
- #drupal-off-canvas small:after,
- #drupal-off-canvas small:before,
- #drupal-off-canvas strike:after,
- #drupal-off-canvas strike:before,
- #drupal-off-canvas strong:after,
- #drupal-off-canvas strong:before,
- #drupal-off-canvas sub:after,
- #drupal-off-canvas sub:before,
- #drupal-off-canvas sup:after,
- #drupal-off-canvas sup:before,
- #drupal-off-canvas tt:after,
- #drupal-off-canvas tt:before,
- #drupal-off-canvas var:after,
- #drupal-off-canvas var:before,
- #drupal-off-canvas b:after,
- #drupal-off-canvas b:before,
- #drupal-off-canvas u:after,
- #drupal-off-canvas u:before,
- #drupal-off-canvas i:after,
- #drupal-off-canvas i:before,
- #drupal-off-canvas center:after,
- #drupal-off-canvas center:before,
- #drupal-off-canvas dl:after,
- #drupal-off-canvas dl:before,
- #drupal-off-canvas dt:after,
- #drupal-off-canvas dt:before,
- #drupal-off-canvas dd:after,
- #drupal-off-canvas dd:before,
- #drupal-off-canvas ol:after,
- #drupal-off-canvas ol:before,
- #drupal-off-canvas ul:after,
- #drupal-off-canvas ul:before,
- #drupal-off-canvas li:after,
- #drupal-off-canvas li:before,
- #drupal-off-canvas fieldset:after,
- #drupal-off-canvas fieldset:before,
- #drupal-off-canvas form:after,
- #drupal-off-canvas form:before,
- #drupal-off-canvas label:after,
- #drupal-off-canvas label:before,
- #drupal-off-canvas legend:after,
- #drupal-off-canvas legend:before,
- #drupal-off-canvas table:after,
- #drupal-off-canvas table:before,
- #drupal-off-canvas caption:after,
- #drupal-off-canvas caption:before,
- #drupal-off-canvas tbody:after,
- #drupal-off-canvas tbody:before,
- #drupal-off-canvas tfoot:after,
- #drupal-off-canvas tfoot:before,
- #drupal-off-canvas thead:after,
- #drupal-off-canvas thead:before,
- #drupal-off-canvas tr:after,
- #drupal-off-canvas tr:before,
- #drupal-off-canvas th:after,
- #drupal-off-canvas th:before,
- #drupal-off-canvas td:after,
- #drupal-off-canvas td:before,
- #drupal-off-canvas article:after,
- #drupal-off-canvas article:before,
- #drupal-off-canvas aside:after,
- #drupal-off-canvas aside:before,
- #drupal-off-canvas canvas:after,
- #drupal-off-canvas canvas:before,
- #drupal-off-canvas details:after,
- #drupal-off-canvas details:before,
- #drupal-off-canvas embed:after,
- #drupal-off-canvas embed:before,
- #drupal-off-canvas figure:after,
- #drupal-off-canvas figure:before,
- #drupal-off-canvas figcaption:after,
- #drupal-off-canvas figcaption:before,
- #drupal-off-canvas footer:after,
- #drupal-off-canvas footer:before,
- #drupal-off-canvas header:after,
- #drupal-off-canvas header:before,
- #drupal-off-canvas hgroup:after,
- #drupal-off-canvas hgroup:before,
- #drupal-off-canvas main:after,
- #drupal-off-canvas main:before,
- #drupal-off-canvas menu:after,
- #drupal-off-canvas menu:before,
- #drupal-off-canvas meter:after,
- #drupal-off-canvas meter:before,
- #drupal-off-canvas nav:after,
- #drupal-off-canvas nav:before,
- #drupal-off-canvas output:after,
- #drupal-off-canvas output:before,
- #drupal-off-canvas progress:after,
- #drupal-off-canvas progress:before,
- #drupal-off-canvas ruby:after,
- #drupal-off-canvas ruby:before,
- #drupal-off-canvas section:after,
- #drupal-off-canvas section:before,
- #drupal-off-canvas summary:after,
- #drupal-off-canvas summary:before,
- #drupal-off-canvas time:after,
- #drupal-off-canvas time:before,
- #drupal-off-canvas mark:after,
- #drupal-off-canvas mark:before,
- #drupal-off-canvas audio:after,
- #drupal-off-canvas audio:before,
- #drupal-off-canvas video:after,
- #drupal-off-canvas video:before,
- #drupal-off-canvas input:after,
- #drupal-off-canvas input:before,
- #drupal-off-canvas select:after,
- #drupal-off-canvas select:before,
- #drupal-off-canvas textarea:after,
- #drupal-off-canvas textarea: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 {
- margin: 0;
- padding: 0;
- border: 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;
- border-radius: 0;
- line-height: normal;
-}
-
-/*
- * 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 {
- vertical-align: middle;
- color: transparent;
- font-size: 0;
-}
-
-#drupal-off-canvas ul,
-#drupal-off-canvas ol {
- list-style: none;
-}
-
-/* reset table styling. */
-
-#drupal-off-canvas table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-
-#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: transparent none;
-}
-
-#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 {
- position: relative;
- vertical-align: baseline;
- line-height: 0;
-}
-
-#drupal-off-canvas sub {
- bottom: -0.25em;
-}
-
-#drupal-off-canvas sup {
- top: -0.5em;
-}
-
-/*
- * For IE9. Without, occasionally draws shapes
- * outside the boundaries of <svg> rectangle.
- */
-
-#drupal-off-canvas svg {
- overflow: hidden;
-}
-
-/* Specific resets for inputs. */
-
-#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
- display: none;
-}
-
-#drupal-off-canvas input {
- margin: 0;
- padding: 0;
-}
-
-#drupal-off-canvas input[type="checkbox"],
-#drupal-off-canvas input[type="radio"] {
- position: static;
- margin: 0;
-}
-
-#drupal-off-canvas input:invalid,
-#drupal-off-canvas button:invalid,
-#drupal-off-canvas select:invalid,
-#drupal-off-canvas textarea:invalid,
-#drupal-off-canvas input:focus,
-#drupal-off-canvas button:focus,
-#drupal-off-canvas select:focus,
-#drupal-off-canvas textarea:focus,
-#drupal-off-canvas input[type="file"]:focus,
-#drupal-off-canvas input[type="file"]:active,
-#drupal-off-canvas input[type="radio"]:focus,
-#drupal-off-canvas input[type="radio"]:active,
-#drupal-off-canvas input[type="checkbox"]:focus,
-#drupal-off-canvas input[type="checkbox"]:active {
- z-index: 1;
- box-shadow: none;
-}
-
-#drupal-off-canvas input[role="button"] {
- cursor: pointer;
-}
-
-#drupal-off-canvas button,
-#drupal-off-canvas input[type="reset"],
-#drupal-off-canvas input[type="submit"],
-#drupal-off-canvas input[type="button"] {
- display: inline-block;
- overflow: visible;
- cursor: pointer;
- vertical-align: middle;
- text-decoration: none;
- border: 0;
- outline: 0;
- background-image: none;
- text-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-
-#drupal-off-canvas button:hover,
-#drupal-off-canvas input[type="reset"]:hover,
-#drupal-off-canvas input[type="submit"]:hover,
-#drupal-off-canvas input[type="button"]:hover {
- text-decoration: none;
- background-image: none;
-}
-
-#drupal-off-canvas button:active,
-#drupal-off-canvas input[type="reset"]:active,
-#drupal-off-canvas input[type="submit"]:active,
-#drupal-off-canvas input[type="button"]:active {
- border-color: gray;
- background-image: none;
- box-shadow: none;
-}
-
-#drupal-off-canvas button::-moz-focus-inner,
-#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
-#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
-#drupal-off-canvas input[type="button"]::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-
-#drupal-off-canvas textarea,
-#drupal-off-canvas select,
-#drupal-off-canvas input[type="date"],
-#drupal-off-canvas input[type="datetime"],
-#drupal-off-canvas input[type="datetime-local"],
-#drupal-off-canvas input[type="email"],
-#drupal-off-canvas input[type="month"],
-#drupal-off-canvas input[type="number"],
-#drupal-off-canvas input[type="password"],
-#drupal-off-canvas input[type="search"],
-#drupal-off-canvas input[type="tel"],
-#drupal-off-canvas input[type="text"],
-#drupal-off-canvas input[type="time"],
-#drupal-off-canvas input[type="url"],
-#drupal-off-canvas input[type="week"] {
- height: auto;
- vertical-align: middle;
- border-radius: 0;
-}
-
-#drupal-off-canvas textarea[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas input[type="date"][disabled],
-#drupal-off-canvas input[type="datetime"][disabled],
-#drupal-off-canvas input[type="datetime-local"][disabled],
-#drupal-off-canvas input[type="email"][disabled],
-#drupal-off-canvas input[type="month"][disabled],
-#drupal-off-canvas input[type="number"][disabled],
-#drupal-off-canvas input[type="password"][disabled],
-#drupal-off-canvas input[type="search"][disabled],
-#drupal-off-canvas input[type="tel"][disabled],
-#drupal-off-canvas input[type="text"][disabled],
-#drupal-off-canvas input[type="time"][disabled],
-#drupal-off-canvas input[type="url"][disabled],
-#drupal-off-canvas input[type="week"][disabled] {
- background-color: gray;
-}
-
-#drupal-off-canvas input[type="hidden"] {
- visibility: hidden;
-}
-
-#drupal-off-canvas button[disabled],
-#drupal-off-canvas input[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas select[disabled] option,
-#drupal-off-canvas select[disabled] optgroup,
-#drupal-off-canvas textarea[disabled] {
- cursor: default;
- -webkit-user-select: none;
- user-select: none;
- box-shadow: none;
-}
-
-#drupal-off-canvas input:placeholder,
-#drupal-off-canvas textarea:placeholder {
- color: gray;
-}
-
-#drupal-off-canvas textarea,
-#drupal-off-canvas select[size],
-#drupal-off-canvas select[multiple] {
- height: auto;
-}
-
-#drupal-off-canvas select[size="0"],
-#drupal-off-canvas select[size="1"] {
- height: auto;
-}
-
-#drupal-off-canvas textarea {
- overflow: auto;
- width: 100%;
- min-height: 2.5rem;
- resize: vertical;
-}
-
-#drupal-off-canvas select[multiple] {
- overflow: auto;
-}
-
-#drupal-off-canvas optgroup {
- color: black;
- font-weight: normal;
- font-style: normal;
-}
-
-#drupal-off-canvas optgroup::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-
-#drupal-off-canvas * button {
- overflow: visible;
- width: auto;
- padding: 0;
- vertical-align: middle;
- text-decoration: none;
- color: black;
- border: 1px solid gray;
- background: none;
-}
-
-#drupal-off-canvas * textarea,
-#drupal-off-canvas * select,
-#drupal-off-canvas *:not(div) textarea,
-#drupal-off-canvas *:not(div) select {
- padding: 0;
- vertical-align: top;
- color: black;
- border: 1px solid gray;
- background: white;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.reset.pcss.css b/core/themes/stable9/css/core/dialog/off-canvas.reset.pcss.css
deleted file mode 100644
index facb3f9a460a..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.reset.pcss.css
+++ /dev/null
@@ -1,478 +0,0 @@
-/**
- * @file
- * Reset most HTML elements styles for the off-canvas dialog.
- *
- * This is a generic reset. Drupal-specific classes are reset in components.
- */
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-#drupal-off-canvas {
- & span,
- & applet,
- & object,
- & iframe,
- & h1,
- & h2,
- & h3,
- & h4,
- & h5,
- & h6,
- & p,
- & blockquote,
- & pre,
- & a,
- & abbr,
- & acronym,
- & address,
- & big,
- & button,
- & cite,
- & code,
- & del,
- & dfn,
- & em,
- & img,
- & ins,
- & kbd,
- & q,
- & s,
- & samp,
- & small,
- & strike,
- & strong,
- & sub,
- & sup,
- & tt,
- & var,
- & b,
- & u,
- & i,
- & center,
- & dl,
- & dt,
- & dd,
- & ol,
- & ul,
- & li,
- & fieldset,
- & form,
- & label,
- & legend,
- & table,
- & caption,
- & tbody,
- & tfoot,
- & thead,
- & tr,
- & th,
- & td,
- & article,
- & aside,
- & canvas,
- & details,
- & embed,
- & figure,
- & figcaption,
- & footer,
- & header,
- & hgroup,
- & main,
- & menu,
- & meter,
- & nav,
- & output,
- & progress,
- & ruby,
- & section,
- & summary,
- & time,
- & mark,
- & audio,
- & video,
- & input,
- & select,
- & textarea {
- all: initial;
- box-sizing: border-box;
- text-shadow: none;
- -webkit-font-smoothing: antialiased;
- -webkit-tap-highlight-color: initial;
-
- &:after,
- &: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 {
- margin: 0;
- padding: 0;
- border: 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;
- border-radius: 0;
- line-height: normal;
-}
-
-/*
- * 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 {
- vertical-align: middle;
- color: transparent;
- font-size: 0;
-}
-
-#drupal-off-canvas ul,
-#drupal-off-canvas ol {
- list-style: none;
-}
-
-/* reset table styling. */
-#drupal-off-canvas table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-#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: transparent none;
-}
-#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 {
- position: relative;
- vertical-align: baseline;
- line-height: 0;
-}
-#drupal-off-canvas sub {
- bottom: -0.25em;
-}
-#drupal-off-canvas sup {
- top: -0.5em;
-}
-
-/*
- * For IE9. Without, occasionally draws shapes
- * outside the boundaries of <svg> rectangle.
- */
-#drupal-off-canvas svg {
- overflow: hidden;
-}
-
-/* Specific resets for inputs. */
-#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
- display: none;
-}
-#drupal-off-canvas input {
- margin: 0;
- padding: 0;
-}
-#drupal-off-canvas input[type="checkbox"],
-#drupal-off-canvas input[type="radio"] {
- position: static;
- margin: 0;
-}
-#drupal-off-canvas input:invalid,
-#drupal-off-canvas button:invalid,
-#drupal-off-canvas select:invalid,
-#drupal-off-canvas textarea:invalid,
-#drupal-off-canvas input:focus,
-#drupal-off-canvas button:focus,
-#drupal-off-canvas select:focus,
-#drupal-off-canvas textarea:focus,
-#drupal-off-canvas input[type="file"]:focus,
-#drupal-off-canvas input[type="file"]:active,
-#drupal-off-canvas input[type="radio"]:focus,
-#drupal-off-canvas input[type="radio"]:active,
-#drupal-off-canvas input[type="checkbox"]:focus,
-#drupal-off-canvas input[type="checkbox"]:active {
- z-index: 1;
- box-shadow: none;
-}
-#drupal-off-canvas input[role="button"] {
- cursor: pointer;
-}
-#drupal-off-canvas button,
-#drupal-off-canvas input[type="reset"],
-#drupal-off-canvas input[type="submit"],
-#drupal-off-canvas input[type="button"] {
- display: inline-block;
- overflow: visible;
- cursor: pointer;
- vertical-align: middle;
- text-decoration: none;
- border: 0;
- outline: 0;
- background-image: none;
- text-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
-}
-#drupal-off-canvas button:hover,
-#drupal-off-canvas input[type="reset"]:hover,
-#drupal-off-canvas input[type="submit"]:hover,
-#drupal-off-canvas input[type="button"]:hover {
- text-decoration: none;
- background-image: none;
-}
-#drupal-off-canvas button:active,
-#drupal-off-canvas input[type="reset"]:active,
-#drupal-off-canvas input[type="submit"]:active,
-#drupal-off-canvas input[type="button"]:active {
- border-color: gray;
- background-image: none;
- box-shadow: none;
-}
-#drupal-off-canvas button::-moz-focus-inner,
-#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
-#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
-#drupal-off-canvas input[type="button"]::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-#drupal-off-canvas textarea,
-#drupal-off-canvas select,
-#drupal-off-canvas input[type="date"],
-#drupal-off-canvas input[type="datetime"],
-#drupal-off-canvas input[type="datetime-local"],
-#drupal-off-canvas input[type="email"],
-#drupal-off-canvas input[type="month"],
-#drupal-off-canvas input[type="number"],
-#drupal-off-canvas input[type="password"],
-#drupal-off-canvas input[type="search"],
-#drupal-off-canvas input[type="tel"],
-#drupal-off-canvas input[type="text"],
-#drupal-off-canvas input[type="time"],
-#drupal-off-canvas input[type="url"],
-#drupal-off-canvas input[type="week"] {
- height: auto;
- vertical-align: middle;
- border-radius: 0;
-}
-#drupal-off-canvas textarea[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas input[type="date"][disabled],
-#drupal-off-canvas input[type="datetime"][disabled],
-#drupal-off-canvas input[type="datetime-local"][disabled],
-#drupal-off-canvas input[type="email"][disabled],
-#drupal-off-canvas input[type="month"][disabled],
-#drupal-off-canvas input[type="number"][disabled],
-#drupal-off-canvas input[type="password"][disabled],
-#drupal-off-canvas input[type="search"][disabled],
-#drupal-off-canvas input[type="tel"][disabled],
-#drupal-off-canvas input[type="text"][disabled],
-#drupal-off-canvas input[type="time"][disabled],
-#drupal-off-canvas input[type="url"][disabled],
-#drupal-off-canvas input[type="week"][disabled] {
- background-color: gray;
-}
-#drupal-off-canvas input[type="hidden"] {
- visibility: hidden;
-}
-#drupal-off-canvas button[disabled],
-#drupal-off-canvas input[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas select[disabled] option,
-#drupal-off-canvas select[disabled] optgroup,
-#drupal-off-canvas textarea[disabled] {
- cursor: default;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- box-shadow: none;
-}
-#drupal-off-canvas input:placeholder,
-#drupal-off-canvas textarea:placeholder {
- color: gray;
-}
-#drupal-off-canvas textarea,
-#drupal-off-canvas select[size],
-#drupal-off-canvas select[multiple] {
- height: auto;
-}
-#drupal-off-canvas select[size="0"],
-#drupal-off-canvas select[size="1"] {
- height: auto;
-}
-#drupal-off-canvas textarea {
- overflow: auto;
- width: 100%;
- min-height: 40px;
- resize: vertical;
-}
-#drupal-off-canvas select[multiple] {
- overflow: auto;
-}
-#drupal-off-canvas optgroup {
- color: black;
- font-weight: normal;
- font-style: normal;
-}
-#drupal-off-canvas optgroup::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-#drupal-off-canvas * button {
- overflow: visible;
- width: auto;
- padding: 0;
- vertical-align: middle;
- text-decoration: none;
- color: black;
- border: 1px solid gray;
- background: none;
-}
-#drupal-off-canvas * textarea,
-#drupal-off-canvas * select,
-#drupal-off-canvas *:not(div) textarea,
-#drupal-off-canvas *:not(div) select {
- padding: 0;
- vertical-align: top;
- color: black;
- border: 1px solid gray;
- background: white;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.table.css b/core/themes/stable9/css/core/dialog/off-canvas.table.css
deleted file mode 100644
index 24154cdff3e5..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.table.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * @file
- * Visual styling for tables in the off-canvas dialog.
- */
-
-#drupal-off-canvas table * {
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-}
-#drupal-off-canvas table {
- display: table;
- width: 100%;
- min-width: calc(100% + 40px);
- /* Cancel out the padding of the parent to make the table full width. */
- margin: 0 -20px -10px -20px;
- color: #ddd;
- border: 0;
- border-collapse: collapse;
- font-size: 12px;
-}
-#drupal-off-canvas table thead {
- display: table-header-group;
-}
-#drupal-off-canvas table tbody {
- display: table-row-group;
-}
-#drupal-off-canvas tr {
- display: table-row;
-}
-#drupal-off-canvas tr:hover td {
- background-color: transparent;
-}
-
-#drupal-off-canvas td,
-#drupal-off-canvas th {
- display: table-cell;
- width: auto;
- height: auto;
- padding: 2px 8px;
- vertical-align: middle;
- border-bottom: 1px solid #777;
- background-color: transparent;
-}
-[dir="rtl"] #drupal-off-canvas th,
-[dir="rtl"] #drupal-off-canvas td {
- text-align: right;
-}
-#drupal-off-canvas th {
- font-weight: bold;
-}
-#drupal-off-canvas th.checkbox,
-#drupal-off-canvas td.checkbox {
- width: 20px;
- padding: 0;
- text-align: center;
-}
-#drupal-off-canvas div.checkbox.menu-enabled {
- position: static;
- display: inline;
- width: auto;
-}
-#drupal-off-canvas th:first-child,
-#drupal-off-canvas td:first-child {
- width: 150px;
-}
-/* For lack of a better class, using this to grab the operations th. */
-#drupal-off-canvas .tabledrag-has-colspan {
- padding-right: 20px;
- text-align: right;
-}
-#drupal-off-canvas td {
- padding: 6px 8px;
- color: #ddd;
-}
-/* Hide overflow with ellipsis for links. */
-#drupal-off-canvas td a {
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- background: transparent;
-}
-#drupal-off-canvas tr td:first-child,
-#drupal-off-canvas tr th:first-child {
- padding-left: 20px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas tr td:first-child,
-[dir="rtl"] #drupal-off-canvas tr th:first-child {
- padding-right: 20px;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.tabledrag.css b/core/themes/stable9/css/core/dialog/off-canvas.tabledrag.css
deleted file mode 100644
index db9d21fa4a10..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.tabledrag.css
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * @file
- * Table drag behavior for off-canvas dialog.
- *
- * @see tabledrag.js
- */
-
-#drupal-off-canvas .drag {
- cursor: move;
-}
-#drupal-off-canvas tr.region-title {
- font-weight: normal;
-}
-#drupal-off-canvas table .region-message {
- color: #fff;
-}
-#drupal-off-canvas table .region-populated {
- display: none;
-}
-#drupal-off-canvas .add-new .tabledrag-changed {
- display: none;
-}
-#drupal-off-canvas .draggable a.tabledrag-handle {
- float: left; /* LTR */
- overflow: hidden;
- min-width: 20px;
- height: auto;
- margin: 0 5px 0 0;
- padding: 0;
- cursor: move;
- text-decoration: none;
- background-image: none;
-}
-[dir="rtl"] #drupal-off-canvas .draggable a.tabledrag-handle {
- float: right;
- margin-right: 0;
- margin-left: 5px;
-}
-#drupal-off-canvas a.tabledrag-handle .handle {
- width: auto;
- height: auto;
- margin: 0;
- padding: 0;
- background-color: transparent;
- /* Use lighter drag icon against dark background. */
- background-image: url(../../../../../misc/icons/bebebe/move.svg);
- background-repeat: no-repeat;
- background-position: center;
-}
-#drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
-#drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {
- text-decoration: none;
- background-image: url(../../../../../misc/icons/787878/move.svg);
-}
-#drupal-off-canvas tr td {
- transition: background 0.3s ease;
-}
-
-#drupal-off-canvas tr td abbr {
- margin-left: 5px; /* LTR */
-}
-
-[dir="rtl"] #drupal-off-canvas tr td abbr {
- margin-right: 5px;
- margin-left: 0;
-}
-#drupal-off-canvas tr:hover td {
- background: #222;
-}
-#drupal-off-canvas tr.drag td {
- background: #111;
-}
-#drupal-off-canvas tr.drag-previous td {
- background: #000;
-}
-#drupal-off-canvas tr.drag-previous:hover td {
- background: #222;
-}
-body div.tabledrag-changed-warning {
- margin-bottom: 0.5em;
- font-size: 14px;
-}
-#drupal-off-canvas .touchevents .draggable td {
- padding: 0 10px;
-}
-#drupal-off-canvas .touchevents .draggable .menu-item__link {
- display: inline-block;
- padding: 10px 0;
-}
-#drupal-off-canvas .touchevents a.tabledrag-handle {
- width: 40px;
- height: 44px;
-}
-#drupal-off-canvas .touchevents a.tabledrag-handle .handle {
- height: 21px;
- background-position: 40% 19px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .touch a.tabledrag-handle .handle {
- background-position: right 40% top 19px;
-}
-#drupal-off-canvas .touchevents .draggable.drag a.tabledrag-handle .handle {
- background-position: 50% -32px;
-}
-#drupal-off-canvas .tabledrag-toggle-weight-wrapper {
- padding-top: 10px;
- text-align: right; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .tabledrag-toggle-weight-wrapper {
- text-align: left;
-}
-#drupal-off-canvas .indentation {
- float: left; /* LTR */
- width: auto;
- height: auto;
- margin: 0 3px 0 -10px; /* LTR */
- padding: 0 0 0 10px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .indentation {
- float: right;
- margin: 0 -10px 0 3px;
- padding: 0 10px 0 0;
-}
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.theme.css b/core/themes/stable9/css/core/dialog/off-canvas.theme.css
deleted file mode 100644
index 5bf667a330bc..000000000000
--- a/core/themes/stable9/css/core/dialog/off-canvas.theme.css
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * @file
- * Styling for the off-canvas ui dialog. Including overrides for jQuery UI.
- */
-
-/* Style the dialog-off-canvas container. */
-.ui-dialog.ui-dialog-off-canvas {
- /* Layer the dialog just under the toolbar. */
- z-index: 501;
- padding: 0;
- color: #ddd;
- border-radius: 0;
- background: #444;
- box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
-}
-.ui-widget.ui-dialog.ui-dialog-off-canvas {
- border: 1px solid transparent;
-}
-
-/* Style the off-canvas dialog header. */
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- padding: 1em;
- color: #fff;
- border: 0;
- border-bottom: 1px solid #000;
- border-radius: 0;
- background: #2d2d2d;
- font-weight: normal;
-}
-/* Hide the default jQuery UI dialog close button. */
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
- visibility: hidden;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- position: absolute;
- top: calc(50% - 6px);
- right: 1em;
- width: 30px;
- height: 30px;
- transition: all 0.5s ease;
- border: 3px solid transparent;
- background-color: transparent;
- background-image: url(../../../../../misc/icons/bebebe/ex.svg);
- background-repeat: no-repeat;
- background-position: center center;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
- border: 3px solid #fff;
- background-image: url(../../../../../misc/icons/ffffff/ex.svg);
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- right: auto;
- left: 1em;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- /* Ensure that long titles do not overlap the close button. */
- max-width: 210px;
- margin: 0;
- padding-right: 0; /* LTR */
- /* Push the text away from the icon. */
- padding-left: 30px; /* LTR */
- text-align: left; /* LTR */
- /* Ensure that long titles are not truncated. */
- white-space: normal;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
- font-size: 16px;
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
- float: right;
- padding-right: 30px;
- padding-left: 0;
- text-align: right;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
- position: absolute;
- top: 0;
- left: 1em; /* LTR */
- display: block;
- width: 20px;
- height: 100%;
- content: "";
- background: transparent url(../../../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
- background-size: 100% auto;
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
- right: 1em;
- left: auto;
-}
-
-/* Override default styling from jQuery UI. */
-#drupal-off-canvas .ui-state-default,
-#drupal-off-canvas .ui-widget-content .ui-state-default,
-#drupal-off-canvas .ui-widget-header .ui-state-default {
- color: #333;
- border: 0;
- font-size: 14px;
- font-weight: normal;
-}
-#drupal-off-canvas .ui-widget-content a {
- color: #85bef4;
-}
--
GitLab