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 /**
  94  * Menu items reordering styles
  95  */
  96
  97 .menu-item-reorder-nav {
  98         display: none;
  99         background-color: #fff;
 100         position: absolute;
 101         top: 0;
 102         right: 0;
 103 }
 104
 105 .menu-item-reorder-nav button {
 106         position: relative;
 107         overflow: hidden;
 108         float: left;
 109         display: block;
 110         width: 30px;
 111         height: 40px;
 112         color: #82878c;
 113         text-indent: -9999px;
 114         cursor: pointer;
 115         background: transparent;
 116         border: none;
 117         -webkit-box-shadow: none;
 118         box-shadow: none;
 119         outline: none;
 120 }
 121
 122 .menu-item-reorder-nav button:before {
 123         display: inline-block;
 124         position: absolute;
 125         top: 0;
 126         right: 0;
 127         width: 100%;
 128         height: 100%;
 129         font: normal 20px/40px dashicons;
 130         text-align: center;
 131         text-indent: 0;
 132         -webkit-font-smoothing: antialiased;
 133         -moz-osx-font-smoothing: grayscale;
 134 }
 135
 136 .menu-item-reorder-nav button:hover,
 137 .menu-item-reorder-nav button:focus {
 138         color: #191e23;
 139         background: #eee;
 140 }
 141
 142 .menus-move-down:before {
 143         content: "\f347";
 144 }
 145
 146 .menus-move-up:before {
 147         content: "\f343";
 148 }
 149
 150 .menus-move-left:before {
 151         content: "\f341";
 152 }
 153
 154 .menus-move-right:before {
 155         content: "\f345";
 156 }
 157
 158 .move-up-disabled .menus-move-up,
 159 .move-down-disabled .menus-move-down,
 160 .move-right-disabled .menus-move-right,
 161 .move-left-disabled .menus-move-left {
 162         color: #d5d5d5 !important;
 163         background-color: #fff !important;
 164         cursor: default;
 165         pointer-events: none;
 166 }
 167
 168 .menu-item-reorder-nav:before {
 169         content: "";
 170         display: block;
 171         position: absolute;
 172         left: -10px;
 173         width: 10px;
 174         height: 40px;
 175         background: -webkit-gradient(linear, left top, right top, from(rgba(250,250,250,0)), to(rgba(250,250,250,1)));
 176         background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%);
 177         background: linear-gradient(to right, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%);
 178 }
 179
 180 .reordering .menu-item .item-controls,
 181 .reordering .menu-item .item-type {
 182         display: none;
 183 }
 184
 185 .reordering .menu-item-reorder-nav {
 186         display: block;
 187 }
 188
 189 .customize-control input.menu-name-field {
 190         width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
 191         margin: 12px 0;
 192 }
 193
 194 .wp-customizer .menu-item .item-edit {
 195         position: absolute;
 196         right: -19px;
 197         top: 2px;
 198         display: block;
 199         width: 30px;
 200         height: 38px;
 201         margin-right: 0 !important;
 202         -webkit-box-shadow: none;
 203         box-shadow: none;
 204         outline: none;
 205         overflow: hidden;
 206         cursor: pointer;
 207 }
 208
 209 .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after {
 210         content: "\f142";
 211 }
 212
 213 .wp-customizer .menu-item-settings p.description {
 214         font-style: normal;
 215 }
 216
 217 .wp-customizer .menu-settings dl {
 218         margin: 12px 0 0 0;
 219         padding: 0;
 220 }
 221
 222 .wp-customizer .menu-settings .checkbox-input {
 223         margin-top: 8px;
 224 }
 225
 226 .wp-customizer .menu-settings .menu-theme-locations {
 227         border-top: 1px solid #ccc;
 228 }
 229
 230 .wp-customizer .menu-settings {
 231         margin-top: 36px;
 232         border-top: none;
 233 }
 234
 235 .menu-settings .customize-control-checkbox label {
 236         line-height: 1;
 237 }
 238
 239 /* @todo update selector or potentially remove */
 240 .menu-settings .customize-control.customize-control-checkbox {
 241         margin-bottom: 8px; /* Override collapsing at smaller viewports. */
 242 }
 243
 244 .customize-control-menu {
 245         margin-top: 4px;
 246 }
 247
 248 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
 249         color: #555;
 250 }
 251
 252 /* Screen Options */
 253 .customize-screen-options-toggle {
 254         background: none;
 255         border: none;
 256         color: #555;
 257         cursor: pointer;
 258         margin: 0;
 259         padding: 20px;
 260         position: absolute;
 261         right: 0;
 262         top: 30px;
 263 }
 264
 265 #customize-controls .customize-info .customize-help-toggle {
 266         padding: 20px;
 267 }
 268
 269 #customize-controls .customize-info .customize-help-toggle:before {
 270         padding: 4px;
 271 }
 272
 273 .customize-screen-options-toggle:hover,
 274 .customize-screen-options-toggle:active,
 275 .customize-screen-options-toggle:focus,
 276 .active-menu-screen-options .customize-screen-options-toggle,
 277 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
 278 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
 279 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
 280         color: #0073aa;
 281 }
 282
 283 .customize-screen-options-toggle:focus,
 284 #customize-controls .customize-info .customize-help-toggle:focus {
 285         outline: none;
 286 }
 287
 288 .customize-screen-options-toggle:before {
 289         -moz-osx-font-smoothing: grayscale;
 290         border: none;
 291         content: "\f111";
 292         display: block;
 293         font: 18px/1 dashicons;
 294         padding: 5px;
 295         text-align: center;
 296         text-decoration: none !important;
 297         text-indent: 0;
 298         left: 6px;
 299         position: absolute;
 300         top: 6px;
 301 }
 302
 303 .customize-screen-options-toggle:focus:before,
 304 #customize-controls .customize-info .customize-help-toggle:focus:before {
 305         -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
 306         box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
 307         -webkit-border-radius: 100%;
 308         border-radius: 100%;
 309 }
 310
 311 .wp-customizer #screen-options-wrap {
 312         display: none;
 313         background: #fff;
 314         border-top: 1px solid #ddd;
 315         padding: 4px 15px 15px;
 316 }
 317
 318 .wp-customizer .metabox-prefs label {
 319         display: block;
 320         padding-right: 0;
 321         line-height: 30px;
 322 }
 323
 324 /* rework the arrow indicator implementation for NVDA bug same as #32715 */
 325 .wp-customizer .toggle-indicator {
 326         display: inline-block;
 327         font-size: 20px;
 328         line-height: 1;
 329         text-indent: -1px; /* account for the dashicon alignment */
 330 }
 331
 332 .rtl .wp-customizer .toggle-indicator {
 333         text-indent: 1px; /* account for the dashicon alignment */
 334 }
 335
 336 .wp-customizer .toggle-indicator:after {
 337         content: "\f140";
 338         speak: none;
 339         vertical-align: top;
 340         -webkit-border-radius: 50%;
 341         border-radius: 50%;
 342         color: #a0a5aa;
 343         font: normal 20px/1 dashicons;
 344         -webkit-font-smoothing: antialiased;
 345         -moz-osx-font-smoothing: grayscale;
 346         text-decoration: none !important;
 347 }
 348
 349 .wp-customizer button:focus .toggle-indicator:after {
 350         -webkit-box-shadow:
 351                 0 0 0 1px #5b9dd9,
 352                 0 0 2px 1px rgba(30, 140, 190, .8);
 353         box-shadow:
 354                 0 0 0 1px #5b9dd9,
 355                 0 0 2px 1px rgba(30, 140, 190, .8);
 356 }
 357
 358 #accordion-panel-nav_menus .field-link-target,
 359 #accordion-panel-nav_menus .field-attr-title,
 360 #accordion-panel-nav_menus .field-css-classes,
 361 #accordion-panel-nav_menus .field-xfn,
 362 #accordion-panel-nav_menus .field-description {
 363         display: none;
 364 }
 365
 366 #accordion-panel-nav_menus.field-link-target-active .field-link-target,
 367 #accordion-panel-nav_menus.field-attr-title-active .field-attr-title,
 368 #accordion-panel-nav_menus.field-css-classes-active .field-css-classes,
 369 #accordion-panel-nav_menus.field-xfn-active .field-xfn,
 370 #accordion-panel-nav_menus.field-description-active .field-description {
 371         display: block;
 372 }
 373
 374 /* WARNING: The 20px factor is hard-coded in JS. */
 375 .menu-item-depth-0  { margin-left: 0;     }
 376 .menu-item-depth-1  { margin-left: 20px;  }
 377 .menu-item-depth-2  { margin-left: 40px;  }
 378 .menu-item-depth-3  { margin-left: 60px;  }
 379 .menu-item-depth-4  { margin-left: 80px;  }
 380 .menu-item-depth-5  { margin-left: 100px; }
 381 .menu-item-depth-6  { margin-left: 120px; }
 382 .menu-item-depth-7  { margin-left: 140px; }
 383 .menu-item-depth-8  { margin-left: 160px; } /* Not likely to be used or useful beyond this depth */
 384 .menu-item-depth-9  { margin-left: 180px; }
 385 .menu-item-depth-10 { margin-left: 200px; }
 386 .menu-item-depth-11 { margin-left: 220px; }
 387
 388 /* @todo handle .menu-item-settings width */
 389 .menu-item-depth-0  > .menu-item-bar { margin-right: 0;     }
 390 .menu-item-depth-1  > .menu-item-bar { margin-right: 20px;  }
 391 .menu-item-depth-2  > .menu-item-bar { margin-right: 40px;  }
 392 .menu-item-depth-3  > .menu-item-bar { margin-right: 60px;  }
 393 .menu-item-depth-4  > .menu-item-bar { margin-right: 80px;  }
 394 .menu-item-depth-5  > .menu-item-bar { margin-right: 100px; }
 395 .menu-item-depth-6  > .menu-item-bar { margin-right: 120px; }
 396 .menu-item-depth-7  > .menu-item-bar { margin-right: 140px; }
 397 .menu-item-depth-8  > .menu-item-bar { margin-right: 160px; }
 398 .menu-item-depth-9  > .menu-item-bar { margin-right: 180px; }
 399 .menu-item-depth-10 > .menu-item-bar { margin-right: 200px; }
 400 .menu-item-depth-11 > .menu-item-bar { margin-right: 220px; }
 401
 402 /* Submenu left margin. */
 403 .menu-item-depth-0  .menu-item-transport { margin-left: 0;      }
 404 .menu-item-depth-1  .menu-item-transport { margin-left: -20px;  }
 405 .menu-item-depth-3  .menu-item-transport { margin-left: -60px;  }
 406 .menu-item-depth-4  .menu-item-transport { margin-left: -80px;  }
 407 .menu-item-depth-2  .menu-item-transport { margin-left: -40px;  }
 408 .menu-item-depth-5  .menu-item-transport { margin-left: -100px; }
 409 .menu-item-depth-6  .menu-item-transport { margin-left: -120px; }
 410 .menu-item-depth-7  .menu-item-transport { margin-left: -140px; }
 411 .menu-item-depth-8  .menu-item-transport { margin-left: -160px; }
 412 .menu-item-depth-9  .menu-item-transport { margin-left: -180px; }
 413 .menu-item-depth-10 .menu-item-transport { margin-left: -200px; }
 414 .menu-item-depth-11 .menu-item-transport { margin-left: -220px; }
 415
 416 /* WARNING: The 20px factor is hard-coded in JS. */
 417 .reordering .menu-item-depth-0  { margin-left: 0;     }
 418 .reordering .menu-item-depth-1  { margin-left: 15px;  }
 419 .reordering .menu-item-depth-2  { margin-left: 30px;  }
 420 .reordering .menu-item-depth-3  { margin-left: 45px;  }
 421 .reordering .menu-item-depth-4  { margin-left: 60px;  }
 422 .reordering .menu-item-depth-5  { margin-left: 75px;  }
 423 .reordering .menu-item-depth-6  { margin-left: 90px;  }
 424 .reordering .menu-item-depth-7  { margin-left: 105px; }
 425 .reordering .menu-item-depth-8  { margin-left: 120px; } /* Not likely to be used or useful beyond this depth */
 426 .reordering .menu-item-depth-9  { margin-left: 135px; }
 427 .reordering .menu-item-depth-10 { margin-left: 150px; }
 428 .reordering .menu-item-depth-11 { margin-left: 165px; }
 429
 430 .reordering .menu-item-depth-0  > .menu-item-bar { margin-right: 0;     }
 431 .reordering .menu-item-depth-1  > .menu-item-bar { margin-right: 15px;  }
 432 .reordering .menu-item-depth-2  > .menu-item-bar { margin-right: 30px;  }
 433 .reordering .menu-item-depth-3  > .menu-item-bar { margin-right: 45px;  }
 434 .reordering .menu-item-depth-4  > .menu-item-bar { margin-right: 60px;  }
 435 .reordering .menu-item-depth-5  > .menu-item-bar { margin-right: 75px;  }
 436 .reordering .menu-item-depth-6  > .menu-item-bar { margin-right: 90px;  }
 437 .reordering .menu-item-depth-7  > .menu-item-bar { margin-right: 105px; }
 438 .reordering .menu-item-depth-8  > .menu-item-bar { margin-right: 120px; }
 439 .reordering .menu-item-depth-9  > .menu-item-bar { margin-right: 135px; }
 440 .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
 441 .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
 442
 443 .control-section-nav_menu .menu .menu-item-edit-active {
 444         margin-left: 0;
 445 }
 446
 447 .control-section-nav_menu .menu .menu-item-edit-active .menu-item-bar {
 448         margin-right: 0;
 449 }
 450
 451 .control-section-nav_menu .menu .sortable-placeholder {
 452         margin-top: 0;
 453         margin-bottom: 1px;
 454         max-width: -webkit-calc(100% - 2px);
 455         max-width: calc(100% - 2px);
 456         float: left;
 457         display: list-item;
 458         border-color: #a0a5aa;
 459 }
 460
 461 .menu-item-transport li.customize-control {
 462         float: none;
 463 }
 464
 465 .control-section-nav_menu .menu ul.menu-item-transport .menu-item-bar {
 466         margin-top: 0;
 467 }
 468
 469 /**
 470  * Add-menu-items mode
 471  */
 472
 473 .wp-full-overlay-main {
 474         right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */
 475         width: 100%;
 476 }
 477
 478 .adding-menu-items .control-section {
 479         opacity: .4;
 480 }
 481
 482 .adding-menu-items .control-panel.control-section,
 483 .adding-menu-items .control-section.open {
 484         opacity: 1;
 485 }
 486
 487 .adding-menu-items .add-new-menu-item,
 488 .adding-menu-items .add-new-menu-item:hover,
 489 .add-menu-toggle.open,
 490 .add-menu-toggle.open:hover {
 491         background: #eee;
 492         border-color: #929793;
 493         color: #32373c;
 494         -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
 495         box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
 496 }
 497
 498 .adding-menu-items .add-new-menu-item:before,
 499 #accordion-section-add_menu .add-new-menu-item.open:before {
 500         -webkit-transform: rotate(45deg);
 501         -ms-transform: rotate(45deg);
 502         transform: rotate(45deg);
 503 }
 504
 505 .menu-item-bar .item-delete {
 506         color: #a00;
 507         position: absolute;
 508         top: 2px;
 509         right: -19px;
 510         width: 30px;
 511         height: 38px;
 512         cursor: pointer;
 513         display: none;
 514 }
 515
 516 .menu-item-bar .item-delete:before {
 517         content: "\f335";
 518         position: absolute;
 519         top: 9px;
 520         left: 5px;
 521         -webkit-border-radius: 50%;
 522         border-radius: 50%;
 523         font: normal 20px/1 dashicons;
 524         -webkit-font-smoothing: antialiased;
 525         -moz-osx-font-smoothing: grayscale;
 526 }
 527
 528 .ie8 .menu-item-bar .item-delete:before {
 529         top: -10px;
 530 }
 531
 532 .menu-item-bar .item-delete:hover,
 533 .menu-item-bar .item-delete:focus {
 534         -webkit-box-shadow: none;
 535         box-shadow: none;
 536         outline: none;
 537         color: #f00;
 538 }
 539
 540 .menu-item-bar .item-delete:focus:before {
 541         -webkit-box-shadow:
 542                 0 0 0 1px #5b9dd9,
 543                 0 0 2px 1px rgba(30, 140, 190, .8);
 544         box-shadow:
 545                 0 0 0 1px #5b9dd9,
 546                 0 0 2px 1px rgba(30, 140, 190, .8);
 547 }
 548
 549 .adding-menu-items .menu-item-bar .item-edit {
 550         display: none;
 551 }
 552
 553 .adding-menu-items .menu-item-bar .item-delete {
 554         display: block;
 555 }
 556
 557 #available-menu-items .item {
 558         position: static;
 559 }
 560
 561 #available-menu-items {
 562         position: absolute;
 563         top: 0;
 564         bottom: 0;
 565         left: -301px;
 566         visibility: hidden;
 567         overflow-x: hidden;
 568         overflow-y: auto;
 569         width: 300px;
 570         margin: 0;
 571         z-index: 4;
 572         background: #eee;
 573         -webkit-transition: left .18s;
 574         transition: left .18s;
 575         border-right: 1px solid #ddd;
 576 }
 577
 578 #available-menu-items.opening {
 579         overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
 580 }
 581
 582 #available-menu-items #available-menu-items-search.open {
 583         height: 100%;
 584         border-bottom: none;
 585 }
 586
 587 #available-menu-items .accordion-section-title {
 588         border-left: none;
 589         border-right: none;
 590         background: #fff;
 591         -webkit-transition: background-color 0.15s;
 592         transition: background-color 0.15s;
 593 }
 594
 595 #available-menu-items .open .accordion-section-title,
 596 #available-menu-items #available-menu-items-search .accordion-section-title {
 597         background: #eee;
 598 }
 599
 600 /* rework the arrow indicator implementation for NVDA bug see #32715 */
 601 #available-menu-items .accordion-section-title:after {
 602         content: none !important;
 603 }
 604
 605 #available-menu-items .accordion-section-title:hover .toggle-indicator:after {
 606         color: #777;
 607 }
 608
 609 #available-menu-items .open .accordion-section-title .toggle-indicator:after {
 610         content: "\f142";
 611 }
 612
 613 #available-menu-items .accordion-section-content {
 614         overflow-y: auto;
 615         max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
 616         background: transparent;
 617 }
 618
 619 #available-menu-items .accordion-section-title button {
 620         display: block;
 621         width: 28px;
 622         height: 35px;
 623         position: absolute;
 624         top: 5px;
 625         right: 5px;
 626         -webkit-box-shadow: none;
 627         box-shadow: none;
 628         outline: none;
 629         cursor: pointer;
 630 }
 631
 632 #available-menu-items .accordion-section-title .no-items,
 633 #available-menu-items .cannot-expand .accordion-section-title .spinner,
 634 #available-menu-items .cannot-expand .accordion-section-title > button {
 635         display: none;
 636 }
 637
 638 #available-menu-items-search.cannot-expand .accordion-section-title .spinner {
 639         display: block;
 640 }
 641
 642 #available-menu-items .cannot-expand .accordion-section-title .no-items {
 643         display: block;
 644         color: #777;
 645         font-weight: normal;
 646         float: right;
 647         margin-left: 5px;
 648 }
 649
 650 #available-menu-items .accordion-section-content {
 651         padding: 1px 15px 15px 15px;
 652         margin: 0;
 653         max-height: 290px;
 654 }
 655
 656 #available-menu-items #available-menu-items-search .accordion-section-content {
 657         position: absolute;
 658         left: 1px;
 659         top: 60px; /* below title div / search input */
 660         bottom: 0px; /* 100% height that still triggers lazy load */
 661         max-height: none;
 662         width: 100%;
 663         padding: 1px 15px 15px;
 664         -webkit-box-sizing: border-box;
 665         -moz-box-sizing: border-box;
 666         box-sizing: border-box;
 667 }
 668
 669 #available-menu-items .menu-item-tpl {
 670         margin: 0;
 671 }
 672
 673 #custom-menu-item-name.invalid,
 674 #custom-menu-item-url.invalid,
 675 .menu-name-field.invalid,
 676 .menu-name-field.invalid:focus {
 677         border: 1px solid #f00;
 678 }
 679
 680 #available-menu-items .item-tpl {
 681         position: relative;
 682         padding: 20px 15px 20px 60px;
 683         border-bottom: 1px solid #e4e4e4;
 684         cursor: pointer;
 685         display: none;
 686 }
 687
 688 #available-menu-items .item-tpl:hover,
 689 #available-menu-items .item-tpl.selected {
 690         background: #eee;
 691 }
 692
 693 #available-menu-items .menu-item-handle .item-type {
 694         padding-right: 0;
 695 }
 696
 697 #available-menu-items .menu-item-handle .item-title {
 698         padding-left: 20px;
 699 }
 700
 701 #available-menu-items .menu-item-handle {
 702         cursor: pointer;
 703 }
 704
 705 #available-menu-items .item-top,
 706 #available-menu-items .item-top:hover {
 707         border: none;
 708         background: transparent;
 709         -webkit-box-shadow: none;
 710         box-shadow: none;
 711 }
 712
 713 #available-menu-items .menu-item-handle {
 714         -webkit-box-shadow: none;
 715         box-shadow: none;
 716         margin-top: -1px;
 717 }
 718
 719 #available-menu-items .menu-item-handle:hover {
 720         z-index: 1;
 721 }
 722
 723 #available-menu-items .item-title h4 {
 724         padding: 0 0 5px;
 725         font-size: 14px;
 726 }
 727
 728 #available-menu-items .item-add {
 729         position: absolute;
 730         top: 1px;
 731         left: 1px;
 732         color: #82878c;
 733         width: 30px;
 734         height: 38px;
 735         -webkit-box-shadow: none;
 736         box-shadow: none;
 737         outline: none;
 738         cursor: pointer;
 739 }
 740
 741 #available-menu-items .menu-item-handle .item-add:focus {
 742         color: #23282d;
 743 }
 744
 745 #available-menu-items .item-add:before {
 746         content: "\f543";
 747         position: relative;
 748         left: 2px;
 749         top: 3px;
 750         display: inline-block;
 751         height: 20px;
 752         -webkit-border-radius: 50%;
 753         border-radius: 50%;
 754         font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */
 755 }
 756
 757 #available-menu-items .item-add:focus:before {
 758         -webkit-box-shadow:
 759                 0 0 0 1px #5b9dd9,
 760                 0 0 2px 1px rgba(30, 140, 190, .8);
 761         box-shadow:
 762                 0 0 0 1px #5b9dd9,
 763                 0 0 2px 1px rgba(30, 140, 190, .8);
 764 }
 765
 766 #available-menu-items .menu-item-handle.item-added .item-type,
 767 #available-menu-items .menu-item-handle.item-added .item-title,
 768 #available-menu-items .menu-item-handle.item-added:hover .item-add,
 769 #available-menu-items .menu-item-handle.item-added .item-add:focus {
 770         color: #82878c;
 771 }
 772
 773 #available-menu-items .menu-item-handle.item-added .item-add:before {
 774         content: "\f147";
 775 }
 776
 777 #available-menu-items .accordion-section-title.loading .spinner,
 778 #available-menu-items-search.loading .accordion-section-title .spinner {
 779         visibility: visible;
 780         margin: 0 20px;
 781 }
 782
 783 #available-menu-items-search .clear-results {
 784         position: absolute;
 785         top: 20px;
 786         right: 20px;
 787         width: 20px;
 788         height: 20px;
 789         cursor: pointer;
 790         color: #a00;
 791         text-decoration: none;
 792 }
 793
 794 #available-menu-items-search .clear-results,
 795 #available-menu-items-search.loading .clear-results.is-visible {
 796         display: none;
 797 }
 798
 799 #available-menu-items-search .clear-results.is-visible {
 800         display: block;
 801 }
 802
 803 #available-menu-items-search .clear-results:before {
 804         content: "\f335";
 805         font: normal 20px/1 dashicons;
 806         -webkit-font-smoothing: antialiased;
 807         -moz-osx-font-smoothing: grayscale;
 808 }
 809
 810 #available-menu-items-search .clear-results:hover,
 811 #available-menu-items-search .clear-results:focus {
 812         color: #f00;
 813 }
 814
 815 #available-menu-items-search .clear-results:focus {
 816         -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
 817         box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
 818 }
 819
 820 #available-menu-items-search .spinner {
 821         position: absolute;
 822         top: 20px;
 823         margin: 0 !important;
 824         right: 20px;
 825 }
 826
 827 #available-menu-items-search input {
 828         padding: 6px 10px;
 829         width: 100%;
 830 }
 831
 832 #available-menu-items-search .accordion-section-title {
 833         padding: 12px 15px;
 834         -webkit-box-sizing: border-box;
 835         -moz-box-sizing: border-box;
 836         box-sizing: border-box;
 837 }
 838
 839 #available-menu-items-search .accordion-section-title:after {
 840         display: none;
 841 }
 842
 843 #available-menu-items-search .accordion-section-content:empty {
 844         min-height: 0;
 845         padding: 0;
 846 }
 847
 848 #available-menu-items-search.loading .accordion-section-content div {
 849         opacity: .5;
 850 }
 851
 852 #available-menu-items-search.loading.loading-more .accordion-section-content div {
 853         opacity: 1;
 854 }
 855
 856 #customize-preview {
 857         -webkit-transition: all 0.2s;
 858         transition: all 0.2s;
 859 }
 860
 861 body.adding-menu-items #available-menu-items {
 862         left: 0;
 863         visibility: visible;
 864 }
 865
 866 body.adding-menu-items .wp-full-overlay-main {
 867         left: 300px;
 868 }
 869
 870 body.adding-menu-items #customize-preview {
 871         opacity: 0.4;
 872 }
 873
 874 .menu-item-handle .spinner {
 875         display: none;
 876         float: left;
 877         margin: 0 8px 0 0;
 878 }
 879
 880 .nav-menu-inserted-item-loading .spinner {
 881         display: block;
 882 }
 883
 884 .nav-menu-inserted-item-loading .menu-item-handle .item-type {
 885         padding: 0 0 0 8px;
 886 }
 887
 888 .nav-menu-inserted-item-loading .menu-item-handle,
 889 .added-menu-item .menu-item-handle.loading {
 890         padding: 10px 15px 10px 8px;
 891         cursor: default;
 892         opacity: .5;
 893         background: #fff;
 894         color: #727773;
 895 }
 896
 897 .added-menu-item .menu-item-handle {
 898         -webkit-transition-property: opacity, background, color;
 899         transition-property: opacity, background, color;
 900         -webkit-transition-duration: 1.25s;
 901         transition-duration: 1.25s;
 902         -webkit-transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 );
 903         transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */
 904 }
 905
 906 /* Add/delete Menus */
 907
 908 /* @todo update selector */
 909 #accordion-section-add_menu {
 910         margin: 15px 12px;
 911 }
 912
 913 .new-menu-section-content {
 914         display: none;
 915         padding: 15px 0 0 0;
 916         clear: both;
 917 }
 918
 919 /* @todo update selector */
 920 #accordion-section-add_menu .accordion-section-title {
 921         padding-left: 45px;
 922 }
 923
 924 /* @todo update selector */
 925 #accordion-section-add_menu .accordion-section-title:before {
 926         font: normal 20px/1 dashicons;
 927         position: absolute;
 928         top: 12px;
 929         left: 14px;
 930         content: "\f132";
 931 }
 932
 933 #create-new-menu-submit {
 934         float: right;
 935         margin: 0 0 12px 0;
 936 }
 937
 938 .menu-delete-item {
 939         display: block;
 940         float: left;
 941         padding: 1em 0;
 942         width: 100%;
 943 }
 944
 945 li.assigned-to-menu-location .menu-delete-item {
 946         display: none;
 947 }
 948
 949 li.assigned-to-menu-location .add-new-menu-item {
 950         margin-bottom: 1em;
 951 }
 952
 953 .menu-delete {
 954         color: #a00;
 955         cursor: pointer;
 956         text-decoration: underline;
 957 }
 958
 959 .menu-delete:hover,
 960 .menu-delete:focus {
 961         color: #f00;
 962         text-decoration: none;
 963 }
 964
 965 .menu-delete:focus {
 966         -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
 967         box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
 968 }
 969
 970 .menu-item-handle {
 971         margin-top: -1px;
 972 }
 973 .ui-sortable-disabled .menu-item-handle {
 974         cursor: default;
 975 }
 976
 977 .menu-item-handle:hover {
 978         position: relative;
 979         z-index: 10;
 980         color: #0073aa;
 981 }
 982
 983 .menu-item-handle:hover .item-type,
 984 .menu-item-handle:hover .item-edit,
 985 #available-menu-items .menu-item-handle:hover .item-add {
 986         color: #0073aa;
 987 }
 988
 989 .menu-item-edit-active .menu-item-handle {
 990         border-color: #999;
 991         border-bottom: none;
 992 }
 993
 994 .customize-control-nav_menu_item {
 995         margin-bottom: 0;
 996 }
 997
 998 .customize-control-nav_menu {
 999         margin-top: 12px;
1000 }
1001
1002 #available-menu-items .customize-section-title {
1003         display: none;
1004 }
1005
1006 @media screen and ( max-width: 782px ) {
1007         #available-menu-items #available-menu-items-search .accordion-section-content {
1008                 top: 63px;
1009         }
1010 }
1011
1012 @media screen and ( max-width: 640px ) {
1013         body.adding-menu-items div#available-menu-items {
1014                 top: 46px;
1015                 left: 0;
1016                 z-index: 10;
1017                 width: 100%;
1018         }
1019
1020         #available-menu-items #available-menu-items-search .accordion-section-content {
1021                 top: 133px;
1022         }
1023
1024         #available-menu-items .customize-section-title {
1025                 display: block;
1026                 margin: 0;
1027         }
1028
1029         #available-menu-items .customize-section-back {
1030                 height: 69px;
1031         }
1032
1033         #available-menu-items .customize-section-title h3 {
1034                 font-size: 20px;
1035                 font-weight: 200;
1036                 padding: 9px 10px 12px 14px;
1037                 margin: 0;
1038                 line-height: 24px;
1039                 color: #555;
1040                 display: block;
1041                 overflow: hidden;
1042                 white-space: nowrap;
1043                 text-overflow: ellipsis;
1044         }
1045
1046         #available-menu-items .customize-section-title .customize-action {
1047                 font-size: 13px;
1048                 display: block;
1049                 font-weight: 400;
1050                 overflow: hidden;
1051                 white-space: nowrap;
1052                 text-overflow: ellipsis;
1053         }
1054 }