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