diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml
index 99397ee0fc..65f57efcd4 100644
--- a/core/themes/claro/claro.info.yml
+++ b/core/themes/claro/claro.info.yml
@@ -76,6 +76,14 @@ libraries-override:
theme:
css/field_ui.admin.css: css/theme/field-ui.admin.css
+ toolbar/toolbar:
+ css:
+ theme:
+ css/toolbar.theme.css: css/theme/toolbar.theme.css
+ css/toolbar.icons.theme.css: css/theme/toolbar.icons.theme.css
+ component:
+ css/toolbar.module.css: css/components/toolbar.module.css
+
views_ui/admin.styling:
css:
theme:
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index 5d735acb6b..3605df505e 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -1413,3 +1413,24 @@ function claro_preprocess_links__media_library_menu(array &$variables) {
}
}
}
+
+/**
+ * Implements hook_preprocess_toolbar().
+ */
+function claro_preprocess_toolbar(&$variables) {
+ // Move items that should appear last to the end of the array so they are also
+ // last in the DOM.
+ $push_right_class = TRUE;
+ foreach(['workspace', 'contextual', 'tour'] as $item_name) {
+ if (isset($variables['tabs'][$item_name])) {
+ $item = $variables['tabs'][$item_name];
+ unset($variables['tabs'][$item_name]);
+ $variables['tabs'][$item_name] = $item;
+ // Add a class to the first item to move the items to the right.
+ if($push_right_class) {
+ $variables['tabs'][$item_name]['attributes']->addClass('toolbar-tab--push-end');
+ $push_right_class = FALSE;
+ }
+ }
+ }
+}
diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index 92f9c7fb95..c9a0297050 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -54,6 +54,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
html {
diff --git a/core/themes/claro/css/base/off-canvas.theme.css b/core/themes/claro/css/base/off-canvas.theme.css
index 2e42193f1b..e879073113 100644
--- a/core/themes/claro/css/base/off-canvas.theme.css
+++ b/core/themes/claro/css/base/off-canvas.theme.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/* Style the dialog-off-canvas container. */
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 69dc17481c..a57535f500 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -49,4 +49,6 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index c0987bb801..66fbb1f0af 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -196,4 +196,49 @@
* Breadcrumb.
*/
--breadcrumb-height: 1.25rem;
+
+ /* Toolbar */
+ --toolbar-font-size: var(--font-size-s);
+ --toolbar-tray-fg-color: var(--color-text);
+ --toolbar-tray-bg-color: var(--color-white);
+ --toolbar-tray-border-color: var(--color-lightgray);
+ --toolbar-tray-border-color--horizontal: rgba(216, 217, 224, 0.8); /* Light gray with 0.8 opacity */
+ --toolbar-tray-border-size: 1px;
+ --toolbar-tab-fg-color: var(--color-white);
+ --toolbar-tab-bg-color: var(--color-text);
+ --toolbar-tab-bg-color--hover: var(--color-oldsilver);
+ --toolbar-tab-bg-color--active: var(--color-grayblue);
+ --toolbar-tab-bg-color--is-active: var(--color-davysgrey);
+ --toolbar-tab-padding--horizontal: calc(var(--space-m) - 1px);
+ --toolbar-tab-padding--vertical: var(--space-s);
+ --toolbar-tab-padding--vertical--large: var(--space-m);
+ --toolbar-tab-line-height: var(--space-m);
+ --toolbar-tab-line-height--large: var(--space-s);
+ --toolbar-tab-height: calc(var(--toolbar-tab-line-height) + (var(--toolbar-tab-padding--vertical) * 2));
+ --toolbar-tab-height--large: calc(var(--toolbar-tab-line-height--large) + (var(--toolbar-tab-padding--vertical--large) * 2));
+ --toolbar-tray-link-fg-color: var(--color-davysgrey);
+ --toolbar-tray-link-fg-color--is-active: var(--color-absolutezero);
+ --toolbar-tray-link-fg-color--hover: var(--color-absolutezero-hover);
+ --toolbar-tray-link-fg-color--active: var(--color-absolutezero-active);
+ --toolbar-tray-link-bg-color: var(--color-white);
+ --toolbar-tray-link-bg-color--level2: rgba(243, 244, 249, 0.4);
+ --toolbar-tray-link-bg-color--level3: var(--color-whitesmoke);
+ --toolbar-tray-link-bg-color--level4: rgba(216, 217, 224, 0.3);
+ --toolbar-tray-link-bg-color--hover: var(--color-bgblue-hover);
+ --toolbar-tray-link-bg-color--active: var(--color-bgblue-active);
+ --toolbar-tray-link-padding--vertical: var(--space-s);
+ --toolbar-tray-link-padding--horizontal: var(--space-m);
+ --toolbar-tray-link-padding-start--level2: var(--toolbar-icon-item-padding-start);
+ --toolbar-tray-link-padding-start--level3: calc(var(--toolbar-icon-item-padding-start) + var(--toolbar-tray-link-padding--vertical));
+ --toolbar-tray-link-padding-start--level4: calc(var(--toolbar-tray-link-padding-start--level3) + var(--toolbar-tray-link-padding--vertical));
+ --toolbar-tray-link-line-height: 1.25rem; /* Line height var(--space-s) is too small for longer menu links. */
+ --toolbar-icon-item-width--only-icon: calc(var(--toolbar-icon-width) * 3);
+ --toolbar-icon-item-padding-start: calc(var(--space-m) + var(--space-xs) + var(--toolbar-icon-position-start));
+ --toolbar-icon-item-padding-end: calc(var(--toolbar-icon-item-width--only-icon) + var(--space-m));
+ --toolbar-icon-width: var(--space-m);
+ --toolbar-icon-position-start: calc(var(--space-m) - 1px);
+ --toolbar-orientation-toggle-bg-color: var(--color-white);
+ --toolbar-orientation-toggle-size: 2.75rem;
+ --toolbar-handle-bg-color--hover: var(--color-bgblue-hover);
+ --toolbar-handle-bg-color--active: var(--color-bgblue-active);
}
diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css
index 80d41e2d0b..cf823fbd9a 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.accordion {
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index f573a6684e..99f3a5516b 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/components/ajax-progress.module.css b/core/themes/claro/css/components/ajax-progress.module.css
index 707ff3cd8f..cd87c057f7 100644
--- a/core/themes/claro/css/components/ajax-progress.module.css
+++ b/core/themes/claro/css/components/ajax-progress.module.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.ajax-progress {
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css
index f4e79323ca..00152c9b6d 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/components/breadcrumb.css b/core/themes/claro/css/components/breadcrumb.css
index 70a7ae25ef..13212dbc91 100644
--- a/core/themes/claro/css/components/breadcrumb.css
+++ b/core/themes/claro/css/components/breadcrumb.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.breadcrumb {
diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css
index ffe9155cb5..556961793d 100644
--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/components/card.css b/core/themes/claro/css/components/card.css
index 28024590d2..3135806c4c 100644
--- a/core/themes/claro/css/components/card.css
+++ b/core/themes/claro/css/components/card.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.card {
diff --git a/core/themes/claro/css/components/content-header.css b/core/themes/claro/css/components/content-header.css
index 0e30ab77cf..703d054046 100644
--- a/core/themes/claro/css/components/content-header.css
+++ b/core/themes/claro/css/components/content-header.css
@@ -54,6 +54,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.content-header {
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 434a55c0e8..22315aee09 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css
index 0b7708e77d..7f0f1bd43b 100644
--- a/core/themes/claro/css/components/dialog.css
+++ b/core/themes/claro/css/components/dialog.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.ui-dialog {
diff --git a/core/themes/claro/css/components/divider.css b/core/themes/claro/css/components/divider.css
index 2bcd2dedbb..ec1287cc9e 100644
--- a/core/themes/claro/css/components/divider.css
+++ b/core/themes/claro/css/components/divider.css
@@ -54,6 +54,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.divider {
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 18678113b7..8cc0b0b2bc 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -59,6 +59,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
:root {
diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css
index 0a66978711..62f12a9200 100644
--- a/core/themes/claro/css/components/entity-meta.css
+++ b/core/themes/claro/css/components/entity-meta.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.entity-meta__header {
diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index 5fcf6d4dea..940959f68e 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.fieldset {
diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css
index d060f2c89c..ab12f79942 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.file {
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 464aa0cd5b..8e027aa81e 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.form-boolean::-ms-check {
diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css
index 874ed5d57a..30e16e7b26 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/components/form--field-multiple.css b/core/themes/claro/css/components/form--field-multiple.css
index 4ca64d7205..33f1ebda75 100644
--- a/core/themes/claro/css/components/form--field-multiple.css
+++ b/core/themes/claro/css/components/form--field-multiple.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.field-multiple-table {
diff --git a/core/themes/claro/css/components/form--managed-file.css b/core/themes/claro/css/components/form--managed-file.css
index dd4b30f98f..d3c4a37cba 100644
--- a/core/themes/claro/css/components/form--managed-file.css
+++ b/core/themes/claro/css/components/form--managed-file.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index aed9c2bec1..f5134468c5 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
:root {
diff --git a/core/themes/claro/css/components/form--select.css b/core/themes/claro/css/components/form--select.css
index 063e96077c..2b417ef47d 100644
--- a/core/themes/claro/css/components/form--select.css
+++ b/core/themes/claro/css/components/form--select.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.form-element--type-select {
diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index a4ec1ca5e4..4cb65a5b0b 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.form-element {
diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index 0638d300a4..5149b06b81 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
:-ms-input-placeholder {
diff --git a/core/themes/claro/css/components/image-preview.css b/core/themes/claro/css/components/image-preview.css
index ff2c2d66b8..d8486f3b66 100644
--- a/core/themes/claro/css/components/image-preview.css
+++ b/core/themes/claro/css/components/image-preview.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css
index ba7ff2623d..16ba4fbab0 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.css
@@ -56,6 +56,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/components/media-library.ui.css b/core/themes/claro/css/components/media-library.ui.css
index 20a038df8e..5d43adae01 100644
--- a/core/themes/claro/css/components/media-library.ui.css
+++ b/core/themes/claro/css/components/media-library.ui.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.media-library-selected-count {
diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index 6cb9cd9c1d..f2ed3dd9fc 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.messages-list {
diff --git a/core/themes/claro/css/components/page-title.css b/core/themes/claro/css/components/page-title.css
index 31699cc219..c5d58d482c 100644
--- a/core/themes/claro/css/components/page-title.css
+++ b/core/themes/claro/css/components/page-title.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.block-page-title-block {
diff --git a/core/themes/claro/css/components/pager.css b/core/themes/claro/css/components/pager.css
index 785eaab110..e6d957a5c4 100644
--- a/core/themes/claro/css/components/pager.css
+++ b/core/themes/claro/css/components/pager.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
:root {
diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css
index 6dc9a7549e..e71786eb34 100644
--- a/core/themes/claro/css/components/progress.css
+++ b/core/themes/claro/css/components/progress.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.progress::after {
diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css
index f9384c830c..bf8a67b8f7 100644
--- a/core/themes/claro/css/components/shortcut.css
+++ b/core/themes/claro/css/components/shortcut.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
:root {
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 bd2a7ea079..d368d572b6 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css
index d45b4d95b5..14023578ed 100644
--- a/core/themes/claro/css/components/system-admin--panel.css
+++ b/core/themes/claro/css/components/system-admin--panel.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.panel {
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 b7f88d3d85..5841b890b9 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.table-file-multiple-widget tbody {
diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css
index 39ae18e2c6..640c5c080d 100644
--- a/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -59,6 +59,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
body.drag {
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index b59d94772e..381eb69378 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
table {
diff --git a/core/themes/claro/css/components/tableselect.css b/core/themes/claro/css/components/tableselect.css
index f335a9dbfe..2ca1d3d59b 100644
--- a/core/themes/claro/css/components/tableselect.css
+++ b/core/themes/claro/css/components/tableselect.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
td.checkbox,
diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css
index c2d5233156..dc02b3430e 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -54,6 +54,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
:root {
diff --git a/core/themes/claro/css/components/toolbar.module.css b/core/themes/claro/css/components/toolbar.module.css
new file mode 100644
index 0000000000..026029a2b7
--- /dev/null
+++ b/core/themes/claro/css/components/toolbar.module.css
@@ -0,0 +1,267 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+ * @file toolbar.module.css
+ *
+ *
+ * Aggressive resets so we can achieve a consistent look in hostile CSS
+ * environments.
+ */
+#toolbar-administration,
+#toolbar-administration * {
+ box-sizing: border-box;
+}
+@media print {
+ #toolbar-administration {
+ display: none;
+ }
+}
+.toolbar-loading #toolbar-administration {
+ overflow: hidden;
+}
+/**
+ * Very specific overrides for Drupal system CSS.
+ */
+.toolbar li,
+.toolbar .item-list,
+.toolbar .item-list li,
+.toolbar .menu-item,
+.toolbar .menu-item--expanded {
+ list-style-type: none;
+ list-style-image: none;
+}
+.toolbar .menu-item {
+ padding-top: 0;
+}
+.toolbar .toolbar-bar .toolbar-tab,
+.toolbar .menu-item {
+ display: block;
+}
+.toolbar .toolbar-bar .toolbar-tab.hidden {
+ display: none;
+}
+.toolbar a {
+ display: block;
+ line-height: 1;
+}
+/**
+ * Administration menu.
+ */
+.toolbar .toolbar-bar,
+.toolbar .toolbar-tray {
+ position: relative;
+ z-index: 1250;
+}
+.toolbar-horizontal .toolbar-tray {
+ position: fixed;
+ left: 0;
+ width: 100%;
+}
+/* Position the admin toolbar absolutely when the configured standard breakpoint
+ * is active. The toolbar container, that contains the bar and the trays, is
+ * position absolutely so that it scrolls with the page. Otherwise, on smaller
+ * screens, the components of the admin toolbar are positioned statically. */
+.toolbar-oriented .toolbar-bar {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+}
+.toolbar-oriented .toolbar-tray {
+ position: absolute;
+ right: 0;
+ left: 0;
+}
+/* .toolbar-loading is required by Toolbar JavaScript to pre-render markup
+ * style to avoid extra reflow & flicker. */
+@media (min-width: 61em) {
+ .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
+ position: relative;
+ z-index: -999;
+ display: block;
+ visibility: hidden;
+ width: 1px;
+ }
+ .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
+ width: 999em;
+ }
+ .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
+ display: block;
+ }
+}
+/* Layer the bar just above the trays and above contextual link triggers. */
+.toolbar-oriented .toolbar-bar {
+ z-index: 502;
+}
+/* Position the admin toolbar fixed when the configured standard breakpoint is
+ * active. */
+body.toolbar-fixed .toolbar-oriented .toolbar-bar {
+ position: fixed;
+}
+/* When the configured narrow breakpoint is active, the toolbar is sized to wrap
+ * around the trays in order to provide a context for scrolling tray content
+ * that is taller than the viewport. */
+body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
+ bottom: 0;
+ width: 15rem;
+}
+/* Present the admin toolbar tabs horizontally as a default on user agents that
+ * do not understand media queries or on user agents where JavaScript is
+ * disabled. */
+.toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
+.toolbar .toolbar-bar .toolbar-tab,
+.toolbar .toolbar-tray-horizontal li {
+ float: left; /* LTR */
+}
+[dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
+[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+[dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+ float: right;
+}
+/* Present the admin toolbar tabs vertically by default on user agents that
+ * that understand media queries. This will be the small screen default. */
+@media only screen {
+ .toolbar .toolbar-bar .toolbar-tab,
+ .toolbar .toolbar-tray-horizontal li {
+ float: none; /* LTR */
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+ [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+ float: none;
+ }
+}
+/* This min-width media query is meant to provide basic horizontal layout to
+ * the main menu tabs when JavaScript is disabled on user agents that understand
+ * media queries. */
+@media (min-width: 16.5em) {
+ .toolbar .toolbar-bar .toolbar-tab,
+ .toolbar .toolbar-tray-horizontal li {
+ float: left; /* LTR */
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+ [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+ float: right;
+ }
+}
+/* Present the admin toolbar tabs horizontally when the configured narrow
+ * breakpoint is active. */
+.toolbar-oriented .toolbar-bar .toolbar-tab,
+.toolbar-oriented .toolbar-tray-horizontal li {
+ float: left; /* LTR */
+}
+[dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
+[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
+ float: right;
+}
+/**
+ * Toolbar tray.
+ */
+.toolbar .toolbar-tray {
+ z-index: 501;
+ display: none;
+}
+.toolbar-oriented .toolbar-tray-vertical {
+ position: absolute;
+ left: -100%; /* LTR */
+ width: 15rem;
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
+ right: -100%;
+ left: auto;
+}
+.toolbar .toolbar-tray-vertical > .toolbar-lining {
+ min-height: 100%;
+}
+/* Layer the links just above the toolbar-tray. */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+ position: relative;
+ z-index: 502;
+}
+/* Hide secondary menus when the tray is horizontal. */
+.toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
+ display: none;
+}
+/* When the configured standard breakpoint is active and the tray is in a
+ * vertical position, the tray does not scroll with the page. The contents of
+ * the tray scroll within the confines of the viewport.
+ */
+.toolbar .toolbar-tray-vertical.is-active,
+body.toolbar-fixed .toolbar .toolbar-tray-vertical {
+ position: fixed;
+ overflow-x: hidden;
+ overflow-y: auto;
+ height: 100%;
+}
+.toolbar .toolbar-tray.is-active {
+ display: block;
+}
+/* Bring the tray into the viewport. By default it is just off-screen. */
+.toolbar-oriented .toolbar-tray-vertical.is-active {
+ left: 0; /* LTR */
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
+ right: 0;
+ left: auto;
+}
+/* When the configured standard breakpoint is active, the tray appears to push
+ * the page content away from the edge of the viewport. */
+body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+ margin-left: 15rem; /* LTR */
+}
+@media print {
+ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+ margin-left: 0;
+ }
+}
+[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+ margin-right: 15rem;
+ margin-left: auto;
+}
+@media print {
+ [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+ margin-right: 0;
+ }
+}
+/**
+ * ToolBar tray orientation toggle.
+ */
+/* Hide the orientation toggle when the configured narrow breakpoint is not
+ * active. */
+.toolbar .toolbar-tray .toolbar-toggle-orientation {
+ display: none;
+}
+/* Show the orientation toggle when the configured narrow breakpoint is
+ * active. */
+.toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
+ display: block;
+}
+.toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
+ position: absolute;
+ top: auto;
+ right: 0; /* LTR */
+ bottom: 0;
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
+ right: auto;
+ left: 0;
+}
+.toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
+ float: right; /* LTR */
+ width: 100%;
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
+ float: left;
+}
+/**
+ * Toolbar home button toggle.
+ */
+.toolbar .toolbar-bar .home-toolbar-tab {
+ display: none;
+}
+.path-admin .toolbar-bar .home-toolbar-tab {
+ display: block;
+}
diff --git a/core/themes/claro/css/components/toolbar.module.pcss.css b/core/themes/claro/css/components/toolbar.module.pcss.css
new file mode 100644
index 0000000000..7acd963d5e
--- /dev/null
+++ b/core/themes/claro/css/components/toolbar.module.pcss.css
@@ -0,0 +1,269 @@
+/**
+ * @file toolbar.module.css
+ *
+ *
+ * Aggressive resets so we can achieve a consistent look in hostile CSS
+ * environments.
+ */
+#toolbar-administration,
+#toolbar-administration * {
+ box-sizing: border-box;
+}
+
+@media print {
+ #toolbar-administration {
+ display: none;
+ }
+}
+.toolbar-loading #toolbar-administration {
+ overflow: hidden;
+}
+/**
+ * Very specific overrides for Drupal system CSS.
+ */
+.toolbar li,
+.toolbar .item-list,
+.toolbar .item-list li,
+.toolbar .menu-item,
+.toolbar .menu-item--expanded {
+ list-style-type: none;
+ list-style-image: none;
+}
+.toolbar .menu-item {
+ padding-top: 0;
+}
+.toolbar .toolbar-bar .toolbar-tab,
+.toolbar .menu-item {
+ display: block;
+}
+.toolbar .toolbar-bar .toolbar-tab.hidden {
+ display: none;
+}
+.toolbar a {
+ display: block;
+ line-height: 1;
+}
+
+/**
+ * Administration menu.
+ */
+.toolbar .toolbar-bar,
+.toolbar .toolbar-tray {
+ position: relative;
+ z-index: 1250;
+}
+.toolbar-horizontal .toolbar-tray {
+ position: fixed;
+ left: 0;
+ width: 100%;
+}
+/* Position the admin toolbar absolutely when the configured standard breakpoint
+ * is active. The toolbar container, that contains the bar and the trays, is
+ * position absolutely so that it scrolls with the page. Otherwise, on smaller
+ * screens, the components of the admin toolbar are positioned statically. */
+.toolbar-oriented .toolbar-bar {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+}
+.toolbar-oriented .toolbar-tray {
+ position: absolute;
+ right: 0;
+ left: 0;
+}
+/* .toolbar-loading is required by Toolbar JavaScript to pre-render markup
+ * style to avoid extra reflow & flicker. */
+@media (min-width: 61em) {
+ .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
+ position: relative;
+ z-index: -999;
+ display: block;
+ visibility: hidden;
+ width: 1px;
+ }
+ .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
+ width: 999em;
+ }
+ .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
+ display: block;
+ }
+}
+
+/* Layer the bar just above the trays and above contextual link triggers. */
+.toolbar-oriented .toolbar-bar {
+ z-index: 502;
+}
+/* Position the admin toolbar fixed when the configured standard breakpoint is
+ * active. */
+body.toolbar-fixed .toolbar-oriented .toolbar-bar {
+ position: fixed;
+}
+/* When the configured narrow breakpoint is active, the toolbar is sized to wrap
+ * around the trays in order to provide a context for scrolling tray content
+ * that is taller than the viewport. */
+body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
+ bottom: 0;
+ width: 15rem;
+}
+
+/* Present the admin toolbar tabs horizontally as a default on user agents that
+ * do not understand media queries or on user agents where JavaScript is
+ * disabled. */
+.toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
+.toolbar .toolbar-bar .toolbar-tab,
+.toolbar .toolbar-tray-horizontal li {
+ float: left; /* LTR */
+}
+[dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
+[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+[dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+ float: right;
+}
+/* Present the admin toolbar tabs vertically by default on user agents that
+ * that understand media queries. This will be the small screen default. */
+@media only screen {
+ .toolbar .toolbar-bar .toolbar-tab,
+ .toolbar .toolbar-tray-horizontal li {
+ float: none; /* LTR */
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+ [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+ float: none;
+ }
+}
+/* This min-width media query is meant to provide basic horizontal layout to
+ * the main menu tabs when JavaScript is disabled on user agents that understand
+ * media queries. */
+@media (min-width: 16.5em) {
+ .toolbar .toolbar-bar .toolbar-tab,
+ .toolbar .toolbar-tray-horizontal li {
+ float: left; /* LTR */
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+ [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+ float: right;
+ }
+}
+/* Present the admin toolbar tabs horizontally when the configured narrow
+ * breakpoint is active. */
+.toolbar-oriented .toolbar-bar .toolbar-tab,
+.toolbar-oriented .toolbar-tray-horizontal li {
+ float: left; /* LTR */
+}
+[dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
+[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
+ float: right;
+}
+
+/**
+ * Toolbar tray.
+ */
+.toolbar .toolbar-tray {
+ z-index: 501;
+ display: none;
+}
+.toolbar-oriented .toolbar-tray-vertical {
+ position: absolute;
+ left: -100%; /* LTR */
+ width: 15rem;
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
+ right: -100%;
+ left: auto;
+}
+.toolbar .toolbar-tray-vertical > .toolbar-lining {
+ min-height: 100%;
+}
+/* Layer the links just above the toolbar-tray. */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+ position: relative;
+ z-index: 502;
+}
+/* Hide secondary menus when the tray is horizontal. */
+.toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
+ display: none;
+}
+/* When the configured standard breakpoint is active and the tray is in a
+ * vertical position, the tray does not scroll with the page. The contents of
+ * the tray scroll within the confines of the viewport.
+ */
+.toolbar .toolbar-tray-vertical.is-active,
+body.toolbar-fixed .toolbar .toolbar-tray-vertical {
+ position: fixed;
+ overflow-x: hidden;
+ overflow-y: auto;
+ height: 100%;
+}
+.toolbar .toolbar-tray.is-active {
+ display: block;
+}
+/* Bring the tray into the viewport. By default it is just off-screen. */
+.toolbar-oriented .toolbar-tray-vertical.is-active {
+ left: 0; /* LTR */
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
+ right: 0;
+ left: auto;
+}
+/* When the configured standard breakpoint is active, the tray appears to push
+ * the page content away from the edge of the viewport. */
+body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+ margin-left: 15rem; /* LTR */
+}
+
+@media print {
+ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+ margin-left: 0;
+ }
+}
+[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+ margin-right: 15rem;
+ margin-left: auto;
+}
+
+@media print {
+ [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+ margin-right: 0;
+ }
+}
+/**
+ * ToolBar tray orientation toggle.
+ */
+/* Hide the orientation toggle when the configured narrow breakpoint is not
+ * active. */
+.toolbar .toolbar-tray .toolbar-toggle-orientation {
+ display: none;
+}
+/* Show the orientation toggle when the configured narrow breakpoint is
+ * active. */
+.toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
+ display: block;
+}
+.toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
+ position: absolute;
+ top: auto;
+ right: 0; /* LTR */
+ bottom: 0;
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
+ right: auto;
+ left: 0;
+}
+.toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
+ float: right; /* LTR */
+ width: 100%;
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
+ float: left;
+}
+
+/**
+ * Toolbar home button toggle.
+ */
+.toolbar .toolbar-bar .home-toolbar-tab {
+ display: none;
+}
+.path-admin .toolbar-bar .home-toolbar-tab {
+ display: block;
+}
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index 7e939da826..0bdbf3fb1e 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/components/views-exposed-form.css b/core/themes/claro/css/components/views-exposed-form.css
index 71fffe4879..e22fceaabe 100644
--- a/core/themes/claro/css/components/views-exposed-form.css
+++ b/core/themes/claro/css/components/views-exposed-form.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/layout/breadcrumb.css b/core/themes/claro/css/layout/breadcrumb.css
index 520a8969f9..fd79be66ed 100644
--- a/core/themes/claro/css/layout/breadcrumb.css
+++ b/core/themes/claro/css/layout/breadcrumb.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.region-breadcrumb {
diff --git a/core/themes/claro/css/layout/card-list.css b/core/themes/claro/css/layout/card-list.css
index 5da854a642..b393ad769d 100644
--- a/core/themes/claro/css/layout/card-list.css
+++ b/core/themes/claro/css/layout/card-list.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
:root {
diff --git a/core/themes/claro/css/layout/local-actions.css b/core/themes/claro/css/layout/local-actions.css
index 18a6051ed0..ecb188be06 100644
--- a/core/themes/claro/css/layout/local-actions.css
+++ b/core/themes/claro/css/layout/local-actions.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css
index 8492379c06..cbf5434c42 100644
--- a/core/themes/claro/css/layout/node-add.css
+++ b/core/themes/claro/css/layout/node-add.css
@@ -54,6 +54,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.layout-region-node-footer__content {
diff --git a/core/themes/claro/css/theme/ckeditor-dialog.css b/core/themes/claro/css/theme/ckeditor-dialog.css
index e6b3f894ce..4e13fa7c72 100644
--- a/core/themes/claro/css/theme/ckeditor-dialog.css
+++ b/core/themes/claro/css/theme/ckeditor-dialog.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.cke_dialog_background_cover {
diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css
index 0bc8a385a4..0bd539644a 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.css
@@ -53,6 +53,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
:root { /* 1px */
/* Inner border size must be based on chrome border size. */ /* 1px */
diff --git a/core/themes/claro/css/theme/ckeditor-frame.css b/core/themes/claro/css/theme/ckeditor-frame.css
index e02957cc42..6e937f1e17 100644
--- a/core/themes/claro/css/theme/ckeditor-frame.css
+++ b/core/themes/claro/css/theme/ckeditor-frame.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.cke_editable:not(.cke_editable_inline) {
diff --git a/core/themes/claro/css/theme/field-ui.admin.css b/core/themes/claro/css/theme/field-ui.admin.css
index a4d6f428a8..998d99d4a0 100644
--- a/core/themes/claro/css/theme/field-ui.admin.css
+++ b/core/themes/claro/css/theme/field-ui.admin.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/* 'Manage fields' and 'Manage display' overviews */
diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css
index b198bafe7f..9296336833 100644
--- a/core/themes/claro/css/theme/filter.theme.css
+++ b/core/themes/claro/css/theme/filter.theme.css
@@ -55,6 +55,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
/**
diff --git a/core/themes/claro/css/theme/toolbar.icons.theme.css b/core/themes/claro/css/theme/toolbar.icons.theme.css
new file mode 100644
index 0000000000..a652908c74
--- /dev/null
+++ b/core/themes/claro/css/theme/toolbar.icons.theme.css
@@ -0,0 +1,535 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling for toolbar module icons.
+ */
+
+: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 gray 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.
+ */
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
+}
+
+.toolbar {
+ font-family: -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+.toolbar .toolbar-icon {
+ position: relative;
+ padding-left: calc(2.5rem - 1px);
+}
+
+[dir="rtl"] .toolbar .toolbar-icon {
+ padding-right: calc(2.5rem - 1px);
+ padding-left: calc(1rem - 1px);
+}
+
+.toolbar .toolbar-icon::before {
+ position: absolute;
+ top: 0;
+ left: calc(1rem - 1px); /* LTR */
+ display: block;
+ width: 1rem;
+ height: 100%;
+ content: "";
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-attachment: scroll;
+ background-position: center center;
+ background-size: 100% auto;
+}
+
+[dir="rtl"] .toolbar .toolbar-icon::before {
+ right: 0.6667em;
+ left: auto;
+}
+
+.toolbar button.toolbar-icon {
+ border: 0;
+ background-color: transparent;
+ font-size: 1em;
+}
+
+.toolbar .toolbar-menu ul .toolbar-icon {
+ padding-left: 1.3333em; /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
+ padding-right: 1.3333em;
+ padding-left: 0;
+}
+
+.toolbar .toolbar-menu ul a.toolbar-icon::before {
+ display: none;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu ul a {
+ padding-left: calc(2.5rem - 1px); /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
+ padding-right: calc(2.5rem - 1px);
+ padding-left: 0;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
+ padding-left: calc(3.25rem - 1px); /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
+ padding-right: calc(3.25rem - 1px);
+ padding-left: 0;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu ul ul ul a {
+ padding-left: calc(4rem - 1px); /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul ul a {
+ padding-right: calc(4rem - 1px);
+ padding-left: 0;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu a {
+ height: 3rem;
+ padding-right: 4rem; /* LTR */
+ padding-left: 2.75em; /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
+ padding-right: 2.75em;
+ padding-left: 4rem;
+}
+
+/**
+ * Top level icons.
+ */
+
+.toolbar-bar .toolbar-icon-menu::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23FFFFFF' d='M15,8H1C.43984,8 0,7.56016 0,7 0,6.43984 .43984,6 1,6h14c.5602,0 1,.43984 1,1 0,.56016 -.4398,1 -1,1zM15,3H1C.43984,3 0,2.56016 0,2 0,1.43984 .43984,1 1,1h14c.5602,0 1,.43984 1,1 0,.56016 -.4398,1 -1,1zM1,11h14c.5602,0 1,.4398 1,1 0,.5602 -.4398,1 -1,1H1C.43984,13 0,12.5602 0,12 0,11.4398 .43984,11 1,11Z'/%3e%3c/svg%3e");
+}
+
+.toolbar-bar .toolbar-icon-help::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
+}
+
+/**
+ * Main menu icons.
+ */
+
+.toolbar-icon-system-admin-content::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-content:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%230036B1' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-content:active::before,
+.toolbar-icon-system-admin-content.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-admin-content::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23003CC5' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-structure::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23787878' d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-structure:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z' fill='%230036B1'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-structure:active::before,
+.toolbar-icon-system-admin-structure.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-admin-structure::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z' fill='%23003CC5'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-themes-page::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-themes-page:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%230036B1' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-themes-page:active::before,
+.toolbar-icon-system-themes-page.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-themes-page::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23003CC5' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-entity-user-collection::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-entity-user-collection:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%230036B1' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-entity-user-collection:active::before,
+.toolbar-icon-entity-user-collection.is-active::before,
+.menu-item--active-trail .toolbar-icon-entity-user-collection::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23003CC5' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-modules-list::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-modules-list:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%230036B1' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-modules-list:active::before,
+.toolbar-icon-system-modules-list.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-modules-list::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23003CC5' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-config::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-config:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%230036B1' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-config:active::before,
+.toolbar-icon-system-admin-config.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-admin-config::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23003CC5' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-reports::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-reports:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%230036B1' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-reports:active::before,
+.toolbar-icon-system-admin-reports.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-admin-reports::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23003CC5' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-help-main::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-help-main:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%230036B1' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-help-main:active::before,
+.toolbar-icon-help-main.is-active::before,
+.menu-item--active-trail .toolbar-icon-help-main::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23003CC5' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
+}
+
+@media only screen and (max-width: 35.999999em) {
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+ width: 4em;
+ margin-right: 0;
+ margin-left: 0;
+ padding-right: 0;
+ padding-left: 0;
+ text-indent: -9999px;
+ }
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ left: 0; /* LTR */
+ width: 100%;
+ background-size: 42% auto;
+ }
+ .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ background-size: auto auto;
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ right: 0;
+ left: auto;
+ }
+}
+
+@media only screen and (min-width: 36em) {
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+ width: auto;
+ padding-right: calc(1rem - 1px);
+ padding-left: calc(2.5rem - 1px);
+ text-indent: 0;
+ background-position: left center; /* LTR */
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+ padding-right: calc(2.5rem - 1px);
+ padding-left: calc(1rem - 1px);
+ background-position: right center;
+ }
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ left: calc(1rem - 1px); /* LTR */
+ width: 1rem;
+ background-size: 100% auto;
+ }
+ .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ background-size: auto auto;
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ right: calc(1rem - 1px);
+ left: 0;
+ }
+}
+
+@media only screen and (min-width: 36em) and (-ms-high-contrast: active) {
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon,
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+ padding-right: calc(1rem - 1px);
+ padding-left: calc(1rem - 1px);
+ }
+}
+
+/**
+ * Handle.
+ */
+
+.toolbar .toolbar-box .toolbar-handle,
+[dir="rtl"] .toolbar .toolbar-box .toolbar-handle {
+ width: 3rem;
+}
+
+.toolbar .toolbar-icon.toolbar-handle {
+ width: 3rem;
+ padding: 0 calc(1rem - 1px);
+ text-indent: -9999px;
+}
+
+.toolbar .toolbar-icon.toolbar-handle:hover {
+ background: #f0f5fd;
+}
+
+.toolbar .toolbar-icon.toolbar-handle:active {
+ background: #e6ecf8;
+}
+
+.toolbar .toolbar-icon.toolbar-handle::before {
+ left: 0; /* LTR */
+ width: 100%;
+ background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23222330' stroke-width='2' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m3 8h10'/%3e%3cpath d='m8 3v10'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 40%;
+}
+
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle::before {
+ background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23222330' stroke-width='2' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m3 8h10'/%3e%3cpath d='m8 3v10'/%3e%3c/svg%3e");
+}
+
+[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle::before {
+ right: 0;
+ left: auto;
+}
+
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:hover::before,
+.toolbar .toolbar-icon.toolbar-handle:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230036b1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
+}
+
+.toolbar .toolbar-icon.toolbar-handle.open::before,
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before {
+ background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230036B1' stroke-width='2' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m3 8h10'/%3e%3c/svg%3e");
+}
+
+.toolbar .toolbar-icon.toolbar-handle.open:hover::before,
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:hover::before {
+ background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23222330' stroke-width='2' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m3 8h10'/%3e%3c/svg%3e");
+}
+
+@media only screen and (-ms-high-contrast: active) {
+ .toolbar .toolbar-icon.toolbar-handle::before,
+ .toolbar .toolbar-icon.toolbar-handle.open::before,
+ .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before {
+ padding-top: 0.5rem;
+ text-indent: 0;
+ background-image: none;
+ font-size: 2.5rem;
+ font-weight: bold;
+ }
+ .toolbar .toolbar-icon.toolbar-handle::before {
+ content: "+";
+ }
+ .toolbar .toolbar-icon.toolbar-handle.open::before,
+ .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before {
+ content: "-";
+ }
+}
+
+.toolbar .toolbar-icon-escape-admin::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23fff' d='M10.292969,14.707031 11.707031,13.292969 6.4140625,8 11.707031,2.707031 10.292969,1.292969 3.585938,8Z'/%3e%3c/svg%3e");
+ background-size: 40%;
+}
+
+[dir="rtl"] .toolbar .toolbar-icon-escape-admin::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23fff' d='M5.7070312,1.2929688 4.2929688,2.7070312 9.5859375,8 4.2929688,13.292969 5.7070312,14.707031 12.414062,8Z'/%3e%3c/svg%3e");
+}
+
+/**
+ * Orientation toggle.
+ */
+
+.toolbar .toolbar-toggle-orientation button {
+ width: 2.75rem;
+ height: 2.75rem;
+ padding: 0;
+ text-indent: -999em;
+}
+
+.toolbar .toolbar-toggle-orientation button::before {
+ right: 0;
+ left: 0;
+ width: 1.5rem;
+ margin: 0 auto;
+}
+
+[dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
+ padding: 0;
+}
+
+/**
+ * In order to support a hover effect on the SVG images, while also supporting
+ * RTL text direction and no SVG support, this little icon requires some very
+ * specific targeting, setting and unsetting.
+ */
+
+.toolbar .toolbar-toggle-orientation [value="vertical"]::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3e%3cpath fill='%238e929c' d='M 0,22 H 3 V 2 H 0 Z m 5.939453,-10 4.529297,4.53125 1.0625,-1.0625 L 8.8125,12.75 h 8.587891 v -1.5 H 8.8125 l 2.71875,-2.71875 -1.0625,-1.0625 z'/%3e%3c/svg%3e"); /* LTR */
+}
+
+.toolbar .toolbar-toggle-orientation [value="vertical"]:hover::before,
+.toolbar .toolbar-toggle-orientation [value="vertical"]:focus::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3e%3cpath fill='%23003cc5' d='M 0,22 H 3 V 2 H 0 Z m 5.939453,-10 4.529297,4.53125 1.0625,-1.0625 L 8.8125,12.75 h 8.587891 v -1.5 H 8.8125 l 2.71875,-2.71875 -1.0625,-1.0625 z'/%3e%3c/svg%3e"); /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3e%3cpath fill='%238e929c' d='m 24.000391,2 h -3 v 20 h 3 z m -5.939453,10 -4.529297,-4.53125 -1.0625,1.0625 2.71875,2.71875 H 6.6 v 1.5 h 8.587891 l -2.71875,2.71875 1.0625,1.0625 z'/%3e%3c/svg%3e");
+}
+
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover::before,
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3e%3cpath fill='%23003cc5' d='m 24.000391,2 h -3 v 20 h 3 z m -5.939453,10 -4.529297,-4.53125 -1.0625,1.0625 2.71875,2.71875 H 6.6 v 1.5 h 8.587891 l -2.71875,2.71875 1.0625,1.0625 z'/%3e%3c/svg%3e");
+}
+
+.toolbar .toolbar-toggle-orientation [value="horizontal"]::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3e%3cpath fill='%238e929c' d='M 2,0 V 3 H 22 V 0 Z M 12,5.939453 7.46875,10.46875 8.53125,11.53125 11.25,8.8125 v 8.587891 h 1.5 V 8.8125 l 2.71875,2.71875 1.0625,-1.0625 z'/%3e%3c/svg%3e");
+}
+
+.toolbar .toolbar-toggle-orientation [value="horizontal"]:hover::before,
+.toolbar .toolbar-toggle-orientation [value="horizontal"]:focus::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3e%3cpath fill='%23003cc5' d='M 2,0 V 3 H 22 V 0 Z M 12,5.939453 7.46875,10.46875 8.53125,11.53125 11.25,8.8125 v 8.587891 h 1.5 V 8.8125 l 2.71875,2.71875 1.0625,-1.0625 z'/%3e%3c/svg%3e");
+}
+
+@media only screen and (-ms-high-contrast: active) {
+ .toolbar .toolbar-toggle-orientation .toolbar-icon {
+ width: auto;
+ padding: 0 1rem;
+ text-indent: 0;
+ }
+}
+
+/* States */
+
+.toolbar .toolbar-icon-toggle-horizontal:focus,
+.toolbar .toolbar-icon-toggle-horizontal:hover,
+.toolbar .toolbar-icon-toggle-vertical:focus,
+.toolbar .toolbar-icon-toggle-vertical:hover {
+ background-color: #fff;
+}
+
+.toolbar .toolbar-item {
+ position: relative;
+}
+
+.toolbar .toolbar-item:focus,
+.toolbar .toolbar-icon:focus {
+ outline: none;
+}
+
+.toolbar a:focus::after,
+.toolbar button:focus::after {
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ width: calc(100% - 6px);
+ height: calc(100% - 6px);
+ content: "";
+ border-radius: 2px;
+ box-shadow: 0 0 0 3px #26a769;
+}
+
+/**
+ * Module icon overrides
+ */
+
+.toolbar-bar .toolbar-icon-shortcut.toolbar-icon-shortcut::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M12.236 15c-.146 0-.283-.041-.406-.124l-3.828-2.583-3.83 2.583c-.123.083-.265.124-.406.124-.145 0-.289-.043-.413-.129-.246-.171-.362-.475-.292-.766l1.122-4.73-3.439-3.107c-.225-.2-.303-.519-.196-.8.106-.282.376-.468.678-.468h4.259l1.843-4.542c.109-.277.377-.458.674-.458.297 0 .564.181.674.458l1.84 4.542h4.262c.306 0 .57.186.683.468.104.281.024.601-.196.8l-3.439 3.107 1.121 4.73c.065.291-.047.595-.293.766-.129.086-.273.129-.418.129z'/%3e%3c/svg%3e");
+}
+
+.toolbar-bar .toolbar-icon-user.toolbar-icon-user::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M1 15c-.275 0-.498-.225-.496-.5 0 0 .007-.746 1.071-1.512 1.138-.818 2.347-.969 3.308-1.498s.954-1.299.925-2.115c-.019-.543-.112-.657-.489-1.392-.556-1.084-.709-2.021-.791-2.823-.127-1.252.011-3.035.86-4.001.847-.964 2.114-1.104 2.114-1.104l.5-.055.498.055s1.266.14 2.113 1.104c.85.966.988 2.75.859 4.001-.08.802-.234 1.739-.791 2.823-.377.734-.476.849-.488 1.392-.029.816-.035 1.586.926 2.115s2.17.68 3.307 1.498c1.064.766 1.072 1.512 1.072 1.512.002.275-.221.5-.496.5h-14.002z'/%3e%3c/svg%3e");
+}
+
+.toolbar-bar .toolbar-icon-edit.toolbar-icon-edit::before {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-bar .toolbar-icon-workspace.toolbar-icon-workspace:focus {
+ color: #fff;
+ background: #82828c;
+}
diff --git a/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css b/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
new file mode 100644
index 0000000000..8c40738522
--- /dev/null
+++ b/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
@@ -0,0 +1,414 @@
+/**
+ * @file
+ * Styling for toolbar module icons.
+ */
+
+@import "../base/variables.pcss.css";
+
+.toolbar {
+ font-family: -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+.toolbar .toolbar-icon {
+ position: relative;
+ padding-left: var(--toolbar-icon-item-padding-start);
+}
+[dir="rtl"] .toolbar .toolbar-icon {
+ padding-right: var(--toolbar-icon-item-padding-start);
+ padding-left: var(--toolbar-tab-padding--horizontal);
+}
+.toolbar .toolbar-icon::before {
+ position: absolute;
+ top: 0;
+ left: var(--toolbar-icon-position-start); /* LTR */
+ display: block;
+ width: var(--toolbar-icon-width);
+ height: 100%;
+ content: "";
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-attachment: scroll;
+ background-position: center center;
+ background-size: 100% auto;
+}
+[dir="rtl"] .toolbar .toolbar-icon::before {
+ right: 0.6667em;
+ left: auto;
+}
+.toolbar button.toolbar-icon {
+ border: 0;
+ background-color: transparent;
+ font-size: 1em;
+}
+.toolbar .toolbar-menu ul .toolbar-icon {
+ padding-left: 1.3333em; /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
+ padding-right: 1.3333em;
+ padding-left: 0;
+}
+.toolbar .toolbar-menu ul a.toolbar-icon::before {
+ display: none;
+}
+.toolbar .toolbar-tray-vertical .toolbar-menu ul a {
+ padding-left: var(--toolbar-tray-link-padding-start--level2); /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
+ padding-right: var(--toolbar-tray-link-padding-start--level2);
+ padding-left: 0;
+}
+.toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
+ padding-left: var(--toolbar-tray-link-padding-start--level3); /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
+ padding-right: var(--toolbar-tray-link-padding-start--level3);
+ padding-left: 0;
+}
+.toolbar .toolbar-tray-vertical .toolbar-menu ul ul ul a {
+ padding-left: var(--toolbar-tray-link-padding-start--level4); /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul ul a {
+ padding-right: var(--toolbar-tray-link-padding-start--level4);
+ padding-left: 0;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu a {
+ height: var(--toolbar-icon-item-width--only-icon);
+ padding-right: var(--toolbar-icon-item-padding-end); /* LTR */
+ padding-left: 2.75em; /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
+ padding-right: 2.75em;
+ padding-left: var(--toolbar-icon-item-padding-end);
+}
+
+/**
+ * Top level icons.
+ */
+.toolbar-bar .toolbar-icon-menu::before {
+ background-image: url(../../images/icons/ffffff/burger.svg);
+}
+.toolbar-bar .toolbar-icon-help::before {
+ background-image: url(../../../../misc/icons/ffffff/questionmark-disc.svg);
+}
+
+/**
+ * Main menu icons.
+ */
+.toolbar-icon-system-admin-content::before {
+ background-image: url(../../../../misc/icons/787878/file.svg);
+}
+.toolbar-icon-system-admin-content:hover::before {
+ background-image: url(../../images/icons/0036b1/file.svg);
+}
+.toolbar-icon-system-admin-content:active::before,
+.toolbar-icon-system-admin-content.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-admin-content::before {
+ background-image: url(../../images/icons/003cc5/file.svg);
+}
+.toolbar-icon-system-admin-structure::before {
+ background-image: url(../../../../misc/icons/787878/orgchart.svg);
+}
+.toolbar-icon-system-admin-structure:hover::before {
+ background-image: url(../../images/icons/0036b1/orgchart.svg);
+}
+.toolbar-icon-system-admin-structure:active::before,
+.toolbar-icon-system-admin-structure.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-admin-structure::before {
+ background-image: url(../../images/icons/003cc5/orgchart.svg);
+}
+.toolbar-icon-system-themes-page::before {
+ background-image: url(../../../../misc/icons/787878/paintbrush.svg);
+}
+.toolbar-icon-system-themes-page:hover::before {
+ background-image: url(../../images/icons/0036b1/paintbrush.svg);
+}
+.toolbar-icon-system-themes-page:active::before,
+.toolbar-icon-system-themes-page.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-themes-page::before {
+ background-image: url(../../images/icons/003cc5/paintbrush.svg);
+}
+.toolbar-icon-entity-user-collection::before {
+ background-image: url(../../../../misc/icons/787878/people.svg);
+}
+.toolbar-icon-entity-user-collection:hover::before {
+ background-image: url(../../images/icons/0036b1/people.svg);
+}
+.toolbar-icon-entity-user-collection:active::before,
+.toolbar-icon-entity-user-collection.is-active::before,
+.menu-item--active-trail .toolbar-icon-entity-user-collection::before {
+ background-image: url(../../images/icons/003cc5/people.svg);
+}
+.toolbar-icon-system-modules-list::before {
+ background-image: url(../../../../misc/icons/787878/puzzlepiece.svg);
+}
+.toolbar-icon-system-modules-list:hover::before {
+ background-image: url(../../images/icons/0036b1/puzzlepiece.svg);
+}
+.toolbar-icon-system-modules-list:active::before,
+.toolbar-icon-system-modules-list.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-modules-list::before {
+ background-image: url(../../images/icons/003cc5/puzzlepiece.svg);
+}
+.toolbar-icon-system-admin-config::before {
+ background-image: url(../../../../misc/icons/787878/wrench.svg);
+}
+.toolbar-icon-system-admin-config:hover::before {
+ background-image: url(../../images/icons/0036b1/wrench.svg);
+}
+.toolbar-icon-system-admin-config:active::before,
+.toolbar-icon-system-admin-config.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-admin-config::before {
+ background-image: url(../../images/icons/003cc5/wrench.svg);
+}
+.toolbar-icon-system-admin-reports::before {
+ background-image: url(../../../../misc/icons/787878/barchart.svg);
+}
+.toolbar-icon-system-admin-reports:hover::before {
+ background-image: url(../../images/icons/0036b1/barchart.svg);
+}
+.toolbar-icon-system-admin-reports:active::before,
+.toolbar-icon-system-admin-reports.is-active::before,
+.menu-item--active-trail .toolbar-icon-system-admin-reports::before {
+ background-image: url(../../images/icons/003cc5/barchart.svg);
+}
+.toolbar-icon-help-main::before {
+ background-image: url(../../../../misc/icons/787878/questionmark-disc.svg);
+}
+.toolbar-icon-help-main:hover::before {
+ background-image: url(../../images/icons/0036b1/questionmark-disc.svg);
+}
+.toolbar-icon-help-main:active::before,
+.toolbar-icon-help-main.is-active::before,
+.menu-item--active-trail .toolbar-icon-help-main::before {
+ background-image: url(../../images/icons/003cc5/questionmark-disc.svg);
+}
+
+@media only screen and (max-width: 35.999999em) {
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+ width: 4em;
+ margin-right: 0;
+ margin-left: 0;
+ padding-right: 0;
+ padding-left: 0;
+ text-indent: -9999px;
+ }
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ left: 0; /* LTR */
+ width: 100%;
+ background-size: 42% auto;
+ }
+ .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ background-size: auto auto;
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ right: 0;
+ left: auto;
+ }
+}
+
+@media only screen and (min-width: 36em) {
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+ width: auto;
+ padding-right: var(--toolbar-tab-padding--horizontal);
+ padding-left: var(--toolbar-icon-item-padding-start);
+ text-indent: 0;
+ background-position: left center; /* LTR */
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+ padding-right: var(--toolbar-icon-item-padding-start);
+ padding-left: var(--toolbar-tab-padding--horizontal);
+ background-position: right center;
+ }
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ left: var(--toolbar-icon-position-start); /* LTR */
+ width: var(--toolbar-icon-width);
+ background-size: 100% auto;
+ }
+ .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ background-size: auto auto;
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+ right: var(--toolbar-icon-position-start);
+ left: 0;
+ }
+}
+
+@media only screen and (min-width: 36em) and (-ms-high-contrast: active) {
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon,
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+ padding-right: var(--toolbar-tab-padding--horizontal);
+ padding-left: var(--toolbar-tab-padding--horizontal);
+ }
+}
+
+/**
+ * Handle.
+ */
+.toolbar .toolbar-box .toolbar-handle,
+[dir="rtl"] .toolbar .toolbar-box .toolbar-handle {
+ width: var(--toolbar-icon-item-width--only-icon);
+}
+
+.toolbar .toolbar-icon.toolbar-handle {
+ width: var(--toolbar-icon-item-width--only-icon);
+ padding: 0 var(--toolbar-tab-padding--horizontal);
+ text-indent: -9999px;
+}
+.toolbar .toolbar-icon.toolbar-handle:hover {
+ background: var(--toolbar-handle-bg-color--hover);
+}
+.toolbar .toolbar-icon.toolbar-handle:active {
+ background: var(--toolbar-handle-bg-color--active);
+}
+
+.toolbar .toolbar-icon.toolbar-handle::before {
+ left: 0; /* LTR */
+ width: 100%;
+ background-image: url(../../images/icons/222330/plus.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 40%;
+}
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle::before {
+ background-image: url(../../images/icons/222330/plus.svg);
+}
+[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle::before {
+ right: 0;
+ left: auto;
+}
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:hover::before,
+.toolbar .toolbar-icon.toolbar-handle:hover::before {
+ background-image: url(../../images/icons/0036B1/plus.svg);
+}
+.toolbar .toolbar-icon.toolbar-handle.open::before,
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before {
+ background-image: url(../../images/icons/0036B1/minus.svg);
+}
+.toolbar .toolbar-icon.toolbar-handle.open:hover::before,
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:hover::before {
+ background-image: url(../../images/icons/222330/minus.svg);
+}
+
+@media only screen and (-ms-high-contrast: active) {
+ .toolbar .toolbar-icon.toolbar-handle::before,
+ .toolbar .toolbar-icon.toolbar-handle.open::before,
+ .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before {
+ padding-top: var(--space-xs);
+ text-indent: 0;
+ background-image: none;
+ font-size: 2.5rem;
+ font-weight: bold;
+ }
+ .toolbar .toolbar-icon.toolbar-handle::before {
+ content: "+";
+ }
+ .toolbar .toolbar-icon.toolbar-handle.open::before,
+ .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before {
+ content: "-";
+ }
+}
+
+.toolbar .toolbar-icon-escape-admin::before {
+ background-image: url(../../images/icons/ffffff/arrow-left-square.svg);
+ background-size: 40%;
+}
+[dir="rtl"] .toolbar .toolbar-icon-escape-admin::before {
+ background-image: url(../../images/icons/ffffff/arrow-right-square.svg);
+}
+/**
+ * Orientation toggle.
+ */
+.toolbar .toolbar-toggle-orientation button {
+ width: var(--toolbar-orientation-toggle-size);
+ height: var(--toolbar-orientation-toggle-size);
+ padding: 0;
+ text-indent: -999em;
+}
+.toolbar .toolbar-toggle-orientation button::before {
+ right: 0;
+ left: 0;
+ width: var(--space-l);
+ margin: 0 auto;
+}
+[dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
+ padding: 0;
+}
+/**
+ * In order to support a hover effect on the SVG images, while also supporting
+ * RTL text direction and no SVG support, this little icon requires some very
+ * specific targeting, setting and unsetting.
+ */
+.toolbar .toolbar-toggle-orientation [value="vertical"]::before {
+ background-image: url(../../images/icons/8e929c/push-left.svg); /* LTR */
+}
+.toolbar .toolbar-toggle-orientation [value="vertical"]:hover::before,
+.toolbar .toolbar-toggle-orientation [value="vertical"]:focus::before {
+ background-image: url(../../images/icons/003cc5/push-left.svg); /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]::before {
+ background-image: url(../../images/icons/8e929c/push-right.svg);
+}
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover::before,
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus::before {
+ background-image: url(../../images/icons/003cc5/push-right.svg);
+}
+.toolbar .toolbar-toggle-orientation [value="horizontal"]::before {
+ background-image: url(../../images/icons/8e929c/push-up.svg);
+}
+.toolbar .toolbar-toggle-orientation [value="horizontal"]:hover::before,
+.toolbar .toolbar-toggle-orientation [value="horizontal"]:focus::before {
+ background-image: url(../../images/icons/003cc5/push-up.svg);
+}
+
+@media only screen and (-ms-high-contrast: active) {
+ .toolbar .toolbar-toggle-orientation .toolbar-icon {
+ width: auto;
+ padding: 0 var(--space-m);
+ text-indent: 0;
+ }
+}
+
+/* States */
+.toolbar .toolbar-icon-toggle-horizontal:focus,
+.toolbar .toolbar-icon-toggle-horizontal:hover,
+.toolbar .toolbar-icon-toggle-vertical:focus,
+.toolbar .toolbar-icon-toggle-vertical:hover {
+ background-color: var(--toolbar-orientation-toggle-bg-color);
+}
+
+.toolbar .toolbar-item {
+ position: relative;
+}
+
+.toolbar .toolbar-item:focus,
+.toolbar .toolbar-icon:focus {
+ outline: none;
+}
+.toolbar a:focus::after,
+.toolbar button:focus::after {
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ width: calc(100% - 6px);
+ height: calc(100% - 6px);
+ content: "";
+ border-radius: var(--base-border-radius);
+ box-shadow: 0 0 0 3px var(--color-focus);
+}
+
+/**
+ * Module icon overrides
+ */
+.toolbar-bar .toolbar-icon-shortcut.toolbar-icon-shortcut::before {
+ background-image: url(../../../../misc/icons/ffffff/star.svg);
+}
+.toolbar-bar .toolbar-icon-user.toolbar-icon-user::before {
+ background-image: url(../../../../misc/icons/ffffff/person.svg);
+}
+.toolbar-bar .toolbar-icon-edit.toolbar-icon-edit::before {
+ background-image: url(../../../../misc/icons/ffffff/pencil.svg);
+}
+.toolbar-bar .toolbar-icon-workspace.toolbar-icon-workspace:focus {
+ color: #fff;
+ background: #82828c;
+}
diff --git a/core/themes/claro/css/theme/toolbar.theme.css b/core/themes/claro/css/theme/toolbar.theme.css
new file mode 100644
index 0000000000..c4e494805c
--- /dev/null
+++ b/core/themes/claro/css/theme/toolbar.theme.css
@@ -0,0 +1,445 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Toolbar theme replacement for Claro.
+ */
+
+: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 gray 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.
+ */
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
+}
+
+.toolbar .toolbar-item {
+ cursor: pointer;
+ text-decoration: none;
+}
+
+.toolbar .toolbar-toggle-orientation > .toolbar-lining {
+ text-align: right; /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
+ text-align: left;
+}
+
+/**
+ * Change font size.
+ * Selector from toolbar.module.css.
+ */
+
+#toolbar-administration {
+ font-size: 0.889rem;
+}
+
+/******************************************************************************
+ *
+ * ToolBar bar.
+ *
+ * This is the topper bar with the dark background.
+ ******************************************************************************/
+
+.toolbar .toolbar-bar {
+ display: flex;
+ flex-wrap: wrap;
+ color: #fff;
+ background: #222330;
+ box-shadow: none;
+}
+
+[dir="rtl"] .toolbar .toolbar-bar {
+ box-shadow: none;
+}
+
+/******************************************************************************
+ *
+ * ToolBar tray.
+ *
+ * This is a container which wraps the actual navigation (nav.toolbar-lining).
+ * Selector from toolbar.theme.css.
+ ******************************************************************************/
+
+/**
+ * Using '.toolbar-tray' and '.toolbar-tray-vertical' or
+ * '.toolbar-tray-horizontal' would be the right approach, but we can't do that.
+ */
+
+.toolbar-tray {
+ color: #222330;
+ background: #fff;
+}
+
+.toolbar .toolbar-tray-vertical {
+ color: #222330;
+ border: 0; /* No border for unoriented mode (below 16.5em). */
+ background: #fff;
+ box-shadow: none;
+}
+
+[dir="rtl"] .toolbar .toolbar-tray-vertical {
+ border: 0;
+}
+
+.toolbar-tray-vertical.is-active {
+ border-right: 1px solid #d4d4d8;
+}
+
+[dir="rtl"] .toolbar-tray-vertical.is-active {
+ border-left: 1px solid #d4d4d8;
+}
+
+/* Horizontal tray's inherited selector is a bit different. */
+
+.toolbar-horizontal .toolbar-tray,
+[dir="rtl"] .toolbar-horizontal .toolbar-tray {
+ color: #222330;
+ border-bottom: 1px solid rgba(216, 217, 224, 0.8);
+ background: #fff;
+ box-shadow: none;
+}
+
+/**
+ * Decrease the inherited 'end' padding of tray nav that preserves space for
+ * the orientation toggle.
+ */
+
+.toolbar-horizontal .toolbar-tray > .toolbar-lining {
+ padding-right: 2.75rem;
+}
+
+[dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {
+ padding-right: 0;
+ padding-left: 2.75rem;
+}
+
+/******************************************************************************
+ *
+ * ToolBar tabs.
+ *
+ ******************************************************************************/
+
+/**
+ * Default state. Using the strongest selector from toolbar.theme.css.
+ * '.toolbar-item' would be enough otherwise.
+ *
+ * Min-height specified to fix the initial 'icon jump' for user tab
+ * (since user name is lazy-built, that tab is empty initially).
+ */
+
+.toolbar .toolbar-bar .toolbar-item {
+ min-height: 2.5rem;
+ padding: 0.75rem calc(1rem - 1px);
+ white-space: nowrap;
+ color: #fff;
+ font-weight: bold;
+ line-height: 1rem; /* Inherited font size is --font-size-s. */
+ -webkit-font-smoothing: antialiased;
+}
+
+@media only screen and (min-width: 48em) {
+ .toolbar .toolbar-bar .toolbar-item {
+ min-height: 2.75rem;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ line-height: 0.75rem;
+ }
+}
+
+@media only screen and (-ms-high-contrast: active) {
+ .toolbar .toolbar-bar .toolbar-item {
+ border-bottom: 1px solid white;
+ }
+}
+
+/**
+ * Hover state; selector from toolbar.theme.css.
+ * '.toolbar-item:hover' would be enough otherwise.
+ * Text decoration's original selector is '.toolbar .toolbar-item:hover'.
+ */
+
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active:hover {
+ color: #fff;
+ background: #82828c;
+}
+
+/**
+ * Active (pressed) state.
+ * We have to use the same strong selector as hover has.
+ */
+
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:active,
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active:active {
+ color: #fff;
+ background: #8e929c;
+}
+
+/* Current page state (and in-trail if orientation is vertical). */
+
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
+ color: #fff;
+ background: var(--color-davysgrey);
+}
+
+.toolbar-tab--push-end {
+ margin-left: auto;
+}
+
+/*****************************************************************************
+ *
+ * ToolBar tray items and ToolBar box.
+ *
+ ******************************************************************************/
+
+/* The .toolbar-box wraps first-level tray menu links. It provides a positioning
+ * context for the item list toggle but is present only if the tray is/was
+ * vertical.
+ *
+ * Since there isn't any common CSS class on these firts-level links we have to
+ * work around this with selectors for both cases.
+ *
+ * @see initItems() in toolbar.menu.es6.js.
+ */
+
+/**
+ * Toolbar items as first.
+ */
+
+/* Every menu-item link in the tray. */
+
+/* @todo (tray), horizontal, when orientation wasn't changed before. */
+
+.toolbar-tray a {
+ position: relative;
+ padding: 0.75rem 1rem;
+ text-decoration: none;
+ color: var(--color-davysgrey);
+ background: #fff;
+ line-height: 1.25rem; /* Line height var(--space-s) is too small for longer menu links. */
+ -webkit-font-smoothing: antialiased;
+}
+
+/* No underlined links. */
+
+.toolbar-tray a:hover,
+.toolbar-tray a:active,
+.toolbar-tray a:focus,
+.toolbar-tray a.is-active {
+ text-decoration: none;
+}
+
+/**
+ * 'Current page' and active trail styles.
+ * Both selector are defined in toolbar.menu.css and set a text color.
+ *
+ * BTW '.toolbar .toolbar-tray a.is-active' and
+ * '.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a' are
+ * defined in toolbar.menu.css but those should be in theme, not in module.
+ *
+ * We define background color to comply WCAG 2.0 G148. Thats why is why we have
+ * so many selectors here.
+ */
+
+.toolbar .level-2 a {
+ color: var(--color-davysgrey);
+ background: rgba(243, 244, 249, 0.4);
+}
+
+.toolbar .level-3 a {
+ color: var(--color-davysgrey);
+ background: #f3f4f9;
+}
+
+.toolbar .level-4 a {
+ color: var(--color-davysgrey);
+ background: rgba(216, 217, 224, 0.3);
+}
+
+/* Current page and in-trail styles */
+
+.toolbar .toolbar-tray a.is-active,
+.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a {
+ color: #003cc5;
+ background: #fff;
+ font-weight: bold;
+}
+
+.toolbar .toolbar-tray .level-2.menu-item--active-trail > .toolbar-box a {
+ color: #003cc5;
+ background: rgba(243, 244, 249, 0.4);
+}
+
+.toolbar .toolbar-tray .level-3.menu-item--active-trail > .toolbar-box a {
+ color: #003cc5;
+ background: #f3f4f9;
+}
+
+.toolbar .toolbar-tray .level-4.menu-item--active-trail > .toolbar-box a {
+ color: #003cc5;
+ background: rgba(216, 217, 224, 0.3);
+}
+
+/* Hover states with the same selector strength as the current page states. */
+
+.toolbar-tray a:hover,
+.toolbar .toolbar-tray a.is-active:hover,
+.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a:hover {
+ color: #0036b1;
+ background: #f0f5fd;
+}
+
+.toolbar-tray-horizontal a {
+ font-weight: bold;
+}
+
+.toolbar-tray-horizontal a:hover,
+.toolbar-tray-horizontal a:active {
+ box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+
+/* Active (pressed) state */
+
+.toolbar-tray a:active,
+.toolbar .toolbar-tray a.is-active:active,
+.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a:active {
+ color: #00339a;
+ background: #e6ecf8;
+}
+
+/******************************************************************************
+ *
+ * ToolBar tray menus.
+ *
+ * Styles defined here affect mainly vertical orientation.
+ ******************************************************************************/
+
+.level-1 > .toolbar-menu {
+ border-top: 1px solid #d4d4d8;
+}
+
+.toolbar-menu:not(.root) .menu-item:first-child > .toolbar-box > a {
+ box-shadow: inset 0 6px 6px -3px rgba(0, 0, 0, 0.05);
+}
+
+/**
+ * Selector comes from toolbar.theme.css
+ * Normally, '.level-2 .toolbar-menu' should be enough.
+ */
+
+.toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
+ border: 0 solid #d4d4d8;
+ border-width: 1px 0;
+}
+
+/**
+ * Override borders of vertical tray items.
+ * CSS selector overrides the same one from toolbar.theme.css.
+ */
+
+.toolbar .toolbar-tray-vertical .menu-item {
+ border: 1px solid #d4d4d8;
+ border-width: 0 0 1px;
+}
+
+/* We have to reset the weird styling inherited from toobar.theme.css. */
+
+.toolbar .toolbar-tray-vertical .menu-item .menu-item {
+ border-width: 0 0 1px;
+}
+
+/* No border for deeper levels. */
+
+.toolbar .toolbar-tray-vertical .menu-item .menu-item {
+ border: 0;
+}
+
+/**
+ * We need borders for the other trays as well, not just for administration
+ * menu.
+ */
+
+.toolbar .toolbar-tray-vertical .toolbar-menu li {
+ border: 1px solid #d4d4d8;
+ border-width: 0 0 1px;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu li li {
+ border-width: 0;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu li li:first-child {
+ border-width: 1px 0 0;
+}
+
+/**
+ * No border for horizontal toolbar items.
+ * Selector from toolbar.theme.css.
+ */
+
+.toolbar-horizontal .toolbar-tray .menu-item .menu-item,
+[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item .menu-item {
+ border: 0;
+}
+
+.toolbar .toolbar-tray.is-active {
+ /* If the toolbar wraps to more than one line, the icon buttons
+ will bleed through into the horizontal tray unless z-index is boosted.
+ */
+ z-index: 503;
+}
+
+@media only screen and (-ms-high-contrast: active) {
+ .toolbar a:hover,
+ .toolbar button:hover {
+ text-decoration: underline;
+ }
+}
diff --git a/core/themes/claro/css/theme/toolbar.theme.pcss.css b/core/themes/claro/css/theme/toolbar.theme.pcss.css
new file mode 100644
index 0000000000..7791c412a9
--- /dev/null
+++ b/core/themes/claro/css/theme/toolbar.theme.pcss.css
@@ -0,0 +1,351 @@
+/**
+ * @file
+ * Toolbar theme replacement for Claro.
+ */
+
+@import "../base/variables.pcss.css";
+
+.toolbar .toolbar-item {
+ cursor: pointer;
+ text-decoration: none;
+}
+
+.toolbar .toolbar-toggle-orientation > .toolbar-lining {
+ text-align: right; /* LTR */
+}
+[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
+ text-align: left;
+}
+
+/**
+ * Change font size.
+ * Selector from toolbar.module.css.
+ */
+#toolbar-administration {
+ font-size: var(--toolbar-font-size);
+}
+
+/******************************************************************************
+ *
+ * ToolBar bar.
+ *
+ * This is the topper bar with the dark background.
+ ******************************************************************************/
+
+.toolbar .toolbar-bar {
+ display: flex;
+ flex-wrap: wrap;
+ color: var(--toolbar-tab-fg-color);
+ background: var(--toolbar-tab-bg-color);
+ box-shadow: none;
+}
+[dir="rtl"] .toolbar .toolbar-bar {
+ box-shadow: none;
+}
+
+/******************************************************************************
+ *
+ * ToolBar tray.
+ *
+ * This is a container which wraps the actual navigation (nav.toolbar-lining).
+ * Selector from toolbar.theme.css.
+ ******************************************************************************/
+
+/**
+ * Using '.toolbar-tray' and '.toolbar-tray-vertical' or
+ * '.toolbar-tray-horizontal' would be the right approach, but we can't do that.
+ */
+.toolbar-tray {
+ color: var(--toolbar-tray-fg-color);
+ background: var(--toolbar-tray-bg-color);
+}
+.toolbar .toolbar-tray-vertical {
+ color: var(--toolbar-tray-fg-color);
+ border: 0; /* No border for unoriented mode (below 16.5em). */
+ background: var(--toolbar-tray-bg-color);
+ box-shadow: none;
+}
+[dir="rtl"] .toolbar .toolbar-tray-vertical {
+ border: 0;
+}
+.toolbar-tray-vertical.is-active {
+ border-right: var(--toolbar-tray-border-size) solid var(--toolbar-tray-border-color);
+}
+[dir="rtl"] .toolbar-tray-vertical.is-active {
+ border-left: var(--toolbar-tray-border-size) solid var(--toolbar-tray-border-color);
+}
+/* Horizontal tray's inherited selector is a bit different. */
+.toolbar-horizontal .toolbar-tray,
+[dir="rtl"] .toolbar-horizontal .toolbar-tray {
+ color: var(--toolbar-tray-fg-color);
+ border-bottom: 1px solid var(--toolbar-tray-border-color--horizontal);
+ background: var(--toolbar-tray-bg-color);
+ box-shadow: none;
+}
+
+/**
+ * Decrease the inherited 'end' padding of tray nav that preserves space for
+ * the orientation toggle.
+ */
+.toolbar-horizontal .toolbar-tray > .toolbar-lining {
+ padding-right: var(--toolbar-orientation-toggle-size);
+}
+[dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {
+ padding-right: 0;
+ padding-left: var(--toolbar-orientation-toggle-size);
+}
+
+/******************************************************************************
+ *
+ * ToolBar tabs.
+ *
+ ******************************************************************************/
+
+/**
+ * Default state. Using the strongest selector from toolbar.theme.css.
+ * '.toolbar-item' would be enough otherwise.
+ *
+ * Min-height specified to fix the initial 'icon jump' for user tab
+ * (since user name is lazy-built, that tab is empty initially).
+ */
+.toolbar .toolbar-bar .toolbar-item {
+ min-height: var(--toolbar-tab-height);
+ padding: var(--toolbar-tab-padding--vertical) var(--toolbar-tab-padding--horizontal);
+ white-space: nowrap;
+ color: var(--toolbar-tab-fg-color);
+ font-weight: bold;
+ line-height: var(--toolbar-tab-line-height); /* Inherited font size is --font-size-s. */
+ -webkit-font-smoothing: antialiased;
+}
+
+@media only screen and (min-width: 48em) {
+ .toolbar .toolbar-bar .toolbar-item {
+ min-height: var(--toolbar-tab-height--large);
+ padding-top: var(--toolbar-tab-padding--vertical--large);
+ padding-bottom: var(--toolbar-tab-padding--vertical--large);
+ line-height: var(--toolbar-tab-line-height--large);
+ }
+}
+
+@media only screen and (-ms-high-contrast: active) {
+ .toolbar .toolbar-bar .toolbar-item {
+ border-bottom: 1px solid white;
+ }
+}
+
+/**
+ * Hover state; selector from toolbar.theme.css.
+ * '.toolbar-item:hover' would be enough otherwise.
+ * Text decoration's original selector is '.toolbar .toolbar-item:hover'.
+ */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active:hover {
+ color: var(--toolbar-tab-fg-color);
+ background: var(--toolbar-tab-bg-color--hover);
+}
+/**
+ * Active (pressed) state.
+ * We have to use the same strong selector as hover has.
+ */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:active,
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active:active {
+ color: var(--toolbar-tab-fg-color);
+ background: var(--toolbar-tab-bg-color--active);
+}
+/* Current page state (and in-trail if orientation is vertical). */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
+ color: var(--toolbar-tab-fg-color);
+ background: var(--toolbar-tab-bg-color--is-active);
+}
+
+.toolbar-tab--push-end {
+ margin-left: auto;
+}
+
+/*****************************************************************************
+ *
+ * ToolBar tray items and ToolBar box.
+ *
+ ******************************************************************************/
+
+/* The .toolbar-box wraps first-level tray menu links. It provides a positioning
+ * context for the item list toggle but is present only if the tray is/was
+ * vertical.
+ *
+ * Since there isn't any common CSS class on these firts-level links we have to
+ * work around this with selectors for both cases.
+ *
+ * @see initItems() in toolbar.menu.es6.js.
+ */
+
+/**
+ * Toolbar items as first.
+ */
+
+/* Every menu-item link in the tray. */
+/* @todo (tray), horizontal, when orientation wasn't changed before. */
+.toolbar-tray a {
+ position: relative;
+ padding: var(--toolbar-tray-link-padding--vertical) var(--toolbar-tray-link-padding--horizontal);
+ text-decoration: none;
+ color: var(--toolbar-tray-link-fg-color);
+ background: var(--toolbar-tray-link-bg-color);
+ line-height: var(--toolbar-tray-link-line-height); /* Line height var(--space-s) is too small for longer menu links. */
+ -webkit-font-smoothing: antialiased;
+}
+
+/* No underlined links. */
+.toolbar-tray a:hover,
+.toolbar-tray a:active,
+.toolbar-tray a:focus,
+.toolbar-tray a.is-active {
+ text-decoration: none;
+}
+
+/**
+ * 'Current page' and active trail styles.
+ * Both selector are defined in toolbar.menu.css and set a text color.
+ *
+ * BTW '.toolbar .toolbar-tray a.is-active' and
+ * '.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a' are
+ * defined in toolbar.menu.css but those should be in theme, not in module.
+ *
+ * We define background color to comply WCAG 2.0 G148. Thats why is why we have
+ * so many selectors here.
+ */
+
+.toolbar .level-2 a {
+ color: var(--toolbar-tray-link-fg-color);
+ background: var(--toolbar-tray-link-bg-color--level2);
+}
+.toolbar .level-3 a {
+ color: var(--toolbar-tray-link-fg-color);
+ background: var(--toolbar-tray-link-bg-color--level3);
+}
+.toolbar .level-4 a {
+ color: var(--toolbar-tray-link-fg-color);
+ background: var(--toolbar-tray-link-bg-color--level4);
+}
+
+/* Current page and in-trail styles */
+.toolbar .toolbar-tray a.is-active,
+.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a {
+ color: var(--toolbar-tray-link-fg-color--is-active);
+ background: var(--toolbar-tray-link-bg-color);
+ font-weight: bold;
+}
+.toolbar .toolbar-tray .level-2.menu-item--active-trail > .toolbar-box a {
+ color: var(--toolbar-tray-link-fg-color--is-active);
+ background: var(--toolbar-tray-link-bg-color--level2);
+}
+.toolbar .toolbar-tray .level-3.menu-item--active-trail > .toolbar-box a {
+ color: var(--toolbar-tray-link-fg-color--is-active);
+ background: var(--toolbar-tray-link-bg-color--level3);
+}
+.toolbar .toolbar-tray .level-4.menu-item--active-trail > .toolbar-box a {
+ color: var(--toolbar-tray-link-fg-color--is-active);
+ background: var(--toolbar-tray-link-bg-color--level4);
+}
+
+/* Hover states with the same selector strength as the current page states. */
+.toolbar-tray a:hover,
+.toolbar .toolbar-tray a.is-active:hover,
+.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a:hover {
+ color: var(--toolbar-tray-link-fg-color--hover);
+ background: var(--toolbar-tray-link-bg-color--hover);
+}
+
+.toolbar-tray-horizontal a {
+ font-weight: bold;
+}
+
+.toolbar-tray-horizontal a:hover,
+.toolbar-tray-horizontal a:active {
+ box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+
+/* Active (pressed) state */
+.toolbar-tray a:active,
+.toolbar .toolbar-tray a.is-active:active,
+.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a:active {
+ color: var(--toolbar-tray-link-fg-color--active);
+ background: var(--toolbar-tray-link-bg-color--active);
+}
+
+/******************************************************************************
+ *
+ * ToolBar tray menus.
+ *
+ * Styles defined here affect mainly vertical orientation.
+ ******************************************************************************/
+
+.level-1 > .toolbar-menu {
+ border-top: var(--toolbar-tray-border-size) solid var(--toolbar-tray-border-color);
+}
+.toolbar-menu:not(.root) .menu-item:first-child > .toolbar-box > a {
+ box-shadow: inset 0 6px 6px -3px rgba(0, 0, 0, 0.05);
+}
+
+/**
+ * Selector comes from toolbar.theme.css
+ * Normally, '.level-2 .toolbar-menu' should be enough.
+ */
+.toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
+ border: 0 solid var(--toolbar-tray-border-color);
+ border-width: var(--toolbar-tray-border-size) 0;
+}
+
+/**
+ * Override borders of vertical tray items.
+ * CSS selector overrides the same one from toolbar.theme.css.
+ */
+.toolbar .toolbar-tray-vertical .menu-item {
+ border: var(--toolbar-tray-border-size) solid var(--toolbar-tray-border-color);
+ border-width: 0 0 var(--toolbar-tray-border-size);
+}
+/* We have to reset the weird styling inherited from toobar.theme.css. */
+.toolbar .toolbar-tray-vertical .menu-item .menu-item {
+ border-width: 0 0 var(--toolbar-tray-border-size);
+}
+/* No border for deeper levels. */
+.toolbar .toolbar-tray-vertical .menu-item .menu-item {
+ border: 0;
+}
+
+/**
+ * We need borders for the other trays as well, not just for administration
+ * menu.
+ */
+.toolbar .toolbar-tray-vertical .toolbar-menu li {
+ border: var(--toolbar-tray-border-size) solid var(--toolbar-tray-border-color);
+ border-width: 0 0 var(--toolbar-tray-border-size);
+}
+.toolbar .toolbar-tray-vertical .toolbar-menu li li {
+ border-width: 0;
+}
+.toolbar .toolbar-tray-vertical .toolbar-menu li li:first-child {
+ border-width: var(--toolbar-tray-border-size) 0 0;
+}
+
+/**
+ * No border for horizontal toolbar items.
+ * Selector from toolbar.theme.css.
+ */
+.toolbar-horizontal .toolbar-tray .menu-item .menu-item,
+[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item .menu-item {
+ border: 0;
+}
+
+.toolbar .toolbar-tray.is-active {
+ /* If the toolbar wraps to more than one line, the icon buttons
+ will bleed through into the horizontal tray unless z-index is boosted.
+ */
+ z-index: 503;
+}
+
+@media only screen and (-ms-high-contrast: active) {
+ .toolbar a:hover,
+ .toolbar button:hover {
+ text-decoration: underline;
+ }
+}
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 0074497dbc..13e8946bc1 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.css
@@ -57,6 +57,8 @@
/**
* Breadcrumb.
*/
+
+ /* Toolbar */ /* Light gray with 0.8 opacity */ /* Line height var(--space-s) is too small for longer menu links. */
}
.views-admin .links {
diff --git a/core/themes/claro/images/icons/0036b1/barchart.svg b/core/themes/claro/images/icons/0036b1/barchart.svg
new file mode 100644
index 0000000000..362a1aeb29
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/barchart.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/0036b1/file.svg b/core/themes/claro/images/icons/0036b1/file.svg
new file mode 100644
index 0000000000..3861568b76
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/file.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/0036b1/minus.svg b/core/themes/claro/images/icons/0036b1/minus.svg
new file mode 100644
index 0000000000..89a2d072a7
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/minus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/core/themes/claro/images/icons/0036b1/orgchart.svg b/core/themes/claro/images/icons/0036b1/orgchart.svg
new file mode 100644
index 0000000000..d26947c673
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/orgchart.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/0036b1/paintbrush.svg b/core/themes/claro/images/icons/0036b1/paintbrush.svg
new file mode 100644
index 0000000000..8173b6d4e3
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/paintbrush.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/0036b1/people.svg b/core/themes/claro/images/icons/0036b1/people.svg
new file mode 100644
index 0000000000..ac5022459c
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/people.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/0036b1/puzzlepiece.svg b/core/themes/claro/images/icons/0036b1/puzzlepiece.svg
new file mode 100644
index 0000000000..fb58c796d4
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/puzzlepiece.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/0036b1/questionmark-disc.svg b/core/themes/claro/images/icons/0036b1/questionmark-disc.svg
new file mode 100644
index 0000000000..90c6ee1ce4
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/questionmark-disc.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/0036b1/wrench.svg b/core/themes/claro/images/icons/0036b1/wrench.svg
new file mode 100644
index 0000000000..e602cd08f9
--- /dev/null
+++ b/core/themes/claro/images/icons/0036b1/wrench.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/barchart.svg b/core/themes/claro/images/icons/003cc5/barchart.svg
new file mode 100644
index 0000000000..62409a1e37
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/barchart.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/file.svg b/core/themes/claro/images/icons/003cc5/file.svg
new file mode 100644
index 0000000000..491641dfb9
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/file.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/minus.svg b/core/themes/claro/images/icons/003cc5/minus.svg
new file mode 100644
index 0000000000..47e14e3af6
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/minus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/core/themes/claro/images/icons/003cc5/orgchart.svg b/core/themes/claro/images/icons/003cc5/orgchart.svg
new file mode 100644
index 0000000000..c3aea9630b
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/orgchart.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/paintbrush.svg b/core/themes/claro/images/icons/003cc5/paintbrush.svg
new file mode 100644
index 0000000000..c059c88c38
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/paintbrush.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/people.svg b/core/themes/claro/images/icons/003cc5/people.svg
new file mode 100644
index 0000000000..0e968908b2
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/people.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/plus.svg b/core/themes/claro/images/icons/003cc5/plus.svg
new file mode 100644
index 0000000000..d81abd17d0
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/plus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/core/themes/claro/images/icons/003cc5/push-left.svg b/core/themes/claro/images/icons/003cc5/push-left.svg
new file mode 100644
index 0000000000..63175e3424
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/push-left.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/push-right.svg b/core/themes/claro/images/icons/003cc5/push-right.svg
new file mode 100644
index 0000000000..988b3546be
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/push-right.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/push-up.svg b/core/themes/claro/images/icons/003cc5/push-up.svg
new file mode 100644
index 0000000000..cd673bf2ae
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/push-up.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/puzzlepiece.svg b/core/themes/claro/images/icons/003cc5/puzzlepiece.svg
new file mode 100644
index 0000000000..59e29123b9
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/puzzlepiece.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/questionmark-disc.svg b/core/themes/claro/images/icons/003cc5/questionmark-disc.svg
new file mode 100644
index 0000000000..6a1d16cb88
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/questionmark-disc.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/003cc5/wrench.svg b/core/themes/claro/images/icons/003cc5/wrench.svg
new file mode 100644
index 0000000000..201a8cd932
--- /dev/null
+++ b/core/themes/claro/images/icons/003cc5/wrench.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/222330/minus.svg b/core/themes/claro/images/icons/222330/minus.svg
new file mode 100644
index 0000000000..7b7440ebf3
--- /dev/null
+++ b/core/themes/claro/images/icons/222330/minus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/core/themes/claro/images/icons/222330/plus.svg b/core/themes/claro/images/icons/222330/plus.svg
new file mode 100644
index 0000000000..f96f032e75
--- /dev/null
+++ b/core/themes/claro/images/icons/222330/plus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/core/themes/claro/images/icons/8e929c/push-left.svg b/core/themes/claro/images/icons/8e929c/push-left.svg
new file mode 100644
index 0000000000..b785ef9aad
--- /dev/null
+++ b/core/themes/claro/images/icons/8e929c/push-left.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/8e929c/push-right.svg b/core/themes/claro/images/icons/8e929c/push-right.svg
new file mode 100644
index 0000000000..3c43cf875e
--- /dev/null
+++ b/core/themes/claro/images/icons/8e929c/push-right.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/8e929c/push-up.svg b/core/themes/claro/images/icons/8e929c/push-up.svg
new file mode 100644
index 0000000000..19e8546635
--- /dev/null
+++ b/core/themes/claro/images/icons/8e929c/push-up.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/ffffff/arrow-left-square.svg b/core/themes/claro/images/icons/ffffff/arrow-left-square.svg
new file mode 100644
index 0000000000..817f4d258f
--- /dev/null
+++ b/core/themes/claro/images/icons/ffffff/arrow-left-square.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/ffffff/arrow-right-square.svg b/core/themes/claro/images/icons/ffffff/arrow-right-square.svg
new file mode 100644
index 0000000000..f9ed204c57
--- /dev/null
+++ b/core/themes/claro/images/icons/ffffff/arrow-right-square.svg
@@ -0,0 +1 @@
+
diff --git a/core/themes/claro/images/icons/ffffff/burger.svg b/core/themes/claro/images/icons/ffffff/burger.svg
new file mode 100644
index 0000000000..f83dbe478a
--- /dev/null
+++ b/core/themes/claro/images/icons/ffffff/burger.svg
@@ -0,0 +1 @@
+
\ No newline at end of file