Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-24 03:54:42 +04:00
Code Issues Projects Releases Wiki Activity

Use dark table variant colors in dark mode (#1200)

Browse Source 
* Use dark table variant colors in dark mode

* dark and light variants can be removed as they are not shifted
This commit is contained in:
Dave Heineman
2022-08-11 12:17:54 +02:00
committed by GitHub
parent d1180f3fc7
commit 96dac4eb98
3 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_docs/tables.md
+62
View File
@@ -53,4 +53,66 @@ If you don't want the table cell content to wrap to another line, use the `table
{% capture code %}
{% include ui/table.html nowrap=true responsive=true %}
{% endcapture %}
{% include example.html code=code %}
## Table Variants
{% capture code %}
<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<th scope="row">Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-warning">
<th scope="row">Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-light">
<th scope="row">Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
{% endcapture %}
{% include example.html code=code %}
src/scss/_variables.scss
+1
View File
@@ -552,6 +552,7 @@ $spinner-height-sm: 1rem !default;
$spinner-border-width: 2px !default;
//tables
$table-bg-scale-dark: 40% !default;
$table-color: inherit !default;
$table-cell-padding-x: .75rem !default;
$table-cell-padding-y: .75rem !default;
src/scss/ui/_tables.scss
+15
View File
@@ -1,3 +1,18 @@
@include dark-mode {
$table-variants: (
"primary": shift-color($primary, $table-bg-scale-dark),
"secondary": shift-color($secondary, $table-bg-scale-dark),
"success": shift-color($success, $table-bg-scale-dark),
"info": shift-color($info, $table-bg-scale-dark),
"warning": shift-color($warning, $table-bg-scale-dark),
"danger": shift-color($danger, $table-bg-scale-dark),
);
@each $color, $value in $table-variants {
@include table-variant($color, $value);
}
}
.table {
thead {
th {