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

Table polishing

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-22 10:32:05 +02:00
parent 41e3f606d5
commit 2f53287788
5 changed files with 59 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dist/mini-default.css vendored
View File

@@ -786,8 +786,9 @@ table {
border-top: 1px solid #bdbdbd; } border-top: 1px solid #bdbdbd; }
table td { table td {
background: #fafafa; } background: #fafafa; }
table thead th {
border-top: 0; }
table th { table th {
border-top: 0;
background: #cfd8dc; } background: #cfd8dc; }
table th:first-child, table td:first-child { table th:first-child, table td:first-child {
border-left: 0; } border-left: 0; }
@@ -837,7 +838,8 @@ table {
-webkit-flex: 0 1 auto; -webkit-flex: 0 1 auto;
flex: 0 1 auto; flex: 0 1 auto;
-webkit-flex-flow: row wrap; -webkit-flex-flow: row wrap;
flex-flow: row wrap; } flex-flow: row wrap;
padding: 6px; }
table.horizontal caption { table.horizontal caption {
-webkit-box-flex: 1; -webkit-box-flex: 1;
max-width: 100%; max-width: 100%;
@@ -879,6 +881,8 @@ table {
border-top: 0; } border-top: 0; }
table.horizontal th { table.horizontal th {
text-align: right; } text-align: right; }
table.horizontal thead tr:first-child {
padding-left: 0; }
table.horizontal tbody tr:first-child > td { table.horizontal tbody tr:first-child > td {
padding-left: 20px; } } padding-left: 20px; } }
@media (max-width: 767px) { @media (max-width: 767px) {

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

File diff suppressed because one or more lines are too long

6
docs/v2/DEVLOG.md
View File

@@ -509,3 +509,9 @@
- Updated stylesheet references for all live pages. - Updated stylesheet references for all live pages.
- Fixed typos and proofread the `grid` documentation page. - Fixed typos and proofread the `grid` documentation page.
- Added sample `hr` to the `core` documentation page. - Added sample `hr` to the `core` documentation page.
## 20161122
- Added side `padding` to the `horizontal` `table`s.
- Fixed the way `th` elements display on `vertical` `table`s that contain `th` elements inside the `tbody` by adding a semi-specific rule for the `thead` `th` elements. More specificity caused problems.
- Tested `table` module changes on mobile, Firefox and Chrome.

38
docs/v2/playground.html
View File

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<!-- Live demo styled as of 20161111 --> <!-- Live demo styled as of 20161111 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/f3acf0b06d3784e17b6bf89ed2913e6e53f3c5a0/dist/mini-default.min.css"> <!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/f3acf0b06d3784e17b6bf89ed2913e6e53f3c5a0/dist/mini-default.min.css"> -->
<!-- Local stylesheet --> <!-- Local stylesheet -->
<link rel="stylesheet" href="../../dist/mini-default.min.css"> <link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title> <title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
@@ -393,10 +393,13 @@
</tbody> </tbody>
</table> </table>
<style> .border-fix > td, .border-fix > th { border-top: 0; } </style>
<table class="preset"> <table class="preset">
<caption>Hacker List</caption> <caption>Hacker List</caption>
<tbody> <tbody>
<tr> <tr class="border-fix">
<th data-label="Name"></th> <th data-label="Name"></th>
<th data-label="Surname">Surname</td> <th data-label="Surname">Surname</td>
<th data-label="Email">Email</td> <th data-label="Email">Email</td>
@@ -429,6 +432,37 @@
</tbody> </tbody>
</table> </table>
<table class="preset">
<caption>Hacker List</caption>
<tbody>
<tr class="border-fix">
<th data-label="Name">John</th>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<th data-label="Name">Lisa</th>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<th data-label="Name">Max</th>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<th data-label="Name">Adam</th>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
</tbody>
</table>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built 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>.</footer> <footer><strong>mini.css</strong> was designed and built 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>.</footer>

12
src/mini/_table.scss
View File

@@ -35,8 +35,10 @@ table {
color: $table-body-fore-color; color: $table-body-fore-color;
} }
} }
thead th {
border-top: 0;
}
th { th {
border-top: 0;
@if $table-head-back-color != $back-color { @if $table-head-back-color != $back-color {
background: $table-head-back-color; background: $table-head-back-color;
} }
@@ -122,6 +124,7 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
flex: 0 1 auto; flex: 0 1 auto;
-webkit-flex-flow: row wrap; -webkit-flex-flow: row wrap;
flex-flow: row wrap; flex-flow: row wrap;
padding: $table-row-padding;
caption { caption {
// Old syntax // Old syntax
-webkit-box-flex: 1; -webkit-box-flex: 1;
@@ -181,6 +184,11 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
th { th {
text-align: right; text-align: right;
} }
thead {
tr:first-child {
padding-left: 0;
}
}
tbody { tbody {
tr:first-child > td { tr:first-child > td {
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data. padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
@@ -285,4 +293,4 @@ table.#{$table-striped-name} {
background: $table-striped-alt-body-back-color; background: $table-striped-alt-body-back-color;
} }
} }
} }