diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module index 0d3f8cc..37b4596 100644 --- a/core/modules/shortcut/shortcut.module +++ b/core/modules/shortcut/shortcut.module @@ -735,6 +735,7 @@ function shortcut_toolbar() { } $links_tray = array( + '#heading' => t('User-defined shortcuts'), 'shortcuts' => $links, 'configure' => $configure_link, ); diff --git a/core/modules/shortcut/shortcut.theme.css b/core/modules/shortcut/shortcut.theme.css index 3d899a0..7d43c69 100644 --- a/core/modules/shortcut/shortcut.theme.css +++ b/core/modules/shortcut/shortcut.theme.css @@ -16,15 +16,14 @@ .toolbar .tray.horizontal.shortcuts .menu { float: left; } - .edit-shortcuts { display: block; } -.tray.vertical .edit-shortcuts { +.toolbar .vertical .edit-shortcuts { text-align: right; padding: 1em; } -.tray.horizontal .edit-shortcuts { +.toolbar .horizontal .edit-shortcuts { float: left; /* LTR */ } diff --git a/core/modules/toolbar/css/toolbar.base-rtl.css b/core/modules/toolbar/css/toolbar.base-rtl.css index e888abf..13548cc 100644 --- a/core/modules/toolbar/css/toolbar.base-rtl.css +++ b/core/modules/toolbar/css/toolbar.base-rtl.css @@ -43,6 +43,12 @@ html.js .toolbar { left: auto; right: 0; } +@media only screen and (min-width: 16.5em) { + .toolbar .vertical.active > .lining:before { + left: auto; + right: -1px; + } +} /** * At larger screen sizes, the tray pushes the page content. diff --git a/core/modules/toolbar/css/toolbar.base.css b/core/modules/toolbar/css/toolbar.base.css index 53412ac..9b6ae73 100644 --- a/core/modules/toolbar/css/toolbar.base.css +++ b/core/modules/toolbar/css/toolbar.base.css @@ -12,7 +12,6 @@ html .toolbar * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; - outline: 0; padding: 0; vertical-align: baseline; } @@ -44,7 +43,8 @@ html.js .toolbar { .js .toolbar .menu li { display: block; } -.js .toolbar .bar li { +.js .toolbar .bar li, +.js .toolbar .tray li { float: left; /* LTR */ } .js .toolbar a { @@ -62,13 +62,14 @@ html.js .toolbar { width: 100%; } @media only screen { - .js .toolbar .bar li { + .js .toolbar .bar li, + .js .toolbar .tray li { float: none; } } @media only screen and (min-width: 16.5em) { .js .toolbar .bar li, - .toolbar .horizontal li { + .js .toolbar .horizontal li { float: left; /* LTR */ } } @@ -100,14 +101,27 @@ html.js .toolbar { .toolar .tray .lining { position: relative; } -.toolbar .vertical > .lining { +.toolbar .vertical > .lining, +.toolbar .vertical > .lining:before { left: -100%; /* LTR */ min-height: 100%; position: absolute; width: 100%; } -.toolbar .vertical > .lining > .edge { +.toolbar .vertical > .lining:before { + bottom: 0; + -moz-box-sizing: content-box; + -o-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; + content: ''; display: none; + height: 100%; + /* Support for devices that do not support position fixed. */ + position: absolute; + position: fixed; + top: 0; + z-index: -1; } .toolbar .tray.active { display: block; @@ -127,22 +141,13 @@ html.js .toolbar { bottom: 0; } .toolbar .vertical, - .toolbar .vertical > .lining > .edge { + .toolbar .vertical > .lining:before { width: 240px; width: 15rem; } - .toolbar .vertical.active > .lining > .edge { - -moz-box-sizing: content-box; - -o-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; + .toolbar .vertical.active > .lining:before { display: block; - height: 100%; - /* Support for devices that do not support position fixed. */ - position: absolute; - position: fixed; - top: 0; - z-index: -1; + left: -1px; /* LTR */ } } @media only screen and (min-width: 28.125em) { @@ -161,7 +166,18 @@ html.js .toolbar { } /** * ToolBar tray orientation toggle. + * + * Hide the orientation toggle from browsers that do not interpret + * media queries. They get a standard horizontal toolbar. */ +.toolbar .toggle-orientation { + display: none; +} +@media only screen { + .toolbar .toggle-orientation { + display: block; + } +} .toolbar .horizontal .toggle-orientation { bottom: 0; position: absolute; diff --git a/core/modules/toolbar/css/toolbar.theme-rtl.css b/core/modules/toolbar/css/toolbar.theme-rtl.css index b3798c7..37416b4 100644 --- a/core/modules/toolbar/css/toolbar.theme-rtl.css +++ b/core/modules/toolbar/css/toolbar.theme-rtl.css @@ -9,9 +9,12 @@ padding-right: 0; padding-left: 5em; } -.toolbar .vertical > .lining > .edge { +.toolbar .vertical > .lining, +.toolbar .vertical > .lining:before { border-left: 1px solid #aaaaaa; border-right: 0 none; +} +.toolbar .vertical > .lining:before { box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333); } .toolbar .horizontal .menu li + li { @@ -50,6 +53,8 @@ .toolbar .toggle-orientation [value="vertical"] { border-left-width: 1px; border-right-width: 7px; +} +.toolbar .toggle-orientation [value="horizontal"] { margin-left: 0; margin-right: 0.5em; } diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css index 6885208..94f76fd 100644 --- a/core/modules/toolbar/css/toolbar.theme.css +++ b/core/modules/toolbar/css/toolbar.theme.css @@ -52,9 +52,12 @@ .toolbar .horizontal > .lining { padding-right: 5em; /* LTR */ } -.toolbar .vertical > .lining > .edge { +.toolbar .vertical > .lining, +.toolbar .vertical > .lining:before { background-color: #ffffff; border-right: 1px solid #aaaaaa; /* LTR */ +} +.toolbar .vertical > .lining:before { box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */ } .toolbar .horizontal { @@ -136,10 +139,10 @@ } .toolbar .toggle-orientation [value="vertical"] { border-left-width: 7px; /* LTR */ - margin-left: 0.5em; /* LTR */ } .toolbar .toggle-orientation [value="horizontal"] { border-top-width: 4px; + margin-left: 0.5em; /* LTR */ } .toolbar .toggle-orientation .active { border-color: #3F9AD3; diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js index c86defe..d26b443 100644 --- a/core/modules/toolbar/js/toolbar.js +++ b/core/modules/toolbar/js/toolbar.js @@ -94,6 +94,7 @@ Drupal.behaviors.toolbar = { } } }; + /** * Toggle a toolbar tab and the associated tray. */ @@ -106,6 +107,9 @@ Drupal.toolbar.toggleTray = function (event) { event.preventDefault(); event.stopPropagation(); $tab.toggleClass('active'); + // Toggle aria-pressed. + var value = $tab.attr('aria-pressed'); + $tab.attr('aria-pressed', (value === 'false') ? 'true' : 'false'); // Store the active tab name or remove the setting. if ($tab.hasClass('active')) { localStorage.setItem('Drupal.toolbar.activeTab', JSON.stringify(name)); @@ -114,7 +118,11 @@ Drupal.toolbar.toggleTray = function (event) { localStorage.removeItem('Drupal.toolbar.activeTab'); } // Disable non-selected tabs and trays. - $toolbar.find('.bar a').not($tab).removeClass('active'); + $toolbar.find('.bar a') + .not($tab) + .removeClass('active') + // Set aria-pressed to false. + .attr('aria-pressed', 'false'); $toolbar.find('.tray').not($activateTray).removeClass('active'); // Adjust the body to accommodate trays. setBodyState(); @@ -156,6 +164,7 @@ Drupal.toolbar.setHeight = function () { $(window).trigger('resize'); } }; + /** * Respond to configured media query applicability changes. */ @@ -167,6 +176,7 @@ Drupal.toolbar.mediaQueryChangeHandler = function (mql) { // Adjust the height of the toolbar. Drupal.toolbar.setHeight(); }; + /** * Respond to the toggling of the tray orientation. */ @@ -214,6 +224,7 @@ function changeOrientation (newOrientation, isLock) { // Store the orientation to maintain it across page loads. localStorage.setItem('Drupal.toolbar.trayOrientation', JSON.stringify(newOrientation)); } + /** * Mark up the body tag to reflect the current state of the toolbar. */ @@ -224,6 +235,7 @@ function setBodyState () { .toggleClass('toolbar-vertical', (!!$activeTray.length && orientation === 'vertical')) .toggleClass('toolbar-horizontal', (!!$activeTray.length && orientation === 'horizontal')); } + /** * Change the orientation toggle active state. */ @@ -240,8 +252,8 @@ function toggleOrientationToggle (orientation) { */ Drupal.theme.toolbarOrientationToggle = function () { return '