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 }