wp/wp-admin/css/customize-nav-menus.css
changeset 7 cf61fcea0001
child 9 177826044cd9
equal deleted inserted replaced
6:490d5cc509ed 7:cf61fcea0001
       
     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 }