soc-core
Version:
Core sass framework based on Bootstrap
142 lines (139 loc) • 7.59 kB
HTML
<a name="soctable"></a>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="page-header">
<h1>Soc Table <small>Data grids
<span class="label label-success">Continue grid</span>
<span class="label label-default">Wrap</span>
</small></h1>
</div>
</div>
<div class="col-xs-12">
<p>Use the soc-table class when you need to style a standard html table. The table is, like the panels themed by
using the extra classes 'secondary', 'accent' or 'heavy' on the surrounding div element. Optionally striping
can be provided by adding the 'striped' class. </p>
<p>When selectable rows are required a checkbox can be added to the first column, it is recommended to use the font
awesome checkbox icons and handling visibility of the correct one using javascript. When your table contains
selection, add the 'select' class to the surrounding div element as well.</p>
<p>Table elements can also be styled, for example the header elements can be styled to show they are sortable by
adding 'soc-sort' to the th element. Rows itself can be given a 'filter' class to show them with a subtle
border on the left side matching the color of the filter, this will add a visual reference to the kind of
record aiding users in finding the right data quicker. A row can have an 'active' style applied to it which
can be used as an extra selected visual for example.</p>
<p>
More table elements will be added later containing sort / search / page functionality.</p>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> The soc-table class must be defined on a div element surrounding the table in order
to achieve a responsive design
</div>
</div>
<div class="col-xs-12">
<div class="soc-table select striped secondary">
<table>
<thead>
<tr>
<th><i class="fa fa-square-o ng-hide" aria-hidden="true"></i></th>
<th>Header</th>
<th class="soc-sort">Header</th>
<th>Header</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fa fa-square-o ng-hide" aria-hidden="true"></i></td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td class="soc-table-action">
<div class="action">
<i class="fa fa-bookmark" aria-hidden="true"></i>
</div>
<div class="action">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<div class="action">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</td>
</tr>
<tr class="active">
<td><i class="fa fa-check-square-o ng-hide" aria-hidden="true"></i></td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td class="soc-table-action">
<div class="action">
<i class="fa fa-bookmark" aria-hidden="true"></i>
</div>
<div class="action">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<div class="action">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</td>
</tr>
<tr>
<td><i class="fa fa-square-o ng-hide" aria-hidden="true"></i></td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td class="soc-table-action">
<div class="action">
<i class="fa fa-bookmark" aria-hidden="true"></i>
</div>
<div class="action">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<div class="action">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</td>
</tr>
<tr class="filter2">
<td><i class="fa fa-square-o ng-hide" aria-hidden="true"></i></td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td class="soc-table-action">
<div class="action">
<i class="fa fa-bookmark" aria-hidden="true"></i>
</div>
<div class="action">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<div class="action">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</td>
</tr>
<tr class="filter4">
<td><i class="fa fa-square-o ng-hide" aria-hidden="true"></i></td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td class="soc-table-action">
<div class="action">
<i class="fa fa-bookmark" aria-hidden="true"></i>
</div>
<div class="action">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<div class="action">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-12">
<div class="well"><span>emmet:
<pre><code>.soc-table.select>table>(thead>tr>th{Header $}*5)+(tbody>(tr>th{Cell $}*4+(th.soc-table-action>.action>i.fa.fa-bookmark[aria-hidden="true"]))*6)</code></pre>
</span></div>
</div>
</div>
</div>