[TASK] Optimize CSS clearfix usage
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _module_menu.less
1 //
2 // Module menu
3 //
4
5 // Module base
6 @module-menu-color: #fff;
7 @module-menu-bg: #222;
8 @module-menu-border-color: #111;
9
10 // Module group
11 @module-menu-group-color: @module-menu-color;
12 @module-menu-group-bg: @module-menu-bg;
13 @module-menu-group-expanded-bg: @module-menu-bg;
14
15 // Module links
16 @module-menu-link-border-radius: 0 @border-radius-small @border-radius-small 0;
17 @module-menu-link-color: #aaa;
18 @module-menu-link-hover-color: @module-menu-color;
19 @module-menu-link-hover-bg: lighten(@module-menu-bg,3%);
20 @module-menu-link-active-color: #fff;
21 @module-menu-link-active-bg: lighten(@module-menu-bg,15%);
22 @module-menu-item-padding-vertical: 4px;
23 @module-menu-item-padding-horizontal: 9px;
24
25 // Module menu container
26 [id="typo3-module-menu"] {
27 background: @module-menu-bg;
28 color: @module-menu-color;
29 }
30
31 // Invisible module menu drag handler
32 [id="typo3-module-menu-xsplit"] {
33 z-index: 10;
34 width: 1px;
35 background-color: lighten(@module-menu-border-color,10%);
36 .box-shadow(2px 0px 3px rgba(0,0,0,0.5));
37 &:hover {
38 .box-shadow(2px 0px 3px rgba(0,0,0,0.9));
39 }
40 .x-layout-mini-wrapper {
41 left: -7px;
42 width: 15px;
43 }
44 }
45
46 // Module menu styling
47 [id="typo3-menu"] {
48 .list-unstyled();
49
50 /// Module menu group
51 .typo3-module-menu-group-container {
52 clear: both;
53 .list-unstyled();
54 padding-right: 15px;
55 }
56 .typo3-module-menu-group {
57 .transition(background-color 0.4s ease-in-out);
58 position: relative;
59 color: @module-menu-group-color;
60 background-color: @module-menu-group-bg;
61 border-top: 1px solid lighten(@module-menu-border-color,10%);
62 border-bottom: 1px solid @module-menu-border-color;
63 padding: 5px 0;
64 }
65 .typo3-module-menu-group.expanded {
66 background-color: @module-menu-group-expanded-bg;
67 }
68 .typo3-module-menu-group-header {
69 &:extend(.clearfix all);
70 position: relative;
71 cursor: pointer;
72 display: block;
73 padding: @module-menu-item-padding-vertical @module-menu-item-padding-horizontal;
74 text-transform: uppercase;
75 }
76
77 // Module menu item
78 .typo3-module-menu-item {
79 margin: 1px 0;
80 }
81
82 // Module menu links
83 .typo3-module-menu-item-link {
84 &:extend(.clearfix all);
85 position: relative;
86 cursor: pointer;
87 display: block;
88 padding: @module-menu-item-padding-vertical @module-menu-item-padding-horizontal;
89 color: @module-menu-link-color;
90 border-radius: @module-menu-link-border-radius;
91 text-decoration: none;
92 &:focus,
93 &:hover {
94 outline: none;
95 color: @module-menu-link-hover-color;
96 background-color: @module-menu-link-hover-bg;
97 }
98 }
99 .typo3-module-menu-item.active {
100 .typo3-module-menu-item-link {
101 color: @module-menu-link-active-color;
102 background-color: @module-menu-link-active-bg;
103 }
104 }
105
106 // Module menu icons
107 .typo3-module-menu-group-icon,
108 .typo3-module-menu-item-icon {
109 float: left;
110 margin-right: 10px;
111 }
112 .typo3-module-menu-group-icon {
113 background-color: transparent;
114 > span {
115 line-height: @app-icon-height;
116 > .t3-icon {
117 width: @app-icon-width;
118 height: @app-icon-height;
119 &:before {
120 line-height: @app-icon-height;
121 }
122 }
123 }
124 &:after {
125 display: none;
126 }
127 }
128
129 // Module menu group and item titles
130 .typo3-module-menu-group-title,
131 .typo3-module-menu-item-title {
132 white-space: nowrap;
133 text-overflow: ellipsis;
134 padding-top: 7px;
135 display: block;
136 overflow: hidden;
137 *zoom: 1;
138 }
139 .typo3-module-menu-group-title {
140 padding-right: 20px;
141 .caret {
142 .transition(all 0.25s ease-in-out);
143 .rotate(90deg);
144 position: absolute;
145 top: 15px;
146 right: 18px;
147 }
148 }
149
150 // Module Group Expanded
151 .expanded {
152 .typo3-module-menu-group-title {
153 .caret {
154 .rotate(0deg);
155 }
156 }
157 }
158 }
159
160 // Module menu snapped
161 .typo3-module-menu-snapped {
162 .typo3-module-menu-group-container {
163 padding-right: 0;
164 }
165 .typo3-module-menu-item-link {
166 border-radius: 0;
167 }
168 .typo3-module-menu-group-title,
169 .typo3-module-menu-item-title {
170 display: none;
171 }
172 }