Replace css mixins in gr-editable-label by ::part()
Change-Id: Id48ead3d7f2cb47cf1eb5a6b58441f20ff859a97
diff --git a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view_html.ts b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view_html.ts
index 4761037..b577db3 100644
--- a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view_html.ts
+++ b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view_html.ts
@@ -40,14 +40,14 @@
font-size: var(--font-size-h3);
font-weight: var(--font-weight-h3);
line-height: var(--line-height-h3);
- --label-style: {
- text-overflow: initial;
- white-space: initial;
- word-break: break-all;
- }
- --input-style: {
- margin-top: var(--spacing-l);
- }
+ }
+ header gr-editable-label::part(label) {
+ text-overflow: initial;
+ white-space: initial;
+ word-break: break-all;
+ }
+ header gr-editable-label::part(input-container) {
+ margin-top: var(--spacing-l);
}
.textareaWrapper {
border: 1px solid var(--border-color);
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts
index a227482..c303bed 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts
@@ -35,7 +35,6 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- @apply --label-style;
}
label.editable {
color: var(--link-color);
@@ -47,7 +46,6 @@
.inputContainer {
background-color: var(--dialog-background-color);
padding: var(--spacing-m);
- @apply --input-style;
}
.buttons {
display: flex;
@@ -83,6 +81,7 @@
title$="[[_computeLabel(value, placeholder)]]"
aria-label$="[[_computeLabel(value, placeholder)]]"
on-click="_showDropdown"
+ part="label"
>[[_computeLabel(value, placeholder)]]</label
>
</template>
@@ -104,7 +103,7 @@
on-iron-overlay-canceled="_cancel"
>
<div class="dropdown-content" slot="dropdown-content">
- <div class="inputContainer">
+ <div class="inputContainer" part="input-container">
<template is="dom-if" if="[[!autocomplete]]">
<paper-input
id="input"
