SASS diff from stanford themed branch for master

lms/static/sass/base/_variables.scss

@@ -63,10 +63,10 @@ $text-color: $dark-gray;
 
 $body-bg: rgb(250,250,250);
 $header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
-$header-bg: transparent;
+$header-bg: $white;
 $courseware-header-image: linear-gradient(top, #fff, #eee);
 $courseware-header-bg: transparent;
-$footer-bg: transparent;
+$footer-bg: $white;
 $courseware-footer-border: none;
 $courseware-footer-shadow: none;
 $courseware-footer-margin: 0px;
@@ -118,9 +118,30 @@ $sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6);
 $form-bg-color: #fff;
 $modal-bg-color: rgb(245,245,245);
 
+//TOP HEADER IMAGE MARGIN
+$header_image_margin: -69px;
+
+//FOOTER MARGIN
+$footer_margin: ($baseline/4) 0 ($baseline*1.5) 0;
+
 //-----------------
 //  CSS BG Images
 //-----------------
 $homepage-bg-image: '../images/homepage-bg.jpg';
 
+$login-banner-image: 'transparent url("../images/bg-banner-login.png") 0 0 no-repeat';
+$register-banner-image: 'transparent url("../images/bg-banner-register.png") 0 0 no-repeat';
+
 $video-thumb-url: '../images/courses/video-thumb.jpg';
+
+//-----------------
+//  Mixin Styles
+//
+//  THIS MIGHT BE A GOOD WAY TO DEAL WITH LARGE CHUNKS OF SASS THAT WE WANT TO ALLOW THEMING ON...
+//  WE MAY WANT TO SEPERATE THEM OUT INTO ITS OWN "MIXINS" SCSS FILE
+//-----------------
+@mixin login_register_h1_style {}
+
+@mixin footer_references_style {
+    margin: -10px 0 0 0;
+}

lms/static/sass/course/layout/_courseware_header.scss

@@ -65,7 +65,7 @@ header.global.slim {
   height: auto;
   padding: 5px 0 10px 0;
   border-bottom: 1px solid $outer-border-color;
-  background: $white;
+  background: $header-bg;
 
   .guest .secondary {
     margin-right: 0;

lms/static/sass/course/layout/_footer.scss

 footer {
-	border: $courseware-footer-border;
 	box-shadow: $courseware-footer-shadow;
 	margin-top: $courseware-footer-margin;
 }
\ No newline at end of file

lms/static/sass/multicourse/_account.scss

@@ -6,7 +6,7 @@
 
 // page-level
 .view-register, .view-login, .view-passwordreset {
-  background: $white;
+  background: $body-bg;
 
 
 
@@ -20,16 +20,16 @@
   .heading-2 {
     font-size: 25px;
     margin: 0 0 $baseline 0;
-    font-weight: 300;
+    font-weight: bold;
     text-transform: uppercase;
-    color: $m-blue;
+    color: $link-color;
   }
 
   .heading-3 {
     font-size: 21px;
     margin: 0 0 $baseline 0;
     font-weight: 300;
-    color: $m-gray-d2;
+    color: $base-font-color;
   }
 
   .heading-4 {
@@ -37,7 +37,7 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0 !important;
-    color: $m-blue-s1;
+    color: saturate($link-color,15%);
   }
 
   .heading-5 {
@@ -48,7 +48,7 @@
     font-size: 18px;
     margin: 0 0 $baseline 0;
     font-weight: 300;
-    color: $m-gray-a1;
+    color: $base-font-color;
     font-family: 'Open Sans', sans-serif;
     line-height: lh(1.1);
   }
@@ -56,18 +56,18 @@
   .body-text {
     font-size: 15px;
     margin: 0 0 $baseline 0;
-    color: $m-gray-a1;
+    color: $base-font-color;
     line-height: lh(1);
   }
 
   // specific examples - buttons
   .button-primary {
     @include border-radius(0);
-    @include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%);
+    @include linear-gradient(saturate($link-color,15%) 5%, shade($link-color,15%) 95%);
     display: inline-block;
     padding: $baseline/2 $baseline*2.5;
     text-transform: lowercase;
-    color: $white;
+    color: $very-light-text;
     letter-spacing: 0.1rem;
     font-weight: 500;
     cursor: pointer;
@@ -80,11 +80,11 @@
   }
 
   .button-secondary {
-    @include linear-gradient($m-gray 5%, $m-gray-d1 95%);
+    @include linear-gradient($outer-border-color 5%, $lighter-base-font-color 95%);
     display: inline-block;
     padding: $baseline/2 $baseline*2.5;
     text-transform: lowercase;
-    color: $white;
+    color: $very-light-text;
     letter-spacing: 0.1rem;
     font-weight: 600;
     cursor: pointer;
@@ -98,7 +98,7 @@
 
   // layout
   .content-wrapper {
-    background: $m-gray-l2;
+    background: $content-wrapper-bg;
     padding-bottom: 0;
   }
 
@@ -107,7 +107,7 @@
     @include clearfix;
     margin: 0 auto;
     width: 960px;
-    background: $white;
+    background: $body-bg;
   }
 
   .container {
@@ -139,17 +139,18 @@
   }
 
   a {
-    @include transition(color 0.15s ease-in-out, border 0.15s ease-in-out);
+    @include transition($link-color 0.15s ease-in-out, border 0.15s ease-in-out);
 
     &:link, &:visited, &:hover, &:active {
-      color: $m-blue;
+      color: $link-color;
+      font-weight: bold;
       text-decoration: none !important;
       font-family: $sans-serif;
     }
 
     &:hover, &:active {
-      border-bottom: 1px dotted $m-blue-l1;
-      color: $m-blue-l1;
+      border-bottom: 1px solid saturate($link-color,15%);
+      color: saturate($link-color,15%);
     }
   }
 
@@ -254,20 +255,20 @@
         font-family: $sans-serif;
         font-style: normal;
         font-weight: 500;
-        color: $m-gray-d2;
+        color: $base-font-color;
       }
 
       label {
-        @include transition(color 0.15s ease-in-out);
+        @include transition($link-color 0.15s ease-in-out);
         margin: 0 0 ($baseline/4) 0;
         color: tint($black, 20%);
       }
 
       .tip {
-        @include transition(color 0.15s ease-in-out);
+        @include transition($link-color 0.15s ease-in-out);
         display: block;
         margin-top: ($baseline/4);
-        color: tint($m-gray, 50%);
+        color: tint($outer-border-color, 50%);
         font-size: em(13);
       }
 
@@ -330,7 +331,7 @@
         }
 
         textarea, input {
-          background: $white;
+          background: $body-bg;
           color: rgba(0,0,0,.25);
         }
       }
@@ -339,11 +340,11 @@
       &.is-focused {
 
         label {
-          color: $m-blue-l1;
+          color: saturate($link-color,15%);
         }
 
         .tip {
-          color: $m-blue-l1;
+          color: saturate($link-color,15%);
         }
       }
 
@@ -461,7 +462,7 @@
 
   // misc
   .orn-plus {
-    color: $white;
+    color: $very-light-text;
     padding: 0 $baseline/4;
   }
 
@@ -492,7 +493,11 @@
     header {
       height: 120px;
       border-bottom: 1px solid $m-gray;
-      background: transparent url("../images/bg-banner-login.png") 0 0 no-repeat;
+      background: $login-banner-image;
+      
+      h1 {
+        @include login_register_h1_style;
+      }
     }
   }
 }
@@ -507,13 +512,17 @@
       height: 120px;
       border-bottom: 1px solid $m-gray;
       background: transparent url("../images/bg-banner-register.png") 0 0 no-repeat;
+      
+      h1 {
+        @include login_register_h1_style;
+      }
     }
   }
 }
 
 // password reset
 .view-passwordreset {
-  background: $m-gray-l2;
+  background: $sidebar-color;
 
   header.global {
 
@@ -543,7 +552,7 @@
 
   .inner-wrapper {
     @include border-radius(2px);
-    background: $white;
+    background: $body-bg;
     padding-bottom: 0 !important;
   }
 

lms/static/sass/multicourse/_course_about.scss

@@ -11,7 +11,7 @@
     border-bottom: 1px solid $border-color-3;
     @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
     height: 280px;
-    margin-top: -69px;
+    margin-top: $header_image_margin;
     padding-top: 150px;
     overflow: hidden;
     position: relative;

lms/static/sass/multicourse/_courses.scss

@@ -10,7 +10,7 @@
     border-bottom: 1px solid $border-color-3;
     @include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3));
     height: 430px;
-    margin-top: -69px;
+    margin-top: $header_image_margin;
     width: 100%;
 
     .inner-wrapper {

lms/static/sass/multicourse/_home.scss

@@ -15,7 +15,7 @@
     @include clearfix;
     height: 460px;
     overflow: hidden;
-    margin-top: -69px;
+    margin-top: $header_image_margin;
     padding: 0px;
     width: flex-grid(12);
 

lms/static/sass/shared/_footer.scss

@@ -2,7 +2,7 @@
   @include box-shadow(0 -1px 5px 0 rgba(0,0,0, 0.1));
   border-top: 1px solid tint($m-gray,50%);
   padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
-  background: $white;
+  background: $footer-bg;
 
   footer {
     @include clearfix();
@@ -16,18 +16,18 @@
     }
 
     a {
-      @include transition(color 0.15s ease-in-out, border 0.15s ease-in-out);
+      @include transition(link-color 0.15s ease-in-out, border 0.15s ease-in-out);
 
       &:link, &:visited, &:hover, &:active {
         border-bottom: none;
-        color: $m-blue;
+        color: $link-color;
         text-decoration: none !important;
         font-family: $sans-serif;
       }
 
       &:hover, &:active {
-        border-bottom: 1px dotted $m-blue-s1;
-        color: $m-blue-s1;
+        border-bottom: 1px dotted $link-color;
+        color: $link-color;
       }
     }
 
@@ -39,7 +39,7 @@
 
       .nav-colophon {
         @include clearfix();
-        margin: ($baseline/4) 0 ($baseline*1.5) 0;
+        margin: $footer_margin;
 
         li {
           float: left;
@@ -49,7 +49,7 @@
             color: tint($black, 20%);
 
             &:hover, &:active {
-              color: $m-blue-s1;
+              color: $link-color;
             }
           }
 
@@ -82,7 +82,7 @@
 
     // references
     .references {
-      margin: -10px 0 0 0;
+      @include footer_references_style;
       width: flex-grid(4,12);
       float: right;
 

lms/static/sass/shared/_header.scss

 header.global {
   border-bottom: 1px solid $m-gray;
   @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
-  background: $white;
+  background: $header-bg;
   height: 76px;
   position: relative;
   width: 100%;
@@ -246,12 +246,12 @@ header.global {
       a {
         display:block;
         padding: ($baseline/4);
-        color: $m-gray-d1;
+        color: $lighter-base-font-color;
         font-weight: 600;
 
         &:hover, &:active {
           text-decoration: none;
-          color: $m-blue-s1;
+          color: $link-color;
         }
       }
 
@@ -259,7 +259,7 @@ header.global {
 
         a {
           text-decoration: none;
-          color: $m-blue-s1;
+          color: $link-color;
         }
       }
     }
@@ -280,11 +280,11 @@ header.global {
 
       a {
         @include border-radius(0);
-        @include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%);
+        @include linear-gradient(shade($link-color,15%) 5%, saturate($link-color,15%) 95%);
         display: inline-block;
         padding: $baseline/2 $baseline*2.5;
         text-transform: lowercase;
-        color: $white;
+        color: $very-light-text;
         letter-spacing: 0.1rem;
         font-weight: 300;
         cursor: pointer;
@@ -324,6 +324,6 @@ header.global {
 
   a {
     text-decoration: none;
-    color: $m-blue-s1 !important;
+    color: $link-color !important;
   }
 }