library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2025-01-12 15:24:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Theme: Update Bootstrap v4

Browse Source
This commit is contained in:
Rob Garrison 2017-12-16 10:03:06 -06:00
parent 23a0750504
commit 5b631cddac
4 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
css/theme.bootstrap_4.css
View File

@ -20,9 +20,9 @@
cursor: pointer;
white-space: normal;
}
.tablesorter-bootstrap:not(.table-inverse) thead:not(.thead-inverse) .tablesorter-header,
.tablesorter-bootstrap:not(.table-inverse) tfoot th,
.tablesorter-bootstrap:not(.table-inverse) tfoot td {
.tablesorter-bootstrap:not(.table-dark) thead:not(.thead-dark) .tablesorter-header,
.tablesorter-bootstrap:not(.table-dark) tfoot th,
.tablesorter-bootstrap:not(.table-dark) tfoot td {
background-color: #eee;
}
@ -51,33 +51,33 @@
}
/* white icons */
.tablesorter-bootstrap thead.thead-inverse .tablesorter-headerUnSorted:not(.sorter-false),
.tablesorter-bootstrap.table-inverse thead .tablesorter-headerUnSorted:not(.sorter-false) {
.tablesorter-bootstrap thead.thead-dark .tablesorter-headerUnSorted:not(.sorter-false),
.tablesorter-bootstrap.table-dark thead .tablesorter-headerUnSorted:not(.sorter-false) {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=);
}
.tablesorter-bootstrap thead.thead-inverse .tablesorter-headerAsc,
.tablesorter-bootstrap.table-inverse thead .tablesorter-headerAsc {
.tablesorter-bootstrap thead.thead-dark .tablesorter-headerAsc,
.tablesorter-bootstrap.table-dark thead .tablesorter-headerAsc {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=);
}
.tablesorter-bootstrap thead.thead-inverse .tablesorter-headerDesc,
.tablesorter-bootstrap.table-inverse thead .tablesorter-headerDesc {
.tablesorter-bootstrap thead.thead-dark .tablesorter-headerDesc,
.tablesorter-bootstrap.table-dark thead .tablesorter-headerDesc {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+);
}
/* since bootstrap (table-striped) uses nth-child(), we just use this to add a zebra stripe color */
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd > td,
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd > td,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
background-color: #f9f9f9;
}
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.hover > td,
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd:hover > td,
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even:hover > td,
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td,
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td {
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.hover > td,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd:hover > td,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even:hover > td,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td {
background-color: #f5f5f5;
}
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even > td,
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td {
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even > td,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td {
background-color: #fff;
}
@ -89,30 +89,30 @@
}
/* Column Widget - column sort colors */
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd td.primary {
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd td.primary {
background-color: #bfbfbf;
}
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr td.primary,
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even td.primary {
.tablesorter-bootstrap:not(.table-dark) > tbody > tr td.primary,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even td.primary {
background-color: #d9d9d9;
}
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd td.secondary {
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd td.secondary {
background-color: #d9d9d9;
}
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr td.secondary,
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even td.secondary {
.tablesorter-bootstrap:not(.table-dark) > tbody > tr td.secondary,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even td.secondary {
background-color: #e6e6e6;
}
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd td.tertiary {
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd td.tertiary {
background-color: #e6e6e6;
}
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr td.tertiary,
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even td.tertiary {
.tablesorter-bootstrap:not(.table-dark) > tbody > tr td.tertiary,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even td.tertiary {
background-color: #f2f2f2;
}
/* caption */
.tablesorter-bootstrap:not(.table-inverse) .caption {
.tablesorter-bootstrap:not(.table-dark) .caption {
background-color: #fff;
}
@ -129,11 +129,11 @@
-o-transition: height 0.1s ease;
transition: height 0.1s ease;
}
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row {
.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row {
background-color: #efefef;
}
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row input.tablesorter-filter,
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row select.tablesorter-filter {
.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row input.tablesorter-filter,
.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row select.tablesorter-filter {
color: #333;
}
@ -144,7 +144,7 @@
transition: height 0.1s ease;
}
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row td {
.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row td {
line-height: normal;
text-align: center;
padding: 4px 6px;
@ -176,13 +176,12 @@
}
/* pager plugin */
.tablesorter-bootstrap .tablesorter-pager .pagedisplay {
border: 0;
}
/* ajax error row */
.tablesorter:not(.table-inverse) .tablesorter-errorRow td {
.tablesorter:not(.table-dark) .tablesorter-errorRow td {
text-align: center;
cursor: pointer;
background-color: #e6bf99;

4
docs/css/bootstrap-v4.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
docs/example-option-theme-bootstrap-v4.html
View File

@ -132,6 +132,13 @@
<li>Go to <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> or <a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a> demo.</li>
<li>Get the current version of <a href="https://getbootstrap.com/">Bootstrap</a> (now v4.x).<br><br></li>
<li>In <span class="version updated">v2.29.3</span>
<ul>
<li>Updated to use Bootstrap v4.0.0-beta.2.</li>
<li>Updated theme v4 by changing <code>table-inverse</code> to <code>table-dark</code>.</li>
<li>Updated theme v4 by changing <code>thead-inverse</code> to <code>thead-dark</code>.</li>
</ul>
</li>
<li>In <span class="version updated">v2.29.0</span>, updated to use Bootstrap v4.0.0-beta.</li>
<li>In <span class="version">v2.28.4</span>, added this Bootstrap v4.0.0-alpha.6 demo.</li>
<li>Notes:
@ -153,7 +160,7 @@
<br>
<div id="demo"><table class="table table-bordered table-striped">
<thead> <!-- add class="thead-inverse" for a dark header -->
<thead class="thead-dark"> <!-- add class="thead-light" for a light header -->
<tr>
<th>Name</th>
<th>Major</th>

4
docs/index.html
View File

@ -354,7 +354,7 @@
<h4>Theming</h4>
<ul>
<li>The <a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a>, <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> &amp; <a href="example-widget-ui-theme.html">jQuery UI</a> themes require the uitheme widget.</li>
<li>The <a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> theme (<span class="version">v2.28.4</span>) does not require the uitheme widget!</li>
<li>The <a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> theme (<span class="version">v2.28.4</span>; <span class="version updated">2.29.3</span>) does not require the uitheme widget!</li>
<li>Set up a <a href="example-option-theme-metro-style.html">Metro style theme</a> (<span class="version">v2.16.4</span>).</li>
<li>Set up a <a href="example-option-theme-materialize.html">Materialize theme</a> (<span class="version">v2.27.0</span>).</li>
<li>Use css to <a href="example-css-highlighting.html">highlight rows &amp; columns</a> (<span class="version">v2.20.0</span>); css file added (<span class="version">v2.28.6</span>).</li>
@ -524,7 +524,7 @@
<li><a href="example-widget-ui-theme.html">jQuery UI theme</a> (v2.0.9; <span class="version updated">v2.27.0</span>).</li>
<li><a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a> (demo added <span class="version">v2.22.0</span>).</li>
<li><a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> (v2.4.0; <span class="version updated">v2.28.4</span>).</li>
<li><a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> (<span class="version updated">v2.29.0</span>) <span class="label warning">NOTE</span> <strong>does not</strong> require the uitheme widget!</li>
<li><a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> (<span class="version updated">v2.29.3</span>) <span class="label warning">NOTE</span> <strong>does not</strong> require the uitheme widget!</li>
</ul>
</li>
<li><span class="label label-info">Beta</span> <a href="example-widget-vertical-group.html">Vertical Group Widget</a> (<span class="version">v2.29.2</span>).</li>