studio - adding in view-based banners UI tweaks and removing global banner UI for now

cms/static/sass/_cms_mixins.scss

@@ -185,14 +185,14 @@
 // button - grey dark
 @mixin dark-grey-button {
 	@include button;
-	border: 1px solid #1c1e20;
+	border: 1px solid $gray-d2;
 	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $extraDarkGrey;
+	background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $gray-d1;
 	box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
 	color: $white;
 
 	&:hover {
-		background-color: #595f64;
+		background-color: $gray-d4;
 		color: $white;
 	}
 }

cms/static/sass/elements/_alerts.scss

@@ -2,13 +2,19 @@
 // ====================
 
 // shared
-.wrapper-notification, .wrapper-alert, .prompt {
+.wrapper-notification, .wrapper-alert, .prompt, .wrapper-banner {
   @include box-sizing(border-box);
+
+  .copy {
+    @include font-size(13);
+  }
+}
+
+.wrapper-notification, .wrapper-alert, .prompt {
   background: $gray-d3;
   border-top: 4px solid $gray-d4;
 
   .copy {
-    @include font-size(13);
     color: $gray-l2;
 
     .title {
@@ -24,7 +30,7 @@
   }
 }
 
-.alert, .notification, .prompt {
+.alert, .notification, .prompt, .banner {
 
   // types - confirm
   &.confirm {
@@ -226,6 +232,8 @@
   }
 }
 
+// ====================
+
 // notifications
 .wrapper-notification {
   @include clearfix();
@@ -595,6 +603,137 @@
   }
 }
 
+// ====================
+
+// banners
+.wrapper-banner {
+  width: 100%;
+  padding: $baseline;
+
+  .banner {
+    @include box-sizing(border-box);
+    @include clearfix();
+    margin: 0 auto;
+    width: flex-grid(12);
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;    
+
+    .icon, .copy {
+      float: left;
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .icon {
+      @include transition (color 0.5s ease-in-out);
+      @include font-size(18);
+      width: flex-grid(1, 12);
+      margin-right: flex-gutter();
+      text-align: right;
+    }
+
+    .copy {
+      @include font-size(13);
+      width: flex-grid(10, 12);
+
+
+      .title {
+        margin-bottom: 0;
+      }
+    }
+
+    // with actions
+    &.has-actions {
+
+      .copy {
+        width: flex-grid(8, 12);
+        margin-right: flex-gutter();
+      }
+
+      .nav-actions {
+        width: flex-grid(4, 12);
+        float: right;
+        margin-top: ($baseline/2);
+        text-align: right;
+
+        .nav-item {
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: ($baseline/2);
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          .action-primary {
+
+          }
+
+          .action-secondary {
+            @include font-size(13);
+          }
+        }
+      }
+    }
+
+    // has hidden actions
+    &.actions-are-hidden {
+      
+      .nav-actions {
+        @include transition(opacity 0.25s ease-in-out);
+        opacity: 0.0;
+      }
+
+      &:hover {
+        
+        .nav-actions {
+          opacity: 1.0;
+        }
+      }
+    }
+  }
+}
+
+// view banner
+.wrapper-banner-view {
+  @include linear-gradient($gray-l2 0%, $gray-l4 2%, $gray-l4 98%, $gray-l2 100%);
+  margin-top: -($baseline*1.5);
+  margin-bottom: $baseline;
+
+  .banner {
+
+    .copy {
+      margin-top: ($baseline/4);
+      color: $gray-d2;
+    }
+
+    &.has-actions {
+
+      .nav-actions {
+        margin-top: 0;
+
+        .action-primary {
+          @include dark-grey-button();
+          @include font-size(12);
+        }
+      }
+    }
+  }
+}
+
+// view banner - course note
+.banner.coursenote {
+
+  .copy {
+
+    .link-course {
+      margin-left: ($baseline/4);
+    }
+  }
+}
+
+// ====================
+
 // js enabled
 .js {
 
@@ -608,7 +747,7 @@
     }
   }
 
-  // prompt showing
+  // prompt showing/hiding
   &.prompt-is-shown {
 
     .wrapper-view {
@@ -627,6 +766,7 @@
     }
   }
 
+  // alert showing/hiding
   .wrapper-alert {
     display: none;
 
@@ -635,6 +775,7 @@
     }
   }
 
+  // notification showing/hiding
   .wrapper-notification {
     bottom: -($notification-height);
 
@@ -651,8 +792,19 @@
       @include anim-notificationsSlideUpDown(2s);
     }
   }
+
+  // banner showing/hiding
+  .wrapper-banner {
+    display: none;
+
+    &.is-shown {
+      display: block;
+    }
+  }
 }
 
+// ====================
+
 // temporary
 body.uxdesign.alerts {
 
@@ -667,6 +819,14 @@ body.uxdesign.alerts {
     margin-right: flex-gutter();
     padding: $baseline ($baseline*1.5);
 
+    > section {
+      margin-bottom: ($baseline*2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
     ul {
 
       li {

cms/templates/base.html

@@ -53,14 +53,17 @@
     </script>
 
     <!-- view -->
-    <div class="wrapper wrapper-view">    
+    <div class="wrapper wrapper-view">
       <%include file="widgets/header.html" />
 
       <%block name="view_alerts"></%block>
+      <%block name="view_banners"></%block>
 
       <%block name="content"></%block>
+      
       <%include file="widgets/footer.html" />
       <%include file="widgets/tender.html" />
+      
       <%block name="view_notifications"></%block>
     </div>
 

cms/templates/overview.html

@@ -217,3 +217,24 @@
   </div>
   <footer></footer>
 </%block>
+
+<%block name="view_banners">
+<!-- banner - view - coursenote -->
+<div class="wrapper wrapper-banner wrapper-banner-view wrapper-banner-view-coursenote is-shown" id="banner-coursenote">
+  <div class="banner coursenote has-actions actions-are-hidden">
+    <div class="copy">
+      <h2 class="title title-3 sr">Share Your Course</h2>
+      <p>Students can enroll in ${context_course.display_name_with_default} at: <a href="http://edge.edx.org/org/courseno/coursename" rel="lms" class="link-course">http://edge.edx.org/org/courseno/coursename</a></p>
+    </div>
+
+    <nav class="nav-actions">
+      <h3 class="sr">Banner Actions</h3>
+      <ul>
+        <li class="nav-item">
+          <a href="#" class="action-primary">Send an invitation</a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>
+</%block>
\ No newline at end of file