From d2cf243c4907ff28520912444baff5062b32e1e9 Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Thu, 11 Jun 2020 13:01:21 +0100
Subject: [PATCH] Issue #3023311 by bnjmnm, huzooka, kostyashupenko,
boulaffasae, nod_, mrinalini9, codersukanta, lauriii, fhaeberle, ckrina,
Peter Majmesku, andrewmacpherson, saschaeggi, antonellasevero, DyanneNova,
thekishanraval: Modal dialog style update
(cherry picked from commit 74bad3ce90f903df9ffdec32056bb5d036d3182d)
---
core/themes/claro/claro.info.yml | 7 +
core/themes/claro/claro.libraries.yml | 8 +
core/themes/claro/css/base/elements.css | 3 +
.../claro/css/base/off-canvas.theme.css | 130 ++++++++++
.../claro/css/base/off-canvas.theme.pcss.css | 71 ++++++
core/themes/claro/css/base/variables.css | 3 +
core/themes/claro/css/base/variables.pcss.css | 16 ++
.../themes/claro/css/components/accordion.css | 3 +
.../claro/css/components/action-link.css | 3 +
.../css/components/ajax-progress.module.css | 13 +-
.../components/ajax-progress.module.pcss.css | 10 +-
.../autocomplete-loading.module.css | 3 +
.../claro/css/components/breadcrumb.css | 3 +
core/themes/claro/css/components/button.css | 3 +
core/themes/claro/css/components/card.css | 3 +
.../claro/css/components/content-header.css | 3 +
core/themes/claro/css/components/details.css | 3 +
core/themes/claro/css/components/dialog.css | 228 ++++++++++++------
.../claro/css/components/dialog.pcss.css | 183 ++++++++------
core/themes/claro/css/components/divider.css | 3 +
.../claro/css/components/dropbutton.css | 3 +
.../claro/css/components/entity-meta.css | 3 +
core/themes/claro/css/components/fieldset.css | 3 +
core/themes/claro/css/components/file.css | 3 +
.../components/form--checkbox-radio--ie.css | 3 +
.../css/components/form--checkbox-radio.css | 3 +
.../css/components/form--field-multiple.css | 3 +
.../css/components/form--managed-file.css | 3 +
.../css/components/form--password-confirm.css | 3 +
.../claro/css/components/form--select.css | 3 +
.../claro/css/components/form--text.css | 3 +
core/themes/claro/css/components/form.css | 3 +
.../claro/css/components/image-preview.css | 3 +
.../claro/css/components/jquery.ui/theme.css | 11 +-
.../css/components/jquery.ui/theme.pcss.css | 8 +-
.../claro/css/components/media-library.ui.css | 62 +++++
.../css/components/media-library.ui.pcss.css | 10 +
core/themes/claro/css/components/messages.css | 3 +
.../claro/css/components/page-title.css | 3 +
core/themes/claro/css/components/pager.css | 3 +
core/themes/claro/css/components/progress.css | 3 +
core/themes/claro/css/components/shortcut.css | 3 +
.../components/system-admin--admin-list.css | 3 +
.../css/components/system-admin--panel.css | 3 +
.../table--file-multiple-widget.css | 3 +
.../themes/claro/css/components/tabledrag.css | 3 +
core/themes/claro/css/components/tables.css | 3 +
.../claro/css/components/tableselect.css | 3 +
core/themes/claro/css/components/tabs.css | 3 +
.../claro/css/components/vertical-tabs.css | 3 +
.../css/components/views-exposed-form.css | 3 +
core/themes/claro/css/layout/breadcrumb.css | 3 +
core/themes/claro/css/layout/card-list.css | 3 +
.../themes/claro/css/layout/local-actions.css | 3 +
core/themes/claro/css/layout/node-add.css | 3 +
.../claro/css/theme/ckeditor-dialog.css | 3 +
.../claro/css/theme/ckeditor-editor.css | 3 +
.../themes/claro/css/theme/ckeditor-frame.css | 3 +
.../themes/claro/css/theme/field-ui.admin.css | 3 +
core/themes/claro/css/theme/filter.theme.css | 3 +
.../claro/css/theme/views_ui.admin.theme.css | 57 ++++-
.../css/theme/views_ui.admin.theme.pcss.css | 16 +-
core/themes/claro/js/media-library.ui.es6.js | 68 ++++++
core/themes/claro/js/media-library.ui.js | 46 ++++
64 files changed, 919 insertions(+), 166 deletions(-)
create mode 100644 core/themes/claro/css/base/off-canvas.theme.css
create mode 100644 core/themes/claro/css/base/off-canvas.theme.pcss.css
create mode 100644 core/themes/claro/css/components/media-library.ui.css
create mode 100644 core/themes/claro/css/components/media-library.ui.pcss.css
create mode 100644 core/themes/claro/js/media-library.ui.es6.js
create mode 100644 core/themes/claro/js/media-library.ui.js
diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml
index d04bf1df4d62..99397ee0fc10 100644
--- a/core/themes/claro/claro.info.yml
+++ b/core/themes/claro/claro.info.yml
@@ -38,6 +38,11 @@ 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:
@@ -117,6 +122,8 @@ libraries-extend:
- claro/views
media/media_embed_ckeditor_theme:
- claro/classy.media_embed_ckeditor_theme
+ media_library/ui:
+ - claro/media_library.ui
media_library/view:
- claro/media_library.theme
media_library/widget:
diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml
index 99baaeb38cd2..d4fbca84199c 100644
--- a/core/themes/claro/claro.libraries.yml
+++ b/core/themes/claro/claro.libraries.yml
@@ -259,6 +259,14 @@ media_library.theme:
theme:
css/theme/media-library.css: {}
+media_library.ui:
+ version: VERSION
+ css:
+ component:
+ css/components/media-library.ui.css : {}
+ js:
+ js/media-library.ui.js: { weight: -1 }
+
progress:
version: VERSION
css:
diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index 9d17479b8761..4e7f11f6ed8f 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -39,6 +39,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/base/off-canvas.theme.css b/core/themes/claro/css/base/off-canvas.theme.css
new file mode 100644
index 000000000000..7a4553eb26d7
--- /dev/null
+++ b/core/themes/claro/css/base/off-canvas.theme.css
@@ -0,0 +1,130 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling for the off-canvas ui dialog.
+ *
+ * Contains overrides for jQuery UI dialog.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+/* 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: 0.75rem 3rem 0.75rem 1rem; /* LTR */
+ border: 0;
+ border-bottom: 1px solid #000;
+ border-radius: 0;
+ background: #2d2d2d;
+ line-height: 1.5;
+}
+
+[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
+ padding-right: 1rem;
+ padding-left: 3rem;
+}
+
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
+ /* Push the text away from the icon. */
+ padding-left: 1.75rem; /* 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: 1rem;
+}
+
+[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
+ padding-right: 1.75rem;
+ padding-left: 0;
+ background-position: 100% 50%;
+}
+
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
+ margin-right: 1rem;
+ margin-left: 1rem;
+}
+
+/* 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: 0.889rem;
+ font-weight: normal;
+}
+
+#drupal-off-canvas .ui-widget-content a {
+ color: #85bef4;
+}
diff --git a/core/themes/claro/css/base/off-canvas.theme.pcss.css b/core/themes/claro/css/base/off-canvas.theme.pcss.css
new file mode 100644
index 000000000000..cafe85fd06d8
--- /dev/null
+++ b/core/themes/claro/css/base/off-canvas.theme.pcss.css
@@ -0,0 +1,71 @@
+/**
+ * @file
+ * Styling for the off-canvas ui dialog.
+ *
+ * Contains overrides for jQuery UI dialog.
+ */
+
+@import "./variables.pcss.css";
+
+/* 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: #85bef4;
+}
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index aa4737c0426b..6bbe2fa2d1dc 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -34,6 +34,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index fbbfa04c7e08..bb1a2a7bdab3 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -155,6 +155,22 @@
--jui-dropdown--active-bg-color: var(--color-absolutezero);
--jui-dropdown-border-color: rgba(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
--jui-dropdown-shadow-color: rgba(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
+ --jui-dialog-title-color: var(--color-white);
+ --jui-dialog-title-bg-color: var(--color-text);
+ --jui-dialog-title-font-size: var(--font-size-h4);
+ --jui-dialog-close-button-size: calc(var(--space-m) * 2);
+ --jui-dialog-close-button-border-radius: 50%;
+ --jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
+ --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
+ --jui-dialog-border-radius: 4px;
+ --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
+ --jui-dialog--focus-outline: 2px dotted transparent;
+ --jui-dialog--focus-box-shadow: 0 0 0 3px var(--color-focus);
+ --jui-dialog-z-index: 1260;
+ --jui-dialog-off-canvas-z-index: 501;
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css
index 00092a224487..ad22ee6b12bc 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index c76e40f91446..c416653a66de 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/ajax-progress.module.css b/core/themes/claro/css/components/ajax-progress.module.css
index b17d3e9ec4a3..b6c57359749c 100644
--- a/core/themes/claro/css/components/ajax-progress.module.css
+++ b/core/themes/claro/css/components/ajax-progress.module.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
@@ -136,7 +139,8 @@
* Full screen throbber.
*/
-.ajax-progress--fullscreen {
+.ajax-progress--fullscreen,
+.ui-dialog .ajax-progress--throbber {
position: fixed;
z-index: 1000;
top: 50%;
@@ -151,7 +155,8 @@
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
}
-.ajax-progress__throbber--fullscreen {
+.ajax-progress__throbber--fullscreen,
+.ui-dialog .ajax-progress__throbber {
position: absolute;
top: 50%;
left: 50%;
@@ -163,6 +168,10 @@
border-right: 3px dotted transparent;
}
+.ui-dialog .ajax-progress__message {
+ display: none;
+}
+
@media screen and (-ms-high-contrast: active) {
/**
* Throbber animation is shaky on Edge RTL on high contrast for border width
diff --git a/core/themes/claro/css/components/ajax-progress.module.pcss.css b/core/themes/claro/css/components/ajax-progress.module.pcss.css
index 91a595f39456..5047f3f2201d 100644
--- a/core/themes/claro/css/components/ajax-progress.module.pcss.css
+++ b/core/themes/claro/css/components/ajax-progress.module.pcss.css
@@ -79,7 +79,8 @@
/**
* Full screen throbber.
*/
-.ajax-progress--fullscreen {
+.ajax-progress--fullscreen,
+.ui-dialog .ajax-progress--throbber {
position: fixed;
z-index: 1000;
top: 50%;
@@ -93,7 +94,8 @@
background: var(--color-white);
box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
}
-.ajax-progress__throbber--fullscreen {
+.ajax-progress__throbber--fullscreen,
+.ui-dialog .ajax-progress__throbber {
position: absolute;
top: 50%;
left: 50%;
@@ -105,6 +107,10 @@
border-right: 3px dotted transparent;
}
+.ui-dialog .ajax-progress__message {
+ display: none;
+}
+
@media screen and (-ms-high-contrast: active) {
/**
* Throbber animation is shaky on Edge RTL on high contrast for border width
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css
index 4c49059d3e1b..719c74a1af99 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/breadcrumb.css b/core/themes/claro/css/components/breadcrumb.css
index b496acca6775..68c6590ea560 100644
--- a/core/themes/claro/css/components/breadcrumb.css
+++ b/core/themes/claro/css/components/breadcrumb.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css
index 8594ae4390c9..4c65335ee9a3 100644
--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/card.css b/core/themes/claro/css/components/card.css
index 533f01984168..4e45e719a1bc 100644
--- a/core/themes/claro/css/components/card.css
+++ b/core/themes/claro/css/components/card.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/content-header.css b/core/themes/claro/css/components/content-header.css
index 47ae19d73fbc..3cfc2addf006 100644
--- a/core/themes/claro/css/components/content-header.css
+++ b/core/themes/claro/css/components/content-header.css
@@ -39,6 +39,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index a36ce5dd2a16..335b2a56f549 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css
index aa9a8e72e87a..50c70ae6a3ec 100644
--- a/core/themes/claro/css/components/dialog.css
+++ b/core/themes/claro/css/components/dialog.css
@@ -6,96 +6,178 @@
*/
/**
+ * @file
* Presentational styles for Drupal dialogs.
*/
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
.ui-dialog {
- position: absolute;
- z-index: 1260;
padding: 0;
border: 0;
+ border-radius: 4px;
background: transparent;
+ box-shadow: 0
+0
+1rem
+-0.25rem
+#222330;
+}
+
+.ui-dialog:focus {
+ outline: 2px
+dotted
+transparent;
+ box-shadow: 0
+0
+0
+3px
+#26a769;
}
@media all and (max-width: 48em) { /* 768px */
- .ui-dialog {
+ .ui-dialog:not(.ui-dialog-off-canvas) {
min-width: 92%;
max-width: 92%;
}
}
.ui-dialog .ui-dialog-titlebar {
- padding: 15px 49px 15px 15px; /* LTR */
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- background: #6b6b6b;
+ position: relative;
+ box-sizing: border-box;
+ padding: 1rem 4rem 1rem 1.5rem; /* LTR */
+ color: #fff;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ background: #222330;
+ line-height: 2rem;
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
- padding-right: 15px;
- padding-left: 49px;
+ padding-right: 1.5rem;
+ padding-left: 4rem;
}
.ui-dialog .ui-dialog-title {
- margin: 0;
- color: #fff;
- font-size: 1.231em;
- font-weight: 600;
-webkit-font-smoothing: antialiased;
+ font-size: 1.424rem;
+ font-weight: bold;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
- top: 10px;
- right: 12px; /* LTR */
- width: 30px;
- height: 30px;
- margin: 0;
+ top: 50%;
+ right: 0; /* LTR */
+ box-sizing: border-box;
+ width: 2rem;
+ height: 2rem;
+ margin: 0 1.5rem;
padding: 0;
transition: all 0.1s;
- border: 3px solid #6b6b6b;
- border-radius: 5px;
+ transform: translateY(-50%);
+ border: 2px solid transparent;
+ border-radius: 50%;
background: none;
}
-.ui-dialog .ui-dialog-titlebar-close:hover,
-.ui-dialog .ui-dialog-titlebar-close:focus {
+[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
+ right: auto;
+ left: 0;
+}
+
+.ui-dialog .ui-dialog-titlebar-close:hover {
border-color: #fff;
}
-[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
- right: auto;
- left: 20px;
+.ui-dialog .ui-dialog-titlebar-close:focus {
+ border-color: #26a769;
+ outline: 2px
+dotted
+transparent;
+ box-shadow: none;
}
.ui-dialog .ui-icon.ui-icon-closethick {
- margin-top: -8px;
- background: url(../../images/core/ffffff/ex.svg) 0 0 no-repeat;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ transform: translate(-50%, -50%);
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23D4D4D8' stroke-width='1.5' d='M19,9L9,19'/%3E%3Cpath stroke='%23D4D4D8' stroke-width='1.5' d='M19,19L9,9'/%3E%3C/svg%3E%0A") 50% 50% / 100% 100% no-repeat;
}
-.ui-dialog .ui-widget-content.ui-dialog-content {
+.ui-dialog > .ui-dialog-content {
overflow: auto;
- padding: 1em;
+ padding-right: 1.5rem;
+ padding-left: 1.5rem;
+ color: #222330;
background: #fff;
}
-.views-ui-dialog .ui-widget-content.ui-dialog-content {
- padding: 0;
+/**
+ * @todo it should not be necessary to specify not(.views-ui-dialog) after
+ * https://drupal.org/node/3066006
+ */
+
+.ui-dialog:not(.views-ui-dialog) > .ui-dialog-content {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
}
-.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
- /* border-top: 1px solid #bfbfbf; */
- margin: 0;
- padding: 15px 20px;
- border-bottom-right-radius: 5px;
- border-bottom-left-radius: 5px;
- background: #f5f5f2;
+.ui-dialog > .ui-dialog-buttonpane {
+ color: #222330;
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px;
+ background: #f3f4f9;
}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
- float: none;
- margin: 0;
- padding: 0;
+.ui-dialog-buttonpane .ui-dialog-buttonset {
+ justify-content: flex-end;
+ margin: 0 0.75rem;
}
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
@@ -113,41 +195,37 @@
padding: 0;
}
-.ui-dialog .ajax-progress-throbber {
- position: fixed;
- z-index: 1000;
- top: 48.5%;
- /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
- left: 49%; /* LTR */
- width: 24px;
- height: 24px;
- padding: 4px;
- opacity: 0.9;
- border-radius: 7px;
- background-color: #232323;
- background-image: url(../../images/loading-small.gif);
- background-repeat: no-repeat;
- background-position: center center;
-}
-
-[dir="rtl"] .ui-dialog .ajax-progress-throbber {
- right: 49%;
- left: auto;
-}
-
-.ui-dialog .ajax-progress-throbber .throbber,
-.ui-dialog .ajax-progress-throbber .message {
- display: none;
-}
+/**
+ * Off-canvas styles.
+ */
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- position: relative;
+.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
+ background: none;
}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- top: 10px;
-}
+@media screen and (-ms-high-contrast: active) {
+ .ui-dialog .ui-icon.ui-icon-closethick {
+ background: none;
+ }
-.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
- background: none;
+ .ui-dialog .ui-icon.ui-icon-closethick::before,
+ .ui-dialog .ui-icon.ui-icon-closethick::after {
+ position: relative;
+ display: block;
+ width: 50%;
+ height: 100%;
+ content: "";
+ }
+ .ui-dialog .ui-icon.ui-icon-closethick::before {
+ top: -40%;
+ left: 60%;
+ transform: rotate(45deg);
+ border-bottom: 2px white solid;
+ }
+ .ui-dialog .ui-icon.ui-icon-closethick::after {
+ top: -78%;
+ left: 60%;
+ transform: rotate(-45deg);
+ border-top: 2px white solid;
+ }
}
diff --git a/core/themes/claro/css/components/dialog.pcss.css b/core/themes/claro/css/components/dialog.pcss.css
index f3d8f84cb706..3b631a295248 100644
--- a/core/themes/claro/css/components/dialog.pcss.css
+++ b/core/themes/claro/css/components/dialog.pcss.css
@@ -1,88 +1,122 @@
/**
+ * @file
* Presentational styles for Drupal dialogs.
*/
+@import "../base/variables.pcss.css";
+
.ui-dialog {
- position: absolute;
- z-index: 1260;
padding: 0;
border: 0;
+ border-radius: var(--jui-dialog-border-radius);
background: transparent;
+ box-shadow: var(--jui-dialog-box-shadow);
+}
+
+.ui-dialog:focus {
+ outline: var(--jui-dialog--focus-outline);
+ box-shadow: var(--jui-dialog--focus-box-shadow);
}
@media all and (max-width: 48em) { /* 768px */
- .ui-dialog {
+ .ui-dialog:not(.ui-dialog-off-canvas) {
min-width: 92%;
max-width: 92%;
}
}
+
.ui-dialog .ui-dialog-titlebar {
- padding: 15px 49px 15px 15px; /* LTR */
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- background: #6b6b6b;
+ position: relative;
+ box-sizing: border-box;
+ padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */
+ color: var(--jui-dialog-title-color);
+ border-top-left-radius: var(--jui-dialog-border-radius);
+ border-top-right-radius: var(--jui-dialog-border-radius);
+ background: var(--jui-dialog-title-bg-color);
+ line-height: calc(var(--space-m) * 2);
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
- padding-right: 15px;
- padding-left: 49px;
+ padding-right: var(--space-l);
+ padding-left: var(--jui-dialog-close-button-reserved-space);
}
+
.ui-dialog .ui-dialog-title {
- margin: 0;
- color: #fff;
- font-size: 1.231em;
- font-weight: 600;
-webkit-font-smoothing: antialiased;
+ font-size: var(--jui-dialog-title-font-size);
+ font-weight: bold;
}
+
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
- top: 10px;
- right: 12px; /* LTR */
- width: 30px;
- height: 30px;
- margin: 0;
+ top: 50%;
+ right: 0; /* LTR */
+ box-sizing: border-box;
+ width: var(--jui-dialog-close-button-size);
+ height: var(--jui-dialog-close-button-size);
+ margin: 0 var(--space-l);
padding: 0;
- -webkit-transition: all 0.1s;
transition: all 0.1s;
- border: 3px solid #6b6b6b;
- border-radius: 5px;
+ transform: translateY(-50%);
+ border: 2px solid transparent;
+ border-radius: var(--jui-dialog-close-button-border-radius);
background: none;
}
-.ui-dialog .ui-dialog-titlebar-close:hover,
-.ui-dialog .ui-dialog-titlebar-close:focus {
- border-color: #fff;
-}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
right: auto;
- left: 20px;
+ left: 0;
+}
+
+.ui-dialog .ui-dialog-titlebar-close:hover {
+ border-color: var(--color-white);
+}
+
+.ui-dialog .ui-dialog-titlebar-close:focus {
+ border-color: var(--color-focus);
+ outline: var(--jui-dialog--focus-outline);
+ box-shadow: none;
}
+
.ui-dialog .ui-icon.ui-icon-closethick {
- margin-top: -8px;
- background: url(../../images/core/ffffff/ex.svg) 0 0 no-repeat;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ transform: translate(-50%, -50%);
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23D4D4D8' stroke-width='1.5' d='M19,9L9,19'/%3E%3Cpath stroke='%23D4D4D8' stroke-width='1.5' d='M19,19L9,9'/%3E%3C/svg%3E%0A") 50% 50% / 100% 100% no-repeat;
}
-.ui-dialog .ui-widget-content.ui-dialog-content {
+
+.ui-dialog > .ui-dialog-content {
overflow: auto;
- padding: 1em;
- background: #fff;
+ padding-right: var(--space-l);
+ padding-left: var(--space-l);
+ color: var(--color-text);
+ background: var(--color-white);
}
-.views-ui-dialog .ui-widget-content.ui-dialog-content {
- padding: 0;
+
+/**
+ * @todo it should not be necessary to specify not(.views-ui-dialog) after
+ * https://drupal.org/node/3066006
+ */
+.ui-dialog:not(.views-ui-dialog) > .ui-dialog-content {
+ padding-top: var(--space-m);
+ padding-bottom: var(--space-m);
}
-.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
- /* border-top: 1px solid #bfbfbf; */
- margin: 0;
- padding: 15px 20px;
- border-bottom-right-radius: 5px;
- border-bottom-left-radius: 5px;
- background: #f5f5f2;
+
+.ui-dialog > .ui-dialog-buttonpane {
+ color: var(--color-text);
+ border-bottom-right-radius: var(--jui-dialog-border-radius);
+ border-bottom-left-radius: var(--jui-dialog-border-radius);
+ background: var(--color-whitesmoke);
}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
- float: none;
- margin: 0;
- padding: 0;
+
+.ui-dialog-buttonpane .ui-dialog-buttonset {
+ justify-content: flex-end;
+ margin: 0 var(--space-s);
}
+
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
padding: 0;
}
+
.ui-dialog .ui-dialog-content {
position: static;
}
@@ -92,36 +126,37 @@
margin: 0;
padding: 0;
}
-.ui-dialog .ajax-progress-throbber {
- position: fixed;
- z-index: 1000;
- top: 48.5%;
- /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
- left: 49%; /* LTR */
- width: 24px;
- height: 24px;
- padding: 4px;
- opacity: 0.9;
- border-radius: 7px;
- background-color: #232323;
- background-image: url(../../images/loading-small.gif);
- background-repeat: no-repeat;
- background-position: center center;
-}
-[dir="rtl"] .ui-dialog .ajax-progress-throbber {
- right: 49%;
- left: auto;
-}
-.ui-dialog .ajax-progress-throbber .throbber,
-.ui-dialog .ajax-progress-throbber .message {
- display: none;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
- position: relative;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
- top: 10px;
-}
+
+/**
+ * Off-canvas styles.
+ */
.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
background: none;
}
+
+@media screen and (-ms-high-contrast: active) {
+ .ui-dialog .ui-icon.ui-icon-closethick {
+ background: none;
+ }
+
+ .ui-dialog .ui-icon.ui-icon-closethick::before,
+ .ui-dialog .ui-icon.ui-icon-closethick::after {
+ position: relative;
+ display: block;
+ width: 50%;
+ height: 100%;
+ content: "";
+ }
+ .ui-dialog .ui-icon.ui-icon-closethick::before {
+ top: -40%;
+ left: 60%;
+ transform: rotate(45deg);
+ border-bottom: 2px white solid;
+ }
+ .ui-dialog .ui-icon.ui-icon-closethick::after {
+ top: -78%;
+ left: 60%;
+ transform: rotate(-45deg);
+ border-top: 2px white solid;
+ }
+}
diff --git a/core/themes/claro/css/components/divider.css b/core/themes/claro/css/components/divider.css
index 2bd585d19026..e9770d9a78cc 100644
--- a/core/themes/claro/css/components/divider.css
+++ b/core/themes/claro/css/components/divider.css
@@ -39,6 +39,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index d0fd2346620f..b7b12ad0bf96 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -44,6 +44,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css
index 6245dea4db96..df8b2e42c777 100644
--- a/core/themes/claro/css/components/entity-meta.css
+++ b/core/themes/claro/css/components/entity-meta.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index 06329f359349..9ce2a07f5c26 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css
index 30d5f44cf173..3a665195ca8d 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.css b/core/themes/claro/css/components/form--checkbox-radio--ie.css
index 77aa8b72411d..e481f834f3e7 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css
index ff7aa40edabc..7099b8244f92 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/form--field-multiple.css b/core/themes/claro/css/components/form--field-multiple.css
index 67f9110a576d..c597737b91b2 100644
--- a/core/themes/claro/css/components/form--field-multiple.css
+++ b/core/themes/claro/css/components/form--field-multiple.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/form--managed-file.css b/core/themes/claro/css/components/form--managed-file.css
index 4fa4b2ea4118..fd64aef504ed 100644
--- a/core/themes/claro/css/components/form--managed-file.css
+++ b/core/themes/claro/css/components/form--managed-file.css
@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index 304b1b702ef3..341906c4adc0 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/form--select.css b/core/themes/claro/css/components/form--select.css
index 989ed67d32c1..44d8bd019d46 100644
--- a/core/themes/claro/css/components/form--select.css
+++ b/core/themes/claro/css/components/form--select.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index f7c7923296c3..069ce83154f6 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index e614b9e8dbcd..4788e0889d55 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/image-preview.css b/core/themes/claro/css/components/image-preview.css
index 3d1a03f53c8d..2bd4c2cee7df 100644
--- a/core/themes/claro/css/components/image-preview.css
+++ b/core/themes/claro/css/components/image-preview.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css
index 02bd28410c92..21ab5e86db87 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.css
@@ -41,6 +41,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
@@ -67,6 +70,10 @@
border: none;
}
+.ui-dialog {
+ z-index: 1260;
+}
+
/**
* Interaction states
*/
@@ -584,9 +591,9 @@
*/
.ui-widget-overlay {
+ z-index: 1259;
opacity: 0.7;
- filter: alpha(Opacity=70);
- background: #000;
+ background: #222330;
}
/**
diff --git a/core/themes/claro/css/components/jquery.ui/theme.pcss.css b/core/themes/claro/css/components/jquery.ui/theme.pcss.css
index f463e02818a1..8f50092dae46 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.pcss.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.pcss.css
@@ -16,6 +16,10 @@
border: none;
}
+.ui-dialog {
+ z-index: var(--jui-dialog-z-index);
+}
+
/**
* Interaction states
*/
@@ -332,9 +336,9 @@
* Overlays
*/
.ui-widget-overlay {
+ z-index: calc(var(--jui-dialog-z-index) - 1);
opacity: 0.7;
- filter: alpha(Opacity=70);
- background: #000;
+ background: var(--color-text);
}
/**
diff --git a/core/themes/claro/css/components/media-library.ui.css b/core/themes/claro/css/components/media-library.ui.css
new file mode 100644
index 000000000000..28a860a6c56f
--- /dev/null
+++ b/core/themes/claro/css/components/media-library.ui.css
@@ -0,0 +1,62 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for the Media Library UI.
+ */
+
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
+.media-library-selected-count {
+ margin: 0 1.5rem;
+}
diff --git a/core/themes/claro/css/components/media-library.ui.pcss.css b/core/themes/claro/css/components/media-library.ui.pcss.css
new file mode 100644
index 000000000000..b072d5765e73
--- /dev/null
+++ b/core/themes/claro/css/components/media-library.ui.pcss.css
@@ -0,0 +1,10 @@
+/**
+ * @file
+ * Styles for the Media Library UI.
+ */
+
+@import "../base/variables.pcss.css";
+
+.media-library-selected-count {
+ margin: 0 var(--space-l);
+}
diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index 76985ea47415..19f4337628c9 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/page-title.css b/core/themes/claro/css/components/page-title.css
index 959a33edcaf3..6902784fc5e0 100644
--- a/core/themes/claro/css/components/page-title.css
+++ b/core/themes/claro/css/components/page-title.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/pager.css b/core/themes/claro/css/components/pager.css
index 8af345573b84..ded775731cc7 100644
--- a/core/themes/claro/css/components/pager.css
+++ b/core/themes/claro/css/components/pager.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css
index 4e86569a9d82..668a3cece04f 100644
--- a/core/themes/claro/css/components/progress.css
+++ b/core/themes/claro/css/components/progress.css
@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css
index a77f8697d483..2c0b770a4235 100644
--- a/core/themes/claro/css/components/shortcut.css
+++ b/core/themes/claro/css/components/shortcut.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/system-admin--admin-list.css b/core/themes/claro/css/components/system-admin--admin-list.css
index 1a8b935fedda..a93d40009b77 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css
index 5fee5d9361af..a61d1a843430 100644
--- a/core/themes/claro/css/components/system-admin--panel.css
+++ b/core/themes/claro/css/components/system-admin--panel.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.css b/core/themes/claro/css/components/table--file-multiple-widget.css
index 4f3f3558b6fc..7dfe534c01c8 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css
index d63e8dd8f317..78eb37f4eded 100644
--- a/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -44,6 +44,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index 3af16a7a95c7..8fde30a72ffa 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/tableselect.css b/core/themes/claro/css/components/tableselect.css
index 0f6bf1e40254..92cf414d95f3 100644
--- a/core/themes/claro/css/components/tableselect.css
+++ b/core/themes/claro/css/components/tableselect.css
@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css
index 969feff85941..44475558c4e4 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -39,6 +39,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index 9ef276898513..d36caaa806c5 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -42,6 +42,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/components/views-exposed-form.css b/core/themes/claro/css/components/views-exposed-form.css
index 1ba2cc82a0f1..38132caf29c7 100644
--- a/core/themes/claro/css/components/views-exposed-form.css
+++ b/core/themes/claro/css/components/views-exposed-form.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/layout/breadcrumb.css b/core/themes/claro/css/layout/breadcrumb.css
index d87cb095b781..543d2a9d93f1 100644
--- a/core/themes/claro/css/layout/breadcrumb.css
+++ b/core/themes/claro/css/layout/breadcrumb.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/layout/card-list.css b/core/themes/claro/css/layout/card-list.css
index 5e67aadb3d93..0492c59eb6ab 100644
--- a/core/themes/claro/css/layout/card-list.css
+++ b/core/themes/claro/css/layout/card-list.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/layout/local-actions.css b/core/themes/claro/css/layout/local-actions.css
index 38786c74a4d2..da609e7c0a00 100644
--- a/core/themes/claro/css/layout/local-actions.css
+++ b/core/themes/claro/css/layout/local-actions.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css
index b92d66f7fbbd..3a2fcf21ed3b 100644
--- a/core/themes/claro/css/layout/node-add.css
+++ b/core/themes/claro/css/layout/node-add.css
@@ -39,6 +39,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/theme/ckeditor-dialog.css b/core/themes/claro/css/theme/ckeditor-dialog.css
index 7772914c29ff..ddd02ab93b1d 100644
--- a/core/themes/claro/css/theme/ckeditor-dialog.css
+++ b/core/themes/claro/css/theme/ckeditor-dialog.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css
index 8fad4a5f7d9b..da469f592e79 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.css
@@ -38,6 +38,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/theme/ckeditor-frame.css b/core/themes/claro/css/theme/ckeditor-frame.css
index d31034199232..cead1e493ab9 100644
--- a/core/themes/claro/css/theme/ckeditor-frame.css
+++ b/core/themes/claro/css/theme/ckeditor-frame.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/theme/field-ui.admin.css b/core/themes/claro/css/theme/field-ui.admin.css
index 9ab712aa5b51..46a2c930d5d9 100644
--- a/core/themes/claro/css/theme/field-ui.admin.css
+++ b/core/themes/claro/css/theme/field-ui.admin.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css
index 1b1f503c869b..28762abee9b7 100644
--- a/core/themes/claro/css/theme/filter.theme.css
+++ b/core/themes/claro/css/theme/filter.theme.css
@@ -40,6 +40,9 @@
/**
* jQuery.UI dropdown.
*/ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
/**
* Progress bar.
*/
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.css b/core/themes/claro/css/theme/views_ui.admin.theme.css
index b6ff977e292f..b68ca897d699 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.css
@@ -12,6 +12,53 @@
* Replaces the styles provided by the views_ui module.
*/
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+}
+
.views-admin .links {
margin: 0;
list-style: none outside none;
@@ -790,15 +837,17 @@ td.group-title {
.views-ui-dialog .views-progress-indicator {
position: absolute;
- top: 32px;
- right: 10px; /* LTR */
+ z-index: 1;
+ top: 0;
+ right: 4rem; /* LTR */
color: #fff;
- font-size: 11px;
+ font-size: 0.702rem;
+ line-height: 4rem;
}
[dir="rtl"] .views-ui-dialog .views-progress-indicator {
right: auto;
- left: 10px;
+ left: 4rem;
}
.views-ui-dialog .views-progress-indicator:before {
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
index 76e8121cd268..9c20079ad700 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
@@ -5,6 +5,8 @@
* Replaces the styles provided by the views_ui module.
*/
+@import "../base/variables.pcss.css";
+
.views-admin .links {
margin: 0;
list-style: none outside none;
@@ -633,17 +635,21 @@ td.group-title {
.views-ui-dialog .views-override > * {
margin: 0;
}
+
.views-ui-dialog .views-progress-indicator {
position: absolute;
- top: 32px;
- right: 10px; /* LTR */
- color: #fff;
- font-size: 11px;
+ z-index: 1;
+ top: 0;
+ right: var(--jui-dialog-close-button-reserved-space); /* LTR */
+ color: var(--jui-dialog-title-color);
+ font-size: var(--font-size-xxs);
+ line-height: var(--jui-dialog-close-button-reserved-space);
}
[dir="rtl"] .views-ui-dialog .views-progress-indicator {
right: auto;
- left: 10px;
+ left: var(--jui-dialog-close-button-reserved-space);
}
+
.views-ui-dialog .views-progress-indicator:before {
content: "\003C\00A0";
}
diff --git a/core/themes/claro/js/media-library.ui.es6.js b/core/themes/claro/js/media-library.ui.es6.js
new file mode 100644
index 000000000000..882139455814
--- /dev/null
+++ b/core/themes/claro/js/media-library.ui.es6.js
@@ -0,0 +1,68 @@
+/**
+ * @file
+ * Media Library overrides for Claro
+ */
+(($, Drupal, window) => {
+ /**
+ * Update the media library selection when loaded or media items are selected.
+ *
+ * @type {Drupal~behavior}
+ *
+ * @prop {Drupal~behaviorAttach} attach
+ * Attaches behavior to select media items.
+ */
+ Drupal.behaviors.MediaLibraryItemSelectionClaro = {
+ attach() {
+ // Move the selection count to the beginning of the button pane after it
+ // has been added to the Media Library dialog.
+ // @todo replace with theme function override in
+ // https://drupal.org/node/3134526
+ $(window)
+ .once('media-library-selection-info-claro-event')
+ .on('dialog:aftercreate', (event, dialog, $element, settings) => {
+ // Since the dialog HTML is not part of the context, we can't use
+ // context here.
+ const moveCounter = ($selectedCount, $buttonPane) => {
+ const $moveSelectedCount = $selectedCount.detach();
+ $buttonPane.prepend($moveSelectedCount);
+ };
+
+ const $buttonPane = $element
+ .closest('.media-library-widget-modal')
+ .find('.ui-dialog-buttonpane');
+ if (!$buttonPane.length) {
+ return;
+ }
+ const $selectedCount = $buttonPane.find(
+ '.js-media-library-selected-count',
+ );
+
+ // If the `selected` counter is already present, it can be moved from
+ // the end of the button pane to the beginning.
+ if ($selectedCount.length) {
+ moveCounter($selectedCount, $buttonPane);
+ } else {
+ // If the `selected` counter is not yet present, create a mutation
+ // observer that checks for items added to the button pane. As soon
+ // as the counter is added, move it from the end of the button pane
+ // to the beginning.
+ const selectedCountObserver = new MutationObserver(() => {
+ const $selectedCountFind = $buttonPane.find(
+ '.js-media-library-selected-count',
+ );
+ if ($selectedCountFind.length) {
+ moveCounter($selectedCountFind, $buttonPane);
+ selectedCountObserver.disconnect();
+ }
+ });
+ selectedCountObserver.observe($buttonPane[0], {
+ attributes: false,
+ childList: true,
+ characterData: false,
+ subtree: true,
+ });
+ }
+ });
+ },
+ };
+})(jQuery, Drupal, window);
diff --git a/core/themes/claro/js/media-library.ui.js b/core/themes/claro/js/media-library.ui.js
new file mode 100644
index 000000000000..ddf44a4e4521
--- /dev/null
+++ b/core/themes/claro/js/media-library.ui.js
@@ -0,0 +1,46 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal, window) {
+ Drupal.behaviors.MediaLibraryItemSelectionClaro = {
+ attach: function attach() {
+ $(window).once('media-library-selection-info-claro-event').on('dialog:aftercreate', function (event, dialog, $element, settings) {
+ var moveCounter = function moveCounter($selectedCount, $buttonPane) {
+ var $moveSelectedCount = $selectedCount.detach();
+ $buttonPane.prepend($moveSelectedCount);
+ };
+
+ var $buttonPane = $element.closest('.media-library-widget-modal').find('.ui-dialog-buttonpane');
+
+ if (!$buttonPane.length) {
+ return;
+ }
+
+ var $selectedCount = $buttonPane.find('.js-media-library-selected-count');
+
+ if ($selectedCount.length) {
+ moveCounter($selectedCount, $buttonPane);
+ } else {
+ var selectedCountObserver = new MutationObserver(function () {
+ var $selectedCountFind = $buttonPane.find('.js-media-library-selected-count');
+
+ if ($selectedCountFind.length) {
+ moveCounter($selectedCountFind, $buttonPane);
+ selectedCountObserver.disconnect();
+ }
+ });
+ selectedCountObserver.observe($buttonPane[0], {
+ attributes: false,
+ childList: true,
+ characterData: false,
+ subtree: true
+ });
+ }
+ });
+ }
+ };
+})(jQuery, Drupal, window);
\ No newline at end of file
--
GitLab