root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Prevent nested tables style leaks

This commit is contained in:
Martijn Cuppens 2020-03-24 15:00:00 +01:00
parent ffb19e925c
commit d089a683c8
10 changed files with 642 additions and 712 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_mixins.scss
View File

@ -27,7 +27,7 @@
@import "mixins/lists";
@import "mixins/list-group";
@import "mixins/forms";
@import "mixins/table-row";
@import "mixins/table-variants";
// Skins
@import "mixins/background-variant";

11
scss/_reboot.scss
View File

@ -374,6 +374,17 @@ th {
text-align: -webkit-match-parent; // 2
}
thead,
tbody,
tfoot,
tr,
td,
th {
border-color: inherit;
border-style: solid;
border-width: 0;
}
// Forms
//

159
scss/_tables.scss
View File

@ -3,29 +3,45 @@
//
.table {
--table-bg: #{$table-bg};
--table-accent-bg: transparent;
--table-striped-color: #{$table-striped-color};
--table-striped-bg: #{$table-striped-bg};
--table-active-color: #{$table-active-color};
--table-active-bg: #{$table-active-bg};
--table-hover-color: #{$table-hover-color};
--table-hover-bg: #{$table-hover-bg};
width: 100%;
margin-bottom: $spacer;
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 {
// Target th & td
// We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
// We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
// Another advantage is that this generates less code and makes the selector less specific making it easier to override.
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding;
border-bottom: $table-border-width solid $table-border-color;
background-color: var(--table-bg);
background-image: linear-gradient(var(--table-accent-bg), var(--table-accent-bg));
border-bottom-width: $table-border-width;
}
tbody {
> tbody {
vertical-align: inherit;
}
thead th {
> thead {
vertical-align: bottom;
border-bottom-color: $table-head-border-color;
}
tbody + tbody {
border-top: (2 * $table-border-width) solid $table-border-color;
// Highlight border color between thead, tbody and tfoot.
// stylelint-disable-next-line selector-max-universal
> :not(:last-child) > :last-child > * {
border-bottom-color: currentColor;
}
}
@ -34,7 +50,9 @@
// Change placement of captions with a class
//
.caption-top { caption-side: top; }
.caption-top {
caption-side: top;
}
//
@ -42,8 +60,8 @@
//
.table-sm {
th,
td {
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-sm;
}
}
@ -52,29 +70,28 @@
// Border versions
//
// Add or remove borders all around the table and between all the columns.
//
// When borders are added on all sides of the cells, the corners can render odd when
// these borders do not have the same color or if they are semi-transparent.
// Therefor we add top and border bottoms to the `tr`s and left and right borders
// to the `td`s or `th`s
.table-bordered {
border: $table-border-width solid $table-border-color;
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * {
border-width: $table-border-width 0;
th,
td {
border: $table-border-width solid $table-border-color;
}
thead {
th,
td {
border-bottom-width: 2 * $table-border-width;
// stylelint-disable-next-line selector-max-universal
> * {
border-width: 0 $table-border-width;
}
}
}
.table-borderless {
th,
td,
thead th,
tbody + tbody {
border: 0;
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
border-bottom-width: 0;
}
}
@ -83,92 +100,42 @@
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-accent-bg;
> tbody > tr:nth-of-type(#{$table-striped-order}) {
--table-accent-bg: var(--table-striped-bg);
color: var(--table-striped-color);
}
}
// Active table
//
// The `.table-active` class can be added to highlight rows or cells
.table-active {
--table-accent-bg: var(--table-active-bg);
color: var(--table-active-color);
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody tr {
&:hover {
color: $table-hover-color;
background-color: $table-hover-bg;
}
> tbody > tr:hover {
--table-accent-bg: var(--table-hover-bg);
color: var(--table-hover-color);
}
}
// Table backgrounds
// Table variants
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
// Table variants set the table cell backgrounds, border colors
// and the colors of the striped, hovered & active tables
@each $color, $value in $theme-colors {
@include table-row-variant($color, color-level($value, $table-bg-level), color-level($value, $table-border-level));
@each $color, $value in $table-variants {
@include table-variant($color, $value);
}
@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

44
scss/_variables.scss
View File

@ -465,38 +465,48 @@ $mark-bg: #fcf8e3 !default;
//
// Customizes the `.table` component with basic values, each used across all table variations.
// scss-docs-start table-variables
$table-cell-padding: .5rem !default;
$table-cell-padding-sm: .25rem !default;
$table-cell-vertical-align: top !default;
$table-color: $body-color !default;
$table-bg: null !default;
$table-accent-bg: rgba($black, .05) !default;
$table-hover-color: $table-color !default;
$table-hover-bg: rgba($black, .075) !default;
$table-active-bg: $table-hover-bg !default;
$table-bg: transparent !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
$table-active-bg: rgba($black, $table-active-bg-factor) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
$table-border-factor: .1 !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;
$table-bg-level: -9 !default;
$table-border-level: -6 !default;
$table-variants: (
"primary": color-level($primary, $table-bg-level),
"secondary": color-level($secondary, $table-bg-level),
"success": color-level($success, $table-bg-level),
"info": color-level($info, $table-bg-level),
"warning": color-level($warning, $table-bg-level),
"danger": color-level($danger, $table-bg-level),
"light": $light,
"dark": $dark,
) !default;
// scss-docs-end table-variables
// Buttons + Forms

39
scss/mixins/_table-row.scss
View File

@ -1,39 +0,0 @@
// 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;
}
@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;
}
}
}
}
}

21
scss/mixins/_table-variants.scss Normal file
View File

@ -0,0 +1,21 @@
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
--table-bg: #{$background};
--table-striped-bg: #{$striped-bg};
--table-striped-color: #{color-contrast($striped-bg)};
--table-active-bg: #{$active-bg};
--table-active-color: #{color-contrast($active-bg)};
--table-hover-bg: #{$hover-bg};
--table-hover-color: #{color-contrast($hover-bg)};
color: $color;
border-color: mix($color, $background, percentage($table-border-factor));
}
}
// scss-docs-end table-variant

1016
site/content/docs/4.3/content/tables.md
View File

File diff suppressed because it is too large Load Diff

5
site/content/docs/4.3/migration.md
View File

@ -72,7 +72,10 @@ Changes to Reboot, typography, tables, and more.
- [RFS]({{< docsref "/getting-started/rfs" >}}) enabled for automated font size rescaling. [See #29152](https://github.com/twbs/bootstrap/pull/29152)
- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
- Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding.
- Simplified table styles (no more odd top border) and tightened cell padding.
- Nested tables do not inherit styles anymore.
- `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`).
- The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (colon name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables.
- Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
- `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
- Drop `.text-justify` class. [See #229793](https://github.com/twbs/bootstrap/pull/29793)

27
site/layouts/partials/table-content.html Normal file
View File

@ -0,0 +1,27 @@
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>

30
site/layouts/shortcodes/table.html Normal file
View File

@ -0,0 +1,30 @@
{{- /*
Usage: `table [args]`
`args` are optional and can be one of the following:
class: any class(es) to be added to the `table` - default ""
simplified: show a simplified version in the examples - default `true`
*/ -}}
{{- $simplified := .Get "simplified" | default true -}}
{{- $table_attributes := "" -}}
{{- $table_content := " ...\n" -}}
{{- with .Get "class" -}}
{{- $table_attributes = printf ` class="%s"` . -}}
{{- end -}}
{{- if eq $simplified "false" -}}
{{- $table_content = partialCached "table-content" . -}}
{{- end -}}
{{- $table := printf "<table%s>\n%s</table>" $table_attributes $table_content -}}
<div class="bd-example">
<table{{ with .Get "class" }} class="{{ . }}"{{ end }}>
{{ partialCached "table-content" . }}
</table>
</div>
{{- highlight $table "html" "" -}}