Merge pull request #401 from MITx/feature/kfiedler/courseware-style

Added tooltip styles, made all buttons the same, and other small changes...

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

@@ -14,7 +14,7 @@ div.video {
 
     section.video-player {
       height: 0;
-      overflow: hidden;
+      // overflow: hidden;
       padding-bottom: 56.25%;
       position: relative;
 
@@ -45,12 +45,13 @@ div.video {
       div.slider {
         @extend .clearfix;
         background: #c2c2c2;
-        border: none;
-        border-bottom: 1px solid #000;
+        border: 1px solid #000;
         @include border-radius(0);
         border-top: 1px solid #000;
         @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
         height: 7px;
+        margin-left: -1px;
+        margin-right: -1px;
         @include transition(height 2.0s ease-in-out);
 
         div.ui-widget-header {
@@ -58,43 +59,12 @@ div.video {
           @include box-shadow(inset 0 1px 0 #999);
         }
 
-        .ui-tooltip.qtip .ui-tooltip-content {
-          background: $mit-red;
-          border: 1px solid darken($mit-red, 20%);
-          @include border-radius(2px);
-          @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
-          color: #fff;
-          font: bold 12px $body-font-family;
-          margin-bottom: 6px;
-          margin-right: 0;
-          overflow: visible;
-          padding: 4px;
-          text-align: center;
-          text-shadow: 0 -1px 0 darken($mit-red, 10%);
-          -webkit-font-smoothing: antialiased;
-
-          &::after {
-            background: $mit-red;
-            border-bottom: 1px solid darken($mit-red, 20%);
-            border-right: 1px solid darken($mit-red, 20%);
-            bottom: -5px;
-            content: " ";
-            display: block;
-            height: 7px;
-            left: 50%;
-            margin-left: -3px;
-            position: absolute;
-            @include transform(rotate(45deg));
-            width: 7px;
-          }
-        }
-
         a.ui-slider-handle {
-          background: $mit-red url(../images/slider-handle.png) center center no-repeat;
+          background: $pink url(../images/slider-handle.png) center center no-repeat;
           @include background-size(50%);
-          border: 1px solid darken($mit-red, 20%);
+          border: 1px solid darken($pink, 20%);
           @include border-radius(15px);
-          @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
+          @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
           cursor: pointer;
           height: 15px;
           margin-left: -7px;
@@ -103,7 +73,7 @@ div.video {
           width: 15px;
 
           &:focus, &:hover {
-            background-color: lighten($mit-red, 10%);
+            background-color: lighten($pink, 10%);
             outline: none;
           }
         }

lms/static/sass/course.scss

@@ -7,6 +7,7 @@
 @import 'base/base';
 @import 'base/extends';
 @import 'base/animations';
+@import 'shared/tooltips';
 
 // Course base / layout styles
 @import 'course/layout/courseware_subnav';

lms/static/sass/course/_info.scss

@@ -15,15 +15,15 @@ div.info-wrapper {
 
     > ol {
       list-style: none;
-      padding-left: 0;
       margin-bottom: lh();
+      padding-left: 0;
 
       > li {
         @extend .clearfix;
         border-bottom: 1px solid lighten($border-color, 10%);
+        list-style-type: disk;
         margin-bottom: lh();
         padding-bottom: lh(.5);
-        list-style-type: disk;
 
         &:first-child {
           margin: 0 (-(lh(.5))) lh();
@@ -41,10 +41,10 @@ div.info-wrapper {
 
         h2 {
           float: left;
-          margin: 0 flex-gutter() 0 0;
-          width: flex-grid(2, 9);
           font-size: $body-font-size;
           font-weight: bold;
+          margin: 0 flex-gutter() 0 0;
+          width: flex-grid(2, 9);
         }
 
         section.update-description {
@@ -68,15 +68,15 @@ div.info-wrapper {
 
   section.handouts {
     @extend .sidebar;
-    border-left: 1px solid #d3d3d3;
+    border-left: 1px solid $border-color;
     @include border-radius(0 4px 4px 0);
-    @include box-shadow(none);
     border-right: 0;
+    @include box-shadow(none);
 
     h1 {
       @extend .bottom-border;
-      padding: lh(.5) lh(.5);
       margin-bottom: 0;
+      padding: lh(.5) lh(.5);
     }
 
     ol {
@@ -90,8 +90,9 @@ div.info-wrapper {
         &.expandable,
         &.collapsable {
           h4 {
-            font-weight: normal;
+            color: $blue;
             font-size: 1em;
+            font-weight: normal;
             padding: lh(.25) 0 lh(.25) lh(1.5);
           }
         }
@@ -145,7 +146,8 @@ div.info-wrapper {
             filter: alpha(opacity=60);
 
             + h4 {
-              background-color: #e3e3e3;
+              @extend a:hover;
+              text-decoration: underline;
             }
           }
 

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

@@ -3,6 +3,7 @@ body {
 }
 
 body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a {
+  text-align: left;
   font-family: $sans-serif;
 }
 

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

@@ -25,24 +25,12 @@ h1.top-header {
   }
 }
 
-.action-link {
-  a {
-    color: $mit-red;
-
-    &:hover {
-      color: darken($mit-red, 20%);
-      text-decoration: none;
-    }
-  }
-}
-
 .content {
   @include box-sizing(border-box);
   display: table-cell;
   padding: lh();
   vertical-align: top;
   width: flex-grid(9) + flex-gutter();
-  overflow: hidden;
 
   @media print {
     @include box-shadow(none);
@@ -164,7 +152,6 @@ h1.top-header {
 .topbar {
   @extend .clearfix;
   border-bottom: 1px solid $border-color;
-  font-size: 14px;
 
   @media print {
     display: none;
@@ -193,17 +180,17 @@ h1.top-header {
 
   h2 {
     display: block;
-    width: 700px;
     float: left;
     font-size: 0.9em;
     font-weight: 600;
-    line-height: 40px;
     letter-spacing: 0;
-    text-transform: none;
+    line-height: 40px;
+    overflow: hidden;
+    text-overflow: ellipsis;
     text-shadow: 0 1px 0 #fff;
+    text-transform: none;
     white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    width: 700px;
 
     .provider {
       font: inherit;
@@ -211,4 +198,4 @@ h1.top-header {
       color: #6d6d6d;
     }
   }
-}
\ No newline at end of file
+}

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

@@ -146,13 +146,13 @@ div.course-wrapper {
       @include border-radius(0);
 
       a.ui-slider-handle {
-        @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
+        @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
         background: $mit-red url(../images/slider-bars.png) center center no-repeat;
-        border: 1px solid darken($mit-red, 20%);
+        border: 1px solid darken($pink, 20%);
         cursor: pointer;
 
         &:hover, &:focus {
-          background-color: lighten($mit-red, 10%);
+          background-color: lighten($pink, 10%);
           outline: none;
         }
       }

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

@@ -13,7 +13,7 @@ section.course-index {
   div#accordion {
     h3 {
       @include border-radius(0);
-      border-top: 1px solid #e3e3e3;
+      border-top: 1px solid lighten($border-color, 10%);
       font-size: em(16, 18);
       margin: 0;
       overflow: hidden;
@@ -34,6 +34,7 @@ section.course-index {
       }
 
       &.ui-accordion-header {
+        border-bottom: none;
         color: #000;
 
         a {

lms/static/sass/course/discussion/_answers.scss

@@ -17,7 +17,6 @@ div.answer-controls {
     margin-left: flex-gutter();
 
     nav {
-      @extend .action-link;
       float: right;
       margin-top: 34px;
 
@@ -144,7 +143,7 @@ div.answer-actions {
     text-decoration: none;
 
     &.question-delete {
-      // color: $mit-red;
+      color: $mit-red;
     }
   }
 }

lms/static/sass/course/discussion/_forms.scss

@@ -92,7 +92,7 @@ form.answer-form {
       margin-left: 2.5%;
       padding-left: 1.5%;
       border-left: 1px dashed #ddd;
-      color: $mit-red;;
+      color: $mit-red;
     }
 
     ul, ol, pre {

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

@@ -14,14 +14,6 @@ div#wiki_panel {
     }
   }
 
-  form {
-    input[type="submit"]{
-      @extend .light-button;
-      text-transform: none;
-      text-shadow: none;
-    }
-  }
-
   div#wiki_create_form {
     @extend .clearfix;
     padding: lh(.5) lh() lh(.5) 0;
@@ -53,4 +45,12 @@ div#wiki_panel {
       }
     }
   }
+
+  input#wiki_search_input_submit {
+    padding: 4px 8px;
+  }
+
+  input#wiki_search_input {
+    margin-right: 10px;
+  }
 }

lms/static/sass/shared/_forms.scss

 form {
   font-size: 1em;
+}
 
-  label {
-    color: $base-font-color;
-    font: italic 300 1rem/1.6rem $serif;
-    margin-bottom: 5px;
-    text-shadow: 0 1px rgba(255,255,255, 0.4);
-    -webkit-font-smoothing: antialiased;
-  }
-
-  textarea,
-  input[type="text"],
-  input[type="email"],
-  input[type="password"] {
-    background: rgb(250,250,250);
-    border: 1px solid rgb(200,200,200);
-    @include border-radius(3px);
-    @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
-    @include box-sizing(border-box);
-    font: italic 300 1rem/1.6rem $serif;
-    height: 35px;
-    padding: 5px 12px;
-    vertical-align: top;
-    -webkit-font-smoothing: antialiased;
+label {
+  color: $base-font-color;
+  font: italic 300 1rem/1.6rem $serif;
+  margin-bottom: 5px;
+  text-shadow: 0 1px rgba(255,255,255, 0.4);
+  -webkit-font-smoothing: antialiased;
+}
 
-    &:last-child {
-      margin-right: 0px;
-    }
+textarea,
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+  background: rgb(250,250,250);
+  border: 1px solid rgb(200,200,200);
+  @include border-radius(3px);
+  @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
+  @include box-sizing(border-box);
+  font: italic 300 1rem/1.6rem $serif;
+  height: 35px;
+  padding: 5px 12px;
+  vertical-align: top;
+  -webkit-font-smoothing: antialiased;
 
-    &:focus {
-      border-color: lighten($blue, 20%);
-      @include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
-      outline: none;
-    }
+  &:last-child {
+    margin-right: 0px;
   }
 
-  textarea {
-    height: 60px;
+  &:focus {
+    border-color: lighten($blue, 20%);
+    @include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
+    outline: none;
   }
+}
 
-  input[type="submit"] {
-    @include button(shiny, $blue);
-    @include border-radius(3px);
-    font: normal 1.2rem/1.6rem $sans-serif;
-    height: 35px;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    vertical-align: top;
-    -webkit-font-smoothing: antialiased;
-  }
+textarea {
+  height: 60px;
+}
+
+input[type="submit"],
+input[type="button"],
+.button {
+  @include border-radius(3px);
+  @include button(shiny, $blue);
+  font: normal 1.2rem/1.6rem $sans-serif;
+  letter-spacing: 1px;
+  padding: 4px 20px;
+  text-transform: uppercase;
+  vertical-align: top;
+  -webkit-font-smoothing: antialiased;
 }

lms/static/sass/shared/_tooltips.scss

+.ui-tooltip.qtip .ui-tooltip-content {
+  background: rgba($pink, .8);
+  border: 0;
+  color: #fff;
+  font: bold 12px $body-font-family;
+  margin-bottom: 6px;
+  margin-right: 0;
+  overflow: visible;
+  padding: 4px;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+}

lms/templates/simplewiki/simplewiki_base.html

@@ -110,7 +110,7 @@
               </div>
               <ul>
                 <li>
-                  <input type="submit" class="button" value="Create" style="display: inline-block; margin-right: 2px; font-weight: bold;" />
+                  <input type="submit" class="button" value="Create" />
                 </li>
               </ul>
             </form>
@@ -120,8 +120,8 @@
         <li class="search">
           <form method="GET" action='${wiki_reverse("wiki_search_articles", course=course, namespace=namespace)}'>
             <label class="wiki_box_title">Search</label>
-            <input type="text" placeholder="Search" name="value" id="wiki_search_input" style="width: 71%" value="${wiki_search_query if wiki_search_query is not UNDEFINED else '' |h}"/>
-            <input type="submit" id="wiki_search_input_submit" value="Go!" style="width: 20%" />
+            <input type="text" placeholder="Search" name="value" id="wiki_search_input" value="${wiki_search_query if wiki_search_query is not UNDEFINED else '' |h}"/>
+            <input type="submit" id="wiki_search_input_submit" value="Go!" />
           </form>
         </li>
       </ul>