diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index c4b32ac4b9e87..5afb5facff698 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -288,6 +288,19 @@ background-size: 20px auto; } +#adminmenu div.wp-menu-image.svg-icon { + display: flex; + align-items: center; + justify-content: center; +} + +#adminmenu div.wp-menu-image.svg-icon svg { + width: 22px; + height: 22px; + fill: currentColor; + transition: color .1s ease-in-out; +} + div.wp-menu-image:before { color: #a7aaad; color: rgba(240, 246, 252, 0.6); @@ -295,24 +308,35 @@ div.wp-menu-image:before { transition: all .1s ease-in-out; } -#adminmenu div.wp-menu-image:before { +#adminmenu div.wp-menu-image:before, +#adminmenu div.wp-menu-image.svg-icon svg { color: #a7aaad; color: rgba(240, 246, 252, 0.6); } #adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image.svg-icon svg, #adminmenu .wp-has-current-submenu div.wp-menu-image:before, +#adminmenu .wp-has-current-submenu div.wp-menu-image.svg-icon svg, #adminmenu .current div.wp-menu-image:before, +#adminmenu .current div.wp-menu-image.svg-icon svg, #adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before, +#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image.svg-icon svg, #adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image.svg-icon svg, #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, -#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before { +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image.svg-icon svg, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image.svg-icon svg { color: #fff; } #adminmenu li:hover div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image.svg-icon svg, #adminmenu li a:focus div.wp-menu-image:before, -#adminmenu li.opensub div.wp-menu-image:before { +#adminmenu li a:focus div.wp-menu-image.svg-icon svg, +#adminmenu li.opensub div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image.svg-icon svg { color: #72aee6; } @@ -323,6 +347,10 @@ div.wp-menu-image:before { z-index: 25; } +.folded #adminmenu div.wp-menu-image.svg-icon { + height: 34px; +} + .folded #adminmenu a.menu-top { height: 34px; } @@ -493,6 +521,9 @@ ul#adminmenu > li.current > a.current:after { #collapse-button .collapse-button-icon { width: 36px; height: 34px; + display: flex; + align-items: center; + justify-content: center; } #collapse-button .collapse-button-label { @@ -503,29 +534,25 @@ ul#adminmenu > li.current > a.current:after { display: none; } -#collapse-button .collapse-button-icon:after { - content: "\f148"; - content: "\f148" / ''; - display: block; +#collapse-button .collapse-button-icon svg { + width: 22px; + height: 22px; + fill: currentColor; position: relative; - top: 7px; - text-align: center; - font: normal 20px/1 dashicons !important; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + top: -1px; } /* rtl:ignore */ -.folded #collapse-button .collapse-button-icon:after, -.rtl #collapse-button .collapse-button-icon:after { +.folded #collapse-button .collapse-button-icon svg, +.rtl #collapse-button .collapse-button-icon svg { transform: rotate(180deg); } -.rtl.folded #collapse-button .collapse-button-icon:after { +.rtl.folded #collapse-button .collapse-button-icon svg { transform: none; } -#collapse-button .collapse-button-icon:after, +#collapse-button .collapse-button-icon svg, #collapse-button .collapse-button-label { transition: all .1s ease-in-out; } @@ -609,6 +636,10 @@ li#wp-admin-bar-menu-toggle { z-index: 25; } + .auto-fold #adminmenu div.wp-menu-image.svg-icon { + height: 34px; + } + .auto-fold #adminmenu a.menu-top { min-height: 34px; } @@ -650,11 +681,11 @@ li#wp-admin-bar-menu-toggle { } /* rtl:ignore */ - .auto-fold #collapse-button .collapse-button-icon:after { + .auto-fold #collapse-button .collapse-button-icon svg { transform: rotate(180deg); } - .rtl.auto-fold #collapse-button .collapse-button-icon:after { + .rtl.auto-fold #collapse-button .collapse-button-icon svg { transform: none; } @@ -814,26 +845,25 @@ li#wp-admin-bar-menu-toggle { border: 1px solid transparent; } - #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { - content: "\f228"; - display: inline-block; + #wpadminbar #wp-admin-bar-menu-toggle .ab-icon { + display: flex; + align-items: center; + justify-content: center; float: left; - font: normal 40px/45px dashicons; - vertical-align: middle; - outline: none; margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; height: 44px; width: 50px; padding: 0; border: none; - text-align: center; - text-decoration: none; box-sizing: border-box; } - .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + #wpadminbar #wp-admin-bar-menu-toggle .ab-icon svg { + width: 36px; + height: 36px; + } + + .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon { color: #72aee6; } } diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 313666e3ded73..1b5812bb21a9d 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -259,7 +259,8 @@ input[type="radio"]:focus { color: variables.$menu-text; } -#adminmenu div.wp-menu-image:before { +#adminmenu div.wp-menu-image:before, +#adminmenu div.wp-menu-image.svg-icon svg { color: variables.$menu-icon; } @@ -272,7 +273,9 @@ input[type="radio"]:focus { } #adminmenu li.menu-top:hover div.wp-menu-image:before, -#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { +#adminmenu li.menu-top:hover div.wp-menu-image.svg-icon svg, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image.svg-icon svg { color: variables.$menu-highlight-icon; } @@ -343,13 +346,21 @@ ul#adminmenu > li.current > a.current:after { } #adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu div.wp-menu-image.svg-icon svg, #adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image.svg-icon svg, #adminmenu li.current div.wp-menu-image:before, +#adminmenu li.current div.wp-menu-image.svg-icon svg, #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image.svg-icon svg, #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image.svg-icon svg, #adminmenu li:hover div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image.svg-icon svg, #adminmenu li a:focus div.wp-menu-image:before, -#adminmenu li.opensub div.wp-menu-image:before { +#adminmenu li a:focus div.wp-menu-image.svg-icon svg, +#adminmenu li.opensub div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image.svg-icon svg { color: variables.$menu-current-icon; } @@ -419,6 +430,7 @@ ul#adminmenu > li.current > a.current:after { color: variables.$menu-submenu-focus-text; } +#wpadminbar:not(.mobile) li:hover .ab-icon, #wpadminbar:not(.mobile) li:hover .ab-icon:before, #wpadminbar:not(.mobile) li:hover .ab-item:before, #wpadminbar:not(.mobile) li:hover .ab-item:after, @@ -459,11 +471,15 @@ ul#adminmenu > li.current > a.current:after { #wpadminbar .quicklinks .menupop.hover ul li a:focus, #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon, #wpadminbar li:hover .ab-icon:before, #wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon, #wpadminbar li a:focus .ab-icon:before, #wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon, #wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon, #wpadminbar li.hover .ab-icon:before, #wpadminbar li.hover .ab-item:before, #wpadminbar li:hover #adminbarsearch:before, @@ -475,11 +491,13 @@ ul#adminmenu > li.current > a.current:after { #wpadminbar .quicklinks li a:focus .blavatar, #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, #wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .hover .ab-icon, #wpadminbar.mobile .quicklinks .hover .ab-icon:before, #wpadminbar.mobile .quicklinks .hover .ab-item:before { color: variables.$menu-submenu-focus-text; } +#wpadminbar.mobile .quicklinks .ab-icon, #wpadminbar.mobile .quicklinks .ab-icon:before, #wpadminbar.mobile .quicklinks .ab-item:before { color: variables.$menu-icon; diff --git a/src/wp-admin/includes/options.php b/src/wp-admin/includes/options.php index 5742e3ccc1ccc..674237b3c9cee 100644 --- a/src/wp-admin/includes/options.php +++ b/src/wp-admin/includes/options.php @@ -36,6 +36,7 @@ function options_general_add_js() { ' ) ); + $this->assertStringNotContainsString( '