added more style for unit page, hovers, and buttons

cms/static/sass/_base.scss

@@ -8,6 +8,8 @@ $body-line-height: 20px;
 $light-blue: #f0f8fa;
 $dark-blue: #50545c;
 $bright-blue: #3c8ebf;
+$orange: #f96e5b;
+$yellow: #fff8af;
 
 // Base html styles
 html {
@@ -28,17 +30,33 @@ input {
   font-family: $body-font-family;
 }
 
-input[type="submit"], .button {
-  border: 1px solid #ccc;
-  background: #efefef;
-  @include border-radius(3px);
-  padding: 6px;
+button, input[type="submit"], .button {
+  background-color: $orange;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
+  padding: 8px 10px;
+  border: 0;
+  font-weight: bold;
+
+  &:hover {
+    background-color: shade($orange, 10%);
+  }
+}
+
+#{$all-text-inputs}, textarea {
+  border: 1px solid $dark-blue;
+  font: $body-font-size $body-font-family;
+  padding: 4px 6px;
+  @include box-shadow(inset 0 3px 6px $light-blue);
 }
 
 textarea {
   @include box-sizing(border-box);
   display: block;
+  line-height: lh();
+  padding: 15px;
   width: 100%;
+
 }
 
 // Extends
@@ -77,6 +95,14 @@ textarea {
   float: right;
 }
 
+.editable {
+  &:hover {
+    background: lighten($yellow, 10%);
+  }
+  button {
+    padding: 4px 10px;
+  }
+}
 // .wip {
 //   outline: 1px solid #f00 !important;
 //   position: relative;

cms/static/sass/_calendar.scss

@@ -64,6 +64,7 @@ section.cal {
       width: flex-grid(3) + ((flex-gutter() * 3) / 4);
       background-color: lighten($light-blue, 2%);
 
+
       header {
         border-bottom: 1px solid lighten($dark-blue, 40%);
         @include box-shadow(0 2px 2px $light-blue);
@@ -89,6 +90,10 @@ section.cal {
             color: #888;
             border-bottom: 0;
             font-size: 12px;
+
+            &:hover {
+              background: #fff;
+            }
           }
         }
       }
@@ -101,6 +106,10 @@ section.cal {
           border-bottom: 1px solid darken($light-blue, 8%);
           padding: 6px;
 
+          &:hover {
+            background: lighten($yellow, 10%);
+          }
+
           a {
             color: lighten($dark-blue, 10%);
           }

cms/static/sass/_unit.scss

@@ -40,15 +40,8 @@ section#unit-wrapper {
        }
 
        &.save-update {
-         background-color: #f96e5b;
-         color: #fff;
-         -webkit-font-smoothing: antialiased;
-         padding: 8px 10px;
+         @extend .button;
          margin: -6px -25px -6px 0;
-
-         &:hover {
-           background-color: shade(#f96e5b, 10%);
-         }
        }
       }
     }
@@ -62,16 +55,16 @@ section#unit-wrapper {
         &.status-settings {
           float: left;
           margin-bottom: 10px;
+          color: $dark-blue;
 
           ul {
             list-style: none;
-            @include border-radius(2px);
-            border: 1px solid #999;
+            border: 1px solid lighten($dark-blue, 40%);
             @include inline-block();
 
             li {
               @include inline-block();
-              border-right: 1px solid #999;
+              border-right: 1px solid lighten($dark-blue, 40%);
               padding: 6px;
 
               &:last-child {
@@ -81,14 +74,19 @@ section#unit-wrapper {
               &.current {
                 background: #eee;
               }
+
+              a {
+                color: $dark-blue;
+              }
             }
           }
 
           a.settings {
             @include inline-block();
             margin: 0 20px;
-            border: 1px solid #999;
             padding: 6px;
+            border: 1px solid lighten($dark-blue, 40%);
+            color: $dark-blue;
           }
 
           select {
@@ -98,6 +96,7 @@ section#unit-wrapper {
 
         &.author {
           float: right;
+          color: lighten($dark-blue, 6%);
 
           dl {
             dt {
@@ -111,7 +110,8 @@ section#unit-wrapper {
         }
 
         &.tags {
-          background: #eee;
+          background: $light-blue;
+          color: lighten($dark-blue, 6%);
           padding: 10px;
           margin: 0 0 20px;
           @include clearfix();
@@ -135,9 +135,9 @@ section#unit-wrapper {
     }
 
     //general styles for main content
-    div.preview {
-      background: #eee;
+    .preview {
       @include box-sizing(border-box);
+      border: 1px solid  lighten($dark-blue, 40%);
       min-height: 40px;
       padding: 10px;
       width: 100%;
@@ -170,13 +170,16 @@ section#unit-wrapper {
 
     //notes
     section.notes {
-      margin-top: 20px;
-      padding: 20px 0 0;
-      border-top: 1px solid #ccc;
+      margin-top: 40px;
+      padding: 40px 0 0;
+      border-top: 2px solid lighten( $dark-blue, 60% );
 
       h2 {
-        font-size: 14px;
         margin-bottom: 6px;
+        font-size: $body-font-size;
+        text-transform: uppercase;
+        color: $bright-blue;
+        letter-spacing: 1px;
       }
 
       form {
@@ -211,6 +214,12 @@ section#unit-wrapper {
         @include inline-block();
         margin-top: 20px;
       }
+
+      a.cancel {
+        float: right;
+        font-style: italic;
+        margin-top: 20px;
+      }
     }
   }
 }

cms/templates/widgets/notes.html

@@ -15,7 +15,7 @@
   <form>
     <h2>Add a note</h2>
     <textarea name="" id= rows="8" cols="40"></textarea>
-    <input type="submit" name="" id="" value="post" />
+    <input type="submit" name="" id="" value="Post" />
   </form>
 </section>