Skip to content

B
bootstrap
Commit 6749e550 authored by Mark Otto's avatar Mark Otto
Browse files
Options

rewrite table modifiers to use .table- prefix

parent 608be81a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 122 deletions
dist/css/bootstrap.css
View file @ 6749e550
......@@ -1556,73 +1556,58 @@ table td[class*="col-"], table th[class*="col-"] {
float: none;
}
.table > thead > tr > td.active, .table > thead > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th {
.table-active, .table-active > th, .table-active > td {
background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover {
.table-hover .table-active:hover {
background-color: #e8e8e8;
}
.table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr.active:hover > th {
background-color: #e8e8e8;
}
.table-hover > tbody > tr:hover > .active {
.table-hover .table-active:hover > td, .table-hover .table-active:hover > th {
background-color: #e8e8e8;
}
.table > thead > tr > td.success, .table > thead > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr > td.success, .table > tbody > tr > th.success, .table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th {
.table-success, .table-success > th, .table-success > td {
background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover {
.table-hover .table-success:hover {
background-color: #d0e9c6;
}
.table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th {
background-color: #d0e9c6;
}
.table-hover > tbody > tr:hover > .success {
.table-hover .table-success:hover > td, .table-hover .table-success:hover > th {
background-color: #d0e9c6;
}
.table > thead > tr > td.info, .table > thead > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr > td.info, .table > tbody > tr > th.info, .table > tbody > tr.info > td, .table > tbody > tr.info > th, .table > tfoot > tr > td.info, .table > tfoot > tr > th.info, .table > tfoot > tr.info > td, .table > tfoot > tr.info > th {
.table-info, .table-info > th, .table-info > td {
background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover {
background-color: #c4e3f3;
}
.table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > th {
.table-hover .table-info:hover {
background-color: #c4e3f3;
}
.table-hover > tbody > tr:hover > .info {
.table-hover .table-info:hover > td, .table-hover .table-info:hover > th {
background-color: #c4e3f3;
}
.table > thead > tr > td.warning, .table > thead > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr > td.warning, .table > tbody > tr > th.warning, .table > tbody > tr.warning > td, .table > tbody > tr.warning > th, .table > tfoot > tr > td.warning, .table > tfoot > tr > th.warning, .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th {
.table-warning, .table-warning > th, .table-warning > td {
background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover {
background-color: #faf2cc;
}
.table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th {
.table-hover .table-warning:hover {
background-color: #faf2cc;
}
.table-hover > tbody > tr:hover > .warning {
.table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th {
background-color: #faf2cc;
}
.table > thead > tr > td.danger, .table > thead > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr > td.danger, .table > tbody > tr > th.danger, .table > tbody > tr.danger > td, .table > tbody > tr.danger > th, .table > tfoot > tr > td.danger, .table > tfoot > tr > th.danger, .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th {
.table-danger, .table-danger > th, .table-danger > td {
background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover {
background-color: #ebcccc;
}
.table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th {
.table-hover .table-danger:hover {
background-color: #ebcccc;
}
.table-hover > tbody > tr:hover > .danger {
.table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th {
background-color: #ebcccc;
}
......
dist/css/bootstrap.css.map
View file @ 6749e550
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ 6749e550
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/assets/css/docs.min.css
View file @ 6749e550
This diff is collapsed.
docs/content/tables.md
View file @ 6749e550
......@@ -310,31 +310,31 @@ Use contextual classes to color table rows or individual cells.
<tbody>
<tr>
<th scope="row">
<code>.active</code>
<code>.table-active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
<code>.table-success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
<code>.table-info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
<code>.table-warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
<code>.table-danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
......@@ -353,7 +353,7 @@ Use contextual classes to color table rows or individual cells.
</tr>
</thead>
<tbody>
<tr class="active">
<tr class="table-active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
......@@ -365,7 +365,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="success">
<tr class="table-success">
<th scope="row">3</th>
<td>Column content</td>
<td>Column content</td>
......@@ -377,7 +377,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<tr class="table-info">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
......@@ -389,7 +389,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<tr class="table-warning">
<th scope="row">7</th>
<td>Column content</td>
<td>Column content</td>
......@@ -401,7 +401,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<tr class="table-danger">
<th scope="row">9</th>
<td>Column content</td>
<td>Column content</td>
......@@ -413,19 +413,19 @@ Use contextual classes to color table rows or individual cells.
{% highlight html %}
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
<td class="table-active">...</td>
<td class="table-success">...</td>
<td class="table-warning">...</td>
<td class="table-danger">...</td>
<td class="table-info">...</td>
</tr>
{% endhighlight %}
......
docs/dist/css/bootstrap.css
View file @ 6749e550
......@@ -347,26 +347,6 @@ hr {
border-top: .0625rem solid #eceeef;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
[role="button"] {
cursor: pointer;
}
......@@ -1576,73 +1556,58 @@ table td[class*="col-"], table th[class*="col-"] {
float: none;
}
.table > thead > tr > td.active, .table > thead > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th {
.table-active, .table-active > th, .table-active > td {
background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover {
background-color: #e8e8e8;
}
.table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr.active:hover > th {
.table-hover .table-active:hover {
background-color: #e8e8e8;
}
.table-hover > tbody > tr:hover > .active {
.table-hover .table-active:hover > td, .table-hover .table-active:hover > th {
background-color: #e8e8e8;
}
.table > thead > tr > td.success, .table > thead > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr > td.success, .table > tbody > tr > th.success, .table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th {
.table-success, .table-success > th, .table-success > td {
background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover {
.table-hover .table-success:hover {
background-color: #d0e9c6;
}
.table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th {
background-color: #d0e9c6;
}
.table-hover > tbody > tr:hover > .success {
.table-hover .table-success:hover > td, .table-hover .table-success:hover > th {
background-color: #d0e9c6;
}
.table > thead > tr > td.info, .table > thead > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr > td.info, .table > tbody > tr > th.info, .table > tbody > tr.info > td, .table > tbody > tr.info > th, .table > tfoot > tr > td.info, .table > tfoot > tr > th.info, .table > tfoot > tr.info > td, .table > tfoot > tr.info > th {
.table-info, .table-info > th, .table-info > td {
background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover {
background-color: #c4e3f3;
}
.table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > th {
.table-hover .table-info:hover {
background-color: #c4e3f3;
}
.table-hover > tbody > tr:hover > .info {
.table-hover .table-info:hover > td, .table-hover .table-info:hover > th {
background-color: #c4e3f3;
}
.table > thead > tr > td.warning, .table > thead > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr > td.warning, .table > tbody > tr > th.warning, .table > tbody > tr.warning > td, .table > tbody > tr.warning > th, .table > tfoot > tr > td.warning, .table > tfoot > tr > th.warning, .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th {
.table-warning, .table-warning > th, .table-warning > td {
background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover {
background-color: #faf2cc;
}
.table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th {
.table-hover .table-warning:hover {
background-color: #faf2cc;
}
.table-hover > tbody > tr:hover > .warning {
.table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th {
background-color: #faf2cc;
}
.table > thead > tr > td.danger, .table > thead > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr > td.danger, .table > tbody > tr > th.danger, .table > tbody > tr.danger > td, .table > tbody > tr.danger > th, .table > tfoot > tr > td.danger, .table > tfoot > tr > th.danger, .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th {
.table-danger, .table-danger > th, .table-danger > td {
background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover {
.table-hover .table-danger:hover {
background-color: #ebcccc;
}
.table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th {
background-color: #ebcccc;
}
.table-hover > tbody > tr:hover > .danger {
.table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th {
background-color: #ebcccc;
}
......@@ -5033,6 +4998,26 @@ button.close {
float: left !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
.inverse {
color: #eceeef;
background-color: #373a3c;
......
docs/dist/css/bootstrap.css.map
View file @ 6749e550
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ 6749e550
This source diff could not be displayed because it is too large. You can view the blob instead.
scss/mixins/_table-row.scss
View file @ 6749e550
......@@ -3,40 +3,28 @@
@mixin table-row-variant($state, $background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.#{$state},
> th.#{$state},
&.#{$state} > td,
&.#{$state} > th {
.table-#{$state} {
&,
> th,
> td {
background-color: $background;
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr {
.table-hover {
$hover-background: darken($background, 5%);
> td.#{$state},
> th.#{$state} {
.table-#{$state} {
@include hover {
background-color: $hover-background;
}
}
&.#{$state} {
@include hover {
> td,
> th {
background-color: $hover-background;
}
}
}
@include hover {
> .#{$state} {
background-color: $hover-background;
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment