1/* nav-menu */
2
3/* @todo: determine if this is truly for nav menus only */
4.no-js #message {
5 display: block;
6}
7
8ul.add-menu-item-tabs li {
9 padding: 3px 5px 4px 8px;
10}
11
12.accordion-section ul.category-tabs,
13.accordion-section ul.add-menu-item-tabs,
14.accordion-section ul.wp-tab-bar {
15 margin: 0;
16}
17
18.accordion-section .categorychecklist {
19 margin: 13px 0;
20}
21
22#nav-menu-meta .accordion-section-content {
23 padding: 18px 13px;
24 resize: vertical;
25}
26
27#nav-menu-meta .button-controls {
28 margin-bottom: 0;
29}
30
31.has-no-menu-item .button-controls {
32 display: none;
33}
34
35#nav-menus-frame {
36 margin-left: 300px;
37 margin-top: 23px;
38}
39
40#wpbody-content #menu-settings-column {
41 display: inline;
42 width: 281px;
43 margin-left: -300px;
44 clear: both;
45 float: left;
46 padding-top: 0;
47}
48
49#menu-settings-column .inside {
50 clear: both;
51 margin: 10px 0 0;
52 height: 100%;
53 max-height: inherit;
54}
55
56#menu-settings-column .categorydiv,
57#menu-settings-column .customlinkdiv,
58#menu-settings-column .posttypediv,
59#menu-settings-column .taxonomydiv {
60 max-height: inherit;
61 height: 100%;
62}
63
64#menu-settings-column .wp-tab-panel,
65#menu-settings-column .categorydiv div.tabs-panel,
66#menu-settings-column .customlinkdiv div.tabs-panel,
67#menu-settings-column .posttypediv div.tabs-panel,
68#menu-settings-column .taxonomydiv div.tabs-panel {
69 /* Allow space for content after tab panels in nav menu editor. */
70 max-height: calc( 100% - 75px );
71 height: 100%;
72}
73
74.metabox-holder-disabled .postbox,
75.metabox-holder-disabled .accordion-section-content,
76.metabox-holder-disabled .accordion-section-title {
77 opacity: 0.5;
78 filter: alpha(opacity=50);
79}
80
81.metabox-holder-disabled .button-controls .select-all {
82 display: none;
83}
84
85#wpbody {
86 position: relative;
87}
88
89.is-submenu {
90 color: #50575e; /* #fafafa background */
91 font-style: italic;
92 font-weight: 400;
93 margin-left: 4px;
94}
95
96.manage-menus {
97 margin-top: 23px;
98 padding: 10px;
99 overflow: hidden;
100 background: #fff;
101}
102
103.manage-menus .selected-menu,
104.manage-menus select,
105.manage-menus .submit-btn,
106.nav-menus-php .add-new-menu-action {
107 display: inline-block;
108 margin-right: 3px;
109 vertical-align: middle;
110}
111
112.manage-menus select,
113.menu-location-menus select {
114 max-width: 100%;
115}
116
117.menu-edit #post-body-content h3 {
118 margin: 1em 0 10px;
119}
120
121#nav-menu-bulk-actions-top {
122 margin: 1em 0;
123}
124
125#nav-menu-bulk-actions-bottom {
126 margin: 1em 0;
127 margin: calc( 1em + 9px ) 0;
128}
129
130.bulk-actions input.button {
131 margin-right: 12px;
132}
133
134.bulk-select-button {
135 position: relative;
136 display: inline-block;
137 padding: 0 10px;
138 font-size: 13px;
139 line-height: 2.15384615;
140 height: auto;
141 min-height: 30px;
142 background: #f6f7f7;
143 vertical-align: top;
144 border: 1px solid #dcdcde;
145 margin: 0;
146 cursor: pointer;
147 border-radius: 3px;
148 white-space: nowrap;
149 box-sizing: border-box;
150}
151
152.bulk-selection .bulk-select-button {
153 color: #2271b1;
154 border-color: #2271b1;
155 background: #f6f7f7;
156 vertical-align: top;
157}
158
159#pending-menu-items-to-delete {
160 display: none;
161}
162
163.bulk-selection #pending-menu-items-to-delete {
164 display: block;
165 margin-top: 1em;
166}
167
168#pending-menu-items-to-delete p {
169 margin-bottom: 0;
170}
171
172#pending-menu-items-to-delete ul {
173 margin-top: 0;
174 list-style: none;
175}
176
177#pending-menu-items-to-delete ul li {
178 display: inline;
179}
180
181input.bulk-select-switcher + .bulk-select-button-label {
182 vertical-align: inherit;
183}
184
185label.bulk-select-button:hover,
186label.bulk-select-button:active,
187label.bulk-select-button:focus-within {
188 background: #f0f0f1;
189 border-color: #0a4b78;
190 color: #0a4b78;
191}
192
193input.bulk-select-switcher:focus + .bulk-select-button-label {
194 color: #0a4b78;
195}
196
197.bulk-actions input.menu-items-delete {
198 appearance: none;
199 font-size: inherit;
200 border: 0;
201 line-height: 2.1em;
202 background: none;
203 cursor: pointer;
204 text-decoration: underline;
205 color: #b32d2e;
206}
207
208.bulk-actions input.menu-items-delete:hover {
209 color: #b32d2e;
210 border: none;
211}
212
213.bulk-actions input.menu-items-delete.disabled {
214 display: none;
215}
216
217.menu-settings {
218 border-top: 1px solid #f0f0f1;
219 margin-top: 2em;
220}
221
222.menu-settings-group {
223 margin: 0 0 10px;
224 overflow: hidden;
225 padding-left: 20%;
226}
227
228.menu-settings-group:last-of-type {
229 margin-bottom: 0;
230}
231
232.menu-settings-input {
233 float: left;
234 margin: 0;
235 width: 100%;
236}
237
238.menu-settings-group-name {
239 float: left;
240 clear: both;
241 width: 25%;
242 padding: 3px 0 0;
243 margin-left: -25%; /* 20 container left padding x ( 100 container % width / 80 this % width ) */
244}
245
246.menu-settings label {
247 vertical-align: baseline;
248}
249
250.menu-edit .checkbox-input {
251 margin-top: 4px;
252}
253
254.theme-location-set {
255 color: #646970;
256 font-size: 11px;
257}
258
259/* Menu Container */
260
261/* @todo: responsive view. */
262#menu-management-liquid {
263 float: left;
264 min-width: 100%;
265 margin-top: 3px;
266}
267
268/* @todo: responsive view. */
269#menu-management {
270 position: relative;
271 margin-right: 20px;
272 margin-top: -3px;
273 width: 100%;
274}
275
276#menu-management .menu-edit {
277 margin-bottom: 20px;
278}
279
280.nav-menus-php #post-body {
281 padding: 0 10px;
282 border-top: 1px solid #fff;
283 border-bottom: 1px solid #dcdcde;
284 background: #fff;
285}
286
287#nav-menu-header,
288#nav-menu-footer {
289 padding: 0 10px;
290 background: #f6f7f7;
291}
292
293#nav-menu-header {
294 border-bottom: 1px solid #dcdcde;
295 margin-bottom: 0;
296}
297
298#nav-menu-header .menu-name-label {
299 display: inline-block;
300 vertical-align: middle;
301 margin-right: 7px;
302}
303
304.nav-menus-php #post-body div.updated,
305.nav-menus-php #post-body div.error {
306 margin: 0;
307}
308
309.nav-menus-php #post-body-content {
310 position: relative;
311 float: none;
312}
313
314.nav-menus-php #post-body-content .post-body-plain {
315 margin-bottom: 0;
316}
317
318#menu-management .menu-add-new abbr {
319 font-weight: 600;
320}
321
322#select-nav-menu-container {
323 text-align: right;
324 padding: 0 10px 3px;
325 margin-bottom: 5px;
326}
327
328#select-nav-menu {
329 width: 100px;
330 display: inline;
331}
332
333#menu-name-label {
334 margin-top: -2px;
335}
336
337.widefat .menu-locations .menu-location-title {
338 padding: 13px 10px 0;
339}
340
341.menu-location-title label {
342 font-weight: 600;
343}
344
345.menu-location-menus select {
346 float: left;
347}
348
349#locations-nav-menu-wrapper {
350 padding: 5px 0;
351}
352
353.locations-nav-menu-select select {
354 float: left;
355 width: 160px;
356 margin-right: 5px;
357}
358
359.locations-row-links {
360 float: left;
361 margin: 6px 0 0 6px;
362}
363
364.locations-edit-menu-link,
365.locations-add-menu-link {
366 margin: 0 3px;
367}
368
369.locations-edit-menu-link {
370 padding-right: 3px;
371 border-right: 1px solid #c3c4c7;
372}
373
374#menu-management .inside {
375 padding: 0 10px;
376}
377
378/* Add Menu Item Boxes */
379.postbox .howto input,
380.customlinkdiv .menu-item-textbox,
381.customlinkdiv .error-message {
382 width: 180px;
383 float: right;
384}
385
386.customlinkdiv .error-message {
387 clear: right;
388}
389
390.accordion-container .outer-border {
391 margin: 0;
392}
393
394.customlinkdiv p {
395 margin-top: 0
396}
397
398#nav-menu-theme-locations .howto select {
399 width: 100%;
400}
401
402#nav-menu-theme-locations .button-controls {
403 text-align: right;
404}
405
406.add-menu-item-view-all {
407 height: 400px;
408}
409
410/* Button Primary Actions */
411#menu-container .submit {
412 margin: 0 0 10px;
413 padding: 0;
414}
415
416/* @todo: is this actually used? */
417#cancel-save {
418 text-decoration: underline;
419 font-size: 12px;
420 margin-left: 20px;
421 margin-top: 5px;
422}
423
424.button.right, .button-secondary.right, .button-primary.right {
425 float: right;
426}
427
428/* Button Secondary Actions */
429.list-controls {
430 float: left;
431 margin-top: 5px;
432}
433
434.add-to-menu {
435 float: right;
436}
437
438.button-controls {
439 clear: both;
440 margin: 10px 0;
441}
442
443.show-all,
444.hide-all {
445 cursor: pointer;
446}
447
448.hide-all {
449 display: none;
450}
451
452/* Create Menu */
453#menu-name {
454 width: 270px;
455 vertical-align: middle;
456}
457
458#manage-menu .inside {
459 padding: 0;
460}
461
462/* Custom Links */
463#available-links dt {
464 display: block;
465}
466
467#add-custom-link .howto {
468 font-size: 12px;
469}
470
471#add-custom-link label span {
472 display: block;
473 float: left;
474 margin-top: 5px;
475 padding-right: 5px;
476}
477
478.menu-item-textbox {
479 width: 180px;
480}
481
482.customlinkdiv label,
483.nav-menus-php .howto span {
484 float: left;
485 margin-top: 6px;
486}
487
488/* Menu item types */
489.quick-search {
490 width: 190px;
491}
492
493.quick-search-wrap .spinner {
494 float: none;
495 margin: -3px -10px 0 0;
496}
497
498.nav-menus-php .list-wrap {
499 display: none;
500 clear: both;
501 margin-bottom: 10px;
502}
503
504.nav-menus-php .postbox p.submit {
505 margin-bottom: 0;
506}
507
508/* Listings */
509.nav-menus-php .list li {
510 display: none;
511 margin: 0 0 5px;
512}
513
514.nav-menus-php .list li .menu-item-title {
515 cursor: pointer;
516 display: block;
517}
518
519.nav-menus-php .list li .menu-item-title input {
520 margin-right: 3px;
521 margin-top: -3px;
522}
523
524.menu-item-title input[type=checkbox] {
525 display: inline-block;
526 margin-top: -4px;
527}
528
529.menu-item-title .post-state {
530 font-weight: 600;
531}
532
533/* Nav Menu */
534#menu-container .inside {
535 padding-bottom: 10px;
536}
537
538.menu {
539 padding-top: 1em;
540}
541
542#menu-to-edit {
543 margin: 0;
544 padding: 0.1em 0;
545}
546
547.menu ul {
548 width: 100%;
549}
550
551.menu li {
552 margin-bottom: 0;
553 position: relative;
554}
555
556.menu-item-bar {
557 clear: both;
558 line-height: 1.5;
559 position: relative;
560 margin: 9px 0 0;
561}
562
563.menu-item-bar .menu-item-handle {
564 border: 1px solid #dcdcde;
565 position: relative;
566 padding: 10px 15px;
567 height: auto;
568 min-height: 20px;
569 max-width: 382px;
570 line-height: 2.30769230;
571 overflow: hidden;
572 word-wrap: break-word;
573}
574
575.menu-item-bar .menu-item-handle:hover {
576 border-color: #8c8f94;
577}
578
579#menu-to-edit .menu-item-invalid .menu-item-handle {
580 background: #fcf0f1;
581 border-color: #d63638;
582}
583
584.no-js .menu-item-edit-active .item-edit {
585 display: none;
586}
587
588.js .menu-item-handle {
589 cursor: move;
590}
591
592.menu li.deleting .menu-item-handle {
593 background-image: none;
594 background-color: #f86368;
595}
596
597.menu-item-handle .item-title {
598 font-size: 13px;
599 font-weight: 600;
600 line-height: 1.53846153;
601 display: block;
602 /* @todo: responsive view. */
603 margin-right: 13em;
604}
605
606.menu-item-handle .menu-item-checkbox {
607 display: none;
608}
609
610.bulk-selection .menu-item-handle .menu-item-checkbox {
611 display: inline-block;
612 margin-right: 6px;
613}
614
615.menu-item-handle .menu-item-title.no-title {
616 color: #646970;
617}
618
619/* Sortables */
620li.menu-item.ui-sortable-helper .menu-item-bar {
621 margin-top: 0;
622}
623
624li.menu-item.ui-sortable-helper .menu-item-transport .menu-item-bar {
625 margin-top: 9px; /* Must use the same value used by the dragged item .menu-item-bar */
626}
627
628.menu .sortable-placeholder {
629 height: 35px;
630 width: 410px;
631 margin-top: 9px; /* Must use the same value used by the dragged item .menu-item-bar */
632}
633
634/* Hide the transport list when it's empty */
635.menu-item .menu-item-transport:empty {
636 display: none;
637}
638
639/* WARNING: The factor of 30px is hardcoded into the nav-menus JavaScript. */
640.menu-item-depth-0 { margin-left: 0; }
641.menu-item-depth-1 { margin-left: 30px; }
642.menu-item-depth-2 { margin-left: 60px; }
643.menu-item-depth-3 { margin-left: 90px; }
644.menu-item-depth-4 { margin-left: 120px; }
645.menu-item-depth-5 { margin-left: 150px; }
646.menu-item-depth-6 { margin-left: 180px; }
647.menu-item-depth-7 { margin-left: 210px; }
648.menu-item-depth-8 { margin-left: 240px; }
649.menu-item-depth-9 { margin-left: 270px; }
650.menu-item-depth-10 { margin-left: 300px; }
651.menu-item-depth-11 { margin-left: 330px; }
652
653.menu-item-depth-0 .menu-item-transport { margin-left: 0; }
654.menu-item-depth-1 .menu-item-transport { margin-left: -30px; }
655.menu-item-depth-2 .menu-item-transport { margin-left: -60px; }
656.menu-item-depth-3 .menu-item-transport { margin-left: -90px; }
657.menu-item-depth-4 .menu-item-transport { margin-left: -120px; }
658.menu-item-depth-5 .menu-item-transport { margin-left: -150px; }
659.menu-item-depth-6 .menu-item-transport { margin-left: -180px; }
660.menu-item-depth-7 .menu-item-transport { margin-left: -210px; }
661.menu-item-depth-8 .menu-item-transport { margin-left: -240px; }
662.menu-item-depth-9 .menu-item-transport { margin-left: -270px; }
663.menu-item-depth-10 .menu-item-transport { margin-left: -300px; }
664.menu-item-depth-11 .menu-item-transport { margin-left: -330px; }
665
666body.menu-max-depth-0 { min-width: 950px !important; }
667body.menu-max-depth-1 { min-width: 980px !important; }
668body.menu-max-depth-2 { min-width: 1010px !important; }
669body.menu-max-depth-3 { min-width: 1040px !important; }
670body.menu-max-depth-4 { min-width: 1070px !important; }
671body.menu-max-depth-5 { min-width: 1100px !important; }
672body.menu-max-depth-6 { min-width: 1130px !important; }
673body.menu-max-depth-7 { min-width: 1160px !important; }
674body.menu-max-depth-8 { min-width: 1190px !important; }
675body.menu-max-depth-9 { min-width: 1220px !important; }
676body.menu-max-depth-10 { min-width: 1250px !important; }
677body.menu-max-depth-11 { min-width: 1280px !important; }
678
679/* Menu item controls */
680.item-type {
681 display: inline-block;
682 padding: 12px 16px;
683 color: #646970;
684 font-size: 12px;
685 line-height: 1.5;
686}
687
688.item-controls {
689 font-size: 12px;
690 position: absolute;
691 right: 20px;
692 top: -1px;
693}
694
695.item-controls a {
696 text-decoration: none;
697}
698
699.item-controls a:hover {
700 cursor: pointer;
701}
702
703.item-controls .item-order {
704 padding-right: 10px;
705}
706
707.nav-menus-php .item-edit {
708 position: absolute;
709 right: -20px;
710 top: 0;
711 display: block;
712 width: 30px;
713 height: 40px;
714 outline: none;
715}
716
717.no-js.nav-menus-php .item-edit {
718 position: static;
719 float: right;
720 width: auto;
721 height: auto;
722 margin: 12px -10px 12px 0;
723 padding: 0;
724 color: #2271b1;
725 text-decoration: underline;
726 font-size: 12px;
727 line-height: 1.5;
728}
729
730.no-js.nav-menus-php .item-edit .screen-reader-text {
731 position: static;
732 clip-path: none;
733 width: auto;
734 height: auto;
735 margin: 0;
736}
737
738.nav-menus-php .item-edit:before {
739 margin-top: 10px;
740 margin-left: 4px;
741 width: 20px;
742 border-radius: 50%;
743 text-indent: -1px; /* account for the dashicon alignment */
744}
745
746.no-js.nav-menus-php .item-edit:before {
747 display: none;
748}
749
750.rtl .nav-menus-php .item-edit:before {
751 text-indent: 1px; /* account for the dashicon alignment */
752}
753
754.js.nav-menus-php .item-edit:focus {
755 box-shadow: none;
756}
757
758.nav-menus-php .item-edit:focus:before {
759 box-shadow: 0 0 0 2px #2271b1;
760 /* Only visible in Windows High Contrast mode */
761 outline: 2px solid transparent;
762}
763
764/* Menu editing */
765.menu-instructions-inactive {
766 display: none;
767}
768
769.menu-item-settings {
770 display: block;
771 max-width: 392px;
772 padding: 10px;
773 position: relative;
774 z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */
775 border: 1px solid #c3c4c7;
776 border-top: none;
777 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
778}
779
780.menu-item-settings .field-move {
781 margin: 3px 0 5px;
782 line-height: 1.5;
783}
784
785.field-move-visual-label {
786 float: left;
787 margin-right: 4px;
788}
789
790.menu-item-settings .field-move .button-link {
791 display: none;
792 margin: 0 2px;
793}
794
795.menu-item-edit-active .menu-item-settings {
796 display: block;
797}
798
799.menu-item-edit-inactive .menu-item-settings {
800 display: none;
801}
802
803.add-menu-item-pagelinks {
804 margin: .5em -10px;
805 text-align: center;
806}
807
808.add-menu-item-pagelinks .page-numbers {
809 display: inline-block;
810 min-width: 20px;
811}
812
813.add-menu-item-pagelinks .page-numbers.dots {
814 min-width: 0;
815}
816
817.link-to-original {
818 display: block;
819 margin: 0 0 15px;
820 padding: 3px 5px 5px;
821 border: 1px solid #dcdcde;
822 color: #646970;
823 font-size: 12px;
824}
825
826.link-to-original a {
827 padding-left: 4px;
828 font-style: normal;
829}
830
831.hidden-field {
832 display: none;
833}
834
835.description-group {
836 display: flex;
837 column-gap: 10px;
838}
839
840.description-group > * {
841 flex-grow: 1;
842}
843
844.menu-item-actions {
845 padding-top: 15px;
846 padding-bottom: 7px;
847}
848
849#cancel-save {
850 cursor: pointer;
851}
852
853/* Major/minor publishing actions (classes) */
854.nav-menus-php .major-publishing-actions {
855 padding: 10px 0;
856 display: flex;
857 align-items: center;
858}
859
860.nav-menus-php .major-publishing-actions > * {
861 margin-right: 10px;
862}
863
864.nav-menus-php .major-publishing-actions .form-invalid {
865 padding-left: 4px;
866 margin-left: -4px;
867}
868
869#nav-menus-frame,
870.button-controls,
871#menu-item-url-wrap,
872#menu-item-name-wrap {
873 display: block;
874}
875
876/* =Media Queries
877-------------------------------------------------------------- */
878
879@media only screen and (min-width: 769px) and (max-width: 1000px) {
880 body.menu-max-depth-0 {
881 min-width: 0 !important;
882 }
883
884 #menu-management-liquid {
885 width: 100%;
886 }
887
888 .nav-menus-php #post-body-content {
889 min-width: 0;
890 }
891}
892
893@media screen and (max-width: 782px) {
894 body.nav-menus-php,
895 body.wp-customizer {
896 min-width: 0 !important;
897 }
898
899 #nav-menus-frame {
900 margin-left: 0;
901 float: none;
902 width: 100%;
903 }
904
905 #wpbody-content #menu-settings-column {
906 display: block;
907 width: 100%;
908 float: none;
909 margin-left: 0;
910 }
911
912 #side-sortables .add-menu-item-tabs {
913 margin: 15px 0 14px;
914 }
915
916 ul.add-menu-item-tabs li.tabs {
917 padding: 13px 15px 14px;
918 }
919
920 .nav-menus-php .customlinkdiv .howto input {
921 width: 65%;
922 }
923
924 .nav-menus-php .quick-search {
925 width: 85%;
926 }
927
928 #menu-management-liquid {
929 margin-top: 25px;
930 }
931
932 .nav-menus-php .menu-name-label.howto span {
933 margin-top: 13px
934 }
935
936 #menu-name {
937 width: 100%;
938 }
939
940 .nav-menus-php #nav-menu-header .major-publishing-actions .publishing-action {
941 padding-top: 1em;
942 }
943
944 .nav-menus-php .delete-action {
945 font-size: 14px;
946 line-height: 2.14285714;
947 }
948
949 .menu-item-bar .menu-item-handle,
950 .menu-item-settings {
951 width: auto;
952 }
953
954 .menu-item-settings {
955 padding: 10px;
956 }
957
958 .menu-item-settings .description-group {
959 display: block;
960 }
961
962 .menu-item-settings input {
963 width: 100%;
964 }
965
966 .menu-item-settings input[type="checkbox"],
967 .menu-item-settings input[type="radio"] {
968 width: 25px;
969 }
970
971 .menu-settings-group {
972 padding-left: 0;
973 overflow: visible;
974 }
975
976 .menu-settings-group-name {
977 float: none;
978 width: auto;
979 margin-left: 0;
980 margin-bottom: 15px;
981 }
982
983 .menu-settings-input {
984 float: none;
985 margin-bottom: 15px;
986 }
987
988 .menu-edit .checkbox-input {
989 margin-top: 0;
990 }
991
992 .manage-menus select {
993 margin: 0.5em 0;
994 }
995
996 .wp-core-ui .manage-menus .button {
997 margin-bottom: 0;
998 }
999
1000 .widefat .menu-locations .menu-location-title {
1001 padding-top: 16px;
1002 }
1003}
1004
1005@media only screen and (min-width: 783px) {
1006 @supports (position: sticky) and (scroll-margin-bottom: 130px) {
1007
1008 #nav-menu-footer {
1009 position: sticky;
1010 bottom: 0;
1011 z-index: 10;
1012 box-shadow: 0 -1px 0 0 #ddd;
1013 }
1014
1015 #save_menu_header {
1016 display: none;
1017 }
1018 }
1019}
1020
1021@media only screen and (max-width: 768px) {
1022 /* menu locations */
1023 #menu-locations-wrap .widefat {
1024 width: 100%;
1025 }
1026
1027 .bulk-select-button {
1028 padding: 5px 10px;
1029 }
1030}
1031