studio - alerts: firmed up status-based notifications

cms/static/sass/_alerts.scss

@@ -10,20 +10,12 @@
   -webkit-transition: bottom 1.5s ease-in-out 0.25s;
   @include box-shadow(0 -1px 3px $shadow);
   position: fixed;
-  bottom: -1000px;
   z-index: 1000;
   width: 100%;
-  overflow: hidden;
-  opacity: 0;
   border-top: 4px solid $gray-l1;
   padding: ($baseline*0.75) ($baseline*2);
   background: $gray-d3;
 
-  &.is-shown {
-    bottom: 0;
-    opacity: 1.0;
-  }
-
   &.wrapper-notification-warning {
     border-top-color: $orange;
 
@@ -74,12 +66,11 @@
 
   // shorter/status notifications
   &.wrapper-notification-status {
-    width: ($baseline*10);
+    width: ($baseline*12.5);
     right: ($baseline);
     padding: ($baseline/2) $baseline;
 
     .notification {
-      background: red;
       @include box-sizing(border-box);
       @include clearfix();
       width: 100%;
@@ -87,11 +78,19 @@
       min-width: none;
 
       .icon {
-        width: auto;
+        width: $baseline;
+        margin-right: ($baseline*0.75);
       }
 
       .copy {
-        width: auto;
+        width: ($baseline*9);
+
+        p {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          width: 100%;
+        }
       }
     }    
   }
@@ -115,7 +114,7 @@
 
   .icon {
     @include transition (color 0.5s ease-in-out);
-    @include font-size(28);
+    @include font-size(22);
     width: flex-grid(1, 12);
     margin-right: flex-gutter();
     text-align: right;
@@ -283,6 +282,16 @@
       border-color: $blue-d2;
     }
   }
+
+  &.saving {
+
+    .icon-saving {
+      @include animation(rotateClockwise 3.0s forwards linear infinite);
+      width: 22px;
+      height: 25px;
+      line-height: 3rem !important;
+    }
+  }
 }
 
 // ====================
@@ -296,16 +305,11 @@
   z-index: 100;
   overflow: hidden;
   width: 100%;
-  opacity: 0;
   border-bottom: 4px solid $gray-l1;
   border-top: 1px solid $black;
   padding: $baseline ($baseline*2);
   background: $gray-d3;
 
-  &.is-shown {
-    opacity: 1.0;
-  }
-
   &.wrapper-alert-warning {
     border-bottom-color: $orange;
 
@@ -536,6 +540,28 @@
   }
 }
 
+// js enabled
+.js {
+
+  .wrapper-alert {
+    display: none;
+
+    &.is-shown {
+      display: block;
+    }
+  }
+
+  .wrapper-notification {
+    bottom: -1000px;
+    opacity: 0;
+
+    &.is-shown {
+      bottom: 0;
+      opacity: 1.0;
+    }
+  }
+}
+
 // temporary
 body.uxdesign.alerts {
 

cms/static/sass/_base.scss

@@ -69,7 +69,7 @@ h1 {
 }
 
 .title-3 {
-  @include font-size(16);
+  @include font-size(18);
   margin-bottom: ($baseline/2);
 }
 
@@ -93,6 +93,14 @@ h1 {
   font-weight: 500
 }
 
+p, ul, ol, dl {
+  margin-bottom: ($baseline/2);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
 // ====================
 
 // layout - basic page header
@@ -316,33 +324,13 @@ h1 {
     color: $gray-d3;
   }
 
-  .title-1 {
-
-  }
-
-  .title-2 {
-    @include font-size(24);
-    margin: 0 0 ($baseline/2) 0;
-    font-weight: 600;
-  }
-
-  .title-3 {
-    @include font-size(16);
-    margin: 0 0 ($baseline/4) 0;
-    font-weight: 500;
-  }
-
-  .title-4 {
-
-  }
-
-  .title-5 {
+  > section {
+    margin: 0 0 ($baseline*2) 0;
 
+    &:last-child {
+      margin-bottom: 0;
     }
 
-  > section {
-    margin: 0 0 $baseline 0;
-
     header {
       @include clearfix();
 

cms/static/sass/_keyframes.scss

@@ -7,14 +7,6 @@
     @include transform(rotate(0deg));
   }
 
-  25% {
-    @include transform(rotate(90deg));
-  }
-
-  50% {
-    @include transform(rotate(180deg));
-  }
-
   100% {
     @include transform(rotate(360deg));
   }

cms/templates/alerts.html

@@ -4,7 +4,7 @@
 
 <%block name="content">
 <!-- alert: you're editing a draft -->
-<div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
+<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-draft">
   <div class="alert warning has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
 
@@ -28,7 +28,7 @@
 </div>
 
 <!-- alert: newer version -->
-<div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
+<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-version">
   <div class="alert warning has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
 
@@ -52,7 +52,7 @@
 </div>
 
 <!-- alert: save confirmed -->
-<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
+<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-saved">
   <div class="alert confirmation">
     <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
 
@@ -64,7 +64,7 @@
 </div>
 
 <!-- alert: delete confirmed -->
-<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
+<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-removed">
   <div class="alert confirmation">
     <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
 
@@ -76,7 +76,7 @@
 </div>
 
 <!-- alert: system error -->
-<div class="wrapper wrapper-alert wrapper-alert-error is-shown">
+<div class="wrapper wrapper-alert wrapper-alert-error" id="alert-system-error">
   <div class="alert error">
     <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
 
@@ -88,7 +88,7 @@
 </div>
 
 <!-- alert: user error -->
-<div class="wrapper wrapper-alert wrapper-alert-error is-shown">
+<div class="wrapper wrapper-alert wrapper-alert-error" id="alert-user-error">
   <div class="alert error has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
 
@@ -109,7 +109,7 @@
 </div>
 
 <!-- alert: announcement w/ actions -->
-<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
+<div class="wrapper wrapper-alert wrapper-alert-announcement" id="alert-announcement1">
   <div class="alert announcement has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
 
@@ -133,7 +133,7 @@
 </div>
 
 <!-- alert: announcement -->
-<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
+<div class="wrapper wrapper-alert wrapper-alert-announcement" id="alert-announcement2">
   <div class="alert announcement">
     <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
 
@@ -145,7 +145,7 @@
 </div>
 
 <!-- alert: step required -->
-<div class="wrapper wrapper-alert wrapper-alert-step-required is-shown">
+<div class="wrapper wrapper-alert wrapper-alert-step-required" id="alert-activation">
   <div class="alert step-required has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i>
 
@@ -182,14 +182,6 @@
   </div>
 </div>
 
-<div class="wrapper wrapper-testing">
-  <div class="testing">
-    <ul>
-      <li><a href="#" class="test-notification">Toggle Notification</a></li>
-    </ul>
-  </div>
-</div>
-
 <div class="wrapper-mast wrapper">
   <header class="mast has-actions has-subtitle">
     <div class="title">
@@ -209,6 +201,17 @@
         </header>
 
         <p>In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.</p>
+
+        <h3 class="title-3">Different Static Examples of Alerts</h3>
+        <p>Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display</p>
+
+        <ul>
+          <li><a href="#" class="test-notification">Toggle Change Warning Notification</a></li>
+          <li><a href="#" class="test-notification">Toggle New Version Warning Notification</a></li>
+          <li><a href="#" class="test-notification">Toggle Editing Warning Notification</a></li>
+          <li><a href="#" class="test-notification">Toggle Saving Notification</a></li>
+          <li><a href="#" class="test-notification">Toggle Help Notification</a></li>
+        </ul>
       </section>
 
       <section>
@@ -218,13 +221,23 @@
         </header>
 
         <p>In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.</p>
+
+        <h3 class="title-3">Different Static Examples of Notifications</h3>
+
+        <ul>
+          <li><a href="#" class="test-notification">Toggle Change Warning Notification</a></li>
+          <li><a href="#" class="test-notification">Toggle New Version Warning Notification</a></li>
+          <li><a href="#" class="test-notification">Toggle Editing Warning Notification</a></li>
+          <li><a href="#" class="test-notification">Toggle Saving Notification</a></li>
+          <li><a href="#" class="test-notification">Toggle Help Notification</a></li>
+        </ul>
       </section>
     </article>
   </section>
 </div>
 
 <!-- notification: change has been made and a save is needed -->
-<div class="wrapper wrapper-notification wrapper-notification-change">
+<div class="wrapper wrapper-notification wrapper-notification-change" id="notification-change">
   <div class="notification change has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
     
@@ -248,7 +261,7 @@
 </div>
 
 <!-- notification: newer version exists -->
-<div class="wrapper wrapper-notification wrapper-notification-warning">
+<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-version">
   <div class="notification warning has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
     
@@ -277,7 +290,7 @@
 </div>
 
 <!-- notification: warning about editing something dangerous -->
-<div class="wrapper wrapper-notification wrapper-notification-warning">
+<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-dangerous">
   <div class="notification warning has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
     
@@ -301,7 +314,7 @@
 </div>
 
 <!-- notification: status - saving -->
-<div class="wrapper wrapper-notification wrapper-notification-status">
+<div class="wrapper wrapper-notification wrapper-notification-status is-shown" id="notification-saving">
   <div class="notification saving">
     <i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>
     
@@ -313,7 +326,7 @@
 </div>
 
 <!-- notification: status - helper -->
-<div class="wrapper wrapper-notification wrapper-notification-status">
+<div class="wrapper wrapper-notification wrapper-notification-helping" id="notification-helping">
   <div class="notification helping">
     <i class="ss-icon ss-symbolicons-block icon icon-helping">&#x2753;</i>