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