mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-21 15:33:23 +01:00
tab border now dynamically changes depending on scrollbar existence. Only works in Chrome, Opera and Edge
--regarding ticket #99621
This commit is contained in:
parent
a9b6be448a
commit
445df7dcad
@ -26,7 +26,12 @@ export class Et2Tabs extends Et2InputWidget(SlTabGroup) implements et2_IResizeab
|
||||
...super.styles,
|
||||
colorsDefStyles,
|
||||
...shoelace,
|
||||
//keyframes definition can't get into shadow root from css files, so we declare it here
|
||||
css`
|
||||
/*scroll detection detect if scrollbar is available scroll detection only works in chromium not in Firefox or Safari*/
|
||||
@keyframes detect-scroll {
|
||||
from, to { --can-scroll:0;}
|
||||
}
|
||||
.tab-group--top {
|
||||
height: 100%;
|
||||
min-height: fit-content;
|
||||
|
@ -7160,6 +7160,7 @@ img.et2_button_icon[src*="svg"]:hover {
|
||||
--sl-border-radius-small: 1rem;
|
||||
--sl-input-border-radius-medium: var(--sl-border-radius-medium);
|
||||
--et2-button-image-padding-left: 0.6rem;
|
||||
--can-scroll: 1;
|
||||
}
|
||||
:root et2-button:not(imageOnly) > et2-image[class*="circle"],
|
||||
:host et2-button:not(imageOnly) > et2-image[class*="circle"],
|
||||
@ -7189,10 +7190,12 @@ img.et2_button_icon[src*="svg"]:hover {
|
||||
:host et2-tabbox::part(body),
|
||||
.sl-theme-light et2-tabbox::part(body),
|
||||
.sl-theme-dark et2-tabbox::part(body) {
|
||||
animation: detect-scroll 1s linear;
|
||||
animation-timeline: scroll(self);
|
||||
border: 1px solid var(--sl-color-neutral-300);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium));
|
||||
border-top-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium));
|
||||
padding: var(--sl-spacing-medium);
|
||||
}
|
||||
:root et2-tabbox et2-tab::part(base),
|
||||
|
@ -13,6 +13,7 @@
|
||||
--sl-border-radius-small: 1rem;
|
||||
--sl-input-border-radius-medium: var(--sl-border-radius-medium);
|
||||
--et2-button-image-padding-left: .6rem;
|
||||
--can-scroll: 1;
|
||||
|
||||
et2-button:not(imageOnly) > et2-image[class*="circle"], et2-button:not(imageOnly) > et2-image[class*="clock"]{
|
||||
--et2-button-image-padding-left: .2rem;
|
||||
@ -28,11 +29,15 @@
|
||||
}
|
||||
|
||||
// left rounded box around the tab content to visually group it
|
||||
//scroll detection detect if scrollbar is available scroll detection only works in chromium not in Firefox or Safari
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility
|
||||
&::part(body){
|
||||
animation: detect-scroll linear;
|
||||
animation-timeline: scroll(self);
|
||||
border: 1px solid var(--sl-color-neutral-300);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium));
|
||||
border-top-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium));
|
||||
padding: var(--sl-spacing-medium);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user