finished styling for static tabs; required some rework of global styles

cms/static/sass/_base.scss

@@ -352,4 +352,19 @@ body.show-wip {
     &.big {
         display: block;
     }
+}
+
+.edit-button.standard,
+.delete-button.standard {
+  float: left;
+  @include white-button;
+  padding: 3px 10px 4px;
+  margin-left: 7px;
+  font-size: 12px;
+  font-weight: 400;
+
+  .edit-icon,
+  .delete-icon {
+    margin-right: 4px;
+  }
 }

cms/static/sass/_cms_mixins.scss

@@ -48,18 +48,18 @@
 }
 
 @mixin white-button {
-	@include button;
-	border: 1px solid $darkGrey;
-	border-radius: 3px;
-	@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%);
-	background-color: #dfe5eb;
-	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-	color: #5d6779;
+  @include button;
+  border: 1px solid $darkGrey;
+  border-radius: 3px;
+  @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+  background-color: #dfe5eb;
+  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
+  color: #778192;
 
-	&:hover {
-		background-color: #f2f6f9;
-		color: #5d6779;
-	}
+  &:hover {
+    background-color: #f2f6f9;
+    color: #778192;
+  }
 }
 
 @mixin orange-button {

cms/static/sass/_static-pages.scss

@@ -11,14 +11,29 @@
   }
 
   .components > li {
-    margin: 20px 0;
+    margin: 0;
+    border-radius: 0;
+
+    &.new-component-item {
+      margin-top: 20px;
+    }
   }
 
   .component {
-    border: none;
+    border: 1px solid $mediumGrey;
+    border-top: none;
+
+    &:first-child {
+      border-top: 1px solid $mediumGrey;
+    }
 
     &:hover {
-      border: none;
+      border: 1px solid $mediumGrey;
+      border-top: none;
+
+      &:first-child {
+        border-top: 1px solid $mediumGrey;
+      }
 
       .drag-handle {
         background: url(../img/drag-handles.png) center no-repeat $lightGrey;
@@ -42,14 +57,6 @@
       top: 26px;
       right: 44px;
     }
-
-    .edit-button,
-    .delete-button {
-      // @include grey-button;
-      border: none;
-      background: none;
-      color: $darkGrey;
-    }
   }
 
   .component.editing {

cms/static/sass/_unit.scss

@@ -149,12 +149,8 @@
     &:hover {
       border-color: #6696d7;
 
-      .drag-handle,
-      .component-actions a {
-        background-color: $blue;
-      }
-
       .drag-handle {
+        background-color: $blue;
         border-color: $blue;
       }
     }
@@ -174,31 +170,12 @@
 
     .component-actions {
       position: absolute;
-      top: 4px;
-      right: 4px;
+      top: 7px;
+      right: 9px;
       @include transition(opacity .15s);
-    }
 
-    .edit-button,
-    .delete-button {
-      float: left;
-      padding: 3px 10px 4px;
-      margin-left: 3px;
-      border: 1px solid #fff;
-      border-radius: 3px;
-      background: #d1ddec;
-      font-size: 12px;
-      color: #fff;
-      @include transition(all .15s);
-
-      &:hover {
-        background-color: $blue;
-        color: #fff;
-      }
-
-      .edit-icon,
-      .delete-icon {
-        margin-right: 4px;
+      a {
+        color: $darkGrey;
       }
     }
 

cms/templates/component.html

@@ -6,8 +6,8 @@
   <a href="#" class="cancel-button">Cancel</a>
 </div>
 <div class="component-actions">
-  <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
-  <a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>  
+  <a href="#" class="edit-button standard"><span class="edit-icon"></span>Edit</a>
+  <a href="#" class="delete-button standard"><span class="delete-icon"></span>Delete</a>  
 </div>
 <a href="#" class="drag-handle"></a>
 ${preview}