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

move table variants to use sass map

This commit is contained in:
Mark Otto 2017-06-28 09:36:27 -07:00
parent 3e0375e03b
commit 0f232de9d7
2 changed files with 15 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
docs/4.0/content/tables.md
View File

@ -438,19 +438,11 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
Use contextual classes to color table rows or individual cells. Use contextual classes to color table rows or individual cells.
| 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"> <div class="bd-example">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>Type</th>
<th>Column heading</th> <th>Column heading</th>
<th>Column heading</th> <th>Column heading</th>
<th>Column heading</th> <th>Column heading</th>
@ -458,59 +450,25 @@ Use contextual classes to color table rows or individual cells.
</thead> </thead>
<tbody> <tbody>
<tr class="table-active"> <tr class="table-active">
<th scope="row">1</th> <th scope="row">Active</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">Default</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="table-success">
<th scope="row">3</th> {% for color in site.data.theme-colors %}
<tr class="table-{{ color.name }}">
<th scope="row">{{ color.name | capitalize }}</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>{% endfor %}
<tr>
<th scope="row">4</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
<th scope="row">7</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<th scope="row">9</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -518,18 +476,14 @@ Use contextual classes to color table rows or individual cells.
{% highlight html %} {% highlight html %}
<!-- On rows --> <!-- On rows -->
<tr class="table-active">...</tr> <tr class="table-active">...</tr>
<tr class="table-success">...</tr> {% for color in site.data.theme-colors %}
<tr class="table-info">...</tr> <tr class="table-{{ color.name }}">...</tr>{% endfor %}
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<!-- On cells (`td` or `th`) --> <!-- On cells (`td` or `th`) -->
<tr> <tr>
<td class="table-active">...</td> <td class="table-active">...</td>
<td class="table-success">...</td> {% for color in site.data.theme-colors %}
<td class="table-info">...</td> <td class="table-{{ color.name }}">...</td>{% endfor %}
<td class="table-warning">...</td>
<td class="table-danger">...</td>
</tr> </tr>
{% endhighlight %} {% endhighlight %}

9
scss/_tables.scss
View File

@ -92,12 +92,9 @@
// 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.
// Generate the contextual variants @each $color, $value in $theme-colors {
@include table-row-variant(active, $table-active-bg); @include table-row-variant($color, theme-color-level($color, -9));
@include table-row-variant(success, $state-success-bg); }
@include table-row-variant(info, $state-info-bg);
@include table-row-variant(warning, $state-warning-bg);
@include table-row-variant(danger, $state-danger-bg);
// Inverse styles // Inverse styles