1 #customize-theme-controls #accordion-section-menu_locations {
6 #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
7 border-bottom-color: #ddd;
17 #customize-controls .theme-location-set,
18 #customize-controls .control-section .accordion-section-title:focus .menu-in-location,
19 #customize-controls .control-section .accordion-section-title:hover .menu-in-location {
23 /* The `edit-menu` button uses also the `button-link` class. */
24 .customize-control-nav_menu_location .edit-menu {
26 vertical-align: middle;
29 text-decoration: underline;
32 .customize-control-nav_menu_location .edit-menu:hover,
33 .customize-control-nav_menu_location .edit-menu:active {
37 .customize-control-nav_menu_location .edit-menu:focus {
41 .wp-customizer .menu-item-bar .menu-item-handle,
42 .wp-customizer .menu-item-settings,
43 .wp-customizer .menu-item-settings .description-thin {
44 -webkit-box-sizing: border-box;
45 -moz-box-sizing: border-box;
46 box-sizing: border-box;
49 .wp-customizer .menu-item-bar {
53 .wp-customizer .menu-item-bar .menu-item-handle {
58 .wp-customizer .menu-item-handle .item-title {
62 .wp-customizer .menu-item-handle .item-type {
63 padding: 1px 5px 0 21px;
68 .wp-customizer .menu-item-handle:hover {
72 .customize-control-nav_menu_item.has-notifications .menu-item-handle {
73 border-right: 4px solid #00a0d2;
76 .wp-customizer .menu-item-settings {
82 border: 1px solid #999;
86 .wp-customizer .menu-item-settings .description-thin {
92 .wp-customizer .menu-item-settings input[type="text"] {
96 .wp-customizer .menu-item-settings .submitbox {
101 .wp-customizer .menu-item-settings .link-to-original {
109 .wp-customizer .menu-item .submitbox .submitdelete {
118 * Menu items reordering styles
121 .menu-item-reorder-nav {
123 background-color: #fff;
129 .menus-move-left:before {
133 .menus-move-right:before {
137 .reordering .menu-item .item-controls,
138 .reordering .menu-item .item-type {
142 .reordering .menu-item-reorder-nav {
146 .customize-control input.menu-name-field {
147 width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
151 .wp-customizer .menu-item .item-edit {
158 margin-left: 0 !important;
159 -webkit-box-shadow: none;
166 .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after {
170 .wp-customizer .menu-item-settings p.description {
174 .wp-customizer .menu-settings dl {
179 .wp-customizer .menu-settings .checkbox-input {
183 .wp-customizer .menu-settings .menu-theme-locations {
184 border-top: 1px solid #ccc;
187 .wp-customizer .menu-settings {
192 .menu-settings .customize-control-checkbox label {
196 /* @todo update selector or potentially remove */
197 .menu-settings .customize-control.customize-control-checkbox {
198 margin-bottom: 8px; /* Override collapsing at smaller viewports. */
201 .customize-control-menu {
205 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
210 .customize-screen-options-toggle {
222 #customize-controls .customize-info .customize-help-toggle {
226 #customize-controls .customize-info .customize-help-toggle:before {
230 .customize-screen-options-toggle:hover,
231 .customize-screen-options-toggle:active,
232 .customize-screen-options-toggle:focus,
233 .active-menu-screen-options .customize-screen-options-toggle,
234 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
235 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
236 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
240 .customize-screen-options-toggle:focus,
241 #customize-controls .customize-info .customize-help-toggle:focus {
245 .customize-screen-options-toggle:before {
246 -moz-osx-font-smoothing: grayscale;
250 font: 18px/1 dashicons;
253 text-decoration: none !important;
260 .customize-screen-options-toggle:focus:before,
261 #customize-controls .customize-info .customize-help-toggle:focus:before {
262 -webkit-border-radius: 100%;
266 .wp-customizer #screen-options-wrap {
269 border-top: 1px solid #ddd;
270 padding: 4px 15px 15px;
273 .wp-customizer .metabox-prefs label {
279 /* rework the arrow indicator implementation for NVDA bug same as #32715 */
280 .wp-customizer .toggle-indicator {
281 display: inline-block;
284 text-indent: -1px; /* account for the dashicon alignment */
287 .rtl .wp-customizer .toggle-indicator {
288 text-indent: 1px; /* account for the dashicon alignment */
291 .wp-customizer .toggle-indicator:after {
295 -webkit-border-radius: 50%;
298 font: normal 20px/1 dashicons;
299 -webkit-font-smoothing: antialiased;
300 -moz-osx-font-smoothing: grayscale;
301 text-decoration: none !important;
304 .control-section-nav_menu .field-link-target,
305 .control-section-nav_menu .field-title-attribute,
306 .control-section-nav_menu .field-css-classes,
307 .control-section-nav_menu .field-xfn,
308 .control-section-nav_menu .field-description {
312 .control-section-nav_menu.field-link-target-active .field-link-target,
313 .control-section-nav_menu.field-title-attribute-active .field-title-attribute,
314 .control-section-nav_menu.field-css-classes-active .field-css-classes,
315 .control-section-nav_menu.field-xfn-active .field-xfn,
316 .control-section-nav_menu.field-description-active .field-description {
320 /* WARNING: The 20px factor is hard-coded in JS. */
321 .menu-item-depth-0 { margin-right: 0; }
322 .menu-item-depth-1 { margin-right: 20px; }
323 .menu-item-depth-2 { margin-right: 40px; }
324 .menu-item-depth-3 { margin-right: 60px; }
325 .menu-item-depth-4 { margin-right: 80px; }
326 .menu-item-depth-5 { margin-right: 100px; }
327 .menu-item-depth-6 { margin-right: 120px; }
328 .menu-item-depth-7 { margin-right: 140px; }
329 .menu-item-depth-8 { margin-right: 160px; } /* Not likely to be used or useful beyond this depth */
330 .menu-item-depth-9 { margin-right: 180px; }
331 .menu-item-depth-10 { margin-right: 200px; }
332 .menu-item-depth-11 { margin-right: 220px; }
334 /* @todo handle .menu-item-settings width */
335 .menu-item-depth-0 > .menu-item-bar { margin-left: 0; }
336 .menu-item-depth-1 > .menu-item-bar { margin-left: 20px; }
337 .menu-item-depth-2 > .menu-item-bar { margin-left: 40px; }
338 .menu-item-depth-3 > .menu-item-bar { margin-left: 60px; }
339 .menu-item-depth-4 > .menu-item-bar { margin-left: 80px; }
340 .menu-item-depth-5 > .menu-item-bar { margin-left: 100px; }
341 .menu-item-depth-6 > .menu-item-bar { margin-left: 120px; }
342 .menu-item-depth-7 > .menu-item-bar { margin-left: 140px; }
343 .menu-item-depth-8 > .menu-item-bar { margin-left: 160px; }
344 .menu-item-depth-9 > .menu-item-bar { margin-left: 180px; }
345 .menu-item-depth-10 > .menu-item-bar { margin-left: 200px; }
346 .menu-item-depth-11 > .menu-item-bar { margin-left: 220px; }
348 /* Submenu left margin. */
349 .menu-item-depth-0 .menu-item-transport { margin-right: 0; }
350 .menu-item-depth-1 .menu-item-transport { margin-right: -20px; }
351 .menu-item-depth-3 .menu-item-transport { margin-right: -60px; }
352 .menu-item-depth-4 .menu-item-transport { margin-right: -80px; }
353 .menu-item-depth-2 .menu-item-transport { margin-right: -40px; }
354 .menu-item-depth-5 .menu-item-transport { margin-right: -100px; }
355 .menu-item-depth-6 .menu-item-transport { margin-right: -120px; }
356 .menu-item-depth-7 .menu-item-transport { margin-right: -140px; }
357 .menu-item-depth-8 .menu-item-transport { margin-right: -160px; }
358 .menu-item-depth-9 .menu-item-transport { margin-right: -180px; }
359 .menu-item-depth-10 .menu-item-transport { margin-right: -200px; }
360 .menu-item-depth-11 .menu-item-transport { margin-right: -220px; }
362 /* WARNING: The 20px factor is hard-coded in JS. */
363 .reordering .menu-item-depth-0 { margin-right: 0; }
364 .reordering .menu-item-depth-1 { margin-right: 15px; }
365 .reordering .menu-item-depth-2 { margin-right: 30px; }
366 .reordering .menu-item-depth-3 { margin-right: 45px; }
367 .reordering .menu-item-depth-4 { margin-right: 60px; }
368 .reordering .menu-item-depth-5 { margin-right: 75px; }
369 .reordering .menu-item-depth-6 { margin-right: 90px; }
370 .reordering .menu-item-depth-7 { margin-right: 105px; }
371 .reordering .menu-item-depth-8 { margin-right: 120px; } /* Not likely to be used or useful beyond this depth */
372 .reordering .menu-item-depth-9 { margin-right: 135px; }
373 .reordering .menu-item-depth-10 { margin-right: 150px; }
374 .reordering .menu-item-depth-11 { margin-right: 165px; }
376 .reordering .menu-item-depth-0 > .menu-item-bar { margin-left: 0; }
377 .reordering .menu-item-depth-1 > .menu-item-bar { margin-left: 15px; }
378 .reordering .menu-item-depth-2 > .menu-item-bar { margin-left: 30px; }
379 .reordering .menu-item-depth-3 > .menu-item-bar { margin-left: 45px; }
380 .reordering .menu-item-depth-4 > .menu-item-bar { margin-left: 60px; }
381 .reordering .menu-item-depth-5 > .menu-item-bar { margin-left: 75px; }
382 .reordering .menu-item-depth-6 > .menu-item-bar { margin-left: 90px; }
383 .reordering .menu-item-depth-7 > .menu-item-bar { margin-left: 105px; }
384 .reordering .menu-item-depth-8 > .menu-item-bar { margin-left: 120px; }
385 .reordering .menu-item-depth-9 > .menu-item-bar { margin-left: 135px; }
386 .reordering .menu-item-depth-10 > .menu-item-bar { margin-left: 150px; }
387 .reordering .menu-item-depth-11 > .menu-item-bar { margin-left: 165px; }
389 .control-section-nav_menu.menu .menu-item-edit-active {
393 .control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
397 .control-section-nav_menu.menu .sortable-placeholder {
400 max-width: -webkit-calc(100% - 2px);
401 max-width: calc(100% - 2px);
404 border-color: #a0a5aa;
407 .menu-item-transport li.customize-control {
411 .control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
416 * Add-menu-items mode
419 .adding-menu-items .control-section {
423 .adding-menu-items .control-panel.control-section,
424 .adding-menu-items .control-section.open {
428 .menu-item-bar .item-delete {
439 .menu-item-bar .item-delete:before {
444 -webkit-border-radius: 50%;
446 font: normal 20px/1 dashicons;
447 -webkit-font-smoothing: antialiased;
448 -moz-osx-font-smoothing: grayscale;
451 .ie8 .menu-item-bar .item-delete:before {
455 .menu-item-bar .item-delete:hover,
456 .menu-item-bar .item-delete:focus {
457 -webkit-box-shadow: none;
463 .adding-menu-items .menu-item-bar .item-edit {
467 .adding-menu-items .menu-item-bar .item-delete {
472 * Styles for menu-item addition panel
475 #available-menu-items.opening {
476 overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
479 #available-menu-items #available-menu-items-search.open {
484 #available-menu-items .accordion-section-title {
488 -webkit-transition: background-color 0.15s;
489 transition: background-color 0.15s;
490 /* Reset the value inherited from the base .accordion-section-title style. Ticket #37589. */
491 -webkit-user-select: auto;
492 -moz-user-select: auto;
493 -ms-user-select: auto;
497 #available-menu-items .open .accordion-section-title,
498 #available-menu-items #available-menu-items-search .accordion-section-title {
502 /* rework the arrow indicator implementation for NVDA bug see #32715 */
503 #available-menu-items .accordion-section-title:after {
504 content: none !important;
507 #available-menu-items .accordion-section-title:hover .toggle-indicator:after,
508 #available-menu-items .button-link:hover .toggle-indicator:after,
509 #available-menu-items .button-link:focus .toggle-indicator:after {
513 #available-menu-items .open .accordion-section-title .toggle-indicator:after {
518 #available-menu-items .available-menu-items-list {
520 max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
521 background: transparent;
524 #available-menu-items .accordion-section-title button {
531 -webkit-box-shadow: none;
537 #available-menu-items .accordion-section-title .no-items,
538 #available-menu-items .cannot-expand .accordion-section-title .spinner,
539 #available-menu-items .cannot-expand .accordion-section-title > button {
543 #available-menu-items-search.cannot-expand .accordion-section-title .spinner {
547 #available-menu-items .cannot-expand .accordion-section-title .no-items {
554 #available-menu-items .accordion-section-content {
559 background: transparent;
562 #available-menu-items .accordion-section-content .available-menu-items-list {
564 padding: 1px 15px 15px 15px;
567 #available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */
571 #new-custom-menu-item .accordion-section-content {
572 padding: 0 15px 15px 15px;
575 #available-menu-items .menu-item-tpl {
579 #custom-menu-item-name.invalid,
580 #custom-menu-item-url.invalid,
581 .menu-name-field.invalid,
582 .menu-name-field.invalid:focus,
583 #available-menu-items .new-content-item .create-item-input.invalid,
584 #available-menu-items .new-content-item .create-item-input.invalid:focus {
585 border: 1px solid #f00;
588 #available-menu-items .menu-item-handle .item-type {
592 #available-menu-items .menu-item-handle .item-title {
596 #available-menu-items .menu-item-handle {
600 #available-menu-items .menu-item-handle {
601 -webkit-box-shadow: none;
606 #available-menu-items .menu-item-handle:hover {
610 #available-menu-items .item-title h4 {
615 #available-menu-items .item-add {
622 -webkit-box-shadow: none;
628 #available-menu-items .menu-item-handle .item-add:focus {
632 #available-menu-items .item-add:before {
637 display: inline-block;
639 -webkit-border-radius: 50%;
641 font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */
644 #available-menu-items .menu-item-handle.item-added .item-type,
645 #available-menu-items .menu-item-handle.item-added .item-title,
646 #available-menu-items .menu-item-handle.item-added:hover .item-add,
647 #available-menu-items .menu-item-handle.item-added .item-add:focus {
651 #available-menu-items .menu-item-handle.item-added .item-add:before {
655 #available-menu-items .accordion-section-title.loading .spinner,
656 #available-menu-items-search.loading .accordion-section-title .spinner {
661 #available-menu-items-search .spinner {
663 top: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */
665 margin: 0 !important;
668 /* search results list */
669 #available-menu-items #available-menu-items-search .accordion-section-content {
672 top: 60px; /* below title div / search input */
673 bottom: 0px; /* 100% height that still triggers lazy load */
676 padding: 1px 15px 15px;
677 -webkit-box-sizing: border-box;
678 -moz-box-sizing: border-box;
679 box-sizing: border-box;
682 #available-menu-items-search .nothing-found {
683 /* Compensate the 1px top padding of the container. */
687 #available-menu-items-search .accordion-section-title:after {
691 #available-menu-items-search .accordion-section-content:empty {
696 #available-menu-items-search.loading .accordion-section-content div {
700 #available-menu-items-search.loading.loading-more .accordion-section-content div {
705 -webkit-transition: all 0.2s;
706 transition: all 0.2s;
709 body.adding-menu-items #available-menu-items {
714 body.adding-menu-items .wp-full-overlay-main {
718 body.adding-menu-items #customize-preview {
722 .menu-item-handle .spinner {
728 .nav-menu-inserted-item-loading .spinner {
732 .nav-menu-inserted-item-loading .menu-item-handle .item-type {
736 .nav-menu-inserted-item-loading .menu-item-handle,
737 .added-menu-item .menu-item-handle.loading {
738 padding: 10px 8px 10px 15px;
745 .added-menu-item .menu-item-handle {
746 -webkit-transition-property: opacity, background, color;
747 transition-property: opacity, background, color;
748 -webkit-transition-duration: 1.25s;
749 transition-duration: 1.25s;
750 -webkit-transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 );
751 transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */
754 /* Add/delete Menus */
756 #customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {
757 border-bottom-color: #ddd;
760 /* @todo update selector */
761 #accordion-section-add_menu {
766 .new-menu-section-content {
772 /* @todo update selector */
773 #accordion-section-add_menu .accordion-section-title {
777 /* @todo update selector */
778 #accordion-section-add_menu .accordion-section-title:before {
779 font: normal 20px/1 dashicons;
786 #create-new-menu-submit {
797 li.assigned-to-menu-location .menu-delete-item {
801 li.assigned-to-menu-location .add-new-menu-item {
808 text-decoration: underline;
814 text-decoration: none;
820 .ui-sortable-disabled .menu-item-handle {
824 .menu-item-handle:hover {
830 .menu-item-handle:hover .item-type,
831 .menu-item-handle:hover .item-edit,
832 #available-menu-items .menu-item-handle:hover .item-add {
836 .menu-item-edit-active .menu-item-handle {
841 .customize-control-nav_menu_item {
845 .customize-control-nav_menu {
853 .wp-customizer .menu-item .submitbox .submitdelete:focus,
854 .customize-screen-options-toggle:focus:before,
855 #customize-controls .customize-info .customize-help-toggle:focus:before,
856 .wp-customizer button:focus .toggle-indicator:after,
858 .menu-item-bar .item-delete:focus:before,
859 #available-menu-items .item-add:focus:before {
862 0 0 2px 1px rgba(30, 140, 190, .8);
865 0 0 2px 1px rgba(30, 140, 190, .8);
869 @media screen and ( max-width: 782px ) {
870 #available-menu-items #available-menu-items-search .accordion-section-content {
875 @media screen and ( max-width: 640px ) {
876 #available-menu-items #available-menu-items-search .accordion-section-content {