N°7939 - Improve activity panel tab togglers when there's more than 2 log attributes (#766)

This commit is contained in:
Stephen Abello
2025-10-30 16:38:38 +01:00
committed by GitHub
parent 5df936c587
commit adfa800063
3 changed files with 39 additions and 20 deletions

View File

@@ -15,9 +15,10 @@ $ibo-activity-panel--padding-y: $ibo-spacing-0 !default;
/* - Header */
$ibo-activity-panel--header--background-color: $ibo-color-grey-100 !default;
$ibo-activity-panel--togglers--color: $ibo-color-grey-600 !default;
$ibo-activity-panel--togglers--on-hover--color: $ibo-color-grey-800 !default;
$ibo-activity-panel--togglers--elements-spacing: 0.75rem !default;
$ibo-activity-panel--actions--color: $ibo-color-grey-600 !default;
$ibo-activity-panel--actions--on-hover--color: $ibo-color-grey-800 !default;
$ibo-activity-panel--actions--elements-spacing: 0.75rem !default;
$ibo-activity-panel--actions-padding-right: $ibo-activity-panel--padding-x !default;
/* - Tabs togglers*/
$ibo-activity-panel--tabs-togglers--padding-x: $ibo-activity-panel--padding-x * 3 !default; /* We need to increase this so the size toggler which will be set in abs. pos. can overlap it nicely */
@@ -151,35 +152,45 @@ $ibo-activity-panel--open-icon--margin-left: 0.75rem !default;
background-color: $ibo-activity-panel--header--background-color;
/* Remove hyperlinks default color */
> .ibo-activity-panel--tabs-togglers a{
.ibo-activity-panel--togglers a{
color: $ibo-activity-panel--tab-toolbar--text-color;
}
}
/* Size/display togglers */
/* All toggles container */
.ibo-activity-panel--togglers {
position: absolute;
right: $ibo-activity-panel--padding-x;
top: 0;
bottom: 0;
@extend %ibo-fully-centered-content;
color: $ibo-activity-panel--togglers--color;
display: flex;
align-items: center;
}
/* Size/display togglers */
.ibo-activity-panel--actions {
display: flex;
align-items: center;
flex-grow: 0;
position: sticky;
padding-right: $ibo-activity-panel--actions-padding-right;
background-color: $ibo-activity-panel--header--background-color;
color: $ibo-activity-panel--actions--color;
&:hover {
color: $ibo-activity-panel--togglers--on-hover--color;
color: $ibo-activity-panel--actions--on-hover--color;
}
> *:not(:first-child) {
margin-left: $ibo-activity-panel--togglers--elements-spacing;
margin-left: $ibo-activity-panel--actions--elements-spacing;
}
}
/* Tabs togglers */
.ibo-activity-panel--tabs-togglers{
position: relative; /* For size toggler */
display: flex;
align-items: center;
justify-content: safe center;
flex-grow: 1;
padding-left: $ibo-activity-panel--tabs-togglers--padding-x;
padding-right: $ibo-activity-panel--tabs-togglers--padding-x;
@extend %ibo-fully-centered-content;
overflow-x: auto;
}
.ibo-activity-panel--tab-toggler{
&.ibo-is-active{