Documented table module
This commit is contained in:
Angelos Chalaris
parent
35387155cf
commit
6855895b4b
9 changed files with 565 additions and 4 deletions
1
dist/mini-default.css
vendored
1
dist/mini-default.css
vendored
|
|
@ -1458,6 +1458,7 @@ table.horizontal thead tr:first-child th:last-child {
|
|||
clip-path: inset(100%);
|
||||
}
|
||||
table tbody, table.horizontal tbody {
|
||||
border: 0;
|
||||
display: table-row-group;
|
||||
}
|
||||
table tr, table.horizontal tr {
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -14,6 +14,7 @@ var header = require('./header');
|
|||
var navigationBar = require('./navigationBar');
|
||||
var footer = require('./footer');
|
||||
var drawer = require('./drawer');
|
||||
var tables = require('./tables');
|
||||
var textHighlighting = require('./textHighlighting');
|
||||
var toasts = require('./toasts');
|
||||
var tooltips = require('./tooltips');
|
||||
|
|
@ -28,6 +29,7 @@ module.exports = [
|
|||
grid, cards, cardSections,
|
||||
formsAndInput, buttons, inputGrouping,
|
||||
header, navigationBar, footer, drawer,
|
||||
tables,
|
||||
textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions,
|
||||
progressBars, donutSpinners
|
||||
]
|
||||
|
|
|
|||
208
docs/doc-fragments/tables.js
Normal file
208
docs/doc-fragments/tables.js
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
module.exports = {
|
||||
id: 'tables',
|
||||
title: 'Tables',
|
||||
keywords: [`table`, `caption`, `thead`, `tbody`, `tr`, `th`, `td`, `horizontal`, `striped`, `hoverable`],
|
||||
description: `<p>Tables are styled in a minimal, modern and responsive manner, allowing users on all devices to easily browse tabular data, taking advantage of the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">Flexbox layout</a>'s capabilities. To make tabular data properly display on mobile devices, remember to specify a <code>data-label</code> attribute for each <code><></code> element (usually same as the heading of the column).</p>`,
|
||||
example: `<h6 style="text-align:center">Desktop view</h6>
|
||||
<table class="doc"><caption class="doc">People</caption>
|
||||
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
||||
<tbody class="doc">
|
||||
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Nick</td><td data-label="Surname" class="doc">Thomson</td><td data-label="Alias" class="doc">NickThom</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Mark</td><td data-label="Surname" class="doc">Gerkis</td><td data-label="Alias" class="doc">Markie</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">John</td><td data-label="Surname" class="doc">Fergusson</td><td data-label="Alias" class="doc">Fergujohn</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sylvia</td><td data-label="Surname" class="doc">Pouleau</td><td data-label="Alias" class="doc">Sylver</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Norman</td><td data-label="Surname" class="doc">Jones</td><td data-label="Alias" class="doc">NormalJones</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Trevor</td><td data-label="Surname" class="doc">Heidel</td><td data-label="Alias" class="doc">Heidi</td></tr>
|
||||
</tbody>
|
||||
</table><br/><h6 style="text-align:center">Mobile view</h6>
|
||||
<table class="doc cardized"><caption class="doc">People</caption>
|
||||
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
||||
<tbody class="doc">
|
||||
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
||||
</tbody>
|
||||
</table>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><table></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></table></span></span></pre>`],
|
||||
notes: [`Remember to always specify a <code>data-label</code> attribute for all of your <code><td></code> elements, otherwise they will not display properly on mobile.`,
|
||||
`Due to the way tables are displayed, the <code><tfoot></code> element is not supported.`,
|
||||
`Tables are vertically scrollable by default, with a <code>max-height</code> property of <code>400px</code>.`],
|
||||
customization: [
|
||||
`Text color for <code><th></code> and <code><td></code> elements can be changed by changing the values of the <code>--table-head-fore-color</code> and <code>--table-body-fore-color</code> variables respectively.`,
|
||||
`Background color for <code><th></code> and <code><td></code> elements can be changed by changing the values of the <code>--table-head-back-color</code> and <code>--table-body-back-color</code> variables respectively.`,
|
||||
`Border color for tables can be changed by changing the value of the <code>--table-border-color</code> variable.`,
|
||||
`Border color for the separator between a table's heading and a table's body can be changed by changing the value of the <code>--table-border-separator-color</code> variable.`,
|
||||
`Alternative background color for <code><td></code> elements in striped tables can be changed by changing the value of the <code>--table-body-alt-back-color</code> variable.`,
|
||||
`Hover background color for <code><tr></code> elements in hoverable tables can be changed by changing the value of the <code>--table-body-hover-back-color</code> variable.`,
|
||||
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
|
||||
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
|
||||
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
||||
],
|
||||
modifiers: [
|
||||
{
|
||||
title : 'Horizontal tables',
|
||||
description: `<p>You can create horizontal tables (<code>.horizontal</code>), by applying the appropriate class.</p>`,
|
||||
example: `<table class="doc horizontal"><caption class="doc">People</caption>
|
||||
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
||||
<tbody class="doc">
|
||||
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
||||
</tbody>
|
||||
</table>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><table</span> <span class="highlight-b">class</span>=<span class="highlight-c">"horizontal"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></table></span></span></pre>`]
|
||||
},
|
||||
{
|
||||
title : 'Striped tables',
|
||||
description: `<p>You can create striped tables (<code>.striped</code>), by applying the appropriate class.</p>`,
|
||||
example: `<table class="doc striped"><caption class="doc">People</caption>
|
||||
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
||||
<tbody class="doc">
|
||||
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
||||
</tbody>
|
||||
</table>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><table</span> <span class="highlight-b">class</span>=<span class="highlight-c">"striped"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></table></span></span></pre>`]
|
||||
},
|
||||
{
|
||||
title : 'Hoverable tables',
|
||||
description: `<p>You can create hoverable tables (<code>.hoverable</code>), by applying the appropriate class.</p>`,
|
||||
example: `<table class="doc hoverable"><caption class="doc">People</caption>
|
||||
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
||||
<tbody class="doc">
|
||||
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
||||
</tbody>
|
||||
</table>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><table</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hoverable"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></table></span></span></pre>`]
|
||||
}
|
||||
],
|
||||
dos: [],
|
||||
donts: [
|
||||
{
|
||||
description: `Avoid placing <code><td></code> elements in the <code><thead></code> of your tables, as well as placing <code><th></code> elements in the <code><tbody></code>.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><table></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td></span>Bad idea<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Bad"</span><span class="highlight-a">></span>Also bad idea<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></table></span></span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -268,3 +268,4 @@
|
|||
|
||||
- Updated tables, variables cleanup.
|
||||
- Added `.striped` and `.hoverable` `table` styles.
|
||||
- Documented `table` module.
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
</header>
|
||||
<div class="row" id="doc-wrapper">
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><a href="#spoilers-and-accordions" id="link-to-spoilers-and-accordions">Spoilers & accordions</a><a href="#progress-bars" id="link-to-progress-bars">Progress bars</a><a href="#donut-spinners" id="link-to-donut-spinners">Donut spinners</a><span id="no-results">No results found</span></nav>
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#tables" id="link-to-tables">Tables</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><a href="#spoilers-and-accordions" id="link-to-spoilers-and-accordions">Spoilers & accordions</a><a href="#progress-bars" id="link-to-progress-bars">Progress bars</a><a href="#donut-spinners" id="link-to-donut-spinners">Donut spinners</a><span id="no-results">No results found</span></nav>
|
||||
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="getting-started" class="card fluid">
|
||||
<h2 class="section double-padded">Getting started</h2>
|
||||
<div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
|
||||
|
|
@ -608,6 +608,175 @@
|
|||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> You should not place anything between the checkbox controlling the drawer and the container.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Drawer menus are responsive by default and will expand into normal containers on screens larger or equal to <code>768px</code> wide.</li><li>It is highly recommended to place your drawer's toggle button inside your web app's header element.</li><li>You can combine the navigation bar element with the drawer menu for better results.</li><li>Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the drawer menu not rendering or behaving properly.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable. This will affect the text color of the toggle button and items inside the drawer container.</li><li>Background color for the drawer container can be changed by changing the value of the <code>--drawer-back-color</code> variable.</li><li>Border color for the drawer container can be changed by changing the value of the <code>--drawer-border-color</code> variable.</li><li>Text color for the drawer close button can be changed by changing the values of the <code>--drawer-close-color</code>.</li><li>Background color for the drawer close button when focused or hovered over can be changed by changing the values of the <code>--drawer-hover-back-color</code>.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="tables" class="card fluid">
|
||||
<h2 class="section double-padded">Tables</h2>
|
||||
<div class="section"><p>Tables are styled in a minimal, modern and responsive manner, allowing users on all devices to easily browse tabular data, taking advantage of the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">Flexbox layout</a>'s capabilities. To make tabular data properly display on mobile devices, remember to specify a <code>data-label</code> attribute for each <code><></code> element (usually same as the heading of the column).</p></div>
|
||||
<div class="section"><h3>Example</h3><h6 style="text-align:center">Desktop view</h6>
|
||||
<table class="doc"><caption class="doc">People</caption>
|
||||
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
||||
<tbody class="doc">
|
||||
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Nick</td><td data-label="Surname" class="doc">Thomson</td><td data-label="Alias" class="doc">NickThom</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Mark</td><td data-label="Surname" class="doc">Gerkis</td><td data-label="Alias" class="doc">Markie</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">John</td><td data-label="Surname" class="doc">Fergusson</td><td data-label="Alias" class="doc">Fergujohn</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sylvia</td><td data-label="Surname" class="doc">Pouleau</td><td data-label="Alias" class="doc">Sylver</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Norman</td><td data-label="Surname" class="doc">Jones</td><td data-label="Alias" class="doc">NormalJones</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Trevor</td><td data-label="Surname" class="doc">Heidel</td><td data-label="Alias" class="doc">Heidi</td></tr>
|
||||
</tbody>
|
||||
</table><br/><h6 style="text-align:center">Mobile view</h6>
|
||||
<table class="doc cardized"><caption class="doc">People</caption>
|
||||
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
||||
<tbody class="doc">
|
||||
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><table></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></table></span></span></pre></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Modifiers</h3>
|
||||
<h4>Horizontal tables</h4><p>You can create horizontal tables (<code>.horizontal</code>), by applying the appropriate class.</p><h5>Example</h5><table class="doc horizontal"><caption class="doc">People</caption>
|
||||
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
||||
<tbody class="doc">
|
||||
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
||||
</tbody>
|
||||
</table><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><table</span> <span class="highlight-b">class</span>=<span class="highlight-c">"horizontal"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></table></span></span></pre><br/><h4>Striped tables</h4><p>You can create striped tables (<code>.striped</code>), by applying the appropriate class.</p><h5>Example</h5><table class="doc striped"><caption class="doc">People</caption>
|
||||
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
||||
<tbody class="doc">
|
||||
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
||||
</tbody>
|
||||
</table><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><table</span> <span class="highlight-b">class</span>=<span class="highlight-c">"striped"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></table></span></span></pre><br/><h4>Hoverable tables</h4><p>You can create hoverable tables (<code>.hoverable</code>), by applying the appropriate class.</p><h5>Example</h5><table class="doc hoverable"><caption class="doc">People</caption>
|
||||
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
||||
<tbody class="doc">
|
||||
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
||||
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
||||
</tbody>
|
||||
</table><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><table</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hoverable"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></table></span></span></pre></div>
|
||||
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><table></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><td></span>Bad idea<span class="highlight-a"></td></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><th</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Bad"</span><span class="highlight-a">></span>Also bad idea<span class="highlight-a"></th></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
||||
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></table></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid placing <code><td></code> elements in the <code><thead></code> of your tables, as well as placing <code><th></code> elements in the <code><tbody></code>.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Remember to always specify a <code>data-label</code> attribute for all of your <code><td></code> elements, otherwise they will not display properly on mobile.</li><li>Due to the way tables are displayed, the <code><tfoot></code> element is not supported.</li><li>Tables are vertically scrollable by default, with a <code>max-height</code> property of <code>400px</code>.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for <code><th></code> and <code><td></code> elements can be changed by changing the values of the <code>--table-head-fore-color</code> and <code>--table-body-fore-color</code> variables respectively.</li><li>Background color for <code><th></code> and <code><td></code> elements can be changed by changing the values of the <code>--table-head-back-color</code> and <code>--table-body-back-color</code> variables respectively.</li><li>Border color for tables can be changed by changing the value of the <code>--table-border-color</code> variable.</li><li>Border color for the separator between a table's heading and a table's body can be changed by changing the value of the <code>--table-border-separator-color</code> variable.</li><li>Alternative background color for <code><td></code> elements in striped tables can be changed by changing the value of the <code>--table-body-alt-back-color</code> variable.</li><li>Hover background color for <code><tr></code> elements in hoverable tables can be changed by changing the value of the <code>--table-body-hover-back-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="text-highlighting" class="card fluid">
|
||||
<h2 class="section double-padded">Text highlighting</h2>
|
||||
<div class="section"><p>The native HTML5 mark element has been minimally styled to allow for easy text highlighting.</p></div>
|
||||
|
|
@ -750,7 +919,7 @@
|
|||
</div></div>
|
||||
<script>
|
||||
// Search script
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] },{id: "spoilers-and-accordions", keys: ["spoiler","collapse","accordion","contextual","vertical tabs"] },{id: "progress-bars", keys: ["progress","bar","primary","secondary","tertiary","inline"] },{id: "donut-spinners", keys: ["spinner","donut","loading","progress","primary","secondary","tertiary","inline","animation","animated"] }];
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "tables", keys: ["table","caption","thead","tbody","tr","th","td","horizontal","striped","hoverable"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] },{id: "spoilers-and-accordions", keys: ["spoiler","collapse","accordion","contextual","vertical tabs"] },{id: "progress-bars", keys: ["progress","bar","primary","secondary","tertiary","inline"] },{id: "donut-spinners", keys: ["spinner","donut","loading","progress","primary","secondary","tertiary","inline","animation","animated"] }];
|
||||
var options = {threshold:0.4, keys:["keys"]};
|
||||
var fuse = new Fuse(docs,options);
|
||||
function search(){
|
||||
|
|
|
|||
2
docs/v3/style.min.css
vendored
2
docs/v3/style.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -498,3 +498,181 @@ header.row a span {
|
|||
// padding: 0 6px;
|
||||
// }
|
||||
// }
|
||||
@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
|
||||
table.doc {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-flow: row wrap;
|
||||
padding: var(#{$universal-padding-var});
|
||||
padding-top: 0;
|
||||
@if not($_include-horizontal-table) {
|
||||
overflow: auto;
|
||||
max-height: $table-max-height;
|
||||
}
|
||||
caption {
|
||||
font-size: $table-caption-font-size;
|
||||
margin: calc(2 * var(#{$universal-margin-var})) 0;
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
thead, tbody {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
border: $__1px solid var(#{$table-border-color-var});
|
||||
@if not($_include-horizontal-table) {
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
|
||||
border-bottom: $__1px solid var(#{$table-border-separator-color-var});
|
||||
@if not($_include-horizontal-table) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: calc(0 - var(#{$universal-margin-var}));
|
||||
border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
|
||||
}
|
||||
tr {
|
||||
display: flex;
|
||||
padding: 0; // Apply always to overwrite default.
|
||||
@if not($_include-horizontal-table) {
|
||||
flex-flow: row wrap;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
padding: calc(2 * var(#{$universal-padding-var})); // Apply always to overwrite default.
|
||||
@if not($_include-horizontal-table) {
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
background: var(#{$table-th-back-color-var});
|
||||
color: var(#{$table-th-fore-color-var});
|
||||
}
|
||||
td {
|
||||
background: var(#{$table-td-back-color-var});
|
||||
color: var(#{$table-td-fore-color-var});
|
||||
border-top: $__1px solid var(#{$table-border-color-var});
|
||||
}
|
||||
@if not($_include-horizontal-table) {
|
||||
tbody tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
table.#{$table-horizontal-name}.doc {
|
||||
border: 0;
|
||||
thead, tbody {
|
||||
border: 0;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
tbody {
|
||||
overflow: auto;
|
||||
justify-content: space-between;
|
||||
flex: 1 0 0;
|
||||
margin-left: calc( 4 * var(#{$universal-margin-var}));
|
||||
padding-bottom: calc(var(#{$universal-padding-var}) / 4);
|
||||
}
|
||||
tr {
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
th, td {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-bottom: $__1px solid var(#{$table-border-color-var});
|
||||
&:not(:first-child){
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
border-left: $__1px solid var(#{$table-border-color-var});
|
||||
border-right: $__1px solid var(#{$table-border-separator-color-var});
|
||||
}
|
||||
thead {
|
||||
tr:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
th:first-child, td:first-child {
|
||||
border-top: $__1px solid var(#{$table-border-color-var});
|
||||
}
|
||||
tbody tr:last-child td {
|
||||
border-right: $__1px solid var(#{$table-border-color-var});
|
||||
&:first-child{
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
&:last-child{
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
thead tr:first-child th {
|
||||
&:first-child{
|
||||
border-top-left-radius: 0.25rem;
|
||||
}
|
||||
&:last-child{
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.doc.cardized {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
display: table;
|
||||
// Accessibility (element is not visible, but screen readers read it normally)
|
||||
thead, th {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
border: 0;
|
||||
}
|
||||
tr {
|
||||
display: block;
|
||||
border: $__1px solid var(#{$table-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
background: #fafafa; // use variables, this is a test (body)
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
margin-bottom: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
td {
|
||||
display: block;
|
||||
border: 0;
|
||||
text-align: right;
|
||||
}
|
||||
td:before {
|
||||
content: attr(#{$table-mobile-card-label});
|
||||
float: left;
|
||||
font-weight: $table-mobile-label-font-weight;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,6 +240,7 @@ table {
|
|||
clip-path: inset(100%);
|
||||
}
|
||||
tbody {
|
||||
border: 0;
|
||||
display: table-row-group;
|
||||
}
|
||||
tr {
|
||||
|
|
@ -295,6 +296,7 @@ table {
|
|||
clip-path: inset(100%);
|
||||
}
|
||||
tbody {
|
||||
border: 0;
|
||||
display: table-row-group;
|
||||
}
|
||||
tr {
|
||||
|
|
|
|||
Loading…
Reference in a new issue