Administration: Add a chevron icon to the Site Health "Passed tests" button.

The chevron icon helps clarify what the button does.

Props garrett-eclipse, Clorith, xkon, melchoyce.
Fixes #46730.


git-svn-id: https://develop.svn.wordpress.org/trunk@45201 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2019-04-15 18:00:57 +00:00
parent 3eb83ade1e
commit 94af7683fe
2 changed files with 10 additions and 2 deletions

View File

@ -286,6 +286,11 @@
width: 100%;
}
.wp-core-ui .button.site-health-view-passed {
position: relative;
padding: 0 40px 0 20px;
}
.health-check-accordion-trigger:hover,
.health-check-accordion-trigger:active {
background: #f8f9f9;
@ -305,7 +310,8 @@
font-weight: 600;
}
.health-check-accordion-trigger .icon {
.health-check-accordion-trigger .icon,
.site-health-view-passed .icon {
border: solid #191e23;
border-width: 0 2px 2px 0;
height: 0.5rem;
@ -349,7 +355,8 @@
border: 1px solid #ccd0d4;
}
.health-check-accordion-trigger[aria-expanded="true"] .icon {
.health-check-accordion-trigger[aria-expanded="true"] .icon,
.site-health-view-passed[aria-expanded="true"] .icon {
transform: translateY(-30%) rotate(-135deg)
}

View File

@ -115,6 +115,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
<div class="site-health-view-more">
<button type="button" class="button site-health-view-passed" aria-expanded="false" aria-controls="health-check-issues-good">
<?php _e( 'Passed tests' ); ?>
<span class="icon"></span>
</button>
</div>