mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-21 21:15:13 +02:00
Added scrollable table component
All flavors updated to use the new scrollable component (except for lite and sucroa), optimizations made to the table module.
This commit is contained in:
Angelos Chalaris
@@ -182,10 +182,6 @@
|
||||
<td data-label="Variable">$table-horizontal-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for horizontal <code><table></code> elements<sup><a href="#table-note-one">1</a></sup></td><td data-label="Sample value">'horizontal'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-horizontal-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint for horizontal <code><table></code> elements' mobile view<sup><a href="#table-note-one">1</a></sup></td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-not-responsive-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for preset <code><table></code> elements</td><td data-label="Sample value">'preset'</td>
|
||||
@@ -204,7 +200,7 @@
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="table-note-one">The values of <code>$table-horizontal-name</code> and <code>$table-horizontal-breakpoint</code> will only be used if <code>$include-horizontal-table</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="table-note-one">The value of <code>$table-horizontal-name</code> will only be used if <code>$include-horizontal-table</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
147
docs/demo.html
147
docs/demo.html
@@ -77,26 +77,133 @@
|
||||
<!-- Insert your page content here-->
|
||||
<main>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-sm-11">
|
||||
<label for="check1" style="width: 280px;">Switch label </label>
|
||||
</div>
|
||||
<div class="col-sm-1 input-group">
|
||||
<input type="checkbox" id="check1" tabindex="0">
|
||||
<label for="check1" class="switch"></label>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="input-group">
|
||||
<input type="checkbox" id="check2" tabindex="0">
|
||||
<label for="check2">Switch</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="switch1">Switch with text on its left </label>
|
||||
<input type="checkbox" id="switch1" tabindex="0">
|
||||
<label for="switch1" class="switch"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="scrollable">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Sophia</td>
|
||||
<td data-label="Surname">Canderson</td>
|
||||
<td data-label="Alias">Candee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOneasdasdsada sdasdasdasdasdas dasdasdasasdas</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar diam eu nunc volutpat ultricies. Suspendisse id eleifend magna. Proin purus nisl, laoreet at libero eget, tincidunt feugiat ex. Suspendisse et dui sed erat maximus mattis nec vitae erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non justo placerat, cursus magna et, posuere metus. Proin id pretium tortor, ut sollicitudin enim. Nulla gravida lorem euismod orci finibus vehicula.
|
||||
|
||||
Praesent orci turpis, dictum et elementum a, cursus sed libero. Sed maximus gravida maximus. Aenean tristique dui in lacus sollicitudin volutpat. Fusce lobortis at metus vitae ultricies. Sed pretium ante vitae metus convallis, in tincidunt urna blandit. Proin nec dui ac est tincidunt elementum. Etiam eu nisi leo. In pulvinar erat ut diam vulputate, a rhoncus libero dictum. Proin condimentum volutpat elementum. Morbi nec ultrices lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur aliquam nunc eu mollis. Duis pharetra lectus rhoncus feugiat ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dictum erat orci, sed sodales sapien aliquam et.
|
||||
|
||||
Suspendisse in nulla nisi. Praesent vitae ornare sem. Nunc ornare eu ipsum sed mollis. Pellentesque mattis felis quis mauris feugiat lobortis. Fusce viverra eget neque eget ultricies. Cras a imperdiet nunc, sed malesuada augue. Sed blandit urna est, ut rutrum lorem tincidunt sit amet. Sed quam risus, rutrum at hendrerit eget, pharetra at ipsum. Nam nunc quam, semper non cursus at, lobortis fermentum ipsum.
|
||||
|
||||
Maecenas sed faucibus velit. Ut est risus, pulvinar in est iaculis, placerat mattis odio. Integer tincidunt eu lacus a mattis. Vivamus rutrum orci non augue eleifend, tincidunt viverra nibh vulputate. Nam sollicitudin, urna ac aliquet auctor, nibh neque hendrerit massa, sed blandit dolor mauris ut erat. Aliquam non arcu at ex dignissim viverra. Ut elit est, vulputate eu scelerisque eu, ultricies ac mi. Aenean vel consequat nulla. Nunc at nibh egestas, vestibulum enim a, luctus augue. Proin at urna at magna egestas aliquet sit amet non mi.
|
||||
|
||||
Vestibulum ex quam, tristique ac urna at, aliquam convallis turpis. Nunc malesuada, libero id egestas sodales, metus massa aliquam libero, quis dapibus turpis felis ut ligula. Curabitur at porta mi. Nullam laoreet efficitur quam, vel posuere odio tincidunt at. Nam augue lacus, tincidunt nec enim sed, feugiat vehicula enim. Vivamus faucibus hendrerit ipsum, eu tincidunt nunc ultrices vitae. Vestibulum vestibulum odio sed erat finibus, nec pretium enim eleifend. Praesent eget magna vel magna eleifend tempus ac eget dolor. Duis pretium arcu tincidunt nibh pretium, quis venenatis erat suscipit. Maecenas mattis mattis sem in rutrum. Nullam volutpat iaculis rhoncus. </p>
|
||||
<br/>
|
||||
<table class="horizontal">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Sophia</td>
|
||||
<td data-label="Surname">Canderson</td>
|
||||
<td data-label="Alias">Candee</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
<!-- End of page content-->
|
||||
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.<br/>
|
||||
|
||||
@@ -1241,3 +1241,11 @@
|
||||
- Added `box-shadow` option to `.switch` (was missing before).
|
||||
- Added `box-shadow` to `checkbox` and `radio`, updated flavors as required.
|
||||
- Added and updated customization documentation and navigation for `.switch` component.
|
||||
|
||||
## 20170609
|
||||
|
||||
- Removed `$table-horizontal-breakpoint`, will now use generated value from `$table-mobile-breakpoint`.
|
||||
- Added styling for `.scrollable` `table`s, total size about `0.29KB` gzipped, pretty large but that's the largest component that was added in the update.
|
||||
- Updated the definition of `hr` to use `$_1px` instead of `1px`.
|
||||
- Optimized `.horizontal` and `.scrollable` `table`s to use mixed definitions whenever possible.
|
||||
- Updated all flavors to use (or not) `.scrollable` `table`s.
|
||||
|
||||
Reference in New Issue
Block a user