1/** 2 * @file toolbar.menu.css 3 * 4 * If Claro is the admin theme, this stylesheet will be used by the active theme 5 * even if the active theme is not Claro. 6 */ 7.toolbar .toolbar-menu, 8[dir="rtl"] .toolbar .toolbar-menu { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12} 13.toolbar .toolbar-box { 14 position: relative; 15 display: block; 16 width: auto; 17 line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */ 18} 19 20/** 21 * Hidden vertical toolbar sub-menus by default. 22 */ 23.toolbar .toolbar-tray-vertical .toolbar-menu ul { 24 display: none; 25} 26 27/** 28 * Hidden horizontal toolbar handle icon. 29 */ 30.toolbar .toolbar-tray-horizontal .toolbar-menu .toolbar-handle { 31 display: none; 32} 33/** 34 * Hidden toolbar sub-menus by default. 35 */ 36.toolbar-tray-open .toolbar-menu .menu-item--expanded ul { 37 display: none; 38} 39.toolbar .toolbar-tray-vertical li.open > ul { 40 display: block; /* Show the sub-menus */ 41} 42.toolbar .toolbar-tray-vertical .toolbar-handle + a { 43 margin-right: 3em; /* LTR */ 44} 45[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-handle + a { 46 margin-right: 0; 47 margin-left: 3em; 48} 49.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a, 50.toolbar .toolbar-tray a.is-active { 51 color: #000; 52 font-weight: bold; 53} 54 55/* ----- Toolbar menu tray for viewports less than 320px ------ */ 56@media screen and (max-width: 319px) { 57 .toolbar .toolbar-tray-vertical.is-active { 58 width: 100%; 59 } 60} 61 62/** 63 * Items. 64 */ 65.toolbar .level-2 > ul { 66 border-top-color: #e5e5e5; 67 border-bottom-color: #ccc; 68 background-color: #fafafa; 69} 70.toolbar .level-3 > ul { 71 border-top-color: #ddd; 72 border-bottom-color: #c5c5c5; 73 background-color: #f5f5f5; 74} 75.toolbar .level-4 > ul { 76 border-top-color: #d5d5d5; 77 border-bottom-color: #bbb; 78 background-color: #eee; 79} 80.toolbar .level-5 > ul { 81 border-top-color: #ccc; 82 border-bottom-color: #b5b5b5; 83 background-color: #e5e5e5; 84} 85.toolbar .level-6 > ul { 86 border-top-color: #c5c5c5; 87 border-bottom-color: #aaa; 88 background-color: #eee; 89} 90.toolbar .level-7 > ul { 91 border-top-color: #ccc; 92 border-bottom-color: #b5b5b5; 93 background-color: #fafafa; 94} 95.toolbar .level-8 > ul { 96 border-top-color: #ddd; 97 border-bottom-color: #ccc; 98 background-color: #ddd; 99} 100 101/** 102 * Handle. 103 */ 104.toolbar .toolbar-handle:hover { 105 cursor: pointer; 106} 107.toolbar .toolbar-icon.toolbar-handle { 108 position: absolute; 109 z-index: 1; 110 top: 0; 111 right: 0; /* LTR */ 112 bottom: 0; 113 display: block; 114 height: 100%; 115 padding: 0; 116} 117[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle { 118 right: auto; 119 left: 0; 120 padding: 0; 121} 122