From e1022a6184be2f6320a7892f4c046e24248ce203 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Wed, 17 Apr 2019 10:59:12 +0000
Subject: [PATCH] Site Health: Improve the accordions styles for small screens.

Also, changes the hex color values to lowercase.

Props subrataemfluence, man4toman, garrett-eclipse, chetan200891, mukesh27, melchoyce, karmatosed, Clorith.
Fixes #46949.


git-svn-id: https://develop.svn.wordpress.org/trunk@45229 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/site-health.css | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css
index a8505c644c..93e90a6cfd 100644
--- a/src/wp-admin/css/site-health.css
+++ b/src/wp-admin/css/site-health.css
@@ -275,12 +275,12 @@
 .health-check-accordion-trigger {
 	background: #fff;
 	border: 0;
-	color: #32373C;
+	color: #32373c;
 	cursor: pointer;
 	display: block;
 	font-weight: 400;
 	margin: 0;
-	padding: 1em 1.5em;
+	padding: 1em 3.5em 1em 1.5em;
 	position: relative;
 	text-align: left;
 	width: 100%;
@@ -313,7 +313,7 @@
 
 .health-check-accordion-trigger .icon,
 .site-health-view-passed .icon {
-	border: solid #555D66;
+	border: solid #555d66;
 	border-width: 0 2px 2px 0;
 	height: 0.5rem;
 	pointer-events: none;
@@ -327,13 +327,13 @@
 .health-check-accordion-trigger .badge {
 	float: right;
 	padding: 0.1rem 0.5rem 0.15rem;
-	color: #32373C;
+	color: #32373c;
 	font-weight: 600;
-	margin: 0 2rem 0 0.5rem;
+	margin-left: 0.5rem;
 }
 
 .health-check-accordion-trigger .badge.blue {
-	border: 1px solid #BFE7F3;
+	border: 1px solid #bfe7f3;
 }
 
 .health-check-accordion-trigger .badge.orange {
@@ -345,11 +345,11 @@
 }
 
 .health-check-accordion-trigger .badge.green {
-	border: 1px solid #46B450;
+	border: 1px solid #46b450;
 }
 
 .health-check-accordion-trigger .badge.purple {
-	border: 1px solid #826EB4;
+	border: 1px solid #826eb4;
 }
 
 .health-check-accordion-trigger .badge.gray {
@@ -406,6 +406,16 @@
 		margin-right: 10px;
 		margin-left: 10px;
 	}
+
+	.health-check-accordion-trigger .title {
+		display: block;
+		margin-bottom: 1em;
+	}
+
+	.health-check-accordion-trigger .badge {
+		float: left;
+		margin: 0;
+	}
 }
 
 /* The breakpoint is usually at 960px, the additional space is to allow for the margin. */