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