mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-31 02:50:26 +02:00
Code Issues Releases 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
Download Patch File Download Diff File Expand all files Collapse all files

211
dist/mini-default.css vendored
View File

@@ -775,68 +775,167 @@ table {
border: 1px solid #bdbdbd; border: 1px solid #bdbdbd;
margin: 0 auto; margin: 0 auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); } box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
table caption {
caption { font-size: 1.5em;
font-size: 1.5em; margin: 6px 0 12px; }
margin: 6px 0 12px; } table tr {
padding: 6px; }
tr { table th, table td {
padding: 6px; } padding: 10px;
border-left: 1px solid #bdbdbd;
th, td { border-top: 1px solid #bdbdbd; }
padding: 10px; table td {
border-left: 1px solid #bdbdbd; background: #fafafa; }
border-top: 1px solid #bdbdbd; } table th {
border-top: 0;
td { background: #eceff1; }
background: #fafafa; } table th:first-child, table td:first-child {
border-left: 0; }
th {
border-top: 0;
background: #eceff1; }
th:first-child, td:first-child {
border-left: 0; }
@media (max-width: 767px) { @media (max-width: 767px) {
table { table:not(.preset) {
border-collapse: collapse; border-collapse: collapse;
border: 0; border: 0;
width: 100%; width: 100%;
box-shadow: none; } box-shadow: none; }
table:not(.preset) thead, table:not(.preset) th {
thead { border: 0;
border: 0; height: 1px;
height: 1px; width: 1px;
width: 1px; margin: -1px;
margin: -1px; overflow: hidden;
overflow: hidden; padding: 0;
padding: 0; position: absolute;
position: absolute; clip: rect(0 0 0 0);
clip: rect(0 0 0 0); -webkit-clip-path: inset(100%);
-webkit-clip-path: inset(100%); clip-path: inset(100%); }
clip-path: inset(100%); } table:not(.preset) tr {
display: block;
tr { border: 1px solid #bdbdbd;
display: block; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
border: 1px solid #bdbdbd; background: #fafafa;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); margin-bottom: 10px; }
background: #fafafa; table:not(.preset) td {
margin-bottom: 10px; } display: block;
border: 0;
td { border-bottom: 1px solid #bdbdbd;
display: block; text-align: right; }
border: 0; table:not(.preset) td:before {
border-bottom: 1px solid #bdbdbd; content: attr(data-label);
text-align: right; } float: left;
font-weight: 700; }
td:before { table:not(.preset) td:last-child {
content: attr(data-label); border-bottom: 0; } }
float: left; @media (min-width: 768px) {
font-weight: 700; } table.horizontal {
display: -webkit-box;
td:last-child { -webkit-box-flex: 0;
border-bottom: 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 { .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

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 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. - 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. - 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> <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/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 --> <!-- 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>
@@ -75,17 +75,360 @@
</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;">
<div class="row"> <table>
<div class="col-sm-12"> <caption>Hacker List</caption>
<div class="box-colored"></div> <thead>
</div> <tr>
<div class="col-sm-12 col-md-6"> <th>Name</th>
<div class="card fluid"></div> <th>Surname</th>
</div> <th>Email</th>
<div class="col-sm-12 col-md-6"> <th>Handle</th>
<div class="card fluid"></div> </tr>
</div> </thead>
</div> <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> </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>

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 $table-mobile-card-label: 'data-label'; // Attribute used to replace column headers
// in mobile view [1] // in mobile view [1]
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers $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: // 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.

315
src/mini/_table.scss
View File

@@ -15,92 +15,259 @@ table {
@if $table-box-shadow !=0 { @if $table-box-shadow !=0 {
box-shadow: $table-box-shadow; box-shadow: $table-box-shadow;
} }
} caption {
caption { font-size: $table-caption-font-size;
font-size: $table-caption-font-size; margin: $table-caption-margin;
margin: $table-caption-margin;
}
tr {
padding: $table-row-padding; // Apply always to overwrite default.
}
th, td {
padding: $table-column-padding; // Apply always to overwrite default.
border-left: $table-border-style;
border-top: $table-border-style;
}
td {
@if $table-body-back-color != $back-color {
background: $table-body-back-color;
} }
@if $table-body-fore-color != $fore-color { tr {
color: $table-body-fore-color; padding: $table-row-padding; // Apply always to overwrite default.
}
th, td {
padding: $table-column-padding; // Apply always to overwrite default.
border-left: $table-border-style;
border-top: $table-border-style;
}
td {
@if $table-body-back-color != $back-color {
background: $table-body-back-color;
}
@if $table-body-fore-color != $fore-color {
color: $table-body-fore-color;
}
}
th {
border-top: 0;
@if $table-head-back-color != $back-color {
background: $table-head-back-color;
}
@if $table-head-fore-color != $fore-color {
color: $table-head-fore-color;
}
}
th:first-child, td:first-child {
border-left: 0;
} }
} }
th { // Mobile view for responsive tables.
border-top: 0; $table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view
@if $table-head-back-color != $back-color { $table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view
background: $table-head-back-color;
}
@if $table-head-fore-color != $fore-color {
color: $table-head-fore-color;
}
}
th:first-child, td:first-child {
border-left: 0;
}
// Mobile view.
@media (max-width: #{$table-mobile-breakpoint}) { @media (max-width: #{$table-mobile-breakpoint}) {
table { table:not(.#{$table-not-responsive-name}) {
border-collapse: collapse; border-collapse: collapse;
border: 0; border: 0;
width: 100%; width: 100%;
@if $table-box-shadow !=0 { @if $table-box-shadow !=0 {
box-shadow: none; box-shadow: none;
} }
} // Accessibility (element is not visible, but screen readers read it normally)
// Accessibility (element is not visible, but screen readers read it normally) thead, th {
thead { border: 0;
border: 0; height: 1px;
height: 1px; width: 1px;
width: 1px; margin: -1px;
margin: -1px; overflow: hidden;
overflow: hidden; padding: 0;
padding: 0; position: absolute;
position: absolute; clip: rect(0 0 0 0);
clip: rect(0 0 0 0); -webkit-clip-path: inset(100%);
-webkit-clip-path: inset(100%); clip-path: inset(100%);
clip-path: inset(100%);
}
tr {
display: block;
border: $table-border-style;
@if $table-border-radius != 0 {
border-radius: $table-border-radius;
}
@if $table-box-shadow !=0 {
box-shadow: $table-box-shadow;
}
@if $table-body-back-color != $back-color {
background: $table-body-back-color;
} }
margin-bottom: $table-mobile-card-spacing; tr {
} display: block;
td { border: $table-border-style;
display: block; @if $table-border-radius != 0 {
border: 0; border-radius: $table-border-radius;
@if $table-border-style != 0 { }
border-bottom: $table-border-style; @if $table-box-shadow !=0 {
box-shadow: $table-box-shadow;
}
@if $table-body-back-color != $back-color {
background: $table-body-back-color;
}
margin-bottom: $table-mobile-card-spacing;
} }
text-align: right; td {
} display: block;
td:before { border: 0;
content: attr(#{$table-mobile-card-label}); @if $table-border-style != 0 {
float: left; border-bottom: $table-border-style;
font-weight: $table-mobile-label-font-weight; }
} text-align: right;
td:last-child {
@if $table-border-style != 0 {
border-bottom: 0;
} }
td:before {
content: attr(#{$table-mobile-card-label});
float: left;
font-weight: $table-mobile-label-font-weight;
}
td:last-child {
@if $table-border-style != 0 {
border-bottom: 0;
}
}
}
}
// 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.
}
}
} }
} }