Add css vars for elevation
Use the new css vars everywhere for box-shadow.
Apply elevation instead of border to commit message container.
Change-Id: I57e484c5340709cdd5a111e0fbf5d5d38de0aa14
diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
index d29858e..e208148 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
@@ -141,7 +141,7 @@
}
.dropdown-content {
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
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 92c2c37..fe64a1b 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -73,7 +73,7 @@
text-align: center;
}
.image-diff img {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+ box-shadow: var(--elevation-level-1);
max-width: 50em;
}
.image-diff .right.lineNum {
diff --git a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
index b0018df..0d44164 100644
--- a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
+++ b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
@@ -32,7 +32,7 @@
background-color: var(--tooltip-background-color);
bottom: 1.25rem;
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);
left: 1.25rem;
position: fixed;
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
index cf32e28..c12aa72 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
@@ -59,7 +59,7 @@
}
.dropdown-content {
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);
max-height: 50vh;
overflow: auto;
diff --git a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html
index d0a07b6..cce1d19 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html
+++ b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html
@@ -47,7 +47,7 @@
display: block;
margin: 0 4px 4px 4px;
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);
/** This is required for firefox to continue the inheritance */
-webkit-user-select: inherit;
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
index 7fffcff..ee9e7a0 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
@@ -44,7 +44,7 @@
}
.dropdown-content {
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;
margin-top: var(--spacing-xxl);
min-width: 266px;
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
index d76721f..5d28390 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
@@ -37,7 +37,7 @@
}
.dropdown-content {
background-color: var(--dropdown-background-color);
- box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
+ box-shadow: var(--elevation-level-2);
}
gr-button {
@apply --gr-button;
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
index 950be2a..69c280b 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
@@ -33,8 +33,9 @@
}
.viewer {
background-color: var(--view-background-color);
- border: 1px solid var(--border-color);
+ border: 1px solid var(--view-background-color);
border-radius: var(--border-radius);
+ box-shadow: var(--elevation-level-1);
padding: var(--spacing-m);
}
.editor iron-autogrow-textarea {
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
index 78465e1..917e4b6 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
@@ -50,7 +50,7 @@
cursor: pointer;
}
#dropdown {
- box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+ box-shadow: var(--elevation-level-2);
}
.inputContainer {
background-color: var(--dialog-background-color);
diff --git a/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.html b/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.html
index 226092f..14285b4 100644
--- a/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.html
+++ b/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.html
@@ -41,7 +41,7 @@
}
.fixedAtTop {
border-bottom: 1px solid #a4a4a4;
- box-shadow: 0 4px 4px rgba(0,0,0,0.1);
+ box-shadow: var(--elevation-level-2);
}
</style>
<header id="header" class$="[[_computeHeaderClass(_headerFloating, _topLast)]]">
diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard.html b/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard.html
index c77ea81..fcc04ba 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard.html
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard.html
@@ -36,7 +36,7 @@
}
#hovercard {
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);
}
</style>
diff --git a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
index 46b8fb6..1afd1c9 100644
--- a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
+++ b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
@@ -26,9 +26,7 @@
:host {
background: var(--dialog-background-color);
border-radius: var(--border-radius);
- box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),
- 0 24px 38px 3px rgba(0,0,0,.14),
- 0 9px 46px 8px rgba(0,0,0,.12);
+ box-shadow: var(--elevation-level-5);
}
@media screen and (max-width: 50em) {
diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
index 75d9c4b..d78d554 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
@@ -26,7 +26,7 @@
--gr-tooltip-arrow-center-offset: 0;
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);
font-size: var(--font-size-small);
position: absolute;
diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html
index 53827b5..369af2b 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -169,6 +169,13 @@
--syntax-type-color: #2a66d9;
--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 */
--border-radius: 4px;
--reply-overlay-z-index: 1000;
