[BUGFIX] Correct icon alignment
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _topbar.less
1 //
2 // Topbar
3 //
4
5 @topbar-color: #ddd;
6 @topbar-height: 45px;
7 @topbar-zindex: @zindex-navbar;
8 @topbar-bg: @navbar-inverse-bg;
9
10 @topbar-navigation-color: @topbar-color;
11 @topbar-navigation-bg: #222;
12 @topbar-navigation-border-color: #111;
13
14 @topbar-dropdown-padding: 16px;
15 @topbar-dropdown-color: @topbar-navigation-color;
16 @topbar-dropdown-bg: @topbar-navigation-bg;
17
18 @topbar-dropdown-link-bg: @topbar-navigation-bg;
19 @topbar-dropdown-link-color: #ddd;
20 @topbar-dropdown-link-hover-bg: #333;
21 @topbar-dropdown-link-hover-color: #fff;
22 @topbar-dropdown-link-active-bg: lighten(@topbar-dropdown-bg, 15%);
23 @topbar-dropdown-link-active-color: #fff;
24
25 @tobar-navigation-search-bg: @topbar-navigation-bg;
26 @tobar-navigation-search-hover-bg: @topbar-dropdown-link-hover-bg;
27 @tobar-navigation-search-focus-bg: @topbar-dropdown-link-active-bg;
28
29
30 // HOTFIX SCAFFOLDING
31 [id="typo3-topbar"],
32 [id="typo3-topbar"] .x-panel-body {
33 min-width: 1000px;
34 }
35
36 // Topbar
37 [id="typo3-topbar"]{
38 height: @topbar-height;
39 position: relative;
40 background-color: @topbar-bg;
41 color: @topbar-color;
42 .x-panel-bwrap,
43 .x-panel-body {
44 overflow: visible;
45 }
46 }
47 .typo3-in-workspace [id="typo3-topbar"] {
48 background-color: #6d860d;
49 .typo3-topbar-site-name {
50 color: #fff;
51 }
52 }
53
54 // Container
55 .typo3-topbar-container {
56 .user-select(none);
57 height: @topbar-height;
58 position: relative;
59 }
60
61 // Site
62 .typo3-topbar-site {
63 display: table;
64 padding: 0;
65 height: @navbar-height;
66 float: left;
67 }
68 .typo3-topbar-site-logo,
69 .typo3-topbar-site-name {
70 display: table-cell;
71 vertical-align: middle;
72 text-align: center;
73 }
74 .typo3-topbar-site-logo {
75 background-color: @topbar-bg;
76 width: 51px;
77 .box-shadow(2px 0px 0px rgba(0, 0, 0, 0.15));
78 &:hover {
79 background-color: @tobar-navigation-search-hover-bg;
80 }
81 > img {
82 max-height: 50px;
83 }
84 }
85 .typo3-topbar-site-name {
86 cursor: default;
87 padding: 0 (@grid-gutter-width / 2);
88 }
89
90
91 // Shared
92 .typo3-topbar-navigation {
93 color: @topbar-navigation-color;
94 background-color: @topbar-navigation-bg;
95 float: right;
96 // Shortcut
97 .shortcut {
98 min-width: 180px;
99 }
100 .shortcut-form {
101 padding: @topbar-dropdown-padding;
102 margin: (@topbar-dropdown-padding / 4) -@topbar-dropdown-padding;
103 border-top: 1px solid lighten(@topbar-navigation-border-color,15%);
104 background-color: lighten(@topbar-navigation-border-color,10%);
105 border-bottom: 1px solid @topbar-navigation-border-color;
106 }
107 }
108
109
110 // Navigation Items
111 .typo3-topbar-navigation-items {
112 height: @topbar-height;
113 margin-bottom: 0;
114 padding-left: 0;
115 list-style: none;
116 float: left;
117 a {
118 color: @topbar-navigation-color;
119 text-decoration: none;
120 }
121 > li {
122 float: left;
123 height: @topbar-height;
124 > a {
125 position: relative;
126 display: block;
127 padding: @navbar-padding-vertical 10px;
128 border-left: 1px solid lighten(@topbar-navigation-border-color,10%);
129 border-right: 1px solid @topbar-navigation-border-color;
130 &:hover,
131 &:focus,
132 &:active {
133 color: @topbar-dropdown-link-hover-color;
134 background-color: @topbar-dropdown-link-hover-bg;
135 border-left-color: lighten(@topbar-dropdown-link-hover-bg,3%)
136 }
137 }
138 }
139 > li.open {
140 > a {
141 color: @topbar-dropdown-link-active-color;
142 background-color: @topbar-dropdown-link-active-bg;
143 border-left-color: lighten(@topbar-dropdown-link-active-bg,3%);
144 }
145 }
146 }
147
148 // Dropdown
149 .typo3-topbar-navigation-items {
150 .dropdown {
151 min-width: @topbar-height;
152 text-align: center;
153 > a > .fa {
154 font-size: 16px;
155 margin: 0;
156 display: inline-block;
157 position: relative;
158 vertical-align: middle;
159 width: auto;
160 height: auto;
161 }
162 }
163 .dropdown-toggle {
164 position: relative;
165 .badge {
166 display: none;
167 font-size: 10px;
168 min-width: 15px;
169 height: 15px;
170 position: absolute;
171 padding: 0;
172 border-radius: @border-radius-small;
173 line-height: 15px;
174 bottom: 5px;
175 right: 5px;
176 }
177 }
178 .dropdown-menu {
179 left: auto;
180 right: 0;
181 margin: 0;
182 z-index: 2000;
183 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
184 color: @topbar-dropdown-color;
185 background-color: @topbar-dropdown-bg;
186 border-color: @topbar-navigation-border-color;
187 border-top: 1px solid lighten(@topbar-navigation-border-color, 20%);
188 border-left: 0;
189 border-right: 0;
190 border-radius: 0 0 @border-radius-small @border-radius-small;
191 .box-shadow(0px 3px 0px rgba(0, 0, 0, 0.15));
192 a {
193 color: @topbar-dropdown-link-color;
194 white-space: nowrap;
195 }
196 > *:last-child {
197 margin-bottom: 0;
198 }
199 }
200 .dropdown-list {
201 .list-unstyled();
202 > li {
203 .clearfix();
204 position: relative;
205 &.active .dropdown-list-link {
206 background-color: @topbar-dropdown-link-active-bg;
207 color: @topbar-dropdown-link-active-color;
208 }
209 }
210 > li + li {
211 margin-top: 1px;
212 }
213 > li.divider + li {
214 margin-top: 0;
215 }
216 .divider {
217 border-top: 1px solid @topbar-navigation-border-color;
218 background-color: lighten(@topbar-navigation-border-color, 10%);
219 margin: (@topbar-dropdown-padding / 2) -@topbar-dropdown-padding;
220 padding: 1px 0 0;
221 }
222 .modlink {
223 .clearfix();
224 width: 210px;
225 .submodule-icon {
226 float: left;
227 margin-right: 10px;
228 }
229 .submodule-label {
230 white-space: nowrap;
231 text-overflow: ellipsis;
232 padding-top: 5px;
233 display: block;
234 overflow: hidden;
235 *zoom: 1;
236 }
237 }
238 .dropdown-header {
239 font-size: 1em;
240 margin-left: -@topbar-dropdown-padding;
241 margin-right: -@topbar-dropdown-padding;
242 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
243 }
244 .dropdown-intro,
245 .dropdown-info {
246 color: darken(@topbar-color, 20%);
247 margin-left: -@topbar-dropdown-padding;
248 margin-right: -@topbar-dropdown-padding;
249 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
250 }
251 .dl-horizontal {
252 dt {
253 width: 140px;
254 text-align: left;
255 font-weight: normal;
256 }
257 dd {
258 margin-left: 150px;
259 width: 170px;
260 }
261 }
262 }
263 .dropdown-list-link {
264 max-width: 300px;
265 overflow: hidden;
266 text-overflow: ellipsis;
267 display: block;
268 text-decoration: none;
269 cursor: pointer;
270 white-space: nowrap;
271 color: @topbar-dropdown-link-color;
272 margin-left: -@topbar-dropdown-padding;
273 margin-right: -@topbar-dropdown-padding;
274 padding: (@topbar-dropdown-padding / 4) @topbar-dropdown-padding;
275 &:hover {
276 color: @topbar-dropdown-link-hover-color;
277 background-color: @topbar-dropdown-link-hover-bg;
278 }
279 .badge {
280 background-color: @brand-danger;
281 color: @btn-danger-color;
282 }
283 }
284 .dropdown-list-link-edit,
285 .dropdown-list-link-delete,
286 .dropdown-list-link-close {
287 position: absolute;
288 top: 0;
289 bottom: 0;
290 right: -(@topbar-dropdown-padding / 2);
291 padding: 0;
292 text-align: center;
293 line-height: 26px;
294 width: 26px;
295 height: 26px;
296 &:hover {
297 color: @topbar-dropdown-link-hover-color;
298 background-color: @topbar-dropdown-link-hover-bg;
299 }
300 }
301 .dropdown-list-link-edit {
302 right: 18px;
303 }
304 .dropdown-list-link-delete,
305 .dropdown-list-link-close {
306 &:hover {
307 color: @topbar-dropdown-link-hover-color;
308 background-color: @btn-danger-bg;
309 }
310 }
311 .dropdown-link-list-add-close {
312 padding-right: 50px;
313 }
314 .dropdown-link-list-add-editdelete {
315 padding-right: 85px;
316 }
317 .topbar-workspaces-title {
318 margin-left: 3px;
319 }
320 }
321
322 // Navigation Search
323 .typo3-topbar-navigation-search {
324 position: relative;
325 padding: 0;
326 margin: 0;
327 .form-group {
328 margin-top: 0;
329 margin-bottom: 0;
330 &:before {
331 content: "\f002";
332 font: normal normal normal 14px/1 FontAwesome;
333 position: absolute;
334 top: 50%;
335 left: 15px;
336 margin-top: -8px;
337 z-index: 1;
338 }
339 }
340 .form-control {
341 background-color: @tobar-navigation-search-bg;
342 color: @topbar-navigation-color;
343 height: @topbar-height;
344 width: 300px;
345 padding: 14px 30px 13px 35px;
346 border: none;
347 border-left: 1px solid lighten(@topbar-navigation-border-color, 10%);
348 border-radius: 0;
349 &:hover {
350 border-left-color: lighten(@topbar-navigation-border-color, 15%);
351 background-color: @tobar-navigation-search-hover-bg;
352 }
353 &:focus {
354 outline: none;
355 border-left-color: lighten(@topbar-navigation-border-color, 25%);
356 background-color: @tobar-navigation-search-focus-bg;
357 .box-shadow(none);
358 }
359 + .t3-icon {
360 text-align: center;
361 position: absolute;
362 top: 50%;
363 right: 15px;
364 margin-right: 0;
365 margin-top: -8px;
366 }
367 }
368 .dropdown-menu {
369 left: auto!important; // Needs to be important to override inline styes of typeahead
370 width: 350px;
371 }
372 .dropdown-list-link {
373 max-width: none;
374 .typeahead-highlight {
375 font-weight: normal;
376 }
377 }
378 }