feat: add styles for the details block (#2165)

Automattic · Jul 25, 2023 · 25832c3 · 25832c3
1 parent 81c52f5
commit 25832c3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/newspack-theme/sass/blocks/_blocks.scss b/newspack-theme/sass/blocks/_blocks.scss
@@ -1162,6 +1162,28 @@ hr {
 	}
 }
 
+//! Details block
+.wp-block-details {
+	border: solid var( --newspack-theme-color-border );
+	border-width: 1px 0;
+	padding: 0.5rem 1.5rem;
+
+	> :not(summary) {
+		margin-bottom: 16px;
+		margin-top: 16px;
+	}
+
+	summary {
+		font-family: var( --newspack-theme-font-heading );
+		margin-left: -1rem;
+	}
+
+	+ .wp-block-details {
+		border-top: 0;
+		margin-top: -32px;
+	}
+}
+
 //! Navigtation block
 .wp-block-navigation a {
 	text-decoration: none;

diff --git a/newspack-theme/sass/style-editor-base.scss b/newspack-theme/sass/style-editor-base.scss
@@ -998,6 +998,27 @@ ul.wp-block-archives,
 	}
 }
 
+/** === Details block === */
+.wp-block-details {
+	border: solid var( --newspack-theme-color-border );
+	border-width: 1px 0;
+	padding: 0.5rem 1.5rem;
+
+	> :not(summary) {
+		margin-bottom: 16px;
+		margin-top: 16px;
+	}
+
+	summary {
+		font-family: var( --newspack-theme-font-heading );
+	}
+
+	+ .wp-block-details {
+		border-top: 0;
+		margin-top: -28px;
+	}
+}
+
 /** === Organic Profile Block === */
 .wp-block-organic-profile-block {
 	box-shadow: none;