feat: complete type refactor

platform-coop-toolkit · Jan 24, 2020 · 31b4707 · 31b4707
1 parent 5418a4f
commit 31b4707
Show file tree

Hide file tree

Showing 5 changed files with 187 additions and 230 deletions.
diff --git a/src/assets/styles/common/typography/_blockquotes.scss b/src/assets/styles/common/typography/_blockquotes.scss
@@ -32,6 +32,10 @@ blockquote cite::before {
 	content: "— ";
 }
 
+* + blockquote {
+	margin-top: rem(24);
+}
+
 @include breakpoint-up(sm) {
 	blockquote {
 		margin-right: rem(48);

diff --git a/src/assets/styles/common/typography/_headings.scss b/src/assets/styles/common/typography/_headings.scss
@@ -57,81 +57,202 @@
 	}
 }
 
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4 {
-	margin-bottom: 0;
-	margin-top: 0;
-}
-
-h1,
-.h1 {
-	@extend %h1;
-}
-
-h2,
-.h2 {
+%h2 {
 	font-family: $font-family-display;
 	font-size: rem(28);
 	font-weight: $font-weight-bold;
 	line-height: (36 / 28);
+	margin-bottom: 0;
+	margin-top: 0;
+
+	+ *,
+	+ p,
+	+ ul,
+	+ ol {
+		margin-top: rem(24);
+	}
+
+	&.screen-reader-text {
+		+ *,
+		+ p,
+		+ ul,
+		+ ol {
+			margin-top: 0;
+		}
+	}
+
+	* + & {
+		margin-top: rem(48);
+	}
+
+	h1 + & {
+		margin-top: rem(36);
+	}
+
+	@include breakpoint-up(sm) {
+		font-size: rem(28);
+		line-height: (40 / 28);
+
+		* + & {
+			margin-top: rem(56);
+		}
+
+		h1 + & {
+			margin-top: rem(44);
+		}
+	}
+
+	@include breakpoint-up(md) {
+		font-size: rem(36);
+		line-height: (48 / 36);
+
+		+ *,
+		+ p,
+		+ ul,
+		+ ol {
+			margin-top: rem(32);
+		}
+
+		* + & {
+			margin-top: rem(64);
+		}
+
+		h1 + & {
+			margin-top: rem(56);
+		}
+	}
 }
 
-h3,
-.h3 {
+%h3 {
 	font-family: $font-family-display;
 	font-size: rem(24);
 	font-weight: $font-weight-semibold;
 	line-height: (32 / 24);
+	margin-bottom: 0;
+	margin-top: 0;
+
+	+ *,
+	+ p,
+	+ ul,
+	+ ol {
+		margin-top: rem(24);
+	}
+
+	&.screen-reader-text {
+		+ *,
+		+ p,
+		+ ul,
+		+ ol {
+			margin-top: 0;
+		}
+	}
+
+	* + & {
+		margin-top: rem(40);
+	}
+
+	h2 + & {
+		margin-top: rem(28);
+	}
+
+	@include breakpoint-up(sm) {
+		font-size: rem(24);
+		line-height: (36 / 24);
+
+		* + & {
+			margin-top: rem(48);
+		}
+
+		h2 + & {
+			margin-top: rem(32);
+		}
+	}
+
+	@include breakpoint-up(md) {
+		font-size: rem(28);
+		line-height: (40 / 28);
+
+		* + & {
+			margin-top: rem(56);
+		}
+
+		h2 + & {
+			margin-top: rem(44);
+		}
+	}
 }
 
-h4,
-.h4 {
+%h4 {
 	font-family: $font-family-sans;
 	font-size: rem(18);
 	font-weight: $font-weight-semibold;
 	line-height: (26 / 18);
-}
+	margin-bottom: 0;
+	margin-top: 0;
 
-@include breakpoint-up(sm) {
-	h2,
-	.h2 {
-		font-size: rem(28);
-		line-height: (40 / 28);
+	+ *,
+	+ p,
+	+ ul,
+	+ ol {
+		margin-top: rem(24);
 	}
 
-	h3,
-	.h3 {
-		font-size: rem(24);
-		line-height: (36 / 24);
+	&.screen-reader-text {
+		+ *,
+		+ p,
+		+ ul,
+		+ ol {
+			margin-top: 0;
+		}
 	}
 
-	h4,
-	.h4 {
-		font-size: rem(20);
-		line-height: (32 / 20);
+	* + & {
+		margin-top: rem(32);
 	}
-}
 
-@include breakpoint-up(md) {
-	h2,
-	.h2 {
-		font-size: rem(36);
-		line-height: (48 / 36);
+	h3 + & {
+		margin-top: rem(24);
 	}
 
-	h3,
-	.h3 {
-		font-size: rem(28);
-		line-height: (40 / 28);
+	@include breakpoint-up(sm) {
+		font-size: rem(20);
+		line-height: (32 / 20);
+
+		* + & {
+			margin-top: rem(40);
+		}
 	}
 
-	h4,
-	.h4 {
+	@include breakpoint-up(md) {
 		font-size: rem(20);
 		line-height: (32 / 20);
+
+		* + & {
+			margin-top: rem(48);
+		}
+
+		h3 + & {
+			margin-top: rem(32);
+		}
 	}
 }
+
+h1,
+.h1 {
+	@extend %h1;
+}
+
+h2,
+.h2 {
+	@extend %h2;
+}
+
+h3,
+.h3 {
+	@extend %h3;
+}
+
+h4,
+.h4 {
+	@extend %h4;
+}
diff --git a/src/assets/styles/common/typography/_lists.scss b/src/assets/styles/common/typography/_lists.scss
@@ -12,3 +12,13 @@ li {
 li::marker {
 	color: $grey-600;
 }
+
+li + li {
+	margin-top: rem(16);
+}
+
+* + ul,
+* + ol {
+	margin-bottom: 0;
+	margin-top: rem(24);
+}
diff --git a/src/assets/styles/common/typography/_paragraphs.scss b/src/assets/styles/common/typography/_paragraphs.scss
@@ -12,3 +12,8 @@ p small {
 	font-size: rem(14);
 	line-height: (20 / 14);
 }
+
+* + p {
+	margin-bottom: 0;
+	margin-top: rem(24);
+}