Table styles complete
This commit is contained in:
Angelos Chalaris
parent
fd862a82bb
commit
cef1ce30cf
6 changed files with 148 additions and 4 deletions
|
|
@ -5,7 +5,8 @@ A minimal, responsive CSS framework to get you started.
|
|||
|
||||
- **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,186 bytes
|
||||
- **button**: button styles `GZIPPED SIZE`: 427 bytes
|
||||
- **form**: form styles `GZIPPED SIZE` 517 bytes
|
||||
- **form**: form styles `GZIPPED SIZE`: 517 bytes
|
||||
- **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes
|
||||
- **nav**: coming soon
|
||||
- **table**: coming soon
|
||||
- **table**: table styles `GZIPPED SIZE`: 243 bytes
|
||||
- **helper and utility classes**: coming soon
|
||||
|
|
|
|||
|
|
@ -698,3 +698,47 @@ textarea {
|
|||
margin-top: 0; }
|
||||
.frm .ctrl-group {
|
||||
margin: 0 0 0.3em 0; }
|
||||
|
||||
/*
|
||||
Mixin for the tables.
|
||||
Parameters:
|
||||
- $tbl-name : The class name of the table.
|
||||
- $tbl-border : The border of the table and cells. [1]
|
||||
- $tbl-margin : The margin of the table cells.
|
||||
- $tbl-padding : The padding of the table cells.
|
||||
- $tbl-head-bg-color : The color of the thead background.
|
||||
- $tbl-head-color : The color of the thead text.
|
||||
- $tbl-body-bg-color : The color of the even-numbered rows in tbody.
|
||||
- $tbl-body-alt-bg-color : The color of the odd-numbered rows in tbody.
|
||||
- $tbl-body-color : The color of the text in tbody.
|
||||
- $tbl-horizontal-name : The class name for the horizontal style table.
|
||||
- $tbl-bordered-name : The class name for the bordered style table.
|
||||
Notes:
|
||||
- [1] : This style will apply to the table and cells. All styles applied to
|
||||
the table (horizontal, bordered) will use the same style of border.
|
||||
*/
|
||||
.tbl {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
border: 1px solid #bdbdbd; }
|
||||
.tbl td, .tbl th {
|
||||
overflow: visible;
|
||||
border-left: 1px solid #bdbdbd;
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
padding: 0.5em; }
|
||||
.tbl thead {
|
||||
background-color: #d9d9d9;
|
||||
color: #111;
|
||||
text-align: left; }
|
||||
.tbl tbody {
|
||||
background-color: #f5f5f5;
|
||||
color: #111; }
|
||||
.tbl tbody tr:nth-child(2n-1) {
|
||||
background-color: #ececec; }
|
||||
.tbl.hor td, .tbl.hor th {
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #bdbdbd; }
|
||||
.tbl.bor td, .tbl.bor th {
|
||||
border-bottom: 1px solid #bdbdbd; }
|
||||
|
|
|
|||
2
css/mini-full.min.css
vendored
2
css/mini-full.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -13,4 +13,7 @@
|
|||
@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);
|
||||
@import 'mini/form';
|
||||
// Use form mixin to create form with default specs.
|
||||
@include make-frm(frm, 1px solid #ccc, 4px, 0.2em, 0.3em, #2678b3, #e9322d, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, ctrl-group, 0 0 0.3em 0, inline, aligned,15em);
|
||||
@include make-frm(frm, 1px solid #ccc, 4px, 0.2em, 0.3em, #2678b3, #e9322d, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, ctrl-group, 0 0 0.3em 0, inline, aligned,15em);
|
||||
@import 'mini/table';
|
||||
// Use table mixin to create table with default specs.
|
||||
@include make-tbl(tbl, 1px solid #bdbdbd, 0, 0.5em, #d9d9d9, #111, #f5f5f5, #ececec, #111, hor, bor);
|
||||
59
scss/mini/_table.scss
Normal file
59
scss/mini/_table.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/*
|
||||
Mixin for the tables.
|
||||
Parameters:
|
||||
- $tbl-name : The class name of the table.
|
||||
- $tbl-border : The border of the table and cells. [1]
|
||||
- $tbl-margin : The margin of the table cells.
|
||||
- $tbl-padding : The padding of the table cells.
|
||||
- $tbl-head-bg-color : The color of the thead background.
|
||||
- $tbl-head-color : The color of the thead text.
|
||||
- $tbl-body-bg-color : The color of the even-numbered rows in tbody.
|
||||
- $tbl-body-alt-bg-color : The color of the odd-numbered rows in tbody.
|
||||
- $tbl-body-color : The color of the text in tbody.
|
||||
- $tbl-horizontal-name : The class name for the horizontal style table.
|
||||
- $tbl-bordered-name : The class name for the bordered style table.
|
||||
Notes:
|
||||
- [1] : This style will apply to the table and cells. All styles applied to
|
||||
the table (horizontal, bordered) will use the same style of border.
|
||||
*/
|
||||
@mixin make-tbl( $tbl-name, $tbl-border, $tbl-margin, $tbl-padding,
|
||||
$tbl-head-bg-color, $tbl-head-color, $tbl-body-bg-color,
|
||||
$tbl-body-alt-bg-color, $tbl-body-color,
|
||||
$tbl-horizontal-name, $tbl-bordered-name ){
|
||||
.#{$tbl-name}{
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
border: $tbl-border;
|
||||
td, th{
|
||||
overflow: visible;
|
||||
border-left: $tbl-border;
|
||||
border-bottom: none;
|
||||
margin: $tbl-margin;
|
||||
padding: $tbl-padding;
|
||||
}
|
||||
thead {
|
||||
background-color: $tbl-head-bg-color;
|
||||
color: $tbl-head-color;
|
||||
text-align: left;
|
||||
}
|
||||
tbody {
|
||||
background-color: $tbl-body-bg-color;
|
||||
color: $tbl-body-color;
|
||||
tr:nth-child(2n-1) {
|
||||
background-color: $tbl-body-alt-bg-color;
|
||||
}
|
||||
}
|
||||
&.#{$tbl-horizontal-name}{
|
||||
td,th{
|
||||
border-left: none;
|
||||
border-bottom: $tbl-border;
|
||||
}
|
||||
}
|
||||
&.#{$tbl-bordered-name}{
|
||||
td,th{
|
||||
border-bottom: $tbl-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -59,6 +59,41 @@ Suspendisse varius turpis et dui viverra semper.</pre>
|
|||
<div>Etiam maximus, ante vitae porttitor tincidunt, sem erat pharetra turpis, a ornare tortor purus <a href="https://www.google.com" class="btn lg">ut justo</a>.
|
||||
</div>
|
||||
<br>
|
||||
<h3>TODO: Add helper class for bordered that uses 1px solid rgba(0,0,0,0.25) to add a border to elements easily</h3>
|
||||
<table class="tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<button type="button" class="green sm btn">Sample button</button>
|
||||
<blockquote cite="https://www.google.com">Nam non diam ante. Curabitur non enim vitae eros luctus porta.</blockquote>
|
||||
<div class="grid-container"><div class="row"><div class="col xs-4 sm-6" style="background: red;">1c</div><div class="col xs-8 sm-6" style="background: blue;">2c</div></div><div class="row"><div class="col xs-1 sm-no md-no lg-no" style="background: purple;"></div><div class="col xs-10 sm-12" style="background: yellow;">3c</div></div></div>
|
||||
|
|
@ -94,5 +129,7 @@ Suspendisse varius turpis et dui viverra semper.</pre>
|
|||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue