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