From ee62862c3dd52634ac5ec722b98b8a0c994e7155 Mon Sep 17 00:00:00 2001
From: jingwen <jingwen@google.com>
Date: Mon, 9 Jul 2018 07:42:16 -0700
Subject: Sync jmmv@'s table styles for the docs.bazel.build site.

Sources:

https://github.com/bazelbuild/bazel-blog/commit/846478d6943162f4c4d7d50001069e0ca7b2ec28
https://github.com/bazelbuild/bazel-blog/commit/aacaa25314678c08772372b3d46697f7963bb201

RELNOTES: None.
PiperOrigin-RevId: 203763253
---
 site/_config.yml       |  2 ++
 site/_sass/style.scss  |  6 +++++
 site/_sass/tables.scss | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++
 site/css/main.scss     |  1 +
 4 files changed, 72 insertions(+)
 create mode 100644 site/_sass/tables.scss

(limited to 'site')

diff --git a/site/_config.yml b/site/_config.yml
index ef23bc0765..17986c7564 100644
--- a/site/_config.yml
+++ b/site/_config.yml
@@ -1,5 +1,7 @@
 destination: production
 markdown: redcarpet
+redcarpet:
+  extensions: ["tables"]
 paginate: 10
 highlighter: pygments
 sass:
diff --git a/site/_sass/style.scss b/site/_sass/style.scss
index 9784b7e420..33f75e36d9 100644
--- a/site/_sass/style.scss
+++ b/site/_sass/style.scss
@@ -16,6 +16,12 @@ $text-color: #444;
 
 $vpad: 20px;
 
+$table-bg: #fff;
+$table-cell-padding: 5px;
+$table-border-color: $bazel-green;
+$text-muted: $color-on-bazel-green;
+$line-height-base: 20px;
+$line-height-computed: 20px;
 
 html {
   position: relative;
diff --git a/site/_sass/tables.scss b/site/_sass/tables.scss
new file mode 100644
index 0000000000..fe4edd7cf0
--- /dev/null
+++ b/site/_sass/tables.scss
@@ -0,0 +1,63 @@
+// Bootstrap requires tables to carry a .table class in order for styling to
+// be applied. However, redcarpet emits table elements without the class and
+// it is not possible to customize it.
+//
+// Ideally, we would use a SASS directive to make the table element inherit
+// the formatting defined by the bootstrap templates... but we cannot do so
+// at the moment because we don't build bootstrap ourselves from its SASS
+// sources. Therefore, this file just borrows the minimal amount of code
+// from bootstrap 3.3.7 to render tables nicely.
+
+caption {
+  padding-top: $table-cell-padding;
+  padding-bottom: $table-cell-padding;
+  color: $text-muted;
+  text-align: left;
+}
+
+th {
+  text-align: left;
+}
+
+// Baseline styles
+
+table {
+  background-color: $table-bg;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: $line-height-computed;
+  // Cells
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        padding: $table-cell-padding;
+        line-height: $line-height-base;
+        vertical-align: top;
+        border-top: 1px solid $table-border-color;
+      }
+    }
+  }
+  // Bottom align for column headings
+  > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 2px solid $table-border-color;
+  }
+  // Remove top border from thead by default
+  > caption + thead,
+  > colgroup + thead,
+  > thead:first-child {
+    > tr:first-child {
+      > th,
+      > td {
+        border-top: 0;
+      }
+    }
+  }
+  // Account for multiple tbody instances
+  > tbody + tbody {
+    border-top: 2px solid $table-border-color;
+  }
+}
diff --git a/site/css/main.scss b/site/css/main.scss
index 402b94f682..bc6a3b3310 100644
--- a/site/css/main.scss
+++ b/site/css/main.scss
@@ -7,5 +7,6 @@
 @import "sidebar.scss";
 @import "docs.scss";
 @import "be.scss";
+@import "tables.scss";
 
 @import "syntax.scss";
-- 
cgit v1.2.3