PluginProbe
Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits / 3.1.2
Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits v3.1.2
3.2.2 3.2.3 3.2.1 3.2.0 3.1.9 3.1.8 3.1.7 3.1.6 3.1.5 3.1.4 3.1.3 3.1.2 3.1.1 3.1.0 3.0.9 trunk 1.0.6 1.0.7 1.0.8 1.0.9 1.1.0 1.1.1 1.1.3 1.1.4 1.1.5 All 174 releases
master-addons / assets / css / modules / megamenu.css

megamenu.css in Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits 3.1.2, at assets/css/modules/megamenu.css

820 lines 14.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .jltma-row {
2 display: flex;
3 flex-wrap: wrap;
4 margin-right: -15px;
5 margin-left: -15px;
6 }
7
8 [class*=jltma-col-] {
9 position: relative;
10 width: 100%;
11 padding-right: 15px;
12 padding-left: 15px;
13 }
14
15 @media (min-width: 768px) {
16 .jltma-col-1 {
17 flex: 0 0 8.333333%;
18 max-width: 8.333333%;
19 }
20 .jltma-col-2 {
21 flex: 0 0 16.666667%;
22 max-width: 16.666667%;
23 }
24 .jltma-col-3 {
25 -ms-flex: 0 0 25%;
26 flex: 0 0 25%;
27 max-width: 25%;
28 }
29 .jltma-col-4 {
30 flex: 0 0 33.333333%;
31 max-width: 33.333333%;
32 }
33 .jltma-col-5 {
34 flex: 0 0 41.666667%;
35 max-width: 41.666667%;
36 }
37 .jltma-col-6 {
38 flex: 0 0 50%;
39 max-width: 50%;
40 }
41 .jltma-col-7 {
42 flex: 0 0 58.333333%;
43 max-width: 58.333333%;
44 }
45 .jltma-col-8 {
46 flex: 0 0 66.666667%;
47 max-width: 66.666667%;
48 }
49 .jltma-col-9 {
50 flex: 0 0 75%;
51 max-width: 75%;
52 }
53 .jltma-col-10 {
54 flex: 0 0 83.333333%;
55 max-width: 83.333333%;
56 }
57 .jltma-col-11 {
58 flex: 0 0 91.666667%;
59 max-width: 91.666667%;
60 }
61 .jltma-col-12 {
62 flex: 0 0 100%;
63 max-width: 100%;
64 }
65 }
66 .float-left {
67 float: left;
68 }
69
70 .float-right {
71 float: right;
72 }
73
74 .jltma-modal {
75 display: flex;
76 align-items: center;
77 justify-content: center;
78 height: 100%;
79 width: 100%;
80 top: 0;
81 left: 0;
82 opacity: 0;
83 position: fixed;
84 z-index: -1;
85 }
86 .jltma-modal::before {
87 position: absolute;
88 content: "";
89 top: 0;
90 left: 0;
91 bottom: 0;
92 right: 0;
93 width: 100%;
94 height: 100%;
95 opacity: 0;
96 visibility: hidden;
97 transition: opacity 0.2s ease, visibility 0.2s ease;
98 }
99 .jltma-modal.show {
100 opacity: 1;
101 z-index: 9999;
102 }
103 .jltma-modal.show::before {
104 opacity: 1;
105 visibility: visible;
106 background-color: rgba(0, 0, 0, 0.75);
107 z-index: -1;
108 }
109 .jltma-modal.show .jltma-modal-content {
110 opacity: 1 !important;
111 visibility: visible !important;
112 }
113
114 #jltma_megamenu_modal .jltma-modal-content {
115 background-color: #fff;
116 max-width: 900px;
117 min-width: 768px;
118 overflow: hidden;
119 opacity: 0;
120 visibility: hidden;
121 transition: opacity 0.2s ease, visibility 0.2s ease;
122 }
123
124 #jltma_megamenu_modal .jltma-modal-dialog {
125 max-width: 900px;
126 }
127
128 .jltma-popup-contents button,
129 .jltma-pop-contents-head .jltma-save-btn {
130 background: transparent;
131 border: none;
132 color: #fff;
133 font-size: 14px;
134 font-weight: 700;
135 padding: 5px 10px;
136 text-transform: uppercase;
137 }
138
139 .jltma-pop-contents-head {
140 background: #6f10b5;
141 display: inline-block;
142 padding: 2rem 2rem;
143 width: 100%;
144 }
145
146 .jltma-modal-header {
147 border-bottom: none;
148 width: 100%;
149 }
150
151 .jltma-pop-contents-head button,
152 .jltma-pop-contents-head .jltma-save-btn {
153 border: 2px solid #fff;
154 }
155
156 .jltma-pop-contents-head .close-btn {
157 border-radius: 100%;
158 height: 45px;
159 width: 45px;
160 text-align: center;
161 }
162
163 .jltma-pop-contents-head .jltma-save-btn {
164 border-radius: 3rem;
165 padding: 0.75rem 2rem;
166 }
167
168 .jltma-pop-contents-padding {
169 padding: 1.5rem;
170 display: flex;
171 flex-wrap: wrap;
172 flex-direction: row;
173 }
174
175 .jltma-pop-contents-padding .jltma-tabs {
176 border: none;
177 border-right: 2px solid #e7e7f4;
178 flex-basis: 25%;
179 margin-top: 0;
180 /*text-align: right;*/
181 }
182
183 .jltma-pop-contents-padding .jltma-tabs .jltma-nav-item {
184 width: 100%;
185 margin-bottom: 2rem;
186 }
187
188 .jltma-pop-contents-padding .jltma-nav-item a {
189 border: none;
190 text-decoration: none;
191 color: #78909c;
192 font-size: 24px;
193 font-weight: 400;
194 margin-right: -2px;
195 padding: 2px 2rem;
196 position: relative;
197 }
198
199 .jltma-pop-contents-padding .jltma-nav-item a,
200 .jltma-pop-contents-head .close-btn {
201 box-shadow: none;
202 }
203
204 .jltma-pop-contents-padding .jltma-nav-item a:hover {
205 border: none;
206 }
207
208 .jltma-pop-contents-padding .jltma-nav-item a.active {
209 color: #393c3f;
210 font-weight: 500;
211 }
212
213 .jltma-pop-contents-padding .jltma-nav-item a.active:before {
214 content: "";
215 background: #4b00e7;
216 height: 100%;
217 width: 4px;
218 top: 0;
219 right: 0;
220 position: absolute;
221 }
222
223 .jltma-tab-pane {
224 padding: 20px 15px;
225 width: 100%;
226 }
227 .jltma-tab-pane .jltma-row {
228 margin: 0;
229 }
230 .jltma-tab-pane [class*=jltma-col-] {
231 margin-bottom: 15px;
232 padding: 0;
233 }
234
235 .jltma-popup-contents [type=button]:not(:disabled),
236 .jltma-popup-contents [type=reset]:not(:disabled),
237 .jltma-popup-contents [type=submit]:not(:disabled),
238 .jltma-popup-contents button:not(:disabled) {
239 cursor: pointer;
240 }
241
242 /* Switcher */
243 .jltma-switch-title {
244 color: #78909c;
245 display: block;
246 font-size: 18px;
247 font-weight: 500;
248 margin-bottom: 0.5rem;
249 }
250
251 .jltma-pop-content-inner .jltma-switch {
252 position: relative;
253 display: inline-block;
254 width: 90px;
255 height: 40px;
256 }
257
258 .jltma-pop-content-inner .custom-control.custom-switch {
259 overflow: hidden;
260 }
261
262 .jltma-pop-content-inner .jltma-switch input {
263 display: none;
264 }
265
266 .jltma-pop-content-inner .jltma-switch-slider {
267 position: absolute;
268 cursor: pointer;
269 overflow: hidden;
270 top: 0;
271 left: 0;
272 right: 0;
273 bottom: 0;
274 background-color: #e9e9ee;
275 -webkit-transition: 0.4s;
276 transition: 0.4s;
277 }
278
279 .jltma-pop-content-inner .is_enabled .jltma-switch-slider {
280 background-color: #49c66a;
281 }
282
283 .jltma-pop-content-inner .jltma-switch-slider:before {
284 position: absolute;
285 z-index: 2;
286 content: "";
287 height: 36px;
288 width: 36px;
289 left: 2px;
290 bottom: 2px;
291 background-color: #fff;
292 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
293 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
294 -webkit-transition: 0.4s;
295 transition: all 0.4s ease-in-out;
296 }
297
298 .jltma-pop-content-inner .jltma-switch-slider:after {
299 position: absolute;
300 left: 3px;
301 z-index: 1;
302 content: "YES";
303 color: #fff;
304 font-size: 14px;
305 font-weight: 500;
306 line-height: 40px;
307 padding-left: 0;
308 width: 45px;
309 height: 40px;
310 border-radius: 100px;
311 /* background-color: #ff6418;
312 -webkit-transform: translateX(-90px);
313 -ms-transform: translateX(-90px);
314 transform: translateX(-90px); */
315 transition: all 0.4s ease-in-out;
316 }
317
318 input:checked + .jltma-switch-slider:after {
319 -webkit-transform: translateX(0px);
320 -ms-transform: translateX(0px);
321 transform: translateX(0px);
322 text-align: center;
323 }
324
325 input:checked + .jltma-switch-slider:before {
326 background-color: #fff;
327 }
328
329 input:checked + .jltma-switch-slider:before {
330 -webkit-transform: translateX(50px);
331 -ms-transform: translateX(50px);
332 transform: translateX(50px);
333 }
334
335 /* Rounded sliders */
336 .jltma-pop-content-inner .jltma-switch-slider.round {
337 border-radius: 100px;
338 }
339
340 .jltma-pop-content-inner .jltma-switch-slider.round:before {
341 border-radius: 50%;
342 }
343
344 .jltma-absolute-no {
345 color: #c8cfd6;
346 position: absolute;
347 right: 15px;
348 color: darkslategrey;
349 text-align: right !important;
350 font-size: 14px;
351 font-weight: 500;
352 width: calc(100% - 25px);
353 height: 46px;
354 line-height: 40px;
355 cursor: pointer;
356 }
357
358 .jltma-pop-contents-body .content-edit-btn {
359 background: #4b00e7;
360 border-radius: 3rem;
361 color: #fff;
362 font-size: 16px;
363 font-weight: 700;
364 line-height: 50px;
365 margin-top: 1rem;
366 padding: 5px 3rem;
367 text-transform: uppercase;
368 }
369
370 .jltma-pop-contents-body .content-edit-btn:focus,
371 .jltma-pop-contents-head .close-btn,
372 #jltma-mega-menu-builder-modal .jltma-pop-close {
373 outline: none;
374 }
375
376 .jltma-pop-contents-body .content-edit-btn:disabled,
377 .jltma-pop-contents-body .content-edit-btn[disabled] {
378 border: 1px solid #999999;
379 background-color: #cccccc;
380 color: #666666;
381 }
382
383 @media (min-width: 576px) {
384 .jltma-modal-dialog {
385 max-width: 500px;
386 }
387 }
388 .jltma-modal-body {
389 min-height: 155px;
390 }
391
392 .option-table.jltma-label-container {
393 width: 100%;
394 }
395
396 .option-table.jltma-label-container tr {
397 display: flex;
398 flex-wrap: wrap;
399 }
400
401 .option-table.jltma-label-container td {
402 flex: 0 0 50%;
403 }
404
405 .jltma-label-container .wp-color-result.button {
406 border-color: #ddd;
407 }
408
409 #mobile_submenu_content_type {
410 margin: 30px 0 15px;
411 }
412
413 #mobile_submenu_content_type * {
414 opacity: 0.5;
415 user-select: none;
416 pointer-events: none;
417 }
418
419 #mobile_submenu_content_type span {
420 margin: 0 10px 0 0;
421 }
422
423 .is_enabled #mobile_submenu_content_type * {
424 opacity: 1;
425 user-select: auto;
426 pointer-events: auto;
427 }
428
429 .is_enabled #mobile_submenu_content_type * {
430 opacity: 1;
431 user-select: auto;
432 pointer-events: auto;
433 }
434
435 .jltma-menu-mega-submenu.disabled_item {
436 color: #aaa;
437 }
438
439 .jltma-menu-mega-submenu {
440 display: block;
441 margin-top: 5px;
442 margin-bottom: 20px;
443 }
444
445 .jltma-menu-mega-submenu.enabled_item {
446 color: #81c784;
447 display: none;
448 }
449
450 .jltma-menu-mega-submenu.disabled_item {
451 color: #aaa;
452 }
453
454 .jltma-pop-content-inner,
455 #jltma-menu-builder-wrapper {
456 text-align: center;
457 }
458
459 #jltma-menu-builder-wrapper .enabled_item {
460 display: none;
461 }
462
463 #jltma-menu-builder-wrapper img {
464 height: 30px;
465 margin-right: 5px;
466 }
467
468 #jltma-menu-builder-wrapper .button {
469 height: 46px;
470 font-size: 16px;
471 text-transform: uppercase;
472 margin: auto;
473 margin-top: 25px;
474 display: -webkit-box;
475 display: -ms-flexbox;
476 display: flex;
477 -webkit-box-align: center;
478 -ms-flex-align: center;
479 align-items: center;
480 }
481
482 #jltma-menu-builder-wrapper.is_enabled .disabled_item {
483 display: none;
484 }
485
486 #jltma-menu-builder-wrapper.is_enabled .enabled_item {
487 display: block;
488 }
489
490 #jltma-mega-menu-builder-modal {
491 width: 100%;
492 height: 90%;
493 max-width: 100%;
494 min-height: auto;
495 padding: 40px !important;
496 }
497
498 #jltma-mega-menu-builder-modal .jltma-modal-content {
499 height: 100%;
500 position: relative;
501 display: -ms-flexbox;
502 display: flex;
503 -ms-flex-direction: column;
504 flex-direction: column;
505 width: 100%;
506 pointer-events: auto;
507 background-color: #fff;
508 background-clip: padding-box;
509 border: 1px solid rgba(0, 0, 0, 0.2);
510 border-radius: 0.3rem;
511 outline: 0;
512 }
513
514 #jltma-mega-menu-builder-modal .jltma-modal-body {
515 min-height: auto;
516 height: 100%;
517 }
518
519 #jltma-mega-menu-builder-modal .jltma-modal-dialog {
520 height: 100%;
521 width: 100%;
522 min-width: 100%;
523 min-height: auto;
524 }
525
526 #jltma-mega-menu-builder-modal #jltma-menu-builder-iframe {
527 height: 100%;
528 width: 100%;
529 }
530
531 #jltma-mega-menu-builder-modal .jltma-modal-body {
532 padding: 0px;
533 }
534
535 #jltma-mega-menu-builder-modal .jltma-pop-close {
536 top: 48px;
537 right: 40px;
538 width: 40px;
539 height: 40px;
540 padding: 0;
541 color: #fff;
542 -webkit-transition: color 500s linear;
543 transition: color 500s linear;
544 cursor: pointer;
545 border: 0px;
546 display: inline-block;
547 position: absolute;
548 }
549
550 /* Meta Box Switcher */
551 .master-mega-menu-accordion div {
552 display: inline-block;
553 }
554
555 .master-mega-menu-accordion input[type=checkbox],
556 .jtlma-mega-switcher input[type=checkbox] {
557 height: 0;
558 width: 0;
559 visibility: hidden;
560 }
561
562 .master-mega-menu-accordion label,
563 .jtlma-mega-switcher label {
564 cursor: pointer;
565 text-indent: -9999px;
566 width: 65px;
567 height: 30px;
568 background: #aaa;
569 display: inline-block;
570 border-radius: 60px;
571 position: relative;
572 }
573
574 .master-mega-menu-accordion label:after,
575 .jtlma-mega-switcher label:after {
576 content: "On";
577 position: absolute;
578 top: 5px;
579 left: 5px;
580 width: 25px;
581 height: 20px;
582 background: #fff;
583 border-radius: 90px;
584 transition: 0.3s;
585 }
586
587 .master-mega-menu-accordion input:checked + label,
588 .jtlma-mega-switcher input:checked + label {
589 background: #2eb85c;
590 }
591
592 .master-mega-menu-accordion input:checked + label:after,
593 .jtlma-mega-switcher input:checked + label:after {
594 left: calc(100% - 5px);
595 transform: translateX(-100%);
596 }
597
598 .master-mega-menu-accordion label:active:after,
599 .jtlma-mega-switcher label:active:after {
600 content: "Off";
601 width: 65px;
602 }
603
604 .menu-item-handle .item-title {
605 width: 100%;
606 }
607
608 .spinner.loading {
609 visibility: visible;
610 }
611
612 .jltma_menu_trigger::before {
613 content: "\f111";
614 display: inline-block;
615 font-family: dashicons;
616 font-size: 10px;
617 margin-right: 2px;
618 vertical-align: bottom;
619 }
620
621 .jltma_menu_trigger {
622 background: #4b00e7;
623 border-radius: 2px;
624 color: #fff !important;
625 text-decoration: none !important;
626 cursor: pointer;
627 display: inline-block;
628 font-size: 0.8em;
629 font-weight: normal;
630 height: auto;
631 margin-left: 10px;
632 opacity: 0.85;
633 padding: 3px 6px;
634 position: relative;
635 -webkit-transition: all 0.3s ease 0s;
636 transition: all 0.3s ease 0s;
637 width: auto;
638 z-index: 1;
639 }
640
641 .is_mega_disabled .jltma_menu_trigger {
642 visibility: hidden !important;
643 }
644
645 .menu-item-bar .menu-item-handle:hover .jltma_menu_trigger {
646 opacity: 1;
647 }
648
649 .jltma-menu-modal-loading #jltma-menu-modal-spinner {
650 position: absolute;
651 left: 50%;
652 top: 50%;
653 -webkit-transform: translate(-50%);
654 transform: translate(-50%);
655 z-index: 999;
656 visibility: visible;
657 }
658
659 .jltma-menu-has-child .builder-tab {
660 display: none;
661 }
662
663 .jltma-menu-has-child #content_nav,
664 .jltma-menu-has-child #content_tab {
665 display: none;
666 }
667
668 /* Icon Picker */
669 .icon-picker-container {
670 position: absolute;
671 width: 550px;
672 height: 300px;
673 font-size: 14px;
674 background-color: #fff;
675 -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
676 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
677 overflow: auto;
678 padding: 5px;
679 box-sizing: border-box;
680 z-index: 9999;
681 }
682
683 .icon-picker-container {
684 margin-left: -220px;
685 margin-top: 50px;
686 /*position: fixed;*/
687 width: 30%;
688 z-index: 999999 !important;
689 }
690
691 li.jltma-icommon {
692 margin: 3px 3px !important;
693 }
694
695 li.jltma-icommon a {
696 border: none !important;
697 padding: 1px 2px !important;
698 }
699
700 .icon-picker-container ul li.jltma-icommon a:hover {
701 background: none !important;
702 }
703
704 .icon-picker-container ul {
705 margin: 0;
706 padding: 0;
707 margin-top: 8px;
708 margin-bottom: 10px;
709 }
710
711 .icon-picker-container ul li a span {
712 width: 20px;
713 height: 20px;
714 font-size: 20px;
715 display: block;
716 text-align: left;
717 }
718
719 .icon-picker-container ul li {
720 margin: 5px;
721 float: left;
722 }
723
724 .icon-picker-container ul li a {
725 display: block;
726 text-decoration: none;
727 color: #373737;
728 padding: 6px 10px;
729 border: 1px solid #eee;
730 }
731
732 .icon-picker-container ul li a:hover {
733 border-color: #999;
734 background: #efefef;
735 }
736
737 .icon-picker-control {
738 height: 32px;
739 height: 64px;
740 }
741
742 .icon-picker-control a {
743 padding: 5px;
744 text-decoration: none;
745 line-height: 32px;
746 width: 25px;
747 }
748
749 .icon-picker-control a span {
750 display: inline;
751 vertical-align: middle;
752 }
753
754 .icon-picker-control input {
755 width: 200px;
756 }
757
758 .icon-picker-control p {
759 text-align: left;
760 margin: 0;
761 padding: 3px 10px;
762 }
763
764 .icon-picker-control select {
765 margin: 0 auto;
766 display: inline-block;
767 width: auto;
768 }
769
770 /* DIV Button with Preview */
771 div.button.icon-picker {
772 font-size: 24px;
773 height: 30px;
774 width: 30px;
775 margin: 0;
776 padding: 0;
777 line-height: 30px;
778 text-align: center;
779 }
780
781 .button.icon-picker:before {
782 content: "\f504";
783 font-family: dashicons;
784 font-size: 30px;
785 }
786
787 .icon-picker-close {
788 float: right;
789 padding: 2px;
790 background: #ccc;
791 cursor: pointer;
792 font-weight: 600;
793 }
794
795 .icon-picker-list li:before {
796 display: none;
797 }
798
799 .jltma-pro-badge {
800 position: absolute;
801 z-index: 333;
802 text-align: center;
803 padding-left: 23%;
804 font-size: 20px !important;
805 padding-top: 0;
806 }
807
808 .top-badge {
809 padding-left: 20%;
810 padding-top: 0;
811 }
812
813 .jltma-disabled {
814 pointer-events: none;
815 opacity: 0.4;
816 }
817
818 .jltma-form-control {
819 max-width: 100px;
820 }