Revert "Fix problems with applying css-styles to elements"
This reverts commit c41759f2465c4da548e65043e9488e6c89fdf02a.
Reason for revert: this breaks the chips style in polymer 1
Change-Id: I6a5d2fc0e888cde99d3c99d2e5c50f34485464a3
diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
index 2f2c7ba..7f71c89 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
@@ -40,8 +40,14 @@
:host([show-avatar]) .container {
padding-left: 0;
}
+ gr-button.remove:hover,
+ gr-button.remove:focus {
+ --gr-button: {
+ color: #333;
+ }
+ }
gr-button.remove {
- --gr-remove-button-style: {
+ --gr-button: {
border: 0;
color: var(--deemphasized-text-color);
font-size: 1.7rem;
@@ -53,19 +59,6 @@
text-decoration: none;
}
}
-
- gr-button.remove:hover,
- gr-button.remove:focus {
- --gr-button: {
- @apply --gr-remove-button-style
- color: #333;
- }
- }
- gr-button.remove {
- --gr-button: {
- @apply --gr-remove-button-style
- }
- }
:host:focus {
border-color: transparent;
box-shadow: none;
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
index 46877d7..b74e48c 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
@@ -76,31 +76,14 @@
on-focus="_onInputFocus"
on-blur="_onInputBlur"
autocomplete="off">
-
- <template is="dom-if" if="[[_isPolymer2()]]">
- <!-- Content uses vertical-align:baseline. If iron-icon is placed
- directly in the slot and is not visible, vertical-align doesn't
- work, because display:none convert it from inline-block element to
- block element. To fix this problem, iron-icon is wrapped in div
- which never changes display type.
- The problem doesn't exist in Polymer1 because DOM is different.
- Applying the same fix to Polymer1 breaks vertical-align.
- -->
- <div slot="prefix">
- <iron-icon
- icon="gr-icons:search"
- class$="searchIcon [[_computeShowSearchIconClass(showSearchIcon)]]">
- </iron-icon>
- </div>
- </template>
- <template is="dom-if" if="[[!_isPolymer2()]]">
- <iron-icon
- prefix
+ <!-- slot is for future use (2.x) while prefix attribute is for 1.x
+ (current) -->
+ <iron-icon
icon="gr-icons:search"
+ slot="prefix"
+ prefix
class$="searchIcon [[_computeShowSearchIconClass(showSearchIcon)]]">
- </iron-icon>
- </template>
-
+ </iron-icon>
</paper-input>
<gr-autocomplete-dropdown
vertical-align="top"
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
index af31473..34f1ff9 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
@@ -425,9 +425,5 @@
_computeShowSearchIconClass(showSearchIcon) {
return showSearchIcon ? 'showSearchIcon' : '';
},
-
- _isPolymer2() {
- return window.POLYMER2;
- },
});
})();
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html
index cff35b4..217321f 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html
@@ -320,15 +320,12 @@
});
});
- test('search icon shows with showSearchIcon property', done => {
- flush(() => {
- assert.equal(getComputedStyle(element.$$('iron-icon')).display,
- 'none');
- element.showSearchIcon = true;
- assert.notEqual(getComputedStyle(element.$$('iron-icon')).display,
- 'none');
- done();
- });
+ test('search icon shows with showSearchIcon property', () => {
+ assert.equal(getComputedStyle(element.$$('iron-icon')).display,
+ 'none');
+ element.showSearchIcon = true;
+ assert.notEqual(getComputedStyle(element.$$('iron-icon')).display,
+ 'none');
});
test('vertical offset overridden by param if it exists', () => {
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 340297f..754c3c0 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@@ -39,37 +39,6 @@
text-transform: none;
}
paper-button {
- /* The next lines contains a copy of paper-button style.
- Without a copy, the @apply works incorrectly with Polymer 2.
- @apply is deprecated and is not recommended to use. It is expected
- that @apply will be replaced with the ::part CSS pseudo-element.
- After replacecment copied lines can be removed.
- */
- @apply --layout-inline;
- @apply --layout-center-center;
- position: relative;
- box-sizing: border-box;
- min-width: 5.14em;
- margin: 0 0.29em;
- background: transparent;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- -webkit-tap-highlight-color: transparent;
- font: inherit;
- text-transform: uppercase;
- outline-width: 0;
- border-radius: 3px;
- -moz-user-select: none;
- -ms-user-select: none;
- -webkit-user-select: none;
- user-select: none;
- cursor: pointer;
- z-index: 0;
- padding: 0.7em 0.57em;
-
- @apply --paper-font-common-base;
- @apply --paper-button;
- /* End of copy*/
-
/* paper-button sets this to anti-aliased, which appears different than
bold font elsewhere on macOS. */
-webkit-font-smoothing: initial;
diff --git a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
index 939d582..f6332f4 100644
--- a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
@@ -37,8 +37,14 @@
display: inline-flex;
padding: 0 .5em;
}
+ gr-button.remove:hover,
+ gr-button.remove:focus {
+ --gr-button: {
+ color: #333;
+ }
+ }
gr-button.remove {
- --gr-remove-button-style: {
+ --gr-button: {
border: 0;
color: var(--deemphasized-text-color);
font-size: 1.7rem;
@@ -50,19 +56,6 @@
text-decoration: none;
}
}
-
- gr-button.remove:hover,
- gr-button.remove:focus {
- --gr-button: {
- @apply --gr-remove-button-style
- color: #333;
- }
- }
- gr-button.remove {
- --gr-button: {
- @apply --gr-remove-button-style
- }
- }
.transparentBackground,
gr-button.transparentBackground {
background-color: transparent;
diff --git a/polygerrit-ui/app/styles/gr-voting-styles.html b/polygerrit-ui/app/styles/gr-voting-styles.html
index eec79be..3b1ee64 100644
--- a/polygerrit-ui/app/styles/gr-voting-styles.html
+++ b/polygerrit-ui/app/styles/gr-voting-styles.html
@@ -23,7 +23,6 @@
border: 1px solid rgba(0,0,0,.12);
border-radius: 1em;
box-shadow: none;
- box-sizing: border-box;
min-width: 3em;
}
}
