Merge pull request #2159 from edx/talbs/lms-fix-certificate-button

LMS: FIX - Add Styling Back to Certificate Download Button

lms/static/sass/elements/_controls.scss

@@ -30,6 +30,44 @@
   border-radius: ($baseline/10);
 }
 
+// ====================
+
+%btn-inherited {
+  @include transition(background-color 0.15s, box-shadow 0.15s);
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba($white, .3) inset, 0 0 0 rgba($black, 0);
+  padding: ($baseline/2) $baseline;
+
+  &:hover, &.active {
+    text-decoration: none;
+  }
+
+  &.disabled, &.is-disabled, &[disabled="disabled"] {
+    box-shadow: none;
+  }
+}
+
+%btn-inherited-primary {
+  @extend %btn-inherited;
+  @include linear-gradient(top, rgba($white, .3), rgba($white, 0));
+  border: 1px solid shade($action-primary-bg, 10%);
+  background-color: $action-primary-bg;
+  color: $action-primary-fg;
+
+  &:hover, &.active {
+    background-color: $action-primary-focused-bg;
+    color: $action-primary-focused-fg;
+  }
+
+  &.disabled, &.is-disabled, &[disabled="disabled"] {
+    border: 1px solid tint($action-primary-disabled-bg, 10%);
+    background: $action-primary-disabled-bg;
+    color: $action-prmary-disabled-fg;
+  }
+}
+
+// ====================
+
 // primary button
 %btn-primary {
   @extend %t-weight3;

lms/static/sass/multicourse/_dashboard.scss

@@ -749,11 +749,9 @@
       }
 
       &.course-status-certnotavailable {
-        // background: #fee8d6;
       }
 
       &.course-status-certrendering {
-        // background: #d9e7db;
 
         .cta {
           margin-top: 2px;
@@ -761,7 +759,13 @@
       }
 
       &.course-status-certavailable {
-        // background: #d9e7db;
+
+        .action-certificate {
+
+          .btn {
+            @extend %btn-inherited-primary;
+          }
+        }
       }
     }
 

lms/templates/dashboard/_dashboard_certificate_information.html

@@ -40,7 +40,7 @@ else:
       <li class="action"><span class="disabled">
           ${_("Your Certificate is Generating")}</span></li>
     % elif cert_status['show_download_url'] and enrollment.mode == 'honor':
-      <li class="action">
+      <li class="action action-certificate">
       <a class="btn" href="${cert_status['download_url']}"
          title="${_('This link will open/download a PDF document')}">
          ${_("Download Your Certificate (PDF)")}</a></li>