wp/wp-admin/css/customize-nav-menus-rtl.css
changeset 18 be944660c56a
parent 16 a86126ab1dd4
child 19 3d72ae0968f4
equal deleted inserted replaced
17:34716fd837a4 18:be944660c56a
     3 	position: relative;
     3 	position: relative;
     4 	margin-top: 30px;
     4 	margin-top: 30px;
     5 }
     5 }
     6 
     6 
     7 #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
     7 #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
     8 	border-bottom-color: #ddd;
     8 	border-bottom-color: #dcdcde;
     9 	margin-top: 15px;
     9 	margin-top: 15px;
    10 }
    10 }
    11 
    11 
    12 #customize-theme-controls .customize-section-title-nav_menus-heading,
    12 #customize-theme-controls .customize-section-title-nav_menus-heading,
    13 #customize-theme-controls .customize-section-title-menu_locations-heading,
    13 #customize-theme-controls .customize-section-title-menu_locations-heading,
    28 }
    28 }
    29 
    29 
    30 #customize-controls .theme-location-set,
    30 #customize-controls .theme-location-set,
    31 #customize-controls .control-section .accordion-section-title:focus .menu-in-location,
    31 #customize-controls .control-section .accordion-section-title:focus .menu-in-location,
    32 #customize-controls .control-section .accordion-section-title:hover .menu-in-location {
    32 #customize-controls .control-section .accordion-section-title:hover .menu-in-location {
    33 	color: #555;
    33 	color: #50575e;
    34 }
    34 }
    35 
    35 
    36 /* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */
    36 /* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */
    37 .customize-control-nav_menu_location .edit-menu,
    37 .customize-control-nav_menu_location .edit-menu,
    38 .customize-control-nav_menu_location .create-menu {
    38 .customize-control-nav_menu_location .create-menu {
    64 	margin: 0;
    64 	margin: 0;
    65 }
    65 }
    66 
    66 
    67 .wp-customizer .menu-item-bar .menu-item-handle {
    67 .wp-customizer .menu-item-bar .menu-item-handle {
    68 	width: 100%;
    68 	width: 100%;
       
    69 	max-width: 100%;
    69 	background: #fff;
    70 	background: #fff;
    70 }
    71 }
    71 
    72 
    72 .wp-customizer .menu-item-handle .item-title {
    73 .wp-customizer .menu-item-handle .item-title {
    73 	margin-left: 0;
    74 	margin-left: 0;
    82 .wp-customizer .menu-item-handle:hover {
    83 .wp-customizer .menu-item-handle:hover {
    83 	z-index: 8;
    84 	z-index: 8;
    84 }
    85 }
    85 
    86 
    86 .customize-control-nav_menu_item.has-notifications .menu-item-handle {
    87 .customize-control-nav_menu_item.has-notifications .menu-item-handle {
    87 	border-right: 4px solid #00a0d2;
    88 	border-right: 4px solid #72aee6;
    88 }
    89 }
    89 
    90 
    90 .wp-customizer .menu-item-settings {
    91 .wp-customizer .menu-item-settings {
    91 	max-width: 100%;
    92 	max-width: 100%;
    92 	overflow: hidden;
    93 	overflow: hidden;
    93 	z-index: 8;
    94 	z-index: 8;
    94 	padding: 10px;
    95 	padding: 10px;
    95 	background: #eee;
    96 	background: #f0f0f1;
    96 	border: 1px solid #999;
    97 	border: 1px solid #8c8f94;
    97 	border-top: none;
    98 	border-top: none;
    98 }
    99 }
    99 
   100 
   100 .wp-customizer .menu-item-settings .description-thin {
   101 .wp-customizer .menu-item-settings .description-thin {
   101 	width: 100%;
   102 	width: 100%;
   192 .wp-customizer .menu-settings .checkbox-input {
   193 .wp-customizer .menu-settings .checkbox-input {
   193 	margin-top: 8px;
   194 	margin-top: 8px;
   194 }
   195 }
   195 
   196 
   196 .wp-customizer .menu-settings .menu-theme-locations {
   197 .wp-customizer .menu-settings .menu-theme-locations {
   197 	border-top: 1px solid #ccc;
   198 	border-top: 1px solid #c3c4c7;
   198 }
   199 }
   199 
   200 
   200 .wp-customizer .menu-settings {
   201 .wp-customizer .menu-settings {
   201 	margin-top: 36px;
   202 	margin-top: 36px;
   202 	border-top: none;
   203 	border-top: none;
   207 	border-top: none;
   208 	border-top: none;
   208 }
   209 }
   209 
   210 
   210 .wp-customizer .control-section-nav_menu .menu-location-settings {
   211 .wp-customizer .control-section-nav_menu .menu-location-settings {
   211 	margin-top: 24px;
   212 	margin-top: 24px;
   212 	border-top: 1px solid #ddd;
   213 	border-top: 1px solid #dcdcde;
   213 }
   214 }
   214 
   215 
   215 .wp-customizer .control-section-nav_menu .menu-location-settings,
   216 .wp-customizer .control-section-nav_menu .menu-location-settings,
   216 .customize-control-nav_menu_auto_add {
   217 .customize-control-nav_menu_auto_add {
   217 	padding-top: 12px;
   218 	padding-top: 12px;
   232 .customize-control-menu {
   233 .customize-control-menu {
   233 	margin-top: 4px;
   234 	margin-top: 4px;
   234 }
   235 }
   235 
   236 
   236 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
   237 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
   237 	color: #555;
   238 	color: #50575e;
   238 }
   239 }
   239 
   240 
   240 /* Screen Options */
   241 /* Screen Options */
   241 .customize-screen-options-toggle {
   242 .customize-screen-options-toggle {
   242 	background: none;
   243 	background: none;
   243 	border: none;
   244 	border: none;
   244 	color: #555;
   245 	color: #50575e;
   245 	cursor: pointer;
   246 	cursor: pointer;
   246 	margin: 0;
   247 	margin: 0;
   247 	padding: 20px;
   248 	padding: 20px;
   248 	position: absolute;
   249 	position: absolute;
   249 	left: 0;
   250 	left: 0;
   263 .customize-screen-options-toggle:focus,
   264 .customize-screen-options-toggle:focus,
   264 .active-menu-screen-options .customize-screen-options-toggle,
   265 .active-menu-screen-options .customize-screen-options-toggle,
   265 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
   266 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
   266 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
   267 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
   267 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
   268 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
   268 	color: #0073aa;
   269 	color: #2271b1;
   269 }
   270 }
   270 
   271 
   271 .customize-screen-options-toggle:focus,
   272 .customize-screen-options-toggle:focus,
   272 #customize-controls .customize-info .customize-help-toggle:focus {
   273 #customize-controls .customize-info .customize-help-toggle:focus {
   273 	/* Only visible in Windows High Contrast mode */
   274 	/* Only visible in Windows High Contrast mode */
   295 }
   296 }
   296 
   297 
   297 .wp-customizer #screen-options-wrap {
   298 .wp-customizer #screen-options-wrap {
   298 	display: none;
   299 	display: none;
   299 	background: #fff;
   300 	background: #fff;
   300 	border-top: 1px solid #ddd;
   301 	border-top: 1px solid #dcdcde;
   301 	padding: 4px 15px 15px;
   302 	padding: 4px 15px 15px;
   302 }
   303 }
   303 
   304 
   304 .wp-customizer .metabox-prefs label {
   305 .wp-customizer .metabox-prefs label {
   305 	display: block;
   306 	display: block;
   321 .wp-customizer .menu-item .item-edit .toggle-indicator:before,
   322 .wp-customizer .menu-item .item-edit .toggle-indicator:before,
   322 #available-menu-items .accordion-section-title .toggle-indicator:before {
   323 #available-menu-items .accordion-section-title .toggle-indicator:before {
   323 	content: "\f140";
   324 	content: "\f140";
   324 	display: block;
   325 	display: block;
   325 	padding: 1px 0px 1px 2px;
   326 	padding: 1px 0px 1px 2px;
   326 	speak: none;
   327 	speak: never;
   327 	border-radius: 50%;
   328 	border-radius: 50%;
   328 	color: #72777c;
   329 	color: #787c82;
   329 	font: normal 20px/1 dashicons;
   330 	font: normal 20px/1 dashicons;
   330 	-webkit-font-smoothing: antialiased;
   331 	-webkit-font-smoothing: antialiased;
   331 	-moz-osx-font-smoothing: grayscale;
   332 	-moz-osx-font-smoothing: grayscale;
   332 	text-decoration: none !important;
   333 	text-decoration: none !important;
   333 }
   334 }
   429 	margin-top: 0;
   430 	margin-top: 0;
   430 	margin-bottom: 1px;
   431 	margin-bottom: 1px;
   431 	max-width: calc(100% - 2px);
   432 	max-width: calc(100% - 2px);
   432 	float: right;
   433 	float: right;
   433 	display: list-item;
   434 	display: list-item;
   434 	border-color: #a0a5aa;
   435 	border-color: #a7aaad;
   435 }
   436 }
   436 
   437 
   437 .menu-item-transport li.customize-control {
   438 .menu-item-transport li.customize-control {
   438 	float: none;
   439 	float: none;
   439 }
   440 }
   454 .adding-menu-items .control-section.open {
   455 .adding-menu-items .control-section.open {
   455 	opacity: 1;
   456 	opacity: 1;
   456 }
   457 }
   457 
   458 
   458 .menu-item-bar .item-delete {
   459 .menu-item-bar .item-delete {
   459 	color: #a00;
   460 	color: #d63638;
   460 	position: absolute;
   461 	position: absolute;
   461 	top: 2px;
   462 	top: 2px;
   462 	left: -19px;
   463 	left: -19px;
   463 	width: 30px;
   464 	width: 30px;
   464 	height: 38px;
   465 	height: 38px;
   479 
   480 
   480 .menu-item-bar .item-delete:hover,
   481 .menu-item-bar .item-delete:hover,
   481 .menu-item-bar .item-delete:focus {
   482 .menu-item-bar .item-delete:focus {
   482 	box-shadow: none;
   483 	box-shadow: none;
   483 	outline: none;
   484 	outline: none;
   484 	color: #dc3232;
   485 	color: #d63638;
   485 }
   486 }
   486 
   487 
   487 .adding-menu-items .menu-item-bar .item-edit {
   488 .adding-menu-items .menu-item-bar .item-edit {
   488 	display: none;
   489 	display: none;
   489 }
   490 }
   510 	border-left: none;
   511 	border-left: none;
   511 	background: #fff;
   512 	background: #fff;
   512 	transition: background-color 0.15s;
   513 	transition: background-color 0.15s;
   513 	/* Reset the value inherited from the base .accordion-section-title style. Ticket #37589. */
   514 	/* Reset the value inherited from the base .accordion-section-title style. Ticket #37589. */
   514 	-webkit-user-select: auto;
   515 	-webkit-user-select: auto;
   515 	-moz-user-select: auto;
       
   516 	-ms-user-select: auto;
       
   517 	user-select: auto;
   516 	user-select: auto;
   518 }
   517 }
   519 
   518 
   520 #available-menu-items .open .accordion-section-title,
   519 #available-menu-items .open .accordion-section-title,
   521 #available-menu-items #available-menu-items-search .accordion-section-title {
   520 #available-menu-items #available-menu-items-search .accordion-section-title {
   522 	background: #eee;
   521 	background: #f0f0f1;
   523 }
   522 }
   524 
   523 
   525 /* rework the arrow indicator implementation for NVDA bug see #32715 */
   524 /* rework the arrow indicator implementation for NVDA bug see #32715 */
   526 #available-menu-items .accordion-section-title:after {
   525 #available-menu-items .accordion-section-title:after {
   527 	content: none !important;
   526 	content: none !important;
   528 }
   527 }
   529 
   528 
   530 #available-menu-items .accordion-section-title:hover .toggle-indicator:before,
   529 #available-menu-items .accordion-section-title:hover .toggle-indicator:before,
   531 #available-menu-items .button-link:hover .toggle-indicator:before,
   530 #available-menu-items .button-link:hover .toggle-indicator:before,
   532 #available-menu-items .button-link:focus .toggle-indicator:before {
   531 #available-menu-items .button-link:focus .toggle-indicator:before {
   533 	color: #23282d;
   532 	color: #1d2327;
   534 }
   533 }
   535 
   534 
   536 #available-menu-items .open .accordion-section-title .toggle-indicator:before {
   535 #available-menu-items .open .accordion-section-title .toggle-indicator:before {
   537 	content: "\f142";
   536 	content: "\f142";
   538 	color: #23282d;
   537 	color: #1d2327;
   539 }
   538 }
   540 
   539 
   541 #available-menu-items .available-menu-items-list {
   540 #available-menu-items .available-menu-items-list {
   542 	overflow-y: auto;
   541 	overflow-y: auto;
   543 	max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
   542 	max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
   567 	display: block;
   566 	display: block;
   568 }
   567 }
   569 
   568 
   570 #available-menu-items .cannot-expand .accordion-section-title .no-items {
   569 #available-menu-items .cannot-expand .accordion-section-title .no-items {
   571 	float: left;
   570 	float: left;
   572 	color: #555d66;
   571 	color: #50575e;
   573 	font-weight: 400;
   572 	font-weight: 400;
   574 	margin-right: 5px;
   573 	margin-right: 5px;
   575 }
   574 }
   576 
   575 
   577 #available-menu-items .accordion-section-content {
   576 #available-menu-items .accordion-section-content {
   604 .edit-menu-item-url.invalid,
   603 .edit-menu-item-url.invalid,
   605 .menu-name-field.invalid,
   604 .menu-name-field.invalid,
   606 .menu-name-field.invalid:focus,
   605 .menu-name-field.invalid:focus,
   607 #available-menu-items .new-content-item .create-item-input.invalid,
   606 #available-menu-items .new-content-item .create-item-input.invalid,
   608 #available-menu-items .new-content-item .create-item-input.invalid:focus {
   607 #available-menu-items .new-content-item .create-item-input.invalid:focus {
   609 	border: 1px solid #dc3232;
   608 	border: 1px solid #d63638;
   610 }
   609 }
   611 
   610 
   612 #available-menu-items .menu-item-handle .item-type {
   611 #available-menu-items .menu-item-handle .item-type {
   613 	padding-left: 0;
   612 	padding-left: 0;
   614 }
   613 }
   637 
   636 
   638 #available-menu-items .item-add {
   637 #available-menu-items .item-add {
   639 	position: absolute;
   638 	position: absolute;
   640 	top: 1px;
   639 	top: 1px;
   641 	right: 1px;
   640 	right: 1px;
   642 	color: #82878c;
   641 	color: #8c8f94;
   643 	width: 30px;
   642 	width: 30px;
   644 	height: 38px;
   643 	height: 38px;
   645 	box-shadow: none;
   644 	box-shadow: none;
   646 	outline: none;
   645 	outline: none;
   647 	cursor: pointer;
   646 	cursor: pointer;
   648 	text-align: center;
   647 	text-align: center;
   649 }
   648 }
   650 
   649 
   651 #available-menu-items .menu-item-handle .item-add:focus {
   650 #available-menu-items .menu-item-handle .item-add:focus {
   652 	color: #23282d;
   651 	color: #1d2327;
   653 }
   652 }
   654 
   653 
   655 #available-menu-items .item-add:before {
   654 #available-menu-items .item-add:before {
   656 	content: "\f543";
   655 	content: "\f543";
   657 	position: relative;
   656 	position: relative;
   665 
   664 
   666 #available-menu-items .menu-item-handle.item-added .item-type,
   665 #available-menu-items .menu-item-handle.item-added .item-type,
   667 #available-menu-items .menu-item-handle.item-added .item-title,
   666 #available-menu-items .menu-item-handle.item-added .item-title,
   668 #available-menu-items .menu-item-handle.item-added:hover .item-add,
   667 #available-menu-items .menu-item-handle.item-added:hover .item-add,
   669 #available-menu-items .menu-item-handle.item-added .item-add:focus {
   668 #available-menu-items .menu-item-handle.item-added .item-add:focus {
   670 	color: #82878c;
   669 	color: #8c8f94;
   671 }
   670 }
   672 
   671 
   673 #available-menu-items .menu-item-handle.item-added .item-add:before {
   672 #available-menu-items .menu-item-handle.item-added .item-add:before {
   674 	content: "\f147";
   673 	content: "\f147";
   675 }
   674 }
   760 .added-menu-item .menu-item-handle.loading {
   759 .added-menu-item .menu-item-handle.loading {
   761 	padding: 10px 8px 10px 15px;
   760 	padding: 10px 8px 10px 15px;
   762 	cursor: default;
   761 	cursor: default;
   763 	opacity: .5;
   762 	opacity: .5;
   764 	background: #fff;
   763 	background: #fff;
   765 	color: #727773;
   764 	color: #787c82;
   766 }
   765 }
   767 
   766 
   768 .added-menu-item .menu-item-handle {
   767 .added-menu-item .menu-item-handle {
   769 	transition-property: opacity, background, color;
   768 	transition-property: opacity, background, color;
   770 	transition-duration: 1.25s;
   769 	transition-duration: 1.25s;
   772 }
   771 }
   773 
   772 
   774 /* Add/delete Menus */
   773 /* Add/delete Menus */
   775 
   774 
   776 #customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {
   775 #customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {
   777 	border-bottom-color: #ddd;
   776 	border-bottom-color: #dcdcde;
   778 }
   777 }
   779 
   778 
   780 /* @todo update selector */
   779 /* @todo update selector */
   781 #accordion-section-add_menu {
   780 #accordion-section-add_menu {
   782 	margin: 15px 12px;
   781 	margin: 15px 12px;
   826 }
   825 }
   827 
   826 
   828 .menu-item-handle:hover {
   827 .menu-item-handle:hover {
   829 	position: relative;
   828 	position: relative;
   830 	z-index: 10;
   829 	z-index: 10;
   831 	color: #0073aa;
   830 	color: #2271b1;
   832 }
   831 }
   833 
   832 
   834 .menu-item-handle:hover .item-type,
   833 .menu-item-handle:hover .item-type,
   835 .menu-item-handle:hover .item-edit,
   834 .menu-item-handle:hover .item-edit,
   836 #available-menu-items .menu-item-handle:hover .item-add {
   835 #available-menu-items .menu-item-handle:hover .item-add {
   837 	color: #0073aa;
   836 	color: #2271b1;
   838 }
   837 }
   839 
   838 
   840 .menu-item-edit-active .menu-item-handle {
   839 .menu-item-edit-active .menu-item-handle {
   841 	border-color: #999;
   840 	border-color: #8c8f94;
   842 	border-bottom: none;
   841 	border-bottom: none;
   843 }
   842 }
   844 
   843 
   845 .customize-control-nav_menu_item {
   844 .customize-control-nav_menu_item {
   846 	margin-bottom: 0;
   845 	margin-bottom: 0;
   865 .wp-customizer button:focus .toggle-indicator:before,
   864 .wp-customizer button:focus .toggle-indicator:before,
   866 .menu-delete:focus,
   865 .menu-delete:focus,
   867 .menu-item-bar .item-delete:focus:before,
   866 .menu-item-bar .item-delete:focus:before,
   868 #available-menu-items .item-add:focus:before {
   867 #available-menu-items .item-add:focus:before {
   869 	box-shadow:
   868 	box-shadow:
   870 		0 0 0 1px #5b9dd9,
   869 		0 0 0 1px #4f94d4,
   871 		0 0 2px 1px rgba(30, 140, 190, 0.8);
   870 		0 0 2px 1px rgba(79, 148, 212, 0.8);
   872 }
   871 }
   873 
   872 
   874 
   873 
   875 @media screen and (max-width: 782px) {
   874 @media screen and (max-width: 782px) {
   876 	#available-menu-items #available-menu-items-search .accordion-section-content {
   875 	#available-menu-items #available-menu-items-search .accordion-section-content {