Make the ET2Button container accepting external css rules using ::part to get buttons in NM in shape (This should be avoided after NM is a WC)

This commit is contained in:
Hadi Nategh 2022-01-24 13:36:05 +01:00
parent 282c01f62e
commit 4cf9c109d8
2 changed files with 9 additions and 1 deletions

View File

@ -208,7 +208,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
this._iconNode.src = this._image; this._iconNode.src = this._image;
if (!this._label) this._iconNode.classList.add('imageOnly'); if (!this._label) this._iconNode.classList.add('imageOnly');
return html` return html`
<div class="button-content et2_button ${this._label?'':'imageOnly'}" id="${this._buttonId}"> <div class="button-content et2_button ${this._label?'':'imageOnly'}" id="${this._buttonId}" part="container">
<slot name="icon" class="${this._label?'':'imageOnly'}"></slot> <slot name="icon" class="${this._label?'':'imageOnly'}"></slot>
<slot name="label">${this._label}</slot> <slot name="label">${this._label}</slot>
</div> `; </div> `;

View File

@ -2795,6 +2795,14 @@ div.et2_toolbar_more h.ui-accordion-header.header_list-short span.ui-accordion-h
} }
.nextmatch_header_row et2-button, .et2_toolbar et2-button { .nextmatch_header_row et2-button, .et2_toolbar et2-button {
background-color: #fafafa; background-color: #fafafa;
margin: 1px 4px 0 0;
border-color: silver;
}
.nextmatch_header_row et2-button::part(container){
height: 18px;
}
.nextmatch_header_row et2-button img {
width: 16px;
} }
.et2_toolbar .et2_toolbar_actionlist button.et2_button_with_image.et2_toolbar_hasCaption, .nextmatch_header_row .et2_button_text { .et2_toolbar .et2_toolbar_actionlist button.et2_button_with_image.et2_toolbar_hasCaption, .nextmatch_header_row .et2_button_text {
width: auto; width: auto;