X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/53f4633144ed68c8b8fb5861f992b5489894a940..784f914b1e4b1c62d6657e86397c2e83bcee4295:/wp-admin/css/customize-nav-menus.css diff --git a/wp-admin/css/customize-nav-menus.css b/wp-admin/css/customize-nav-menus.css index 7d25c7f5..cc6725e9 100644 --- a/wp-admin/css/customize-nav-menus.css +++ b/wp-admin/css/customize-nav-menus.css @@ -12,9 +12,7 @@ #customize-controls .theme-location-set, #customize-controls .control-section .accordion-section-title:focus .menu-in-location, -#customize-controls .control-section .accordion-section-title:hover .menu-in-location, -#customize-controls .control-section .accordion-section-title:focus .menu-in-locations, -#customize-controls .control-section .accordion-section-title:hover .menu-in-locations { +#customize-controls .control-section .accordion-section-title:hover .menu-in-location { color: #555; } @@ -78,29 +76,16 @@ } .wp-customizer .menu-item .submitbox .submitdelete { - display: block; float: left; margin: 6px 0 0; padding: 0; cursor: pointer; } -.wp-customizer .menu-item .submitbox .submitdelete:focus { - -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); -} -/* Menu-item reordering nav. */ -.customize-control-nav_menu .reordering .reorder, -.customize-control-nav_menu .reorder-done { - display: none; -} - -.customize-control-nav_menu .reorder, -.customize-control-nav_menu .reordering .reorder-done { - display: inline-block; - padding: 5px 8px; -} +/** + * Menu items reordering styles + */ .menu-item-reorder-nav { display: none; @@ -110,86 +95,12 @@ right: 0; } -.customize-control-nav_menu .reordering .add-new-menu-item { - opacity: 0.2; - pointer-events: none; - cursor: not-allowed; -} - -.menu-item-reorder-nav button { - position: relative; - overflow: hidden; - float: left; - display: block; - width: 30px; - height: 40px; - color: #82878c; - text-indent: -9999px; - cursor: pointer; - background: transparent; - border: none; - -webkit-box-shadow: none; - box-shadow: none; - outline: none; -} - -.menu-item-reorder-nav button:before { - display: inline-block; - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; - font: normal 20px/40px dashicons; - text-align: center; - text-indent: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.menu-item-reorder-nav button:hover, -.menu-item-reorder-nav button:focus { - color: #191e23; - background: #eee; -} - -.menus-move-down:before { - content: '\f347'; -} - -.menus-move-up:before { - content: '\f343'; -} - .menus-move-left:before { - content: '\f341'; + content: "\f341"; } .menus-move-right:before { - content: '\f345'; -} - -.move-up-disabled .menus-move-up, -.move-down-disabled .menus-move-down, -.move-right-disabled .menus-move-right, -.move-left-disabled .menus-move-left { - color: #d5d5d5 !important; - background-color: #fff !important; - cursor: default; - pointer-events: none; -} - -.menu-item-reorder-nav:before { - content: ""; - display: block; - position: absolute; - left: -10px; - width: 10px; - height: 40px; - background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 100%); - background: -webkit-gradient(linear, left top, right top, from(rgba(250,250,250,0)), to(rgba(250,250,250,1))); - background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%); - background: linear-gradient(to right, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 100%); + content: "\f345"; } .reordering .menu-item .item-controls, @@ -214,37 +125,15 @@ width: 30px; height: 38px; margin-right: 0 !important; + -webkit-box-shadow: none; + box-shadow: none; outline: none; overflow: hidden; cursor: pointer; } -.customize-control-nav_menu_item .item-edit:focus { - color: #0073aa; - -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); -} - -/* rework the arrow indicator implementation for NVDA bug same as #32715 */ -.wp-customizer .menu-item .item-edit .toggle-indicator { - display: inline-block; - font-size: 20px; - line-height: 1; -} - -.wp-customizer .menu-item .item-edit .toggle-indicator:after { - content: '\f140'; - font: normal 20px/1 dashicons; - color: #a0a5aa; - vertical-align: top; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; -} - .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after { - content: '\f142'; + content: "\f142"; } .wp-customizer .menu-item-settings p.description { @@ -327,7 +216,7 @@ border: none; content: "\f111"; display: block; - font: 18px/1 "dashicons"; + font: 18px/1 dashicons; padding: 5px; text-align: center; text-decoration: none !important; @@ -339,8 +228,6 @@ .customize-screen-options-toggle:focus:before, #customize-controls .customize-info .customize-help-toggle:focus:before { - -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); -webkit-border-radius: 100%; border-radius: 100%; } @@ -349,7 +236,7 @@ display: none; background: #fff; border-top: 1px solid #ddd; - padding: 4px 15px 0; + padding: 4px 15px 15px; } .wp-customizer .metabox-prefs label { @@ -358,8 +245,33 @@ line-height: 30px; } +/* rework the arrow indicator implementation for NVDA bug same as #32715 */ +.wp-customizer .toggle-indicator { + display: inline-block; + font-size: 20px; + line-height: 1; + text-indent: -1px; /* account for the dashicon alignment */ +} + +.rtl .wp-customizer .toggle-indicator { + text-indent: 1px; /* account for the dashicon alignment */ +} + +.wp-customizer .toggle-indicator:after { + content: "\f140"; + speak: none; + vertical-align: top; + -webkit-border-radius: 50%; + border-radius: 50%; + color: #72777c; + font: normal 20px/1 dashicons; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; +} + #accordion-panel-nav_menus .field-link-target, -#accordion-panel-nav_menus .field-attr-title, +#accordion-panel-nav_menus .field-title-attribute, #accordion-panel-nav_menus .field-css-classes, #accordion-panel-nav_menus .field-xfn, #accordion-panel-nav_menus .field-description { @@ -367,7 +279,7 @@ } #accordion-panel-nav_menus.field-link-target-active .field-link-target, -#accordion-panel-nav_menus.field-attr-title-active .field-attr-title, +#accordion-panel-nav_menus.field-title-attribute-active .field-title-attribute, #accordion-panel-nav_menus.field-css-classes-active .field-css-classes, #accordion-panel-nav_menus.field-xfn-active .field-xfn, #accordion-panel-nav_menus.field-description-active .field-description { @@ -469,13 +381,9 @@ margin-top: 0; } -/* - * Add-menu-items mode. +/** + * Add-menu-items mode */ -.wp-full-overlay-main { - right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */ - width: 100%; -} .adding-menu-items .control-section { opacity: .4; @@ -486,52 +394,6 @@ opacity: 1; } -/* Add-new button. */ -#customize-theme-controls .add-new-menu-item { - cursor: pointer; - float: right; - margin-left: 10px; - -webkit-transition: all 0.2s; - transition: all 0.2s; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - outline: none; -} - -.add-new-menu-item:before { - content: "\f132"; - display: inline-block; - position: relative; - left: -2px; - top: -1px; - font: normal 20px/1 'dashicons'; - vertical-align: middle; - -webkit-transition: all 0.2s; - transition: all 0.2s; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.adding-menu-items .add-new-menu-item, -.adding-menu-items .add-new-menu-item:hover, -.add-menu-toggle.open, -.add-menu-toggle.open:hover { - background: #eee; - border-color: #929793; - color: #32373c; - -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); - box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); -} - -.adding-menu-items .add-new-menu-item:before, -#accordion-section-add_menu .add-new-menu-item.open:before { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - .menu-item-bar .item-delete { color: #a00; position: absolute; @@ -545,12 +407,14 @@ .menu-item-bar .item-delete:before { content: "\f335"; - font: normal 20px/1 dashicons; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; position: absolute; top: 9px; left: 5px; + -webkit-border-radius: 50%; + border-radius: 50%; + font: normal 20px/1 dashicons; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .ie8 .menu-item-bar .item-delete:before { @@ -559,14 +423,12 @@ .menu-item-bar .item-delete:hover, .menu-item-bar .item-delete:focus { + -webkit-box-shadow: none; + box-shadow: none; + outline: none; color: #f00; } -.menu-item-bar .item-delete:focus { - -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); -} - .adding-menu-items .menu-item-bar .item-edit { display: none; } @@ -575,26 +437,9 @@ display: block; } -#available-menu-items .item { - position: static; -} - -#available-menu-items { - position: absolute; - top: 0; - bottom: 0; - left: -301px; - visibility: hidden; - overflow-x: hidden; - overflow-y: auto; - width: 300px; - margin: 0; - z-index: 4; - background: #eee; - -webkit-transition: left .18s; - transition: left .18s; - border-right: 1px solid #ddd; -} +/** + * Styles for menu-item addition panel + */ #available-menu-items.opening { overflow-y: hidden; /* avoid scrollbar jitter with animating heights */ @@ -609,6 +454,8 @@ border-left: none; border-right: none; background: #fff; + -webkit-transition: background-color 0.15s; + transition: background-color 0.15s; } #available-menu-items .open .accordion-section-title, @@ -621,29 +468,15 @@ content: none !important; } -#available-menu-items .accordion-section-title .toggle-indicator { - display: inline-block; - font-size: 20px; - line-height: 1; -} - -#available-menu-items .accordion-section-title .toggle-indicator:after { - content: '\f140'; - font: normal 20px/1 'dashicons'; - color: #a0a5aa; - vertical-align: top; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; -} - -#available-menu-items .accordion-section-title:hover .toggle-indicator:after { - color: #777; +#available-menu-items .accordion-section-title:hover .toggle-indicator:after, +#available-menu-items .button-link:hover .toggle-indicator:after, +#available-menu-items .button-link:focus .toggle-indicator:after { + color: #23282d; } #available-menu-items .open .accordion-section-title .toggle-indicator:after { - content: '\f142'; + content: "\f142"; + color: #23282d; } #available-menu-items .accordion-section-content { @@ -652,18 +485,6 @@ background: transparent; } -button.not-a-button { - background: transparent; - border: none; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-border-radius: 0; - border-radius: 0; - outline: 0; - padding: 0; - margin: 0; -} - #available-menu-items .accordion-section-title button { display: block; width: 28px; @@ -671,14 +492,12 @@ button.not-a-button { position: absolute; top: 5px; right: 5px; + -webkit-box-shadow: none; + box-shadow: none; + outline: none; cursor: pointer; } -#available-menu-items .accordion-section-title button:focus { - -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); -} - #available-menu-items .accordion-section-title .no-items, #available-menu-items .cannot-expand .accordion-section-title .spinner, #available-menu-items .cannot-expand .accordion-section-title > button { @@ -690,33 +509,18 @@ button.not-a-button { } #available-menu-items .cannot-expand .accordion-section-title .no-items { - display: block; - color: #777; - font-weight: normal; float: right; + color: #555d66; + font-weight: normal; margin-left: 5px; } #available-menu-items .accordion-section-content { padding: 1px 15px 15px 15px; margin: 0; - min-height: 120px; max-height: 290px; } -#available-menu-items #available-menu-items-search .accordion-section-content { - position: absolute; - left: 1px; - top: 60px; /* below title div / search input */ - bottom: 0px; /* 100% height that still triggers lazy load */ - max-height: none; - width: 100%; - padding: 1px 15px 15px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - #available-menu-items .menu-item-tpl { margin: 0; } @@ -728,19 +532,6 @@ button.not-a-button { border: 1px solid #f00; } -#available-menu-items .item-tpl { - position: relative; - padding: 20px 15px 20px 60px; - border-bottom: 1px solid #e4e4e4; - cursor: pointer; - display: none; -} - -#available-menu-items .item-tpl:hover, -#available-menu-items .item-tpl.selected { - background: #eee; -} - #available-menu-items .menu-item-handle .item-type { padding-right: 0; } @@ -753,14 +544,6 @@ button.not-a-button { cursor: pointer; } -#available-menu-items .item-top, -#available-menu-items .item-top:hover { - border: none; - background: transparent; - -webkit-box-shadow: none; - box-shadow: none; -} - #available-menu-items .menu-item-handle { -webkit-box-shadow: none; box-shadow: none; @@ -783,21 +566,26 @@ button.not-a-button { color: #82878c; width: 30px; height: 38px; + -webkit-box-shadow: none; + box-shadow: none; + outline: none; cursor: pointer; } #available-menu-items .menu-item-handle .item-add:focus { color: #23282d; - -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); } #available-menu-items .item-add:before { content: "\f543"; - font: normal 20px/1 dashicons; position: relative; left: 2px; top: 3px; + display: inline-block; + height: 20px; + -webkit-border-radius: 50%; + border-radius: 50%; + font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */ } #available-menu-items .menu-item-handle.item-added .item-type, @@ -849,11 +637,6 @@ button.not-a-button { color: #f00; } -#available-menu-items-search .clear-results:focus { - -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); -} - #available-menu-items-search .spinner { position: absolute; top: 20px; @@ -861,13 +644,15 @@ button.not-a-button { right: 20px; } -#available-menu-items-search input { - padding: 6px 10px; +/* search results list */ +#available-menu-items #available-menu-items-search .accordion-section-content { + position: absolute; + left: 1px; + top: 60px; /* below title div / search input */ + bottom: 0px; /* 100% height that still triggers lazy load */ + max-height: none; width: 100%; -} - -#available-menu-items-search .accordion-section-title { - padding: 12px 15px; + padding: 1px 15px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -973,18 +758,17 @@ body.adding-menu-items #customize-preview { } .menu-delete-item { - display: block; float: left; padding: 1em 0; width: 100%; } li.assigned-to-menu-location .menu-delete-item { - display: none; + display: none; } li.assigned-to-menu-location .add-new-menu-item { - margin-bottom: 1em; + margin-bottom: 1em; } .menu-delete { @@ -999,11 +783,6 @@ li.assigned-to-menu-location .add-new-menu-item { text-decoration: none; } -.menu-delete:focus { - -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); -} - .menu-item-handle { margin-top: -1px; } @@ -1036,10 +815,27 @@ li.assigned-to-menu-location .add-new-menu-item { margin-top: 12px; } -#available-menu-items .customize-section-title { - display: none; +/** + * box-shadows + */ + +.wp-customizer .menu-item .submitbox .submitdelete:focus, +.customize-screen-options-toggle:focus:before, +#customize-controls .customize-info .customize-help-toggle:focus:before, +.wp-customizer button:focus .toggle-indicator:after, +#available-menu-items-search .clear-results:focus, +.menu-delete:focus, +.menu-item-bar .item-delete:focus:before, +#available-menu-items .item-add:focus:before { + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); } + @media screen and ( max-width: 782px ) { #available-menu-items #available-menu-items-search .accordion-section-content { top: 63px; @@ -1047,45 +843,7 @@ li.assigned-to-menu-location .add-new-menu-item { } @media screen and ( max-width: 640px ) { - body.adding-menu-items div#available-menu-items { - top: 46px; - left: 0; - z-index: 10; - width: 100%; - } - #available-menu-items #available-menu-items-search .accordion-section-content { top: 133px; } - - #available-menu-items .customize-section-title { - display: block; - margin: 0; - } - - #available-menu-items .customize-section-back { - height: 69px; - } - - #available-menu-items .customize-section-title h3 { - font-size: 20px; - font-weight: 200; - padding: 9px 10px 12px 14px; - margin: 0; - line-height: 24px; - color: #555; - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - #available-menu-items .customize-section-title .customize-action { - font-size: 13px; - display: block; - font-weight: 400; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } }