beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

✨ Added a lot of new features to the table module

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-21 23:56:10 +02:00
parent f643f78f1a
commit 398d46bd1e
6 changed files with 759 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
dist/mini-default.css vendored
View file

@ -775,37 +775,30 @@ table {
border: 1px solid #bdbdbd;
margin: 0 auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
caption {
table caption {
font-size: 1.5em;
margin: 6px 0 12px; }
tr {
table tr {
padding: 6px; }
th, td {
table th, table td {
padding: 10px;
border-left: 1px solid #bdbdbd;
border-top: 1px solid #bdbdbd; }
td {
table td {
background: #fafafa; }
th {
table th {
border-top: 0;
background: #eceff1; }
th:first-child, td:first-child {
table th:first-child, table td:first-child {
border-left: 0; }
@media (max-width: 767px) {
table {
table:not(.preset) {
border-collapse: collapse;
border: 0;
width: 100%;
box-shadow: none; }
thead {
table:not(.preset) thead, table:not(.preset) th {
border: 0;
height: 1px;
width: 1px;
@ -816,27 +809,133 @@ th:first-child, td:first-child {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%); }
tr {
table:not(.preset) tr {
display: block;
border: 1px solid #bdbdbd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
background: #fafafa;
margin-bottom: 10px; }
td {
table:not(.preset) td {
display: block;
border: 0;
border-bottom: 1px solid #bdbdbd;
text-align: right; }
td:before {
table:not(.preset) td:before {
content: attr(data-label);
float: left;
font-weight: 700; }
td:last-child {
table:not(.preset) td:last-child {
border-bottom: 0; } }
@media (min-width: 768px) {
table.horizontal {
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap; }
table.horizontal caption {
-webkit-box-flex: 1;
max-width: 100%;
-webkit-flex: 0 0 100%;
flex: 0 0 100%; }
table.horizontal thead, table.horizontal tbody {
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap; }
table.horizontal thead {
z-index: 999; }
table.horizontal tbody {
overflow: auto;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex: 1 0 0;
flex: 1 0 0; }
table.horizontal tr {
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 0 auto;
flex: 1 0 auto; }
table.horizontal th, table.horizontal td {
width: 100%;
border: 1px solid #bdbdbd; }
table.horizontal th + th, table.horizontal th + td, table.horizontal td + th, table.horizontal td + td {
border-top: 0; }
table.horizontal th {
text-align: right; }
table.horizontal tbody tr:first-child > td {
padding-left: 20px; } }
@media (max-width: 767px) {
table.horizontal.preset {
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap; }
table.horizontal.preset caption {
-webkit-box-flex: 1;
max-width: 100%;
-webkit-flex: 0 0 100%;
flex: 0 0 100%; }
table.horizontal.preset thead, table.horizontal.preset tbody {
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap; }
table.horizontal.preset thead {
z-index: 999; }
table.horizontal.preset tbody {
overflow: auto;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex: 1 0 0;
flex: 1 0 0; }
table.horizontal.preset tr {
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 0 auto;
flex: 1 0 auto; }
table.horizontal.preset th, table.horizontal.preset td {
width: 100%;
border: 1px solid #bdbdbd; }
table.horizontal.preset th + th, table.horizontal.preset th + td, table.horizontal.preset td + th, table.horizontal.preset td + td {
border-top: 0; }
table.horizontal.preset th {
text-align: right; }
table.horizontal.preset tbody tr:first-child > td {
padding-left: 20px; } }
.card {
display: -webkit-box;
-webkit-box-orient: vertical;

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

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View file

@ -499,3 +499,7 @@
- Added reordering to the `grid.html` doc page, `grid` documentation finished - some polishing might still be required.
- Added a rule for `fluid` `card`s inside `col-` elements, allowing the side margins to disappear at the edges of the grid, allowing for better content viewing on mobile. Only for the demo, not in the actual toolkit.
- Changed the value of `$tab-stacked-breakpoint` to `767px` in line with above changes.
- Added `th` to the accessible hiding rule in the `table` module as a safeguard for different things.
- Heavily edited the `table` module. Desktop view now includes whole ruleset inside the `table` element, so no leaks will happen. Did the same for the responsive part of the module.
- 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.

367
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/64af6f2d5fb2bdcad4ed49631031bf2ef4c3cd54/dist/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/64af6f2d5fb2bdcad4ed49631031bf2ef4c3cd54/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>
@ -75,17 +75,360 @@
</div>
<!-- Insert your page content here-->
<main><div class="container" style="padding-top: 20px;">
<div class="row">
<div class="col-sm-12">
<div class="box-colored"></div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card fluid"></div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card fluid"></div>
</div>
</div>
<table>
<caption>Hacker List</caption>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>Handle</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
</tbody>
</table>
<br>
<table class="preset">
<caption>Hacker List</caption>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>Handle</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
</tbody>
</table>
<br>
<table class="horizontal">
<caption>Hacker List</caption>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
</tbody>
</table>
<br>
<table class="horizontal preset">
<caption>Hacker List</caption>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
</tbody>
</table>
<table class="preset">
<caption>Hacker List</caption>
<tbody>
<tr>
<th data-label="Name"></th>
<th data-label="Surname">Surname</td>
<th data-label="Email">Email</td>
<th data-label="Handle">Handle</td>
</tr>
<tr>
<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>

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

@ -283,6 +283,9 @@ $table-mobile-card-spacing: 10px; // Space between <tr> cards - mobil
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers
// in mobile view [1]
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
$table-horizontal-breakpoint: 768px; // Breakpoint 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
// Notes:
// [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.

177
src/mini/_table.scss
View file

@ -15,7 +15,6 @@ table {
@if $table-box-shadow !=0 {
box-shadow: $table-box-shadow;
}
}
caption {
font-size: $table-caption-font-size;
margin: $table-caption-margin;
@ -48,18 +47,20 @@ th {
th:first-child, td:first-child {
border-left: 0;
}
// Mobile view.
}
// Mobile view for responsive tables.
$table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view
$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view
@media (max-width: #{$table-mobile-breakpoint}) {
table {
table:not(.#{$table-not-responsive-name}) {
border-collapse: collapse;
border: 0;
width: 100%;
@if $table-box-shadow !=0 {
box-shadow: none;
}
}
// Accessibility (element is not visible, but screen readers read it normally)
thead {
thead, th {
border: 0;
height: 1px;
width: 1px;
@ -104,3 +105,169 @@ th:first-child, td:first-child {
}
}
}
}
// Horizontal table view.
$table-horizontal-name: 'horizontal' !default; // Class name for table horizontal view
@media (min-width: #{$table-horizontal-breakpoint}) {
table.#{$table-horizontal-name} {
// Old syntax
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
caption {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
}
thead, tbody {
// Old syntax
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
thead {
z-index: 999; // Fixes the visibility of the element.
}
tbody {
overflow: auto; // Allows content scrolling.
// Old syntax
-webkit-box-pack: justify;
// New syntax
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex: 1 0 0;
flex: 1 0 0;
}
tr {
// Old syntax
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}
th, td {
width: 100%;
border: $table-border-style; // Apply to overwrite.
@if $table-border-style != 0 {
& + th, & + td {
border-top: 0;
}
}
}
th {
text-align: right;
}
tbody {
tr:first-child > td {
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
}
}
}
}
// Horizontal table view for non-responsive tables. - Apply over breakpoint when non-responsive.
@media (max-width: #{$table-mobile-breakpoint}) {
table.#{$table-horizontal-name}.#{$table-not-responsive-name} {
// Old syntax
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
caption {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
}
thead, tbody {
// Old syntax
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
thead {
z-index: 999; // Fixes the visibility of the element.
}
tbody {
overflow: auto;
// Old syntax
-webkit-box-pack: justify;
// New syntax
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex: 1 0 0;
flex: 1 0 0;
}
tr {
// Old syntax
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}
th, td {
width: 100%;
border: $table-border-style; // Apply to overwrite.
@if $table-border-style != 0 {
& + th, & + td {
border-top: 0;
}
}
}
th {
text-align: right;
}
tbody {
tr:first-child > td {
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
}
}
}
}