From 2a9a4bede79bf5b1a489b860fb47593e974485b9 Mon Sep 17 00:00:00 2001
From: Andrew Short <andrewjshort@gmail.com>
Date: Fri, 6 Jul 2012 12:48:15 +1000
Subject: [PATCH] Fixed nested tab styling in other CMS interfaces.

---
 admin/css/screen.css                          | 18 ++--
 admin/scss/_style.scss                        | 92 +++++++++++--------
 admin/templates/CMSTabSet.ss                  | 18 ++--
 .../Includes/LeftAndMain_EditForm.ss          |  2 +-
 4 files changed, 72 insertions(+), 58 deletions(-)

diff --git a/admin/css/screen.css b/admin/css/screen.css
index 3b9953899..e56695b0c 100644
--- a/admin/css/screen.css
+++ b/admin/css/screen.css
@@ -295,6 +295,14 @@ body.cms { overflow: hidden; }
 .cms-content-header .ss-ui-button .ui-button-text { line-height: 1.4; }
 
 .cms-edit-form .cms-content-header-tabs .ui-tabs-nav li a { text-indent: 0; }
+.cms-edit-form .cms-content-fields .ui-tabs-nav { border-bottom: none; float: right; margin: 8px 0 -1px 0; padding: 0 24px 0 0; }
+.cms-edit-form .cms-content-fields .ui-tabs-nav li { float: left; }
+.cms-edit-form .cms-content-fields .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; }
+.cms-edit-form .cms-content-fields .ui-tabs-nav .ui-state-default, .cms-edit-form .cms-content-fields .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-edit-form .cms-content-fields .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; }
+.cms-edit-form .cms-content-fields .ui-tabs-nav .ui-state-active, .cms-edit-form .cms-content-fields .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-edit-form .cms-content-fields .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; border: 1px solid #c0c0c2; }
+.cms-edit-form .ss-tabset .ss-tabset { position: static; }
+.cms-edit-form .ss-tabset .ui-tabs-panel { border-top: 1px solid #c0c0c2; clear: both; }
+.cms-edit-form .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel { border-top: none; }
 
 /** -------------------------------------------- Tabs -------------------------------------------- */
 .cms-content-header .ui-tabs-nav li, .cms-dialog .ui-tabs-nav li { margin: 0; }
@@ -624,14 +632,8 @@ form.import-form label.left { width: 250px; }
 /** -------------------------------------------- Page Edit Controller -------------------------------------------- */
 .cms-container .CMSPageEditController, .cms-container .CMSPageSettingsController, .cms-container .CMSPageHistoryController { margin-left: -1px; }
 .cms-container .CMSPageEditController .cms-edit-form, .cms-container .CMSPageSettingsController .cms-edit-form, .cms-container .CMSPageHistoryController .cms-edit-form { background: #e6eaed; }
-.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav { border-bottom: none; float: right; margin: 8px 0 -1px 0; padding: 0 24px 0 0; }
-.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav li, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav li, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav li { float: left; }
-.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav li a, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav li a, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; }
-.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; }
-.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #e6eaed; border: 1px solid #c0c0c2; }
-.cms-container .CMSPageEditController .ss-tabset .ss-tabset, .cms-container .CMSPageSettingsController .ss-tabset .ss-tabset, .cms-container .CMSPageHistoryController .ss-tabset .ss-tabset { position: static; }
-.cms-container .CMSPageEditController .ss-tabset .ui-tabs-panel, .cms-container .CMSPageSettingsController .ss-tabset .ui-tabs-panel, .cms-container .CMSPageHistoryController .ss-tabset .ui-tabs-panel { background: #e6eaed; border-top: 1px solid #c0c0c2; clear: both; }
-.cms-container .CMSPageEditController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel, .cms-container .CMSPageSettingsController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel, .cms-container .CMSPageHistoryController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel { border-top: none; }
+.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { background: #e6eaed; }
+.cms-container .CMSPageEditController .ss-tabset .ui-tabs-panel, .cms-container .CMSPageSettingsController .ss-tabset .ui-tabs-panel, .cms-container .CMSPageHistoryController .ss-tabset .ui-tabs-panel { background: #e6eaed; }
 
 /** -------------------------------------------- Page Settings Controller -------------------------------------------- */
 .cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings .optionset li { white-space: nowrap; padding-top: 8px; }
diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss
index 14b3feba4..afb0c15c3 100644
--- a/admin/scss/_style.scss
+++ b/admin/scss/_style.scss
@@ -185,7 +185,51 @@ body.cms {
 				}
 			}
 		}
-	}		
+	}
+
+	.cms-content-fields .ui-tabs-nav {
+		border-bottom: none;
+		float: right;
+		margin: $grid-y 0 -1px 0;
+		padding: 0 $grid-x*3 0 0;
+
+		li {
+			float: left;
+
+			a {
+				font-weight: bold;
+				line-height: $grid-y * 2;
+				padding: $grid-y $grid-x*2.5 $grid-y;
+			}
+		}
+		.ui-state-default,
+		.ui-widget-content .ui-state-default,
+		.ui-widget-header .ui-state-default {
+			border:1px solid $color-button-generic-border;
+		}
+		.ui-state-active,
+		.ui-widget-content .ui-state-active,
+		.ui-widget-header .ui-state-active {
+			padding-bottom:1px;
+			background: $tab-panel-texture-background;
+			border:1px solid $color-button-generic-border;
+		}
+	}
+
+	.ss-tabset {
+		.ss-tabset {
+			position: static;
+		}
+
+		.ui-tabs-panel {
+			border-top:1px solid $color-button-generic-border;
+			clear: both;
+		}
+
+		&.ss-tabset-tabshidden .ui-tabs-panel {
+			border-top: none;
+		}
+	}
 }
 
 /** --------------------------------------------
@@ -1780,54 +1824,22 @@ form.import-form {
 .cms-container {
 	.CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController {
 		// Fix pixel gap between nav tree and main page header
-	 	margin-left: -1px; // Removed to close gap far right of right tabs?
-	 	//Styling of tabs on page edit
-	 	.cms-edit-form {
-	 		background:darken($color-widget-bg, 2%);
-	 		
+		margin-left: -1px; // Removed to close gap far right of right tabs?
+
+		.cms-edit-form {
+			background:darken($color-widget-bg, 2%);
+
 			.ui-tabs-nav {
-				border-bottom: none;
-				float: right;
-				margin: $grid-y 0 -1px 0;
-				padding: 0 $grid-x*3 0 0;
-				
-				li {
-					float: left;
-					
-					a {
-						font-weight: bold;
-						line-height: $grid-y * 2;
-						padding: $grid-y $grid-x*2.5 $grid-y;
-					}
-				}
-				.ui-state-default,
-				.ui-widget-content .ui-state-default,
-				.ui-widget-header .ui-state-default {
-					border:1px solid $color-button-generic-border;
-				}
 				.ui-state-active,
 				.ui-widget-content .ui-state-active,
 				.ui-widget-header .ui-state-active {
-					padding-bottom:1px;
 					background:darken($color-widget-bg, 2%);
-					border:1px solid $color-button-generic-border;
 				}
 			}
 		}
-		.ss-tabset {
-			.ss-tabset {
-				position: static;
-			}
 
-			.ui-tabs-panel {
-				background: darken($color-widget-bg, 2%);
-				border-top:1px solid $color-button-generic-border;
-				clear: both;
-			}
-
-			&.ss-tabset-tabshidden .ui-tabs-panel {
-				border-top: none;
-			}
+		.ss-tabset .ui-tabs-panel {
+			background: darken($color-widget-bg, 2%);
 		}
 	}
 }
diff --git a/admin/templates/CMSTabSet.ss b/admin/templates/CMSTabSet.ss
index 292e84f8b..f5e96d091 100644
--- a/admin/templates/CMSTabSet.ss
+++ b/admin/templates/CMSTabSet.ss
@@ -2,14 +2,14 @@
 	<%-- Tab nav is rendered in CMSEditForm.ss --%>
 
 	<% loop Tabs %>
-	<div $AttributesHTML>
-	<% if Tabs %>
-		$FieldHolder
-	<% else %>
-		<% loop Fields %>
-		$FieldHolder
-		<% end_loop %>
-	<% end_if %>
-	</div>
+		<% if Tabs %>
+			$FieldHolder
+		<% else %>
+			<div $AttributesHTML>
+				<% loop Fields %>
+					$FieldHolder
+				<% end_loop %>
+			</div>
+		<% end_if %>
 	<% end_loop %>
 </div>
diff --git a/admin/templates/Includes/LeftAndMain_EditForm.ss b/admin/templates/Includes/LeftAndMain_EditForm.ss
index 4c38af29c..8c6d75c9c 100644
--- a/admin/templates/Includes/LeftAndMain_EditForm.ss
+++ b/admin/templates/Includes/LeftAndMain_EditForm.ss
@@ -29,7 +29,7 @@
 		$EditFormTools
 	<% end_with %>
 	
-	<div class="cms-content-fields center cms-panel-padded">
+	<div class="cms-content-fields center <% if not $Fields.hasTabset %>cms-panel-padded<% end_if %>">
 		<% if Message %>
 		<p id="{$FormName}_error" class="message $MessageType">$Message</p>
 		<% else %>