Merge pull request #137 from openstax/k12-579/Implement-student-refle…

…ction-boxes Add student-reflection and utility styles
openstax · Dec 19, 2023 · 7383078 · 7383078
2 parents d8480d5 + 4125851
commit 7383078
Show file tree

Hide file tree

Showing 13 changed files with 305 additions and 61 deletions.
diff --git a/docs/static/alignitemscenter.png b/docs/static/alignitemscenter.png
diff --git a/docs/static/justifycontentbetween.png b/docs/static/justifycontentbetween.png
diff --git a/docs/static/justifycontentcenter.png b/docs/static/justifycontentcenter.png
diff --git a/docs/static/justifycontentevenly.png b/docs/static/justifycontentevenly.png
diff --git a/docs/static/osraisedflex.png b/docs/static/osraisedflex.png
diff --git a/docs/static/osraisedflexnowrap.png b/docs/static/osraisedflexnowrap.png
diff --git a/docs/static/osraisegap.png b/docs/static/osraisegap.png
diff --git a/docs/static/osraisegap1.png b/docs/static/osraisegap1.png
diff --git a/docs/static/osraisegap2.png b/docs/static/osraisegap2.png
diff --git a/docs/static/studentreflectionbox.png b/docs/static/studentreflectionbox.png
diff --git a/docs/static/studentreflectionboxbc.png b/docs/static/studentreflectionboxbc.png
diff --git a/docs/styles.md b/docs/styles.md
diff --git a/src/styles/content.scss b/src/styles/content.scss
@@ -254,6 +254,18 @@ table.os-raise-horizontaltable {
   row-gap: 5rem;
 }
 
+.os-raise-d-flex-nowrap {
+  display: flex;
+}
+
+.os-raise-gap-1 {
+  gap: 1rem;
+}
+
+.os-raise-gap-2 {
+  gap: 2rem;
+}
+
 .os-raise-align-items-center {
   align-items: center;
 }
@@ -335,4 +347,19 @@ table.os-raise-horizontaltable {
 .os-raise-extrasupport a {
   color: #0A3E5B;
   text-decoration: underline;
+}
+
+// Student Reflection Styles
+.os-raise-student-reflection {
+  border: .0625rem solid $raise-graybox;
+  border-top: solid $os-dark-green;
+  border-radius: .5rem;
+  background-color: $raise-graybox;
+  padding: .75rem;
+}
+
+.os-raise-student-reflection .os-raise-student-reflection-title {
+  color: $os-dark-green;
+  font-weight: 700;
+  font-size: 1.25rem;
 }