diff options
Diffstat (limited to 'polygerrit-ui/app/styles/gr-change-list-styles.html')
| -rw-r--r-- | polygerrit-ui/app/styles/gr-change-list-styles.html | 165 |
1 files changed, 131 insertions, 34 deletions
diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html index a0bba9044d..aeca48a15c 100644 --- a/polygerrit-ui/app/styles/gr-change-list-styles.html +++ b/polygerrit-ui/app/styles/gr-change-list-styles.html @@ -1,4 +1,5 @@ <!-- +@license Copyright (C) 2015 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); @@ -17,29 +18,95 @@ limitations under the License. <template> <style> :host { - font-size: 13px; + font-size: var(--font-size-normal); + } + gr-change-list-item, + tr { + border-top: 1px solid var(--border-color); + } + gr-change-list-item[selected], + gr-change-list-item:focus { + background-color: var(--selection-background-color); + } + /* The border-collapse attribute only works on sibling elements, not + cousin elements. So, if we want the table to have a sticky header and + have borders between each row, we must disable the border-top on the + elements directly below a .topHeader. */ + .topHeader ~ gr-change-list-item:first-of-type, + .topHeader + .groupHeader { + border-top: none; + } + /* Needed to show a border on top of the first gr-change-list-item when a + groupHeader exists. Cannot use + selector because of dom-repeats + existing in the DOM tree. */ + .topHeader ~ .groupHeader ~ gr-change-list-item { + border-top: 1px solid var(--border-color); + } + tbody { + border-bottom: 1px solid var(--border-color); + } + tr.topHeader { + border: none; + } + th { + text-align: left; + } + th, + .cell { + vertical-align: middle; + } + th:not(.label), + .cell:not(.label) { + padding-right: 8px; + } + th.label { + border-left: none; } .topHeader, .groupHeader { - border-bottom: 1px solid #eee; - font-family: var(--font-family-bold); - padding: .3em .5em; + font-weight: var(--font-weight-bold); + } + .topHeader th { + background-color: var(--table-header-background-color); + height: 3rem; + position: -webkit-sticky; + position: sticky; + top: -1px; /* Offset for top borders */ + z-index: 1; + } + /* :after pseudoelements are used here because borders on sticky table + headers with a background color are broken. */ + th:after { + border-bottom: 1px solid var(--border-color); + bottom: 0; + content: ''; + left: 0; + position: absolute; + width: 100%; } - .topHeader { - background-color: #ddd; + th.label:after { + border-left: 1px solid var(--border-color); + top: 0; + } + .groupHeader { + background-color: var(--table-subheader-background-color); } - .noChanges { - border-bottom: 1px solid #eee; - padding: .3em .5em; + .groupHeader a { + color: var(--primary-text-color); + text-decoration: none; + } + .groupHeader a:hover { + text-decoration: underline; + } + .cell { + height: 2.25rem; } - .keyboard, .star { padding: 0; } gr-change-star { vertical-align: middle; } - .keyboard, .branch, .star, .label, @@ -49,62 +116,88 @@ limitations under the License. .updated, .size, .status, - .project { + .repo { white-space: nowrap; } - .updated { - text-align: right; + .star { + vertical-align: middle; } - .size, - .updated { - text-align: right; + .leftPadding { + width: var(--default-horizontal-margin); + } + .star { + width: 30px; } .label { + border-left: 1px solid var(--border-color); text-align: center; + width: 3rem; } - .truncatedProject { + .topHeader .label { + border: none; + } + .truncatedRepo { display: none; } - @media only screen and (max-width: 90em) { + @media only screen and (max-width: 150em) { .assignee, .branch, .owner { overflow: hidden; - max-width: 10rem; + max-width: 18rem; text-overflow: ellipsis; } - .truncatedProject { + .truncatedRepo { display: inline-block; } - .fullProject { + .fullRepo { display: none; } } + @media only screen and (max-width: 100em) { + .assignee, + .branch, + .owner { + max-width: 10rem; + } + } @media only screen and (max-width: 50em) { :host { - font-size: 14px; + font-size: var(--font-size-large); } gr-change-list-item { flex-wrap: wrap; justify-content: space-between; padding: .25em .5em; } - gr-change-list-item[selected] { - background-color: transparent; + gr-change-list-item[selected], + gr-change-list-item:focus { + background-color: var(--view-background-color); + border: none; + border-top: 1px solid var(--border-color); + } + gr-change-list-item:hover { + background-color: var(--view-background-color); + } + .cell { + align-items: center; + display: flex; } .topHeader, - .keyboard, + .leftPadding, .status, - .project, + .repo, .branch, .updated, .label, - .assignee { + .assignee, + .groupHeader .star, + .noChanges .star { display: none; } - .star { - padding-left: .35em; - padding-top: .25em; + .groupHeader .cell, + .noChanges .cell { + padding: 0 .5em; } .subject { margin-bottom: .25em; @@ -112,12 +205,16 @@ limitations under the License. } .owner, .size { - width: auto; + max-width: none; + } + .noChanges .cell { + display: block; + height: auto; } } @media only screen and (min-width: 1450px) { - .project { - width: 20em; + :host { + font-size: 14px; } } </style> |