Skip to content
GitLab
Commit 6749e550 authored by Mark Otto's avatar Mark Otto
Browse files

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
+80 -122
dist/css/bootstrap.css
+ 15
- 30
View file @ 6749e550
...@@ -1556,73 +1556,58 @@ table td[class*="col-"], table th[class*="col-"] { ...@@ -1556,73 +1556,58 @@ table td[class*="col-"], table th[class*="col-"] {
float: none; 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; 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; background-color: #e8e8e8;
} }
.table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr.active:hover > th { .table-hover .table-active:hover > td, .table-hover .table-active:hover > th {
background-color: #e8e8e8;
}
.table-hover > tbody > tr:hover > .active {
background-color: #e8e8e8; 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; 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; background-color: #d0e9c6;
} }
.table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th { .table-hover .table-success:hover > td, .table-hover .table-success:hover > th {
background-color: #d0e9c6;
}
.table-hover > tbody > tr:hover > .success {
background-color: #d0e9c6; 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; background-color: #d9edf7;
} }
.table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover { .table-hover .table-info:hover {
background-color: #c4e3f3;
}
.table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > th {
background-color: #c4e3f3; background-color: #c4e3f3;
} }
.table-hover > tbody > tr:hover > .info { .table-hover .table-info:hover > td, .table-hover .table-info:hover > th {
background-color: #c4e3f3; 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; background-color: #fcf8e3;
} }
.table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover { .table-hover .table-warning:hover {
background-color: #faf2cc;
}
.table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th {
background-color: #faf2cc; background-color: #faf2cc;
} }
.table-hover > tbody > tr:hover > .warning { .table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th {
background-color: #faf2cc; 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; 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; background-color: #ebcccc;
} }
.table-hover > tbody > tr:hover > .danger { .table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th {
background-color: #ebcccc; background-color: #ebcccc;
} }
......
dist/css/bootstrap.css.map
-169 bytes (0%)
View file @ 6749e550
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
dist/css/bootstrap.min.css
+ 1
- 1
View file @ 6749e550
This diff is collapsed.
docs/assets/css/docs.min.css
+ 1
- 1
View file @ 6749e550
This diff is collapsed.
docs/content/tables.md
+ 20
- 20
View file @ 6749e550
...@@ -310,31 +310,31 @@ Use contextual classes to color table rows or individual cells. ...@@ -310,31 +310,31 @@ Use contextual classes to color table rows or individual cells.
<tbody> <tbody>
<tr> <tr>
<th scope="row"> <th scope="row">
<code>.active</code> <code>.table-active</code>
</th> </th>
<td>Applies the hover color to a particular row or cell</td> <td>Applies the hover color to a particular row or cell</td>
</tr> </tr>
<tr> <tr>
<th scope="row"> <th scope="row">
<code>.success</code> <code>.table-success</code>
</th> </th>
<td>Indicates a successful or positive action</td> <td>Indicates a successful or positive action</td>
</tr> </tr>
<tr> <tr>
<th scope="row"> <th scope="row">
<code>.info</code> <code>.table-info</code>
</th> </th>
<td>Indicates a neutral informative change or action</td> <td>Indicates a neutral informative change or action</td>
</tr> </tr>
<tr> <tr>
<th scope="row"> <th scope="row">
<code>.warning</code> <code>.table-warning</code>
</th> </th>
<td>Indicates a warning that might need attention</td> <td>Indicates a warning that might need attention</td>
</tr> </tr>
<tr> <tr>
<th scope="row"> <th scope="row">
<code>.danger</code> <code>.table-danger</code>
</th> </th>
<td>Indicates a dangerous or potentially negative action</td> <td>Indicates a dangerous or potentially negative action</td>
</tr> </tr>
...@@ -353,7 +353,7 @@ Use contextual classes to color table rows or individual cells. ...@@ -353,7 +353,7 @@ Use contextual classes to color table rows or individual cells.
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="active"> <tr class="table-active">
<th scope="row">1</th> <th scope="row">1</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
...@@ -365,7 +365,7 @@ Use contextual classes to color table rows or individual cells. ...@@ -365,7 +365,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="success"> <tr class="table-success">
<th scope="row">3</th> <th scope="row">3</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
...@@ -377,7 +377,7 @@ Use contextual classes to color table rows or individual cells. ...@@ -377,7 +377,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="info"> <tr class="table-info">
<th scope="row">5</th> <th scope="row">5</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
...@@ -389,7 +389,7 @@ Use contextual classes to color table rows or individual cells. ...@@ -389,7 +389,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="warning"> <tr class="table-warning">
<th scope="row">7</th> <th scope="row">7</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
...@@ -401,7 +401,7 @@ Use contextual classes to color table rows or individual cells. ...@@ -401,7 +401,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="danger"> <tr class="table-danger">
<th scope="row">9</th> <th scope="row">9</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
...@@ -413,19 +413,19 @@ Use contextual classes to color table rows or individual cells. ...@@ -413,19 +413,19 @@ Use contextual classes to color table rows or individual cells.
{% highlight html %} {% highlight html %}
<!-- On rows --> <!-- On rows -->
<tr class="active">...</tr> <tr class="table-active">...</tr>
<tr class="success">...</tr> <tr class="table-success">...</tr>
<tr class="warning">...</tr> <tr class="table-warning">...</tr>
<tr class="danger">...</tr> <tr class="table-danger">...</tr>
<tr class="info">...</tr> <tr class="table-info">...</tr>
<!-- On cells (`td` or `th`) --> <!-- On cells (`td` or `th`) -->
<tr> <tr>
<td class="active">...</td> <td class="table-active">...</td>
<td class="success">...</td> <td class="table-success">...</td>
<td class="warning">...</td> <td class="table-warning">...</td>
<td class="danger">...</td> <td class="table-danger">...</td>
<td class="info">...</td> <td class="table-info">...</td>
</tr> </tr>
{% endhighlight %} {% endhighlight %}
......
docs/dist/css/bootstrap.css
+ 35
- 50
View file @ 6749e550
...@@ -347,26 +347,6 @@ hr { ...@@ -347,26 +347,6 @@ hr {
border-top: .0625rem solid #eceeef; 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"] { [role="button"] {
cursor: pointer; cursor: pointer;
} }
...@@ -1576,73 +1556,58 @@ table td[class*="col-"], table th[class*="col-"] { ...@@ -1576,73 +1556,58 @@ table td[class*="col-"], table th[class*="col-"] {
float: none; 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; 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; background-color: #e8e8e8;
} }
.table-hover > tbody > tr:hover > .active { .table-hover .table-active:hover > td, .table-hover .table-active:hover > th {
background-color: #e8e8e8; 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; 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; background-color: #d0e9c6;
} }
.table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th { .table-hover .table-success:hover > td, .table-hover .table-success:hover > th {
background-color: #d0e9c6;
}
.table-hover > tbody > tr:hover > .success {
background-color: #d0e9c6; 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; background-color: #d9edf7;
} }
.table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover { .table-hover .table-info:hover {
background-color: #c4e3f3;
}
.table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > th {
background-color: #c4e3f3; background-color: #c4e3f3;
} }
.table-hover > tbody > tr:hover > .info { .table-hover .table-info:hover > td, .table-hover .table-info:hover > th {
background-color: #c4e3f3; 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; background-color: #fcf8e3;
} }
.table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover { .table-hover .table-warning:hover {
background-color: #faf2cc;
}
.table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th {
background-color: #faf2cc; background-color: #faf2cc;
} }
.table-hover > tbody > tr:hover > .warning { .table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th {
background-color: #faf2cc; 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; 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; background-color: #ebcccc;
} }
.table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th { .table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th {
background-color: #ebcccc;
}
.table-hover > tbody > tr:hover > .danger {
background-color: #ebcccc; background-color: #ebcccc;
} }
...@@ -5033,6 +4998,26 @@ button.close { ...@@ -5033,6 +4998,26 @@ button.close {
float: left !important; 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 { .inverse {
color: #eceeef; color: #eceeef;
background-color: #373a3c; background-color: #373a3c;
......
docs/dist/css/bootstrap.css.map
-87 bytes (0%)
View file @ 6749e550
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
docs/dist/css/bootstrap.min.css
+ 1
- 1
View file @ 6749e550
This diff is collapsed.
scss/mixins/_table-row.scss
+ 7
- 19
View file @ 6749e550
...@@ -3,40 +3,28 @@ ...@@ -3,40 +3,28 @@
@mixin table-row-variant($state, $background) { @mixin table-row-variant($state, $background) {
// Exact selectors below required to override `.table-striped` and prevent // Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables. // inheritance to nested tables.
.table > thead > tr, .table-#{$state} {
.table > tbody > tr, &,
.table > tfoot > tr { > th,
> td.#{$state}, > td {
> th.#{$state},
&.#{$state} > td,
&.#{$state} > th {
background-color: $background; background-color: $background;
} }
} }
// Hover states for `.table-hover` // Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`. // Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr { .table-hover {
$hover-background: darken($background, 5%); $hover-background: darken($background, 5%);
> td.#{$state}, .table-#{$state} {
> th.#{$state} {
@include hover { @include hover {
background-color: $hover-background; background-color: $hover-background;
}
}
&.#{$state} {
@include hover {
> td, > td,
> th { > th {
background-color: $hover-background; background-color: $hover-background;
} }
} }
} }
@include hover {
> .#{$state} {
background-color: $hover-background;
}
}
} }
} }
Supports Markdown
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