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