From fd94be6a0162b5ebf7c541b5fdbaaeef61f097de Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 13 Jan 2014 15:16:59 -0500
Subject: [PATCH] LMS: resolves missing certificate download button styling *
 adds in Sass placeholder to mirror older/inherited button styling used in LMS
 * uses light theming Sass variables for button styling * adds specific
 selector for certificate download button

---
 lms/static/sass/elements/_controls.scss       | 38 +++++++++++++++++++
 lms/static/sass/multicourse/_dashboard.scss   | 10 +++--
 .../_dashboard_certificate_information.html   |  2 +-
 3 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss
index b1e323effc..30629537da 100644
--- a/lms/static/sass/elements/_controls.scss
+++ b/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;
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 8254654b34..6d6a782b73 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/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;
+          }
+        }
       }
     }
 
diff --git a/lms/templates/dashboard/_dashboard_certificate_information.html b/lms/templates/dashboard/_dashboard_certificate_information.html
index 3222b6aae8..99548a8cc4 100644
--- a/lms/templates/dashboard/_dashboard_certificate_information.html
+++ b/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>