[BUGFIX] Break word without spaces in SystemInformation toolbar item
[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                                 word-wrap: break-word;
277                         }
278                 }
279         }
280         .dropdown-list-link {
281                 max-width: 300px;
282                 overflow: hidden;
283                 text-overflow: ellipsis;
284                 display: block;
285                 text-decoration: none;
286                 cursor: pointer;
287                 white-space: nowrap;
288                 color: @topbar-dropdown-link-color;
289                 margin-left: -@topbar-dropdown-padding;
290                 margin-right: -@topbar-dropdown-padding;
291                 padding: (@topbar-dropdown-padding / 4) @topbar-dropdown-padding;
292                 &:hover {
293                         color: @topbar-dropdown-link-hover-color;
294                         background-color: @topbar-dropdown-link-hover-bg;
295                 }
296                 .badge {
297                         background-color: @brand-danger;
298                         color: @btn-danger-color;
299                 }
300         }
301         .dropdown-list-link-edit,
302         .dropdown-list-link-delete,
303         .dropdown-list-link-close {
304                 position: absolute;
305                 top: 0;
306                 bottom: 0;
307                 right: -(@topbar-dropdown-padding / 2);
308                 padding: 0;
309                 text-align: center;
310                 line-height: 26px;
311                 width: 26px;
312                 height: 26px;
313                 &:hover {
314                         background-color: @topbar-dropdown-link-hover-bg;
315                 }
316         }
317         .dropdown-list-link-edit {
318                 right: 18px;
319         }
320         .dropdown-list-link-delete,
321         .dropdown-list-link-close {
322                 &:hover {
323                         background-color: @btn-danger-bg;
324                 }
325         }
326         .dropdown-link-list-add-close {
327                 padding-right: 50px;
328         }
329         .dropdown-link-list-add-editdelete {
330                 padding-right: 85px;
331         }
332         .topbar-workspaces-title {
333                 margin-left: 3px;
334         }
335 }
336
337 // Navigation Search
338 .typo3-topbar-navigation-search {
339         position: relative;
340         padding: 0;
341         margin: 0;
342         .form-group {
343                 margin-top: 0;
344                 margin-bottom: 0;
345                 &:before {
346                         content: "\f002";
347                         font: normal normal normal 14px/1 FontAwesome;
348                         position: absolute;
349                         top: 50%;
350                         left: 15px;
351                         margin-top: -8px;
352                         z-index: 1;
353                 }
354
355                 button.close {
356                         opacity: 1;
357                         color: @topbar-navigation-color;
358                         text-shadow: none;
359                 }
360         }
361         .form-control {
362                 background-color: @tobar-navigation-search-bg;
363                 color: @topbar-navigation-color;
364                 height: @topbar-height;
365                 width: 300px;
366                 padding: 14px 30px 13px 35px;
367                 border: none;
368                 border-left: 1px solid lighten(@topbar-navigation-border-color, 10%);
369                 border-radius: 0;
370                 &:hover {
371                         border-left-color: lighten(@topbar-navigation-border-color, 15%);
372                         background-color: @tobar-navigation-search-hover-bg;
373                 }
374                 &:focus {
375                         outline: none;
376                         border-left-color: lighten(@topbar-navigation-border-color, 25%);
377                         background-color: @tobar-navigation-search-focus-bg;
378                         .box-shadow(none);
379                 }
380                 + .t3-icon {
381                         text-align: center;
382                         position: absolute;
383                         top: 50%;
384                         right: 15px;
385                         margin-right: 0;
386                         margin-top: -8px;
387                 }
388         }
389         .dropdown-menu {
390                 left: auto!important; // Needs to be important to override inline styes of typeahead
391                 width: 350px;
392         }
393         .dropdown-list-link {
394                 max-width: none;
395                 .typeahead-highlight {
396                         font-weight: normal;
397                 }
398         }
399 }
400
401 // Bookmark dropdown menu
402 #typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem {
403   .dropdown-list {
404         max-height: (10 * (18px + (@topbar-dropdown-padding / 2) + 1px)); // 18px=12px font with line-height 1.5; 1px margin-top for padding; 10 rows
405         overflow: hidden;
406         overflow-y: auto;
407         padding-right: 10px;
408   }
409 }