From 4cf9c109d8b9c972d0c120ec28629daf8cecf360 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Mon, 24 Jan 2022 13:36:05 +0100
Subject: [PATCH] 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)

---
 api/js/etemplate/Et2Button/Et2Button.ts | 2 +-
 api/templates/default/etemplate2.css    | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/api/js/etemplate/Et2Button/Et2Button.ts b/api/js/etemplate/Et2Button/Et2Button.ts
index a24d3a5969..fa1af545ed 100644
--- a/api/js/etemplate/Et2Button/Et2Button.ts
+++ b/api/js/etemplate/Et2Button/Et2Button.ts
@@ -208,7 +208,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 		this._iconNode.src = this._image;
 		if (!this._label) this._iconNode.classList.add('imageOnly');
 		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="label">${this._label}</slot>
             </div> `;
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 082a434d43..59262d1a4f 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -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 {
     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 {
     width: auto;