Refactor sass into lit-css: userlist, timeline, color-status. (#1033)

* Refactor sass into lit-css: userlist, timeline, color-status.

* Fixed CSS comment syntax

static/elements/chromedash-color-status.js

@@ -1,13 +1,11 @@
-import {LitElement, html} from 'lit-element';
+import {LitElement, css, html} from 'lit-element';
 
-import style from '../css/elements/chromedash-color-status.css';
+import SHARED_STYLES from '../css/shared.css';
 
 const CYAN = 120;
 const DEFAULT_MAX = 7;
 
 class ChromedashColorStatus extends LitElement {
-  static styles = style;
-
   static get properties() {
     return {
       max: {type: Number},
@@ -20,6 +18,42 @@ class ChromedashColorStatus extends LitElement {
     this.max = DEFAULT_MAX;
   }
 
+  static get styles() {
+    return [
+      SHARED_STYLES,
+      css`
+      span {
+        background-color: rgb(255,0,0);
+        border-radius: 50%;
+        display: inline-block;
+        height: 10px; /* Default. */
+        width: 10px; /* Default. */
+      }
+
+      :host(.corner) {
+        height: 100%;
+      }
+      :host(.corner) #status {
+        border-radius: 0;
+        height: 100%; /* Ensures we can color coverage when feature is scrolled.*/
+        width: 4px;
+      }
+
+      :host(.bottom) {
+        height: 8px;
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+      :host(.bottom) #status {
+        border-radius: 0;
+        height: 100%;
+        width: 100%;
+      }
+    `];
+  }
+
   render() {
     const color = `hsl(${Math.round(CYAN - this.value * CYAN / this.max)}, 100%, 50%)`;
     return html`

static/elements/chromedash-timeline.js

@@ -1,10 +1,8 @@
 // TODO(yangguang): This component is not tested. Data is not available in devserver, so cannot be tested locally.
-import {LitElement, html} from 'lit-element';
-import style from '../css/elements/chromedash-timeline.css';
+import {LitElement, css, html} from 'lit-element';
+import SHARED_STYLES from '../css/shared.css';
 
 class ChromedashTimeline extends LitElement {
-  static styles = style;
-
   static get properties() {
     return {
       type: {type: String},
@@ -32,6 +30,66 @@ class ChromedashTimeline extends LitElement {
     this.useRemoteData = false;
   }
 
+  static get styles() {
+    return [
+      SHARED_STYLES,
+      css`
+      :host {
+        display: block;
+        flex: 1;
+        width: var(--max-content-width);
+      }
+
+      :host label {
+        margin-left: 8px;
+        cursor: pointer;
+      }
+
+      #chart {
+        margin-top: 15px;
+        width: 100%;
+        height: 400px;
+        background: var(--table-alternate-background);
+        border-radius: var(--border-radius);
+      }
+
+      #httparchivedata {
+        border: 0;
+        width: 100%;
+        height: 775px;
+      }
+
+      .header_title {
+        margin: 32px 0 15px 0;
+      }
+
+      .description {
+        margin: 15px 0;
+      }
+
+      .callout {
+        padding: var(--content-padding);
+        margin-top: var(--content-padding);
+        background-color: var(--md-yellow-100);
+        border-color: rgba(27,31,35,0.15);
+        line-height: 1.4;
+      }
+
+      #bigquery:empty {
+        display: none;
+      }
+
+      #bigquery {
+        font-family: 'Courier New', Courier, monospace;
+        font-weight: 600;
+        padding: 15px;
+        margin-bottom: 100px;
+        background: var(--table-alternate-background);
+        display: inline-block;
+      }
+    `];
+  }
+
   updated(changedProperties) {
     const TRACKING_PROPERTIES = [
       'selectedBucketId',

static/elements/chromedash-userlist.js

@@ -1,9 +1,8 @@
-import {LitElement, html} from 'lit-element';
-import style from '../css/elements/chromedash-userlist.css';
+import {LitElement, css, html} from 'lit-element';
+import SHARED_STYLES from '../css/shared.css';
+
 
 class ChromedashUserlist extends LitElement {
-  static styles = style;
-
   static get properties() {
     return {
       actionPath: {type: String},
@@ -16,6 +15,26 @@ class ChromedashUserlist extends LitElement {
     this.users = [];
   }
 
+  static get styles() {
+    return [
+      SHARED_STYLES,
+      css`
+      ul {
+        margin-top: 10px;
+      }
+      ul li {
+        transition: opacity 600ms ease-in-out;
+        margin-bottom: 5px;
+      }
+      ul li.faded {
+         opacity: 0;
+      }
+      ul li a {
+        margin-right: 10px;
+      }
+    `];
+  }
+
   addUser(user) {
     this.users.splice(0, 0, user);
     this.users = this.users.slice(0); // Refresh the list

static/sass/elements/chromedash-color-status.scss

@@ -1,32 +0,0 @@
-@import "element";
-
-span {
-  background-color: rgb(255,0,0);
-  border-radius: 50%;
-  display: inline-block;
-  height: 10px; // Default.
-  width: 10px; // Default.
-}
-
-:host(.corner) {
-  height: 100%;
-  #status {
-    border-radius: 0;
-    height: 100%; // Ensures we can color coverage when feature is scrolled.
-    width: 4px;
-  }
-}
-
-:host(.bottom) {
-  height: 8px;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-
-  #status {
-    border-radius: 0;
-    height: 100%;
-    width: 100%;
-  }
-}

static/sass/elements/chromedash-timeline.scss

@@ -1,56 +0,0 @@
-@import "element";
-
-:host {
-  display: block;
-  flex: 1;
-  width: $max-content-width;
-}
-
-:host label {
-  margin-left: 8px;
-  cursor: pointer;
-}
-
-#chart {
-  margin-top: 15px;
-  width: 100%;
-  height: 400px;
-  background: $gray-1;
-  border-radius: $default-border-radius;
-}
-
-#httparchivedata {
-  border: 0;
-  width: 100%;
-  height: 775px;
-}
-
-.header_title {
-  margin: 32px 0 15px 0;
-}
-
-.description {
-  margin: 15px 0;
-}
-
-.callout {
-  padding: $content-padding;
-  margin-top: $content-padding;
-  background-color: $md-yellow-100;
-  border-color: rgba(27,31,35,0.15);
-  line-height: 1.4;
-}
-
-#bigquery:empty {
-  display: none;
-}
-
-#bigquery {
-  font-family: 'Courier New', Courier, monospace;
-  font-weight: 600;
-  padding: 15px;
-  margin-bottom: 100px;
-  background: $gray-4;
-  color: #fff;
-  display: inline-block;
-}

static/sass/elements/chromedash-userlist.scss

@@ -1,18 +0,0 @@
-@import "element";
-
-ul {
-  margin-top: 10px;
-
-  li {
-    transition: opacity 600ms ease-in-out;
-    margin-bottom: 5px;
-
-    &.faded {
-      opacity: 0;
-    }
-
-    a {
-      margin-right: 10px;
-    }
-  }
-}

static/sass/theme.scss

@@ -14,6 +14,8 @@
   --md-blue-900: #01579b;
   --md-orange-50: #fff3e0;
   --md-orange-200: #ffcc80;
+  --md-yellow-100: #FFF9C4;
+  --md-yellow-200: #FFF59D;
   // TODO(jrobbins): Add all colors from pallet selected in Figma mocks.
   --md-gray-50: #fafafa;
   --md-gray-300: #e0e0e0;