From 6932ab8fd1b9aeaf808b52c55dd05c9a87955cd9 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 20 Sep 2024 10:55:15 +0000 Subject: [PATCH 1/2] chore(curriculum): add styling for pdf download banner --- client/src/curriculum/about.scss | 52 ++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/client/src/curriculum/about.scss b/client/src/curriculum/about.scss index 10b0568e1d34..75cd1f71f4b4 100644 --- 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); + } + } + } } } From 6670d71e019c9dfbad7d71e19165725b7c70d511 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 20 Sep 2024 10:59:37 +0000 Subject: [PATCH 2/2] wip(curriculum): use mixins --- client/src/curriculum/_mixins.scss | 31 ++++++++++++++++ client/src/curriculum/about.scss | 46 +++-------------------- client/src/curriculum/index.scss | 31 +--------------- client/src/ui/atoms/button/_mixins.scss | 49 +++++++++++++++++++++++++ 4 files changed, 88 insertions(+), 69 deletions(-) create mode 100644 client/src/curriculum/_mixins.scss create mode 100644 client/src/ui/atoms/button/_mixins.scss diff --git a/client/src/curriculum/_mixins.scss b/client/src/curriculum/_mixins.scss new file mode 100644 index 000000000000..0ac9573a8cd2 --- /dev/null +++ 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 index 75cd1f71f4b4..0a754dceca16 100644 --- 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 index 575e4f03f3e1..5926d8f0c760 100644 --- 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 new file mode 100644 index 000000000000..d6c6d84c448f --- /dev/null +++ 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; +}