gr-button.remove use ::part() instead of @apply
Since @apply was never approved and it is broken in lit2
Change-Id: I51850b0baad1400bc540dd6462d81f035ab4aa2d
diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts
index 65de971..a3650b1 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts
+++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts
@@ -133,23 +133,21 @@
.container {
--account-label-padding-horizontal: 6px;
}
- gr-button.remove,
- gr-button.remove:hover,
- gr-button.remove:focus {
- --gr-button: {
- border-top-width: 0;
- border-right-width: 0;
- border-bottom-width: 0;
- border-left-width: 0;
- color: var(--deemphasized-text-color);
- font-weight: var(--font-weight-normal);
- height: 0.6em;
- line-height: 10px;
- /* This cancels most of the --account-label-padding-horizontal. */
- margin-left: -4px;
- padding: 0 2px 0 0;
- text-decoration: none;
- }
+ gr-button.remove::part(paper-button),
+ gr-button.remove:hover::part(paper-button),
+ gr-button.remove:focus::part(paper-button) {
+ border-top-width: 0;
+ border-right-width: 0;
+ border-bottom-width: 0;
+ border-left-width: 0;
+ color: var(--deemphasized-text-color);
+ font-weight: var(--font-weight-normal);
+ height: 0.6em;
+ line-height: 10px;
+ /* This cancels most of the --account-label-padding-horizontal. */
+ margin-left: -4px;
+ padding: 0 2px 0 0;
+ text-decoration: none;
}
</style>
`;
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button_html.ts b/polygerrit-ui/app/elements/shared/gr-button/gr-button_html.ts
index a174627..a15b560 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button_html.ts
@@ -169,7 +169,12 @@
border-top-color: var(--deemphasized-text-color);
}
</style>
- <paper-button raised="[[!link]]" disabled="[[_disabled]]" tabindex="-1">
+ <paper-button
+ raised="[[!link]]"
+ disabled="[[_disabled]]"
+ tabindex="-1"
+ part="paper-button"
+ >
<template is="dom-if" if="[[loading]]">
<span class="loadingSpin"></span>
</template>
diff --git a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.ts b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.ts
index 3fdf4eb..b74d643 100644
--- a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.ts
+++ b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.ts
@@ -89,22 +89,20 @@
// in <style> inside the template.
const customStyle = html`
<style>
- gr-button.remove,
- gr-button.remove:hover,
- gr-button.remove:focus {
- --gr-button: {
- border-top-width: 0;
- border-right-width: 0;
- border-bottom-width: 0;
- border-left-width: 0;
- color: var(--deemphasized-text-color);
- font-weight: var(--font-weight-normal);
- height: 0.6em;
- line-height: 10px;
- margin-left: var(--spacing-xs);
- padding: 0;
- text-decoration: none;
- }
+ gr-button::part(paper-button),
+ gr-button.remove:hover::part(paper-button),
+ gr-button.remove:focus::part(paper-button) {
+ border-top-width: 0;
+ border-right-width: 0;
+ border-bottom-width: 0;
+ border-left-width: 0;
+ color: var(--deemphasized-text-color);
+ font-weight: var(--font-weight-normal);
+ height: 0.6em;
+ line-height: 10px;
+ margin-left: var(--spacing-xs);
+ padding: 0;
+ text-decoration: none;
}
</style>
`;
