Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4 table updates #22217

Merged
merged 8 commits into from
Mar 20, 2017
Merged

v4 table updates #22217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b1652dc
correct inverse table border color, add new var
mdo Mar 19, 2017
f0f8eb5
Do what the comment says; add this only to devices under 768px
mdo Mar 19, 2017
926fe6e
consistent breaks
mdo Mar 20, 2017
bc766c4
reorder
mdo Mar 20, 2017
bf7b2b9
fixes rest of #21585; adds custom styles for inverse table accent hov…
mdo Mar 20, 2017
44d9475
rewrite in markdown
mdo Mar 20, 2017
3f8fa1f
fix markdown docs tables
mdo Mar 20, 2017
7171954
linting from before
mdo Mar 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions docs/assets/scss/_content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,15 @@

.bd-content {
> table {
display: block;
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
overflow-y: auto;

@include media-breakpoint-down(md) {
display: block;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
}

// Cells
> thead,
Expand Down
51 changes: 7 additions & 44 deletions docs/content/tables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,50 +442,13 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.

Use contextual classes to color table rows or individual cells.

<table class="table table-bordered table-striped table-responsive">
<colgroup>
<col class="col-1">
<col class="col-7">
</colgroup>
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.table-active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.table-success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.table-info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.table-warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.table-danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
| Class | Description |
| --- | --- |
| `.table-active` | Applies the hover color to a particular row or cell |
| `.table-success` | Indicates a successful or positive action |
| `.table-info` | Indicates a neutral informative change or action |
| `.table-warning` | Indicates a warning that might need attention |
| `.table-danger` | Indicates a dangerous or potentially negative action |

<div class="bd-example">
<table class="table">
Expand Down
2 changes: 1 addition & 1 deletion scss/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,8 @@

.nav-justified {
.nav-item {
flex-grow: 1;
flex-basis: 0;
flex-grow: 1;
text-align: center;
}
}
Expand Down
35 changes: 25 additions & 10 deletions scss/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,27 @@
th,
td,
thead th {
border-color: $body-bg;
border-color: $table-inverse-border;
}

&.table-bordered {
border: 0;
}
}

&.table-striped {
tbody tr:nth-of-type(odd) {
background-color: $table-inverse-bg-accent;
}
}

&.table-hover {
tbody tr {
@include hover {
background-color: $table-inverse-bg-hover;
}
}
}
}


// Responsive tables
Expand All @@ -142,13 +155,15 @@
// will display normally.

.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057

// Prevent double border on horizontal scroll due to use of `display: block;`
&.table-bordered {
border: 0;
@include media-breakpoint-down(md) {
display: block;
width: 100%;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057

// Prevent double border on horizontal scroll due to use of `display: block;`
&.table-bordered {
border: 0;
}
}
}
15 changes: 9 additions & 6 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,19 +316,22 @@ $table-cell-padding: .75rem !default;
$table-sm-cell-padding: .3rem !default;

$table-bg: transparent !default;

$table-inverse-bg: $gray-dark !default;
$table-inverse-color: $body-bg !default;

$table-bg-accent: rgba($black,.05) !default;
$table-bg-hover: rgba($black,.075) !default;
$table-bg-active: $table-bg-hover !default;

$table-border-width: $border-width !default;
$table-border-color: $gray-lighter !default;

$table-head-bg: $gray-lighter !default;
$table-head-color: $gray !default;

$table-border-width: $border-width !default;
$table-border-color: $gray-lighter !default;
$table-inverse-bg: $gray-dark !default;
$table-inverse-bg-accent: rgba($white, .05) !default;
$table-inverse-bg-hover: rgba($white, .075) !default;
$table-inverse-bg-active: $table-inverse-bg-hover !default;
$table-inverse-border: lighten($gray-dark, 7.5%) !default;
$table-inverse-color: $body-bg !default;


// Buttons
Expand Down