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