mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-09-02 18:33:07 +02:00
Code Issues Releases Wiki Activity

Added scrollable table component

Browse Source 
All flavors updated to use the new scrollable component (except for lite and sucroa), optimizations made to the table module.
This commit is contained in:
Angelos Chalaris
2017-06-09 12:00:00 +03:00
parent 8af1ac0d9c
commit f4019a8285
18 changed files with 1000 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
dist/mini-default.css vendored
View File

@@ -117,7 +117,7 @@ hr {
overflow: visible;
line-height: 1.25em;
margin: 0.5rem;
height: 1px;
height: 0.0625rem;
background: linear-gradient(to right, #bdbdbd, #8c8c8c, #bdbdbd);
}
@@ -1336,7 +1336,7 @@ table th:first-child, table td:first-child {
}
@media screen and (min-width: 768px) {
table.horizontal {
table.horizontal, table.scrollable {
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
@@ -1349,25 +1349,32 @@ table th:first-child, table td:first-child {
flex-flow: row wrap;
padding: 0.5rem;
}
table.horizontal caption {
table.horizontal caption, table.scrollable caption {
-webkit-box-flex: 1;
max-width: 100%;
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
}
table.horizontal thead, table.horizontal tbody {
table.horizontal thead, table.horizontal tbody, table.scrollable thead, table.scrollable tbody {
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-flex;
display: flex;
}
table.horizontal thead, table.scrollable thead {
z-index: 999;
}
table.horizontal tr, table.scrollable tr {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
table.horizontal thead, table.horizontal tbody {
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
table.horizontal thead {
z-index: 999;
}
table.horizontal tbody {
overflow: auto;
-webkit-box-pack: justify;
@@ -1377,12 +1384,9 @@ table th:first-child, table td:first-child {
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;
@@ -1404,10 +1408,50 @@ table th:first-child, table td:first-child {
table.horizontal tbody tr:first-child > td {
padding-left: 1.25rem;
}
table.scrollable {
overflow: auto;
height: 400px;
border: 0;
padding-top: 0;
}
table.scrollable thead, table.scrollable tbody {
-webkit-box-flex: 1;
max-width: 100%;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
border: 0.0625rem solid #c9c9c9;
}
table.scrollable tbody {
border-top: 0;
margin-top: -0.0625rem;
}
table.scrollable tr {
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
padding: 0;
}
table.scrollable th, table.scrollable td {
-webkit-box-flex: 1;
-webkit-flex: 1 0 0%;
flex: 1 0 0%;
overflow: hidden;
text-overflow: ellipsis;
}
table.scrollable thead {
position: sticky;
top: 0;
}
}
@media screen and (max-width: 767px) {
table.horizontal.preset {
table.horizontal.preset, table.scrollable.preset {
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
@@ -1418,26 +1462,34 @@ table th:first-child, table td:first-child {
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
padding: 0.5rem;
}
table.horizontal.preset caption {
table.horizontal.preset caption, table.scrollable.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 {
table.horizontal.preset thead, table.horizontal.preset tbody, table.scrollable.preset thead, table.scrollable.preset tbody {
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-flex;
display: flex;
}
table.horizontal.preset thead, table.scrollable.preset thead {
z-index: 999;
}
table.horizontal.preset tr, table.scrollable.preset tr {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
table.horizontal.preset thead, table.horizontal.preset tbody {
-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;
@@ -1447,12 +1499,9 @@ table th:first-child, table td:first-child {
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;
@@ -1468,9 +1517,52 @@ table th:first-child, table td:first-child {
table.horizontal.preset th {
text-align: right;
}
table.horizontal.preset thead tr:first-child {
padding-left: 0;
}
table.horizontal.preset tbody tr:first-child > td {
padding-left: 1.25rem;
}
table.scrollable.preset {
overflow: auto;
height: 400px;
border: 0;
padding-top: 0;
}
table.scrollable.preset thead, table.scrollable.preset tbody {
-webkit-box-flex: 1;
max-width: 100%;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
border: 0.0625rem solid #c9c9c9;
}
table.scrollable.preset tbody {
border-top: 0;
margin-top: -0.0625rem;
}
table.scrollable.preset tr {
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
padding: 0;
}
table.scrollable.preset th, table.scrollable.preset td {
-webkit-box-flex: 1;
-webkit-flex: 1 0 0%;
flex: 1 0 0%;
overflow: hidden;
text-overflow: ellipsis;
}
table.scrollable.preset thead {
position: sticky;
top: 0;
}
}
table.striped tr:nth-of-type(2n) > td {