6fe558d28fa22c8d6940284792ce1640bf214dd8
[autoinstalls/wordpress.git] / wp-admin / css / customize-nav-menus.css
1 #customize-theme-controls #accordion-section-menu_locations {
2         position: relative;
3         margin-bottom: 15px;
4 }
5
6 #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
7         border-bottom-color: #ddd;
8 }
9
10 .menu-in-location,
11 .menu-in-locations {
12         display: block;
13         font-weight: 600;
14         font-size: 10px;
15 }
16
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 {
20         color: #555;
21 }
22
23 /* The `edit-menu` button uses also the `button-link` class. */
24 .customize-control-nav_menu_location .edit-menu {
25         margin-left: 6px;
26         vertical-align: middle;
27         line-height: 28px;
28         color: #0073aa;
29         text-decoration: underline;
30 }
31
32 .customize-control-nav_menu_location .edit-menu:hover,
33 .customize-control-nav_menu_location .edit-menu:active {
34         color: #00a0d2;
35 }
36
37 .customize-control-nav_menu_location .edit-menu:focus {
38         color: #124964;
39 }
40
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;
47 }
48
49 .wp-customizer .menu-item-bar {
50         margin: 0;
51 }
52
53 .wp-customizer .menu-item-bar .menu-item-handle {
54         width: 100%;
55         background: #fff;
56 }
57
58 .wp-customizer .menu-item-handle .item-title {
59         margin-right: 0;
60 }
61
62 .wp-customizer .menu-item-handle .item-type {
63         padding: 1px 21px 0 5px;
64         float: right;
65         text-align: right;
66 }
67
68 .wp-customizer .menu-item-handle:hover {
69         z-index: 8;
70 }
71
72 .customize-control-nav_menu_item.has-notifications .menu-item-handle {
73         border-left: 4px solid #00a0d2;
74 }
75
76 .wp-customizer .menu-item-settings {
77         max-width: 100%;
78         overflow: hidden;
79         z-index: 8;
80         padding: 10px;
81         background: #eee;
82         border: 1px solid #999;
83         border-top: none;
84 }
85
86 .wp-customizer .menu-item-settings .description-thin {
87         width: 100%;
88         height: auto;
89         margin: 0 0 8px 0;
90 }
91
92 .wp-customizer .menu-item-settings input[type="text"] {
93         width: 100%;
94 }
95
96 .wp-customizer .menu-item-settings .submitbox {
97         margin: 0;
98         padding: 0;
99 }
100
101 .wp-customizer .menu-item-settings .link-to-original {
102         padding: 5px 0;
103         border: none;
104         font-style: normal;
105         margin: 0;
106         width: 100%;
107 }
108
109 .wp-customizer .menu-item .submitbox .submitdelete {
110         float: left;
111         margin: 6px 0 0;
112         padding: 0;
113         cursor: pointer;
114 }
115
116
117 /**
118  * Menu items reordering styles
119  */
120
121 .menu-item-reorder-nav {
122         display: none;
123         background-color: #fff;
124         position: absolute;
125         top: 0;
126         right: 0;
127 }
128
129 .menus-move-left:before {
130         content: "\f341";
131 }
132
133 .menus-move-right:before {
134         content: "\f345";
135 }
136
137 .reordering .menu-item .item-controls,
138 .reordering .menu-item .item-type {
139         display: none;
140 }
141
142 .reordering .menu-item-reorder-nav {
143         display: block;
144 }
145
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. */
148         margin: 12px 0;
149 }
150
151 .wp-customizer .menu-item .item-edit {
152         position: absolute;
153         right: -19px;
154         top: 2px;
155         display: block;
156         width: 30px;
157         height: 38px;
158         margin-right: 0 !important;
159         -webkit-box-shadow: none;
160         box-shadow: none;
161         outline: none;
162         overflow: hidden;
163         cursor: pointer;
164 }
165
166 .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after {
167         content: "\f142";
168 }
169
170 .wp-customizer .menu-item-settings p.description {
171         font-style: normal;
172 }
173
174 .wp-customizer .menu-settings dl {
175         margin: 12px 0 0 0;
176         padding: 0;
177 }
178
179 .wp-customizer .menu-settings .checkbox-input {
180         margin-top: 8px;
181 }
182
183 .wp-customizer .menu-settings .menu-theme-locations {
184         border-top: 1px solid #ccc;
185 }
186
187 .wp-customizer .menu-settings {
188         margin-top: 36px;
189         border-top: none;
190 }
191
192 .menu-settings .customize-control-checkbox label {
193         line-height: 1;
194 }
195
196 /* @todo update selector or potentially remove */
197 .menu-settings .customize-control.customize-control-checkbox {
198         margin-bottom: 8px; /* Override collapsing at smaller viewports. */
199 }
200
201 .customize-control-menu {
202         margin-top: 4px;
203 }
204
205 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
206         color: #555;
207 }
208
209 /* Screen Options */
210 .customize-screen-options-toggle {
211         background: none;
212         border: none;
213         color: #555;
214         cursor: pointer;
215         margin: 0;
216         padding: 20px;
217         position: absolute;
218         right: 0;
219         top: 30px;
220 }
221
222 #customize-controls .customize-info .customize-help-toggle {
223         padding: 20px;
224 }
225
226 #customize-controls .customize-info .customize-help-toggle:before {
227         padding: 4px;
228 }
229
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 {
237         color: #0073aa;
238 }
239
240 .customize-screen-options-toggle:focus,
241 #customize-controls .customize-info .customize-help-toggle:focus {
242         outline: none;
243 }
244
245 .customize-screen-options-toggle:before {
246         -moz-osx-font-smoothing: grayscale;
247         border: none;
248         content: "\f111";
249         display: block;
250         font: 18px/1 dashicons;
251         padding: 5px;
252         text-align: center;
253         text-decoration: none !important;
254         text-indent: 0;
255         left: 6px;
256         position: absolute;
257         top: 6px;
258 }
259
260 .customize-screen-options-toggle:focus:before,
261 #customize-controls .customize-info .customize-help-toggle:focus:before {
262         -webkit-border-radius: 100%;
263         border-radius: 100%;
264 }
265
266 .wp-customizer #screen-options-wrap {
267         display: none;
268         background: #fff;
269         border-top: 1px solid #ddd;
270         padding: 4px 15px 15px;
271 }
272
273 .wp-customizer .metabox-prefs label {
274         display: block;
275         padding-right: 0;
276         line-height: 30px;
277 }
278
279 /* rework the arrow indicator implementation for NVDA bug same as #32715 */
280 .wp-customizer .toggle-indicator {
281         display: inline-block;
282         font-size: 20px;
283         line-height: 1;
284         text-indent: -1px; /* account for the dashicon alignment */
285 }
286
287 .rtl .wp-customizer .toggle-indicator {
288         text-indent: 1px; /* account for the dashicon alignment */
289 }
290
291 .wp-customizer .toggle-indicator:after {
292         content: "\f140";
293         speak: none;
294         vertical-align: top;
295         -webkit-border-radius: 50%;
296         border-radius: 50%;
297         color: #72777c;
298         font: normal 20px/1 dashicons;
299         -webkit-font-smoothing: antialiased;
300         -moz-osx-font-smoothing: grayscale;
301         text-decoration: none !important;
302 }
303
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 {
309         display: none;
310 }
311
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 {
317         display: block;
318 }
319
320 /* WARNING: The 20px factor is hard-coded in JS. */
321 .menu-item-depth-0  { margin-left: 0;     }
322 .menu-item-depth-1  { margin-left: 20px;  }
323 .menu-item-depth-2  { margin-left: 40px;  }
324 .menu-item-depth-3  { margin-left: 60px;  }
325 .menu-item-depth-4  { margin-left: 80px;  }
326 .menu-item-depth-5  { margin-left: 100px; }
327 .menu-item-depth-6  { margin-left: 120px; }
328 .menu-item-depth-7  { margin-left: 140px; }
329 .menu-item-depth-8  { margin-left: 160px; } /* Not likely to be used or useful beyond this depth */
330 .menu-item-depth-9  { margin-left: 180px; }
331 .menu-item-depth-10 { margin-left: 200px; }
332 .menu-item-depth-11 { margin-left: 220px; }
333
334 /* @todo handle .menu-item-settings width */
335 .menu-item-depth-0  > .menu-item-bar { margin-right: 0;     }
336 .menu-item-depth-1  > .menu-item-bar { margin-right: 20px;  }
337 .menu-item-depth-2  > .menu-item-bar { margin-right: 40px;  }
338 .menu-item-depth-3  > .menu-item-bar { margin-right: 60px;  }
339 .menu-item-depth-4  > .menu-item-bar { margin-right: 80px;  }
340 .menu-item-depth-5  > .menu-item-bar { margin-right: 100px; }
341 .menu-item-depth-6  > .menu-item-bar { margin-right: 120px; }
342 .menu-item-depth-7  > .menu-item-bar { margin-right: 140px; }
343 .menu-item-depth-8  > .menu-item-bar { margin-right: 160px; }
344 .menu-item-depth-9  > .menu-item-bar { margin-right: 180px; }
345 .menu-item-depth-10 > .menu-item-bar { margin-right: 200px; }
346 .menu-item-depth-11 > .menu-item-bar { margin-right: 220px; }
347
348 /* Submenu left margin. */
349 .menu-item-depth-0  .menu-item-transport { margin-left: 0;      }
350 .menu-item-depth-1  .menu-item-transport { margin-left: -20px;  }
351 .menu-item-depth-3  .menu-item-transport { margin-left: -60px;  }
352 .menu-item-depth-4  .menu-item-transport { margin-left: -80px;  }
353 .menu-item-depth-2  .menu-item-transport { margin-left: -40px;  }
354 .menu-item-depth-5  .menu-item-transport { margin-left: -100px; }
355 .menu-item-depth-6  .menu-item-transport { margin-left: -120px; }
356 .menu-item-depth-7  .menu-item-transport { margin-left: -140px; }
357 .menu-item-depth-8  .menu-item-transport { margin-left: -160px; }
358 .menu-item-depth-9  .menu-item-transport { margin-left: -180px; }
359 .menu-item-depth-10 .menu-item-transport { margin-left: -200px; }
360 .menu-item-depth-11 .menu-item-transport { margin-left: -220px; }
361
362 /* WARNING: The 20px factor is hard-coded in JS. */
363 .reordering .menu-item-depth-0  { margin-left: 0;     }
364 .reordering .menu-item-depth-1  { margin-left: 15px;  }
365 .reordering .menu-item-depth-2  { margin-left: 30px;  }
366 .reordering .menu-item-depth-3  { margin-left: 45px;  }
367 .reordering .menu-item-depth-4  { margin-left: 60px;  }
368 .reordering .menu-item-depth-5  { margin-left: 75px;  }
369 .reordering .menu-item-depth-6  { margin-left: 90px;  }
370 .reordering .menu-item-depth-7  { margin-left: 105px; }
371 .reordering .menu-item-depth-8  { margin-left: 120px; } /* Not likely to be used or useful beyond this depth */
372 .reordering .menu-item-depth-9  { margin-left: 135px; }
373 .reordering .menu-item-depth-10 { margin-left: 150px; }
374 .reordering .menu-item-depth-11 { margin-left: 165px; }
375
376 .reordering .menu-item-depth-0  > .menu-item-bar { margin-right: 0;     }
377 .reordering .menu-item-depth-1  > .menu-item-bar { margin-right: 15px;  }
378 .reordering .menu-item-depth-2  > .menu-item-bar { margin-right: 30px;  }
379 .reordering .menu-item-depth-3  > .menu-item-bar { margin-right: 45px;  }
380 .reordering .menu-item-depth-4  > .menu-item-bar { margin-right: 60px;  }
381 .reordering .menu-item-depth-5  > .menu-item-bar { margin-right: 75px;  }
382 .reordering .menu-item-depth-6  > .menu-item-bar { margin-right: 90px;  }
383 .reordering .menu-item-depth-7  > .menu-item-bar { margin-right: 105px; }
384 .reordering .menu-item-depth-8  > .menu-item-bar { margin-right: 120px; }
385 .reordering .menu-item-depth-9  > .menu-item-bar { margin-right: 135px; }
386 .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
387 .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
388
389 .control-section-nav_menu.menu .menu-item-edit-active {
390         margin-left: 0;
391 }
392
393 .control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
394         margin-right: 0;
395 }
396
397 .control-section-nav_menu.menu .sortable-placeholder {
398         margin-top: 0;
399         margin-bottom: 1px;
400         max-width: -webkit-calc(100% - 2px);
401         max-width: calc(100% - 2px);
402         float: left;
403         display: list-item;
404         border-color: #a0a5aa;
405 }
406
407 .menu-item-transport li.customize-control {
408         float: none;
409 }
410
411 .control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
412         margin-top: 0;
413 }
414
415 /**
416  * Add-menu-items mode
417  */
418
419 .adding-menu-items .control-section {
420         opacity: .4;
421 }
422
423 .adding-menu-items .control-panel.control-section,
424 .adding-menu-items .control-section.open {
425         opacity: 1;
426 }
427
428 .menu-item-bar .item-delete {
429         color: #a00;
430         position: absolute;
431         top: 2px;
432         right: -19px;
433         width: 30px;
434         height: 38px;
435         cursor: pointer;
436         display: none;
437 }
438
439 .menu-item-bar .item-delete:before {
440         content: "\f335";
441         position: absolute;
442         top: 9px;
443         left: 5px;
444         -webkit-border-radius: 50%;
445         border-radius: 50%;
446         font: normal 20px/1 dashicons;
447         -webkit-font-smoothing: antialiased;
448         -moz-osx-font-smoothing: grayscale;
449 }
450
451 .ie8 .menu-item-bar .item-delete:before {
452         top: -10px;
453 }
454
455 .menu-item-bar .item-delete:hover,
456 .menu-item-bar .item-delete:focus {
457         -webkit-box-shadow: none;
458         box-shadow: none;
459         outline: none;
460         color: #f00;
461 }
462
463 .adding-menu-items .menu-item-bar .item-edit {
464         display: none;
465 }
466
467 .adding-menu-items .menu-item-bar .item-delete {
468         display: block;
469 }
470
471 /**
472  * Styles for menu-item addition panel
473  */
474
475 #available-menu-items.opening {
476         overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
477 }
478
479 #available-menu-items #available-menu-items-search.open {
480         height: 100%;
481         border-bottom: none;
482 }
483
484 #available-menu-items .accordion-section-title {
485         border-left: none;
486         border-right: none;
487         background: #fff;
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;
494         user-select: auto;
495 }
496
497 #available-menu-items .open .accordion-section-title,
498 #available-menu-items #available-menu-items-search .accordion-section-title {
499         background: #eee;
500 }
501
502 /* rework the arrow indicator implementation for NVDA bug see #32715 */
503 #available-menu-items .accordion-section-title:after {
504         content: none !important;
505 }
506
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 {
510         color: #23282d;
511 }
512
513 #available-menu-items .open .accordion-section-title .toggle-indicator:after {
514         content: "\f142";
515         color: #23282d;
516 }
517
518 #available-menu-items .available-menu-items-list {
519         overflow-y: auto;
520         max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
521         background: transparent;
522 }
523
524 #available-menu-items .accordion-section-title button {
525         display: block;
526         width: 28px;
527         height: 35px;
528         position: absolute;
529         top: 5px;
530         right: 5px;
531         -webkit-box-shadow: none;
532         box-shadow: none;
533         outline: none;
534         cursor: pointer;
535 }
536
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 {
540         display: none;
541 }
542
543 #available-menu-items-search.cannot-expand .accordion-section-title .spinner {
544         display: block;
545 }
546
547 #available-menu-items .cannot-expand .accordion-section-title .no-items {
548         float: right;
549         color: #555d66;
550         font-weight: 400;
551         margin-left: 5px;
552 }
553
554 #available-menu-items .accordion-section-content {
555         max-height: 290px;
556         margin: 0;
557         padding: 0;
558         position: relative;
559         background: transparent;
560 }
561
562 #available-menu-items .accordion-section-content .available-menu-items-list {
563         margin: 0 0 45px 0;
564         padding: 1px 15px 15px 15px;
565 }
566
567 #available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */
568         margin-bottom: 0;
569 }
570
571 #new-custom-menu-item .accordion-section-content {
572         padding: 0 15px 15px 15px;
573 }
574
575 #available-menu-items .menu-item-tpl {
576         margin: 0;
577 }
578
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;
586 }
587
588 #available-menu-items .menu-item-handle .item-type {
589         padding-right: 0;
590 }
591
592 #available-menu-items .menu-item-handle .item-title {
593         padding-left: 20px;
594 }
595
596 #available-menu-items .menu-item-handle {
597         cursor: pointer;
598 }
599
600 #available-menu-items .menu-item-handle {
601         -webkit-box-shadow: none;
602         box-shadow: none;
603         margin-top: -1px;
604 }
605
606 #available-menu-items .menu-item-handle:hover {
607         z-index: 1;
608 }
609
610 #available-menu-items .item-title h4 {
611         padding: 0 0 5px;
612         font-size: 14px;
613 }
614
615 #available-menu-items .item-add {
616         position: absolute;
617         top: 1px;
618         left: 1px;
619         color: #82878c;
620         width: 30px;
621         height: 38px;
622         -webkit-box-shadow: none;
623         box-shadow: none;
624         outline: none;
625         cursor: pointer;
626 }
627
628 #available-menu-items .menu-item-handle .item-add:focus {
629         color: #23282d;
630 }
631
632 #available-menu-items .item-add:before {
633         content: "\f543";
634         position: relative;
635         left: 2px;
636         top: 3px;
637         display: inline-block;
638         height: 20px;
639         -webkit-border-radius: 50%;
640         border-radius: 50%;
641         font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */
642 }
643
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 {
648         color: #82878c;
649 }
650
651 #available-menu-items .menu-item-handle.item-added .item-add:before {
652         content: "\f147";
653 }
654
655 #available-menu-items .accordion-section-title.loading .spinner,
656 #available-menu-items-search.loading .accordion-section-title .spinner {
657         visibility: visible;
658         margin: 0 20px;
659 }
660
661 #available-menu-items-search .spinner {
662         position: absolute;
663         top: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */
664         right: 21px;
665         margin: 0 !important;
666 }
667
668 /* search results list */
669 #available-menu-items #available-menu-items-search .accordion-section-content {
670         position: absolute;
671         left: 0;
672         top: 60px; /* below title div / search input */
673         bottom: 0px; /* 100% height that still triggers lazy load */
674         max-height: none;
675         width: 100%;
676         padding: 1px 15px 15px;
677         -webkit-box-sizing: border-box;
678         -moz-box-sizing: border-box;
679         box-sizing: border-box;
680 }
681
682 #available-menu-items-search .nothing-found {
683         /* Compensate the 1px top padding of the container. */
684         margin-top: -1px;
685 }
686
687 #available-menu-items-search .accordion-section-title:after {
688         display: none;
689 }
690
691 #available-menu-items-search .accordion-section-content:empty {
692         min-height: 0;
693         padding: 0;
694 }
695
696 #available-menu-items-search.loading .accordion-section-content div {
697         opacity: .5;
698 }
699
700 #available-menu-items-search.loading.loading-more .accordion-section-content div {
701         opacity: 1;
702 }
703
704 #customize-preview {
705         -webkit-transition: all 0.2s;
706         transition: all 0.2s;
707 }
708
709 body.adding-menu-items #available-menu-items {
710         left: 0;
711         visibility: visible;
712 }
713
714 body.adding-menu-items .wp-full-overlay-main {
715         left: 300px;
716 }
717
718 body.adding-menu-items #customize-preview {
719         opacity: 0.4;
720 }
721
722 .menu-item-handle .spinner {
723         display: none;
724         float: left;
725         margin: 0 8px 0 0;
726 }
727
728 .nav-menu-inserted-item-loading .spinner {
729         display: block;
730 }
731
732 .nav-menu-inserted-item-loading .menu-item-handle .item-type {
733         padding: 0 0 0 8px;
734 }
735
736 .nav-menu-inserted-item-loading .menu-item-handle,
737 .added-menu-item .menu-item-handle.loading {
738         padding: 10px 15px 10px 8px;
739         cursor: default;
740         opacity: .5;
741         background: #fff;
742         color: #727773;
743 }
744
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. */
752 }
753
754 /* Add/delete Menus */
755
756 #customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {
757         border-bottom-color: #ddd;
758 }
759
760 /* @todo update selector */
761 #accordion-section-add_menu {
762         margin: 15px 12px;
763         overflow: hidden;
764 }
765
766 .new-menu-section-content {
767         display: none;
768         padding: 15px 0 0 0;
769         clear: both;
770 }
771
772 /* @todo update selector */
773 #accordion-section-add_menu .accordion-section-title {
774         padding-left: 45px;
775 }
776
777 /* @todo update selector */
778 #accordion-section-add_menu .accordion-section-title:before {
779         font: normal 20px/1 dashicons;
780         position: absolute;
781         top: 12px;
782         left: 14px;
783         content: "\f132";
784 }
785
786 #create-new-menu-submit {
787         float: right;
788         margin: 0 0 12px 0;
789 }
790
791 .menu-delete-item {
792         float: left;
793         padding: 1em 0;
794         width: 100%;
795 }
796
797 li.assigned-to-menu-location .menu-delete-item {
798         display: none;
799 }
800
801 li.assigned-to-menu-location .add-new-menu-item {
802         margin-bottom: 1em;
803 }
804
805 .menu-delete {
806         color: #a00;
807         cursor: pointer;
808         text-decoration: underline;
809 }
810
811 .menu-delete:hover,
812 .menu-delete:focus {
813         color: #f00;
814         text-decoration: none;
815 }
816
817 .menu-item-handle {
818         margin-top: -1px;
819 }
820 .ui-sortable-disabled .menu-item-handle {
821         cursor: default;
822 }
823
824 .menu-item-handle:hover {
825         position: relative;
826         z-index: 10;
827         color: #0073aa;
828 }
829
830 .menu-item-handle:hover .item-type,
831 .menu-item-handle:hover .item-edit,
832 #available-menu-items .menu-item-handle:hover .item-add {
833         color: #0073aa;
834 }
835
836 .menu-item-edit-active .menu-item-handle {
837         border-color: #999;
838         border-bottom: none;
839 }
840
841 .customize-control-nav_menu_item {
842         margin-bottom: 0;
843 }
844
845 .customize-control-nav_menu {
846         margin-top: 12px;
847 }
848
849 /**
850  * box-shadows
851  */
852
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,
857 .menu-delete:focus,
858 .menu-item-bar .item-delete:focus:before,
859 #available-menu-items .item-add:focus:before {
860         -webkit-box-shadow:
861                 0 0 0 1px #5b9dd9,
862                 0 0 2px 1px rgba(30, 140, 190, .8);
863         box-shadow:
864                 0 0 0 1px #5b9dd9,
865                 0 0 2px 1px rgba(30, 140, 190, .8);
866 }
867
868
869 @media screen and ( max-width: 782px ) {
870         #available-menu-items #available-menu-items-search .accordion-section-content {
871                 top: 63px;
872         }
873 }
874
875 @media screen and ( max-width: 640px ) {
876         #available-menu-items #available-menu-items-search .accordion-section-content {
877                 top: 130px;
878         }
879 }