Quadrat: Add table styles (#3719)

* Quadrat: Add styles for tables * Add tbody for extra specificity * Add a border to the top of the first row * Remove text-align. Co-authored-by: Jeff Ong <jonger4@gmail.com>
Automattic · May 6, 2021 · 6207327 · 6207327
1 parent c16e07d
commit 6207327
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css
diff --git a/quadrat/sass/blocks/_table.scss b/quadrat/sass/blocks/_table.scss
@@ -0,0 +1,19 @@
+.wp-block-table {
+	th {
+		font-weight: 500;
+	}
+
+	tbody td { // tbody adds the specificity needed to override the default Gutenberg styles
+		border-bottom-width: 0;
+		border-top-width: 0;
+		vertical-align: top;
+	}
+
+	tr:first-child td {
+		border-top-width: 1px;
+	}
+
+	tr:last-child td {
+		border-bottom-width: 1px;
+	}
+}
diff --git a/quadrat/sass/theme.scss b/quadrat/sass/theme.scss
@@ -1,6 +1,7 @@
 @import "../../blank-canvas-blocks/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
 @import "blocks/cover";
-@import "blocks/media-text";
 @import "blocks/list";
+@import "blocks/media-text";
+@import "blocks/table";
 @import "header";
 @import "utility";