6a24d5d02483a2bd3362368d5b22f44058407488
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / 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 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
183 color: @topbar-dropdown-color;
184 background-color: @topbar-dropdown-bg;
185 border-color: @topbar-navigation-border-color;
186 border-top: 1px solid lighten(@topbar-navigation-border-color, 20%);
187 border-left: 0;
188 border-right: 0;
189 border-radius: 0 0 @border-radius-small @border-radius-small;
190 .box-shadow(0px 3px 0px rgba(0, 0, 0, 0.15));
191 a {
192 color: @topbar-dropdown-link-color;
193 white-space: nowrap;
194 }
195 > *:last-child {
196 margin-bottom: 0;
197 }
198 }
199 .dropdown-list {
200 .list-unstyled();
201 > li {
202 .clearfix();
203 position: relative;
204 &.active .dropdown-list-link {
205 background-color: @topbar-dropdown-link-active-bg;
206 color: @topbar-dropdown-link-active-color;
207 }
208 }
209 > li + li {
210 margin-top: 1px;
211 }
212 > li.divider + li {
213 margin-top: 0;
214 }
215 .divider {
216 border-top: 1px solid @topbar-navigation-border-color;
217 background-color: lighten(@topbar-navigation-border-color, 10%);
218 margin: (@topbar-dropdown-padding / 2) -@topbar-dropdown-padding;
219 padding: 1px 0 0;
220 }
221 .modlink {
222 .clearfix();
223 width: 210px;
224 .submodule-icon {
225 float: left;
226 margin-right: 10px;
227 }
228 .submodule-label {
229 white-space: nowrap;
230 text-overflow: ellipsis;
231 padding-top: 5px;
232 display: block;
233 overflow: hidden;
234 *zoom: 1;
235 }
236 }
237 .dropdown-header {
238 font-size: 1em;
239 margin-left: -@topbar-dropdown-padding;
240 margin-right: -@topbar-dropdown-padding;
241 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
242 }
243 }
244 .dropdown-list-link {
245 max-width: 300px;
246 overflow: hidden;
247 text-overflow: ellipsis;
248 display: block;
249 text-decoration: none;
250 cursor: pointer;
251 white-space: nowrap;
252 color: @topbar-dropdown-link-color;
253 margin-left: -@topbar-dropdown-padding;
254 margin-right: -@topbar-dropdown-padding;
255 padding: (@topbar-dropdown-padding / 4) @topbar-dropdown-padding;
256 &:hover {
257 color: @topbar-dropdown-link-hover-color;
258 background-color: @topbar-dropdown-link-hover-bg;
259 }
260 }
261 .dropdown-list-link-edit,
262 .dropdown-list-link-delete,
263 .dropdown-list-link-close {
264 display: table;
265 position: absolute;
266 top: 0;
267 bottom: 0;
268 right: -(@topbar-dropdown-padding / 2);
269 padding: 0;
270 text-align: center;
271 width: 26px;
272 height: 26px;
273 .t3-icon {
274 display: table-cell;
275 margin: 0;
276 height: auto;
277 width: auto;
278 }
279 &:hover {
280 color: @topbar-dropdown-link-hover-color;
281 background-color: @topbar-dropdown-link-hover-bg;
282 }
283 }
284 .dropdown-list-link-edit {
285 right: 18px;
286 }
287 .dropdown-list-link-delete,
288 .dropdown-list-link-close {
289 &:hover {
290 color: @topbar-dropdown-link-hover-color;
291 background-color: @btn-danger-bg;
292 }
293 }
294 .dropdown-link-list-add-close {
295 padding-right: 50px;
296 }
297 .dropdown-link-list-add-editdelete {
298 padding-right: 85px;
299 }
300 .topbar-workspaces-title {
301 margin-left: 3px;
302 }
303 }
304
305 // Navigation Search
306 .typo3-topbar-navigation-search {
307 position: relative;
308 padding: 0;
309 margin: 0;
310 .form-group {
311 &:before {
312 content: "\f002";
313 font: normal normal normal 14px/1 FontAwesome;
314 position: absolute;
315 top: 50%;
316 left: 15px;
317 margin-top: -8px;
318 z-index: 1;
319 }
320 }
321 .form-control {
322 box-sizing: content-box;
323 background-color: @tobar-navigation-search-bg;
324 color: @topbar-navigation-color;
325 height: @topbar-height - 27px;
326 padding: 14px 30px 13px 35px;
327 border: none;
328 border-left: 1px solid lighten(@topbar-navigation-border-color, 10%);
329 border-radius: 0;
330 &:hover {
331 border-left-color: lighten(@topbar-navigation-border-color, 15%);
332 background-color: @tobar-navigation-search-hover-bg;
333 }
334 &:focus {
335 outline: none;
336 border-left-color: lighten(@topbar-navigation-border-color, 15%);
337 background-color: @tobar-navigation-search-focus-bg;
338 .box-shadow(none);
339 }
340 + .t3-icon {
341 text-align: center;
342 position: absolute;
343 top: 50%;
344 right: 15px;
345 margin-right: 0;
346 margin-top: -8px;
347 }
348 }
349 }
350
351 // Livesearch
352 .live-search-list {
353 .typo3-topbar-navigation-items .dropdown-menu();
354 right: auto;
355 padding: 0;
356 .x-toolbar {
357 padding: 0;
358 border: none;
359 background: transparent;
360 }
361 .x-combo-list-hd,
362 .x-combo-list-inner,
363 .x-combo-list-ft {
364 border: none;
365 background: transparent;
366 color: @topbar-dropdown-color;
367 padding: @topbar-dropdown-padding;
368 }
369 .x-combo-list-hd {
370 background-color: lighten(@topbar-dropdown-bg,3%);
371 border-top: 0;
372 border-bottom: 1px solid @topbar-navigation-border-color;
373 }
374 .x-combo-list-ft {
375 padding-top: 0;
376 border-bottom: 0;
377 }
378 .x-combo-list-inner {
379 padding-right: 0;
380 border-top: 1px solid lighten(@topbar-navigation-border-color, 10%);
381 }
382 .x-btn {
383 background: none;
384 border: none;
385 color: inherit;
386 .x-btn-tl,
387 .x-btn-tc,
388 .x-btn-tr,
389 .x-btn-ml,
390 .x-btn-mr,
391 .x-btn-bl,
392 .x-btn-bc,
393 .x-btn-br {
394 display: none;
395 }
396 button {
397 .btn();
398 .btn-sm();
399 .btn-default();
400 height: auto!important;
401 }
402 }
403 .search-item-type {
404 padding: 5px 20px 5px 0;
405 white-space: nowrap;
406 }
407 .search-item-title {
408 border-radius: 2px 0 0 2px;
409 padding: 5px 20px 5px 10px;
410 &.x-combo-selected {
411 border: none!important;
412 background-color: lighten(@topbar-dropdown-bg, 10%);
413 }
414 }
415 }
416 .search-list-help-content {
417 padding: @topbar-dropdown-padding;
418 strong {
419 display: block;
420 margin-bottom: 0.5em;
421 }
422 p {
423 margin-top: 0.5em;
424 margin-bottom: 0;
425 }
426 }