dolibarr 21.0.0-beta
dropdown.inc.php
1<?php
2if (!defined('ISLOADEDBYSTEELSHEET')) {
3 die('Must be call by steelsheet');
4}
5
6// When no photo, we show the login name, so we need an offset to output picto at a fixed position.
7$atoploginusername = empty($user->photo) ? 52 : 0;
8
9?>
10/* <style type="text/css" > don't remove this line it's an ide hack */
11/*
12 * Dropdown of user popup
13 */
14
15.bookmark-footer a.top-menu-dropdown-link {
16 white-space: normal;
17 word-break: break-word;
18}
19
20button.dropdown-item.global-search-item {
21 outline: none;
22}
23
24.open>.dropdown-search, .open>.dropdown-bookmark, .open>.dropdown-menu, .dropdown dd ul.open {
25 display: block;
26}
27
28
29#topmenu-global-search-dropdown a.login-dropdown-a,
30#topmenu-quickadd-dropdown a.login-dropdown-a,
31#topmenu-bookmark-dropdown a.login-dropdown-a,
32#topmenu-uploadfile-dropdown a.login-dropdown-a {
33 color: var(--colortextbackhmenu);
34}
35
36div.login_block_tools > div {
37 position: fixed;
38 <?php echo $right; ?>: <?php print !getDolGlobalString('MAIN_OPTIMIZEFORTEXTBROWSER') ? (55 + $atoploginusername) : 85; ?>px;
39 top: 0px;
40}
41
42div#topmenu-login-dropdown {
43 position: fixed;
44 <?php echo $right; ?>: 10px;
45 top: 0px;
46}
47
48
49#topmenu-login-dropdown .dropdown-toggle:after {
50 display: none;
51}
52
53#topmenu-global-search-dropdown .dropdown-menu, #topmenu-quickadd-dropdown .dropdown-menu, #topmenu-bookmark-dropdown .dropdown-menu, #topmenu-login-dropdown .dropdown-menu {
54 min-width: 370px;
55 max-width: 400px;
56}
57
58button.dropdown-item.global-search-item {
59 outline: none;
60}
61
62.open>.dropdown-search, .open>.dropdown-quickadd, .open>.dropdown-bookmark, .open>.dropdown-menu{
63 display: block !important;
64}
65
66.dropdown-search {
67 border-color: #eee;
68
69 position: absolute;
70 top: 100%;
71 left: 0;
72 z-index: 1000;
73 display: none;
74 float: left;
75 min-width: 160px;
76 margin: 2px 0 0;
77 font-size: 14px;
78 text-align: left;
79 list-style: none;
80 background-color: #fff;
81 -webkit-background-clip: padding-box;
82 background-clip: padding-box;
83 border: 1px solid #ccc;
84 border: 1px solid rgba(0,0,0,.15);
85 border-radius: 4px;
86 -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
87 box-shadow: 0 6px 12px rgba(0,0,0,.175);
88}
89.dropdown-bookmark {
90 border-color: #eee;
91
92 position: absolute;
93 top: 100%;
94 left: 0;
95 z-index: 1000;
96 display: none;
97 float: left;
98 min-width: 160px;
99 margin: 2px 0 0;
100 font-size: 14px;
101 text-align: left;
102 list-style: none;
103 background-color: #fff;
104 -webkit-background-clip: padding-box;
105 background-clip: padding-box;
106 border: 1px solid #ccc;
107 border: 1px solid rgba(0,0,0,.15);
108 border-radius: 4px;
109 -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
110 box-shadow: 0 6px 12px rgba(0,0,0,.175);
111}
112.dropdown-menu {
113 border-color: #eee;
114
115 position: absolute;
116 top: 100%;
117 left: 0;
118 z-index: 1000;
119 display: none;
120 float: left;
121 min-width: 160px;
122 margin: 2px 0 0;
123 font-size: 14px;
124 text-align: left;
125 list-style: none;
126 background-color: #fff;
127 -webkit-background-clip: padding-box;
128 background-clip: padding-box;
129 border: 1px solid #ccc;
130 border: 1px solid rgba(0,0,0,.15);
131 border-radius: 4px;
132 -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
133 box-shadow: 0 6px 12px rgba(0,0,0,.175);
134}
135
136
137/* CSS to hide the arrow to show open/close */
138div#topmenu-global-search-dropdown, div#topmenu-quickadd-dropdown, div#topmenu-bookmark-dropdown {
139 padding-right: 2px;
140}
141div#topmenu-global-search-dropdown a::after, div#topmenu-quickadd-dropdown a::after, div#topmenu-bookmark-dropdown a::after {
142 display: none;
143}
144
145
146.dropdown-toggle{
147 text-decoration: none !important;
148}
149
150.dropdown-toggle::after {
151 /* font part */
152 font-family: "<?php echo getDolGlobalString('MAIN_FONTAWESOME_FAMILY', 'Font Awesome 5 Free'); ?>";
153 font-size: 0.7em;
154 line-height: 1.7em;
155 font-weight: 900;
156 font-style: normal;
157 font-variant: normal;
158 text-rendering: auto;
159 -webkit-font-smoothing: antialiased;
160 text-align:center;
161 text-decoration:none;
162 margin: auto 3px;
163 display: inline-block;
164 content: "\f078";
165
166 -webkit-transition: -webkit-transform .2s ease-in-out;
167 -ms-transition: -ms-transform .2s ease-in-out;
168 transition: transform .2s ease-in-out;
169}
170
171.open>.dropdown-toggle::after {
172 transform: rotate(180deg);
173}
174
175/*
176 * MENU Dropdown
177 */
178
179.login_block.usedropdown .logout-btn{
180 /* display: none; */
181}
182
183.tmenu .open.dropdown, .tmenu .open.dropdown {
184 background: rgba(0, 0, 0, 0.1);
185}
186.tmenu .dropdown-menu, .login_block .dropdown-menu {
187 position: absolute;
188 right: 0;
189 <?php echo $left; ?>: auto;
190 line-height:1.3em;
191}
192.tmenu .dropdown-menu, .login_block .dropdown-menu .user-body {
193 border-bottom-right-radius: 4px;
194 border-bottom-left-radius: 4px;
195}
196.user-body {
197 color: #333;
198}
199.side-nav-vert .user-menu .dropdown-menu {
200 border-top-right-radius: 0;
201 border-top-left-radius: 0;
202 padding: 1px 0 0 0;
203 border-top-width: 0;
204 width: 300px;
205}
206.side-nav-vert .user-menu .dropdown-menu {
207 margin-top: 0;
208 border-top-left-radius: 0;
209 border-top-right-radius: 0;
210}
211
212.side-nav-vert .user-menu .dropdown-menu > .user-header {
213 min-height: 100px;
214 padding: 10px;
215 text-align: center;
216 white-space: normal;
217}
218
219#topmenu-global-search-dropdown .dropdown-menu{
220 width: 300px;
221 max-width: 100%;
222}
223
224div#topmenu-global-search-dropdown,
225div#topmenu-quickadd-dropdown,
226div#topmenu-bookmark-dropdown,
227div#topmenu-uploadfile-dropdown,
228div#topmenu-login-dropdown {
229 <?php if ($disableimages) { ?>
230 line-height: 35px;
231 <?php } else { ?>
232 line-height: 46px;
233 <?php } ?>
234}
235a.top-menu-dropdown-link {
236 padding: 8px;
237}
238
239.dropdown-user-image {
240 border-radius: 50%;
241 vertical-align: middle;
242 z-index: 5;
243 height: 90px;
244 width: 90px;
245 border: 3px solid;
246 border-color: transparent;
247 border-color: rgba(255, 255, 255, 0.2);
248 max-width: 100%;
249 max-height :100%;
250}
251
252.dropdown-menu > .user-header{
253 background: rgb(--colorbackhmenu1);
254}
255
256
257
258.dropdown-menu .dropdown-header{
259 padding: 8px 10px 10px 10px;
260}
261
262.dropdown-menu > .user-footer {
263 background-color: #f9f9f9;
264 padding: 10px;
265}
266
267.user-footer:after {
268 clear: both;
269}
270
271
272.dropdown-menu > .bookmark-footer{
273 border-top: 1px solid #f0f0f0;
274 background-color: #f9f9f9;
275 padding: 10px;
276 text-align: start;
277}
278
279
280.dropdown-menu > .user-body, .dropdown-body{
281 padding: 15px;
282 border-bottom: 1px solid #f4f4f4;
283 border-top: 1px solid #f0f0f0;
284 white-space: normal;
285}
286
287.dropdown-menu > .bookmark-body, .dropdown-body{
288 padding: 10px 0;
289 overflow-y: auto;
290 max-height: 60vh ; /* fallback for browsers without support for calc() */
291 max-height: calc(90vh - 110px) ;
292 white-space: normal;
293}
294#topmenu-quickadd-dropdown .dropdown-menu > .bookmark-body, #topmenu-quickadd-dropdown .dropdown-body,
295#topmenu-bookmark-dropdown .dropdown-menu > .bookmark-body, #topmenu-bookmark-dropdown .dropdown-body {
296 max-height: 60vh ; /* fallback for browsers without support for calc() */
297 max-height: calc(90vh - 200px) ;
298}
299
300
301.dropdown-body::-webkit-scrollbar {
302 width: 8px;
303 }
304.dropdown-body::-webkit-scrollbar-thumb {
305 -webkit-border-radius: 0;
306 border-radius: 0;
307 /* background: rgb(<?php echo $colorbackhmenu1 ?>); */
308 background: #aaa;
309}
310.dropdown-body::-webkit-scrollbar-track {
311 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
312 -webkit-border-radius: 0;
313 border-radius: 0;
314}
315
316
317#topmenu-login-dropdown,
318#topmenu-quickadd-dropdown,
319#topmenu-bookmark-dropdown,
320#topmenu-global-search-dropdown,
321#topmenu-uploadfile-dropdown {
322 padding: 0 5px 0 5px;
323}
324#topmenu-login-dropdown a:hover{
325 text-decoration: none;
326}
327
328#topmenuloginmoreinfo-btn, #topmenulogincompanyinfo-btn {
329 display: block;
330 text-align: start;
331 color:#666;
332 cursor: pointer;
333}
334
335#topmenuloginmoreinfo, #topmenulogincompanyinfo {
336 display: none;
337 clear: both;
338 font-size: 0.95em;
339}
340
341a.dropdown-item {
342 text-align: start;
343}
344.dropdown-item.bookmark-item {
345 padding-left: 14px;
346 padding-right: 14px;
347}
348.dropdown-item.bookmark-item:before {
349 width: 20px;
350 padding-left: 2px;
351}
352
353.button-top-menu-dropdown {
354 display: inline-block;
355 padding: 6px 12px;
356 margin-bottom: 0;
357 font-size: 14px;
358 font-weight: 400;
359 line-height: 1.42857143;
360 text-align: center;
361 white-space: nowrap;
362 vertical-align: middle;
363 -ms-touch-action: manipulation;
364 touch-action: manipulation;
365 cursor: pointer;
366 -webkit-user-select: none;
367 -moz-user-select: none;
368 -ms-user-select: none;
369 user-select: none;
370 background-image: none;
371 border: 1px solid transparent;
372 border-radius: 4px;
373}
374
375.user-footer .button-top-menu-dropdown {
376 color: #666666;
377 border-radius: 0;
378 -webkit-box-shadow: none;
379 -moz-box-shadow: none;
380 box-shadow: none;
381 border-width: 1px;
382 background-color: #f4f4f4;
383 border-color: #ddd;
384}
385
386.dropdown-menu a.top-menu-dropdown-link {
387 color: rgb(<?php print $colortextlink; ?>) !important;
388 -webkit-box-shadow: none;
389 -moz-box-shadow: none;
390 box-shadow: none;
391 display: block;
392 margin: 5px 0px;
393}
394
395.dropdown-item {
396 display: block !important;
397 box-sizing: border-box;
398 width: 100%;
399 padding: .3em 1.5em .4em 1em;
400 clear: both;
401 font-weight: 400;
402 color: #212529 !important;
403 text-align: inherit;
404 background-color: transparent;
405 border: 0;
406
407 -webkit-box-shadow: none;
408 -moz-box-shadow: none;
409 box-shadow: none;
410}
411
412.dropdown-item::before {
413 /* font part */
414 font-family: "<?php echo getDolGlobalString('MAIN_FONTAWESOME_FAMILY', 'Font Awesome 5 Free'); ?>";
415 font-weight: 900;
416 font-style: normal;
417 font-variant: normal;
418 text-rendering: auto;
419 -webkit-font-smoothing: antialiased;
420 text-align:center;
421 text-decoration:none;
422 margin-<?php echo $right; ?>: 5px;
423 display: inline-block;
424 content: "\f0da";
425 color: rgba(0,0,0,0.3);
426}
427.multicompany-item::before {
428 content: none !important;
429}
430
431.dropdown-item.bookmark-item-external::before {
432 content: "\f35d";
433}
434
435.dropdown-item.active, .dropdown-item:hover, .dropdown-item:hover::before, .dropdown-item:hover span::before, .dropdown-item:focus, .dropdown-item:focus span::before {
436 color: #<?php echo $colortextbackhmenu; ?> !important;
437 text-decoration: none;
438 background: rgb(<?php echo $colorbackhmenu1 ?>);
439}
440
441
442/*
443 * SELECT FIELDS
444 */
445
446li.liinputsearch {
447 position: sticky;
448 display: block;
449 top: 0;
450 background: var(--colorbackbody);
451}
452
453
454/*
455 * SEARCH
456 */
457
458#topmenu-global-search-dropdown .dropdown-menu {
459 width: 310px !important;
460}
461
462.dropdown-search-input {
463 width: 100%;
464 padding: 10px 35px 10px 20px;
465
466 background-color: transparent;
467 font-size: 14px;
468 line-height: 16px;
469 box-sizing: border-box;
470
471
472 color: #575756;
473 background-color: transparent;
474 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
475 background-repeat: no-repeat;
476 background-size: 16px 16px;
477 background-position: 95% center;
478 border-radius: 50px;
479 border: 1px solid #c4c4c2 !important;
480 transition: all 250ms ease-in-out;
481 backface-visibility: hidden;
482 transform-style: preserve-3d;
483
484}
485
486.search-dropdown-body {
487 padding: unset;
488}
489
490.global-search-item {
491 font-size: 1.1em;
492 padding-top: 8px;
493 padding-bottom: 8px;
494}
495
496.global-search-item:before {
497 content: none;
498}
499
500.global-search-header {
501 color: #444 !important;
502}
503
504
505/*
506 * QUICK ADD
507 */
508
509#topmenu-quickadd-dropdown .dropdown-menu {
510 width: 310px;
511 color: #444;
512}
513
514.quickadd-body.dropdown-body {
515 padding: unset;
516}
517
518.quickadd-item {
519 font-size: 1.1em;
520 padding-top: 8px;
521 padding-bottom: 8px;
522}
523
524.quickadd-item:before {
525 content: none;
526}
527
528.quickadd-header {
529 color: #444 !important;
530}
531
532div.quickadd {
533 display: -ms-flexbox;
534 display: -webkit-flex;
535 display: flex;
536 -webkit-flex-direction: row;
537 -ms-flex-direction: row;
538 flex-direction: row;
539 -webkit-flex-wrap: wrap;
540 -ms-flex-wrap: wrap;
541 flex-wrap: wrap;
542 -webkit-justify-content: center;
543 -ms-flex-pack: center;
544 justify-content: center;
545 -webkit-align-content: center;
546 -ms-flex-line-pack: center;
547 align-content: center;
548 -webkit-align-items: flex-start;
549 -ms-flex-align: start;
550 align-items: flex-start;
551}
552
553div.quickadd a {
554 color: #444;
555}
556
557div.quickadd a:hover, div.quickadd a:active {
558 color: #000000;
559}
560
561div.quickaddblock {
562 width: 95px;
563 height: 80px;
564}
565
566div.quickaddblock:hover,
567div.quickaddblock:active,
568div.quickaddblock:focus {
569 background: <?php print $colorbacklinepair1; ?>;
570}
571
572
573/* for the dropdown on action buttons */
574.dropdown-holder {
575 position: relative;
576 display: inline-block;
577}
578
579.dropdown-content {
580 display: none;
581 position: absolute;
582 z-index: 1;
583 width: 300px;
584 right:0;
585 bottom: 0;
586 transform: translateY(100%);
587
588 background: #fff;
589 border: 1px solid #bbb;
590 text-align: <?php echo $left; ?>;
591 -webkit-box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
592 box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
593}
594
595/* dropdown --up variant */
596.dropdown-holder.--up .dropdown-content{
597 bottom: auto;
598 top: 0;
599 transform: translateY(-100%);
600}
601
602/* dropdown --left variant */
603.dropdown-holder.--left .dropdown-content{
604 right: auto;
605 left: 12px;
606}
607
608
609.dropdown-content a {
610 margin-right: auto !important;
611 margin-left: auto !important;
612}
613.dropdown-content .butAction {
614 background: none;
615 color: #000 !important;
616}
617.dropdown-content a:is(.butAction,.butActionDelete,.butActionRefused) {
618 display: flex;
619 border-radius: 0;
620}
621.dropdown-content .butAction:hover {
622 box-shadow: none;
623 background-color: var(--butactionbg);
624 color: var(--textbutaction) !important;
625 text-decoration: none;
626}
627
628.dropdown-content .butActionDelete{
629 background-color: transparent !important;
630 color: #633 !important;
631}
632.dropdown-content .butActionDelete:hover {
633 box-shadow: none;
634 background-color: var(--butactiondeletebg) !important;
635 color: #633 !important;
636 text-decoration: none;
637}
638
639.dropdown-content .butActionRefused {
640 margin-left: 0;
641 margin-right: 0;
642 border: none;
643}
644
645.dropdown-holder.open .dropdown-content {
646 display: block;
647}
648
649
651.dropdown-holder.open .dropdown-content::before {
652 --triangleBorderSize : 5px;
653 position: absolute;
654 content: "";
655 top: calc(var(--triangleBorderSize) * -1);
656 right: 12px;
657 width: 0px;
658 height: 0px;
659 border-style: solid;
660 border-width: 0 var(--triangleBorderSize) var(--triangleBorderSize) var(--triangleBorderSize);
661 border-color: transparent transparent #ffff transparent;
662 transform: rotate(0deg);
663}
664
665/* dropdown --up variant*/
666.dropdown-holder.--up.open .dropdown-content::before{
667 top: auto;
668 bottom: calc(var(--triangleBorderSize) * -1);
669 border-width: 0 var(--triangleBorderSize) var(--triangleBorderSize) var(--triangleBorderSize);
670 transform: rotate(180deg);
671}
672
673/* dropdown --left variant*/
674.dropdown-holder.--left.open .dropdown-content::before{
675 right: auto;
676 left: 12px;
677}
678
679
680/* smartphone */
681@media only screen and (max-width: 767px)
682{
683 div.login_block {
684 top: unset;
685 }
686
687 .userimg.atoplogin img.userphoto, .userimgatoplogin img.userphoto {
688 width: 16px;
689 height: 16px;
690 }
691 div#topmenu-login-dropdown {
692 height: 20px;
693 line-height: 20px;
694 }
695
696 #topmenu-login-dropdown .dropdown-menu {
697 min-width: 220px;
698 max-width: 360px;
699 }
700
701 div.login_block a .atoploginusername {
702 color: var(--colortextbackvmenu);
703 }
704
705
706 #topmenu-global-search-dropdown a.login-dropdown-a,
707 #topmenu-quickadd-dropdown a.login-dropdown-a,
708 #topmenu-bookmark-dropdown a.login-dropdown-a,
709 #topmenu-login-dropdown a.login-dropdown-a,
710 #topmenu-uploadfile-dropdown a.login-dropdown-a {
711 color: var(--colortextbackvmenu);
712 }
713
714 #topmenu-global-search-dropdown .dropdown-menu,
715 #topmenu-quickadd-dropdown .dropdown-menu,
716 #topmenu-bookmark-dropdown .dropdown-menu,
717 #topmenu-login-dropdown .dropdown-menu,
718 #topmenu-uploadfile-dropdown .dropdown-menu {
719 width: 100%;
720 min-width: unset;
721 }
722
723 div.login_block_tools > div {
724 position: unset;
725 }
726 div#topmenu-global-search-dropdown,
727 div#topmenu-quickadd-dropdown,
728 div#topmenu-bookmark-dropdown,
729 div#topmenu-uploadfile-dropdown,
730 div#topmenu-login-dropdown {
731 position: unset;
732 }
733
734 div#topmenu-global-search-dropdown,
735 div#topmenu-quickadd-dropdown,
736 div#topmenu-bookmark-dropdown,
737 div#topmenu-uploadfile-dropdown {
738 line-height: unset;
739 }
740
741 div.login_block_other {
742 padding-top: 2px;
743 }
744
745 ul.tmenu {
746 margin-right: 2px;
747 }
748}
749
750@media only screen and (max-width: 320px)
751{
752 .dropdown dd ul {
753 max-width: 270px; /* must always be 50 slower than width */
754 }
755}
756@media only screen and (max-width: 300px)
757{
758 .dropdown dd ul {
759 max-width: 250px;
760 }
761}
762@media only screen and (max-width: 280px)
763{
764 .dropdown dd ul {
765 max-width: 230px;
766 }
767}
768
769
770.dropdown-search-input::placeholder {
771 color: color(#575756);
772 letter-spacing: 1.5px;
773}
774
775.hidden-search-result{
776 display: none !important;
777}
print $object position
Definition edit.php:204
getDolGlobalString($key, $default='')
Return a Dolibarr global constant string value.
ui state ui widget content ui state ui widget header ui state a ui button
0 = Do not include form tag and submit button -1 = Do not include form tag but include submit button
$conf db user
Active Directory does not allow anonymous connections.
Definition repair.php:153