chore(curriculum): add styling for pdf download banner (#11834)

mdn · Sep 30, 2024 · 8e5c55e · 8e5c55e
1 parent 71cf8a9
commit 8e5c55e
Showing 1 changed file with 52 additions and 0 deletions.
diff --git a/client/src/curriculum/about.scss b/client/src/curriculum/about.scss
@@ -1,3 +1,5 @@
+@use "../ui/vars" as *;
+
 .curriculum-content-container.curriculum-about {
   .curriculum-content {
     // Workaround so last toc item works.
@@ -40,5 +42,55 @@
         content: var(--curriculum-about-not);
       }
     }
+
+    h3#educators + .section-content blockquote:not(.curriculum-notes) {
+      align-items: center;
+      // PDF download banner
+
+      background-color: var(--curriculum-bg-color-note);
+      border: 0;
+      border-radius: var(--elem-radius);
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      margin: 1rem;
+      padding: 1rem;
+
+      > p:last-child a:only-child {
+        --button-bg: var(--button-secondary-default);
+        --button-border-color: var(--border-primary);
+        --button-color: var(--text-secondary);
+        --button-bg-hover: var(--button-secondary-hover);
+        --button-bg-active: var(--button-secondary-active);
+
+        --button-font: var(--type-emphasis-m);
+        --button-padding: 0.43rem 1rem;
+        --button-radius: 0.25rem;
+
+        background-color: var(--button-bg);
+        border: 1px solid var(--button-border-color);
+        border-radius: var(--button-radius);
+        color: var(--button-color);
+        display: inline-block;
+        font: var(--button-font);
+        letter-spacing: normal;
+        padding: var(--button-padding);
+        text-align: center;
+        text-decoration: none;
+
+        &.external:after {
+          display: none;
+        }
+
+        &:hover {
+          --button-border-color: var(--button-bg-hover);
+          --button-bg: var(--button-bg-hover);
+        }
+
+        &:active {
+          --button-bg: var(--button-bg-active);
+        }
+      }
+    }
   }
 }