From 74454a755766ef90edf895d0d075970f9bc7b5cd Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Tue, 5 Apr 2016 11:37:45 +1200
Subject: [PATCH] CMS layout changes

Panel adjustments to south and site tree collapsed so that everything
aligns.

Start of bootstrap tab styles

Fix for pages batch action alignment issue
---
 admin/scss/_menu.scss  | 11 +++++---
 admin/scss/_style.scss | 60 ++++++++++++++++++++++++++++++------------
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss
index 49497e04d..db55786ac 100644
--- a/admin/scss/_menu.scss
+++ b/admin/scss/_menu.scss
@@ -93,6 +93,8 @@
 	
 	.cms-menu-list {
 		margin: $grid-y * 1.5 0 0 0;
+		list-style-type: none;
+		padding-left: 0;
 	}
 
 	a {
@@ -106,7 +108,8 @@
 		position: relative !important;
 		top:auto !important;
 		left:auto !important;
-		box-shadow: inset #C1C7CC -1px 0 0
+		box-shadow: inset #C1C7CC -1px 0 0;
+		min-height: calc(100% - 104px);
 	}
 
 	&.collapsed {
@@ -169,14 +172,14 @@
 	}
 
 	.cms-panel-toggle {
-		height: 52px;
+		height: 53px;
 
 		a,
 		a.toggle-expand {
 			float: right;
 			width: 50%;
-			padding-top: 16px;
-			padding-bottom: 16px;
+			padding-top: 13px;
+			padding-bottom: 13px;
 		}
 	}
 
diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss
index 504d0d2c7..6b96373ce 100644
--- a/admin/scss/_style.scss
+++ b/admin/scss/_style.scss
@@ -172,8 +172,8 @@ body.cms {
 	.cms-content-header.north {
 		&.collapsed {
 			.cms-content-header-info {
-				width: 40px;
-				text-align: right;
+				width: 60px;
+				text-align: center;
 				padding-left: 8px;
 				padding-right: 8px;
 			}
@@ -184,7 +184,7 @@ body.cms {
 			}
 
 			.cms-content-header-nav {
-				margin-left: 40px;
+				margin-left: 61px;
 			}
 		}
 	}
@@ -223,7 +223,7 @@ body.cms {
 	.breadcrumbs-wrapper {
 		float: left;
 		padding-top: $grid-y - 1;
-		padding-left: $grid-x*1.5;
+		padding-left: $grid-x*2;
 	}
 
 	.cms-content-header-tabs {
@@ -247,10 +247,6 @@ body.cms {
 			padding-top: 0;
 			overflow-x: hidden;
 		}
-
-		.cms-panel-toggle.south {
-			box-shadow: inset 0 1px 0 0 $color-light-separator;
-		}
 	}
 }
 
@@ -603,6 +599,35 @@ body.cms {
 	}
 }
 
+/**
+ * SilverStripe 4 tabs.
+ * Tab styles built on top of Bootstrap 4 tab functionality
+ */
+
+.nav-tabs {
+	margin-bottom: 20px;
+
+	.nav-item {
+
+	}
+
+	.nav-link {
+		margin-right: 4px;
+		color: $body-color-light;
+
+		&:hover {
+			text-decoration: none;
+			background: transparent;
+		}
+
+		&.active,
+		&.active:hover {
+			border-bottom: 2px solid $body-color;
+			color: $body-color;
+		}
+	}
+}
+
 /**
  * Primary styles which sit on top of screen, with different tab colors.
  * TODO Only use one "primary" selector and fix HTMLEditorField TabSet addExtraClass()
@@ -1316,14 +1341,14 @@ body.cms {
 
 	.Actions {
 		display: inline-block;
+		padding: 0;
+		margin-left: -4px;
+		min-height: auto;
 
 		// Context specific rules for when batch actions are in the SiteTree panel.
 		.cms-content-tools & {
 			width: 16%;
 		}
-
-		padding: 0;
-		margin-left: -4px;
 	}
 
 	.action {
@@ -1515,16 +1540,17 @@ form.member-profile-form {
 
 	.cms-panel-toggle {
 		&.south {
-			box-shadow: inset #C1C7CC -1px 1px 0;
+			box-shadow: inset $color-light-separator 0 1px 0; // #C1C7CC
 			position: absolute;
 			bottom: 0;
 			width: 100%;
+			min-height: 53px;
 		}
 
 		a {
 			display: block;
 			text-align: right;
-			padding: $grid-y * 2 0;
+			padding: 13px 0;
 			width: 100%;
 			text-decoration: none;
 			line-height: 20px;
@@ -1538,7 +1564,7 @@ form.member-profile-form {
 			}
 
 			&.toggle-expand {
-				width: 40px; // will set the collapsed width
+				width: 60px; // will set the collapsed width
 				display: none;
 			}
 		}
@@ -1563,7 +1589,7 @@ form.member-profile-form {
 
 	&#cms-content-tools-CMSPageEditController {
 		.cms-panel-content-collapsed {
-			width: 40px;
+			width: 60px;
 			display: none; // Avoids FOUC
 
 			h2, h3 {
@@ -1583,14 +1609,14 @@ form.member-profile-form {
 	}
 
 	.cms-panel-content-collapsed {
-		width: 40px;
+		width: 60px;
 		display: none; // Avoids FOUC
 		height: calc(100% - 52px);
 		overflow: hidden;
 
 		h2, h3 {
 			border-bottom: 0;
-			margin-left: $grid-y;
+			margin-left: 18px;
 			transform-origin: bottom right;
 			transform: rotate(270deg);
 		}