[BUGFIX] Correct autosuggest when no result has been found
[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         .icon-color {
118                 fill: @topbar-navigation-color;
119         }
120         a {
121                 color: @topbar-navigation-color;
122                 text-decoration: none;
123         }
124         > li {
125                 float: left;
126                 height: @topbar-height;
127                 > a {
128                         position: relative;
129                         display: block;
130                         padding: @navbar-padding-vertical 10px;
131                         border-left: 1px solid lighten(@topbar-navigation-border-color,10%);
132                         border-right: 1px solid @topbar-navigation-border-color;
133                         &:hover,
134                         &:focus,
135                         &:active {
136                                 color: @topbar-dropdown-link-hover-color;
137                                 background-color: @topbar-dropdown-link-hover-bg;
138                                 border-left-color: lighten(@topbar-dropdown-link-hover-bg,3%)
139                         }
140                 }
141         }
142         > li.open {
143                 > a {
144                         color: @topbar-dropdown-link-active-color;
145                         background-color: @topbar-dropdown-link-active-bg;
146                         border-left-color: lighten(@topbar-dropdown-link-active-bg,3%);
147                 }
148         }
149 }
150
151 // Dropdown
152 .typo3-topbar-navigation-items {
153         .dropdown {
154                 min-width: @topbar-height;
155                 text-align: center;
156                 > a > .fa {
157                         font-size: 16px;
158                         margin: 0;
159                         display: inline-block;
160                         position: relative;
161                         vertical-align: middle;
162                         width: auto;
163                         height: auto;
164                 }
165                 > a .icon-size-default .icon-unify,
166                 > a .icon-size-small .icon-unify {
167                         line-height: 16px;
168                         font-size: 16px;
169                 }
170         }
171         .dropdown-toggle {
172                 position: relative;
173                 .badge {
174                         display: none;
175                         font-size: 10px;
176                         min-width: 15px;
177                         height: 15px;
178                         position: absolute;
179                         padding: 0;
180                         border-radius: @border-radius-small;
181                         line-height: 15px;
182                         bottom: 5px;
183                         right: 5px;
184                 }
185         }
186         .live-search-wrapper {
187                 &+ .dropdown-menu {
188                         width: 100%;
189                         .dropdown-list {
190                                 position: relative!important; // Needs to be important to override inline styles of autocomplete
191                         }
192                 }
193         }
194         .dropdown-menu {
195                 left: auto;
196                 right: 0;
197                 margin: 0;
198                 z-index: 2000;
199                 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
200                 color: @topbar-dropdown-color;
201                 background-color: @topbar-dropdown-bg;
202                 border-color: @topbar-navigation-border-color;
203                 border-top: 1px solid lighten(@topbar-navigation-border-color, 20%);
204                 border-left: 0;
205                 border-right: 0;
206                 border-radius: 0 0 @border-radius-small @border-radius-small;
207                 .box-shadow(0px 3px 0px rgba(0, 0, 0, 0.15));
208                 a {
209                         color: @topbar-dropdown-link-color;
210                         white-space: nowrap;
211                 }
212                 > *:last-child {
213                         margin-bottom: 0;
214                 }
215         }
216         .dropdown-list {
217                 .list-unstyled();
218                 > li {
219                         .clearfix();
220                         position: relative;
221                         &.active .dropdown-list-link {
222                                 background-color: @topbar-dropdown-link-active-bg;
223                                 color: @topbar-dropdown-link-active-color;
224                         }
225                 }
226                 > li + li {
227                         margin-top: 1px;
228                 }
229                 > li.divider + li {
230                         margin-top: 0;
231                 }
232                 .divider {
233                         border-top: 1px solid @topbar-navigation-border-color;
234                         background-color: lighten(@topbar-navigation-border-color, 10%);
235                         margin: (@topbar-dropdown-padding / 2) -@topbar-dropdown-padding;
236                         padding: 1px 0 0;
237                 }
238                 .modlink {
239                         .clearfix();
240                         width: 210px;
241                         .submodule-icon {
242                                 float: left;
243                                 margin-right: 10px;
244                         }
245                         .submodule-label {
246                                 white-space: nowrap;
247                                 text-overflow: ellipsis;
248                                 padding-top: 7px;
249                                 display: block;
250                                 overflow: hidden;
251                                 *zoom: 1;
252                         }
253                 }
254                 .dropdown-header {
255                         font-size: 1em;
256                         margin-left: -@topbar-dropdown-padding;
257                         margin-right: -@topbar-dropdown-padding;
258                         padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
259                 }
260                 .dropdown-intro,
261                 .dropdown-info {
262                         color: darken(@topbar-color, 20%);
263                         margin-left: -@topbar-dropdown-padding;
264                         margin-right: -@topbar-dropdown-padding;
265                         padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
266                 }
267                 .dl-horizontal {
268                         dt {
269                                 width: 140px;
270                                 text-align: left;
271                                 font-weight: normal;
272                         }
273                         dd {
274                                 margin-left: 150px;
275                                 width: 170px;
276                         }
277                 }
278         }
279         .dropdown-list-link {
280                 max-width: 300px;
281                 overflow: hidden;
282                 text-overflow: ellipsis;
283                 display: block;
284                 text-decoration: none;
285                 cursor: pointer;
286                 white-space: nowrap;
287                 color: @topbar-dropdown-link-color;
288                 margin-left: -@topbar-dropdown-padding;
289                 margin-right: -@topbar-dropdown-padding;
290                 padding: (@topbar-dropdown-padding / 4) @topbar-dropdown-padding;
291                 &:hover {
292                         color: @topbar-dropdown-link-hover-color;
293                         background-color: @topbar-dropdown-link-hover-bg;
294                 }
295                 .badge {
296                         background-color: @brand-danger;
297                         color: @btn-danger-color;
298                 }
299         }
300         .dropdown-list-link-edit,
301         .dropdown-list-link-delete,
302         .dropdown-list-link-close {
303                 position: absolute;
304                 top: 0;
305                 bottom: 0;
306                 right: -(@topbar-dropdown-padding / 2);
307                 padding: 0;
308                 text-align: center;
309                 line-height: 26px;
310                 width: 26px;
311                 height: 26px;
312                 &:hover {
313                         background-color: @topbar-dropdown-link-hover-bg;
314                 }
315         }
316         .dropdown-list-link-edit {
317                 right: 18px;
318         }
319         .dropdown-list-link-delete,
320         .dropdown-list-link-close {
321                 &:hover {
322                         background-color: @btn-danger-bg;
323                 }
324         }
325         .dropdown-link-list-add-close {
326                 padding-right: 50px;
327         }
328         .dropdown-link-list-add-editdelete {
329                 padding-right: 85px;
330         }
331         .topbar-workspaces-title {
332                 margin-left: 3px;
333         }
334 }
335
336 // Navigation Search
337 .typo3-topbar-navigation-search {
338         position: relative;
339         padding: 0;
340         margin: 0;
341         .form-group {
342                 margin-top: 0;
343                 margin-bottom: 0;
344                 &:before {
345                         content: "\f002";
346                         font: normal normal normal 14px/1 FontAwesome;
347                         position: absolute;
348                         top: 50%;
349                         left: 15px;
350                         margin-top: -8px;
351                         z-index: 1;
352                 }
353
354                 button.close {
355                         opacity: 1;
356                         color: @topbar-navigation-color;
357                         text-shadow: none;
358                 }
359         }
360         .form-control {
361                 background-color: @tobar-navigation-search-bg;
362                 color: @topbar-navigation-color;
363                 height: @topbar-height;
364                 width: 300px;
365                 padding: 14px 30px 13px 35px;
366                 border: none;
367                 border-left: 1px solid lighten(@topbar-navigation-border-color, 10%);
368                 border-radius: 0;
369                 &:hover {
370                         border-left-color: lighten(@topbar-navigation-border-color, 15%);
371                         background-color: @tobar-navigation-search-hover-bg;
372                 }
373                 &:focus {
374                         outline: none;
375                         border-left-color: lighten(@topbar-navigation-border-color, 25%);
376                         background-color: @tobar-navigation-search-focus-bg;
377                         .box-shadow(none);
378                 }
379                 + .t3-icon {
380                         text-align: center;
381                         position: absolute;
382                         top: 50%;
383                         right: 15px;
384                         margin-right: 0;
385                         margin-top: -8px;
386                 }
387         }
388         .dropdown-menu {
389                 left: auto!important; // Needs to be important to override inline styes of typeahead
390                 width: 350px;
391         }
392         .dropdown-list-link {
393                 max-width: none;
394                 .typeahead-highlight {
395                         font-weight: normal;
396                 }
397         }
398 }
399
400 // Bookmark dropdown menu
401 #typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem {
402   .dropdown-list {
403         max-height: (10 * (18px + (@topbar-dropdown-padding / 2) + 1px)); // 18px=12px font with line-height 1.5; 1px margin-top for padding; 10 rows
404         overflow: hidden;
405         overflow-y: auto;
406         padding-right: 10px;
407   }
408 }