Introduce a border-radius css var and use it everywhere
Sets border-radius to 4px as the app-theme default. The only
border-radii that stay different from 4px are the circle shapes for
account and voting chips.
Change-Id: I3417b141aaa19440300f0628eca1a9229eb6c131
diff --git a/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html b/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
index 6b701ca..d1a2471 100644
--- a/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
+++ b/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
@@ -41,7 +41,7 @@
border: none;
--gr-autocomplete: {
border: 1px solid var(--border-color);
- border-radius: 2px;
+ border-radius: var(--border-radius);
height: 2em;
padding: 0 var(--spacing-xs);
width: 20em;
diff --git a/polygerrit-ui/app/elements/admin/gr-plugin-config-array-editor/gr-plugin-config-array-editor.html b/polygerrit-ui/app/elements/admin/gr-plugin-config-array-editor/gr-plugin-config-array-editor.html
index 30ea8a1..5afd5b6 100644
--- a/polygerrit-ui/app/elements/admin/gr-plugin-config-array-editor/gr-plugin-config-array-editor.html
+++ b/polygerrit-ui/app/elements/admin/gr-plugin-config-array-editor/gr-plugin-config-array-editor.html
@@ -33,7 +33,7 @@
.existingItems {
background: var(--table-header-background-color);
border: 1px solid var(--border-color);
- border-radius: 2px;
+ border-radius: var(--border-radius);
}
gr-button {
float: right;
diff --git a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
index a1cf752..5998264 100644
--- a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
@@ -59,7 +59,7 @@
}
ul li {
border: 1px solid var(--border-color);
- border-radius: .2em;
+ border-radius: var(--border-radius);
background: var(--chip-background-color);
display: inline-block;
margin: 0 var(--spacing-xs) var(--spacing-s) var(--spacing-xs);
diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message.html b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
index 9457ed0..acbee7f 100644
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.html
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
@@ -150,7 +150,7 @@
}
.score {
border: 1px solid rgba(0,0,0,.12);
- border-radius: 3px;
+ border-radius: var(--border-radius);
color: var(--primary-text-color);
display: inline-block;
margin: -1px 0;
diff --git a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.html b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.html
index 08835fe..a863276 100644
--- a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.html
+++ b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.html
@@ -24,7 +24,7 @@
.key {
background-color: var(--chip-background-color);
border: 1px solid var(--border-color);
- border-radius: 3px;
+ border-radius: var(--border-radius);
display: inline-block;
font-weight: var(--font-weight-bold);
padding: var(--spacing-xxs) var(--spacing-m);
diff --git a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
index 563d7b7..0cdef8c 100644
--- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
+++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
@@ -30,7 +30,7 @@
gr-autocomplete {
background-color: var(--view-background-color);
border: 1px solid var(--border-color);
- border-radius: 2px;
+ border-radius: var(--border-radius);
flex: 1;
outline: none;
padding: var(--spacing-xs);
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 f63a679..7aac01c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -222,7 +222,7 @@
.content .trailing-whitespace,
.trailing-whitespace .intraline,
.content .trailing-whitespace .intraline {
- border-radius: .4em;
+ border-radius: var(--border-radius, 4px);
background-color: var(--diff-trailing-whitespace-indicator);
}
#diffHeader {
diff --git a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
index 0b977bc..52692a7 100644
--- a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
+++ b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
@@ -58,14 +58,14 @@
gr-autocomplete {
--gr-autocomplete: {
border: 1px solid var(--border-color);
- border-radius: 2px;
+ border-radius: var(--border-radius);
height: 2em;
padding: 0 var(--spacing-xs);
}
}
input {
border: 1px solid var(--border-color);
- border-radius: 2px;
+ border-radius: var(--border-radius);
height: 2em;
margin: var(--spacing-m) 0;
padding: 0 var(--spacing-xs);
diff --git a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
index 2237315..6598772 100644
--- a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
+++ b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
@@ -63,7 +63,7 @@
}
.textareaWrapper {
border: 1px solid var(--border-color);
- border-radius: 3px;
+ border-radius: var(--border-radius);
margin: var(--spacing-l);
}
.textareaWrapper .editButtons {
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 08c91657..b0018df 100644
--- a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
+++ b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
@@ -31,7 +31,7 @@
:host([toast]) {
background-color: var(--tooltip-background-color);
bottom: 1.25rem;
- border-radius: 3px;
+ border-radius: var(--border-radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
color: var(--view-background-color);
left: 1.25rem;
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
index 441c4aa..87caf64 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@@ -57,7 +57,7 @@
font: inherit;
text-transform: uppercase;
outline-width: 0;
- border-radius: 3px;
+ border-radius: var(--border-radius);
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
diff --git a/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html b/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html
index 05cbaa1..55623b3 100644
--- a/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html
+++ b/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html
@@ -25,7 +25,7 @@
<template>
<style include="shared-styles">
.chip {
- border-radius: 4px;
+ border-radius: var(--border-radius);
background-color: var(--chip-background-color);
padding: var(--spacing-xxs) var(--spacing-m);
white-space: nowrap;
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 559603d..bbd7ddf 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
@@ -48,7 +48,7 @@
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);
- border-radius: 4px;
+ border-radius: var(--border-radius);
/** This is required for firefox to continue the inheritance */
-webkit-user-select: inherit;
-moz-user-select: inherit;
diff --git a/polygerrit-ui/app/styles/gr-form-styles.html b/polygerrit-ui/app/styles/gr-form-styles.html
index d80dfa8..3fe0a72 100644
--- a/polygerrit-ui/app/styles/gr-form-styles.html
+++ b/polygerrit-ui/app/styles/gr-form-styles.html
@@ -83,7 +83,7 @@
.gr-form-styles select,
.gr-form-styles textarea {
border: 1px solid var(--border-color);
- border-radius: 2px;
+ border-radius: var(--border-radius);
height: 2em;
padding: 0 var(--spacing-xs);
}
@@ -100,7 +100,7 @@
min-height: 2em;
--iron-autogrow-textarea: {
border: 1px solid var(--border-color);
- border-radius: 2px;
+ border-radius: var(--border-radius);
box-sizing: border-box;
padding: var(--spacing-s) var(--spacing-xs) 0 var(--spacing-xs);
}
@@ -109,7 +109,7 @@
border: none;
--gr-autocomplete: {
border: 1px solid var(--border-color);
- border-radius: 2px;
+ border-radius: var(--border-radius);
height: 2em;
padding: 0 var(--spacing-xs);
width: 14em;
diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html
index 7ae639a..99cbb79 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -158,6 +158,7 @@
--syntax-variable-color: var(--primary-text-color);
/* misc */
+ --border-radius: 4px;
--reply-overlay-z-index: 1000;
--iron-overlay-backdrop: {
transition: none;
