[Summary view] [Print] [Text view]

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