From 8cd6ac7ce7ad28186b2449146df4ae4c3916dfe2 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Wed, 24 Apr 2019 12:13:19 -0700
Subject: [PATCH 1/2] report(redesign): adjust score scale to match new design

---
 lighthouse-core/report/html/report-styles.css | 10 ++++++----
 lighthouse-core/report/html/templates.html    |  6 +++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 9130bab3fc47..b7c9e297b046 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -853,6 +853,8 @@
 }
 
 .lh-scorescale-range {
+  display: flex;
+  align-items: center;
   margin: 0 12px;
   font-family: var(--monospace-font-family);
   white-space: nowrap;
@@ -860,11 +862,11 @@
 
 .lh-scorescale-range::before {
   content: '';
-  width: var(--body-font-size);
-  height: calc(var(--body-font-size) * .50);
+  width: 18px;
+  height: 6px;
   border-radius: 10px;
-  display: inline-block;
-  margin: 0 5px;
+  display: block;
+  margin-right: 10px;
 }
 
 .lh-scorescale-range--pass::before {
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 1b16ab052fe0..74ee019fd081 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -26,9 +26,9 @@
 <!-- Lighthouse score scale -->
 <template id="tmpl-lh-scorescale">
   <div class="lh-scorescale">
-      <span class="lh-scorescale-range lh-scorescale-range--fail">0-49</span>
-      <span class="lh-scorescale-range lh-scorescale-range--average">50-89</span>
-      <span class="lh-scorescale-range lh-scorescale-range--pass">90-100</span>
+      <span class="lh-scorescale-range lh-scorescale-range--fail">0&ndash;49</span>
+      <span class="lh-scorescale-range lh-scorescale-range--average">50&ndash;89</span>
+      <span class="lh-scorescale-range lh-scorescale-range--pass">90&ndash;100</span>
   </div>
 </template>
 

From e1a504f1fbfaf76090f0e0c02aca11189a534a46 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Wed, 24 Apr 2019 13:07:53 -0700
Subject: [PATCH 2/2] var

---
 lighthouse-core/report/html/report-styles.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index b7c9e297b046..d3f0d6077f1c 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -118,6 +118,8 @@
   --score-title-font-size: 20px;
   --score-title-line-height-big: 36px;
   --score-title-line-height: 26px;
+  --scorescale-height: 6px;
+  --scorescale-width: 18px;
   --section-padding: 40px;
   --topbar-bg: var(--color-black-100);
   --topbar-height: 36px;
@@ -862,8 +864,8 @@
 
 .lh-scorescale-range::before {
   content: '';
-  width: 18px;
-  height: 6px;
+  width: var(--scorescale-width);
+  height: var(--scorescale-height);
   border-radius: 10px;
   display: block;
   margin-right: 10px;