From 434b7a368fa5f3166104d76c9cfa460921c38781 Mon Sep 17 00:00:00 2001 From: Ben Rohlfs Date: Thu, 9 Jan 2020 09:27:51 +0100 Subject: [PATCH] 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 --- .../app/elements/core/gr-main-header/gr-main-header.html | 2 +- polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html | 2 +- polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html | 2 +- .../gr-autocomplete-dropdown/gr-autocomplete-dropdown.html | 2 +- .../shared/gr-comment-thread/gr-comment-thread.html | 2 +- .../elements/shared/gr-dropdown-list/gr-dropdown-list.html | 2 +- .../app/elements/shared/gr-dropdown/gr-dropdown.html | 2 +- .../shared/gr-editable-content/gr-editable-content.html | 3 ++- .../shared/gr-editable-label/gr-editable-label.html | 2 +- .../app/elements/shared/gr-fixed-panel/gr-fixed-panel.html | 2 +- .../app/elements/shared/gr-hovercard/gr-hovercard.html | 2 +- .../app/elements/shared/gr-overlay/gr-overlay.html | 4 +--- .../app/elements/shared/gr-tooltip/gr-tooltip.html | 2 +- polygerrit-ui/app/styles/themes/app-theme.html | 7 +++++++ 14 files changed, 21 insertions(+), 15 deletions(-) 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 d29858eedd..e208148335 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 @@ limitations under the License. } .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 92c2c377d4..fe64a1b6e9 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 @@ limitations under the License. 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 b0018df74b..0d441646d7 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 @@ limitations under the License. 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 cf32e28af8..c12aa72580 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 @@ limitations under the License. } .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 d0a07b6f8f..cce1d19342 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 @@ limitations under the License. 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 7fffcff490..ee9e7a0d7b 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 @@ limitations under the License. } .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 d76721fc0c..5d28390266 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 @@ limitations under the License. } .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 950be2a632..69c280b43e 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 @@ limitations under the License. } .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 78465e188d..917e4b6f06 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 @@ limitations under the License. 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 226092fca4..14285b4116 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 @@ limitations under the License. } .fixedAtTop { border-bottom: 1px solid #a4a4a4; - box-shadow: 0 4px 4px rgba(0,0,0,0.1); + box-shadow: var(--elevation-level-2); }