From 75b2c7c36091de6307556430087b6a37d53fed37 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Mon, 18 Apr 2016 23:38:59 +1200
Subject: [PATCH] BEM notation corrections, use Bootstrap vars

See comments on https://github.com/silverstripe/silverstripe-framework/pull/5317
---
 .../src/components/accordion/styles.scss      | 14 ++++----
 .../src/components/north-header/styles.scss   | 36 ++++++++++---------
 .../src/sections/campaign-admin/controller.js |  3 ++
 .../src/sections/campaign-admin/item.js       |  4 +--
 .../src/sections/campaign-admin/styles.scss   | 10 +++---
 5 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/admin/javascript/src/components/accordion/styles.scss b/admin/javascript/src/components/accordion/styles.scss
index 99a939f69..aa09c1a3a 100644
--- a/admin/javascript/src/components/accordion/styles.scss
+++ b/admin/javascript/src/components/accordion/styles.scss
@@ -7,19 +7,19 @@
 
 		a {
 			/* Todo: extend table header */
-			font-size: $font-size-sm; 
-			line-height: $line-height-base; 
-			font-weight: 400; 
-			text-transform: uppercase; 
+			font-size: $font-size-sm;
+			line-height: $line-height-base;
+			font-weight: 400;
+			text-transform: uppercase;
 			padding: $spacer-x*.75 $spacer-y;
 			/* end table header */
-			
+
 			display: block;
 			margin-left: -$spacer-y;
 			margin-right: -$spacer-y;
 			text-decoration: none;
 			position: relative;
-			border-bottom: 1px solid #ddd;
+			border-bottom: 1px solid $gray-lighter;
 			color: $body-color;
 
 			&::before {
@@ -50,4 +50,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/admin/javascript/src/components/north-header/styles.scss b/admin/javascript/src/components/north-header/styles.scss
index 545cf9437..012d1a974 100644
--- a/admin/javascript/src/components/north-header/styles.scss
+++ b/admin/javascript/src/components/north-header/styles.scss
@@ -4,22 +4,24 @@
     width: 100%;
     height: $navbar-total-height;
     z-index: 60;
-    
-    .north-header__navigation {		// Typically to hold breadcrumbs and back button
-    	float: left;
-    	padding: 0 $spacer-y;
-        max-width: 70%;
-        max-height: $navbar-height;
-    }
+}
 
-    .north-header__heading {
-        font-size: $font-size-lg;
-        font-weight: normal;
-        line-height: 20px;
-        width: 100%;
-    }
+// Typically to hold breadcrumbs and back button
+.north-header__navigation {
+    float: left;
+    padding: 0 $spacer-y;
+    max-width: 70%;
+    max-height: $navbar-height;
+}
 
-    .north-header__actions {		// To hold things like search icon and view toggle
-    	
-    }
-}
\ No newline at end of file
+.north-header__heading {
+    font-size: $font-size-lg;
+    font-weight: normal;
+    line-height: 20px;
+    width: 100%;
+}
+
+// To hold things like search icon and view toggle
+.north-header__actions {
+
+}
diff --git a/admin/javascript/src/sections/campaign-admin/controller.js b/admin/javascript/src/sections/campaign-admin/controller.js
index 8c96e8cc0..08921c923 100644
--- a/admin/javascript/src/sections/campaign-admin/controller.js
+++ b/admin/javascript/src/sections/campaign-admin/controller.js
@@ -138,6 +138,9 @@ class CampaignAdminContainer extends SilverStripeComponent {
     return <Component key={props.name} {...props} />;
   }
 
+  /**
+   * @todo Use dynamic breadcrumbs
+   */
   getBreadcrumbs() {
     return [
       {
diff --git a/admin/javascript/src/sections/campaign-admin/item.js b/admin/javascript/src/sections/campaign-admin/item.js
index 80b235609..8a068af81 100644
--- a/admin/javascript/src/sections/campaign-admin/item.js
+++ b/admin/javascript/src/sections/campaign-admin/item.js
@@ -40,7 +40,7 @@ class CampaignItem extends SilverStripeComponent {
 
     // Linked items
     let links = (
-      <span className="list-group-item--haslinks">
+      <span className="list-group-item--has-links">
         <i className="font-icon-link"></i>
         3 linked items
       </span>
@@ -56,7 +56,7 @@ class CampaignItem extends SilverStripeComponent {
       <div>
         {thumbnail}
         <h4 className="list-group-item__heading">{item.Title}</h4>
-        <span className="list-group-item--islinked"><i className="font-icon-link"></i></span>
+        <span className="list-group-item--is-linked"><i className="font-icon-link"></i></span>
         {links}
         {badge.className && badge.Title &&
           <span className={badge.className}>{badge.Title}</span>
diff --git a/admin/javascript/src/sections/campaign-admin/styles.scss b/admin/javascript/src/sections/campaign-admin/styles.scss
index 3f57833e5..9b0010b84 100644
--- a/admin/javascript/src/sections/campaign-admin/styles.scss
+++ b/admin/javascript/src/sections/campaign-admin/styles.scss
@@ -58,8 +58,8 @@
 		}
 
 		// Show linked items
-		&--haslinks,
-		&--islinked {
+		&--has-links,
+		&--is-linked {
 			color: $brand-primary;
 			float: right;
 			font-size: $font-size-sm;
@@ -80,7 +80,7 @@
 		&:hover {
 			text-decoration: none;
 
-			.list-group-item--haslinks {
+			.list-group-item--has-links {
 				display: block;
 				opacity: 1;
 			}
@@ -91,7 +91,7 @@
 			color: #FFF;
 			opacity: 1;
 
-			.list-group-item--haslinks,
+			.list-group-item--has-links,
 			.list-group-item__status {
 				color: #FFF;
 				opacity: 1;
@@ -118,4 +118,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}