nizongfeng
/
ZZCMS
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
8.3 MiB
 
 
 
 
 
Tree: e45ea09e50
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'e45ea09e50'
${ noResults }
ZZCMS/wp-admin/css/customize-nav-menus.css

879 lines
21 KiB
Raw Blame History 

  1. #customize-theme-controls #accordion-section-menu_locations {

  2. 	position: relative;

  3. 	margin-bottom: 15px;

  4. }

  5. 

  6. #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {

  7. 	border-bottom-color: #ddd;

  8. }

  9. 

  10. .menu-in-location,

  11. .menu-in-locations {

  12. 	display: block;

  13. 	font-weight: 600;

  14. 	font-size: 10px;

  15. }

  16. 

  17. #customize-controls .theme-location-set,

  18. #customize-controls .control-section .accordion-section-title:focus .menu-in-location,

  19. #customize-controls .control-section .accordion-section-title:hover .menu-in-location {

  20. 	color: #555;

  21. }

  22. 

  23. /* The `edit-menu` button uses also the `button-link` class. */

  24. .customize-control-nav_menu_location .edit-menu {

  25. 	margin-left: 6px;

  26. 	vertical-align: middle;

  27. 	line-height: 28px;

  28. 	color: #0073aa;

  29. 	text-decoration: underline;

  30. }

  31. 

  32. .customize-control-nav_menu_location .edit-menu:hover,

  33. .customize-control-nav_menu_location .edit-menu:active {

  34. 	color: #00a0d2;

  35. }

  36. 

  37. .customize-control-nav_menu_location .edit-menu:focus {

  38. 	color: #124964;

  39. }

  40. 

  41. .wp-customizer .menu-item-bar .menu-item-handle,

  42. .wp-customizer .menu-item-settings,

  43. .wp-customizer .menu-item-settings .description-thin {

  44. 	-webkit-box-sizing: border-box;

  45. 	-moz-box-sizing: border-box;

  46. 	box-sizing: border-box;

  47. }

  48. 

  49. .wp-customizer .menu-item-bar {

  50. 	margin: 0;

  51. }

  52. 

  53. .wp-customizer .menu-item-bar .menu-item-handle {

  54. 	width: 100%;

  55. 	background: #fff;

  56. }

  57. 

  58. .wp-customizer .menu-item-handle .item-title {

  59. 	margin-right: 0;

  60. }

  61. 

  62. .wp-customizer .menu-item-handle .item-type {

  63. 	padding: 1px 21px 0 5px;

  64. 	float: right;

  65. 	text-align: right;

  66. }

  67. 

  68. .wp-customizer .menu-item-handle:hover {

  69. 	z-index: 8;

  70. }

  71. 

  72. .customize-control-nav_menu_item.has-notifications .menu-item-handle {

  73. 	border-left: 4px solid #00a0d2;

  74. }

  75. 

  76. .wp-customizer .menu-item-settings {

  77. 	max-width: 100%;

  78. 	overflow: hidden;

  79. 	z-index: 8;

  80. 	padding: 10px;

  81. 	background: #eee;

  82. 	border: 1px solid #999;

  83. 	border-top: none;

  84. }

  85. 

  86. .wp-customizer .menu-item-settings .description-thin {

  87. 	width: 100%;

  88. 	height: auto;

  89. 	margin: 0 0 8px 0;

  90. }

  91. 

  92. .wp-customizer .menu-item-settings input[type="text"] {

  93. 	width: 100%;

  94. }

  95. 

  96. .wp-customizer .menu-item-settings .submitbox {

  97. 	margin: 0;

  98. 	padding: 0;

  99. }

  100. 

  101. .wp-customizer .menu-item-settings .link-to-original {

  102. 	padding: 5px 0;

  103. 	border: none;

  104. 	font-style: normal;

  105. 	margin: 0;

  106. 	width: 100%;

  107. }

  108. 

  109. .wp-customizer .menu-item .submitbox .submitdelete {

  110. 	float: left;

  111. 	margin: 6px 0 0;

  112. 	padding: 0;

  113. 	cursor: pointer;

  114. }

  115. 

  116. 

  117. /**

  118.  * Menu items reordering styles

  119.  */

  120. 

  121. .menu-item-reorder-nav {

  122. 	display: none;

  123. 	background-color: #fff;

  124. 	position: absolute;

  125. 	top: 0;

  126. 	right: 0;

  127. }

  128. 

  129. .menus-move-left:before {

  130. 	content: "\f341";

  131. }

  132. 

  133. .menus-move-right:before {

  134. 	content: "\f345";

  135. }

  136. 

  137. .reordering .menu-item .item-controls,

  138. .reordering .menu-item .item-type {

  139. 	display: none;

  140. }

  141. 

  142. .reordering .menu-item-reorder-nav {

  143. 	display: block;

  144. }

  145. 

  146. .customize-control input.menu-name-field {

  147. 	width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */

  148. 	margin: 12px 0;

  149. }

  150. 

  151. .wp-customizer .menu-item .item-edit {

  152. 	position: absolute;

  153. 	right: -19px;

  154. 	top: 2px;

  155. 	display: block;

  156. 	width: 30px;

  157. 	height: 38px;

  158. 	margin-right: 0 !important;

  159. 	-webkit-box-shadow: none;

  160. 	box-shadow: none;

  161. 	outline: none;

  162. 	overflow: hidden;

  163. 	cursor: pointer;

  164. }

  165. 

  166. .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after {

  167. 	content: "\f142";

  168. }

  169. 

  170. .wp-customizer .menu-item-settings p.description {

  171. 	font-style: normal;

  172. }

  173. 

  174. .wp-customizer .menu-settings dl {

  175. 	margin: 12px 0 0 0;

  176. 	padding: 0;

  177. }

  178. 

  179. .wp-customizer .menu-settings .checkbox-input {

  180. 	margin-top: 8px;

  181. }

  182. 

  183. .wp-customizer .menu-settings .menu-theme-locations {

  184. 	border-top: 1px solid #ccc;

  185. }

  186. 

  187. .wp-customizer .menu-settings {

  188. 	margin-top: 36px;

  189. 	border-top: none;

  190. }

  191. 

  192. .menu-settings .customize-control-checkbox label {

  193. 	line-height: 1;

  194. }

  195. 

  196. /* @todo update selector or potentially remove */

  197. .menu-settings .customize-control.customize-control-checkbox {

  198. 	margin-bottom: 8px; /* Override collapsing at smaller viewports. */

  199. }

  200. 

  201. .customize-control-menu {

  202. 	margin-top: 4px;

  203. }

  204. 

  205. #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {

  206. 	color: #555;

  207. }

  208. 

  209. /* Screen Options */

  210. .customize-screen-options-toggle {

  211. 	background: none;

  212. 	border: none;

  213. 	color: #555;

  214. 	cursor: pointer;

  215. 	margin: 0;

  216. 	padding: 20px;

  217. 	position: absolute;

  218. 	right: 0;

  219. 	top: 30px;

  220. }

  221. 

  222. #customize-controls .customize-info .customize-help-toggle {

  223. 	padding: 20px;

  224. }

  225. 

  226. #customize-controls .customize-info .customize-help-toggle:before {

  227. 	padding: 4px;

  228. }

  229. 

  230. .customize-screen-options-toggle:hover,

  231. .customize-screen-options-toggle:active,

  232. .customize-screen-options-toggle:focus,

  233. .active-menu-screen-options .customize-screen-options-toggle,

  234. #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,

  235. #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,

  236. #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {

  237. 	color: #0073aa;

  238. }

  239. 

  240. .customize-screen-options-toggle:focus,

  241. #customize-controls .customize-info .customize-help-toggle:focus {

  242. 	outline: none;

  243. }

  244. 

  245. .customize-screen-options-toggle:before {

  246. 	-moz-osx-font-smoothing: grayscale;

  247. 	border: none;

  248. 	content: "\f111";

  249. 	display: block;

  250. 	font: 18px/1 dashicons;

  251. 	padding: 5px;

  252. 	text-align: center;

  253. 	text-decoration: none !important;

  254. 	text-indent: 0;

  255. 	left: 6px;

  256. 	position: absolute;

  257. 	top: 6px;

  258. }

  259. 

  260. .customize-screen-options-toggle:focus:before,

  261. #customize-controls .customize-info .customize-help-toggle:focus:before {

  262. 	-webkit-border-radius: 100%;

  263. 	border-radius: 100%;

  264. }

  265. 

  266. .wp-customizer #screen-options-wrap {

  267. 	display: none;

  268. 	background: #fff;

  269. 	border-top: 1px solid #ddd;

  270. 	padding: 4px 15px 15px;

  271. }

  272. 

  273. .wp-customizer .metabox-prefs label {

  274. 	display: block;

  275. 	padding-right: 0;

  276. 	line-height: 30px;

  277. }

  278. 

  279. /* rework the arrow indicator implementation for NVDA bug same as #32715 */

  280. .wp-customizer .toggle-indicator {

  281. 	display: inline-block;

  282. 	font-size: 20px;

  283. 	line-height: 1;

  284. 	text-indent: -1px; /* account for the dashicon alignment */

  285. }

  286. 

  287. .rtl .wp-customizer .toggle-indicator {

  288. 	text-indent: 1px; /* account for the dashicon alignment */

  289. }

  290. 

  291. .wp-customizer .toggle-indicator:after {

  292. 	content: "\f140";

  293. 	speak: none;

  294. 	vertical-align: top;

  295. 	-webkit-border-radius: 50%;

  296. 	border-radius: 50%;

  297. 	color: #72777c;

  298. 	font: normal 20px/1 dashicons;

  299. 	-webkit-font-smoothing: antialiased;

  300. 	-moz-osx-font-smoothing: grayscale;

  301. 	text-decoration: none !important;

  302. }

  303. 

  304. .control-section-nav_menu .field-link-target,

  305. .control-section-nav_menu .field-title-attribute,

  306. .control-section-nav_menu .field-css-classes,

  307. .control-section-nav_menu .field-xfn,

  308. .control-section-nav_menu .field-description {

  309. 	display: none;

  310. }

  311. 

  312. .control-section-nav_menu.field-link-target-active .field-link-target,

  313. .control-section-nav_menu.field-title-attribute-active .field-title-attribute,

  314. .control-section-nav_menu.field-css-classes-active .field-css-classes,

  315. .control-section-nav_menu.field-xfn-active .field-xfn,

  316. .control-section-nav_menu.field-description-active .field-description {

  317. 	display: block;

  318. }

  319. 

  320. /* WARNING: The 20px factor is hard-coded in JS. */

  321. .menu-item-depth-0  { margin-left: 0;     }

  322. .menu-item-depth-1  { margin-left: 20px;  }

  323. .menu-item-depth-2  { margin-left: 40px;  }

  324. .menu-item-depth-3  { margin-left: 60px;  }

  325. .menu-item-depth-4  { margin-left: 80px;  }

  326. .menu-item-depth-5  { margin-left: 100px; }

  327. .menu-item-depth-6  { margin-left: 120px; }

  328. .menu-item-depth-7  { margin-left: 140px; }

  329. .menu-item-depth-8  { margin-left: 160px; } /* Not likely to be used or useful beyond this depth */

  330. .menu-item-depth-9  { margin-left: 180px; }

  331. .menu-item-depth-10 { margin-left: 200px; }

  332. .menu-item-depth-11 { margin-left: 220px; }

  333. 

  334. /* @todo handle .menu-item-settings width */

  335. .menu-item-depth-0  > .menu-item-bar { margin-right: 0;     }

  336. .menu-item-depth-1  > .menu-item-bar { margin-right: 20px;  }

  337. .menu-item-depth-2  > .menu-item-bar { margin-right: 40px;  }

  338. .menu-item-depth-3  > .menu-item-bar { margin-right: 60px;  }

  339. .menu-item-depth-4  > .menu-item-bar { margin-right: 80px;  }

  340. .menu-item-depth-5  > .menu-item-bar { margin-right: 100px; }

  341. .menu-item-depth-6  > .menu-item-bar { margin-right: 120px; }

  342. .menu-item-depth-7  > .menu-item-bar { margin-right: 140px; }

  343. .menu-item-depth-8  > .menu-item-bar { margin-right: 160px; }

  344. .menu-item-depth-9  > .menu-item-bar { margin-right: 180px; }

  345. .menu-item-depth-10 > .menu-item-bar { margin-right: 200px; }

  346. .menu-item-depth-11 > .menu-item-bar { margin-right: 220px; }

  347. 

  348. /* Submenu left margin. */

  349. .menu-item-depth-0  .menu-item-transport { margin-left: 0;      }

  350. .menu-item-depth-1  .menu-item-transport { margin-left: -20px;  }

  351. .menu-item-depth-3  .menu-item-transport { margin-left: -60px;  }

  352. .menu-item-depth-4  .menu-item-transport { margin-left: -80px;  }

  353. .menu-item-depth-2  .menu-item-transport { margin-left: -40px;  }

  354. .menu-item-depth-5  .menu-item-transport { margin-left: -100px; }

  355. .menu-item-depth-6  .menu-item-transport { margin-left: -120px; }

  356. .menu-item-depth-7  .menu-item-transport { margin-left: -140px; }

  357. .menu-item-depth-8  .menu-item-transport { margin-left: -160px; }

  358. .menu-item-depth-9  .menu-item-transport { margin-left: -180px; }

  359. .menu-item-depth-10 .menu-item-transport { margin-left: -200px; }

  360. .menu-item-depth-11 .menu-item-transport { margin-left: -220px; }

  361. 

  362. /* WARNING: The 20px factor is hard-coded in JS. */

  363. .reordering .menu-item-depth-0  { margin-left: 0;     }

  364. .reordering .menu-item-depth-1  { margin-left: 15px;  }

  365. .reordering .menu-item-depth-2  { margin-left: 30px;  }

  366. .reordering .menu-item-depth-3  { margin-left: 45px;  }

  367. .reordering .menu-item-depth-4  { margin-left: 60px;  }

  368. .reordering .menu-item-depth-5  { margin-left: 75px;  }

  369. .reordering .menu-item-depth-6  { margin-left: 90px;  }

  370. .reordering .menu-item-depth-7  { margin-left: 105px; }

  371. .reordering .menu-item-depth-8  { margin-left: 120px; } /* Not likely to be used or useful beyond this depth */

  372. .reordering .menu-item-depth-9  { margin-left: 135px; }

  373. .reordering .menu-item-depth-10 { margin-left: 150px; }

  374. .reordering .menu-item-depth-11 { margin-left: 165px; }

  375. 

  376. .reordering .menu-item-depth-0  > .menu-item-bar { margin-right: 0;     }

  377. .reordering .menu-item-depth-1  > .menu-item-bar { margin-right: 15px;  }

  378. .reordering .menu-item-depth-2  > .menu-item-bar { margin-right: 30px;  }

  379. .reordering .menu-item-depth-3  > .menu-item-bar { margin-right: 45px;  }

  380. .reordering .menu-item-depth-4  > .menu-item-bar { margin-right: 60px;  }

  381. .reordering .menu-item-depth-5  > .menu-item-bar { margin-right: 75px;  }

  382. .reordering .menu-item-depth-6  > .menu-item-bar { margin-right: 90px;  }

  383. .reordering .menu-item-depth-7  > .menu-item-bar { margin-right: 105px; }

  384. .reordering .menu-item-depth-8  > .menu-item-bar { margin-right: 120px; }

  385. .reordering .menu-item-depth-9  > .menu-item-bar { margin-right: 135px; }

  386. .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }

  387. .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }

  388. 

  389. .control-section-nav_menu.menu .menu-item-edit-active {

  390. 	margin-left: 0;

  391. }

  392. 

  393. .control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {

  394. 	margin-right: 0;

  395. }

  396. 

  397. .control-section-nav_menu.menu .sortable-placeholder {

  398. 	margin-top: 0;

  399. 	margin-bottom: 1px;

  400. 	max-width: -webkit-calc(100% - 2px);

  401. 	max-width: calc(100% - 2px);

  402. 	float: left;

  403. 	display: list-item;

  404. 	border-color: #a0a5aa;

  405. }

  406. 

  407. .menu-item-transport li.customize-control {

  408. 	float: none;

  409. }

  410. 

  411. .control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {

  412. 	margin-top: 0;

  413. }

  414. 

  415. /**

  416.  * Add-menu-items mode

  417.  */

  418. 

  419. .adding-menu-items .control-section {

  420. 	opacity: .4;

  421. }

  422. 

  423. .adding-menu-items .control-panel.control-section,

  424. .adding-menu-items .control-section.open {

  425. 	opacity: 1;

  426. }

  427. 

  428. .menu-item-bar .item-delete {

  429. 	color: #a00;

  430. 	position: absolute;

  431. 	top: 2px;

  432. 	right: -19px;

  433. 	width: 30px;

  434. 	height: 38px;

  435. 	cursor: pointer;

  436. 	display: none;

  437. }

  438. 

  439. .menu-item-bar .item-delete:before {

  440. 	content: "\f335";

  441. 	position: absolute;

  442. 	top: 9px;

  443. 	left: 5px;

  444. 	-webkit-border-radius: 50%;

  445. 	border-radius: 50%;

  446. 	font: normal 20px/1 dashicons;

  447. 	-webkit-font-smoothing: antialiased;

  448. 	-moz-osx-font-smoothing: grayscale;

  449. }

  450. 

  451. .ie8 .menu-item-bar .item-delete:before {

  452. 	top: -10px;

  453. }

  454. 

  455. .menu-item-bar .item-delete:hover,

  456. .menu-item-bar .item-delete:focus {

  457. 	-webkit-box-shadow: none;

  458. 	box-shadow: none;

  459. 	outline: none;

  460. 	color: #f00;

  461. }

  462. 

  463. .adding-menu-items .menu-item-bar .item-edit {

  464. 	display: none;

  465. }

  466. 

  467. .adding-menu-items .menu-item-bar .item-delete {

  468. 	display: block;

  469. }

  470. 

  471. /**

  472.  * Styles for menu-item addition panel

  473.  */

  474. 

  475. #available-menu-items.opening {

  476. 	overflow-y: hidden; /* avoid scrollbar jitter with animating heights */

  477. }

  478. 

  479. #available-menu-items #available-menu-items-search.open {

  480. 	height: 100%;

  481. 	border-bottom: none;

  482. }

  483. 

  484. #available-menu-items .accordion-section-title {

  485. 	border-left: none;

  486. 	border-right: none;

  487. 	background: #fff;

  488. 	-webkit-transition: background-color 0.15s;

  489. 	transition: background-color 0.15s;

  490. 	/* Reset the value inherited from the base .accordion-section-title style. Ticket #37589. */

  491. 	-webkit-user-select: auto;

  492. 	-moz-user-select: auto;

  493. 	-ms-user-select: auto;

  494. 	user-select: auto;

  495. }

  496. 

  497. #available-menu-items .open .accordion-section-title,

  498. #available-menu-items #available-menu-items-search .accordion-section-title {

  499. 	background: #eee;

  500. }

  501. 

  502. /* rework the arrow indicator implementation for NVDA bug see #32715 */

  503. #available-menu-items .accordion-section-title:after {

  504. 	content: none !important;

  505. }

  506. 

  507. #available-menu-items .accordion-section-title:hover .toggle-indicator:after,

  508. #available-menu-items .button-link:hover .toggle-indicator:after,

  509. #available-menu-items .button-link:focus .toggle-indicator:after {

  510. 	color: #23282d;

  511. }

  512. 

  513. #available-menu-items .open .accordion-section-title .toggle-indicator:after {

  514. 	content: "\f142";

  515. 	color: #23282d;

  516. }

  517. 

  518. #available-menu-items .available-menu-items-list {

  519. 	overflow-y: auto;

  520. 	max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */

  521. 	background: transparent;

  522. }

  523. 

  524. #available-menu-items .accordion-section-title button {

  525. 	display: block;

  526. 	width: 28px;

  527. 	height: 35px;

  528. 	position: absolute;

  529. 	top: 5px;

  530. 	right: 5px;

  531. 	-webkit-box-shadow: none;

  532. 	box-shadow: none;

  533. 	outline: none;

  534. 	cursor: pointer;

  535. }

  536. 

  537. #available-menu-items .accordion-section-title .no-items,

  538. #available-menu-items .cannot-expand .accordion-section-title .spinner,

  539. #available-menu-items .cannot-expand .accordion-section-title > button {

  540. 	display: none;

  541. }

  542. 

  543. #available-menu-items-search.cannot-expand .accordion-section-title .spinner {

  544. 	display: block;

  545. }

  546. 

  547. #available-menu-items .cannot-expand .accordion-section-title .no-items {

  548. 	float: right;

  549. 	color: #555d66;

  550. 	font-weight: 400;

  551. 	margin-left: 5px;

  552. }

  553. 

  554. #available-menu-items .accordion-section-content {

  555. 	max-height: 290px;

  556. 	margin: 0;

  557. 	padding: 0;

  558. 	position: relative;

  559. 	background: transparent;

  560. }

  561. 

  562. #available-menu-items .accordion-section-content .available-menu-items-list {

  563. 	margin: 0 0 45px 0;

  564. 	padding: 1px 15px 15px 15px;

  565. }

  566. 

  567. #available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */

  568. 	margin-bottom: 0;

  569. }

  570. 

  571. #new-custom-menu-item .accordion-section-content {

  572. 	padding: 0 15px 15px 15px;

  573. }

  574. 

  575. #available-menu-items .menu-item-tpl {

  576. 	margin: 0;

  577. }

  578. 

  579. #custom-menu-item-name.invalid,

  580. #custom-menu-item-url.invalid,

  581. .menu-name-field.invalid,

  582. .menu-name-field.invalid:focus,

  583. #available-menu-items .new-content-item .create-item-input.invalid,

  584. #available-menu-items .new-content-item .create-item-input.invalid:focus {

  585. 	border: 1px solid #f00;

  586. }

  587. 

  588. #available-menu-items .menu-item-handle .item-type {

  589. 	padding-right: 0;

  590. }

  591. 

  592. #available-menu-items .menu-item-handle .item-title {

  593. 	padding-left: 20px;

  594. }

  595. 

  596. #available-menu-items .menu-item-handle {

  597. 	cursor: pointer;

  598. }

  599. 

  600. #available-menu-items .menu-item-handle {

  601. 	-webkit-box-shadow: none;

  602. 	box-shadow: none;

  603. 	margin-top: -1px;

  604. }

  605. 

  606. #available-menu-items .menu-item-handle:hover {

  607. 	z-index: 1;

  608. }

  609. 

  610. #available-menu-items .item-title h4 {

  611. 	padding: 0 0 5px;

  612. 	font-size: 14px;

  613. }

  614. 

  615. #available-menu-items .item-add {

  616. 	position: absolute;

  617. 	top: 1px;

  618. 	left: 1px;

  619. 	color: #82878c;

  620. 	width: 30px;

  621. 	height: 38px;

  622. 	-webkit-box-shadow: none;

  623. 	box-shadow: none;

  624. 	outline: none;

  625. 	cursor: pointer;

  626. }

  627. 

  628. #available-menu-items .menu-item-handle .item-add:focus {

  629. 	color: #23282d;

  630. }

  631. 

  632. #available-menu-items .item-add:before {

  633. 	content: "\f543";

  634. 	position: relative;

  635. 	left: 2px;

  636. 	top: 3px;

  637. 	display: inline-block;

  638. 	height: 20px;

  639. 	-webkit-border-radius: 50%;

  640. 	border-radius: 50%;

  641. 	font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */

  642. }

  643. 

  644. #available-menu-items .menu-item-handle.item-added .item-type,

  645. #available-menu-items .menu-item-handle.item-added .item-title,

  646. #available-menu-items .menu-item-handle.item-added:hover .item-add,

  647. #available-menu-items .menu-item-handle.item-added .item-add:focus {

  648. 	color: #82878c;

  649. }

  650. 

  651. #available-menu-items .menu-item-handle.item-added .item-add:before {

  652. 	content: "\f147";

  653. }

  654. 

  655. #available-menu-items .accordion-section-title.loading .spinner,

  656. #available-menu-items-search.loading .accordion-section-title .spinner {

  657. 	visibility: visible;

  658. 	margin: 0 20px;

  659. }

  660. 

  661. #available-menu-items-search .spinner {

  662. 	position: absolute;

  663. 	top: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */

  664. 	right: 21px;

  665. 	margin: 0 !important;

  666. }

  667. 

  668. /* search results list */

  669. #available-menu-items #available-menu-items-search .accordion-section-content {

  670. 	position: absolute;

  671. 	left: 0;

  672. 	top: 60px; /* below title div / search input */

  673. 	bottom: 0px; /* 100% height that still triggers lazy load */

  674. 	max-height: none;

  675. 	width: 100%;

  676. 	padding: 1px 15px 15px;

  677. 	-webkit-box-sizing: border-box;

  678. 	-moz-box-sizing: border-box;

  679. 	box-sizing: border-box;

  680. }

  681. 

  682. #available-menu-items-search .nothing-found {

  683. 	/* Compensate the 1px top padding of the container. */

  684. 	margin-top: -1px;

  685. }

  686. 

  687. #available-menu-items-search .accordion-section-title:after {

  688. 	display: none;

  689. }

  690. 

  691. #available-menu-items-search .accordion-section-content:empty {

  692. 	min-height: 0;

  693. 	padding: 0;

  694. }

  695. 

  696. #available-menu-items-search.loading .accordion-section-content div {

  697. 	opacity: .5;

  698. }

  699. 

  700. #available-menu-items-search.loading.loading-more .accordion-section-content div {

  701. 	opacity: 1;

  702. }

  703. 

  704. #customize-preview {

  705. 	-webkit-transition: all 0.2s;

  706. 	transition: all 0.2s;

  707. }

  708. 

  709. body.adding-menu-items #available-menu-items {

  710. 	left: 0;

  711. 	visibility: visible;

  712. }

  713. 

  714. body.adding-menu-items .wp-full-overlay-main {

  715. 	left: 300px;

  716. }

  717. 

  718. body.adding-menu-items #customize-preview {

  719. 	opacity: 0.4;

  720. }

  721. 

  722. .menu-item-handle .spinner {

  723. 	display: none;

  724. 	float: left;

  725. 	margin: 0 8px 0 0;

  726. }

  727. 

  728. .nav-menu-inserted-item-loading .spinner {

  729. 	display: block;

  730. }

  731. 

  732. .nav-menu-inserted-item-loading .menu-item-handle .item-type {

  733. 	padding: 0 0 0 8px;

  734. }

  735. 

  736. .nav-menu-inserted-item-loading .menu-item-handle,

  737. .added-menu-item .menu-item-handle.loading {

  738. 	padding: 10px 15px 10px 8px;

  739. 	cursor: default;

  740. 	opacity: .5;

  741. 	background: #fff;

  742. 	color: #727773;

  743. }

  744. 

  745. .added-menu-item .menu-item-handle {

  746. 	-webkit-transition-property: opacity, background, color;

  747. 	transition-property: opacity, background, color;

  748. 	-webkit-transition-duration: 1.25s;

  749. 	transition-duration: 1.25s;

  750. 	-webkit-transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 );

  751. 	transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */

  752. }

  753. 

  754. /* Add/delete Menus */

  755. 

  756. #customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {

  757. 	border-bottom-color: #ddd;

  758. }

  759. 

  760. /* @todo update selector */

  761. #accordion-section-add_menu {

  762. 	margin: 15px 12px;

  763. 	overflow: hidden;

  764. }

  765. 

  766. .new-menu-section-content {

  767. 	display: none;

  768. 	padding: 15px 0 0 0;

  769. 	clear: both;

  770. }

  771. 

  772. /* @todo update selector */

  773. #accordion-section-add_menu .accordion-section-title {

  774. 	padding-left: 45px;

  775. }

  776. 

  777. /* @todo update selector */

  778. #accordion-section-add_menu .accordion-section-title:before {

  779. 	font: normal 20px/1 dashicons;

  780. 	position: absolute;

  781. 	top: 12px;

  782. 	left: 14px;

  783. 	content: "\f132";

  784. }

  785. 

  786. #create-new-menu-submit {

  787. 	float: right;

  788. 	margin: 0 0 12px 0;

  789. }

  790. 

  791. .menu-delete-item {

  792. 	float: left;

  793. 	padding: 1em 0;

  794. 	width: 100%;

  795. }

  796. 

  797. li.assigned-to-menu-location .menu-delete-item {

  798. 	display: none;

  799. }

  800. 

  801. li.assigned-to-menu-location .add-new-menu-item {

  802. 	margin-bottom: 1em;

  803. }

  804. 

  805. .menu-delete {

  806. 	color: #a00;

  807. 	cursor: pointer;

  808. 	text-decoration: underline;

  809. }

  810. 

  811. .menu-delete:hover,

  812. .menu-delete:focus {

  813. 	color: #f00;

  814. }

  815. 

  816. .menu-item-handle {

  817. 	margin-top: -1px;

  818. }

  819. .ui-sortable-disabled .menu-item-handle {

  820. 	cursor: default;

  821. }

  822. 

  823. .menu-item-handle:hover {

  824. 	position: relative;

  825. 	z-index: 10;

  826. 	color: #0073aa;

  827. }

  828. 

  829. .menu-item-handle:hover .item-type,

  830. .menu-item-handle:hover .item-edit,

  831. #available-menu-items .menu-item-handle:hover .item-add {

  832. 	color: #0073aa;

  833. }

  834. 

  835. .menu-item-edit-active .menu-item-handle {

  836. 	border-color: #999;

  837. 	border-bottom: none;

  838. }

  839. 

  840. .customize-control-nav_menu_item {

  841. 	margin-bottom: 0;

  842. }

  843. 

  844. .customize-control-nav_menu {

  845. 	margin-top: 12px;

  846. }

  847. 

  848. /**

  849.  * box-shadows

  850.  */

  851. 

  852. .wp-customizer .menu-item .submitbox .submitdelete:focus,

  853. .customize-screen-options-toggle:focus:before,

  854. #customize-controls .customize-info .customize-help-toggle:focus:before,

  855. .wp-customizer button:focus .toggle-indicator:after,

  856. .menu-delete:focus,

  857. .menu-item-bar .item-delete:focus:before,

  858. #available-menu-items .item-add:focus:before {

  859. 	-webkit-box-shadow:

  860. 		0 0 0 1px #5b9dd9,

  861. 		0 0 2px 1px rgba(30, 140, 190, .8);

  862. 	box-shadow:

  863. 		0 0 0 1px #5b9dd9,

  864. 		0 0 2px 1px rgba(30, 140, 190, .8);

  865. }

  866. 

  867. 

  868. @media screen and ( max-width: 782px ) {

  869. 	#available-menu-items #available-menu-items-search .accordion-section-content {

  870. 		top: 63px;

  871. 	}

  872. }

  873. 

  874. @media screen and ( max-width: 640px ) {

  875. 	#available-menu-items #available-menu-items-search .accordion-section-content {

  876. 		top: 130px;

  877. 	}

  878. }