align toolbar icons in the center

This commit is contained in:
milan 2024-09-19 17:34:52 +02:00
parent 6d34931784
commit 160f0e9aa7
7 changed files with 36 additions and 6 deletions

View File

@ -53,12 +53,12 @@ export class Et2Favorites extends Et2DropdownButton implements et2_INextmatchHea
...super.styles, ...super.styles,
css` css`
:host { :host {
min-width: 8ex; min-width: 8ex;
} }
et2-image { et2-image {
position: absolute; position: absolute;
left: ${egwIsMobile() ? css`-.4em` : css`.7em`}; left: var(--et2-favorites-left);
width: ${egwIsMobile() ? css`4ex` : css`20px`}; width: ${egwIsMobile() ? css`4ex` : css`20px`};
font-size: ${egwIsMobile() ? css`4ex` : css`20px`}; font-size: ${egwIsMobile() ? css`4ex` : css`20px`};
top: -2px; top: -2px;

View File

@ -6797,6 +6797,7 @@ table.egwGridView_grid img.et2_appicon {
--sl-focus-ring-width: 2px; --sl-focus-ring-width: 2px;
--sl-color-gray-150: hsl(240, 4.9%, 92.5%); --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
--track-width: 3px; --track-width: 3px;
--et2-favorites-left: 0.4em;
} }
.bi::before, .bi::before,
[class^="bi-"]::before, [class^="bi-"]::before,
@ -7142,6 +7143,11 @@ img.et2_button_icon[src*="svg"]:hover {
::-ms-input-placeholder { ::-ms-input-placeholder {
color: #666666; color: #666666;
} }
.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
justify-content: center;
--et2-button-image-padding-left: 0;
padding-inline-start: 0;
}
:root, :root,
:host, :host,
.sl-theme-light, .sl-theme-light,
@ -7161,7 +7167,7 @@ img.et2_button_icon[src*="svg"]:hover {
.sl-theme-light et2-tabbox::part(tabs), .sl-theme-light et2-tabbox::part(tabs),
.sl-theme-dark et2-tabbox::part(tabs) { .sl-theme-dark et2-tabbox::part(tabs) {
padding-bottom: var(--sl-spacing-x-small); padding-bottom: var(--sl-spacing-x-small);
padding-top: var(--sl-spacing-medium); padding-top: var(--sl-spacing-large);
gap: var(--sl-spacing-medium); gap: var(--sl-spacing-medium);
} }
:root et2-tabbox et2-tab::part(base), :root et2-tabbox et2-tab::part(base),
@ -7182,7 +7188,7 @@ img.et2_button_icon[src*="svg"]:hover {
:host et2-tabbox .tabLabel, :host et2-tabbox .tabLabel,
.sl-theme-light et2-tabbox .tabLabel, .sl-theme-light et2-tabbox .tabLabel,
.sl-theme-dark et2-tabbox .tabLabel { .sl-theme-dark et2-tabbox .tabLabel {
max-height: 1em; max-height: 1.1em;
} }
:root et2-tabbox et2-tab-panel, :root et2-tabbox et2-tab-panel,
:host et2-tabbox et2-tab-panel, :host et2-tabbox et2-tab-panel,

View File

@ -18,7 +18,7 @@
&::part(tabs) { &::part(tabs) {
padding-bottom: var(--sl-spacing-x-small); padding-bottom: var(--sl-spacing-x-small);
padding-top: var(--sl-spacing-medium); padding-top: var(--sl-spacing-large);
gap: var(--sl-spacing-medium); gap: var(--sl-spacing-medium);
} }
@ -39,7 +39,7 @@
} }
.tabLabel { .tabLabel {
max-height: 1em; max-height: 1.1em;
} }
et2-tab-panel{ et2-tab-panel{
border: 1px solid var(--sl-color-neutral-300); border: 1px solid var(--sl-color-neutral-300);

View File

@ -31,6 +31,9 @@
} }
@media all { @media all {
:host{
--et2-favorites-left: .7em;
}
body{ body{
background-color: transparent; background-color: transparent;

View File

@ -7135,3 +7135,8 @@ img.et2_button_icon[src*="svg"]:hover {
::-ms-input-placeholder { ::-ms-input-placeholder {
color: #666666; color: #666666;
} }
.et2-toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
justify-content: center;
--et2-button-image-padding-left: 0;
padding-inline-start: 0;
}

View File

@ -30,6 +30,7 @@
--sl-focus-ring-width: 2px; --sl-focus-ring-width: 2px;
--sl-color-gray-150: hsl(240, 4.9%, 92.5%); --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
--track-width: 3px; --track-width: 3px;
--et2-favorites-left: .4em;
} }
.bi::before, .bi::before,
@ -410,4 +411,10 @@ img.et2_button_icon[src*="svg"], img.et2_button_icon[src*="svg"]:hover {
} }
::-ms-input-placeholder{ ::-ms-input-placeholder{
color: @color_placeholder; color: @color_placeholder;
}
.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
justify-content: center;
--et2-button-image-padding-left: 0;
padding-inline-start: 0;
} }

View File

@ -6607,6 +6607,7 @@ span.egw_tutorial_title {
--sl-focus-ring-width: 2px; --sl-focus-ring-width: 2px;
--sl-color-gray-150: hsl(240, 4.9%, 92.5%); --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
--track-width: 3px; --track-width: 3px;
--et2-favorites-left: 0.4em;
} }
.bi::before, .bi::before,
[class^="bi-"]::before, [class^="bi-"]::before,
@ -6952,6 +6953,11 @@ img.et2_button_icon[src*="svg"]:hover {
::-ms-input-placeholder { ::-ms-input-placeholder {
color: #666666; color: #666666;
} }
.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
justify-content: center;
--et2-button-image-padding-left: 0;
padding-inline-start: 0;
}
@keyframes fw-firstload { @keyframes fw-firstload {
0%, 0%,
20%, 20%,
@ -6974,6 +6980,9 @@ img.et2_button_icon[src*="svg"]:hover {
} }
} }
@media all { @media all {
:host {
--et2-favorites-left: 0.7em;
}
body { body {
background-color: transparent; background-color: transparent;
/*BOF close/back button styling*/ /*BOF close/back button styling*/