Adds styling options for background-color-offset component (#414)

* Adds styling options for background-color-offset component
minvws · Nov 29, 2023 · 6f00beb · 6f00beb
1 parent 94370b7
commit 6f00beb
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 4 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -58,7 +58,7 @@ <h2>Ontstaan van Manon</h2>
       </div>
     </section>
 
-    <section>
+    <section class="background-color-offset">
       <div>
         <h2>Wat is Manon</h2>
         <p>

diff --git a/docs/scss/themes/soft/background-color-offset.scss b/docs/scss/themes/soft/background-color-offset.scss
@@ -0,0 +1,9 @@
+/* Backgroundcolor offset */
+
+:root {
+  --background-color-offset-background-color: #f0f0f0;
+  --background-color-offset-margin-top: var(--content-padding-top);
+  --background-color-offset-margin-bottom: var(--content-padding-bottom);
+  --background-color-offset-padding-top: calc(var(--content-padding-top) * 2);
+  --background-color-offset-padding-bottom: calc(var(--content-padding-bottom) * 2);
+}
diff --git a/docs/scss/themes/soft/theme.scss b/docs/scss/themes/soft/theme.scss
@@ -1,5 +1,4 @@
 /* Theme: Soft based on manon components */
-
 /* Base - Top level styling */
 @use "application-base";
 /* Styling on the highest level */
@@ -18,4 +17,5 @@
 @use "breadcrumb-bar";
 @use "tile";
 @use "header-navigation";
-@use "logo";
+@use "logo";
+@use "background-color-offset";
diff --git a/manon/background-color-offset-variables.scss b/manon/background-color-offset-variables.scss
@@ -3,5 +3,4 @@
 /*----------------------------------------------------------------------*/
 :root {
   --background-color-offset-background-color: #f0f0f0;
-  /* --background-color-offset-text-color: ; */
 }
diff --git a/manon/background-color-offset.scss b/manon/background-color-offset.scss
@@ -6,4 +6,17 @@
 .background-color-offset {
   background-color: var(--background-color-offset-background-color);
   color: var(--background-color-offset-text-color);
+  margin-top: var(--background-color-offset-margin-top);
+  margin-bottom: var(--background-color-offset-margin-bottom);
+  padding-top: var(--background-color-offset-padding-top);
+  padding-bottom: var(--background-color-offset-padding-bottom);
+
+  > div {
+    margin-top: var(--background-color-offset-content-wrapper-margin-top);
+    margin-bottom: var(--background-color-offset-content-wrapper-margin-bottom);
+    padding-top: var(--background-color-offset-content-wrapper-padding-top);
+    padding-bottom: var(
+      --background-color-offset-content-wrapper-padding-bottom
+    );
+  }
 }