Restyle dashboard selection/hover states
Selected/focus state is now represented with a light blue background and
a blue outline, while hover is now changed to a slightly darker blue.
As a component of this change, some of the colors are replaced with
variables set in the app theme. These constants will be reused
throughout the app in descendant changes.
Bug: Issue 8362
Change-Id: I9498df814d1eab5ff4ec1ebb18de77366b8971c4
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 6005b92..9ec1f2d 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
@@ -36,16 +36,11 @@
:host {
display: table-row;
}
- :host:focus {
+ :host(:focus) {
outline: none;
}
:host(:hover) {
- background-color: #eeeeee;
- }
- :host([selected]) {
- /* Double the value used in the file list due to the parent table having
- `border-collapse: collapse;` */
- border-left: .7rem solid var(--color-link);
+ background-color: #e8effa;
}
:host([needs-review]) {
font-family: var(--font-family-bold);
@@ -99,12 +94,6 @@
a:hover {
text-decoration: underline;
}
- .positionIndicator {
- visibility: hidden;
- }
- :host([selected]) .positionIndicator {
- visibility: visible;
- }
.u-monospace {
font-family: var(--monospace-font-family);
}
@@ -129,13 +118,10 @@
:host {
display: flex;
}
- :host([selected]) {
- border-left: none;
- }
}
</style>
<style include="gr-change-list-styles"></style>
- <td class="cell keyboard"></td>
+ <td class="cell leftPadding"></td>
<td class="cell star" hidden$="[[!showStar]]" hidden>
<gr-change-star change="{{change}}"></gr-change-star>
</td>
