mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-07 14:26:28 +02:00
Code Issues Releases Wiki Activity

Striped tables, finished implementation of the features described in issue #32

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-22 00:08:27 +02:00
parent e99dcae2a9
commit 42ee89f147
6 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dist/mini-default.css vendored
View File

@@ -936,6 +936,9 @@ table {
text-align: right; } text-align: right; }
table.horizontal.preset tbody tr:first-child > td { table.horizontal.preset tbody tr:first-child > td {
padding-left: 20px; } } padding-left: 20px; } }
table.striped tr:nth-of-type(2n) > td {
background: #eeeeee; }
.card { .card {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View File

@@ -504,3 +504,4 @@
- Added support for horizontal and non-responsive tables in the `table` module. Added lots of new variables and rules as needed. - Added support for horizontal and non-responsive tables in the `table` module. Added lots of new variables and rules as needed.
- Tested new `table` module functionality thoroughly. Everything seems to work like a charm, even if the implementation is a little bit fiddly due to flexbox playing some tricks. - Tested new `table` module functionality thoroughly. Everything seems to work like a charm, even if the implementation is a little bit fiddly due to flexbox playing some tricks.
- Updated a few colors for consistency. - Updated a few colors for consistency.
- Added support for `striped` `table`s in the `table` module. Updated accordingly with variables and the likes.

2
docs/v2/playground.html
View File

@@ -75,7 +75,7 @@
</div> </div>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container" style="padding-top: 20px;"> <main><div class="container" style="padding-top: 20px;">
<table> <table class="striped">
<caption>Hacker List</caption> <caption>Hacker List</caption>
<thead> <thead>
<tr> <tr>

3
src/flavors/mini-default.scss
View File

@@ -286,6 +286,9 @@ $table-mobile-label-font-weight:$bold-font-weight; // Font weight for mob
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view $table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view $table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view $table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
$table-striped-name: 'striped'; // Class name for striped <table>
$table-striped-alt-body-back-color: // Alternate background color for <td> in
#eeeeee; // striped <table>
// Notes: // Notes:
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table // [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
// in order for their mobile headers to display properly. // in order for their mobile headers to display properly.

7
src/mini/_table.scss
View File

@@ -270,4 +270,11 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
} }
} }
}
// Striped tables.
$table-striped-name: 'striped' !default; // Class name for striped table
table.#{$table-striped-name} {
tr:nth-of-type(2n) > td {
background: $table-striped-alt-body-back-color;
}
} }