[TASK] Replace module icons with IconFactory
[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 > a .icon-size-default .icon-unify,
163 > a .icon-size-small .icon-unify {
164 line-height: 16px;
165 font-size: 16px;
166 }
167 }
168 .dropdown-toggle {
169 position: relative;
170 .badge {
171 display: none;
172 font-size: 10px;
173 min-width: 15px;
174 height: 15px;
175 position: absolute;
176 padding: 0;
177 border-radius: @border-radius-small;
178 line-height: 15px;
179 bottom: 5px;
180 right: 5px;
181 }
182 }
183 .dropdown-menu {
184 left: auto;
185 right: 0;
186 margin: 0;
187 z-index: 2000;
188 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
189 color: @topbar-dropdown-color;
190 background-color: @topbar-dropdown-bg;
191 border-color: @topbar-navigation-border-color;
192 border-top: 1px solid lighten(@topbar-navigation-border-color, 20%);
193 border-left: 0;
194 border-right: 0;
195 border-radius: 0 0 @border-radius-small @border-radius-small;
196 .box-shadow(0px 3px 0px rgba(0, 0, 0, 0.15));
197 a {
198 color: @topbar-dropdown-link-color;
199 white-space: nowrap;
200 }
201 > *:last-child {
202 margin-bottom: 0;
203 }
204 }
205 .dropdown-list {
206 .list-unstyled();
207 > li {
208 .clearfix();
209 position: relative;
210 &.active .dropdown-list-link {
211 background-color: @topbar-dropdown-link-active-bg;
212 color: @topbar-dropdown-link-active-color;
213 }
214 }
215 > li + li {
216 margin-top: 1px;
217 }
218 > li.divider + li {
219 margin-top: 0;
220 }
221 .divider {
222 border-top: 1px solid @topbar-navigation-border-color;
223 background-color: lighten(@topbar-navigation-border-color, 10%);
224 margin: (@topbar-dropdown-padding / 2) -@topbar-dropdown-padding;
225 padding: 1px 0 0;
226 }
227 .modlink {
228 .clearfix();
229 width: 210px;
230 .submodule-icon {
231 float: left;
232 margin-right: 10px;
233 }
234 .submodule-label {
235 white-space: nowrap;
236 text-overflow: ellipsis;
237 padding-top: 5px;
238 display: block;
239 overflow: hidden;
240 *zoom: 1;
241 }
242 }
243 .dropdown-header {
244 font-size: 1em;
245 margin-left: -@topbar-dropdown-padding;
246 margin-right: -@topbar-dropdown-padding;
247 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
248 }
249 .dropdown-intro,
250 .dropdown-info {
251 color: darken(@topbar-color, 20%);
252 margin-left: -@topbar-dropdown-padding;
253 margin-right: -@topbar-dropdown-padding;
254 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
255 }
256 .dl-horizontal {
257 dt {
258 width: 140px;
259 text-align: left;
260 font-weight: normal;
261 }
262 dd {
263 margin-left: 150px;
264 width: 170px;
265 }
266 }
267 }
268 .dropdown-list-link {
269 max-width: 300px;
270 overflow: hidden;
271 text-overflow: ellipsis;
272 display: block;
273 text-decoration: none;
274 cursor: pointer;
275 white-space: nowrap;
276 color: @topbar-dropdown-link-color;
277 margin-left: -@topbar-dropdown-padding;
278 margin-right: -@topbar-dropdown-padding;
279 padding: (@topbar-dropdown-padding / 4) @topbar-dropdown-padding;
280 &:hover {
281 color: @topbar-dropdown-link-hover-color;
282 background-color: @topbar-dropdown-link-hover-bg;
283 }
284 .badge {
285 background-color: @brand-danger;
286 color: @btn-danger-color;
287 }
288 }
289 .dropdown-list-link-edit,
290 .dropdown-list-link-delete,
291 .dropdown-list-link-close {
292 position: absolute;
293 top: 0;
294 bottom: 0;
295 right: -(@topbar-dropdown-padding / 2);
296 padding: 0;
297 text-align: center;
298 line-height: 26px;
299 width: 26px;
300 height: 26px;
301 &:hover {
302 color: @topbar-dropdown-link-hover-color;
303 background-color: @topbar-dropdown-link-hover-bg;
304 }
305 }
306 .dropdown-list-link-edit {
307 right: 18px;
308 }
309 .dropdown-list-link-delete,
310 .dropdown-list-link-close {
311 &:hover {
312 color: @topbar-dropdown-link-hover-color;
313 background-color: @btn-danger-bg;
314 }
315 }
316 .dropdown-link-list-add-close {
317 padding-right: 50px;
318 }
319 .dropdown-link-list-add-editdelete {
320 padding-right: 85px;
321 }
322 .topbar-workspaces-title {
323 margin-left: 3px;
324 }
325 }
326
327 // Navigation Search
328 .typo3-topbar-navigation-search {
329 position: relative;
330 padding: 0;
331 margin: 0;
332 .form-group {
333 margin-top: 0;
334 margin-bottom: 0;
335 &:before {
336 content: "\f002";
337 font: normal normal normal 14px/1 FontAwesome;
338 position: absolute;
339 top: 50%;
340 left: 15px;
341 margin-top: -8px;
342 z-index: 1;
343 }
344 }
345 .form-control {
346 background-color: @tobar-navigation-search-bg;
347 color: @topbar-navigation-color;
348 height: @topbar-height;
349 width: 300px;
350 padding: 14px 30px 13px 35px;
351 border: none;
352 border-left: 1px solid lighten(@topbar-navigation-border-color, 10%);
353 border-radius: 0;
354 &:hover {
355 border-left-color: lighten(@topbar-navigation-border-color, 15%);
356 background-color: @tobar-navigation-search-hover-bg;
357 }
358 &:focus {
359 outline: none;
360 border-left-color: lighten(@topbar-navigation-border-color, 25%);
361 background-color: @tobar-navigation-search-focus-bg;
362 .box-shadow(none);
363 }
364 + .t3-icon {
365 text-align: center;
366 position: absolute;
367 top: 50%;
368 right: 15px;
369 margin-right: 0;
370 margin-top: -8px;
371 }
372 }
373 .dropdown-menu {
374 left: auto!important; // Needs to be important to override inline styes of typeahead
375 width: 350px;
376 }
377 .dropdown-list-link {
378 max-width: none;
379 .typeahead-highlight {
380 font-weight: normal;
381 }
382 }
383 }