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

Rename .table-inverse, .thead-inverse, .thead-default to .*-dark, .*-light #23560

Merged
merged 4 commits into from
Aug 22, 2017
Merged

Rename .table-inverse, .thead-inverse, .thead-default to .*-dark, .*-light #23560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
85a0055
(#22414) Rename variables `$table-inverse-bg`, `$table-inverse-accent…
pat270 Aug 19, 2017
e2d4462
Rename `.table-inverse`, `.thead-inverse`, `.thead-default` to `.tabl…
pat270 Aug 19, 2017
104390c
v4 docs Update Table docs with `.table-dark` and `.thead-light` changes
pat270 Aug 19, 2017
e828d83
`.thead-dark` and `.thead-light` border color should display the righ…
pat270 Aug 19, 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
22 changes: 11 additions & 11 deletions docs/4.0/content/tables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
</table>
{% endexample %}

You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.
You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.

{% example html %}
<table class="table table-inverse">
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
Expand Down Expand Up @@ -82,11 +82,11 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta

## Table head options

Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray.
Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray.

{% example html %}
<table class="table">
<thead class="thead-inverse">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>First Name</th>
Expand Down Expand Up @@ -117,7 +117,7 @@ Similar to default and inverse tables, use one of two modifier classes to make `
</table>

<table class="table">
<thead class="thead-default">
<thead class="thead-light">
<tr>
<th>#</th>
<th>First Name</th>
Expand Down Expand Up @@ -186,7 +186,7 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
{% endexample %}

{% example html %}
<table class="table table-striped table-inverse">
<table class="table table-striped table-dark">
<thead>
<tr>
<th>#</th>
Expand Down Expand Up @@ -261,7 +261,7 @@ Add `.table-bordered` for borders on all sides of the table and cells.
{% endexample %}

{% example html %}
<table class="table table-bordered table-inverse">
<table class="table table-bordered table-dark">
<thead>
<tr>
<th>#</th>
Expand Down Expand Up @@ -335,7 +335,7 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
{% endexample %}

{% example html %}
<table class="table table-hover table-inverse">
<table class="table table-hover table-dark">
<thead>
<tr>
<th>#</th>
Expand Down Expand Up @@ -403,7 +403,7 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
{% endexample %}

{% example html %}
<table class="table table-sm table-inverse">
<table class="table table-sm table-dark">
<thead>
<tr>
<th>#</th>
Expand Down Expand Up @@ -487,10 +487,10 @@ Use contextual classes to color table rows or individual cells.
</tr>
{% endhighlight %}

Regular table background variants are not available with the inverse table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles.
Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles.

<div class="bd-example">
<table class="table table-inverse">
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
Expand Down
36 changes: 20 additions & 16 deletions scss/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,32 +99,36 @@
@include table-row-variant(active, $table-active-bg);


// Inverse styles
// Dark styles
//
// Same table markup, but inverted color scheme: dark background and light text.

.thead-inverse {
th {
color: $table-inverse-color;
background-color: $table-inverse-bg;
.table {
.thead-dark {
th {
color: $table-dark-color;
background-color: $table-dark-bg;
border-color: $table-dark-border-color;
}
}
}

.thead-default {
th {
color: $table-head-color;
background-color: $table-head-bg;
.thead-light {
th {
color: $table-head-color;
background-color: $table-head-bg;
border-color: $table-border-color;
}
}
}

.table-inverse {
color: $table-inverse-color;
background-color: $table-inverse-bg;
.table-dark {
color: $table-dark-color;
background-color: $table-dark-bg;

th,
td,
thead th {
border-color: $table-inverse-border-color;
border-color: $table-dark-border-color;
}

&.table-bordered {
Expand All @@ -133,14 +137,14 @@

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

&.table-hover {
tbody tr {
@include hover {
background-color: $table-inverse-hover-bg;
background-color: $table-dark-hover-bg;
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,11 +321,11 @@ $table-border-color: $gray-200 !default;
$table-head-bg: $gray-200 !default;
$table-head-color: $gray-700 !default;

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


// Buttons
Expand Down