Merge branch 'master' into cpennington/cms-github

2012-07-03 21:31:31 -04:00
parent e33dce862a 841fb8da0b
commit b8aff5131f
38 changed files with 791 additions and 800 deletions
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -1,10 +1,16 @@
 $fg-column: 70px;
 $fg-gutter: 26px;
 $fg-max-columns: 12;
-$body-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
 $body-font-size: 14px;
 $body-line-height: 20px;

+$light-blue: #f0f8fa;
+$dark-blue: #50545c;
+$bright-blue: #3c8ebf;
+$orange: #f96e5b;
+$yellow: #fff8af;
+
 // Base html styles
 html {
  height: 100%;
@@ -13,23 +19,44 @@ html {
 a {
  text-decoration: none;
  color: #888;
+  @include transition;
+
+  &:hover {
+    color: #ccc;
+  }
 }

 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
@@ -68,6 +95,15 @@ textarea {
  float: right;
 }

+.editable {
+  &:hover {
+    background: lighten($yellow, 10%);
+  }
+  button {
+    padding: 4px 10px;
+  }
+}
+
 .wip {
  outline: 1px solid #f00 !important;
  position: relative;
--- a/cms/static/sass/_calendar.scss
+++ b/cms/static/sass/_calendar.scss
@@ -6,8 +6,12 @@ section.cal {
  > header {
    @include clearfix;
    margin-bottom: 10px;
-    background: #efefef;
-    border: 1px solid #ddd;
+    opacity: .4;
+    @include transition;
+
+    &:hover {
+      opacity: 1;
+    }

    h2 {
      @include inline-block();
@@ -15,7 +19,6 @@ section.cal {
      letter-spacing: 1px;
      font-size: 14px;
      padding: 6px;
-      margin-left: 6px;
      font-size: 12px;
    }

@@ -25,9 +28,8 @@ section.cal {
      li  {
        @include inline-block;
        margin-left: 6px;
-        padding-left: 6px;
        border-left: 1px solid #ddd;
-        padding: 6px;
+        padding: 0 6px;

        a {
          @include inline-block();
@@ -49,31 +51,35 @@ section.cal {
  ol {
    list-style: none;
    @include clearfix;
-    border-left: 1px solid #333;
-    border-top: 1px solid #333;
+    border-left: 1px solid lighten($dark-blue, 40%);
+    border-top: 1px solid lighten($dark-blue, 40%);
    width: 100%;
+    @include box-sizing(border-box);

    > li {
-      border-right: 1px solid #333;
-      border-bottom: 1px solid;
+      border-right: 1px solid lighten($dark-blue, 40%);
+      border-bottom: 1px solid lighten($dark-blue, 40%);
      @include box-sizing(border-box);
      float: left;
      width: flex-grid(3) + ((flex-gutter() * 3) / 4);
+      background-color: lighten($light-blue, 2%);
+

      header {
-        border-bottom: 1px solid #000;
-        @include box-shadow(0 1px 2px #aaa);
+        border-bottom: 1px solid lighten($dark-blue, 40%);
+        @include box-shadow(0 2px 2px $light-blue);
        display: block;
        margin-bottom: 2px;
+        background: #FFF;

        h1 {
          font-size: 14px;
          text-transform: uppercase;
-          border-bottom: 1px solid #ccc;
+          border-bottom: 1px solid lighten($dark-blue, 60%);
          padding: 6px;

          a {
-            color: #000;
+            color: $bright-blue;
            display: block;
          }
        }
@@ -84,6 +90,10 @@ section.cal {
            color: #888;
            border-bottom: 0;
            font-size: 12px;
+
+            &:hover {
+              background: #fff;
+            }
          }
        }
      }
@@ -93,10 +103,17 @@ section.cal {
        margin-bottom: 1px;

        li {
-          background: #efefef;
-          border-bottom: 1px solid #666;
+          border-bottom: 1px solid darken($light-blue, 8%);
          padding: 6px;

+          &:hover {
+            background: lighten($yellow, 10%);
+          }
+
+          a {
+            color: lighten($dark-blue, 10%);
+          }
+
          &.create-module {
            position: relative;

--- a/cms/static/sass/_fonts.scss
+++ b/cms/static/sass/_fonts.scss
@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
+}
--- a/cms/static/sass/_layout.scss
+++ b/cms/static/sass/_layout.scss
@@ -9,13 +9,14 @@ body {
  }

  > header {
-    background: #000;
+    background: $dark-blue;
    color: #fff;
    display: block;
    float: none;
-    padding: 6px 20px;
+    padding: 8px 25px;
    width: 100%;
    @include box-sizing(border-box);
+    -webkit-font-smoothing: antialiased;

    nav {
      @include clearfix;
@@ -24,6 +25,23 @@ body {
        font-size: 14px;
        text-transform: uppercase;
        float: left;
+        margin-right: 15px;
+
+        a {
+          color: #fff;
+
+          &:hover {
+            color: rgba(#fff, .6);
+          }
+        }
+      }
+
+      a {
+        color: rgba(#fff, .8);
+
+        &:hover {
+          color: rgba(#fff, .6);
+        }
      }

      ul {
@@ -35,7 +53,16 @@ body {

        li {
          @include inline-block();
-          margin-left: 15px;
+
+          a {
+            padding: 8px 10px;
+            display: block;
+            margin: -8px 0;
+
+            &:hover {
+              background-color: darken($dark-blue, 15%);
+            }
+          }
        }
      }
    }
@@ -43,11 +70,11 @@ body {

  &.content {
    section.main-content {
-      border-left: 2px solid #000;
+      border-left: 2px solid $dark-blue;
      @include box-sizing(border-box);
      width: flex-grid(9);
      float: left;
-      @include box-shadow( -2px 0 3px #ddd );
+      @include box-shadow( -2px 0 0 darken($light-blue, 3%));
    }
  }
 }
--- a/cms/static/sass/_section.scss
+++ b/cms/static/sass/_section.scss
@@ -2,8 +2,12 @@ section#unit-wrapper {
  section.filters {
    @include clearfix;
    margin-bottom: 10px;
-    background: #efefef;
-    border: 1px solid #ddd;
+    opacity: .4;
+    @include transition;
+
+    &:hover {
+      opacity: 1;
+    }

    ul {
      @include clearfix();
@@ -22,14 +26,16 @@ section#unit-wrapper {

  div.content {
    display: table;
-    border: 1px solid;
+    border: 1px solid lighten($dark-blue, 40%);
    width: 100%;

    section {
      header {
-        background: #eee;
+        background: #fff;
        padding: 6px;
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid lighten($dark-blue, 60%);
+        border-top: 1px solid lighten($dark-blue, 60%);
+        margin-top: -1px;
        @include clearfix;

        h2 {
@@ -37,6 +43,7 @@ section#unit-wrapper {
          letter-spacing: 1px;
          font-size: 12px;
          float: left;
+          color: $bright-blue;
        }
      }

@@ -44,7 +51,7 @@ section#unit-wrapper {
        @include box-sizing(border-box);
        display: table-cell;
        width: flex-grid(6, 9);
-        border-right: 1px solid #333;
+        border-right: 1px solid lighten($dark-blue, 40%);

        &.empty {
          text-align: center;
@@ -59,14 +66,9 @@ section#unit-wrapper {

        ol {
          list-style: none;
-          border-bottom: 1px solid #333;

          li {
-            border-bottom: 1px solid #333;
-
-            &:last-child{
-              border-bottom: 0;
-            }
+            border-bottom: 1px solid lighten($dark-blue, 60%);

            a {
              color: #000;
@@ -78,6 +80,10 @@ section#unit-wrapper {
              li {
                padding: 6px;

+                &:last-child {
+                  border-bottom: 0;
+                }
+
                &:hover {
                  a.draggable {
                    opacity: 1;
@@ -127,11 +133,10 @@ section#unit-wrapper {

        ol {
          list-style: none;
-          border-bottom: 1px solid #999;

          li {
-            border-bottom: 1px solid #999;
-            background: #f9f9f9;
+            border-bottom: 1px solid darken($light-blue, 8%);
+            background: lighten($light-blue, 2%);

            &:last-child {
              border-bottom: 0;
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -1,7 +1,8 @@
 section#unit-wrapper {
  > header {
-    border-bottom: 2px solid #333;
+    border-bottom: 2px solid $dark-blue;
    @include clearfix();
+    @include box-shadow( 0 2px 0 darken($light-blue, 3%));
    padding: 6px 20px;

    section {
@@ -12,6 +13,7 @@ section#unit-wrapper {
        text-transform: uppercase;
        letter-spacing: 1px;
        @include inline-block();
+        color: $bright-blue;
      }

      p {
@@ -28,11 +30,19 @@ section#unit-wrapper {
      color: #666;

      a {
+        display: block;
+        @include inline-block;
+
       &.cancel {
         margin-right: 20px;
         font-style: italic;
         font-size: 12px;
       }
+
+       &.save-update {
+         @extend .button;
+         margin: -6px -25px -6px 0;
+       }
      }
    }
  }
@@ -45,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 {
@@ -64,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 {
@@ -81,6 +96,7 @@ section#unit-wrapper {

        &.author {
          float: right;
+          color: lighten($dark-blue, 6%);

          dl {
            dt {
@@ -94,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();
@@ -118,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%;
@@ -153,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 {
@@ -194,6 +214,12 @@ section#unit-wrapper {
        @include inline-block();
        margin-top: 20px;
      }
+
+      a.cancel {
+        float: right;
+        font-style: italic;
+        margin-top: 20px;
+      }
    }
  }
 }
--- a/cms/templates/widgets/notes.html
+++ b/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>