From 0884f55767d693b56b71a9e366b6205d4c2cbdcf Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Mon, 19 Oct 2020 15:23:21 -0700
Subject: [PATCH] Unify blockquote spacing and border style with Design Style
 Guide

Unifying blockquote spacing and border style with Design Style Guide.
Also ensuring that blockquote children don't apply inherited whitespace.

Bug: T265947
Change-Id: I43a6951c17376fe3fdd4d24966ec4661c18ffd87
---
 .../common/typography.less                    | 19 +++++++++++++++++++
 variables.less                                |  2 ++
 2 files changed, 21 insertions(+)

diff --git a/resources/skins.vector.styles/common/typography.less b/resources/skins.vector.styles/common/typography.less
index 75b99df..285e39b 100644
--- a/resources/skins.vector.styles/common/typography.less
+++ b/resources/skins.vector.styles/common/typography.less
@@ -124,6 +124,25 @@ pre,
 	p {
 		margin: 0.5em 0;
 	}
+
+	blockquote {
+		border-left: @border-start-blockquote;
+		padding: @padding-blockquote;
+
+		// Ensure not to inherit whitespace mashing margins on child elements.
+		> :first-child {
+			margin-top: 0;
+		}
+
+		> :last-child {
+			margin-bottom: 0;
+		}
+
+		> :only-child {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
 }
 
 // External links
diff --git a/variables.less b/variables.less
index 9d71df0..034c7c4 100644
--- a/variables.less
+++ b/variables.less
@@ -63,9 +63,11 @@
 @border-color-portal-heading: #c8ccd1;
 // Use `rgba()` notation for better Safari support, see T254489.
 @border-color-portal-heading-transparent: rgba( red( @border-color-portal-heading ), green( @border-color-portal-heading ), blue( @border-color-portal-heading ), 0 );
+@border-start-blockquote: 4px @border-style-base #eaecf0;
 @padding-content: 1em;
 @padding-top-content: 1.25em;
 @padding-horizontal-content: 0.5em;
+@padding-blockquote: 8px 32px;
 
 // Navigation
 @background-color-secondary: #f6f6f6;