diff --git a/core/modules/toolbar/css/toolbar.icons.theme.css b/core/modules/toolbar/css/toolbar.icons.theme.css
index 65aff35be2231629bb95249100fbf96426b2d831..69f0df821d134b77b3fb55891bfbec53a782aeab 100644
--- a/core/modules/toolbar/css/toolbar.icons.theme.css
+++ b/core/modules/toolbar/css/toolbar.icons.theme.css
@@ -150,7 +150,7 @@
}
@media only screen and (min-width: 16.5em) {
- .toolbar .toolbar-bar .toolbar-icon {
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
margin-left: 0;
margin-right: 0;
padding-left: 0;
@@ -158,36 +158,42 @@
text-indent: -9999px;
width: 4em;
}
- .toolbar .toolbar-bar .toolbar-icon:before {
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
background-size: 42% auto;
left: 0; /* LTR */
width: 100%;
}
- [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
+ .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+ background-size: auto auto;
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
left: auto;
right: 0;
}
}
@media only screen and (min-width: 36em) {
- .toolbar .toolbar-bar .toolbar-icon {
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
background-position: left center; /* LTR */
padding-left: 2.75em; /* LTR */
padding-right: 1.3333em; /* LTR */
text-indent: 0;
width: auto;
}
- [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon {
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
background-position: right center;
padding-left: 1.3333em;
padding-right: 2.75em;
}
- .toolbar .toolbar-bar .toolbar-icon:before {
+ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
background-size: 100% auto;
left: 0.6667em; /* LTR */
width: 20px;
}
- [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
+ .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+ background-size: auto auto;
+ }
+ [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
left: 0;
right: 0.6667em;
}
diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index 771b70506116a723d6701b1a2541b0236bd5cc8e..69eb7c22fcf7551f366997d2bf9ee9c803f0727f 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -170,6 +170,11 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
left: auto;
right: 0;
}
+/* 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;
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index 456e602787bfac1aa5d24a74011683ede23fe131..a63e2a20890da41031d973a3ed28bb6096e21819 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -238,13 +238,13 @@
adjustPlacement: function () {
var $trays = this.$el.find('.toolbar-tray');
if (!this.model.get('isOriented')) {
- $trays.css('padding-top', 0);
+ $trays.css('margin-top', 0);
$trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
}
else {
// The toolbar container is invisible. Its placement is used to
// determine the container for the trays.
- $trays.css('padding-top', this.$el.find('.toolbar-bar').outerHeight());
+ $trays.css('margin-top', this.$el.find('.toolbar-bar').outerHeight());
}
},
diff --git a/core/modules/toolbar/templates/toolbar.html.twig b/core/modules/toolbar/templates/toolbar.html.twig
index 30e61eacbab7a742c45a984adb917cdd1cf6a279..2c9e679d7b7028f342c357d36ce0fa68da6a4b98 100644
--- a/core/modules/toolbar/templates/toolbar.html.twig
+++ b/core/modules/toolbar/templates/toolbar.html.twig
@@ -25,23 +25,22 @@
<div{{ attributes.addClass('toolbar') }}>
<nav{{ toolbar_attributes.addClass('toolbar-bar') }}>
<h2 class="visually-hidden">{{ toolbar_heading }}</h2>
- {% for tab in tabs %}
- <div{{ tab.attributes.addClass('toolbar-tab') }}>{{ tab.link }}</div>
+ {% for key, tab in tabs %}
+ {% set tray = trays[key] %}
+ <div{{ tab.attributes.addClass('toolbar-tab') }}>
+ {{ tab.link }}
+ {% spaceless %}
+ <div{{ tray.attributes }}>
+ <nav class="toolbar-lining clearfix" role="navigation">
+ {% if tray.label %}
+ <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
+ {% endif %}
+ {{ tray.links }}
+ </nav>
+ </div>
+ {% endspaceless %}
+ </div>
{% endfor %}
</nav>
- {% for tray in trays %}
- {% spaceless %}
- <div{{ tray.attributes }}>
- {% if tray.label %}
- <nav class="toolbar-lining" role="navigation" aria-label="{{ tray.label }}">
- <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
- {% else %}
- <nav class="toolbar-lining" role="navigation">
- {% endif %}
- {{ tray.links }}
- </nav>
- </div>
- {% endspaceless %}
- {% endfor %}
{{ remainder }}
</div>
diff --git a/core/themes/classy/templates/navigation/toolbar.html.twig b/core/themes/classy/templates/navigation/toolbar.html.twig
index 05de2a9a860dc6cbc704de0566df3f1078ec38c9..a0927f7802f66f86a8f1d22c090eb127e9a7403c 100644
--- a/core/themes/classy/templates/navigation/toolbar.html.twig
+++ b/core/themes/classy/templates/navigation/toolbar.html.twig
@@ -23,23 +23,22 @@
<div{{ attributes.addClass('toolbar') }}>
<nav{{ toolbar_attributes.addClass('toolbar-bar', 'clearfix') }}>
<h2 class="visually-hidden">{{ toolbar_heading }}</h2>
- {% for tab in tabs %}
- <div{{ tab.attributes.addClass('toolbar-tab') }}>{{ tab.link }}</div>
+ {% for key, tab in tabs %}
+ {% set tray = trays[key] %}
+ <div{{ tab.attributes.addClass('toolbar-tab') }}>
+ {{ tab.link }}
+ {% spaceless %}
+ <div{{ tray.attributes }}>
+ <nav class="toolbar-lining clearfix" role="navigation">
+ {% if tray.label %}
+ <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
+ {% endif %}
+ {{ tray.links }}
+ </nav>
+ </div>
+ {% endspaceless %}
+ </div>
{% endfor %}
</nav>
- {% for tray in trays %}
- {% spaceless %}
- <div{{ tray.attributes }}>
- {% if tray.label %}
- <nav class="toolbar-lining clearfix" role="navigation" aria-label="{{ tray.label }}">
- <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
- {% else %}
- <nav class="toolbar-lining clearfix" role="navigation">
- {% endif %}
- {{ tray.links }}
- </nav>
- </div>
- {% endspaceless %}
- {% endfor %}
{{ remainder }}
</div>