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,
css`
:host {
min-width: 8ex;
min-width: 8ex;
}
et2-image {
position: absolute;
left: ${egwIsMobile() ? css`-.4em` : css`.7em`};
left: var(--et2-favorites-left);
width: ${egwIsMobile() ? css`4ex` : css`20px`};
font-size: ${egwIsMobile() ? css`4ex` : css`20px`};
top: -2px;

View File

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

View File

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

View File

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

View File

@ -7135,3 +7135,8 @@ img.et2_button_icon[src*="svg"]:hover {
::-ms-input-placeholder {
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-color-gray-150: hsl(240, 4.9%, 92.5%);
--track-width: 3px;
--et2-favorites-left: .4em;
}
.bi::before,
@ -410,4 +411,10 @@ img.et2_button_icon[src*="svg"], img.et2_button_icon[src*="svg"]:hover {
}
::-ms-input-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-color-gray-150: hsl(240, 4.9%, 92.5%);
--track-width: 3px;
--et2-favorites-left: 0.4em;
}
.bi::before,
[class^="bi-"]::before,
@ -6952,6 +6953,11 @@ img.et2_button_icon[src*="svg"]:hover {
::-ms-input-placeholder {
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 {
0%,
20%,
@ -6974,6 +6980,9 @@ img.et2_button_icon[src*="svg"]:hover {
}
}
@media all {
:host {
--et2-favorites-left: 0.7em;
}
body {
background-color: transparent;
/*BOF close/back button styling*/