Refactored class names, split out campaign specific elements, hide campaign links

admin/client/src/components/ListGroup/ListGroup.scss

@@ -1,5 +1,4 @@
 // List-group, based on Bootstraps list-group
-// TODO split out campaign specific css from generic list-group
 
 .list-group {
   margin-left: -$spacer-y;
@@ -18,25 +17,15 @@
 	&:first-child {
 		border-top: none;
 	}
+
 	&:hover {
 		text-decoration: none;
-
-		.list-group-item--has-links {
-			display: block;
-			opacity: 1;
-		}
   }
 
 	&.active {
 		background-color: $brand-primary;
 		color: #FFF;
 		opacity: 1;
-
-		.list-group-item--has-links,
-		.list-group-item__status {
-			color: #FFF;
-			opacity: 1;
-		}
 	}
 }
 
@@ -56,41 +45,41 @@
 	margin: -12px 12px 0 -$spacer-y;
 }
 
-// Show linked items
-.list-group-item--has-links,
-.list-group-item--is-linked {
-	color: $brand-primary;
-	float: right;
-	font-size: $font-size-sm;
-	position: absolute;
-	right: $spacer-y;
-	top: 27px;
+.list-group-item__info {
   opacity: 0;
+  display: block;
   transition: opacity .2s ease-in-out;
-
-	.font-icon-link {
-		font-size: 16px;
-		position: relative;
-		top: 3px;
-		margin-right: 1px;
-	}
 }
 
-.list-group-item--published {
+// Temp off for Alpha1
+.list-group-item:hover .list-group-item__info,
+.list-group-item.active .list-group-item__info {
+  opacity: 0;
+}
+
+.list-group-item--inactive {
   opacity: .6;
 	transition: opacity .2s ease-in-out;
 
-	.list-group-item__status {
-		opacity: 0;
-		transition: opacity .2s ease-in-out;
-	}
-
   &:hover {
 		opacity: 1;
+	}
+}
 
 .list-group-item__status {
   display: inline-block;
+  transition: opacity .2s ease-in-out;
+}
+
+.list-group-item.active .list-group-item__status {
+	color: #FFF;
 	opacity: 1;
 }
+
+.list-group-item--inactive .list-group-item__status {
+  opacity: 0;
 }
+
+.list-group-item--inactive:hover .list-group-item__status {
+	opacity: 1;
 }

admin/client/src/containers/CampaignAdmin/CampaignAdmin.scss

@@ -0,0 +1,17 @@
+// Campaign items which have linked assications
+.campaign-admin__item-links--has-links,
+.campaign-admin__item-links--is-linked {
+	color: $brand-primary;
+	float: right;
+	position: absolute;
+	right: $spacer-y;
+	top: 27px;
+  font-size: $font-size-sm;
+
+	&::before {
+		font-size: 16px;
+		position: relative;
+		top: 3px;
+		margin-right: 1px;
+	}
+}

admin/client/src/containers/CampaignAdmin/CampaignAdminItem.js

@@ -41,10 +41,9 @@ class CampaignAdminItem extends SilverStripeComponent {
 
     // Linked items
     let links = (
-      <span className="list-group-item--has-links">
-        <i className="font-icon-link" />
-        3 linked items
-      </span>
+      <span
+        className="list-group-item__info campaign-admin__item-links--has-links font-icon-link"
+      >3 linked items</span>
     );
 
     // Thumbnail
@@ -60,7 +59,9 @@ class CampaignAdminItem extends SilverStripeComponent {
       <div>
         {thumbnail}
         <h4 className="list-group-item-heading">{item.Title}</h4>
-        <span className="list-group-item--is-linked"><i className="font-icon-link"></i></span>
+        <span
+          className="list-group-item__info campaign-admin__item-links--is-linked font-icon-link"
+        ></span>
         {links}
         {badge.className && badge.Title &&
           <span className={badge.className}>{badge.Title}</span>

admin/client/src/containers/CampaignAdmin/CampaignAdminList.js

@@ -81,7 +81,7 @@ class CampaignAdminList extends SilverStripeComponent {
         // Add extra css class for published items
         const itemClassNames = [];
         if (item.ChangeType === 'none' || campaign.State === 'published') {
-          itemClassNames.push('list-group-item--published');
+          itemClassNames.push('list-group-item--inactive');
         }
         if (selected) {
           itemClassNames.push('active');

admin/client/src/styles/bundle.scss

@@ -40,3 +40,4 @@
 
 // Layout and sections
 @import "layout";
+@import "../containers/CampaignAdmin/CampaignAdmin";