Fixed panel spacing regressions from 544d2eb6

Specifically, the change removed the "add page" panel padding,
because it moved padding from .cms-panel-padded into
commonly contained elements, like .ui-tabs-panel.
Apart from breaking layouts, it makes the class meaningless,
since its only padded depending on which elements it contains.

In order to rectify some introduced inconsistencies,
much too complex were required, e.g.
.ui-tabs .cms-edit-form, .ui-tabs .cms-content-fields {...}.

admin/css/screen.css

@@ -371,10 +371,10 @@ body.cms { overflow: hidden; }
 /** -------------------------------------------- Tabs -------------------------------------------- */
 .ui-tabs { padding: 0; background: none; }
 .ui-tabs .ui-tabs { position: static; }
-.ui-tabs .ui-tabs-panel { padding: 8px 0; background: transparent; border: 0; }
+.ui-tabs .ui-tabs-panel { padding: 16px; background: transparent; border: 0; }
 .ui-tabs .ui-tabs-panel.cms-edit-form { padding: 0; }
 .ui-tabs .ui-widget-header { border: 0; background: none; }
-.ui-tabs .ui-tabs-nav { float: right; margin: 0 0 -1px 0; padding: 0 12px 0 0; border-bottom: none; }
+.ui-tabs .ui-tabs-nav { float: right; margin: 16px 0 -1px 0; padding: 0 12px 0 0; border-bottom: none; }
 .ui-tabs .ui-tabs-nav ~ .ui-tabs-panel { border-top: 1px solid #c0c0c2; clear: both; }
 .ui-tabs .ui-tabs-nav li { top: 0; float: left; border-bottom: 0 !important; }
 .ui-tabs .ui-tabs-nav li a { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; float: none; font-weight: bold; color: #444444; line-height: 32px; padding: 0 16px 0; }
@@ -396,20 +396,13 @@ body.cms { overflow: hidden; }
 .ui-tabs .ui-tabs-nav li.cms-tabset-icon.gallery.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -54px no-repeat; }
 .ui-tabs .ui-tabs-nav li.cms-tabset-icon.edit.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -404px no-repeat; }
 .ui-tabs .ui-tabs-nav li.cms-tabset-icon.search.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -104px no-repeat; }
-.ui-tabs .cms-edit-form, .ui-tabs .cms-content-fields { /*not sure if .cms-content-fields effects other areas*/ }
+.ui-tabs .cms-panel-padded .ui-tabs-panel { padding: 0; }
-.ui-tabs .cms-edit-form .cms-panel-padded, .ui-tabs .cms-content-fields .cms-panel-padded { /* Has padded area inside it */ padding: 0; margin: 0; }
-.ui-tabs .cms-edit-form .ui-tabs-panel, .ui-tabs .cms-edit-form .ss-gridfield, .ui-tabs .cms-content-fields .ui-tabs-panel, .ui-tabs .cms-content-fields .ss-gridfield { margin: 12px; padding: 0 0 12px; }
-.ui-tabs .cms-edit-form .ui-tabs-panel .ss-gridfield, .ui-tabs .cms-edit-form .ss-gridfield .ss-gridfield, .ui-tabs .cms-content-fields .ui-tabs-panel .ss-gridfield, .ui-tabs .cms-content-fields .ss-gridfield .ss-gridfield { /* Files area & inside second level tabs */ padding: 0; /* should be zero ideally */ margin: 0 0 12px; }
-.ui-tabs .cms-edit-form .ui-tabs-nav, .ui-tabs .cms-content-fields .ui-tabs-nav { margin: 10px 12px 0; padding: 0 8px 0 0; /* second set of tabs */ }
-.ui-tabs .cms-edit-form #tree_actions .ui-tabs-nav, .ui-tabs .cms-content-fields #tree_actions .ui-tabs-nav { margin: 0; }
-.ui-tabs .cms-panel-padded h3 { margin-left: 12px; /* reports headers, probably too specific */ }
-.ui-tabs .cms-panel-padded .ui-tabs-panel { margin: 0; padding: 12px 12px 12px; }
 .ui-tabs .cms-panel-padded .ui-tabs-panel .ui-tabs-panel { padding: 8px 0 0 0; }
-.ui-tabs .ui-tabs .ui-tabs-panel { /* second level tabs */ padding-top: 8px; }
+.ui-tabs .cms-panel-padded .Actions { padding: 0; }
 .ui-tabs.ss-tabset-tabshidden .ui-tabs-panel { border-top: none; }
 
 /** Primary styles which sit on top of screen, with different tab colors. TODO Only use one "primary" selector and fix HTMLEditorField TabSet addExtraClass() */
-.ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .cms-content-header-tabs .ui-tabs-nav { border-left: 1px solid #b3b3b3; float: none; }
+.ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .cms-content-header-tabs .ui-tabs-nav { margin-top: 0; border-left: 1px solid #b3b3b3; float: none; }
 .ui-tabs.cms-tabset-primary .ui-tabs-nav li, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary li, .ui-tabs .cms-content-header-tabs .ui-tabs-nav li { margin-right: 0; margin-top: 0; }
 .ui-tabs.cms-tabset-primary .ui-tabs-nav li a, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary li a, .ui-tabs .cms-content-header-tabs .ui-tabs-nav li a { margin: 0; line-height: 39px; }
 .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-all, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-top, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-right, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-tr, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-tl, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-all, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-top, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-right, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-tr, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-tl, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-right, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-tr, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-tl { border-radius: 0; }
@@ -442,7 +435,8 @@ body.cms { overflow: hidden; }
 .message.good { background-color: #eaf6e4; border-color: #72c34b; }
 .message p { margin: 0; }
 
-p.message { margin-bottom: 12px; }
+.cms-edit-form .message { margin: 16px; }
+.cms-edit-form .ui-tabs-panel .message { margin: 0 0 16px 0; }
 
 /** -------------------------------------------- Page icons -------------------------------------------- */
 .page-icon, a .jstree-pageicon { display: block; width: 16px; height: 16px; background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat; }
@@ -492,7 +486,7 @@ p.message { margin-bottom: 12px; }
 .cms-content-tools { background: #eceff1; width: 200px; overflow-y: auto; overflow-x: hidden; z-index: 70; border-right: 1px solid #c0c0c2; -webkit-box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); -moz-box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); float: left; position: relative; }
 .cms-content-tools.filter { padding: 0 !important; }
 .cms-content-tools .cms-panel-header { clear: both; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid #d0d3d5; -webkit-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -moz-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -o-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); }
-.cms-content-tools .cms-panel-content { width: 184px; padding: 8px 8px 0; overflow: auto; height: 100%; }
+.cms-content-tools .cms-panel-content { width: 184px; padding: 16px 8px 0; overflow: auto; height: 100%; }
 .cms-content-tools .cms-panel-content .Actions .ss-ui-action-constructive { margin-right: 5px; }
 .cms-content-tools .cms-content-header { background-color: #748d9d; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc0OGQ5ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #748d9d)); background-image: -webkit-linear-gradient(#b0bec7, #748d9d); background-image: -moz-linear-gradient(#b0bec7, #748d9d); background-image: -o-linear-gradient(#b0bec7, #748d9d); background-image: linear-gradient(#b0bec7, #748d9d); }
 .cms-content-tools .cms-content-header h2 { text-shadow: #5c7382 -1px -1px 0; width: 176px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
@@ -538,7 +532,7 @@ p.message { margin-bottom: 12px; }
 /** -------------------------------------------- Member Profile -------------------------------------------- */
 form.member-profile-form { padding: 0 16px 0 0; }
 form.member-profile-form #Root_Permissions { clear: both; border-top: 1px solid #a6a6a6; }
-form.member-profile-form #Root_Main { clear: both; border-top: 1px solid #a6a6a6; padding-top: 16px; }
+form.member-profile-form #Root_Main { clear: both; border-top: 1px solid #a6a6a6; }
 form.member-profile-form #Root_Main .cms-help-toggle { text-indent: -9999em; display: inline-block; width: 20px; background: url(../images/question.png) no-repeat 0px 0px; }
 form.member-profile-form #FavouritePageID { margin-top: 8px; }
 form.member-profile-form #CsvFile .middleColumn { background: none !important; }
@@ -595,6 +589,8 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto;
 .cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; }
 .cms-panel .collapsed-flyout li a span { display: block !important; }
 
+.cms .cms-panel-padded { padding: 16px 16px; margin: 0; }
+
 /** ------------------------------------------------------------------
 * Dialog
 * 

admin/scss/_style.scss

@@ -159,7 +159,7 @@ body.cms {
 	}
 
 	.ui-tabs-panel {
-		padding: $grid-x 0;
+		padding: $grid-x*2;
 		background: transparent; // default it's white
 		border: 0; // suppress default borders
 		&.cms-edit-form {
@@ -174,7 +174,7 @@ body.cms {
 
 	.ui-tabs-nav {
 		float: right;
-		margin: 0 0 -1px 0;
+		margin: $grid-x*2 0 -1px 0;
 		padding: 0 $grid-x*1.5 0 0;
 		border-bottom: none;
 
@@ -250,43 +250,17 @@ body.cms {
 		}
 	}
 
-	.cms-edit-form, .cms-content-fields { /*not sure if .cms-content-fields effects other areas*/
-		.cms-panel-padded { /* Has padded area inside it */
-			padding: 0;
-			margin: 0;	
-		}
-		.ui-tabs-panel, .ss-gridfield  {
-			margin: 12px;
-			padding: 0 0 12px;
-			.ss-gridfield { 						/* Files area & inside second level tabs */
-				padding: 0; 						/* should be zero ideally */
-				margin: 0 0 12px;
-			}
-		}
-		.ui-tabs-nav {
-			margin: 10px 12px 0;
-			padding: 0 8px 0 0;						/* second set of tabs */
-		}
-		#tree_actions .ui-tabs-nav{
-			margin: 0;
-		}
-	}
-
 	.cms-panel-padded {
-		h3 {
-			margin-left: 12px;						/* reports headers, probably too specific */
-		}
 		.ui-tabs-panel {
-			margin: 0;
+			padding: 0; // Avoid double padding with parent
-			padding: 12px 12px 12px;
 
 			.ui-tabs-panel {
 				padding: $grid-x 0 0 0;
 			}
 		}
+		.Actions {
+			padding: 0; // Avoid double padding with parent
 		}
-	.ui-tabs .ui-tabs-panel {						/* second level tabs */
-		padding-top: 8px;
 	}
 
 	&.ss-tabset-tabshidden .ui-tabs-panel {
@@ -301,6 +275,7 @@ body.cms {
 .ui-tabs.cms-tabset-primary .ui-tabs-nav, 
 .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, 
 .ui-tabs .cms-content-header-tabs .ui-tabs-nav {
+	margin-top: 0;
 	border-left: 1px solid darken($color-tab, 15%);
 	float: none; // parent container is already right floated
 
@@ -483,8 +458,17 @@ body.cms {
 		margin: 0;
 	}
 }
-p.message {
+
-	margin-bottom: $grid-y*1.5;
+
+.cms-edit-form {
+	.message {
+		margin: $grid-x*2; // TODO Remove double padding when adjacent to a padded tabs panel
+	}
+	.ui-tabs-panel {
+		.message {
+			margin: 0 0 $grid-x*2 0; // gets padding from tab panel
+		}	
+	}
 }
 
 /** --------------------------------------------
@@ -704,7 +688,7 @@ p.message {
 	
 	.cms-panel-content {
 		width: ($grid-x * 23);
-		padding: $grid-x $grid-x 0;
+		padding: $grid-x*2 $grid-x 0; // smaller left/right padding to use space efficiently
 		overflow: auto;
 		height:100%;
 
@@ -924,7 +908,6 @@ form.member-profile-form {
 	#Root_Main {
 		clear:both;
 		border-top: 1px solid darken($color-tab, 20%);
-		padding-top:$grid-y*2;
 		.cms-help-toggle {
 			text-indent: -9999em;
 			display: inline-block;
@@ -1210,6 +1193,13 @@ form.member-profile-form {
 	}
 }
 
+.cms {
+	.cms-panel-padded {
+		padding: $grid-y*2 $grid-x*2;
+		margin:0;
+	}
+}
+
 /** ------------------------------------------------------------------
 * Dialog
 * 

css/AssetUploadField.css

@@ -12,7 +12,7 @@ Used in side panels and action tabs
 */
 .ss-uploadfield-view-allowed-extensions { padding-top: 20px; clear: both; max-width: 750px; display: block; }
 
-#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 12px; }
+#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
 
 .backlink { padding-left: 12px; }
 

scss/AssetUploadField.scss

@@ -17,7 +17,6 @@
 #AssetUploadField {
 	border-bottom: 0;
 	@include box-shadow(none);
-	padding: 12px;
 }
 .backlink {
 	padding-left: 12px;