Border and background transition error

[aminomancer]

Forgive me if I've misinterpreted and this was done intentionally for some reason, but check line 454: transition: border-color, background-color, color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important

I don't know if this works differently in other browsers, but I don't think so. This shorthand gets interpreted as:

transition-property: border-color, background-color, color;
transition-duration: 0s, 0s, .3s;

Which means there is no border-color or background-color transition for any element that doesn't have the shorthand explicitly overridden by transition-duration. You can see that prominently on the tabs under the repo name (Code, Issues, PRs, etc.) where only the text color transitions, and the border-bottom just immediately changes.

This looks pretty jarring to me but I guess it could have been intentional. But if you didn't want the border-color or background-color to transition, I figured you wouldn't have listed them in transition at all, unless you intended to override the durations piecemeal, but I haven't noticed anything like that.

If the intention was to transition all 3 of these elements over 300ms with the same easing function, then the shortest way to do that would be

transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
transition-property: color, background-color, border-color !important;

However you could also repeat the duration and easing function each time, per-property, like this:

transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1), background-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1), color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;

Or cut down some text by defining the easing function as a variable, I guess. I also wanna propose adding this so the icons match the text:

.UnderlineNav-item .octicon {
    transition: inherit !important;
}

.UnderlineNav-item:hover .octicon,
.UnderlineNav-item:focus .octicon {
    color: var(--blue) !important;
}

edit: the above is actually way too specific but I'll post what I come up with when I have time to finish it

Lovely stylesheet in any case, thanks for sharing your work