Course home page styling with bootstrap.

Updates the new bootstrap course home page to match the old course home page.

lms/static/sass/features/_course-experience.scss

@@ -117,7 +117,7 @@
 
       .goal-option {
         text-decoration: none;
-        font-size: font-size(x-small);
+        font-size: $font-size-base;
         padding: $baseline/2;
         margin: $baseline/4 $baseline/4 0;
         flex-grow: 1;
@@ -213,12 +213,12 @@
     @include float(left);
 
     border: 1px solid $lms-border-color;
-    padding: $baseline*0.75 $baseline*0.75 $baseline*0.25;
+    padding: $baseline*0.75 $baseline*0.75 $baseline*0.5;
     border-radius: 5px;
     position: relative;
     width: 100%;
     cursor: pointer;
-    margin-bottom: $baseline/2;
+    margin-bottom: $baseline;
 
     &.hidden {
       display: none;
@@ -245,8 +245,8 @@
 
     .current-goal-container {
       .title {
+        @include margin($baseline/5, $baseline*0.4, 0, 0);
         @include float(left);
-        @include margin-right($baseline/4);
       }
 
       .title-label {
@@ -324,6 +324,7 @@
           list-style-type: none;
           border: 1px solid transparent;
           border-radius: 3px;
+          margin-bottom: $baseline/4;
 
           a.outline-item {
             display: flex;
@@ -369,6 +370,10 @@
           &:hover {
             border: 1px solid $lms-active-color;
           }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
         }
 
         &:last-child {

lms/static/sass/features/_course-search.scss

@@ -1,6 +1,8 @@
 // Styles for course search results
 
 .search-results {
+  flex-grow: 1;
+
   .search-result-list {
     list-style: none;
     margin: 0;

lms/static/sass/features/_course-sock.scss

@@ -24,29 +24,15 @@
     box-shadow: none;
     -webkit-transition: background-color 0.5s;
     transition: background-color 0.5s;
+    cursor: pointer;
 
-    &.active {
+    &.active,
+    &:hover {
       color: theme-color("success");
       background-color: theme-color("inverse");
       border-color: theme-color("success");
       background-image: none;
       box-shadow: none;
-
-      &:hover {
-        color: theme-color("inverse");
-        background-color: $success-color-hover;
-        border-color: $success-color-hover;
-        background-image: none;
-        box-shadow: none;
-      }
-    }
-
-    &:hover {
-      color: theme-color("inverse");
-      background-color: $success-color-hover;
-      border-color: $success-color-hover;
-      background-image: none;
-      box-shadow: none;
     }
   }
 
@@ -113,6 +99,7 @@
         right: $baseline;
         background-color: theme-color("success");
         border-color: theme-color("success");
+        color: theme-color("inverse");
         background-image: none;
         box-shadow: none;
 

lms/static/sass/features/_course-upgrade-message.scss

@@ -25,8 +25,9 @@
   // Message copy
   .vc-title {
     font-size: 1.25rem;
-    font-weight: 700;
+    font-weight: $font-weight-light;
     margin-bottom: 1rem;
+    width: calc(100% - 70px);
   }
 
   .vc-selling-points {
@@ -55,11 +56,32 @@
     }
   }
 
+  // Upgrade button
+  .btn-upgrade {
+    color: theme-color("inverse");
+    background-color: $lms-purchase-color;
+    font-size: $font-size-base;
+    -webkit-transition: $btn-transition;
+    transition: $btn-transition;
+
+    &:hover {
+      background-color: theme-color("success");
+    }
+  }
+
   // Show/hide button
   .vc-toggle {
-    @include float(right);
+    @include right($baseline/2);
 
+    top: $baseline/2;
+    position: absolute;
     color: theme-color("inverse");
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: none;
+      color: theme-color("light");
+    }
   }
 
   // Cert image
@@ -80,30 +102,47 @@
 
 // Collapsed upgrade message
 .vc-message.polite {
+  @include padding($baseline/2, 0, $baseline/2, $baseline);
   padding-top: $baseline/2;
   padding-bottom: $baseline/2;
   min-height: 46px;
   display: flex;
-  flex-flow: row wrap;
   align-items: center;
 
   .vc-title {
-    margin: 0;
-
     @include margin-right(auto);
+
+    margin: 0;
+    flex-grow: 1;
   }
 
   .vc-cta {
-    @include margin-right(1rem);
+    flex-grow: 1;
   }
 
   .vc-toggle {
+    @include right(0);
+
+    margin: 0 $baseline/2;
     order: 99;
+    position: relative;
+    white-space: nowrap;
+    width: $baseline*6;
+    top: 0;
   }
 
   .vc-fade:not(.vc-polite-only) {
     display: none;
   }
+
+  @include media-breakpoint-down(sm) {
+    flex-flow: row wrap;
+
+    .vc-title {
+      width: auto;
+      margin-bottom: $baseline/2;
+    }
+  }
 }
 
 @media (max-width: $grid-breakpoints-sm) {