From 2e27d39f720c3bafc0af1e0b4307053aad49577f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Mar 2020 15:38:57 -0700 Subject: [PATCH 1/4] Drop .table-dark, .thead-dark, and .thead-light for utility classes --- scss/_tables.scss | 54 ------------------------------------- scss/_variables.scss | 11 -------- scss/mixins/_table-row.scss | 32 ++-------------------- 3 files changed, 2 insertions(+), 95 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index d5b3cddf213c..f56dc3615705 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -108,60 +108,6 @@ @include table-row-variant(active, $table-active-bg); -// Dark styles -// -// Same table markup, but inverted color scheme: dark background and light text. - -// stylelint-disable-next-line no-duplicate-selectors -.table { - .thead-dark { - th { - color: $table-dark-color; - background-color: $table-dark-bg; - border-color: $table-dark-border-color; - } - } - - .thead-light { - th { - color: $table-head-color; - background-color: $table-head-bg; - border-color: $table-border-color; - } - } -} - -.table-dark { - color: $table-dark-color; - background-color: $table-dark-bg; - - th, - td, - thead th { - border-color: $table-dark-border-color; - } - - &.table-bordered { - border: 0; - } - - &.table-striped { - tbody tr:nth-of-type(#{$table-striped-order}) { - background-color: $table-dark-accent-bg; - } - } - - &.table-hover { - tbody tr { - &:hover { - color: $table-dark-hover-color; - background-color: $table-dark-hover-bg; - } - } - } -} - - // Responsive tables // // Generate series of `.table-responsive-*` classes for configuring the screen diff --git a/scss/_variables.scss b/scss/_variables.scss index e4268c3f56cb..f29631c9917f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -467,17 +467,6 @@ $table-active-bg: $table-hover-bg !default; $table-border-width: $border-width !default; $table-border-color: $border-color !default; -$table-head-bg: $gray-200 !default; -$table-head-color: $gray-700 !default; -$table-head-border-color: $gray-700 !default; - -$table-dark-color: $white !default; -$table-dark-bg: $gray-800 !default; -$table-dark-accent-bg: rgba($white, .05) !default; -$table-dark-hover-color: $table-dark-color !default; -$table-dark-hover-bg: rgba($white, .075) !default; -$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; - $table-striped-order: odd !default; $table-caption-color: $text-muted !default; diff --git a/scss/mixins/_table-row.scss b/scss/mixins/_table-row.scss index 517229e1a729..80c9648c7e12 100644 --- a/scss/mixins/_table-row.scss +++ b/scss/mixins/_table-row.scss @@ -1,39 +1,11 @@ -// Tables - @mixin table-row-variant($state, $background, $border: null) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. .table-#{$state} { - &, - > th, - > td { - background-color: $background; - } + background-color: $background; @if $border != null { - th, - td, - thead th, - tbody + tbody { - border-color: $border; - } - } - } - - // Hover states for `.table-hover` - // Note: this is not available for cells or rows within `thead` or `tfoot`. - .table-hover { - $hover-background: darken($background, 5%); - - .table-#{$state} { - &:hover { - background-color: $hover-background; - - > td, - > th { - background-color: $hover-background; - } - } + border-color: $border; } } } From b69d53c58ac380b80f7c5817a50023ad68920297 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Mar 2020 15:40:27 -0700 Subject: [PATCH 2/4] Rewrite table styles to allow inheritance on border-color CSS doesn't allow inheriting `border-color` on td/th elements when using shorthand notation (e.g., `border: 1px solid #eee`). By separating the values, and disabling clean-css on these rulesets, we allow a single utility class on the `.table` to color our entire table's borders. --- scss/_tables.scss | 49 +++++++++++++++++++++++++++++--------------- scss/_variables.scss | 4 ++-- 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index f56dc3615705..5ba241ab6f0f 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -1,3 +1,5 @@ +// stylelint-disable comment-empty-line-before + // // Basic Bootstrap table // @@ -8,11 +10,17 @@ color: $table-color; vertical-align: $table-cell-vertical-align; background-color: $table-bg; // Reset for nesting within parents with `background-color`. + border-color: $table-border-color; th, td { padding: $table-cell-padding; - border-bottom: $table-border-width solid $table-border-color; + // Table cells will only inherit if you use longhand properties + /* clean-css ignore:start */ + border-color: inherit; + border-bottom-style: solid; + border-bottom-width: $table-border-width; + /* clean-css ignore:end */ } tbody { @@ -21,11 +29,14 @@ thead th { vertical-align: bottom; - border-bottom-color: $table-head-border-color; } tbody + tbody { - border-top: (2 * $table-border-width) solid $table-border-color; + /* clean-css ignore:start */ + border-color: inherit; + border-top-style: solid; + border-top-width: (2 * $table-border-width); + /* clean-css ignore:end */ } } @@ -47,18 +58,14 @@ // Add or remove borders all around the table and between all the columns. .table-bordered { - border: $table-border-width solid $table-border-color; + border-width: $table-border-width; th, td { - border: $table-border-width solid $table-border-color; - } - - thead { - th, - td { - border-bottom-width: 2 * $table-border-width; - } + /* clean-css ignore:start */ + border-style: solid; + border-width: $table-border-width; + /* clean-css ignore:end */ } } @@ -75,25 +82,33 @@ // // Default zebra-stripe styles (alternating gray and transparent backgrounds) +// stylelint-disable selector-max-type .table-striped { - tbody tr:nth-of-type(#{$table-striped-order}) { - background-color: $table-accent-bg; + > tbody > tr:nth-of-type(#{$table-striped-order}) { + > td, + > th { + background-image: linear-gradient($table-accent-bg, $table-accent-bg); + } } } +// stylelint-enable selector-max-type // Hover effect // // Placed here since it has to come after the potential zebra striping +// stylelint-disable selector-max-type .table-hover { - tbody tr { - &:hover { + > tbody > tr:hover { + > td, + > th { color: $table-hover-color; - background-color: $table-hover-bg; + background-image: linear-gradient($table-hover-bg, $table-hover-bg); } } } +// stylelint-enable selector-max-type // Table backgrounds diff --git a/scss/_variables.scss b/scss/_variables.scss index f29631c9917f..3317792d83fa 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -457,10 +457,10 @@ $table-cell-padding-sm: .25rem !default; $table-cell-vertical-align: top !default; -$table-color: $body-color !default; +$table-color: null !default; $table-bg: null !default; $table-accent-bg: rgba($black, .05) !default; -$table-hover-color: $table-color !default; +$table-hover-color: null !default; $table-hover-bg: rgba($black, .075) !default; $table-active-bg: $table-hover-bg !default; From a23b79ac4da9d038ca27fa2fe12dcdbfce006b9c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Mar 2020 15:42:23 -0700 Subject: [PATCH 3/4] Add new .bg-* and .border-* color utilities - New background-colors: gray-500, gray-700, and black - New border-colors: gray-400, gray-600, and black Note that the border colors are all one shade darker than the backgrounds so that they maintain some contrast. --- scss/_utilities.scss | 13 ++++++++++++- site/content/docs/4.3/utilities/borders.md | 6 +++++- site/content/docs/4.3/utilities/colors.md | 2 ++ 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1a85165dc2e3..50880fcfb68b 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -77,7 +77,15 @@ $utilities: map-merge( "border-color": ( property: border-color, class: border, - values: map-merge($theme-colors, ("white": $white)) + values: map-merge( + $theme-colors, + ( + "white": $white, + "gray-500": $gray-500, + "gray-700": $gray-700, + "black": $black + ) + ) ), // Sizing utilities "width": ( @@ -412,6 +420,9 @@ $utilities: map-merge( ( "body": $body-bg, "white": $white, + "black": black, + "gray-400": $gray-400, + "gray-600": $gray-600, "transparent": transparent ) ) diff --git a/site/content/docs/4.3/utilities/borders.md b/site/content/docs/4.3/utilities/borders.md index 5cf1ed29db69..8081bf7f36a1 100644 --- a/site/content/docs/4.3/utilities/borders.md +++ b/site/content/docs/4.3/utilities/borders.md @@ -32,7 +32,7 @@ Use border utilities to add or remove an element's borders. Choose from all bord ## Border color -Change the border color using utilities built on our theme colors. +Change the border color using utilities built on our theme colors. We've also included a subset of our gray colors to provide more flexibility. {{< example class="bd-example-border-utils" >}} {{< border.inline >}} @@ -40,7 +40,11 @@ Change the border color using utilities built on our theme colors. {{- end -}} {{< /border.inline >}} + + + + {{< /example >}} ## Border-radius diff --git a/site/content/docs/4.3/utilities/colors.md b/site/content/docs/4.3/utilities/colors.md index 62a35b059ca5..2762bccc067e 100644 --- a/site/content/docs/4.3/utilities/colors.md +++ b/site/content/docs/4.3/utilities/colors.md @@ -33,6 +33,8 @@ Similar to the contextual text color classes, easily set the background of an el
.bg-{{ .name }}
{{- end -}} {{< /colors.inline >}} +
.bg-gray-600
+
.bg-gray-400
.bg-white
.bg-transparent
{{< /example >}} From 438c09afd9e1d7e854b40bd94d8cd69bea70e329 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Mar 2020 15:43:10 -0700 Subject: [PATCH 4/4] Update table docs to reflect all the changes --- site/assets/scss/_content.scss | 4 + site/content/docs/4.3/content/tables.md | 344 +++++++++++++++++++++--- 2 files changed, 317 insertions(+), 31 deletions(-) diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index f264b523570b..18136efe73ae 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -59,6 +59,10 @@ } } + thead { + border-color: $gray-900; + } + // Prevent breaking of code td:first-child > code { white-space: nowrap; diff --git a/site/content/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md index 12aac11c9360..85b5b5db19ea 100644 --- a/site/content/docs/4.3/content/tables.md +++ b/site/content/docs/4.3/content/tables.md @@ -8,7 +8,9 @@ toc: true ## Overview -Due to the widespread use of `` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any `
`, then extend with our optional modifier classes or custom styles. **All table styles are inherited in Bootstrap**, meaning any nested tables will be styled in the same manner as the parent. +Due to the widespread use of `
` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any `
`, then extend with our optional modifier classes or custom styles. + +**All table styles are inherited in Bootstrap**, meaning any nested tables will be styled in the same manner as the parent. This keeps our selectors fast and lean, and ensures any custom CSS you need is as lightweight as possible, too. Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. @@ -45,14 +47,47 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
{{< /example >}} +Since `.table` styles are inherited, nested tables are styled just like their parent. In addition, we've explicitly written our CSS to allow `border` styles to be inherited (normally `border-color` defaults to the current text `color`). + +For example, to make your table headers stand out more, consider using a `.border-dark` utility on just the `` (or if you prefer, on every ``). + +{{< example >}} + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1.........
+{{< /example >}} + +Can't add classes yourself? Change it via custom Sass or CSS. + +{{< highlight scss >}} +thead { + border-color: $gray-900; +} +{{< /highlight >}} + ## Options ### Inverted -You can also invert the colors—with light text on dark backgrounds—with `.table-dark`. +Invert the colors of a table—with light text on dark backgrounds—via [utility classes]({{< docsref "/utilities/api" >}}). Below we've added three classes to accomplish this: `.bg-dark`, `.text-white`, and `.border-gray-700`. {{< example >}} - +
@@ -84,12 +119,10 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta
#
{{< /example >}} -### Striped rows - -Use `.table-striped` to add zebra-striping to any table row within the ``. +And because this happens with utilities, you have some flexibility in how you style your tables relative to their context. For example, **assuming your page is already dark gray** with lighter text, you don't need to set every utility on the ``—just `.border-gray-700`. -{{< example >}} -
+{{< example class="bg-dark text-white" >}} +
@@ -121,8 +154,12 @@ Use `.table-striped` to add zebra-striping to any table row within the ``
#
{{< /example >}} +### Bordered + +Add `.table-bordered` for borders on all sides of the table and cells. + {{< example >}} - +
@@ -146,20 +183,53 @@ Use `.table-striped` to add zebra-striping to any table row within the `` - - +
#
3Larrythe BirdLarry the Bird @twitter
{{< /example >}} -### Bordered +For this dark table, we've assumed a `background-color` and `color` is set by a parent element like `` to help show the ``'s outer border. If that's not the case for you, remember to add `.bg-dark` and `.text-white` to the `
`. -Add `.table-bordered` for borders on all sides of the table and cells. +{{< example class="bg-dark text-white" >}} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+{{< /example >}} + +### No borders + +Add `.table-borderless` for a table without borders. {{< example >}} - +
@@ -190,8 +260,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.
#
{{< /example >}} +`.table-borderless` can also be used on dark tables. + {{< example >}} - +
@@ -222,12 +294,14 @@ Add `.table-bordered` for borders on all sides of the table and cells.
#
{{< /example >}} -### No borders +### Striped rows -Add `.table-borderless` for a table without borders. +Use `.table-striped` to add zebra-striping to any table row within the ``. You can customize which rows are highlighted by changing the `$table-striped-order` variable from `odd` (default) to `even`. + +To ensure background colors also work with striped rows, we use a `background-image` gradient that will overlay onto any `background-color`. {{< example >}} - +
@@ -251,17 +325,18 @@ Add `.table-borderless` for a table without borders. - + +
#
3Larry the BirdLarrythe Bird @twitter
{{< /example >}} -`.table-borderless` can also be used on dark tables. +Works on dark backgrounds: {{< example >}} - +
@@ -285,7 +360,43 @@ Add `.table-borderless` for a table without borders. - + + + + + +
#
3Larry the BirdLarrythe Bird@twitter
+{{< /example >}} + +And also works with table color classes: + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -294,7 +405,7 @@ Add `.table-borderless` for a table without borders. ### Hoverable rows -Add `.table-hover` to enable a hover state on table rows within a ``. +Add `.table-hover` to enable a hover state on table rows within a ``. To ensure background colors also work with hovered rows, we use a `background-image` gradient that will overlay onto any `background-color`. {{< example >}}
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird @twitter
@@ -328,8 +439,44 @@ Add `.table-hover` to enable a hover state on table rows within a ``.
{{< /example >}} +And with hoverable striped tables: + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+{{< /example >}} + +`.table-hover` also works on dark tables: + {{< example >}} - +
@@ -360,6 +507,40 @@ Add `.table-hover` to enable a hover state on table rows within a ``.
#
{{< /example >}} +As well as table row colors: + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+{{< /example >}} + ### Small tables Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half. @@ -435,9 +616,9 @@ Table cells of `` are always vertical aligned to the bottom. Table cells {{< /example >}} -### Variants +## Theme colors -Use contextual classes to color table rows or individual cells. +Use contextual classes from the [our theme colors]({{< docsref "/getting-started/theming" >}}) (generated by the `$theme-colors` Sass map) to color your table rows or individual cells.
@@ -492,10 +673,10 @@ Use contextual classes to color table rows or individual cells. {{< /highlight >}} -Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{< docsref "/utilities/colors" >}}) to achieve similar styles. +For dark tables, we recommend using our [text or background utilities]({{< docsref "/utilities/colors" >}}) to achieve similar styles.
-
+
@@ -575,15 +756,106 @@ Regular table background variants are not available with the dark table, however {{< partial "callout-warning-color-assistive-technologies.md" >}} {{< /callout >}} +## Nesting + +{{< example >}} +
#
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
+ + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
AFirstLast
BFirstLast
CFirstLast
+
3Larrythe Bird@twitter
+{{< /example >}} + + ## Anatomy ### Table head -Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make ``s appear light or dark gray. +Similar to tables and dark tables, use utility classes to create different colors `` elements. Here we're using a combination of background-color (`.bg-*`), border-color (`.border-*`), and text color (`.color-`) to create different looks. {{< example >}} - + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ + + @@ -612,9 +884,15 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
# First
+{{< /example >}} + +### Table bodies +When multiple ``s are present, we automatically add a thicker border between them. By default, this border is twice as think as the rest of the table borders. + +{{< example >}} - + @@ -629,12 +907,16 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `. + + + +
# FirstOtto @mdo
2 Jacob Thornton @fat
3 Larry