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