commit 3fc3a5c7c83a1f1b13ca3709118be836a2968282
author Kasper Nilsson <kaspern@google.com> Mon Feb 05 16:16:37 2018 -0800
committer Kasper Nilsson <kaspern@google.com> Tue Feb 06 18:00:59 2018 +0000
tree 1b81755e419d33c4ea94457e3221cd9ec401a335
parent de497fac85efe49bb602c0d46a8151f74d883275

Update selected change item styling

Also includes a minor cleanup of some styles as they appear on mobile.

Change-Id: Ifeac709eda7c87111fc6057a1d85aa5e71f90792

polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html

diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
index a067680..66a1d51 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
@@ -32,11 +32,15 @@
       :host {
         display: table-row;
       }
+      :host:focus {
+        outline: none;
+      }
       :host(:hover) {
         background-color: #f5fafd;
       }
       :host([selected]) {
-        background-color: #ebf5fb;
+        border: 1px solid #2a66d9;
+        border-left-width: .5rem;
       }
       :host([needs-review]) {
         font-family: var(--font-family-bold);
@@ -44,9 +48,6 @@
       :host([assigned]) {
         background-color: #fcfad6;
       }
-      :host([selected][assigned]) {
-        background-color: #fcfaa6;
-      }
       .container {
         position: relative;
       }
@@ -99,13 +100,15 @@
         :host {
           display: flex;
         }
+        :host([selected]) {
+          border: none;
+          border-top: 1px solid #ddd;
+        }
       }
     </style>
     <style include="gr-change-list-styles"></style>
-    <td class="keyboard">
-      <span class="positionIndicator">&#x25b6;</span>
-    </td>
-    <td class="star" hidden$="[[!showStar]]" hidden>
+    <td class="cell keyboard"></td>
+    <td class="cell star" hidden$="[[!showStar]]" hidden>
       <gr-change-star change="{{change}}"></gr-change-star>
     </td>
     <td class="cell number" hidden$="[[!showNumber]]" hidden>

polygerrit-ui/app/styles/gr-change-list-styles.html

diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html
index 7f150d5..566d098 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.html
@@ -19,7 +19,7 @@
       :host {
         font-size: var(--font-size-normal);
       }
-      gr-change-list-item,
+      gr-change-list-item:not([selected]),
       tr {
         border-top: 1px solid #ddd;
       }
@@ -106,8 +106,9 @@
           justify-content: space-between;
           padding: .25em .5em;
         }
-        gr-change-list-item[selected] {
-          background-color: transparent;
+        .cell {
+          align-items: center;
+          display: flex;
         }
         .topHeader,
         .keyboard,
@@ -121,10 +122,6 @@
         .noChanges .star {
           display: none;
         }
-        .star {
-          padding-left: .35em;
-          padding-top: .25em;
-        }
         .groupHeader .cell,
         .noChanges .cell {
           padding: 0 .5em;