Merge pull request #678 from danskernesdigitalebibliotek/DDFFORM-399-…

…citat-skal-styles Refactor blockquote CSS in `rich-text.scss`
danskernesdigitalebibliotek · Jul 8, 2024 · f8ca9d9 · f8ca9d9
2 parents b099f9d + 6f5a7e4
commit f8ca9d9
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/src/stories/Library/rich-text/rich-text.scss b/src/stories/Library/rich-text/rich-text.scss
@@ -68,12 +68,19 @@ $_max-width-rich-text: $block-max-width__small;
   }
 
   blockquote {
-    $_quote-indicator-width: 10px;
+    $_quote-indicator-width: 3px;
+    $_padding-left: $_quote-indicator-width + $s-lg;
+    $_position-left--large-screen: $s-md;
 
+    @include typography($typo_quotes);
     position: relative;
-    padding-top: $s-md;
-    padding-bottom: $s-md;
-    padding-left: $_quote-indicator-width + $s-md;
+    padding-top: $s-sm;
+    padding-bottom: $s-sm;
+    padding-left: $_padding-left;
+
+    @include media-query__small {
+      padding-left: $_padding-left + $_position-left--large-screen;
+    }
 
     &::before {
       position: absolute;
@@ -83,6 +90,15 @@ $_max-width-rich-text: $block-max-width__small;
       bottom: 0;
       width: $_quote-indicator-width;
       background-color: $color__identity-primary;
+
+      @include media-query__small {
+        left: $_position-left--large-screen;
+      }
+    }
+
+    // Make space between elements in a blockquote.
+    & > *:not(:last-child) {
+      margin-bottom: $s-lg;
     }
   }
 

diff --git a/src/styles/scss/tools/variables.typography.scss b/src/styles/scss/tools/variables.typography.scss
@@ -359,3 +359,17 @@ $typo__card-placeholder--grid: (
       line-height: 24px,
     ),
 );
+
+$typo_quotes: (
+  mobile: (
+    color: $color__global-grey,
+    font-family: $font__body,
+    font-weight: 600,
+    font-size: 16px,
+    line-height: 24px,
+  ),
+  medium: (
+    font-size: 18px,
+    line-height: 32px,
+  ),
+);