mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 05:47:23 +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; }
table td {
background: #fafafa; }
table thead th {
border-top: 0; }
table th {
border-top: 0;
background: #cfd8dc; }
table th:first-child, table td:first-child {
border-left: 0; }
@@ -837,7 +838,8 @@ table {
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap; }
flex-flow: row wrap;
padding: 6px; }
table.horizontal caption {
-webkit-box-flex: 1;
max-width: 100%;
@@ -879,6 +881,8 @@ table {
border-top: 0; }
table.horizontal th {
text-align: right; }
table.horizontal thead tr:first-child {
padding-left: 0; }
table.horizontal tbody tr:first-child > td {
padding-left: 20px; } }
@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.
- Fixed typos and proofread the `grid` 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>
<head>
<!-- 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 -->
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
@@ -393,10 +393,13 @@
</tbody>
</table>
<style> .border-fix > td, .border-fix > th { border-top: 0; } </style>
<table class="preset">
<caption>Hacker List</caption>
<tbody>
<tr>
<tr class="border-fix">
<th data-label="Name"></th>
<th data-label="Surname">Surname</td>
<th data-label="Email">Email</td>
@@ -429,6 +432,37 @@
</tbody>
</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>
<!-- 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>

12
src/mini/_table.scss
View File

@@ -35,8 +35,10 @@ table {
color: $table-body-fore-color;
}
}
thead th {
border-top: 0;
}
th {
border-top: 0;
@if $table-head-back-color != $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;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
padding: $table-row-padding;
caption {
// Old syntax
-webkit-box-flex: 1;
@@ -181,6 +184,11 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
th {
text-align: right;
}
thead {
tr:first-child {
padding-left: 0;
}
}
tbody {
tr:first-child > td {
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;
}
}
}
}