silverstripe/sapphire — pull request #934 by chillu (2012-11-06 21:21:14+00:00)
Title: ENHANCEMENT Tab style consolidation and design consistency

Relies on https://github.com/silverstripe/silverstripe-cms/pull/230

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:

* "Primary" tabs with darker unselected tabs, directly adjacent to top (can't be nested)
* "Secondary" tabs with a more common styling, and rounded corners (can be nested)
* Tabs with text or icons (both primary and secondary)
* Tabs alongside breadcrumbs (in "Edit Page" view)
* Tabs alongside dialog title (in "Insert Media" view)
* Tabs in dialog, but without title (in "My Profile" view) - removed from master

What I've changed:

* Icons are declarative via generic CSS classes, rather than tied to unrelated classes like .AssetAdmin
* Same goes for distinction between the two tabset styles. Instead of half a dozen rules scoping to ".CMSPagesController", ".ui-dialog" etc, we just have a ".cms-tabset-primary" class
* SCSS sprites for icons
* Dark instead of white text, lighter background for primary unselected tabs, for better contrast and more consistent text display (we rarely use white text anywhere else)
* Darker background for secondary unselected tabs
* Corrected text color for selected secondary tabs (was black rather than the main dark-grey we use for text)
* Right aligned primary and secondary tabs to each other, and the form fields (if window >700px, since form fields have a max-width of 512px)
* Reduced top padding between primary and secondary tabs
* Reduced left/right padding of main tabs content area
* Indented nested secondary tabs
* Fixed IE7 tab overlap into content

Tested in IE7/IE8/Firefox/Chrome

Comparisons (before/after pairs):

https://www.evernote.com/shard/s5/sh/e570a98d-1ab3-4d14-b3d8-54d97b7e8298/60e20ff1852c4fc83e19e0991608fff7
https://www.evernote.com/shard/s5/sh/a089c5ee-f973-4714-9d18-f76a0d4815a3/1204152c653dabad6ec8a3ff4f06b3c5

https://www.evernote.com/shard/s5/sh/a089c5ee-f973-4714-9d18-f76a0d4815a3/1204152c653dabad6ec8a3ff4f06b3c5
https://www.evernote.com/shard/s5/sh/c4f687eb-0e65-4c75-b142-3a1098961bdd/427d7da6b387b077efc710183921f563

https://www.evernote.com/shard/s5/sh/00be9095-daab-4ac7-8432-a45d3727e1bd/aea4e27cf8d4343814639d769bdee6f4
https://www.evernote.com/shard/s5/sh/2ae92d26-4399-4be7-aa45-7c57fbcc72b3/74f96cd5f6fe7ec357e80acf7aa32b85

https://www.evernote.com/shard/s5/sh/a2068a0d-b84f-434a-bcb8-9cafae14f6d4/393ff3ad195c3eb8adb1b606723d55ad
https://www.evernote.com/shard/s5/sh/54ca3314-25b9-4c98-a218-0e8d6846159a/d875829169c1b7830f5fd9ab9e6c0983

https://www.evernote.com/shard/s5/sh/51df0762-37e9-4711-a1bc-84d3829772c2/88309376e4d21fdf7e4479df685cef97
https://www.evernote.com/shard/s5/sh/8ff4a8d4-f619-494d-8ad2-bb883a3383b4/ba5e2985493eaedcdd471ab84e4b50c3