opendev/gerrit
Code Issues Proposed changes

Add css vars for elevation

Browse Source 
Use the new css vars everywhere for box-shadow.

Apply elevation instead of border to commit message container.

Change-Id: I57e484c5340709cdd5a111e0fbf5d5d38de0aa14
This commit is contained in:
Ben Rohlfs
2020-01-09 09:27:51 +01:00
parent 59b5a1cbb3
commit 434b7a368f
14 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
View File

@@ -141,7 +141,7 @@ limitations under the License.
} }
.dropdown-content { .dropdown-content {
background-color: var(--view-background-color); background-color: var(--view-background-color);
box-shadow: 0 1px 5px rgba(0, 0, 0, .3); box-shadow: var(--elevation-level-2);
} }
/* /*
* We are not using :host to do this, because :host has a lowest css priority * We are not using :host to do this, because :host has a lowest css priority

2
polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
View File

@@ -73,7 +73,7 @@ limitations under the License.
text-align: center; text-align: center;
} }
.image-diff img { .image-diff img {
box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: var(--elevation-level-1);
max-width: 50em; max-width: 50em;
} }
.image-diff .right.lineNum { .image-diff .right.lineNum {

2
polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
View File

@@ -32,7 +32,7 @@ limitations under the License.
background-color: var(--tooltip-background-color); background-color: var(--tooltip-background-color);
bottom: 1.25rem; bottom: 1.25rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: var(--elevation-level-2);
color: var(--view-background-color); color: var(--view-background-color);
left: 1.25rem; left: 1.25rem;
position: fixed; position: fixed;

2
polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
View File

@@ -59,7 +59,7 @@ limitations under the License.
} }
.dropdown-content { .dropdown-content {
background: var(--dropdown-background-color); background: var(--dropdown-background-color);
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: var(--elevation-level-2);
border-radius: var(--border-radius); border-radius: var(--border-radius);
max-height: 50vh; max-height: 50vh;
overflow: auto; overflow: auto;

2
polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html
View File

@@ -47,7 +47,7 @@ limitations under the License.
display: block; display: block;
margin: 0 4px 4px 4px; margin: 0 4px 4px 4px;
white-space: normal; white-space: normal;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); box-shadow: var(--elevation-level-2);
border-radius: var(--border-radius); border-radius: var(--border-radius);
/** This is required for firefox to continue the inheritance */ /** This is required for firefox to continue the inheritance */
-webkit-user-select: inherit; -webkit-user-select: inherit;

2
polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
View File

@@ -44,7 +44,7 @@ limitations under the License.
} }
.dropdown-content { .dropdown-content {
background-color: var(--dropdown-background-color); background-color: var(--dropdown-background-color);
box-shadow: 0 1px 5px rgba(0, 0, 0, .3); box-shadow: var(--elevation-level-2);
max-height: 70vh; max-height: 70vh;
margin-top: var(--spacing-xxl); margin-top: var(--spacing-xxl);
min-width: 266px; min-width: 266px;

2
polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
View File

@@ -37,7 +37,7 @@ limitations under the License.
} }
.dropdown-content { .dropdown-content {
background-color: var(--dropdown-background-color); background-color: var(--dropdown-background-color);
box-shadow: 0 1px 5px rgba(0, 0, 0, .3); box-shadow: var(--elevation-level-2);
} }
gr-button { gr-button {
@apply --gr-button; @apply --gr-button;

3
polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
View File

@@ -33,8 +33,9 @@ limitations under the License.
} }
.viewer { .viewer {
background-color: var(--view-background-color); background-color: var(--view-background-color);
border: 1px solid var(--border-color); border: 1px solid var(--view-background-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--elevation-level-1);
padding: var(--spacing-m); padding: var(--spacing-m);
} }
.editor iron-autogrow-textarea { .editor iron-autogrow-textarea {

2
polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
View File

@@ -50,7 +50,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
} }
#dropdown { #dropdown {
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: var(--elevation-level-2);
} }
.inputContainer { .inputContainer {
background-color: var(--dialog-background-color); background-color: var(--dialog-background-color);

2
polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.html
View File

@@ -41,7 +41,7 @@ limitations under the License.
} }
.fixedAtTop { .fixedAtTop {
border-bottom: 1px solid #a4a4a4; border-bottom: 1px solid #a4a4a4;
box-shadow: 0 4px 4px rgba(0,0,0,0.1); box-shadow: var(--elevation-level-2);
} }
</style> </style>
<header id="header" class$="[[_computeHeaderClass(_headerFloating, _topLast)]]"> <header id="header" class$="[[_computeHeaderClass(_headerFloating, _topLast)]]">

2
polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard.html
View File

@@ -36,7 +36,7 @@ limitations under the License.
} }
#hovercard { #hovercard {
background: var(--dialog-background-color); background: var(--dialog-background-color);
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: var(--elevation-level-2);
padding: var(--spacing-l); padding: var(--spacing-l);
} }
</style> </style>

4
polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
View File

@@ -26,9 +26,7 @@ limitations under the License.
:host { :host {
background: var(--dialog-background-color); background: var(--dialog-background-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), box-shadow: var(--elevation-level-5);
0 24px 38px 3px rgba(0,0,0,.14),
0 9px 46px 8px rgba(0,0,0,.12);
} }
@media screen and (max-width: 50em) { @media screen and (max-width: 50em) {

2
polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
View File

@@ -26,7 +26,7 @@ limitations under the License.
--gr-tooltip-arrow-center-offset: 0; --gr-tooltip-arrow-center-offset: 0;
background-color: var(--tooltip-background-color); background-color: var(--tooltip-background-color);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: var(--elevation-level-2);
color: var(--tooltip-text-color); color: var(--tooltip-text-color);
font-size: var(--font-size-small); font-size: var(--font-size-small);
position: absolute; position: absolute;

7
polygerrit-ui/app/styles/themes/app-theme.html
View File

@@ -169,6 +169,13 @@ html {
--syntax-type-color: #2a66d9; --syntax-type-color: #2a66d9;
--syntax-variable-color: var(--primary-text-color); --syntax-variable-color: var(--primary-text-color);
/* elevation */
--elevation-level-1: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 1px 3px 1px rgba(60, 64, 67, .15);
--elevation-level-2: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
--elevation-level-3: 0px 1px 3px 0px rgba(60, 64, 67, .30), 0px 4px 8px 3px rgba(60, 64, 67, .15);
--elevation-level-4: 0px 2px 3px 0px rgba(60, 64, 67, .30), 0px 6px 10px 4px rgba(60, 64, 67, .15);
--elevation-level-5: 0px 4px 4px 0px rgba(60, 64, 67, .30), 0px 8px 12px 6px rgba(60, 64, 67, .15);
/* misc */ /* misc */
--border-radius: 4px; --border-radius: 4px;
--reply-overlay-z-index: 1000; --reply-overlay-z-index: 1000;