wp-admin/css/customize-nav-menus.css

   1 #accordion-section-menu_locations {
   2         position: relative;
   3         margin-bottom: 15px;
   4 }
   5
   6 .menu-in-location,
   7 .menu-in-locations {
   8         display: block;
   9         font-weight: 600;
  10         font-size: 10px;
  11 }
  12
  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 {
  18         color: #555;
  19 }
  20
  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;
  27 }
  28
  29 .wp-customizer .menu-item-bar {
  30         margin: 0;
  31 }
  32
  33 .wp-customizer .menu-item-bar .menu-item-handle {
  34         width: 100%;
  35         background: #fff;
  36 }
  37
  38 .wp-customizer .menu-item-handle .item-title {
  39         margin-right: 0;
  40 }
  41
  42 .wp-customizer .menu-item-handle .item-type {
  43         padding: 1px 21px 0 5px;
  44         float: right;
  45         text-align: right;
  46 }
  47
  48 .wp-customizer .menu-item-settings {
  49         max-width: 100%;
  50         overflow: hidden;
  51         padding: 10px;
  52         background: #eee;
  53         border: 1px solid #999;
  54         border-top: none;
  55 }
  56
  57 .wp-customizer .menu-item-settings .description-thin {
  58         width: 100%;
  59         height: auto;
  60         margin: 0 0 8px 0;
  61 }
  62
  63 .wp-customizer .menu-item-settings input[type="text"] {
  64         width: 100%;
  65 }
  66
  67 .wp-customizer .menu-item-settings .submitbox {
  68         margin: 0;
  69         padding: 0;
  70 }
  71
  72 .wp-customizer .menu-item-settings .link-to-original {
  73         padding: 5px 0;
  74         border: none;
  75         font-style: normal;
  76         margin: 0;
  77         width: 100%;
  78 }
  79
  80 .wp-customizer .menu-item .submitbox .submitdelete {
  81         display: block;
  82         float: left;
  83         margin: 6px 0 0;
  84         padding: 0;
  85         cursor: pointer;
  86 }
  87
  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);
  91 }
  92
  93 /* Menu-item reordering nav. */
  94 .customize-control-nav_menu .reordering .reorder,
  95 .customize-control-nav_menu .reorder-done {
  96         display: none;
  97 }
  98
  99 .customize-control-nav_menu .reorder,
 100 .customize-control-nav_menu .reordering .reorder-done {
 101         display: inline-block;
 102         padding: 5px 8px;
 103 }
 104
 105 .menu-item-reorder-nav {
 106         display: none;
 107         background-color: #fff;
 108         position: absolute;
 109         top: 0;
 110         right: 0;
 111 }
 112
 113 .customize-control-nav_menu .reordering .add-new-menu-item {
 114         opacity: 0.2;
 115         pointer-events: none;
 116         cursor: not-allowed;
 117 }
 118
 119 .menu-item-reorder-nav button {
 120         position: relative;
 121         overflow: hidden;
 122         float: left;
 123         display: block;
 124         width: 30px;
 125         height: 40px;
 126         color: #82878c;
 127         text-indent: -9999px;
 128         cursor: pointer;
 129         background: transparent;
 130         border: none;
 131         -webkit-box-shadow: none;
 132         box-shadow: none;
 133         outline: none;
 134 }
 135
 136 .menu-item-reorder-nav button:before {
 137         display: inline-block;
 138         position: absolute;
 139         top: 0;
 140         right: 0;
 141         width: 100%;
 142         height: 100%;
 143         font: normal 20px/40px dashicons;
 144         text-align: center;
 145         text-indent: 0;
 146         -webkit-font-smoothing: antialiased;
 147         -moz-osx-font-smoothing: grayscale;
 148 }
 149
 150 .menu-item-reorder-nav button:hover,
 151 .menu-item-reorder-nav button:focus {
 152         color: #191e23;
 153         background: #eee;
 154 }
 155
 156 .menus-move-down:before {
 157         content: '\f347';
 158 }
 159
 160 .menus-move-up:before {
 161         content: '\f343';
 162 }
 163
 164 .menus-move-left:before {
 165         content: '\f341';
 166 }
 167
 168 .menus-move-right:before {
 169         content: '\f345';
 170 }
 171
 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;
 178         cursor: default;
 179         pointer-events: none;
 180 }
 181
 182 .menu-item-reorder-nav:before {
 183         content: "";
 184         display: block;
 185         position: absolute;
 186         left: -10px;
 187         width: 10px;
 188         height: 40px;
 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%);
 193 }
 194
 195 .reordering .menu-item .item-controls,
 196 .reordering .menu-item .item-type {
 197         display: none;
 198 }
 199
 200 .reordering .menu-item-reorder-nav {
 201         display: block;
 202 }
 203
 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. */
 206         margin: 12px 0;
 207 }
 208
 209 .wp-customizer .menu-item .item-edit {
 210         position: absolute;
 211         right: -19px;
 212         top: 2px;
 213         display: block;
 214         width: 30px;
 215         height: 38px;
 216         margin-right: 0 !important;
 217         outline: none;
 218         overflow: hidden;
 219         cursor: pointer;
 220 }
 221
 222 .customize-control-nav_menu_item .item-edit:focus {
 223         color: #0073aa;
 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);
 226 }
 227
 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;
 231         font-size: 20px;
 232         line-height: 1;
 233 }
 234
 235 .wp-customizer .menu-item .item-edit .toggle-indicator:after {
 236         content: '\f140';
 237         font: normal 20px/1 dashicons;
 238         color: #a0a5aa;
 239         vertical-align: top;
 240         speak: none;
 241         -webkit-font-smoothing: antialiased;
 242         -moz-osx-font-smoothing: grayscale;
 243         text-decoration: none !important;
 244 }
 245
 246 .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after {
 247         content: '\f142';
 248 }
 249
 250 .wp-customizer .menu-item-settings p.description {
 251         font-style: normal;
 252 }
 253
 254 .wp-customizer .menu-settings dl {
 255         margin: 12px 0 0 0;
 256         padding: 0;
 257 }
 258
 259 .wp-customizer .menu-settings .checkbox-input {
 260         margin-top: 8px;
 261 }
 262
 263 .wp-customizer .menu-settings .menu-theme-locations {
 264         border-top: 1px solid #ccc;
 265 }
 266
 267 .wp-customizer .menu-settings {
 268         margin-top: 36px;
 269         border-top: none;
 270 }
 271
 272 .menu-settings .customize-control-checkbox label {
 273         line-height: 1;
 274 }
 275
 276 /* @todo update selector or potentially remove */
 277 .menu-settings .customize-control.customize-control-checkbox {
 278         margin-bottom: 8px; /* Override collapsing at smaller viewports. */
 279 }
 280
 281 .customize-control-menu {
 282         margin-top: 4px;
 283 }
 284
 285 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
 286         color: #555;
 287 }
 288
 289 /* Screen Options */
 290 .customize-screen-options-toggle {
 291         background: none;
 292         border: none;
 293         color: #555;
 294         cursor: pointer;
 295         margin: 0;
 296         padding: 20px;
 297         position: absolute;
 298         right: 0;
 299         top: 30px;
 300 }
 301
 302 #customize-controls .customize-info .customize-help-toggle {
 303         padding: 20px;
 304 }
 305
 306 #customize-controls .customize-info .customize-help-toggle:before {
 307         padding: 4px;
 308 }
 309
 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 {
 317         color: #0073aa;
 318 }
 319
 320 .customize-screen-options-toggle:focus,
 321 #customize-controls .customize-info .customize-help-toggle:focus {
 322         outline: none;
 323 }
 324
 325 .customize-screen-options-toggle:before {
 326         -moz-osx-font-smoothing: grayscale;
 327         border: none;
 328         content: "\f111";
 329         display: block;
 330         font: 18px/1 "dashicons";
 331         padding: 5px;
 332         text-align: center;
 333         text-decoration: none !important;
 334         text-indent: 0;
 335         left: 6px;
 336         position: absolute;
 337         top: 6px;
 338 }
 339
 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%;
 345         border-radius: 100%;
 346 }
 347
 348 .wp-customizer #screen-options-wrap {
 349         display: none;
 350         background: #fff;
 351         border-top: 1px solid #ddd;
 352         padding: 4px 15px 0;
 353 }
 354
 355 .wp-customizer .metabox-prefs label {
 356         display: block;
 357         padding-right: 0;
 358         line-height: 30px;
 359 }
 360
 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 {
 366         display: none;
 367 }
 368
 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 {
 374         display: block;
 375 }
 376
 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; }
 390
 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; }
 404
 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; }
 418
 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; }
 432
 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; }
 445
 446 .control-section-nav_menu .menu .menu-item-edit-active {
 447         margin-left: 0;
 448 }
 449
 450 .control-section-nav_menu .menu .menu-item-edit-active .menu-item-bar {
 451         margin-right: 0;
 452 }
 453
 454 .control-section-nav_menu .menu .sortable-placeholder {
 455         margin-top: 0;
 456         margin-bottom: 1px;
 457         max-width: -webkit-calc(100% - 2px);
 458         max-width: calc(100% - 2px);
 459         float: left;
 460         display: list-item;
 461         border-color: #a0a5aa;
 462 }
 463
 464 .menu-item-transport li.customize-control {
 465         float: none;
 466 }
 467
 468 .control-section-nav_menu .menu ul.menu-item-transport .menu-item-bar {
 469         margin-top: 0;
 470 }
 471
 472 /*
 473  * Add-menu-items mode.
 474  */
 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. */
 477         width: 100%;
 478 }
 479
 480 .adding-menu-items .control-section {
 481         opacity: .4;
 482 }
 483
 484 .adding-menu-items .control-panel.control-section,
 485 .adding-menu-items .control-section.open {
 486         opacity: 1;
 487 }
 488
 489 /* Add-new button. */
 490 #customize-theme-controls .add-new-menu-item {
 491         cursor: pointer;
 492         float: right;
 493         margin-left: 10px;
 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;
 499         user-select: none;
 500         outline: none;
 501 }
 502
 503 .add-new-menu-item:before {
 504         content: "\f132";
 505         display: inline-block;
 506         position: relative;
 507         left: -2px;
 508         top: -1px;
 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;
 515 }
 516
 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 {
 521         background: #eee;
 522         border-color: #929793;
 523         color: #32373c;
 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);
 526 }
 527
 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);
 533 }
 534
 535 .menu-item-bar .item-delete {
 536         color: #a00;
 537         position: absolute;
 538         top: 2px;
 539         right: -19px;
 540         width: 30px;
 541         height: 38px;
 542         cursor: pointer;
 543         display: none;
 544 }
 545
 546 .menu-item-bar .item-delete:before {
 547         content: "\f335";
 548         font: normal 20px/1 dashicons;
 549         -webkit-font-smoothing: antialiased;
 550         -moz-osx-font-smoothing: grayscale;
 551         position: absolute;
 552         top: 9px;
 553         left: 5px;
 554 }
 555
 556 .ie8 .menu-item-bar .item-delete:before {
 557         top: -10px;
 558 }
 559
 560 .menu-item-bar .item-delete:hover,
 561 .menu-item-bar .item-delete:focus {
 562         color: #f00;
 563 }
 564
 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);
 568 }
 569
 570 .adding-menu-items .menu-item-bar .item-edit {
 571         display: none;
 572 }
 573
 574 .adding-menu-items .menu-item-bar .item-delete {
 575         display: block;
 576 }
 577
 578 #available-menu-items .item {
 579         position: static;
 580 }
 581
 582 #available-menu-items {
 583         position: absolute;
 584         top: 0;
 585         bottom: 0;
 586         left: -301px;
 587         visibility: hidden;
 588         overflow-x: hidden;
 589         overflow-y: auto;
 590         width: 300px;
 591         margin: 0;
 592         z-index: 4;
 593         background: #eee;
 594         -webkit-transition: left .18s;
 595         transition: left .18s;
 596         border-right: 1px solid #ddd;
 597 }
 598
 599 #available-menu-items.opening {
 600         overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
 601 }
 602
 603 #available-menu-items #available-menu-items-search.open {
 604         height: 100%;
 605         border-bottom: none;
 606 }
 607
 608 #available-menu-items .accordion-section-title {
 609         border-left: none;
 610         border-right: none;
 611         background: #fff;
 612 }
 613
 614 #available-menu-items .open .accordion-section-title,
 615 #available-menu-items #available-menu-items-search .accordion-section-title {
 616         background: #eee;
 617 }
 618
 619 /* rework the arrow indicator implementation for NVDA bug see #32715 */
 620 #available-menu-items .accordion-section-title:after {
 621         content: none !important;
 622 }
 623
 624 #available-menu-items .accordion-section-title .toggle-indicator {
 625         display: inline-block;
 626         font-size: 20px;
 627         line-height: 1;
 628 }
 629
 630 #available-menu-items .accordion-section-title .toggle-indicator:after {
 631         content: '\f140';
 632         font: normal 20px/1 'dashicons';
 633         color: #a0a5aa;
 634         vertical-align: top;
 635         speak: none;
 636         -webkit-font-smoothing: antialiased;
 637         -moz-osx-font-smoothing: grayscale;
 638         text-decoration: none !important;
 639 }
 640
 641 #available-menu-items .accordion-section-title:hover .toggle-indicator:after {
 642         color: #777;
 643 }
 644
 645 #available-menu-items .open .accordion-section-title .toggle-indicator:after {
 646         content: '\f142';
 647 }
 648
 649 #available-menu-items .accordion-section-content {
 650         overflow-y: auto;
 651         max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
 652         background: transparent;
 653 }
 654
 655 button.not-a-button {
 656         background: transparent;
 657         border: none;
 658         -webkit-box-shadow: none;
 659         box-shadow: none;
 660         -webkit-border-radius: 0;
 661         border-radius: 0;
 662         outline: 0;
 663         padding: 0;
 664         margin: 0;
 665 }
 666
 667 #available-menu-items .accordion-section-title button {
 668         display: block;
 669         width: 28px;
 670         height: 35px;
 671         position: absolute;
 672         top: 5px;
 673         right: 5px;
 674         cursor: pointer;
 675 }
 676
 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);
 680 }
 681
 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 {
 685         display: none;
 686 }
 687
 688 #available-menu-items-search.cannot-expand .accordion-section-title .spinner {
 689         display: block;
 690 }
 691
 692 #available-menu-items .cannot-expand .accordion-section-title .no-items {
 693         display: block;
 694         color: #777;
 695         font-weight: normal;
 696         float: right;
 697         margin-left: 5px;
 698 }
 699
 700 #available-menu-items .accordion-section-content {
 701         padding: 1px 15px 15px 15px;
 702         margin: 0;
 703         min-height: 120px;
 704         max-height: 290px;
 705 }
 706
 707 #available-menu-items #available-menu-items-search .accordion-section-content {
 708         position: absolute;
 709         left: 1px;
 710         top: 60px; /* below title div / search input */
 711         bottom: 0px; /* 100% height that still triggers lazy load */
 712         max-height: none;
 713         width: 100%;
 714         padding: 1px 15px 15px;
 715         -webkit-box-sizing: border-box;
 716         -moz-box-sizing: border-box;
 717         box-sizing: border-box;
 718 }
 719
 720 #available-menu-items .menu-item-tpl {
 721         margin: 0;
 722 }
 723
 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;
 729 }
 730
 731 #available-menu-items .item-tpl {
 732         position: relative;
 733         padding: 20px 15px 20px 60px;
 734         border-bottom: 1px solid #e4e4e4;
 735         cursor: pointer;
 736         display: none;
 737 }
 738
 739 #available-menu-items .item-tpl:hover,
 740 #available-menu-items .item-tpl.selected {
 741         background: #eee;
 742 }
 743
 744 #available-menu-items .menu-item-handle .item-type {
 745         padding-right: 0;
 746 }
 747
 748 #available-menu-items .menu-item-handle .item-title {
 749         padding-left: 20px;
 750 }
 751
 752 #available-menu-items .menu-item-handle {
 753         cursor: pointer;
 754 }
 755
 756 #available-menu-items .item-top,
 757 #available-menu-items .item-top:hover {
 758         border: none;
 759         background: transparent;
 760         -webkit-box-shadow: none;
 761         box-shadow: none;
 762 }
 763
 764 #available-menu-items .menu-item-handle {
 765         -webkit-box-shadow: none;
 766         box-shadow: none;
 767         margin-top: -1px;
 768 }
 769
 770 #available-menu-items .menu-item-handle:hover {
 771         z-index: 1;
 772 }
 773
 774 #available-menu-items .item-title h4 {
 775         padding: 0 0 5px;
 776         font-size: 14px;
 777 }
 778
 779 #available-menu-items .item-add {
 780         position: absolute;
 781         top: 1px;
 782         left: 1px;
 783         color: #82878c;
 784         width: 30px;
 785         height: 38px;
 786         cursor: pointer;
 787 }
 788
 789 #available-menu-items .menu-item-handle .item-add:focus {
 790         color: #23282d;
 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);
 793 }
 794
 795 #available-menu-items .item-add:before {
 796         content: "\f543";
 797         font: normal 20px/1 dashicons;
 798         position: relative;
 799         left: 2px;
 800         top: 3px;
 801 }
 802
 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 {
 807         color: #82878c;
 808 }
 809
 810 #available-menu-items .menu-item-handle.item-added .item-add:before {
 811         content: "\f147";
 812 }
 813
 814 #available-menu-items .accordion-section-title.loading .spinner,
 815 #available-menu-items-search.loading .accordion-section-title .spinner {
 816         visibility: visible;
 817         margin: 0 20px;
 818 }
 819
 820 #available-menu-items-search .clear-results {
 821         position: absolute;
 822         top: 20px;
 823         right: 20px;
 824         width: 20px;
 825         height: 20px;
 826         cursor: pointer;
 827         color: #a00;
 828         text-decoration: none;
 829 }
 830
 831 #available-menu-items-search .clear-results,
 832 #available-menu-items-search.loading .clear-results.is-visible {
 833         display: none;
 834 }
 835
 836 #available-menu-items-search .clear-results.is-visible {
 837         display: block;
 838 }
 839
 840 #available-menu-items-search .clear-results:before {
 841         content: "\f335";
 842         font: normal 20px/1 dashicons;
 843         -webkit-font-smoothing: antialiased;
 844         -moz-osx-font-smoothing: grayscale;
 845 }
 846
 847 #available-menu-items-search .clear-results:hover,
 848 #available-menu-items-search .clear-results:focus {
 849         color: #f00;
 850 }
 851
 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);
 855 }
 856
 857 #available-menu-items-search .spinner {
 858         position: absolute;
 859         top: 20px;
 860         margin: 0 !important;
 861         right: 20px;
 862 }
 863
 864 #available-menu-items-search input {
 865         padding: 6px 10px;
 866         width: 100%;
 867 }
 868
 869 #available-menu-items-search .accordion-section-title {
 870         padding: 12px 15px;
 871         -webkit-box-sizing: border-box;
 872         -moz-box-sizing: border-box;
 873         box-sizing: border-box;
 874 }
 875
 876 #available-menu-items-search .accordion-section-title:after {
 877         display: none;
 878 }
 879
 880 #available-menu-items-search .accordion-section-content:empty {
 881         min-height: 0;
 882         padding: 0;
 883 }
 884
 885 #available-menu-items-search.loading .accordion-section-content div {
 886         opacity: .5;
 887 }
 888
 889 #available-menu-items-search.loading.loading-more .accordion-section-content div {
 890         opacity: 1;
 891 }
 892
 893 #customize-preview {
 894         -webkit-transition: all 0.2s;
 895         transition: all 0.2s;
 896 }
 897
 898 body.adding-menu-items #available-menu-items {
 899         left: 0;
 900         visibility: visible;
 901 }
 902
 903 body.adding-menu-items .wp-full-overlay-main {
 904         left: 300px;
 905 }
 906
 907 body.adding-menu-items #customize-preview {
 908         opacity: 0.4;
 909 }
 910
 911 .menu-item-handle .spinner {
 912         display: none;
 913         float: left;
 914         margin: 0 8px 0 0;
 915 }
 916
 917 .nav-menu-inserted-item-loading .spinner {
 918         display: block;
 919 }
 920
 921 .nav-menu-inserted-item-loading .menu-item-handle .item-type {
 922         padding: 0 0 0 8px;
 923 }
 924
 925 .nav-menu-inserted-item-loading .menu-item-handle,
 926 .added-menu-item .menu-item-handle.loading {
 927         padding: 10px 15px 10px 8px;
 928         cursor: default;
 929         opacity: .5;
 930         background: #fff;
 931         color: #727773;
 932 }
 933
 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. */
 941 }
 942
 943 /* Add/delete Menus */
 944
 945 /* @todo update selector */
 946 #accordion-section-add_menu {
 947         margin: 15px 12px;
 948 }
 949
 950 .new-menu-section-content {
 951         display: none;
 952         padding: 15px 0 0 0;
 953         clear: both;
 954 }
 955
 956 /* @todo update selector */
 957 #accordion-section-add_menu .accordion-section-title {
 958         padding-left: 45px;
 959 }
 960
 961 /* @todo update selector */
 962 #accordion-section-add_menu .accordion-section-title:before {
 963         font: normal 20px/1 dashicons;
 964         position: absolute;
 965         top: 12px;
 966         left: 14px;
 967         content: "\f132";
 968 }
 969
 970 #create-new-menu-submit {
 971         float: right;
 972         margin: 0 0 12px 0;
 973 }
 974
 975 .menu-delete-item {
 976         display: block;
 977         float: left;
 978         padding: 1em 0;
 979         width: 100%;
 980 }
 981
 982 li.assigned-to-menu-location .menu-delete-item {
 983   display: none;
 984 }
 985
 986 li.assigned-to-menu-location .add-new-menu-item {
 987   margin-bottom: 1em;
 988 }
 989
 990 .menu-delete {
 991         color: #a00;
 992         cursor: pointer;
 993         text-decoration: underline;
 994 }
 995
 996 .menu-delete:hover,
 997 .menu-delete:focus {
 998         color: #f00;
 999         text-decoration: none;
1000 }
1001
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);
1005 }
1006
1007 .menu-item-handle {
1008         margin-top: -1px;
1009 }
1010 .ui-sortable-disabled .menu-item-handle {
1011         cursor: default;
1012 }
1013
1014 .menu-item-handle:hover {
1015         position: relative;
1016         z-index: 10;
1017         color: #0073aa;
1018 }
1019
1020 .menu-item-handle:hover .item-type,
1021 .menu-item-handle:hover .item-edit,
1022 #available-menu-items .menu-item-handle:hover .item-add {
1023         color: #0073aa;
1024 }
1025
1026 .menu-item-edit-active .menu-item-handle {
1027         border-color: #999;
1028         border-bottom: none;
1029 }
1030
1031 .customize-control-nav_menu_item {
1032         margin-bottom: 0;
1033 }
1034
1035 .customize-control-nav_menu {
1036         margin-top: 12px;
1037 }
1038
1039 #available-menu-items .customize-section-title {
1040         display: none;
1041 }
1042
1043 @media screen and ( max-width: 782px ) {
1044         #available-menu-items #available-menu-items-search .accordion-section-content {
1045                 top: 63px;
1046         }
1047 }
1048
1049 @media screen and ( max-width: 640px ) {
1050         body.adding-menu-items div#available-menu-items {
1051                 top: 46px;
1052                 left: 0;
1053                 z-index: 10;
1054                 width: 100%;
1055         }
1056
1057         #available-menu-items #available-menu-items-search .accordion-section-content {
1058                 top: 133px;
1059         }
1060
1061         #available-menu-items .customize-section-title {
1062                 display: block;
1063                 margin: 0;
1064         }
1065
1066         #available-menu-items .customize-section-back {
1067                 height: 69px;
1068         }
1069
1070         #available-menu-items .customize-section-title h3 {
1071                 font-size: 20px;
1072                 font-weight: 200;
1073                 padding: 9px 10px 12px 14px;
1074                 margin: 0;
1075                 line-height: 24px;
1076                 color: #555;
1077                 display: block;
1078                 overflow: hidden;
1079                 white-space: nowrap;
1080                 text-overflow: ellipsis;
1081         }
1082
1083         #available-menu-items .customize-section-title .customize-action {
1084                 font-size: 13px;
1085                 display: block;
1086                 font-weight: 400;
1087                 overflow: hidden;
1088                 white-space: nowrap;
1089                 text-overflow: ellipsis;
1090         }
1091 }