visual styling changes to components and static pages in order to use updated…

visual styling changes to components and static pages in order to use updated icon button styling for duplicate and delete actions

cms/static/sass/views/_assets.scss

@@ -325,6 +325,7 @@
     }
   }
 
+  // uses similar styling as assets.scss, static-pages.scss 
   .action-item {
     display: inline-block;
     margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);

cms/static/sass/views/_static-pages.scss

@@ -116,10 +116,66 @@
       }
     }
 
-    .component-actions {
+    // uses similar styling as assets.scss, unit.scss
+    .wrapper-component-action-header {
+      @include box-sizing(border-box);
       position: absolute;
-      top: 20px;
-      right: 44px;
+      width: 100%;
+      padding: $baseline/4 $baseline/2;
+      top: 0;
+      left: 0;
+    }
+
+    .component-header {
+      display: none;
+    }
+
+    .component-actions {
+      display: inline-block;
+      float: right; 
+      margin-right: $baseline*2;
+      padding: 8px 0px;
+      vertical-align: middle;
+      text-align: center;
+
+      .action-item {
+        display: inline-block;
+        margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
+
+        .action-button {
+          @include transition(all $tmg-f2 ease-in-out 0s);
+          display: block;
+          padding: 0 $baseline/2;
+          width: auto;
+          height: ($baseline*1.5);
+          border-radius: 3px;
+          color: $gray-l1;
+
+          &:hover {
+            background-color: $blue;
+            color: $gray-l6;
+          }
+
+          .action-button-text {
+            padding-left: 1px;
+            vertical-align: bottom;
+            line-height: 17px;
+          }
+
+          &.delete-button:hover {
+            background-color: $gray-l1;
+          }
+        }
+
+        [class^="icon-"] {
+          display: inline-block;
+          vertical-align: bottom;
+        }
+
+        &.action-duplicate {
+          display: none;
+        }
+      }
     }
   }
 
@@ -163,10 +219,6 @@
       margin-right: 12px;
     }
   }
-
-  .duplicate-button.standard {
-    display: none;
-  }
 }
 
 .edit-static-page {

cms/static/sass/views/_unit.scss

@@ -867,20 +867,35 @@ body.course.unit,.view-unit {
 // ====================
 
 // Editing Units from Courseware
+//uses similar styling as static-pages.scss
 body.unit {
 
   .component {
     padding-top: 30px;
 
-    .component-actions {
+
+    .wrapper-component-action-header {
       @include box-sizing(border-box);
       position: absolute;
       width: 100%;
-      padding: 15px;
+      padding: $baseline/4 $baseline/2;
       top: 0;
       left: 0;
-      border-bottom: 1px solid $lightBluishGrey2;
-      background: $lightGrey;
+      border-bottom: 1px solid $gray-l4;
+      background: $gray-l5;
+    }
+
+    .component-header {
+      display: inline-block;
+      width: 50%;
+      vertical-align: middle;
+    }
+
+    .component-actions {
+      display: inline-block;
+      float: right;
+      vertical-align: middle;
+      text-align: center; 
     }
 
     &.editing {
@@ -888,6 +903,53 @@ body.unit {
     }
   }
 }
+
+// ====================
+
+// Component Header Actions
+// uses similar styling as assets.scss, static-pages.scss
+
+body.unit {
+
+  .component-actions {
+
+    .action-item {
+      display: inline-block;
+      margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
+
+      .action-button {
+        @include transition(all $tmg-f2 ease-in-out 0s);
+        display: block;
+        padding: 0 $baseline/2;
+        width: auto;
+        height: ($baseline*1.5);
+        border-radius: 3px;
+        color: $gray-l1;
+
+        &:hover {
+          background-color: $blue;
+          color: $gray-l6;
+        }
+
+        .action-button-text {
+          padding-left: 1px;
+          vertical-align: bottom;
+          line-height: 17px;
+        }
+
+        &.delete-button:hover {
+          background-color: $gray-l1;
+        }
+      }
+
+      [class^="icon-"] {
+        display: inline-block;
+        vertical-align: bottom;
+      }
+    }
+  }
+}
+
 // ====================
 
 // Unit Page Sidebar

cms/templates/component.html

@@ -26,11 +26,29 @@
 		</div> <!-- Module Actions-->
   </div>
 </div>
-
-<div class="component-actions">
-  <a href="#" class="edit-button standard"><span class="edit-icon"></span>${_("Edit")}</a>
-  <a href="#" class="duplicate-button standard"><span class="duplicate-icon icon-copy"></span>${_("Duplicate")}</a>
-  <a href="#" class="delete-button standard"><span class="delete-icon"></span>${_("Delete")}</a>
+<div class="wrapper wrapper-component-action-header">
+	<div class="component-header">
+	</div>
+	<ul class="component-actions">
+	  <li class="action-item action-edit">
+	  	<a href="#" class="edit-button action-button">
+	  		<i class="icon-edit"></i>
+	  		<span class="action-button-text">${_("Edit")}</span>
+	  	</a>
+	  </li>
+	  <li class="action-item action-duplicate">
+	  	<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
+	  		<i class="icon-copy"></i>
+	  		<span class="sr">${_("Duplicate this component")}</span>
+	  	</a>
+	  </li>
+	  <li class="action-item action-delete">
+	  	<a href="#" data-tooltip="Delete" class="delete-button action-button">
+	  		<i class="icon-trash"></i>
+	  		<span class="sr">${_("Duplicate this component")}</span>
+	  	</a>
+	  </li>
+	</ul>
 </div>
 <span data-tooltip="${_("Drag to reorder")}" class="drag-handle"></span>
 ${preview}