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,32 +324,12 @@ 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 0;
+    margin: 0 0 ($baseline*2) 0;
+
+    &:last-child {
+      margin-bottom: 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));
   }