1 #accordion-section-menu_locations {
13 #customize-controls .theme-location-set,
14 #customize-controls .control-section .accordion-section-title:focus .menu-in-location,
15 #customize-controls .control-section .accordion-section-title:hover .menu-in-location,
16 #customize-controls .control-section .accordion-section-title:focus .menu-in-locations,
17 #customize-controls .control-section .accordion-section-title:hover .menu-in-locations {
21 .wp-customizer .menu-item-bar .menu-item-handle,
22 .wp-customizer .menu-item-settings,
23 .wp-customizer .menu-item-settings .description-thin {
24 -webkit-box-sizing: border-box;
25 -moz-box-sizing: border-box;
26 box-sizing: border-box;
29 .wp-customizer .menu-item-bar {
33 .wp-customizer .menu-item-bar .menu-item-handle {
38 .wp-customizer .menu-item-handle .item-title {
42 .wp-customizer .menu-item-handle .item-type {
43 padding: 1px 21px 0 5px;
48 .wp-customizer .menu-item-settings {
53 border: 1px solid #999;
57 .wp-customizer .menu-item-settings .description-thin {
63 .wp-customizer .menu-item-settings input[type="text"] {
67 .wp-customizer .menu-item-settings .submitbox {
72 .wp-customizer .menu-item-settings .link-to-original {
80 .wp-customizer .menu-item .submitbox .submitdelete {
88 .wp-customizer .menu-item .submitbox .submitdelete:focus {
89 -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
90 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
93 /* Menu-item reordering nav. */
94 .customize-control-nav_menu .reordering .reorder,
95 .customize-control-nav_menu .reorder-done {
99 .customize-control-nav_menu .reorder,
100 .customize-control-nav_menu .reordering .reorder-done {
101 display: inline-block;
105 .menu-item-reorder-nav {
107 background-color: #fff;
113 .customize-control-nav_menu .reordering .add-new-menu-item {
115 pointer-events: none;
119 .menu-item-reorder-nav button {
127 text-indent: -9999px;
129 background: transparent;
131 -webkit-box-shadow: none;
136 .menu-item-reorder-nav button:before {
137 display: inline-block;
143 font: normal 20px/40px dashicons;
146 -webkit-font-smoothing: antialiased;
147 -moz-osx-font-smoothing: grayscale;
150 .menu-item-reorder-nav button:hover,
151 .menu-item-reorder-nav button:focus {
156 .menus-move-down:before {
160 .menus-move-up:before {
164 .menus-move-left:before {
168 .menus-move-right:before {
172 .move-up-disabled .menus-move-up,
173 .move-down-disabled .menus-move-down,
174 .move-right-disabled .menus-move-right,
175 .move-left-disabled .menus-move-left {
176 color: #d5d5d5 !important;
177 background-color: #fff !important;
179 pointer-events: none;
182 .menu-item-reorder-nav:before {
189 background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 100%);
190 background: -webkit-gradient(linear, left top, right top, from(rgba(250,250,250,0)), to(rgba(250,250,250,1)));
191 background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%);
192 background: linear-gradient(to right, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 100%);
195 .reordering .menu-item .item-controls,
196 .reordering .menu-item .item-type {
200 .reordering .menu-item-reorder-nav {
204 .customize-control input.menu-name-field {
205 width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
209 .wp-customizer .menu-item .item-edit {
216 margin-right: 0 !important;
222 .customize-control-nav_menu_item .item-edit:focus {
224 -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
225 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
228 /* rework the arrow indicator implementation for NVDA bug same as #32715 */
229 .wp-customizer .menu-item .item-edit .toggle-indicator {
230 display: inline-block;
235 .wp-customizer .menu-item .item-edit .toggle-indicator:after {
237 font: normal 20px/1 dashicons;
241 -webkit-font-smoothing: antialiased;
242 -moz-osx-font-smoothing: grayscale;
243 text-decoration: none !important;
246 .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after {
250 .wp-customizer .menu-item-settings p.description {
254 .wp-customizer .menu-settings dl {
259 .wp-customizer .menu-settings .checkbox-input {
263 .wp-customizer .menu-settings .menu-theme-locations {
264 border-top: 1px solid #ccc;
267 .wp-customizer .menu-settings {
272 .menu-settings .customize-control-checkbox label {
276 /* @todo update selector or potentially remove */
277 .menu-settings .customize-control.customize-control-checkbox {
278 margin-bottom: 8px; /* Override collapsing at smaller viewports. */
281 .customize-control-menu {
285 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
290 .customize-screen-options-toggle {
302 #customize-controls .customize-info .customize-help-toggle {
306 #customize-controls .customize-info .customize-help-toggle:before {
310 .customize-screen-options-toggle:hover,
311 .customize-screen-options-toggle:active,
312 .customize-screen-options-toggle:focus,
313 .active-menu-screen-options .customize-screen-options-toggle,
314 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
315 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
316 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
320 .customize-screen-options-toggle:focus,
321 #customize-controls .customize-info .customize-help-toggle:focus {
325 .customize-screen-options-toggle:before {
326 -moz-osx-font-smoothing: grayscale;
330 font: 18px/1 "dashicons";
333 text-decoration: none !important;
340 .customize-screen-options-toggle:focus:before,
341 #customize-controls .customize-info .customize-help-toggle:focus:before {
342 -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
343 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
344 -webkit-border-radius: 100%;
348 .wp-customizer #screen-options-wrap {
351 border-top: 1px solid #ddd;
355 .wp-customizer .metabox-prefs label {
361 #accordion-panel-nav_menus .field-link-target,
362 #accordion-panel-nav_menus .field-attr-title,
363 #accordion-panel-nav_menus .field-css-classes,
364 #accordion-panel-nav_menus .field-xfn,
365 #accordion-panel-nav_menus .field-description {
369 #accordion-panel-nav_menus.field-link-target-active .field-link-target,
370 #accordion-panel-nav_menus.field-attr-title-active .field-attr-title,
371 #accordion-panel-nav_menus.field-css-classes-active .field-css-classes,
372 #accordion-panel-nav_menus.field-xfn-active .field-xfn,
373 #accordion-panel-nav_menus.field-description-active .field-description {
377 /* WARNING: The 20px factor is hard-coded in JS. */
378 .menu-item-depth-0 { margin-left: 0; }
379 .menu-item-depth-1 { margin-left: 20px; }
380 .menu-item-depth-2 { margin-left: 40px; }
381 .menu-item-depth-3 { margin-left: 60px; }
382 .menu-item-depth-4 { margin-left: 80px; }
383 .menu-item-depth-5 { margin-left: 100px; }
384 .menu-item-depth-6 { margin-left: 120px; }
385 .menu-item-depth-7 { margin-left: 140px; }
386 .menu-item-depth-8 { margin-left: 160px; } /* Not likely to be used or useful beyond this depth */
387 .menu-item-depth-9 { margin-left: 180px; }
388 .menu-item-depth-10 { margin-left: 200px; }
389 .menu-item-depth-11 { margin-left: 220px; }
391 /* @todo handle .menu-item-settings width */
392 .menu-item-depth-0 > .menu-item-bar { margin-right: 0; }
393 .menu-item-depth-1 > .menu-item-bar { margin-right: 20px; }
394 .menu-item-depth-2 > .menu-item-bar { margin-right: 40px; }
395 .menu-item-depth-3 > .menu-item-bar { margin-right: 60px; }
396 .menu-item-depth-4 > .menu-item-bar { margin-right: 80px; }
397 .menu-item-depth-5 > .menu-item-bar { margin-right: 100px; }
398 .menu-item-depth-6 > .menu-item-bar { margin-right: 120px; }
399 .menu-item-depth-7 > .menu-item-bar { margin-right: 140px; }
400 .menu-item-depth-8 > .menu-item-bar { margin-right: 160px; }
401 .menu-item-depth-9 > .menu-item-bar { margin-right: 180px; }
402 .menu-item-depth-10 > .menu-item-bar { margin-right: 200px; }
403 .menu-item-depth-11 > .menu-item-bar { margin-right: 220px; }
405 /* Submenu left margin. */
406 .menu-item-depth-0 .menu-item-transport { margin-left: 0; }
407 .menu-item-depth-1 .menu-item-transport { margin-left: -20px; }
408 .menu-item-depth-3 .menu-item-transport { margin-left: -60px; }
409 .menu-item-depth-4 .menu-item-transport { margin-left: -80px; }
410 .menu-item-depth-2 .menu-item-transport { margin-left: -40px; }
411 .menu-item-depth-5 .menu-item-transport { margin-left: -100px; }
412 .menu-item-depth-6 .menu-item-transport { margin-left: -120px; }
413 .menu-item-depth-7 .menu-item-transport { margin-left: -140px; }
414 .menu-item-depth-8 .menu-item-transport { margin-left: -160px; }
415 .menu-item-depth-9 .menu-item-transport { margin-left: -180px; }
416 .menu-item-depth-10 .menu-item-transport { margin-left: -200px; }
417 .menu-item-depth-11 .menu-item-transport { margin-left: -220px; }
419 /* WARNING: The 20px factor is hard-coded in JS. */
420 .reordering .menu-item-depth-0 { margin-left: 0; }
421 .reordering .menu-item-depth-1 { margin-left: 15px; }
422 .reordering .menu-item-depth-2 { margin-left: 30px; }
423 .reordering .menu-item-depth-3 { margin-left: 45px; }
424 .reordering .menu-item-depth-4 { margin-left: 60px; }
425 .reordering .menu-item-depth-5 { margin-left: 75px; }
426 .reordering .menu-item-depth-6 { margin-left: 90px; }
427 .reordering .menu-item-depth-7 { margin-left: 105px; }
428 .reordering .menu-item-depth-8 { margin-left: 120px; } /* Not likely to be used or useful beyond this depth */
429 .reordering .menu-item-depth-9 { margin-left: 135px; }
430 .reordering .menu-item-depth-10 { margin-left: 150px; }
431 .reordering .menu-item-depth-11 { margin-left: 165px; }
433 .reordering .menu-item-depth-0 > .menu-item-bar { margin-right: 0; }
434 .reordering .menu-item-depth-1 > .menu-item-bar { margin-right: 15px; }
435 .reordering .menu-item-depth-2 > .menu-item-bar { margin-right: 30px; }
436 .reordering .menu-item-depth-3 > .menu-item-bar { margin-right: 45px; }
437 .reordering .menu-item-depth-4 > .menu-item-bar { margin-right: 60px; }
438 .reordering .menu-item-depth-5 > .menu-item-bar { margin-right: 75px; }
439 .reordering .menu-item-depth-6 > .menu-item-bar { margin-right: 90px; }
440 .reordering .menu-item-depth-7 > .menu-item-bar { margin-right: 105px; }
441 .reordering .menu-item-depth-8 > .menu-item-bar { margin-right: 120px; }
442 .reordering .menu-item-depth-9 > .menu-item-bar { margin-right: 135px; }
443 .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
444 .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
446 .control-section-nav_menu .menu .menu-item-edit-active {
450 .control-section-nav_menu .menu .menu-item-edit-active .menu-item-bar {
454 .control-section-nav_menu .menu .sortable-placeholder {
457 max-width: -webkit-calc(100% - 2px);
458 max-width: calc(100% - 2px);
461 border-color: #a0a5aa;
464 .menu-item-transport li.customize-control {
468 .control-section-nav_menu .menu ul.menu-item-transport .menu-item-bar {
473 * Add-menu-items mode.
475 .wp-full-overlay-main {
476 right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */
480 .adding-menu-items .control-section {
484 .adding-menu-items .control-panel.control-section,
485 .adding-menu-items .control-section.open {
489 /* Add-new button. */
490 #customize-theme-controls .add-new-menu-item {
494 -webkit-transition: all 0.2s;
495 transition: all 0.2s;
496 -webkit-user-select: none;
497 -moz-user-select: none;
498 -ms-user-select: none;
503 .add-new-menu-item:before {
505 display: inline-block;
509 font: normal 20px/1 'dashicons';
510 vertical-align: middle;
511 -webkit-transition: all 0.2s;
512 transition: all 0.2s;
513 -webkit-font-smoothing: antialiased;
514 -moz-osx-font-smoothing: grayscale;
517 .adding-menu-items .add-new-menu-item,
518 .adding-menu-items .add-new-menu-item:hover,
519 .add-menu-toggle.open,
520 .add-menu-toggle.open:hover {
522 border-color: #929793;
524 -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
525 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
528 .adding-menu-items .add-new-menu-item:before,
529 #accordion-section-add_menu .add-new-menu-item.open:before {
530 -webkit-transform: rotate(45deg);
531 -ms-transform: rotate(45deg);
532 transform: rotate(45deg);
535 .menu-item-bar .item-delete {
546 .menu-item-bar .item-delete:before {
548 font: normal 20px/1 dashicons;
549 -webkit-font-smoothing: antialiased;
550 -moz-osx-font-smoothing: grayscale;
556 .ie8 .menu-item-bar .item-delete:before {
560 .menu-item-bar .item-delete:hover,
561 .menu-item-bar .item-delete:focus {
565 .menu-item-bar .item-delete:focus {
566 -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
567 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
570 .adding-menu-items .menu-item-bar .item-edit {
574 .adding-menu-items .menu-item-bar .item-delete {
578 #available-menu-items .item {
582 #available-menu-items {
594 -webkit-transition: left .18s;
595 transition: left .18s;
596 border-right: 1px solid #ddd;
599 #available-menu-items.opening {
600 overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
603 #available-menu-items #available-menu-items-search.open {
608 #available-menu-items .accordion-section-title {
614 #available-menu-items .open .accordion-section-title,
615 #available-menu-items #available-menu-items-search .accordion-section-title {
619 /* rework the arrow indicator implementation for NVDA bug see #32715 */
620 #available-menu-items .accordion-section-title:after {
621 content: none !important;
624 #available-menu-items .accordion-section-title .toggle-indicator {
625 display: inline-block;
630 #available-menu-items .accordion-section-title .toggle-indicator:after {
632 font: normal 20px/1 'dashicons';
636 -webkit-font-smoothing: antialiased;
637 -moz-osx-font-smoothing: grayscale;
638 text-decoration: none !important;
641 #available-menu-items .accordion-section-title:hover .toggle-indicator:after {
645 #available-menu-items .open .accordion-section-title .toggle-indicator:after {
649 #available-menu-items .accordion-section-content {
651 max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
652 background: transparent;
655 button.not-a-button {
656 background: transparent;
658 -webkit-box-shadow: none;
660 -webkit-border-radius: 0;
667 #available-menu-items .accordion-section-title button {
677 #available-menu-items .accordion-section-title button:focus {
678 -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
679 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
682 #available-menu-items .accordion-section-title .no-items,
683 #available-menu-items .cannot-expand .accordion-section-title .spinner,
684 #available-menu-items .cannot-expand .accordion-section-title > button {
688 #available-menu-items-search.cannot-expand .accordion-section-title .spinner {
692 #available-menu-items .cannot-expand .accordion-section-title .no-items {
700 #available-menu-items .accordion-section-content {
701 padding: 1px 15px 15px 15px;
707 #available-menu-items #available-menu-items-search .accordion-section-content {
710 top: 60px; /* below title div / search input */
711 bottom: 0px; /* 100% height that still triggers lazy load */
714 padding: 1px 15px 15px;
715 -webkit-box-sizing: border-box;
716 -moz-box-sizing: border-box;
717 box-sizing: border-box;
720 #available-menu-items .menu-item-tpl {
724 #custom-menu-item-name.invalid,
725 #custom-menu-item-url.invalid,
726 .menu-name-field.invalid,
727 .menu-name-field.invalid:focus {
728 border: 1px solid #f00;
731 #available-menu-items .item-tpl {
733 padding: 20px 15px 20px 60px;
734 border-bottom: 1px solid #e4e4e4;
739 #available-menu-items .item-tpl:hover,
740 #available-menu-items .item-tpl.selected {
744 #available-menu-items .menu-item-handle .item-type {
748 #available-menu-items .menu-item-handle .item-title {
752 #available-menu-items .menu-item-handle {
756 #available-menu-items .item-top,
757 #available-menu-items .item-top:hover {
759 background: transparent;
760 -webkit-box-shadow: none;
764 #available-menu-items .menu-item-handle {
765 -webkit-box-shadow: none;
770 #available-menu-items .menu-item-handle:hover {
774 #available-menu-items .item-title h4 {
779 #available-menu-items .item-add {
789 #available-menu-items .menu-item-handle .item-add:focus {
791 -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
792 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
795 #available-menu-items .item-add:before {
797 font: normal 20px/1 dashicons;
803 #available-menu-items .menu-item-handle.item-added .item-type,
804 #available-menu-items .menu-item-handle.item-added .item-title,
805 #available-menu-items .menu-item-handle.item-added:hover .item-add,
806 #available-menu-items .menu-item-handle.item-added .item-add:focus {
810 #available-menu-items .menu-item-handle.item-added .item-add:before {
814 #available-menu-items .accordion-section-title.loading .spinner,
815 #available-menu-items-search.loading .accordion-section-title .spinner {
820 #available-menu-items-search .clear-results {
828 text-decoration: none;
831 #available-menu-items-search .clear-results,
832 #available-menu-items-search.loading .clear-results.is-visible {
836 #available-menu-items-search .clear-results.is-visible {
840 #available-menu-items-search .clear-results:before {
842 font: normal 20px/1 dashicons;
843 -webkit-font-smoothing: antialiased;
844 -moz-osx-font-smoothing: grayscale;
847 #available-menu-items-search .clear-results:hover,
848 #available-menu-items-search .clear-results:focus {
852 #available-menu-items-search .clear-results:focus {
853 -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
854 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
857 #available-menu-items-search .spinner {
860 margin: 0 !important;
864 #available-menu-items-search input {
869 #available-menu-items-search .accordion-section-title {
871 -webkit-box-sizing: border-box;
872 -moz-box-sizing: border-box;
873 box-sizing: border-box;
876 #available-menu-items-search .accordion-section-title:after {
880 #available-menu-items-search .accordion-section-content:empty {
885 #available-menu-items-search.loading .accordion-section-content div {
889 #available-menu-items-search.loading.loading-more .accordion-section-content div {
894 -webkit-transition: all 0.2s;
895 transition: all 0.2s;
898 body.adding-menu-items #available-menu-items {
903 body.adding-menu-items .wp-full-overlay-main {
907 body.adding-menu-items #customize-preview {
911 .menu-item-handle .spinner {
917 .nav-menu-inserted-item-loading .spinner {
921 .nav-menu-inserted-item-loading .menu-item-handle .item-type {
925 .nav-menu-inserted-item-loading .menu-item-handle,
926 .added-menu-item .menu-item-handle.loading {
927 padding: 10px 15px 10px 8px;
934 .added-menu-item .menu-item-handle {
935 -webkit-transition-property: opacity, background, color;
936 transition-property: opacity, background, color;
937 -webkit-transition-duration: 1.25s;
938 transition-duration: 1.25s;
939 -webkit-transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 );
940 transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */
943 /* Add/delete Menus */
945 /* @todo update selector */
946 #accordion-section-add_menu {
950 .new-menu-section-content {
956 /* @todo update selector */
957 #accordion-section-add_menu .accordion-section-title {
961 /* @todo update selector */
962 #accordion-section-add_menu .accordion-section-title:before {
963 font: normal 20px/1 dashicons;
970 #create-new-menu-submit {
982 li.assigned-to-menu-location .menu-delete-item {
986 li.assigned-to-menu-location .add-new-menu-item {
993 text-decoration: underline;
999 text-decoration: none;
1002 .menu-delete:focus {
1003 -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
1004 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
1010 .ui-sortable-disabled .menu-item-handle {
1014 .menu-item-handle:hover {
1020 .menu-item-handle:hover .item-type,
1021 .menu-item-handle:hover .item-edit,
1022 #available-menu-items .menu-item-handle:hover .item-add {
1026 .menu-item-edit-active .menu-item-handle {
1028 border-bottom: none;
1031 .customize-control-nav_menu_item {
1035 .customize-control-nav_menu {
1039 #available-menu-items .customize-section-title {
1043 @media screen and ( max-width: 782px ) {
1044 #available-menu-items #available-menu-items-search .accordion-section-content {
1049 @media screen and ( max-width: 640px ) {
1050 body.adding-menu-items div#available-menu-items {
1057 #available-menu-items #available-menu-items-search .accordion-section-content {
1061 #available-menu-items .customize-section-title {
1066 #available-menu-items .customize-section-back {
1070 #available-menu-items .customize-section-title h3 {
1073 padding: 9px 10px 12px 14px;
1079 white-space: nowrap;
1080 text-overflow: ellipsis;
1083 #available-menu-items .customize-section-title .customize-action {
1088 white-space: nowrap;
1089 text-overflow: ellipsis;