[FEATURE] Refactor toolbar / topbar HTML5 & layout
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / _module_menu.less
1 /**
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 /* - - - - - - - - - - - - - - - - - - - - -
15 Module menu
16 - - - - - - - - - - - - - - - - - - - - - */
17
18 @module-menu-height: 32px;
19 @module-menu-padding-horizontal: @navbar-padding-horizontal;
20 @module-menu-padding-vertical: floor((@module-menu-height - @line-height-computed) / 2);
21
22 #typo3-module-menu {
23 background: @navbar-inverse-bg;
24 color: @navbar-inverse-color;
25 padding-bottom: ceil(@module-menu-padding-vertical * 2);
26
27 .x-panel-body {
28 background-color: transparent;
29 }
30
31 #typo3-menu {
32 margin-top: 18px;
33 .list-unstyled;
34
35 > li {
36 margin-bottom: 1px;
37
38 div.modgroup {
39 .text-nowrap;
40 background-color: @navbar-inverse-link-disabled-bg;
41 color: @navbar-inverse-link-disabled-color;
42 cursor: pointer;
43 font-weight: bold;
44 text-transform: uppercase;
45 font-size: 0.9em;
46 padding: @module-menu-padding-vertical @module-menu-padding-horizontal;
47 }
48
49 ul {
50 .list-unstyled;
51
52 li {
53 a {
54 .text-nowrap;
55 color: @navbar-inverse-link-color;
56 padding: @module-menu-padding-vertical @module-menu-padding-horizontal;
57 position: relative;
58 display: block;
59 text-decoration: none;
60 overflow: hidden;
61
62 &:hover {
63 background-color: @navbar-inverse-link-hover-bg;
64 color: @navbar-inverse-link-hover-color;
65 }
66
67 span.submodule-icon {
68 position: absolute;
69 }
70
71 span.submodule-label {
72 display: block;
73 margin-left: 26px;
74 }
75
76 }
77
78 &.highlighted {
79 font-weight: bold;
80
81 a {
82 background-color: @navbar-inverse-link-active-bg;
83 color: @navbar-inverse-link-active-color;
84
85 &:after {
86 content: " ";
87 line-height: 0;
88 position: absolute;
89 right: 0;
90 top: 8px;
91 border: 8px solid transparent;
92 border-right: 8px solid white;
93 }
94 }
95 }
96 }
97 }
98
99 img {
100 max-width: 16px;
101 max-height: 16px;
102 }
103 }
104 }
105 }