(WIP) Visual styling changes to basic LMS navigation, still under early review

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -47,7 +47,6 @@ nav.sequence-nav {
     z-index: 9999;
     width: 20px;
     height: 46px;
-    @include linear-gradient(left, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
     background-color: transparent;
     pointer-events: none;
   }
@@ -59,7 +58,6 @@ nav.sequence-nav {
     z-index: 9999;
     width: 20px;
     height: 46px;
-    @include linear-gradient(right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
     background-color: transparent;
     pointer-events: none;
   }
@@ -69,8 +67,7 @@ nav.sequence-nav {
     z-index: 99;
     border: 1px solid #ccc;
     height: 44px;
-    margin: 0 30px;
-    @include linear-gradient(top, #ddd, #eee);
+    margin: 0 41px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
   }
 
@@ -82,8 +79,9 @@ nav.sequence-nav {
     display: table;
     height: 100%;
     margin: 0;
-    padding: 0 10px;
+    padding: 0;
     width: 100%;
+    background-color: $gray-l6;
 
     a {
       @extend .block-link;
@@ -94,17 +92,17 @@ nav.sequence-nav {
       min-width: 20px;
 
       a {
-        width: 100%;
-        height: 42px;
+        @include transition(none);
+        position: relative;
+        display: block;
         margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 44px;
         background-position: center 14px;
         background-repeat: no-repeat;
-        border: 1px solid transparent;
         cursor: pointer;
-        display: block;
-        padding: 0;
-        position: relative;
-        @include transition(none);
+        bacgkround-color: $gray-l6;
 
 /*        &:focus {
           outline: 0;
@@ -119,6 +117,8 @@ nav.sequence-nav {
         &.active {
           background-color: #fff;
           z-index: 9;
+          border-left: 1px solid $gray-l4;
+          border-right: 1px solid $gray-l4;
 
           // &:after {
           //   content: '▲';
@@ -261,9 +261,6 @@ nav.sequence-nav {
       position: absolute;
       margin-bottom: 0;
       height: 44px;
-      width: 70px;
-      border: 1px solid #ccc;
-      @include linear-gradient(top, #eee, #ddd);
       box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
       z-index: 1;
 
@@ -294,23 +291,21 @@ nav.sequence-nav {
       }
 
       &.prev {
-        left: -10px;
-        border-radius: 35px 0 0 35px;
+        left: 0;
+        border-radius: 5px 0 0 5px;
 
         a {
           background-image: url('../images/sequence-nav/previous-icon.png');
-          background-position: center 15px;
         }
+
       }
 
       &.next {
-        right: -10px;
-        border-radius: 0 35px 35px 0;
+        right: 0;
+        border-radius: 0 5px 5px 0;
 
         a {
-          margin-left: 30px;
           background-image: url('../images/sequence-nav/next-icon.png');
-          background-position: center 15px;
         }
       }
     }
@@ -332,17 +327,18 @@ nav.sequence-bottom {
   ul {
     @include clearfix();
     @include inline-block();
+    width: 100%;
 
     li {
       float: left;
       width: 50px;
       height: 44px;
       border: 1px solid #ccc;
-      @include linear-gradient(top, #eee, #ddd);
       box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
 
       &.prev, &.next {
         margin-bottom: 0;
+        width: 49%;
 
         a {
           background-position: center center;
@@ -369,7 +365,7 @@ nav.sequence-bottom {
       }
 
       &.prev {
-        border-radius: 35px 0 0 35px;
+        border-radius: 5px 0 0 5px;
 
         a {
           background-image: url('../images/sequence-nav/previous-icon.png');
@@ -378,7 +374,7 @@ nav.sequence-bottom {
       }
 
       &.next {
-        border-radius: 0 35px 35px 0;
+        border-radius: 0 5px 5px 0;
         border-left: none;
 
         a {

lms/static/sass/base/_base.scss

@@ -1,14 +1,9 @@
-// html {
-//   overflow-y: scroll;
-// }
-
 html, body {
   background: $body-bg;
   font-family: $sans-serif;
   font-size: 1em;
   font-style: normal;
   line-height: 1em;
-  //-webkit-font-smoothing: antialiased;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -23,7 +18,6 @@ h1 {
   letter-spacing: 1px;
   margin-bottom: 30px;
   text-align: center;
-  //text-transform: uppercase;
 }
 
 h2 {
@@ -102,15 +96,15 @@ a:focus {
   width: flex-grid(12);
   margin: 0 auto;
   background: $content-wrapper-bg;
-  padding-bottom: ($baseline*2);
 }
 
 .container {
   @include clearfix;
   margin: 0 auto 0;
   padding: 0px 30px;
-  max-width: grid-width(12);
+  padding: ($baseline*1.5);
   min-width: 760px;
+  max-width: grid-width(12);
   width: flex-grid(12);
 }
 

lms/static/sass/base/_variables.scss

@@ -76,6 +76,57 @@ $pink-u1: desaturate($pink,15%);
 $pink-u2: desaturate($pink,30%);
 $pink-u3: desaturate($pink,45%);
 
+$gray: rgb(127,127,127);
+$gray-l1: tint($gray,20%);
+$gray-l2: tint($gray,40%);
+$gray-l3: tint($gray,60%);
+$gray-l4: tint($gray,80%);
+$gray-l5: tint($gray,90%);
+$gray-l6: tint($gray,95%);
+$gray-l7: tint($gray,99%);
+$gray-d1: shade($gray,20%);
+$gray-d2: shade($gray,40%);
+$gray-d3: shade($gray,60%);
+$gray-d4: shade($gray,80%);
+
+$blue: rgb(0, 159, 230);
+$blue-l1: tint($blue,20%);
+$blue-l2: tint($blue,40%);
+$blue-l3: tint($blue,60%);
+$blue-l4: tint($blue,80%);
+$blue-l5: tint($blue,90%);
+$blue-d1: shade($blue,20%);
+$blue-d2: shade($blue,40%);
+$blue-d3: shade($blue,60%);
+$blue-d4: shade($blue,80%);
+$blue-s1: saturate($blue,15%);
+$blue-s2: saturate($blue,30%);
+$blue-s3: saturate($blue,45%);
+$blue-u1: desaturate($blue,15%);
+$blue-u2: desaturate($blue,30%);
+$blue-u3: desaturate($blue,45%);
+$blue-t0: rgba($blue, 0.125);
+$blue-t1: rgba($blue, 0.25);
+$blue-t2: rgba($blue, 0.50);
+$blue-t3: rgba($blue, 0.75);
+
+$pink: rgb(183, 37, 103);
+$pink-l1: tint($pink,20%);
+$pink-l2: tint($pink,40%);
+$pink-l3: tint($pink,60%);
+$pink-l4: tint($pink,80%);
+$pink-l5: tint($pink,90%);
+$pink-d1: shade($pink,20%);
+$pink-d2: shade($pink,40%);
+$pink-d3: shade($pink,60%);
+$pink-d4: shade($pink,80%);
+$pink-s1: saturate($pink,15%);
+$pink-s2: saturate($pink,30%);
+$pink-s3: saturate($pink,45%);
+$pink-u1: desaturate($pink,15%);
+$pink-u2: desaturate($pink,30%);
+$pink-u3: desaturate($pink,45%);
+
 $red: rgb(178, 6, 16);
 $red-l1: tint($red,20%);
 $red-l2: tint($red,40%);
@@ -110,6 +161,23 @@ $green-u1: desaturate($green,15%);
 $green-u2: desaturate($green,30%);
 $green-u3: desaturate($green,45%);
 
+$orange: rgb(237, 189, 60);
+$orange-l1: tint($orange,20%);
+$orange-l2: tint($orange,40%);
+$orange-l3: tint($orange,60%);
+$orange-l4: tint($orange,80%);
+$orange-l5: tint($orange,90%);
+$orange-d1: shade($orange,20%);
+$orange-d2: shade($orange,40%);
+$orange-d3: shade($orange,60%);
+$orange-d4: shade($orange,80%);
+$orange-s1: saturate($orange,15%);
+$orange-s2: saturate($orange,30%);
+$orange-s3: saturate($orange,45%);
+$orange-u1: desaturate($orange,15%);
+$orange-u2: desaturate($orange,30%);
+$orange-u3: desaturate($orange,45%);
+
 // TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching.
 $blue: rgb(29,157,217);
 $yellow: rgb(255, 252, 221);
@@ -121,7 +189,7 @@ $light-gray: rgb(221, 221, 221);
 $dark-gray: rgb(51, 51, 51);
 $border-color: rgb(200, 200, 200);
 $sidebar-color: rgb(246, 246, 246);
-$outer-border-color: rgb(170, 170, 170);
+$outer-border-color: $gray-l3;
 $light-gray: #ddd;
 
 // used by descriptor css
@@ -320,8 +388,7 @@ $dashboard-course-cover-border: $light-gray;
 
 // MISC: course assets
 $content-wrapper-bg: $white;
-$course-bg-color: #d6d6d6;
-$course-bg-image: url(../images/bg-texture.png);
+$course-bg-color: $gray-l6;
 $account-content-wrapper-bg: shade($body-bg, 2%);
 $course-profile-bg: rgb(245,245,245);
 $course-header-bg: rgba(255,255,255, 0.93);

lms/static/sass/course/base/_base.scss

@@ -1,7 +1,6 @@
 body {
   min-width: 980px;
   min-height: 100%;
-  background-image: $course-bg-image;
   background-color: $course-bg-color;
 }
 
@@ -27,16 +26,14 @@ a {
 }
 
 .container {
-  padding: 20px 0 0 0;
 
   > div {
     display: table;
-    table-layout: fixed;
-    width: 100%;
     border-radius: 3px;
     border: 1px solid $outer-border-color;
+    width: 100%;
     background: $container-bg;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    table-layout: fixed;
   }
 }
 

lms/static/sass/course/courseware/_sidebar.scss

@@ -72,7 +72,6 @@
       width: 100% !important;
       @include box-sizing(border-box);
       padding: 11px 14px;
-      @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
       background-color: $sidebar-chapter-bg;
       box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset;
       @include transition(background-color .1s linear 0s);

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

@@ -1,10 +1,12 @@
 nav.course-material {
   @include clearfix;
   @include box-sizing(border-box);
-  border-bottom: none;
   margin: 0px auto 0px;
+  border-bottom: none;
   padding: 0px;
   width: 100%;
+  background-color: $blue;
+  box-shadow: 0 0 2px $shadow inset;
 
   .inner-wrapper {
     margin: 0 auto;
@@ -15,18 +17,16 @@ nav.course-material {
   ol.course-tabs {
     @include border-top-radius(4px);
     @include clearfix;
-    padding: 28px 0 10px 0;
-    margin-left: 10px;
+    padding: 0 9px 0 10px;
 
     li {
       float: left;
       list-style: none;
-      margin-right: 6px;
 
       &.prominent {
         margin-right: 16px;
+        //border-radius: 3px;
         background: rgba(255, 255, 255, .5);
-        border-radius: 3px; 
       }
 
       &.prominent + li {
@@ -35,28 +35,20 @@ nav.course-material {
       }
 
       a {
-        border-radius: 3px;
-        color: #555;
         display: block;
+        padding: $baseline ($baseline*.75);
+        color: $white;
         text-align: center;
-        padding: 10px 13px 12px;
-        font-size: 14px;
-        font-weight: bold;
         text-decoration: none;
-        // text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
+        font-size: 14px;
 
         &:hover, &:focus {
           color: #333;
           background: rgba(255, 255, 255, .6);
         }
 
         &.active {
-          // background: rgba(0, 0, 0, .2);
-          @include linear-gradient(top, rgba(0, 0, 0, .4), rgba(0, 0, 0, .25));
-          background-color: transparent;
-          box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .3) inset;
-          color: #fff;
-          text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
+          background-color: $blue-u3;
         }
       }
     }