Fixed nested tab styling in other CMS interfaces.

silverstripe · Jul 6, 2012 · 2a9a4be · 2a9a4be
1 parent 7ff2a79
commit 2a9a4be
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 58 deletions.
diff --git a/admin/css/screen.css b/admin/css/screen.css
diff --git 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?
+		margin-left: -1px; // Removed to close gap far right of right tabs?
-	 	//Styling of tabs on page edit
+
-	 	.cms-edit-form {
+		.cms-edit-form {
-	 		background:darken($color-widget-bg, 2%);
+			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 {
+		.ss-tabset .ui-tabs-panel {
-				background: darken($color-widget-bg, 2%);
+			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;
-			}
 		}
 	}
 }

diff --git 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 %>
-	<% if Tabs %>
+			$FieldHolder
-		$FieldHolder
+		<% else %>
-	<% else %>
+			<div $AttributesHTML>
-		<% loop Fields %>
+				<% loop Fields %>
-		$FieldHolder
+					$FieldHolder
-		<% end_loop %>
+				<% end_loop %>
-	<% end_if %>
+			</div>
-	</div>
+		<% end_if %>
 	<% end_loop %>
 </div>
diff --git 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 %>