Delay the effect of .ScrollBox:not(:hover) {--tabs-indent: 0px;}

[Vermoot]

Hey there!
I use a setup similar to your sideberyModsLEFT setup, but I have a small delay to the unfolding of the sidebar so that I can click a tab without it growing, if I already know which one I want to open (within .8s with transition: .2s ease .8s;).

To be able to use indented tabs I want to use .ScrollBox:not(:hover) {--tabs-indent: 0px;} as shown in your file but I'd like the transition to be delayed in the same way, but haven't found how to do that.

Any idea? Thanks

[Vermoot]

Seems like these are what I needed:

.ScrollBox:not(:hover) {
  --tabs-indent: 0px;
}

.ScrollBox:not(:hover) .Tab {
    transition: all .2s ease .25s !important;
}

.Tab {
    transition: all .2s ease .8s !important;
}

[Vermoot]

Actually, using this breaks other animations, like opening and closing tabs. Even replacing all with padding-left.

[Redundakitties]

sorry for the delay in getting back to you! I've been super busy this last week as it's the end of semester for me.

This is what I've come up with:

.Tab[data-lvl="0"], .pointer[data-lvl="0"] { --tree-lvl: 0; }
.Tab[data-lvl="1"], .pointer[data-lvl="1"] { --tree-lvl: 1; }
.Tab[data-lvl="2"], .pointer[data-lvl="2"] { --tree-lvl: 2; }

.Tab {
    right: calc(var(--tabs-indent) * var(--tree-lvl));
    transition: right 0.25s ease;
}

.ScrollBox:hover .Tab {
    right: 0px;
    transition-delay: 0.8s;
}

.ScrollBox:not(:hover) .Tab { --tabs-activated-bg: none; }

The last bit, --tabs-activated-bg: none; is because the activated bg looks really strange without it. There's probably a better way to go about adding a delay? But I wanted to post something for now while I look for a better solution.