Relies on silverstripe/silverstripe-cms#231
The tabs in the CMS had quite a bit of "wild growth". What started out as basically two styles (primary and secondary) evolved into a couple of variations which were very similar, but had heaps of copypaste, leading to CSS maintenance issues.
Here's the use cases:
What I've changed:
Tested in IE7/IE8/Firefox/Chrome
Comparisons (before/after pairs):
ENHANCEMENT Tab style consolidation and design consistency
Paul said: "Great work, I'm glad you got rid of the white text, and the non-active tab colour works much better too. The only thing that I noticed straight away is the different width's of the second and third tab sets border on the bottom but I'm sure your already aware of that. +1 from me"
@clarkepaul do you mean https://www.evernote.com/shard/s5/sh/2ae92d26-4399-4be7-aa45-7c57fbcc72b3/74f96cd5f6fe7ec357e80acf7aa32b85 ? That was on purpose, I guess wanted to distinguish between a single tabset simply wrapping into multiple lines (although unlikely), and a parent-child relationship. It does look a bit weird. But then again, third level tabs in itself are an edge case :)
If there is possibility that the tabs would wrap then I would prefer slider tabs or the last tab turns into a "more" dropdown to select hidden tabs, I know that this would probably be overkill though as it would be a feature that would almost never be used.
Going with what you have in your designs, even if the 2nd and 3rd level tabs would wrap I think the border on the bottom should still needs to remain the same length (without rounded corners) as the content area purely for simplicity. I find it not necessary to design something weirdly for the majority just so it makes sense for the minority.
I'd go with Paul's suggestions, and leave whatever the existing behaviour of excessive tabs is as a known issue. The more dropdown and/or slider would be a nice touch, but seems low priority.
As for 3rd level tabs being an edge-case: you're correct, although I'd hope that 3rd level tabs are more common than wrapping tabs ;-)
Alright, fixed in 91b69bf :)
Fixed tab alignment and padding
See discussion at silverstripe/silverstripe-framework#934 (comment)