diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml
index d04bf1df4d6257e85de899a2e56a2994d13c475d..99397ee0fc105be0e8c817a03ef00850cf08b174 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 99baaeb38cd20e101781c25baae1227da86f8fae..d4fbca84199c1674e7ada2358e112fbe6d81c81c 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 9d17479b876193959a606e2c54430546d33fc11b..4e7f11f6ed8f4a6197d6e0666a724d2216481611 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 0000000000000000000000000000000000000000..7a4553eb26d7bdfa3e71c2d8577027694d8287e4
--- /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 0000000000000000000000000000000000000000..cafe85fd06d806bae824f809bd6c5327e4f87fd7
--- /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 aa4737c0426b0e594117ff69211fea6726a4a4cc..6bbe2fa2d1dc6e367122bfc49c2d48db7e15aa5d 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 fbbfa04c7e08dd9cb0b99f3ce2afdac1ed5a6cf9..bb1a2a7bdab3c3a74bb63da76c8531ccccfafe0b 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 00092a224487ad84f308d0e1c808c2f2d4caed64..ad22ee6b12bc1e7a44d8549049f6adb580f3a335 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 c76e40f91446d5d4bc0c1071774d89f8302c9cc8..c416653a66de2e0510dbe87cb6761cadcee0703f 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 b17d3e9ec4a337a328c0ec50ff279c59f6ece7f9..b6c57359749c38ef2ce04921894082c3f39a9498 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 91a595f39456d81915848c3e43d9c0d1d75e6ba7..5047f3f2201dbdd7a660abdb7bacbd2f898e3721 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 4c49059d3e1bec9be8f4d782eb73724086c43c8f..719c74a1af99b487b5c6915d557ac7d6882fd163 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 b496acca6775eca92f9f79ff1e965994d241103a..68c6590ea56093053a252dcdc39d8a8092c10087 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 8594ae4390c9f72833c71d5c91307d55e3763f96..4c65335ee9a30211d185e12f539e96a1d0437b52 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 533f019841687d1a59b261a3829903334079a07f..4e45e719a1bca77dae50bf5444fddfea4e874c30 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 47ae19d73fbcddf71f589472128848ec018e61a8..3cfc2addf006dcd2731fc3a01db3ccbfafe0b042 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 a36ce5dd2a162b8374d0403acc89fd3e6887cac1..335b2a56f549617ee600051d64cf49f4de01c4e2 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 aa9a8e72e87a7ef3e13dacd55b5a8c400f036851..50c70ae6a3ec956a78cb69a6a870b03215132f13 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 f3d8f84cb706ec60b77cb7ac2c585eb7101f44e5..3b631a295248265e2162052103de20d8040486f9 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 2bd585d19026e06b0f69a7fc1eca56fbc2df64c2..e9770d9a78ccb2bcd63a6c7b20fa986497953759 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 d0fd2346620f3ed52768cf59d3751a408d4dc3d4..b7b12ad0bf969670ae8a47a41e3ea76754ff30dc 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 6245dea4db96f2ff77ad0c8205ab1c1738fe72a4..df8b2e42c77727a221fc738c6da8390c266c580a 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 06329f359349e4dfc7c61bc1937e377e7e3faebd..9ce2a07f5c26fa30d934af2eba3a512d0d12ca46 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 30d5f44cf173a318155e74d6391d82748d260d72..3a665195ca8d0333fe61fd268a33cc3aaabb377f 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 77aa8b72411d3bee22657040cd5118cf66f08f5a..e481f834f3e7e146cc228936fd85889d51e45bc6 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 ff7aa40edabcb2d429ec081e0bb440262cba16ef..7099b8244f92c2b6fdcc7f0ac37e836aa1d23f11 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 67f9110a576d581b8bec0fe4dcbf1f841a2c6ece..c597737b91b221f613e4984476f01955e5133c3e 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 4fa4b2ea4118325629be78bb98986a19f565acd1..fd64aef504ed384f4ffd9118eb28504d0be8630e 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 304b1b702ef3bccc978c8ccde7b75e93aed6273c..341906c4adc024c1cf29134c2106726e3f140793 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 989ed67d32c1198ef4b5bc653c77c7e1e38f271e..44d8bd019d465bdeafaf13510ec3c1639877a0c9 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 f7c7923296c3b14fdcf924ea136b055ca966bfca..069ce83154f64558589bd58356bca747f1769cc4 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 9a0e45e0dd8a047a378f75e644ffe4582d0c1c81..a933522a98f9986163e85813f63e7a943d7d8c80 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 3d1a03f53c8df0d6403a4806480aa3a94af72f02..2bd4c2cee7dfaad0bc1b039a9df72b5f254efec2 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 02bd28410c929362220a5ff4ca52facd02d94320..21ab5e86db8775aa4cb0cff9e5a567e9cd732446 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 f463e02818a12859ef649ee77a4747c718c37143..8f50092dae4627203e7ca18c4c3bb5fc50556500 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 0000000000000000000000000000000000000000..28a860a6c56f35cf676707b0f9735ef97a8cde82
--- /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 0000000000000000000000000000000000000000..b072d5765e73d71d4503a670568817bbb8fa6d75
--- /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 76985ea47415f249993bc14f9a628e0ac3d115bb..19f4337628c916c727c5cfd3196cda084be18925 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 959a33edcaf3b1e0f1de2891fce665258f819b9b..6902784fc5e09fdab1095c027456bf8b2a934e46 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 8af345573b84a8bada636cacc3fd47d4e0299c74..ded775731cc7c417f3ae567abc4388ab384a71c3 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 4e86569a9d8266418d4b9c123e672bbf968470ba..668a3cece04f8d31b368ed0bb05b215d47e1d7f3 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 a77f8697d483b6ceab62d6f66e62c07df05bb7b2..2c0b770a42355908f4ce49f1675d2d2f993ee582 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 1a8b935fedda2cec3b6678f5af2275a15a2af63c..a93d40009b771e80b7860bcc0a206a4ad2e05a05 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 5fee5d9361af8383913cfa45947822c87f3ab145..a61d1a843430fe2f9df4de46b1c43030cc54696c 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 4f3f3558b6fcbaef49579b3504c23e39c3e7bbac..7dfe534c01c814b66007eab1c02870d043ef4475 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 d63e8dd8f31775b1027dffb2fdddd69687d2dade..78eb37f4eded4416412ff00992e8619160adb1aa 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 3af16a7a95c77ce3feb502b087de35023b89cea6..8fde30a72ffacdbb33969c1cb83a1de46f89b153 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 0f6bf1e402544a59848922abccf62fa62acafb06..92cf414d95f3e8f172fadc4ed8f0f136789eaea7 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 969feff8594191562e708890cdb0345076659a85..44475558c4e49d66e752f0f4fa21678f338f1d10 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 9ef276898513d7ff642b0e5d1337845be3d90343..d36caaa806c55aa84babde504822b9a3252720de 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 1ba2cc82a0f1ddd6a1ebb65581a1eb545d560d57..38132caf29c730f4458e103cd6820bf21cc891be 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 d87cb095b781f0cc4eb605e6e561f992b78e1d66..543d2a9d93f1cfa5a40788b31b502b63a687081b 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 5e67aadb3d937deea4205d92246fac9ebd4755ae..0492c59eb6ab64529734e9fe000450905fc296fb 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 38786c74a4d2955c0ab6b89affb83957a04292bd..da609e7c0a0006a1767a3468dc0bd0ac4c4485bc 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 b92d66f7fbbdcaa759e0717e68e647004e6a648c..3a2fcf21ed3bc7b09e1d0f870fef8d5b8bc22ffa 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 7772914c29ff0f12ce13bfe891e7da19c70681eb..ddd02ab93b1d00f8e025fa7372e3988fdfa22e04 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 8fad4a5f7d9b2893d4fd64a2b79082cd6dc3d0f7..da469f592e79a9d624f782058fc644737228f30f 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 d31034199232c667ac85cd0904afa23d98ca883d..cead1e493ab9d9566fa5f8dd6f8c722b86794955 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 9ab712aa5b5185b4d4285fd15b986d6aa4ad4408..46a2c930d5d9d34c7b6647bc914375e64efd807a 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 1b1f503c869b5779517b01ecd43734dbb4f6ab46..28762abee9b7a5beedfb292923268094fd5922eb 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 b6ff977e292f3b2f21bd23a0df97733904b81140..b68ca897d699c500a7aeadd6f2aef89da731e5fe 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 76e8121cd2685e66e9de25f546dc744eb0b3d061..9c20079ad700b62b9f7999fb964af130200a99c6 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 0000000000000000000000000000000000000000..882139455814fc4d6d67960db970bfba8d42d46d
--- /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 0000000000000000000000000000000000000000..ddf44a4e4521f0130b48161dd800aa9f7507e2c6
--- /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