diff options
author | jingwen <jingwen@google.com> | 2018-07-09 07:42:16 -0700 |
---|---|---|
committer | Copybara-Service <copybara-piper@google.com> | 2018-07-09 07:43:43 -0700 |
commit | ee62862c3dd52634ac5ec722b98b8a0c994e7155 (patch) | |
tree | 7af1711f8e877fb7cf942bbab80097758a36b44f /site/_sass | |
parent | 6fd4e0edd4de22dec9eda13dc0b29214f2ca117e (diff) |
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
Diffstat (limited to 'site/_sass')
-rw-r--r-- | site/_sass/style.scss | 6 | ||||
-rw-r--r-- | site/_sass/tables.scss | 63 |
2 files changed, 69 insertions, 0 deletions
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; + } +} |