Adds code styling options and fixes docs code (block) styling

minvws · Oct 3, 2024 · 875a99c · 875a99c
1 parent 2e5e3e6
commit 875a99c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 9 deletions.
diff --git a/docs/src/lib/Code.svelte b/docs/src/lib/Code.svelte
@@ -25,11 +25,3 @@
 </script>
 
 <pre><code>{@html highlighted}</code></pre>
-
-<style>
-  code {
-    padding: 1rem;
-    overflow-x: auto;
-    background-color: #ffffff;
-  }
-</style>
diff --git a/manon/code-base.scss b/manon/code-base.scss
@@ -10,7 +10,7 @@ $breakpoint: 24rem !default;
   color: var(--code-base-text-color, inherit);
   width: 100%;
   word-break: var(--code-base-word-break, inherit);
-  padding: var(--code-base-padding, inherit);
+  padding: var(--code-base-padding, 0);
 
   @media (width >= $breakpoint) {
     word-break: var(--code-base-breakpoint-word-break, break-word);

diff --git a/manon/code-block.scss b/manon/code-block.scss
@@ -7,6 +7,7 @@ pre,
 div.code-block {
   display: flex;
   overflow: auto;
+  overflow-x: auto;
   width: 100%;
   max-width: var(--code-block-max-width);
   box-sizing: border-box;
@@ -20,6 +21,8 @@ div.code-block {
 
   > code {
     white-space: unset;
+    background-color: var(--code-block-code-background-color);
+    padding: var(--code-block-code-padding);
   }
 }
 

diff --git a/themes/icore-open/components/code.scss b/themes/icore-open/components/code.scss
@@ -6,4 +6,7 @@
   --code-base-base-background-color: #{color-scheme.$oc-gray-1};
   --code-base-base-text-color: var(--application-base-text-color);
   --code-base-padding: 0 0.5rem;
+
+  --code-block-code-background-color: #fff;
+  --code-block-code-padding: 1rem;
 }