wip(curriculum): use mixins

mdn · Sep 20, 2024 · 6670d71 · 6670d71
1 parent 6932ab8
commit 6670d71
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 69 deletions.
diff --git a/client/src/curriculum/_mixins.scss b/client/src/curriculum/_mixins.scss
@@ -0,0 +1,31 @@
+@mixin note {
+  background-color: var(--curriculum-bg-color-note);
+  border: 0;
+  border-radius: var(--elem-radius);
+  margin: 1rem;
+  padding: 1rem;
+
+  ol,
+  ul {
+    padding-left: 1rem;
+
+    li:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ol,
+  ul,
+  p {
+    margin-top: 0.5rem;
+  }
+
+  > p:first-child {
+    // The "Notes:" paragraph.
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/client/src/curriculum/about.scss b/client/src/curriculum/about.scss
@@ -1,4 +1,6 @@
 @use "../ui/vars" as *;
+@use "mixins" as curriculum;
+@use "../ui/atoms/button/mixins" as button;
 
 .curriculum-content-container.curriculum-about {
   .curriculum-content {
@@ -44,51 +46,15 @@
     }
 
     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);
+      @include curriculum.note;
 
-        --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);
+      > p:last-child {
         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);
+        a:only-child {
+          @include button.secondary;
         }
       }
     }

diff --git a/client/src/curriculum/index.scss b/client/src/curriculum/index.scss
@@ -1,4 +1,5 @@
 @use "../ui/vars" as *;
+@use "mixins" as curriculum;
 
 .curriculum {
   --background-toc-active: var(--curriculum-bg-color);
@@ -227,35 +228,7 @@
       }
 
       blockquote.curriculum-notes {
-        background-color: var(--curriculum-bg-color-note);
-        border: 0;
-        border-radius: var(--elem-radius);
-        margin: 1rem;
-        padding: 1rem;
-
-        ol,
-        ul {
-          padding-left: 1rem;
-
-          li:last-child {
-            margin-bottom: 0;
-          }
-        }
-
-        ol,
-        ul,
-        p {
-          margin-top: 0.5rem;
-        }
-
-        > p:first-child {
-          // The "Notes:" paragraph.
-          margin-top: 0;
-        }
-
-        > :last-child {
-          margin-bottom: 0;
-        }
+        @include curriculum.note;
       }
 
       p.curriculum-outcomes {

diff --git a/client/src/ui/atoms/button/_mixins.scss b/client/src/ui/atoms/button/_mixins.scss
@@ -0,0 +1,49 @@
+@mixin _button {
+  --button-font: var(--type-emphasis-m);
+  --button-padding: 0.43rem 1rem;
+  --button-radius: var(--elem-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);
+  }
+}
+
+@mixin primary {
+  --button-bg: var(--button-primary-default);
+  --button-bg-hover: var(--button-primary-hover);
+  --button-bg-active: var(--button-primary-active);
+  --button-border-color: var(--button-primary-default);
+  --button-color: var(--background-primary);
+
+  @include _button;
+}
+
+@mixin secondary {
+  --button-bg: var(--button-secondary-default);
+  --button-bg-hover: var(--button-secondary-hover);
+  --button-bg-active: var(--button-secondary-active);
+  --button-border-color: var(--border-primary);
+  --button-color: var(--text-secondary);
+
+  @include _button;
+}