diff --git a/core/misc/debounce.js b/core/misc/debounce.js index 523b402..338a50d 100644 --- a/core/misc/debounce.js +++ b/core/misc/debounce.js @@ -1,6 +1,14 @@ /** * Limits the invocations of a function in a given time frame. * + * The debounce function wrapper should be used sparingly. One clear use case + * is limiting the invocation of a callback attached to the window resize event. + * + * Before using the debounce function wrapper, consider first whether the + * callback could be attache to an event that fires less frequently or if the + * function can be written in such a way that it is only invoked under specific + * conditions. + * * @param {Function} callback * The function to be invoked. * diff --git a/core/modules/shortcut/images/shortcut-active.png b/core/modules/shortcut/images/shortcut-active.png new file mode 100644 index 0000000..214bd30 --- /dev/null +++ b/core/modules/shortcut/images/shortcut-active.png @@ -0,0 +1,3 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<IDATxbd@wR @ 4 L.f5  *6q136 Ҏ@\jI1QTTd(p }(f'`bbb }C-@P\\ G ^0M}\YIENDB` \ No newline at end of file diff --git a/core/modules/shortcut/images/shortcut.png b/core/modules/shortcut/images/shortcut.png new file mode 100644 index 0000000..739a8d0 --- /dev/null +++ b/core/modules/shortcut/images/shortcut.png @@ -0,0 +1,3 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<IDATxbd@gΜqR &&&@ 4 L@-@;\<ƣA1#-(6q13@ ? .@1C8@(6{($>|1!!app B+ "IENDB` \ No newline at end of file diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module index e65a2cc..0d3f8cc 100644 --- a/core/modules/shortcut/shortcut.module +++ b/core/modules/shortcut/shortcut.module @@ -730,18 +730,12 @@ function shortcut_toolbar() { '#type' => 'link', '#title' => t('Edit shortcuts'), '#href' => 'admin/config/user-interface/shortcut/' . $shortcut_set->set_name, - '#options' => array('attributes' => array('id' => 'edit-shortcuts')), + '#options' => array('attributes' => array('class' => array('edit-shortcuts'))), ); } $links_tray = array( - 'shortcuts' => array( - '#type' => 'container', - '#attributes' => array( - 'class' => array('toolbar-list'), - ), - 'links' => $links, - ), + 'shortcuts' => $links, 'configure' => $configure_link, ); @@ -752,6 +746,7 @@ function shortcut_toolbar() { 'html' => FALSE, 'attributes' => array( 'title' => t('Shortcuts'), + 'class' => array('icon', 'icon-shortcut'), ), ), 'tray' => $links_tray, diff --git a/core/modules/shortcut/shortcut.theme.css b/core/modules/shortcut/shortcut.theme.css index d48f432..3d899a0 100644 --- a/core/modules/shortcut/shortcut.theme.css +++ b/core/modules/shortcut/shortcut.theme.css @@ -4,6 +4,31 @@ */ /** + * Toolbar. + */ +.icon-shortcut:before { + background-image: url("images/shortcut.png"); +} +.icon-shortcut:active:before, +.active .icon-shortcut:before { + background-image: url("images/shortcut-active.png"); +} +.toolbar .tray.horizontal.shortcuts .menu { + float: left; +} + +.edit-shortcuts { + display: block; +} +.tray.vertical .edit-shortcuts { + text-align: right; + padding: 1em; +} +.tray.horizontal .edit-shortcuts { + float: left; /* LTR */ +} + +/** * Add/remove links. */ .add-or-remove-shortcuts .icon { @@ -25,27 +50,3 @@ .remove-shortcut a:hover .icon { background-position: -12px -12px; /* LTR */ } - -/** - * Toolbar. - */ -.toolbar-js .shortcuts .tab { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9IjQuNTQ1NCIgeDI9IjQ5Ljk5OTUiIHkyPSIxMDQuNTQ1OSI+DQoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0NDQ0NDQyIvPg0KCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiM5OTk5OTkiLz4NCjwvbGluZWFyR3JhZGllbnQ+DQo8cG9seWdvbiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0idXJsKCNTVkdJRF8xXykiIHBvaW50cz0iMTMuNjM2LDAgMTMuNjM2LDEwMCA0OS42MzYsNzYuNzI3IDg2LjM2MywxMDAgDQoJODYuMzYzLDAgIi8+DQo8L3N2Zz4NCg==); -} -.toolbar-js .shortcuts .tab:active, -.toolbar-js .shortcuts.active .tab { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9Ijk2LjQ1NTEiIHgyPSI0OS45OTk1IiB5Mj0iLTMuNTQ0OSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDEwMSkiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkZGRkYiLz4NCgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVFNUU1Ii8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHBvbHlnb24gZmlsbD0idXJsKCNTVkdJRF8xXykiIHBvaW50cz0iMTMuNjM2LDAgMTMuNjM2LDEwMCA0OS42MzYsNzYuNzI3IDg2LjM2MywxMDAgODYuMzYzLDAgIi8+DQo8L3N2Zz4NCg==); -} -.toolbar-js #edit-shortcuts { - display: block; -} -.toolbar-js .vertical #edit-shortcuts { - text-align: right; - padding: 1em; -} -.toolbar-js .horizontal #edit-shortcuts { - border-left: 1px solid #d9d9d9; /* LTR */ - float: left; /* LTR */ - margin-left: 0.3333em; /* LTR */ - padding: 1em 0.3333em 1em 0.6667em; /* LTR */ -} diff --git a/core/modules/toolbar/config/toolbar.breakpoints.yml b/core/modules/toolbar/config/toolbar.breakpoints.yml index 6c1ac8c..c623c0e 100644 --- a/core/modules/toolbar/config/toolbar.breakpoints.yml +++ b/core/modules/toolbar/config/toolbar.breakpoints.yml @@ -1,2 +1,3 @@ -narrow: 'all and (min-width: 38.125em)' -wide: 'all and (min-width: 50em)' +narrow: 'only screen and (min-width: 16.5em)' +standard: 'only screen and (min-width: 38.125em)' +wide: 'only screen and (min-width: 50em)' diff --git a/core/modules/toolbar/css/interactivemenu-rtl.css b/core/modules/toolbar/css/interactivemenu-rtl.css deleted file mode 100644 index 60f2c3a..0000000 --- a/core/modules/toolbar/css/interactivemenu-rtl.css +++ /dev/null @@ -1,12 +0,0 @@ -/** - * @file interactivemenu-rtl.css - */ - -.toolbar-js .vertical .interactive-menu a { - margin-left: 20%; - margin-right: 0; -} -.toolbar-js .handle { - left: 0; - right: auto; -} diff --git a/core/modules/toolbar/css/interactivemenu.css b/core/modules/toolbar/css/interactivemenu.css deleted file mode 100644 index 8d0bea9..0000000 --- a/core/modules/toolbar/css/interactivemenu.css +++ /dev/null @@ -1,69 +0,0 @@ -/** - * @file interactivemenu.css - */ -.toolbar-js .menu { - list-style: none; - margin: 0; - padding: 0; -} -.toolbar-js .box { - display: block; - line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */ - position: relative; - width: auto; -} -.toolbar-js .tray .interactive-menu li { - display: block; -} -.toolbar-js .horizontal .interactive-menu .handle, -.toolbar-js .horizontal .level-1 ul, -.toolbar-js .vertical .level-1 ul { - display: none; -} -.toolbar-js .vertical .open > ul { /* Show the sub-menus */ - display: block; -} -.toolbar-js .interactive-menu a { - display: block; - line-height: 1; - overflow: hidden; -} -.toolbar-js .tray .interactive-menu li a, -.toolbar-js .toolbar-list a { - display: block; -} -.toolbar-js .vertical .interactive-menu a { - margin-right: 20%; /* LTR */ -} -/** - * Handle. - */ -.toolbar-js .handle { - background-attachment: scroll; - background-color: transparent; - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjI1NiAzNDYgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAyNTYgMzQ2IDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTI1NiwzOTZjMCwyNy41OTgsMjIuNCw1MCw1MCw1MGMyNy41OTgsMCw1MC0yMi40MDIsNTAtNTBjMC0yNy42LTIyLjQwMi01MC01MC01MA0KCQlDMjc4LjQsMzQ2LDI1NiwzNjguNCwyNTYsMzk2eiBNMjYxLDM5NmMwLTI0Ljg1MiwyMC4xNDktNDUsNDUtNDVjMjQuODU0LDAsNDUsMjAuMTQ4LDQ1LDQ1YzAsMjQuODU0LTIwLjE0Niw0NS00NSw0NQ0KCQlDMjgxLjE0OSw0NDEsMjYxLDQyMC44NTQsMjYxLDM5NnoiLz4NCgk8cG9seWdvbiBmaWxsPSIjNTE4MUMyIiBwb2ludHM9IjMwNiw0MTEgMjgxLDM4NiAzMzEsMzg2IAkiLz4NCjwvZz4NCjwvc3ZnPg0K); - background-position: center center; - background-repeat: no-repeat; - background-size: auto 70%; - border: 0; - bottom: 0; - display: block; - font-size: 1em; - height: 100%; - position: absolute; - right: 0; /* LTR */ - text-indent: -999em; - top: 0; - width: 20%; - z-index: 1; -} -.toolbar-js .handle:hover { - cursor: pointer; -} -.toolbar-js .level-2 .handle { - padding-bottom: 0.4545em; - padding-top: 0.4545em; -} -.toolbar-js .handle.open { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjI1NiAzNDYgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAyNTYgMzQ2IDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTM1NiwzOTZjMC0yNy42LTIyLjQwMi01MC01MC01MGMtMjcuNiwwLTUwLDIyLjQtNTAsNTBjMCwyNy41OTgsMjIuNCw1MCw1MCw1MA0KCUMzMzMuNTk4LDQ0NiwzNTYsNDIzLjU5OCwzNTYsMzk2eiBNMzUxLDM5NmMwLDI0Ljg0OS0yMC4xNTEsNDUtNDUsNDVjLTI0Ljg1NiwwLTQ1LTIwLjE1MS00NS00NWMwLTI0Ljg1NSwyMC4xNDQtNDUsNDUtNDUNCglDMzMwLjg0OSwzNTEsMzUxLDM3MS4xNDUsMzUxLDM5NnoiLz4NCjxwb2x5Z29uIGZpbGw9IiM3Nzc3NzciIHBvaW50cz0iMzA2LDM4MSAzMzEsNDA2IDI4MSw0MDYgIi8+DQo8L3N2Zz4NCg==); -} diff --git a/core/modules/toolbar/css/toolbar.base-rtl.css b/core/modules/toolbar/css/toolbar.base-rtl.css index 7f63dc0..e888abf 100644 --- a/core/modules/toolbar/css/toolbar.base-rtl.css +++ b/core/modules/toolbar/css/toolbar.base-rtl.css @@ -1,61 +1,66 @@ /** * @file toolbar.base-rtl.css */ -.toolbar-js { +html.js .toolbar { left: auto; right: 0; } +.js .toolbar .bar li { + float: right; +} + /** * Administration menu. */ -.toolbar-js .bar { +.js .toolbar .bar { left: auto; right: 0; } -@media screen and (min-width: 16.5em) { - .toolbar-js .bar li { +@media only screen and (min-width: 16.5em) { + .js .toolbar .bar li, + .toolbar .horizontal li { float: right; } } + /** * Toolbar tray. */ -.toolbar-js .vertical { +.toolbar .vertical { left: auto; right: -100%; } -.toolbar-js .horizontal { +.toolbar .horizontal { left: auto; right: 0; } -.toolbar-js .vertical > .lining { +.toolbar .vertical > .lining { left: auto; right: -100%; } -.toolbar-js .tray.vertical.active, -.toolbar-js .tray.vertical.active > .lining { +.toolbar .vertical.active, +.toolbar .vertical.active > .lining { left: auto; right: 0; } + /** - * At larger screen sizes, the tray pushes the page content - * using padding instead of left. + * At larger screen sizes, the tray pushes the page content. */ -@media screen and (min-width: 38.125em) { +@media only screen and (min-width: 38.125em) { body.toolbar-tray-open.toolbar-vertical { margin-left: 0; margin-right: 240px; - margin-left: 0; margin-right: 15rem; } } /** * ToolBar tray orientation toggle. */ -.toolbar-js .horizontal .toggle-orientation { +.toolbar .horizontal .toggle-orientation { left: 0; right: auto; } -.toolbar-js .vertical .toggle-orientation { +.toolbar .vertical .toggle-orientation { float: left; } diff --git a/core/modules/toolbar/css/toolbar.base.css b/core/modules/toolbar/css/toolbar.base.css index 8de0f8d..53412ac 100644 --- a/core/modules/toolbar/css/toolbar.base.css +++ b/core/modules/toolbar/css/toolbar.base.css @@ -5,8 +5,8 @@ * Aggressive resets so we can achieve a consistent look in hostile CSS * environments. */ -.toolbar-js, -.toolbar-js * { +html.js #toolbar, +html .toolbar * { -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -16,17 +16,19 @@ padding: 0; vertical-align: baseline; } -.toolbar-js { +html.js #toolbar { font-size: 100%; - left: 0; /* LTR */ line-height: 1; +} +html.js .toolbar { + left: 0; /* LTR */ position: absolute; top: 0; width: 100%; } -/* These are scoped to .toolbar and not .toolbar-js because Internet Explorer -doesn't paint the list items correctly on load when scoped to the dynamic -class .toolbar-js */ +/** + * Very specific overrides for Drupal system CSS. + */ .toolbar li, .toolbar .menu li, .toolbar .item-list, @@ -35,85 +37,101 @@ class .toolbar-js */ list-style-type: none; list-style-image: none; } -.toolbar-js .menu li { +.toolbar .menu li { padding-top: 0; } +.js .toolbar .bar li, +.js .toolbar .menu li { + display: block; +} +.js .toolbar .bar li { + float: left; /* LTR */ +} +.js .toolbar a { + display: block; + line-height: 1; +} /** * Administration menu. */ -.toolbar-js .bar { +.js .toolbar .bar { left: 0; /* LTR */ position: absolute; top: 0; z-index: 750; width: 100%; } -.toolbar-js .bar li { - display: block; -} -.toolbar-js .bar a { - display: block; +@media only screen { + .js .toolbar .bar li { + float: none; + } } -@media screen and (min-width: 16.5em) { - .toolbar-js .bar li { +@media only screen and (min-width: 16.5em) { + .js .toolbar .bar li, + .toolbar .horizontal li { float: left; /* LTR */ } } -@media screen and (min-width: 28.125em) { - .toolbar-js .bar { +@media only screen and (min-width: 28.125em) { + .js .toolbar .bar { position: fixed; } } + /** * Toolbar tray. */ -.toolbar-js .tray { +.toolbar .horizontal, +.toolbar .vertical { display: none; position: absolute; width: 100%; z-index: 250; } -.toolbar-js .vertical { +.toolbar .vertical { left: -100%; /* LTR */ position: absolute; } -.toolbar-js .horizontal { +.toolbar .horizontal { left: 0; /* LTR */ height: 0; z-index: 750; } -.toolar-main .tray .lining { +.toolar .tray .lining { position: relative; } -.toolbar-js .vertical > .lining { +.toolbar .vertical > .lining { left: -100%; /* LTR */ min-height: 100%; position: absolute; width: 100%; } -.toolbar-js .vertical > .lining > .edge { +.toolbar .vertical > .lining > .edge { display: none; } -.toolbar-js .tray.active { +.toolbar .tray.active { display: block; } -.toolbar-js .horizontal.active { +.toolbar .horizontal.active { height: auto; } -.toolbar-js .tray.vertical.active, -.toolbar-js .tray.vertical.active > .lining { +.toolbar .vertical.active, +.toolbar .vertical.active > .lining { left: 0; /* LTR */ } -@media screen and (min-width: 16.5em) { - .toolbar-js .vertical { +.toolbar .horizontal .menu li ul { + display: none; +} +@media only screen and (min-width: 16.5em) { + .toolbar .vertical { bottom: 0; } - .toolbar-js .vertical, - .toolbar-js .vertical > .lining > .edge { + .toolbar .vertical, + .toolbar .vertical > .lining > .edge { width: 240px; width: 15rem; } - .toolbar-js .vertical.active > .lining > .edge { + .toolbar .vertical.active > .lining > .edge { -moz-box-sizing: content-box; -o-box-sizing: content-box; -webkit-box-sizing: content-box; @@ -127,60 +145,30 @@ class .toolbar-js */ z-index: -1; } } -@media screen and (min-width: 28.125em) { - .toolbar-js .horizontal { +@media only screen and (min-width: 28.125em) { + .toolbar .horizontal { position: fixed; } } /** - * At larger screen sizes, the tray pushes the page content - * using padding instead of left. + * At larger screen sizes, the tray pushes the page content. */ -@media screen and (min-width: 38.125em) { +@media only screen and (min-width: 38.125em) { body.toolbar-tray-open.toolbar-vertical { margin-left: 240px; /* LTR */ margin-left: 15rem; /* LTR */ } } /** - * ToolBar icons. - */ -.toolbar-js .bar .tab, -.toolbar-js .bar .active .tab, -.toolbar-js .bar .tab:active, -.toolbar-js .level-1 > .box > a { - background-attachment: scroll; - background-color: transparent; - background-image: none; - background-position: -999em -999em; - background-repeat: no-repeat; -} -/** * ToolBar tray orientation toggle. */ -.toolbar-js .toggle-orientation { - display: none; -} -.toolbar-js .horizontal .toggle-orientation { +.toolbar .horizontal .toggle-orientation { bottom: 0; position: absolute; right: 0; /* LTR */ top: 0; } -.toolbar-js .vertical .toggle-orientation { +.toolbar .vertical .toggle-orientation { float: right; /* LTR */ width: 100%; } -@media screen and (min-width: 16.5em) { - .toolbar-js .toggle-orientation { - display: block; - } - .toolbar-js .administration .toggle-orientation { - display: none; - } -} -@media screen and (min-width: 28.125em) { - .toolbar-js .administration .toggle-orientation { - display: block; - } -} diff --git a/core/modules/toolbar/css/toolbar.icons-rtl.css b/core/modules/toolbar/css/toolbar.icons-rtl.css index 0cc819f..5e099b7 100644 --- a/core/modules/toolbar/css/toolbar.icons-rtl.css +++ b/core/modules/toolbar/css/toolbar.icons-rtl.css @@ -1,32 +1,43 @@ /** * @file toolbar.icons-rtl.css */ +.toolbar .icon { + padding-left: 1.3333em; + padding-right: 2.75em; +} +.toolbar .icon:before { + left: auto; + right: 0.6667em; +} +.toolbar .menu ul .icon { + padding-left: 0; + padding-right: 1.3333em; +} +.toolbar .vertical .menu ul { + margin-left: 0; + margin-right: 1.5em; +} +.toolbar .vertical .menu ul ul { + margin-left: 0; + margin-right: 0.75em; +} -@media screen and (min-width: 16.5em) { - .toolbar-js .level-1 > .box > a { - background-position: right center; - margin-left: 0.; - margin-right: 0.6667em; - padding-left: 0; - padding-right: 2.25em; - } - .toolbar-js .horizontal .level-1 > .box > a { - margin-right: 0; - } - .toolbar-js .level-1 > ul { - margin-left: 0; - margin-right: 2.9167em; +@media only screen and (min-width: 16.5em) { + .toolbar .bar .icon:before { + background-size: auto auto; + left: auto; + right: 0; } } -@media screen and (min-width: 28.125em) { - .toolbar-js .bar .tab, - .toolbar-js .bar .active .tab, - .toolbar-js .bar .tab:active { +@media only screen and (min-width: 28.125em) { + .toolbar .bar .icon { background-position: right center; - margin-left: 0; - margin-right: 0.6667em; - padding-left: 1em; - padding-right: 2.25em; + padding-left: 1.3333em; + padding-right: 2.75em; + } + .toolbar .bar .icon:before { + left: 0; + right: 0.6667em; } } diff --git a/core/modules/toolbar/css/toolbar.icons.css b/core/modules/toolbar/css/toolbar.icons.css index dcda699..716bd14 100644 --- a/core/modules/toolbar/css/toolbar.icons.css +++ b/core/modules/toolbar/css/toolbar.icons.css @@ -1,84 +1,142 @@ /** * @file toolbar.icons.css */ +.toolbar .icon { + padding-left: 2.75em; /* LTR */ + position: relative; +} +.toolbar .icon:before { + background-attachment: scroll; + background-color: transparent; + background-position: center center; + background-repeat: no-repeat; + background-size: 100% auto; + content: ''; + display: block; + height: 100%; + left: 0.6667em; /* LTR */ + position: absolute; + top: 0; + width: 20px; +} +.toolbar .menu ul .icon { + padding-left: 1.3333em; /* LTR */ +} +.toolbar .menu ul a.icon:before { + display: none; +} +.toolbar .vertical .menu ul { + margin-left: 1.5em; /* LTR */ +} +.toolbar .vertical .menu ul ul { + margin-left: 0.75em; /* LTR */ +} -@media screen and (min-width: 16.5em) { - .toolbar-js .bar .tab, - .toolbar-js .bar .active .tab, - .toolbar-js .bar .tab:active, - .toolbar-js .level-1 > .box > a { - background-size: 1.75em 1.75em; - } - .toolbar-js .bar .tab, - .toolbar-js .bar .active .tab, - .toolbar-js .bar .tab:active { - background-position: center center; +/** + * Top level icons + */ +.icon-home:before { + background-image: url("../images/icon-home.png"); +} +.icon-home:active:before, +.active .icon-home:before { + background-image: url("../images/icon-home-active.png"); +} +.icon-menu:before { + background-image: url("../images/icon-menu.png"); +} +.icon-menu:active:before, +.active .icon-menu:before { + background-image: url("../images/icon-menu-active.png"); +} + +/** + * Main menu icons. + */ +.icon-content:before { + background-image: url("../images/icon-content.png"); +} +.icon-content:active:before, +.icon-content.active:before { + background-image: url("../images/icon-content-active.png"); +} +.icon-structure:before { + background-image: url("../images/icon-structure.png"); +} +.icon-structure:active:before, +.icon-structure.active:before { + background-image: url("../images/icon-structure-active.png"); +} +.icon-appearance:before { + background-image: url("../images/icon-appearance.png"); +} +.icon-appearance:active:before, +.icon-appearance.active:before { + background-image: url("../images/icon-appearance-active.png"); +} +.icon-people:before { + background-image: url("../images/icon-people.png"); +} +.icon-people:active:before, +.icon-people.active:before { + background-image: url("../images/icon-people-active.png"); +} +.icon-extend:before { + background-image: url("../images/icon-extend.png"); +} +.icon-extend:active:before, +.icon-extend.active:before { + background-image: url("../images/icon-extend-active.png"); +} +.icon-configuration:before { + background-image: url("../images/icon-configuration.png"); +} +.icon-configuration:active:before, +.icon-configuration.active:before { + background-image: url("../images/icon-configuration-active.png"); +} +.icon-reports:before { + background-image: url("../images/icon-reports.png"); +} +.icon-reports:active:before, +.icon-reports.active:before { + background-image: url("../images/icon-reports-active.png"); +} +.icon-help:before { + background-image: url("../images/icon-help.png"); +} +.icon-help:active:before, +.icon-help.active:before { + background-image: url("../images/icon-help-active.png"); +} + +@media only screen and (min-width: 16.5em) { + .toolbar .bar .icon { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; text-indent: -9999px; - width: 3em; - } - .toolbar-js .level-1 > .box > a { - background-position: left center; /* LTR */ - margin-left: 0.6667em; /* LTR */ - padding-left: 2.25em; /* LTR */ - } - .toolbar-js .horizontal .level-1 > .box > a { - margin-left: 0; /* LTR */ - } - .toolbar-js .level-1 > ul { - margin-left: 2.9167em; /* LTR */ - } - /* ToolBar bar icons. */ - .toolbar-js .bar .home .tab { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9IjYiIHgyPSI0OS45OTk1IiB5Mj0iOTIuNjIyMyI+DQoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0NDQ0NDQyIvPg0KCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiM5OTk5OTkiLz4NCjwvbGluZWFyR3JhZGllbnQ+DQo8cG9seWdvbiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgcG9pbnRzPSI4Mi4wMDEsMzguODg0IDgyLjAwMSwxNS4wNzYgNjcuOTk5LDE1LjA3NiA2Ny45OTksMjQuNTAxIDUwLDYgMCw1Ny4zODMgMTIsNTcuMzgzIA0KCTEyLDkwLjYxNSA0Myw5MC42MTUgNDMsNjMuNDIyIDU3LjAwMSw2My40MjIgNTcuMDAxLDkwLjYxNSA4Ny45OTksOTAuNjE1IDg3Ljk5OSw1Ny4zODMgMTAwLDU3LjM4MyAiLz4NCjwvc3ZnPg0K); + width: 4em; } - .toolbar-js .bar .home .tab:active { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTAiIHkxPSI5NSIgeDI9IjUwIiB5Mj0iOC4zNzc3IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgMTAxKSI+DQoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuOTk1MSIgc3R5bGU9InN0b3AtY29sb3I6I0U1RTVFNSIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwb2x5Z29uIGZpbGw9InVybCgjU1ZHSURfMV8pIiBwb2ludHM9IjgyLjAwMSwzOC44ODQgODIuMDAxLDE1LjA3NiA2Ny45OTksMTUuMDc2IDY3Ljk5OSwyNC41MDEgNTAsNiAwLDU3LjM4MyAxMiw1Ny4zODMgDQoJMTIsOTAuNjE1IDQzLDkwLjYxNSA0Myw2My40MjIgNTcuMDAxLDYzLjQyMiA1Ny4wMDEsOTAuNjE1IDg3Ljk5OSw5MC42MTUgODcuOTk5LDU3LjM4MyAxMDAsNTcuMzgzICIvPg0KPC9zdmc+DQo=); - } - .toolbar-js .bar .administration .tab { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9IjUiIHgyPSI0OS45OTk1IiB5Mj0iOTQuMDEyNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNDQ0NDQ0MiLz4NCgkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6Izk5OTk5OSIvPg0KCTwvbGluZWFyR3JhZGllbnQ+DQoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNMCw3Ni43Mjh2MTguMTgyaDEwMFY3Ni43MjhIMHogTTAsNHYxOC4xODJoMTAwVjRIMHoNCgkJIE0wLDQwLjM2M3YxOC4xODNoMTAwVjQwLjM2M0gweiIvPg0KPC9nPg0KPC9zdmc+DQo=); - } - .toolbar-js .bar .administration .tab:active, - .toolbar-js .bar .administration.active .tab { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9IjUiIHgyPSI0OS45OTk1IiB5Mj0iOTQuMDEyNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkZGRkYiLz4NCgkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0U1RTVFNSIvPg0KCTwvbGluZWFyR3JhZGllbnQ+DQoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNMCw3Ni43Mjh2MTguMTgyaDEwMFY3Ni43MjhIMHogTTAsNHYxOC4xODJoMTAwVjRIMHoNCgkJIE0wLDQwLjM2M3YxOC4xODNoMTAwVjQwLjM2M0gweiIvPg0KPC9nPg0KPC9zdmc+DQo=); - } - /* Main menu icons. */ - .toolbar-js #toolbar-link-admin-dashboard { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik05NC44MjUsNDAuNDU2aC03LjU3NmMtMC45MDgtMy42MzQtMi4zMzMtNy4wNjItNC4xOS0xMC4yMDVsNS4zMzItNS4zMzINCgljMS45NTItMS45NTIsMi4zMjgtNC43NDIsMC44MzgtNi4yMzJsLTguMDktOC4wOTFjLTEuNDktMS40ODktNC4yODEtMS4xMTQtNi4yMzIsMC44MzlsLTUuMjg5LDUuMjg4DQoJYy0zLjE1Mi0xLjg4OC02LjU5Ni0zLjM0LTEwLjI0OS00LjI3VjVjMC0yLjc2MS0xLjcwNy01LTMuODEzLTVINDQuMTEyYy0yLjEwNiwwLTMuODE0LDIuMjM5LTMuODE0LDV2Ny40NTQNCgljLTMuNjUzLDAuOTI5LTcuMDk2LDIuMzgxLTEwLjI0OCw0LjI2OWwtNS4yODctNS4yODdjLTEuOTUyLTEuOTUyLTQuNzQzLTIuMzI4LTYuMjMyLTAuODM5bC04LjA5MSw4LjA5MQ0KCWMtMS40OSwxLjQ4OS0xLjExNCw0LjI4LDAuODM4LDYuMjMybDUuMzMsNS4zM2MtMS44NTcsMy4xNDQtMy4yODMsNi41NzItNC4xOTEsMTAuMjA3SDQuODQzYy0yLjc2MSwwLTUsMS43MDctNSwzLjgxM3YxMS40NDINCgljMCwyLjEwNiwyLjIzOSwzLjgxMyw1LDMuODEzdjAuMDAyaDcuNjVjMC45MzEsMy41OTQsMi4zNjksNi45ODIsNC4yMywxMC4wOWwtNS40NDUsNS40NDVjLTEuOTUyLDEuOTUzLTIuMzI4LDQuNzQyLTAuODM5LDYuMjMyDQoJbDguMDkxLDguMDkxYzEuNDksMS40OSw0LjI4MSwxLjExMyw2LjIzMy0wLjgzOWw1LjQ4OC01LjQ4OGMzLjA5OCwxLjgzLDYuNDcxLDMuMjQ0LDEwLjA0Nyw0LjE1M3Y3Ljc3MWMwLDIuNzYxLDEuNzA4LDUsMy44MTQsNQ0KCWgxMS40NDNjMi4xMDcsMCwzLjgxNC0yLjIzOSwzLjgxNC01aC0wLjAwMXYtNy43NzFjMy41NzYtMC45MDksNi45NS0yLjMyNCwxMC4wNDktNC4xNTRsNS40ODksNS40ODgNCgljMS45NTEsMS45NTIsNC43NDIsMi4zMjksNi4yMzIsMC44MzlsOC4wOS04LjA5MWMxLjQ4OS0xLjQ4OSwxLjExMy00LjI4LTAuODM4LTYuMjMxbC01LjQ0Ny01LjQ0Nw0KCWMxLjg2LTMuMTA3LDMuMjk5LTYuNDk2LDQuMjI5LTEwLjA5aDcuNjUyYzIuNzYxLDAsNS0xLjcwNyw1LTMuODEzVjQ0LjI3Qzk5LjgyNSw0Mi4xNjQsOTcuNTg2LDQwLjQ1Niw5NC44MjUsNDAuNDU2eiBNNjguNzUsNTANCgljMCwxMC4zNTUtOC4zOTUsMTguNzUtMTguNzUsMTguNzVjLTEwLjM1NSwwLTE4Ljc1LTguMzk1LTE4Ljc1LTE4Ljc1YzAtMTAuMzU1LDguMzk1LTE4Ljc1LDE4Ljc1LTE4Ljc1DQoJQzYwLjM1NSwzMS4yNSw2OC43NSwzOS42NDUsNjguNzUsNTB6Ii8+DQo8L3N2Zz4NCg==); - } - .toolbar-js #toolbar-link-admin-content { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik02NC4wNjYsMGwyNi45NjksMjcuNjMxVjEwMEg4Ljk2NVYwSDY0LjA2NnogTTIwLjgwOSw4OC4xNTZoNTguMzl2LTU2LjU4SDU3Ljk3OVYxMS44NDFIMjAuODA5Vjg4LjE1NnoNCgkgTTI4Ljg2Nyw0OS41MDRoNDEuNzc3di00LjYwNUgyOC44NjdWNDkuNTA0eiBNMjguODY3LDYyLjY2NWg0MS43Nzd2LTQuNjA0SDI4Ljg2N1Y2Mi42NjV6IE0yOC44NjcsNzUuODE4aDQxLjc3N3YtNC42MDVIMjguODY3DQoJVjc1LjgxOHoiLz4NCjwvc3ZnPg0K); - } - .toolbar-js #toolbar-link-admin-structure { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiM3Nzc3NzciIHBvaW50cz0iODguMDAxLDY0LjA0NSA4OC4wMDEsNTEuOTk4IDg4LjAwMSw0OC4wMDIgODQuMDAxLDQ4LjAwMiA1MS45OTcsNDguMDAyIDUxLjk5NywzNS45NTMgDQoJNjQuMDAzLDM1Ljk1MyA2NC4wMDMsMTUuOTEgMzYsMTUuOTEgMzYsMzUuOTUzIDQ4LjAwMSwzNS45NTMgNDguMDAxLDQ4LjAwMiAxNS45OTgsNDguMDAyIDEyLjAwMyw0OC4wMDIgMTIuMDAzLDUxLjk5OCANCgkxMi4wMDMsNjQuMDQ1IDAsNjQuMDQ1IDAsODQuMDkyIDI4LDg0LjA5MiAyOCw2NC4wNDUgMTUuOTk4LDY0LjA0NSAxNS45OTgsNTEuOTk4IDQ4LjAwMSw1MS45OTggNDguMDAxLDY0LjA0NSAzNiw2NC4wNDUgDQoJMzYsODQuMDkyIDY0LjAwMyw4NC4wOTIgNjQuMDAzLDY0LjA0NSA1MS45OTcsNjQuMDQ1IDUxLjk5Nyw1MS45OTggODQuMDAxLDUxLjk5OCA4NC4wMDEsNjQuMDQ1IDcyLjAwMiw2NC4wNDUgNzIuMDAyLDg0LjA5MiANCgkxMDAsODQuMDkyIDEwMCw2NC4wNDUgIi8+DQo8L3N2Zz4NCg==); - } - .toolbar-js #toolbar-link-admin-appearance { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik01My40ODIsNTMuMDE2TDQwLjg3NSw2Ni4xNjhMMzAuMDYyLDU0Ljg2NGwyMS43MjYtMjkuODk5bDE0LjI2OSwxNC44OThMNTMuNDgyLDUzLjAxNnogTTU4LjE3MSwyNS40NDgNCgljMCwwLTE0LjY3NS0yMC42MjUtMTYuMjQtMjMuMzg3Yy0xLjU2NS0yLjc2My03LjIwMS0zLjIyOS0xMC44MDMsMS42MjJDMjkuNDEzLDUuOTk0LDMuOTc5LDMxLjc3MywyLjc2NCwzMy4yMjENCgljLTEuMjEzLDEuNDQ3LTEuOTUyLDQuNzc2LDAuMjk2LDYuNDc1YzIuMjQ4LDEuNzAyLDI0LjAzLDE4LjIyNiwyNC4wMywxOC4yMjZsMTAuODU1LDExLjM1NGwtMS40ODYsMS41MjUNCgljNC42MzYsNC44NjUsNS40MDYsNS42NzYsNi45MzcsNS43MjVjNC45NTgsMC4wOTMsMTQuOTExLTkuOTExLDE4LjAxNi01Ljg5NmM2LjIyLDguMDE1LDIyLjUyMSwyNi42MTgsMjIuNTIxLDI2LjYxOA0KCWMzLjM3NSwzLjU1Miw4LjgzMiwzLjY5MSwxMi4wOCwwLjI3YzMuMjc3LTMuNDI1LDMuMTQ4LTkuMTAyLTAuMjc1LTEyLjY1M2MwLDAtMTcuNzQyLTE3LjAzNS0yNS40NTEtMjMuNTYNCgljLTMuODI3LTMuMTk5LDUuNzYyLTEzLjYwMyw1LjYzNC0xOC44MjljLTAuMDQ5LTEuNTc5LTAuODEyLTIuMzg4LTUuNDU3LTcuMjU0bC0xLjQ3OCwxLjU4TDU4LjE3MSwyNS40NDh6Ii8+DQo8L3N2Zz4NCg==); - } - .toolbar-js #toolbar-link-admin-people { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik0xOC4yNzEsMjAuNjM1YzAsNy42NCw2LjIzMSwxMy44MTgsMTMuODY3LDEzLjgxOEMzOS44MTYsMzQuNDUzLDQ2LDI4LjI3NSw0NiwyMC42MzUNCgljMC03LjYzOC02LjE4My0xMy44MTgtMTMuODYyLTEzLjgxOEMyNC41MDIsNi44MTcsMTguMjcxLDEyLjk5NywxOC4yNzEsMjAuNjM1eiBNNTMuMzYzLDQwLjc3NQ0KCWMtNC43MjktMS42NDItMTEuNS0yLjU5Mi0yMS4yMjYtMi41OTJDMC43NzIsMzguMTgzLDAsNDcuMzE3LDAsNjAuODE2aDQ5LjMxOWMwLDAtMi4zMjUtNC43Ni0wLjg5My0xMC44NjgNCglDNDkuOTcsNDMuMzY5LDUzLjM2Myw0MC43NzUsNTMuMzYzLDQwLjc3NXogTTUzLjk5OSw1M2MwLDcuNjMzLDYuMTgzLDEzLjgxNiwxMy44NiwxMy44MTZjNy42MzYsMCwxMy44NjctNi4xODQsMTMuODY3LTEzLjgxNg0KCWMwLTcuNTkxLTYuMjMtMTMuODE4LTEzLjg2Ny0xMy44MThDNjAuMTgyLDM5LjE4Miw1My45OTksNDUuNDA5LDUzLjk5OSw1M3ogTTEwMCw5My4xODRjMC0xMy0wLjcyNy0yMi41OTYtMzIuMTQxLTIyLjU5Ng0KCWMtMzEuNDA4LDAtMzIuMTM2LDkuMTM3LTMyLjEzNiwyMi41OTZIMTAweiIvPg0KPC9zdmc+DQo=); - } - .toolbar-js #toolbar-link-admin-modules { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik0xMDAsOTEuMzM2TDc5LjM4OSw3MC43MjVsMTEuNzQzLTExLjc0MmMzLjEyNS0zLjEyNSwzLjEyNS04LjE5LTAuMDAxLTExLjMxM2wtMzAuOTA2LTMwLjkxbC02LjY4OCw2LjY4Nw0KCUwzMC4wOTIsMGwtNi4yNTksNi4yNmwyMy40NDUsMjMuNDQ0TDI5LjcwNCw0Ny4yNzhMNi4yNTksMjMuODMzTDAsMzAuMDkzbDIzLjQ0NSwyMy40NDNsLTYuNjg3LDYuNjg3bDMwLjkxMSwzMC45MQ0KCWMzLjEyMSwzLjEyMyw4LjE4OCwzLjEyMywxMS4zMTIsMGwxMS43NDQtMTEuNzQyTDkxLjMzNiwxMDBMMTAwLDkxLjMzNnoiLz4NCjwvc3ZnPg0K); - } - .toolbar-js #toolbar-link-admin-config { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik05LjA5Nyw1My4wMDJjOS40OTksOS41LDIzLjU0MSwxMS41NDQsMzUuMDQyLDYuMjI3bDM3LjYzNCwzNy42MzhjNC4xODEsNC4xODEsMTAuOTUzLDQuMTgxLDE1LjA5LDANCgljNC4xODItNC4xNCw0LjE4Mi0xMC45MSwwLTE1LjA5M0w1OS4yMjcsNDQuMTM5YzUuMzE5LTExLjUsMy4yNzQtMjUuNTQzLTYuMjIzLTM1LjA0MkM0NC41OTcsMC42OTEsMzIuNTUtMS45MDEsMjEuOTYsMS4zNw0KCWwyMy40OTcsMjMuNTAybC00LjQxMiwxNi4wODRsLTE2LjE3NCw0LjUwMUwxLjM3LDIxLjk2Qy0xLjkwMSwzMi41NSwwLjY5MSw0NC41OTcsOS4wOTcsNTMuMDAyeiIvPg0KPC9zdmc+DQo=); - } - .toolbar-js #toolbar-link-admin-reports { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik0zNy4yMDYsMTguNzI2VjBMMTIuNDk4LDI0LjcwOGgxOC43MjZDMzQuNTI5LDI0LjcwOCwzNy4yMDYsMjIuMDMyLDM3LjIwNiwxOC43MjZ6Ii8+DQoJPHBhdGggZmlsbD0iIzc3Nzc3NyIgZD0iTTI3Ljk0Nyw1MC40OTJoNy40NjljMC44NDMsMCwxLjUyNS0wLjY4NSwxLjUyNS0xLjUyNXYtNy40NjZjMC0wLjg0MS0wLjY4Mi0xLjUzMi0xLjUyNS0xLjUzMmgtNy40NjkNCgkJYy0wLjgzOCwwLTEuNTIsMC42OTEtMS41MiwxLjUzMnY3LjQ2NkMyNi40MjgsNDkuODA4LDI3LjEwOSw1MC40OTIsMjcuOTQ3LDUwLjQ5MnoiLz4NCgk8cGF0aCBmaWxsPSIjNzc3Nzc3IiBkPSJNODEuNDk2LDBINDMuNTM5djIyLjI3NGMwLDQuODQtMy45MjQsOC43NjYtOC43NjMsOC43NjZIMTIuNDk4djYyLjk2MmMwLDMuMzExLDIuNjg4LDUuOTk4LDYsNS45OThoNjIuOTk5DQoJCWMzLjMxNywwLDYuMDA3LTIuNjg4LDYuMDA3LTUuOTk4VjUuOTk3Qzg3LjUwMywyLjY4OSw4NC44MTQsMCw4MS40OTYsMHogTTIzLjgwNSwzOS42NGMwLTEuMjYsMS4wMjMtMi4yODgsMi4yODgtMi4yODhoMTEuMTgzDQoJCWMxLjI2LDAsMi4yODcsMS4wMjgsMi4yODcsMi4yODh2MTEuMThjMCwxLjI2Ni0xLjAyNywyLjI4Ny0yLjI4NywyLjI4N0gyNi4wOTNjLTEuMjY1LDAtMi4yODgtMS4wMjEtMi4yODgtMi4yODdWMzkuNjR6DQoJCSBNNzYuMTkzLDgxLjM5NmMwLDEuODI2LTEuNDc5LDMuMzA2LTMuMzAxLDMuMzA2SDI3LjEwOWMtMS44MjcsMC0zLjMwNS0xLjQ3OS0zLjMwNS0zLjMwNnYtMS4xMDVjMC0xLjgyLDEuNDc4LTMuMzAyLDMuMzA1LTMuMzAyDQoJCWg0NS43ODRjMS44MjIsMCwzLjMwMSwxLjQ4LDMuMzAxLDMuMzAyVjgxLjM5NnogTTc2LjE5Myw2My43NDhjMCwxLjgyMi0xLjQ3OSwzLjMwMi0zLjMwMSwzLjMwMkgyNy4xMDkNCgkJYy0xLjgyNywwLTMuMzA1LTEuNDc5LTMuMzA1LTMuMzAydi0xLjEwNWMwLTEuODI2LDEuNDc4LTMuMzAzLDMuMzA1LTMuMzAzaDQ1Ljc4NGMxLjgyMiwwLDMuMzAxLDEuNDc3LDMuMzAxLDMuMzAzVjYzLjc0OHoNCgkJIE03Ni4xOTMsNDYuNjk2YzAsMS44MjYtMS40NzksMy4zMDYtMy4zMDEsMy4zMDZINDYuMjc3Yy0xLjgyMSwwLTMuMzAyLTEuNDc5LTMuMzAyLTMuMzA2di0xLjEwNWMwLTEuODI1LDEuNDgxLTMuMzAzLDMuMzAyLTMuMzAzDQoJCWgyNi42MTZjMS44MjMsMCwzLjMwMywxLjQ3OCwzLjMwMywzLjMwM3YxLjEwNUg3Ni4xOTN6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==); - } - .toolbar-js #toolbar-link-admin-help { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik0xMDAsNTBjMCwyNy42MTQtMjIuMzg3LDUwLTUwLjAwMSw1MFMwLDc3LjYxMywwLDUwQzAsMjIuMzg2LDIyLjM4NSwwLDQ5Ljk5OSwwUzEwMCwyMi4zODYsMTAwLDUweg0KCSBNNTUuMjA5LDY1LjQzNHYtMy4yNjhjMC0yLjE3NiwwLjQ2Mi0zLjkzOCwxLjM4OS01LjI3OWMwLjkyNC0xLjM0LDMuMTMxLTMuMzAxLDYuNjE1LTUuODgxYzUuMDgyLTMuNjI1LDguNTIxLTYuODkyLDEwLjM0Mi05Ljc5Nw0KCWMxLjgxMy0yLjkwNSwyLjcyMS02LjM0OSwyLjcyMS0xMC4zNDJjMC01Ljk4Ny0yLjIwMy0xMC43NzgtNi42MTMtMTQuMzcyYy00LjQwOC0zLjU5MS0xMC4zNTItNS4zODktMTcuODI2LTUuMzg5DQoJYy05LjA3MSwwLTE3LjY1OSwyLjI2Ni0yNS43NDgsNi44MDVsNS45MzMsMTEuOTIxYzYuOTY4LTMuNTU4LDEzLjE3My01LjMzNSwxOC42MTgtNS4zMzVjMy4xMjEsMCw1LjU1MSwwLjYyMSw3LjI5MywxLjg1Mg0KCWMxLjc0MSwxLjIzMSwyLjYxMiwzLjAyOCwyLjYxMiw1LjM4OGMwLDIuMTAzLTAuNjA0LDQuMDA5LTEuODIzLDUuNzE2Yy0xLjIxOSwxLjcwOC0zLjcyOSwzLjkyLTcuNTM5LDYuNjQxDQoJYy0zLjk1NCwyLjkwNi02LjY3Niw1LjY0Mi04LjE2Niw4LjIxOWMtMS40OTEsMi41NzgtMi4yMzEsNS42MDctMi4yMzEsOS4wOTJ2NC4wMjlINTUuMjA5eiBNNDEuNTQ0LDg4LjI3MQ0KCWMxLjY2NywxLjYxMiw0LjAyOSwyLjQyMiw3LjA3OCwyLjQyMmMyLjk3MiwwLDUuMzAxLTAuODI0LDYuOTY4LTIuNDc4YzEuNjY1LTEuNjU1LDIuNTAzLTMuOTE0LDIuNTAzLTYuNzc2DQoJYzAtMi45NzYtMC44MjEtNS4yNTgtMi40NzYtNi44NjFjLTEuNjU0LTEuNTk4LTMuOTgtMi4zOTUtNi45OTUtMi4zOTVjLTMuMTIzLDAtNS40OTcsMC43ODItNy4xMywyLjM0Mg0KCWMtMS42MzUsMS41NTktMi40NDksMy44NjMtMi40NDksNi45MTRDMzkuMDQyLDg0LjM3OSwzOS44NzgsODYuNjU2LDQxLjU0NCw4OC4yNzF6Ii8+DQo8L3N2Zz4NCg==); + .toolbar .bar .icon:before { + background-size: auto auto; + left: 0; /* LTR */ + width: 100%; } } -@media screen and (min-width: 28.125em) { - .toolbar-js .bar .tab, - .toolbar-js .bar .active .tab, - .toolbar-js .bar .tab:active { +@media only screen and (min-width: 28.125em) { + .toolbar .bar .icon { background-position: left center; /* LTR */ - margin-left: 0.6667em; /* LTR */ - padding-left: 2.25em; /* LTR */ + padding-left: 2.75em; /* LTR */ + padding-right: 1.3333em; /* LTR */ text-indent: 0; width: auto; } + .toolbar .bar .icon:before { + background-size: 100% auto; + left: 0.6667em; /* LTR */ + width: 20px; + } } diff --git a/core/modules/toolbar/css/toolbar.menu-rtl.css b/core/modules/toolbar/css/toolbar.menu-rtl.css new file mode 100644 index 0000000..1435225 --- /dev/null +++ b/core/modules/toolbar/css/toolbar.menu-rtl.css @@ -0,0 +1,19 @@ +/** + * @file toolbar.menu-rtl.css + */ +.toolbar .vertical .handle + a { + margin-left: 3em; + margin-right: 0; +} + +/** + * Handle. + */ +.toolbar .icon.handle { + left: 0; + right: auto; +} +.toolbar .icon.handle:before { + left: auto; + right: 0; +} diff --git a/core/modules/toolbar/css/toolbar.menu.css b/core/modules/toolbar/css/toolbar.menu.css new file mode 100644 index 0000000..d02844e --- /dev/null +++ b/core/modules/toolbar/css/toolbar.menu.css @@ -0,0 +1,123 @@ +/** + * @file toolbar.menu.css + */ +.toolbar .menu { + list-style: none; + margin: 0; + padding: 0; +} +.toolbar .box { + display: block; + line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */ + position: relative; + width: auto; +} +.toolbar .horizontal .menu .handle, +.toolbar .horizontal .menu ul, +.toolbar .vertical .menu ul { + display: none; +} +.toolbar .vertical li.open > ul { + display: block; /* Show the sub-menus */ +} +.toolbar .vertical .handle + a { + margin-right: 3em; /* LTR */ +} + +/** + * Items. + */ +.toolbar .vertical .menu .menu a { + padding-bottom: 0.6667em; + padding-top: 0.6667em; +} +.toolbar .tray .level-3 a { + color: #303030; +} +.toolbar .tray .level-4 a { + color: #2d2d2d; +} +.toolbar .tray .level-5 a { + color: #2a2a2a; +} +.toolbar .tray .level-6 a { + color: #272727; +} +.toolbar .tray .level-7 a { + color: #2a2a2a; +} +.toolbar .tray .level-8 a { + color: #2d2d2d; +} +.toolbar .tray .level-9 a { + color: #303030; +} +.toolbar .level-2 > ul { + background-color: #f5f5f5; + border-color: #cccccc; +} +.toolbar .level-3 > ul { + background-color: #e5e5e5; + border-color: #bbbbbb; +} +.toolbar .level-4 > ul { + background-color: #d5d5d5; + border-color: #aaaaaa; +} +.toolbar .level-5 > ul { + background-color: #c5c5c5; + border-color: #999999; +} +.toolbar .level-6 > ul { + background-color: #b5b5b5; + border-color: #888888; +} +.toolbar .level-7 > ul { + background-color: #c5c5c5; + border-color: #999999; +} +.toolbar .level-8 > ul { + background-color: #d5d5d5; + border-color: #aaaaaa; +} +.toolbar .level-9 > ul { + background-color: #e5e5e5; + border-color: #bbbbbb; +} + +/** + * Handle. + */ +.toolbar .handle:hover { + cursor: pointer; +} +.toolbar button.icon.handle { + background-color: transparent; + border: 0; + font-size: 1em; +} +.toolbar .icon.handle { + bottom: 0; + display: block; + height: 100%; + padding: 0; + position: absolute; + right: 0; /* LTR */ + text-indent: -9999px; + top: 0; + width: 3em; + z-index: 1; +} +.toolbar .icon.handle:before { + background-image: url("../images/icon-open.png"); + left: 0; /* LTR */ +} +.toolbar .icon.handle.open:before { + background-image: url("../images/icon-collapse.png"); +} +.toolbar .menu .menu .icon.handle:before { + background-image: url("../images/icon-child-open.png"); +} +.toolbar .menu .menu .icon.handle.open:before { + background-image: url("../images/icon-child-collapse.png"); +} diff --git a/core/modules/toolbar/css/toolbar.theme-rtl.css b/core/modules/toolbar/css/toolbar.theme-rtl.css index 2f53b17..b3798c7 100644 --- a/core/modules/toolbar/css/toolbar.theme-rtl.css +++ b/core/modules/toolbar/css/toolbar.theme-rtl.css @@ -5,45 +5,49 @@ /** * Toolbar tray. */ -.toolbar-js .vertical > .lining > .edge { +.toolbar .horizontal > .lining { + padding-right: 0; + padding-left: 5em; +} +.toolbar .vertical > .lining > .edge { border-left: 1px solid #aaaaaa; border-right: 0 none; box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333); } -.toolbar-js .level-2 li { - padding-left: 0; - padding-right: 0.333em; +.toolbar .horizontal .menu li + li { + border-left: 0 none ; + border-right: 1px solid #dddddd; } - -/** - * ToolBar tray - horizontal. - */ -.toolbar-js .horizontal .toolbar-list li { - float: right; +.toolbar .horizontal .menu li:last-child { + border-left: 1px solid #dddddd; } -.toolbar-js .horizontal .toolbar-list li + li { +.toolbar .vertical .menu .menu .menu { margin-left: 0; - margin-right: 0.5em; + margin-right: 1.3333em; } -.toolbar-js .horizontal .level-2 ul { - border-left: 0 none; - border-right: 1px solid #bcbcbc; +.toolbar .vertical .menu .menu .menu .menu { + margin-left: 0; + margin-right: 0.25em; +} +.toolbar .vertical .menu .menu .menu a { + padding-left: 0; + padding-right: 0.5em; } /** * Orientation toggle. */ -.toolbar-js .horizontal .toggle-orientation { +.toolbar .horizontal .toggle-orientation { border-left: 0 none; border-right: 1px solid #c9c9c9; } -.toolbar-js .toggle-orientation > .lining { +.toolbar .toggle-orientation > .lining { float: left; } -.toolbar-js .toggle-orientation button { +.toolbar .toggle-orientation button { float: right; } -.toolbar-js .toggle-orientation [value="vertical"] { +.toolbar .toggle-orientation [value="vertical"] { border-left-width: 1px; border-right-width: 7px; margin-left: 0; diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css index abaa715..6885208 100644 --- a/core/modules/toolbar/css/toolbar.theme.css +++ b/core/modules/toolbar/css/toolbar.theme.css @@ -1,7 +1,7 @@ /** * @file toolbar.theme.css */ -.toolbar-js { +.toolbar { font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif; /* Set base font size to 13px based on root ems. */ font-size: 0.8125rem; @@ -14,195 +14,117 @@ -webkit-touch-callout: none; touch-callout: none; } -.toolbar-js a { +.toolbar a { + cursor: pointer; + padding: 1em 1.3333em; text-decoration: none; } -.toolbar-js a:hover { +.toolbar a:hover { text-decoration: underline; } + /** * Toolbar bar. */ -.toolbar-js .bar { +.toolbar .bar { background-color: #0f0f0f; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3333); color: #dddddd; } -.toolbar-js .bar li:hover { +.toolbar .bar a:hover { background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%); background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%); } -.toolbar-js .bar li.active { +.toolbar .bar a.active { background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%); background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%); } -.toolbar-js .bar a { +.toolbar .bar a { color: #ffffff; - cursor: pointer; - padding: 1em 0.3333em; -} -@media screen and (min-width: 16.5em) { - .toolbar-js .bar a { - padding-left: 1em; - padding-right: 1em; - } } + /** * Toolbar tray. */ -.toolbar-js .tray > .lining { +.toolbar .tray > .lining { background-color: #ffffff; } -.toolbar-js .vertical > .lining > .edge { +.toolbar .horizontal > .lining { + padding-right: 5em; /* LTR */ +} +.toolbar .vertical > .lining > .edge { background-color: #ffffff; border-right: 1px solid #aaaaaa; /* LTR */ box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */ } -.toolbar-js .horizontal { +.toolbar .horizontal { border-bottom: 1px solid #aaaaaa; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333); } -.toolbar-js .horizontal .tray { +.toolbar .horizontal .tray { background-color: #f5f5f5; } -.toolbar-js .tray a { +.toolbar .tray a { color: #333333; } -.toolbar-js .horizontal .toolbar-list { +.toolbar .horizontal .menu { background-color: #ffffff; - padding: 0 0.6667em; -} -.toolbar-js .toolbar-list a { - padding: 1em 0.3333em; } -.toolbar-js .vertical .toolbar-list a { - padding-left: 1.3333em; - padding-right: 1.3333em; +.toolbar .horizontal .menu li + li { + border-left: 1px solid #dddddd; /* LTR */ } -.toolbar-js .vertical .toolbar-list { - border-bottom: 1px solid #dddddd; +.toolbar .horizontal .menu li:last-child { + border-right: 1px solid #dddddd; /* LTR */ } -.toolbar-js .vertical .level-1 + .level-1, -.toolbar-js .vertical .toolbar-list > li + li, -.toolbar-js .vertical .toolbar-list > .menu > li + li { +.toolbar .vertical .menu li + li { border-top: 1px solid #dddddd; } -.toolbar-js .vertical .level-1 a { - font-weight: bold; -} -.toolbar-js .vertical .level-2 ul { - border-bottom-style: solid; - border-top-style: solid; - border-bottom-width: 1px; - border-top-width: 1px; -} -.toolbar-js .vertical .level-1 li:last-child > ul { - border-bottom: 0; -} -.toolbar-js .vertical .level-2 a { - color: #333333; - padding: 0.6667em 0; -} -.toolbar-js .vertical .level-2 a { - font-weight: normal; -} -.toolbar-js .level-2 li { - padding-left: 0.3333em; /* LTR */ -} -.toolbar-js .level-3 a { - color: #303030; -} -.toolbar-js .level-4 a { - color: #2d2d2d; -} -.toolbar-js .level-5 a { - color: #2a2a2a; -} -.toolbar-js .level-6 a { - color: #272727; -} -.toolbar-js .level-7 a { - color: #2a2a2a; -} -.toolbar-js .level-8 a { - color: #2d2d2d; -} -.toolbar-js .level-9 a { - color: #303030; -} -.toolbar-js .level-2 > ul { - background-color: #f5f5f5; - border-color: #cccccc; -} -.toolbar-js .level-3 > ul { - background-color: #e5e5e5; - border-color: #bbbbbb; -} -.toolbar-js .level-4 > ul { - background-color: #d5d5d5; - border-color: #aaaaaa; -} -.toolbar-js .level-5 > ul { - background-color: #c5c5c5; - border-color: #999999; -} -.toolbar-js .level-6 > ul { - background-color: #b5b5b5; - border-color: #888888; +.toolbar .vertical .menu li:last-child { + border-bottom: 1px solid #dddddd; } -.toolbar-js .level-7 > ul { - background-color: #c5c5c5; - border-color: #999999; +.toolbar .vertical .menu .menu li { + border: 0 none; } -.toolbar-js .level-8 > ul { - background-color: #d5d5d5; - border-color: #aaaaaa; +.toolbar .vertical .menu ul ul { + border-bottom: 1px solid #dddddd; + border-top: 1px solid #dddddd; } -.toolbar-js .level-9 > ul { - background-color: #e5e5e5; - border-color: #bbbbbb; +.toolbar .vertical .menu li:last-child > ul { + border-bottom: 0; } -/** - * ToolBar tray - horizontal. - */ -.toolbar-js .horizontal .toolbar-list li { - float: left; /* LTR */ +.toolbar .vertical .menu .menu .menu { + margin-left: 1.3333em; /* LTR */ } -.toolbar-js .horizontal .toolbar-list li + li { - margin-left: 0.5em; /* LTR */ +.toolbar .vertical .menu .menu .menu .menu { + margin-left: 0.25em; /* LTR */ } -.toolbar-js .horizontal .level-1 > li.open > .box { - border-bottom-color: white; - border-bottom-width: 1px; - border-bottom-style: solid; - position: relative; - margin-top: -1px; - top: 1px; +.toolbar .vertical .menu a { + font-weight: bold; } -.toolbar-js .horizontal .level-2 ul { - border-left: 1px solid #bcbcbc; /* LTR */ +.toolbar .vertical .menu .menu a { + font-weight: normal; } -.toolbar-js .horizontal .level-2 a { - padding: 0.6667em 1em; +.toolbar .vertical .menu .menu .menu a { + padding-left: 0.5em; /* LTR */ } /** * Orientation toggle. */ -.toolbar-js .toggle-orientation { +.toolbar .toggle-orientation { background-color: #f5f5f5; padding: 1em; } -.toolbar-js .horizontal .toggle-orientation { +.toolbar .horizontal .toggle-orientation { border-left: 1px solid #c9c9c9; /* LTR */ } -.toolbar-js .toggle-orientation > .lining { +.toolbar .toggle-orientation > .lining { background-color: #ffffff; border: 1px solid #c9c9c9; float: right; /* LTR */ padding: 0.1667em; } -.toolbar-js .toggle-orientation button { +.toolbar .toggle-orientation button { background-color: transparent; border: 1px solid #b0b0b0; cursor: pointer; @@ -212,13 +134,13 @@ text-indent: -999em; width: 1.4562em; } -.toolbar-js .toggle-orientation [value="vertical"] { +.toolbar .toggle-orientation [value="vertical"] { border-left-width: 7px; /* LTR */ margin-left: 0.5em; /* LTR */ } -.toolbar-js .toggle-orientation [value="horizontal"] { +.toolbar .toggle-orientation [value="horizontal"] { border-top-width: 4px; } -.toolbar-js .toggle-orientation .active { +.toolbar .toggle-orientation .active { border-color: #3F9AD3; } diff --git a/core/modules/toolbar/images/icon-appearance-active.png b/core/modules/toolbar/images/icon-appearance-active.png new file mode 100644 index 0000000..2b11761 --- /dev/null +++ b/core/modules/toolbar/images/icon-appearance-active.png @@ -0,0 +1,4 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxڬ DI$LB%LN0 H@&a$B\/ZP#NIZ-ƎuIŠI؃K"=eT:+*s6ǽy+ {XA`fgdi#GXzP~'Y; +ઊ/A4Տxzs576IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-appearance.png b/core/modules/toolbar/images/icon-appearance.png new file mode 100644 index 0000000..fd581f6 --- /dev/null +++ b/core/modules/toolbar/images/icon-appearance.png @@ -0,0 +1,4 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<AIDATxڜ0EZ;Bsv/q|.2BJ/,%gvd+5eY6ư3<ۦi~b֓]Ao=00QF{n?#GDKT-lJV\6#xxf$t?(~KkQ@&\,2oRgBmqj{mA gE%JVh+*՛Ч3>m9 U?$tlPЧK/c_@߹5H\ . +ձcsC 0@^ǀIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-child-collapse.png b/core/modules/toolbar/images/icon-child-collapse.png new file mode 100644 index 0000000..b7a744f --- /dev/null +++ b/core/modules/toolbar/images/icon-child-collapse.png @@ -0,0 +1,3 @@ +PNG + + IHDRVΎWtEXtSoftwareAdobe ImageReadyqe<OIDATxb`#0RP^^.YA @|qH!00F k 1HGBn(7PBH4t=!hC3>+ ?C#^x>ah ( dMx@BCha4GxCq8 e 64k~IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-configuration.png b/core/modules/toolbar/images/icon-configuration.png new file mode 100644 index 0000000..a5d46b2 --- /dev/null +++ b/core/modules/toolbar/images/icon-configuration.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxڜ-@w[Y#p8[`qp DǛdH6e6o_g^_iʐFS۶O%([PmŀK\Uu:giq'=Pg^ƞ9 #,y0#س1(ʜb eKJ%s\P݂ٞ9%nsW=Gވ‡rfyL38Rhc_P͍ Z7⃵(TKa;qzqB@)4KX O%]PMƠCЯyAIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-content-active.png b/core/modules/toolbar/images/icon-content-active.png new file mode 100644 index 0000000..24b6982 --- /dev/null +++ b/core/modules/toolbar/images/icon-content-active.png @@ -0,0 +1,4 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxbd@(&\ 5p6CʂC1# + B.0C i  C|ORՅ \ </G<Hur/ zIu!(| @P( O 2U# ?R݅'szPIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-content.png b/core/modules/toolbar/images/icon-content.png new file mode 100644 index 0000000..32081b6 --- /dev/null +++ b/core/modules/toolbar/images/icon-content.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxbdr @ٹ dX=4t8`>|.͌x\PdRB.0C i  C|=|”.dB@ʀ@.$@ ? Ʌr^O oZHA#GI.F0@bH)$'R蓰ѳӀ 4!IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-extend-active.png b/core/modules/toolbar/images/icon-extend-active.png new file mode 100644 index 0000000..faa13c5 --- /dev/null +++ b/core/modules/toolbar/images/icon-extend-active.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxڼ  `#F0JG0 n4#΃K.r$'ZcҸzZOB}O uhsw`6ahQԎ`( a,412*_5I0c5!|P:vMhsf͆`3 ƥ<IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-extend.png b/core/modules/toolbar/images/icon-extend.png new file mode 100644 index 0000000..52219ff --- /dev/null +++ b/core/modules/toolbar/images/icon-extend.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<,IDATxڜ10 Evb8B: la8Lt G:d۱DYeYn`6R# N`UUn&o`S)ָV\+ A 5weQi~ķ ?w5cVP*U9r'eisJ#H!L&迖[cR!5m AЏ;b'+d,F"\.uJv*BԘ+B&&'u @H@U\Ax=P ;Oa0|q(~Oa la`` 8" +4:DC l .o34iX08 ##.dA߰@&!ɷd^f ṖЁyXk "aJPCd=KT) 2$JIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-help.png b/core/modules/toolbar/images/icon-help.png new file mode 100644 index 0000000..0a8fe2e --- /dev/null +++ b/core/modules/toolbar/images/icon-help.png @@ -0,0 +1,4 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<>IDATxڴ0!Cv%PT V t;qD,A;0H %?m. ɷ͟M1 gzB{RTah+!|fLN27 '@]y s:TSkWBf~.B ֦$LKV.w%IML&=+'P܏P}*N m\;`8J3h뼙[`%ȣLQґIwR +Դ[Dy:9\.c@w -M#6suF}}#?D9ot:[+WmBQ*/*G.)qz$ UZpNj`۶{.Hk*>LO0{ +0\ lJIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-home.png b/core/modules/toolbar/images/icon-home.png new file mode 100644 index 0000000..5d8d501 --- /dev/null +++ b/core/modules/toolbar/images/icon-home.png @@ -0,0 +1,6 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<IDATxԔA +0E xGH;UqJ#. ( GԊ ?1h02*B 8MS +a! J,bN G3/H$s8qUUkIpE +!ɄAuJb}:yh3PEQu]hymEUU8Y' m8ذޘG3M5MC#&/7a],uDS)~o=ʱIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-menu-active.png b/core/modules/toolbar/images/icon-menu-active.png new file mode 100644 index 0000000..ab6462e --- /dev/null +++ b/core/modules/toolbar/images/icon-menu-active.png @@ -0,0 +1,3 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<IIDATxb``v,Pia0M`_~b߿xW^Ǵ 4Iq2{LIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-menu.png b/core/modules/toolbar/images/icon-menu.png new file mode 100644 index 0000000..a02939f --- /dev/null +++ b/core/modules/toolbar/images/icon-menu.png @@ -0,0 +1,3 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<\IDATxbb` $o kDΖD" gJ.| 2ynd$`UI &11; 9dsIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-reports-active.png b/core/modules/toolbar/images/icon-reports-active.png new file mode 100644 index 0000000..96f4673 --- /dev/null +++ b/core/modules/toolbar/images/icon-reports-active.png @@ -0,0 +1,4 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxڬ ]Fp6N  :BGTr<.,3w] +#IhT*TD :L0(]'!+%N!g;&}XMQoRy8c67`'R)zX (Sx/Q#%eF?-Nڦ-@4rdL7U O)ouеQtủ+as|47 zIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-reports.png b/core/modules/toolbar/images/icon-reports.png new file mode 100644 index 0000000..49ede88 --- /dev/null +++ b/core/modules/toolbar/images/icon-reports.png @@ -0,0 +1,5 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe< IDATxڬT 0 LQdF00B_}Ͼ `f26 +2IKX&.ڶR1{Ld"f:@ ih1sAUJd0`S=|`g(!j͒\΅" ۳*5Jr8!DF5:4G] +xt#oQ ϶ K4q:cE&2HO0G^yc,tDHY3 w'^ :3PdVIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-structure-active.png b/core/modules/toolbar/images/icon-structure-active.png new file mode 100644 index 0000000..3ab2375 --- /dev/null +++ b/core/modules/toolbar/images/icon-structure-active.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxb`q$#r"uHc 0QT7PxAH0쨛H5Dp([#6 #wf t)cb V PB 6ʡB~(|9Wr\Q@^ `c'6CIENDB` \ No newline at end of file diff --git a/core/modules/toolbar/images/icon-structure.png b/core/modules/toolbar/images/icon-structure.png new file mode 100644 index 0000000..7a8302f --- /dev/null +++ b/core/modules/toolbar/images/icon-structure.png @@ -0,0 +1,3 @@ +PNG + + IHDR tEXtSoftwareAdobe ImageReadyqe<IDATxb`qdEEr"u6=,,VCL2 $H^s@b?f`/3%JJ,Xҗ#./q'x b +bz,/ 1jZ`@ArC' "`+@C0nj+Sލu\IENDB` \ No newline at end of file diff --git a/core/modules/toolbar/js/interactivemenu.js b/core/modules/toolbar/js/interactivemenu.js deleted file mode 100644 index e6ef4e4..0000000 --- a/core/modules/toolbar/js/interactivemenu.js +++ /dev/null @@ -1,129 +0,0 @@ -/** - * Decorate a menu with markup and classes for attaching behaviors. - */ - -(function ($, Drupal) { - -"use strict"; - -/** - * Store the open menu tray. - */ -var openItem = JSON.parse(localStorage.getItem('Drupal.interactivemenu.openItem')); - - $.fn.interactiveMenu = function () { - - var ui = { - 'handleOpen': Drupal.t('Open'), - 'handleClose': Drupal.t('Close') - }; - /** - * - */ - function toggleClickHandler (event) { - var $toggle = $(event.target); - var $item = $toggle.closest('li'); - // Toggle the list item. - toggleList($item); - // Close open siblings and their open children. - var $openItems = $item.siblings().filter('.open'); - toggleList($openItems, false); - // Save link of the closest open item through a unique selector. - var href = $toggle.siblings('a[href]').attr('href'); - if (href) { - localStorage.setItem('Drupal.interactivemenu.openItem', JSON.stringify(href)); - } - else { - localStorage.removeItem('Drupal.interactivemenu.openItem'); - } - } - /** - * - */ - function toggleList ($item, switcher) { - var $toggle = $item.find('> .box > .handle'); - switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open'); - // Toggle the item open state. - $item.toggleClass('open', switcher); - // Twist the toggle. - $toggle.toggleClass('open', switcher); - // Adjust the toggle text. - $toggle - .text((switcher) ? ui.handleOpen : ui.handleClose) - .attr('aria-pressed', switcher); - } - /** - * - */ - function initItems ($menu) { - var options = { - 'class': 'handle', - 'text': ui.handleOpen - }; - // Initialize items and their links. - $menu.find('li > a').wrap('
'); - // Add a handle to each list item if it has a menu. - $menu.find('li').each(function (index, element) { - var $item = $(element); - if ($item.find('> ul.menu').length) { - $item.find('> .box') - .prepend(Drupal.theme('interactionMenuItemToggle', options)); - } - }); - } - /** - * Adds a level class to each list based on its depth in the menu. - */ - function markListLevels ($lists, level) { - level = (!level) ? 1 : level; - var $lis = $lists.find('> li').addClass('level-' + level); - $lists = $lis.find('> ul'); - if ($lists.length) { - markListLevels($lists, level + 1); - } - } - /** - * - */ - function traceActiveTrail ($menu) { - $menu.find('a.active').parentsUntil('.root', 'li').addClass('active-trail'); - } - /** - * - */ - function openActiveItem ($menu) { - var $activeItem = $menu.find('a.active'); - if ($activeItem.attr('href') === location.pathname) { - toggleList($menu.find('a[href="' + location.pathname + '"]').parentsUntil('.root', 'li'),true); - localStorage.setItem('Drupal.interactivemenu.openItem', JSON.stringify(location.pathname)); - } - else if (openItem) { - toggleList($menu.find('a[href="' + openItem + '"]').parentsUntil('.root', 'li'),true); - } - } - // Bind event handlers. - $(document).on('click.interactivemenu', '.handle', toggleClickHandler); - return this.each(function (selector) { - var $menu = $(this).once('interactivemenu'); - if ($menu.length) { - $menu.addClass('root'); - initItems($menu); - markListLevels($menu); - // Restore previous and active states. - traceActiveTrail($menu); - openActiveItem($menu); - } - }); - }; - - /** - * A toggle is an interactive element often bound to a click handler. - * - * @return {String} - * A string representing a DOM fragment. - */ - Drupal.theme.interactionMenuItemToggle = function (options) { - return ''; - }; - -}(jQuery, Drupal)); diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js index 68803cf..c86defe 100644 --- a/core/modules/toolbar/js/toolbar.js +++ b/core/modules/toolbar/js/toolbar.js @@ -29,7 +29,10 @@ var $trays; /** * Holds the mediaQueryList object. */ -var mql; +var mql = { + standard: null, + wide: null +}; /** * Register tabs with the toolbar. @@ -44,7 +47,6 @@ Drupal.behaviors.toolbar = { var options = $.extend(this.options, drupalSettings.toolbar); $toolbar = $(context).find('#toolbar').once('toolbar'); if ($toolbar.length) { - $toolbar.addClass('toolbar-js'); // Store the trays in a scoped variable. $trays = $toolbar.find('.tray'); $trays @@ -53,12 +55,14 @@ Drupal.behaviors.toolbar = { .append(Drupal.theme('toolbarOrientationToggle')); // Set the active state of the orientation toggles. changeOrientation(orientation, locked); + // Store media queries. + mql.standard = window.matchMedia(options.breakpoints['module.toolbar.standard']); // Set up switching between the vertical and horizontal presentation // of the toolbar trays based on a breakpoint. - mql = window.matchMedia(options.breakpoints['module.toolbar.wide']); - mql.addListener(Drupal.toolbar.mediaQueryChangeHandler); - if (mql.matches) { - Drupal.toolbar.mediaQueryChangeHandler(mql); + mql.wide = window.matchMedia(options.breakpoints['module.toolbar.wide']); + mql.wide.addListener(Drupal.toolbar.mediaQueryChangeHandler); + if (mql.wide.matches) { + Drupal.toolbar.mediaQueryChangeHandler(mql.wide); } // Call setHeight on screen resize. Wrap it in debounce to prevent // setHeight from being called too frequently. @@ -68,13 +72,13 @@ Drupal.behaviors.toolbar = { .on('resize.toolbar', setHeight); // Attach behaviors to the toolbar. $toolbar - .on('click.toolbar', '.bar .tab', Drupal.toolbar.toggleTray) + .on('click.toolbar', '.bar a', Drupal.toolbar.toggleTray) .on('click.toolbar', '.toggle-orientation button', Drupal.toolbar.orientationChangeHandler); // Decorate the main menu with an interactive menu. - $toolbar.find('.administration.tray .interactive-menu > .menu').interactiveMenu(); + $toolbar.find('.administration.tray .toolbar-menu > .menu').toolbarMenu(); // Restore the open tab. Only open the tab on wide screens. - if (activeTab && window.matchMedia(options.breakpoints['module.toolbar.narrow']).matches) { - $toolbar.find('[data-toolbar-tray="' + activeTab + '"].tab').trigger('click.toolbar'); + if (activeTab && window.matchMedia(options.breakpoints['module.toolbar.standard']).matches) { + $toolbar.find('[data-toolbar-tray="' + activeTab + '"]').trigger('click.toolbar'); } // Recalculate the offset top of the toolbar once on initialization. else { @@ -85,7 +89,7 @@ Drupal.behaviors.toolbar = { // Default options. options: { breakpoints: { - 'module.toolbar.narrow': '', + 'module.toolbar.standard': '', 'module.toolbar.wide': '' } } @@ -95,24 +99,22 @@ Drupal.behaviors.toolbar = { */ Drupal.toolbar.toggleTray = function (event) { var $tab = $(event.target); - var $parent = $tab.parent(); var name = $tab.attr('data-toolbar-tray'); - var $toolbar = $tab.closest('#toolbar'); // Activate the selected tab and associated tray. var $activateTray = $toolbar.find('[data-toolbar-tray="' + name + '"].tray').toggleClass('active'); if ($activateTray.length) { event.preventDefault(); event.stopPropagation(); - $parent.toggleClass('active'); + $tab.toggleClass('active'); // Store the active tab name or remove the setting. - if ($parent.hasClass('active')) { + if ($tab.hasClass('active')) { localStorage.setItem('Drupal.toolbar.activeTab', JSON.stringify(name)); } else { localStorage.removeItem('Drupal.toolbar.activeTab'); } // Disable non-selected tabs and trays. - $toolbar.find('.bar .tab').not($tab).parent().removeClass('active'); + $toolbar.find('.bar a').not($tab).removeClass('active'); $toolbar.find('.tray').not($activateTray).removeClass('active'); // Adjust the body to accommodate trays. setBodyState(); @@ -139,9 +141,11 @@ Drupal.toolbar.setHeight = function () { tray.style.top = bhpx; } } - // Get the height of the active horizontal tray and include it in the total - // height of the toolbar. - height += $trays.filter('.active.horizontal').height('auto').outerHeight() || 0; + /** + * Get the height of the active tray and include it in the total + * height of the toolbar. + */ + height += $trays.filter('.active.horizontal').outerHeight() || 0; // Indicate the height of the toolbar in the attribute data-offset-top. var offset = parseInt($toolbar.attr('data-offset-top'), 10); if (offset !== height) { diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js new file mode 100644 index 0000000..0dc9dd6 --- /dev/null +++ b/core/modules/toolbar/js/toolbar.menu.js @@ -0,0 +1,166 @@ +/** + * Builds a nested accordion widget. + * + * Invoke on an HTML list element with the jQuery plugin pattern. + * - For example, $('.menu').toolbarMenu(); + */ + +(function ($, Drupal) { + +"use strict"; + +/** + * Store the open menu tray. + */ +var openItem = JSON.parse(localStorage.getItem('Drupal.toolbar.menu.openItem')); + + $.fn.toolbarMenu = function () { + + var ui = { + 'handleOpen': Drupal.t('Open'), + 'handleClose': Drupal.t('Close') + }; + /** + * Handle clicks from the disclosure button on an item with sub-items. + * + * @param {Object} event + * A jQuery Event object. + */ + function toggleClickHandler (event) { + var $toggle = $(event.target); + var $item = $toggle.closest('li'); + // Toggle the list item. + toggleList($item); + // Close open siblings and their open children. + var $openItems = $item.siblings().filter('.open'); + toggleList($openItems, false); + // Save link of the closest open item through a unique selector. + var href = $toggle.siblings('a[href]').attr('href'); + if (href) { + localStorage.setItem('Drupal.toolbar.menu.openItem', JSON.stringify(href)); + } + else { + localStorage.removeItem('Drupal.toolbar.menu.openItem'); + } + } + /** + * Toggle the open/close state of a list is a menu. + * + * @param {jQuery} $item + * The li item to be toggled. + * + * @param {Boolean} switcher + * A flag that forces toggleClass to add or a remove a class, rather than + * simply toggling its presence. + */ + function toggleList ($item, switcher) { + var $toggle = $item.find('> .box > .handle'); + switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open'); + // Toggle the item open state. + $item.toggleClass('open', switcher); + // Twist the toggle. + $toggle.toggleClass('open', switcher); + // Adjust the toggle text. + $toggle + .text((switcher) ? ui.handleClose : ui.handleOpen) + .attr('aria-pressed', switcher); + } + /** + * Add markup to the menu elements. + * + * Items with sub-elements have a list toggle attached to them. Menu item + * links and the corresponding list toggle are wrapped with in a div + * classed with .box. The .box div provides a positioning context for the + * item list toggle. + * + * @param {jQuery} $menu + * The root of the menu to be initialized. + */ + function initItems ($menu) { + var options = { + 'class': 'icon handle', + 'text': ui.handleOpen + }; + // Initialize items and their links. + $menu.find('li > a').wrap('
'); + // Add a handle to each list item if it has a menu. + $menu.find('li').each(function (index, element) { + var $item = $(element); + if ($item.find('> ul.menu').length) { + $item.find('> .box') + .prepend(Drupal.theme('toolbarMenuItemToggle', options)); + } + }); + } + /** + * Adds a level class to each list based on its depth in the menu. + * + * This function is called recursively on each sub level of lists elements + * until the depth of the menu is exhausted. + * + * @param {jQuery} $lists + * A jQuery object of ul elements. + * + * @param {Integer} level + * The current level number to be assigned to the list elements. + */ + function markListLevels ($lists, level) { + level = (!level) ? 1 : level; + var $lis = $lists.find('> li').addClass('level-' + level); + $lists = $lis.find('> ul'); + if ($lists.length) { + markListLevels($lists, level + 1); + } + } + /** + * Marks the trail of the active link in the menu back to the root of the + * menu. + * + * @param {jQuery} $menu + * The root of the menu. + */ + function traceActiveTrail ($menu) { + $menu.find('a.active').parentsUntil('.root', 'li').addClass('active-trail'); + } + /** + * On page load, open the active menu item. + * + * @param {jQuery} $menu + * The root of the menu. + */ + function openActiveItem ($menu) { + var $activeItem = $menu.find('a.active'); + if ($activeItem.attr('href') === location.pathname) { + toggleList($menu.find('a[href="' + location.pathname + '"]').parentsUntil('.root', 'li'),true); + localStorage.setItem('Drupal.toolbar.menu.openItem', JSON.stringify(location.pathname)); + } + else if (openItem) { + toggleList($menu.find('a[href="' + openItem + '"]').parentsUntil('.root', 'li'), true); + } + } + // Bind event handlers. + $(document).on('click.toolbar', '.handle', toggleClickHandler); + return this.each(function (selector) { + var $menu = $(this).once('toolbar-menu'); + if ($menu.length) { + $menu.addClass('root'); + initItems($menu); + markListLevels($menu); + // Restore previous and active states. + traceActiveTrail($menu); + openActiveItem($menu); + } + }); + }; + + /** + * A toggle is an interactive element often bound to a click handler. + * + * @return {String} + * A string representing a DOM fragment. + */ + Drupal.theme.toolbarMenuItemToggle = function (options) { + return ''; + }; + +}(jQuery, Drupal)); diff --git a/core/modules/toolbar/toolbar.info b/core/modules/toolbar/toolbar.info index 1f3a375..a6fd841 100644 --- a/core/modules/toolbar/toolbar.info +++ b/core/modules/toolbar/toolbar.info @@ -4,7 +4,6 @@ core = 8.x package = Core version = VERSION -dependencies[] = config dependencies[] = breakpoint configure = admin/structure/toolbar diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module index 792a39c..71338a9 100644 --- a/core/modules/toolbar/toolbar.module +++ b/core/modules/toolbar/toolbar.module @@ -72,9 +72,9 @@ function toolbar_pre_render($toolbar) { } /** - * Implements hook_preprocess_HOOK(). + * Implements template_preprocess_HOOK(). */ -function toolbar_preprocess_toolbar(&$variables) { +function template_preprocess_toolbar(&$variables) { // Metadata for the toolbar wrapping element. $variables['attributes'] = new Attribute(array( 'id' => 'toolbar', @@ -133,6 +133,7 @@ function toolbar_toolbar() { 'html' => FALSE, 'attributes' => array( 'title' => t('Home page'), + 'class' => array('icon', 'icon-home'), ), ), 'weight' => -20, @@ -148,7 +149,7 @@ function toolbar_toolbar() { $menu['toolbar_administration'] = array( '#type' => 'container', '#attributes' => array( - 'class' => array('interactive-menu', 'toolbar-list'), + 'class' => array('toolbar-menu',), ), 'administration_menu' => menu_tree_output($tree), ); @@ -160,6 +161,7 @@ function toolbar_toolbar() { 'html' => FALSE, 'attributes' => array( 'title' => t('Admin menu'), + 'class' => array('icon', 'icon-menu'), ), ), 'tray' => $menu, @@ -175,9 +177,8 @@ function toolbar_toolbar() { * @return * A renderable arrray, with two children: * - 'tabs': an array of links, rendered by theme('links'). - * - 'trays': an array of render elements, at moat one of which is - * displayed at once, when the corresponding tab is activated. The trays - * are rendered by theme('toolbar_tray'). + * - 'trays': an array of render elements displayed when the corresponding tab + * is activated. */ function toolbar_view() { @@ -217,7 +218,7 @@ function($object) {return $object->mediaQuery;}, '#attributes' => array( 'class' => array('bar', 'clearfix'), ), - '#heading' => array('text' => t('Drupal toolbar'), 'level' => 'h2', 'class' => 'element-invisible'), + '#heading' => array('text' => t('Toolbar'), 'level' => 'h2', 'class' => 'element-invisible'), ); $tab_defaults = array( 'title' => '', @@ -226,35 +227,27 @@ function($object) {return $object->mediaQuery;}, 'attributes' => new Attribute(), ); - foreach ($toolbar_groups as $category => $items) { + foreach ($toolbar_groups as $group => $items) { if ($tab = $items['tab']) { - // Log a warning if the tab is already defined. - if (array_key_exists($category, $build['tabs']['#links'])) { - watchdog('toolbar', 'Toolbar tab %category is already defined.', - array('%category' => $category) - ); - } // Merge in the defaults. $tab += $tab_defaults; - $tab['attributes'] += array('class' => array()); - $tab['attributes']['class'] += array('tab'); // Provide a data attribute linking each tab to the corresponding tray. // Unlike the defaults above, these properties may override values. - $tab['attributes']['data-toolbar-tray'] = $category; + $tab['attributes']['data-toolbar-tray'] = $group; $tab['attributes']['role'] = 'button'; // Assign the tabs to the build. - $build['tabs']['#links'][$category] = $tab; + $build['tabs']['#links'][$group] = $tab; } if (!empty($items['tray'])) { - if (array_key_exists($category, $build['trays'])) { - array_merge($build['trays'][$category], $items['tray']); + if (array_key_exists($group, $build['trays'])) { + array_merge($build['trays'][$group], $items['tray']); } else { // Assign the tray to the build. - $build['trays'][$category] = $items['tray']; + $build['trays'][$group] = $items['tray']; } } } @@ -298,7 +291,13 @@ function toolbar_menu_navigation_links(&$tree) { } // Make sure we have a path specific ID in place, so we can attach icons // and behaviors to the items. - $tree[$key]['link']['localized_options']['attributes']['id'] = 'toolbar-link-' . str_replace(array('/', '<', '>'), array('-', '', ''), $item['link']['link_path']); + $tree[$key]['link']['localized_options']['attributes'] = array( + 'id' => 'toolbar-link-' . str_replace(array('/', '<', '>'), array('-', '', ''), $item['link']['link_path']), + 'class' => array( + 'icon', + 'icon-' . strtolower(str_replace(' ', '-', $item['link']['title'])), + ), + ); } } @@ -361,18 +360,18 @@ function toolbar_library_info() { array('system', 'matchmedia'), array('system', 'jquery.once'), array('system', 'drupal.debounce'), - array('toolbar', 'toolbar.interactiveMenu'), + array('toolbar', 'toolbar.menu'), ), ); - $libraries['toolbar.interactiveMenu'] = array( - 'title' => 'Toolbar interactive menu decorator', + $libraries['toolbar.menu'] = array( + 'title' => 'Toolbar nested accordion menus.', 'version' => VERSION, 'js' => array( - drupal_get_path('module', 'toolbar') . '/js/interactivemenu.js' => array(), + drupal_get_path('module', 'toolbar') . '/js/toolbar.menu.js' => array(), ), 'css' => array( - drupal_get_path('module', 'toolbar') . '/css/interactivemenu.css', + drupal_get_path('module', 'toolbar') . '/css/toolbar.menu.css', ), 'dependencies' => array( array('system', 'jquery'), diff --git a/core/modules/user/images/icon-user-active.png b/core/modules/user/images/icon-user-active.png new file mode 100644 index 0000000..3c9d73b --- /dev/null +++ b/core/modules/user/images/icon-user-active.png @@ -0,0 +1,4 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<IDATxb`v߿@?߇6߿ +@|c q ?DžA2:OlllYp?aU H(f< )A˗/q#~ H"̑O@'?F ^9޽.XсH>@AHHo߾mR%dho޼RT FW^|a fH, \<4ddIENDB` \ No newline at end of file diff --git a/core/modules/user/images/icon-user.png b/core/modules/user/images/icon-user.png new file mode 100644 index 0000000..3c847c6 --- /dev/null +++ b/core/modules/user/images/icon-user.png @@ -0,0 +1,6 @@ +PNG + + IHDRĴl;tEXtSoftwareAdobe ImageReadyqe<&IDATxb`j'O +022@lx' Ǐ+ d*`~46, |2@A$СC o'"8 . +O$0(J EdȈ5pipuu} @̀#`8 `/ 7oEN$oR |}}? l^z5u@C3fƒ@zChhW\40W$|Z>le @#%K@^O0fZD 0= +`PC0q WIENDB` \ No newline at end of file diff --git a/core/modules/user/user.css b/core/modules/user/user.css index 38ddcf9..ccd2b56 100644 --- a/core/modules/user/user.css +++ b/core/modules/user/user.css @@ -91,10 +91,10 @@ div.password-suggestions ul { /** * Toolbar icon. */ -.toolbar-js .user .tab { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9IjQuMDc3MSIgeDI9IjQ5Ljk5OTUiIHkyPSI4OC44ODc0Ij4NCgk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojQ0NDQ0NDIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6Izk5OTk5OSIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgZD0iTTI4LjQyNCwyNy42NTNjMCwxMS45NjMsOS42NTMsMjEuNjUzLDIxLjU3NiwyMS42NTMNCgljMTEuOTIyLDAsMjEuNTc0LTkuNjksMjEuNTc0LTIxLjY1M0M3MS41NzQsMTUuNjkyLDYxLjkyMiw2LDUwLDZDMzguMDc3LDYsMjguNDI0LDE1LjY5MiwyOC40MjQsMjcuNjUzeiBNMTAwLDkwLjYxNQ0KCWMwLTIwLjM0Ni0xLjExNS0zNS40MjMtNTAtMzUuNDIzYy00OC44MDgsMC01MCwxNC4zMDctNTAsMzUuNDIzSDEwMHoiLz4NCjwvc3ZnPg0K); +.icon-user:before { + background-image: url("images/icon-user.png"); } -.toolbar-js .user .tab:active, -.toolbar-js .user.active .tab { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTAiIHkxPSI5Ni45MjI5IiB4Mj0iNTAiIHkyPSIxMi4xMTI2IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgMTAxKSI+DQoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuOTkwMSIgc3R5bGU9InN0b3AtY29sb3I6I0U1RTVFNSIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNMjguNDI0LDI3LjY1M2MwLDExLjk2Myw5LjY1MywyMS42NTMsMjEuNTc2LDIxLjY1M2MxMS45MjIsMCwyMS41NzQtOS42OSwyMS41NzQtMjEuNjUzDQoJQzcxLjU3NCwxNS42OTIsNjEuOTIyLDYsNTAsNkMzOC4wNzcsNiwyOC40MjQsMTUuNjkyLDI4LjQyNCwyNy42NTN6IE0xMDAsOTAuNjE1YzAtMjAuMzQ2LTEuMTE1LTM1LjQyNC01MC0zNS40MjQNCgljLTQ4LjgwOCwwLTUwLDE0LjMwOC01MCwzNS40MjRIMTAweiIvPg0KPC9zdmc+DQo=); +.icon-user:active:before, +.active .icon-user:before { + background-image: url("images/icon-user-active.png"); } diff --git a/core/modules/user/user.module b/core/modules/user/user.module index 2e4b5ed..3d4e748 100644 --- a/core/modules/user/user.module +++ b/core/modules/user/user.module @@ -3135,7 +3135,7 @@ function user_toolbar() { '#theme' => 'links__toolbar_user', '#links' => $links, '#attributes' => array( - 'class' => array('toolbar-list'), + 'class' => array('menu'), ), '#heading' => array('text' => t('User account actions'), 'level' => 'h2', 'class' => 'element-invisible'), ); @@ -3147,6 +3147,7 @@ function user_toolbar() { 'html' => FALSE, 'attributes' => array( 'title' => t('My account'), + 'class' => array('icon', 'icon-user'), ), ), 'tray' => $user_tray,