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; } }