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

Feature/kfiedler/courseware style

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

@@ -1,12 +1,6 @@
 h2 {
   margin-top: 0;
   margin-bottom: 15px;
-  width: flex-grid(2, 9);
-  padding-right: flex-gutter(9);
-  border-right: 1px dashed #ddd;
-  @include box-sizing(border-box);
-  display: table-cell;
-  vertical-align: top;
 
   &.problem-header {
     section.staff {
@@ -15,12 +9,6 @@ h2 {
     }
   }
 
-  @media screen and (max-width:1120px) {
-    display: block;
-    width: auto;
-    border-right: 0;
-  }
-
   @media print {
     display: block;
     width: auto;
@@ -29,16 +17,6 @@ h2 {
 }
 
 section.problem {
-  display: table-cell;
-  width: flex-grid(7, 9);
-  padding-left: flex-gutter(9);
-
-  @media screen and (max-width:1120px) {
-    display: block;
-    width: auto;
-    padding: 0;
-  }
-
   @media print {
     display: block;
     width: auto;

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

@@ -53,6 +53,18 @@ input[type="password"] {
   }
 }
 
+input[type="reset"],
+input[type="submit"],
+input[type="button"],
+button,
+.button {
+  @extend .gray-button;
+
+  form & {
+    @extend .gray-button;
+  }
+}
+
 
 img {
   max-width: 100%;

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

@@ -6,28 +6,34 @@ h1.top-header {
   padding-bottom: lh();
 }
 
-.light-button, a.light-button {
-  border: 1px solid #ccc;
-  @include border-radius(3px);
-  @include box-shadow(inset 0 1px 0 #fff);
-  color: #666;
-  cursor: pointer;
-  font: 400 $body-font-size $body-font-family;
-  @include linear-gradient(#fff, lighten(#888, 40%));
-  padding: 4px 8px;
-  text-decoration: none;
-  text-shadow: none;
+.button-reset {
   text-transform: none;
   letter-spacing: 0;
-  -webkit-font-smoothing: antialiased;
 
-  &:hover, &:focus {
-    border: 1px solid #ccc;
-    @include linear-gradient(#fff, lighten(#888, 37%));
+  &:hover {
     text-decoration: none;
   }
 }
 
+.light-button, a.light-button, // only used in askbot as classes
+.gray-button {
+  @include button(simple, #eee);
+  @extend .button-reset;
+  font-size: em(13);
+}
+
+.blue-button {
+  @include button(simple, $blue);
+  @extend .button-reset;
+  font-size: em(13);
+}
+
+.pink-button {
+  @include button(simple, $pink);
+  @extend .button-reset;
+  font-size: em(13);
+}
+
 .content {
   @include box-sizing(border-box);
   display: table-cell;

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

@@ -43,8 +43,8 @@ div.discussion-wrapper aside {
       width: 27%;
       float: right;
       text-align: center;
-      padding-left: 0;
-      padding-right: 0;
+      padding: 4px 0;
+      text-transform: capitalize;
     }
 
     input[type="text"] {
@@ -300,7 +300,7 @@ div.discussion-wrapper aside {
     border-top: 0;
 
     a {
-      @extend .light-button;
+      @extend .gray-button;
       @include box-sizing(border-box);
       display: block;
       text-align: center;