fix left padding of image in buttons, specially for fancy theme

This commit is contained in:
ralf 2024-08-27 14:25:49 +02:00
parent c49618be51
commit 039acf1569
7 changed files with 12 additions and 1 deletions

View File

@ -78,7 +78,7 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
display:none !important; 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 { :host(.imageOnly) .button__label {
position: absolute; position: absolute;
left: -999px left: -999px
@ -94,6 +94,7 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
max-width: 20px; max-width: 20px;
display: flex; display: flex;
font-size: 20px !important; font-size: 20px !important;
padding-left: var(--et2-button-image-padding-left);
} }
::slotted([slot="icon"][src='']) { ::slotted([slot="icon"][src='']) {
display: none; display: none;
@ -128,6 +129,9 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
width: var(--sl-input-height-medium); width: var(--sl-input-height-medium);
padding-inline-start: 0; 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 */ /* Override primary styling - we use variant=primary on first dialog button */
.button--standard.button--primary { .button--standard.button--primary {

View File

@ -6819,6 +6819,7 @@ table.egwGridView_grid img.et2_appicon {
--sl-button-font-size-medium: var(--sl-font-size-medium); --sl-button-font-size-medium: var(--sl-font-size-medium);
--sl-input-help-text-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; --sl-spacing-small: 0.1rem;
--et2-button-image-padding-left: 0.1rem;
--sl-spacing-medium: 0.5rem; --sl-spacing-medium: 0.5rem;
--sl-input-border-radius-small: 2px; --sl-input-border-radius-small: 2px;
--sl-input-border-radius-medium: 3px; --sl-input-border-radius-medium: 3px;
@ -7202,6 +7203,7 @@ img.et2_button_icon[src*="svg"]:hover {
.sl-theme-light { .sl-theme-light {
--sl-border-radius-medium: 20px; --sl-border-radius-medium: 20px;
--sl-input-border-radius-medium: var(--sl-border-radius-medium); --sl-input-border-radius-medium: var(--sl-border-radius-medium);
--et2-button-image-padding-left: 0.3rem;
} }
:root et2-tabbox, :root et2-tabbox,
:host et2-tabbox, :host et2-tabbox,

View File

@ -11,6 +11,7 @@
:root, :host, .sl-theme-light { :root, :host, .sl-theme-light {
--sl-border-radius-medium: 20px; --sl-border-radius-medium: 20px;
--sl-input-border-radius-medium: var(--sl-border-radius-medium); --sl-input-border-radius-medium: var(--sl-border-radius-medium);
--et2-button-image-padding-left: .3rem;
et2-tabbox { et2-tabbox {

View File

@ -6822,6 +6822,7 @@ table.egwGridView_grid img.et2_appicon {
--sl-button-font-size-medium: var(--sl-font-size-medium); --sl-button-font-size-medium: var(--sl-font-size-medium);
--sl-input-help-text-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; --sl-spacing-small: 0.1rem;
--et2-button-image-padding-left: 0.1rem;
--sl-spacing-medium: 0.5rem; --sl-spacing-medium: 0.5rem;
--sl-input-border-radius-small: 2px; --sl-input-border-radius-small: 2px;
--sl-input-border-radius-medium: 3px; --sl-input-border-radius-medium: 3px;

View File

@ -6812,6 +6812,7 @@ table.egwGridView_grid img.et2_appicon {
--sl-button-font-size-medium: var(--sl-font-size-medium); --sl-button-font-size-medium: var(--sl-font-size-medium);
--sl-input-help-text-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; --sl-spacing-small: 0.1rem;
--et2-button-image-padding-left: 0.1rem;
--sl-spacing-medium: 0.5rem; --sl-spacing-medium: 0.5rem;
--sl-input-border-radius-small: 2px; --sl-input-border-radius-small: 2px;
--sl-input-border-radius-medium: 3px; --sl-input-border-radius-medium: 3px;

View File

@ -18,6 +18,7 @@
--sl-button-font-size-medium: var(--sl-font-size-medium); --sl-button-font-size-medium: var(--sl-font-size-medium);
--sl-input-help-text-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; --sl-spacing-small: 0.1rem;
--et2-button-image-padding-left: .1rem;
--sl-spacing-medium: 0.5rem; --sl-spacing-medium: 0.5rem;
--sl-input-border-radius-small: 2px; --sl-input-border-radius-small: 2px;

View File

@ -6630,6 +6630,7 @@ span.egw_tutorial_title {
--sl-button-font-size-medium: var(--sl-font-size-medium); --sl-button-font-size-medium: var(--sl-font-size-medium);
--sl-input-help-text-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; --sl-spacing-small: 0.1rem;
--et2-button-image-padding-left: 0.1rem;
--sl-spacing-medium: 0.5rem; --sl-spacing-medium: 0.5rem;
--sl-input-border-radius-small: 2px; --sl-input-border-radius-small: 2px;
--sl-input-border-radius-medium: 3px; --sl-input-border-radius-medium: 3px;