From 039acf1569154af62de41842e9e5d0e42c85739c Mon Sep 17 00:00:00 2001 From: ralf Date: Tue, 27 Aug 2024 14:25:49 +0200 Subject: [PATCH] fix left padding of image in buttons, specially for fancy theme --- api/js/etemplate/Et2Button/ButtonMixin.ts | 6 +++++- pixelegg/css/fancy.css | 2 ++ pixelegg/css/fancy.less | 1 + pixelegg/css/mobile.css | 1 + pixelegg/css/pixelegg.css | 1 + pixelegg/css/pixelegg.less | 1 + pixelegg/mobile/fw_mobile.css | 1 + 7 files changed, 12 insertions(+), 1 deletion(-) diff --git a/api/js/etemplate/Et2Button/ButtonMixin.ts b/api/js/etemplate/Et2Button/ButtonMixin.ts index f9ce1eb176..d6e9756985 100644 --- a/api/js/etemplate/Et2Button/ButtonMixin.ts +++ b/api/js/etemplate/Et2Button/ButtonMixin.ts @@ -78,7 +78,7 @@ export const ButtonMixin = (superclass : T) => class exte display:none !important; } - /* Leave label there for accessability, but position it so it can't be seen */ + /* Leave label there for accessibility, but position it so it can't be seen */ :host(.imageOnly) .button__label { position: absolute; left: -999px @@ -94,6 +94,7 @@ export const ButtonMixin = (superclass : T) => class exte max-width: 20px; display: flex; font-size: 20px !important; + padding-left: var(--et2-button-image-padding-left); } ::slotted([slot="icon"][src='']) { display: none; @@ -128,6 +129,9 @@ export const ButtonMixin = (superclass : T) => class exte width: var(--sl-input-height-medium); padding-inline-start: 0; } + .button--has-prefix:not(.button--has-label) ::slotted(et2-image) { + padding-left: 0; + } /* Override primary styling - we use variant=primary on first dialog button */ .button--standard.button--primary { diff --git a/pixelegg/css/fancy.css b/pixelegg/css/fancy.css index 9ba673e04f..dd08554d4a 100644 --- a/pixelegg/css/fancy.css +++ b/pixelegg/css/fancy.css @@ -6819,6 +6819,7 @@ table.egwGridView_grid img.et2_appicon { --sl-button-font-size-medium: var(--sl-font-size-medium); --sl-input-help-text-font-size-medium: var(--sl-font-size-medium); --sl-spacing-small: 0.1rem; + --et2-button-image-padding-left: 0.1rem; --sl-spacing-medium: 0.5rem; --sl-input-border-radius-small: 2px; --sl-input-border-radius-medium: 3px; @@ -7202,6 +7203,7 @@ img.et2_button_icon[src*="svg"]:hover { .sl-theme-light { --sl-border-radius-medium: 20px; --sl-input-border-radius-medium: var(--sl-border-radius-medium); + --et2-button-image-padding-left: 0.3rem; } :root et2-tabbox, :host et2-tabbox, diff --git a/pixelegg/css/fancy.less b/pixelegg/css/fancy.less index baa3c2787f..3e26f78cea 100644 --- a/pixelegg/css/fancy.less +++ b/pixelegg/css/fancy.less @@ -11,6 +11,7 @@ :root, :host, .sl-theme-light { --sl-border-radius-medium: 20px; --sl-input-border-radius-medium: var(--sl-border-radius-medium); + --et2-button-image-padding-left: .3rem; et2-tabbox { diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index ac65318115..a1ffc90fd8 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -6822,6 +6822,7 @@ table.egwGridView_grid img.et2_appicon { --sl-button-font-size-medium: var(--sl-font-size-medium); --sl-input-help-text-font-size-medium: var(--sl-font-size-medium); --sl-spacing-small: 0.1rem; + --et2-button-image-padding-left: 0.1rem; --sl-spacing-medium: 0.5rem; --sl-input-border-radius-small: 2px; --sl-input-border-radius-medium: 3px; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 643887bd51..0cb5bc8071 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -6812,6 +6812,7 @@ table.egwGridView_grid img.et2_appicon { --sl-button-font-size-medium: var(--sl-font-size-medium); --sl-input-help-text-font-size-medium: var(--sl-font-size-medium); --sl-spacing-small: 0.1rem; + --et2-button-image-padding-left: 0.1rem; --sl-spacing-medium: 0.5rem; --sl-input-border-radius-small: 2px; --sl-input-border-radius-medium: 3px; diff --git a/pixelegg/css/pixelegg.less b/pixelegg/css/pixelegg.less index bb9e267c8c..99b5eb3744 100644 --- a/pixelegg/css/pixelegg.less +++ b/pixelegg/css/pixelegg.less @@ -18,6 +18,7 @@ --sl-button-font-size-medium: var(--sl-font-size-medium); --sl-input-help-text-font-size-medium: var(--sl-font-size-medium); --sl-spacing-small: 0.1rem; + --et2-button-image-padding-left: .1rem; --sl-spacing-medium: 0.5rem; --sl-input-border-radius-small: 2px; diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 6108605269..c8a0ea4b5a 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -6630,6 +6630,7 @@ span.egw_tutorial_title { --sl-button-font-size-medium: var(--sl-font-size-medium); --sl-input-help-text-font-size-medium: var(--sl-font-size-medium); --sl-spacing-small: 0.1rem; + --et2-button-image-padding-left: 0.1rem; --sl-spacing-medium: 0.5rem; --sl-input-border-radius-small: 2px; --sl-input-border-radius-medium: 3px;