Added scrollable table component
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
parent
8af1ac0d9c
commit
f4019a8285
18 changed files with 1000 additions and 154 deletions
130
dist/mini-dark.css
vendored
130
dist/mini-dark.css
vendored
|
|
@ -117,7 +117,7 @@ hr {
|
|||
overflow: visible;
|
||||
line-height: 1.25em;
|
||||
margin: 0.5rem;
|
||||
height: 1px;
|
||||
height: 0.0625rem;
|
||||
background: linear-gradient(to right, #616161, #9e9e9e, #616161);
|
||||
}
|
||||
|
||||
|
|
@ -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 #1c2529;
|
||||
}
|
||||
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 #1c2529;
|
||||
}
|
||||
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 {
|
||||
|
|
|
|||
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
130
dist/mini-default.css
vendored
130
dist/mini-default.css
vendored
|
|
@ -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 {
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
130
dist/mini-nord.css
vendored
130
dist/mini-nord.css
vendored
|
|
@ -117,7 +117,7 @@ hr {
|
|||
overflow: visible;
|
||||
line-height: 1.25em;
|
||||
margin: 8px;
|
||||
height: 1px;
|
||||
height: 0.0625rem;
|
||||
background: linear-gradient(to right, #ECEFF4, #D8DEE9, #ECEFF4);
|
||||
}
|
||||
|
||||
|
|
@ -1358,7 +1358,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;
|
||||
|
|
@ -1371,25 +1371,32 @@ table th:first-child, table td:first-child {
|
|||
flex-flow: row wrap;
|
||||
padding: 8px;
|
||||
}
|
||||
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;
|
||||
|
|
@ -1399,12 +1406,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;
|
||||
|
|
@ -1426,10 +1430,50 @@ table th:first-child, table td:first-child {
|
|||
table.horizontal tbody tr:first-child > td {
|
||||
padding-left: 20px;
|
||||
}
|
||||
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: 1px solid #D8DEE9;
|
||||
}
|
||||
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;
|
||||
|
|
@ -1440,26 +1484,34 @@ table th:first-child, table td:first-child {
|
|||
flex: 0 1 auto;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
padding: 8px;
|
||||
}
|
||||
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;
|
||||
|
|
@ -1469,12 +1521,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;
|
||||
|
|
@ -1490,9 +1539,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: 20px;
|
||||
}
|
||||
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: 1px solid #D8DEE9;
|
||||
}
|
||||
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 {
|
||||
|
|
|
|||
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/mini-sucroa.css
vendored
2
dist/mini-sucroa.css
vendored
|
|
@ -119,7 +119,7 @@ hr {
|
|||
overflow: visible;
|
||||
line-height: 1.3em;
|
||||
margin: 10px;
|
||||
height: 1px;
|
||||
height: 0.0625rem;
|
||||
background: linear-gradient(to right, #5d545f, #1e1320, #5d545f);
|
||||
}
|
||||
|
||||
|
|
|
|||
2
dist/mini-sucroa.min.css
vendored
2
dist/mini-sucroa.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -182,10 +182,6 @@
|
|||
<td data-label="Variable">$table-horizontal-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for horizontal <code><table></code> elements<sup><a href="#table-note-one">1</a></sup></td><td data-label="Sample value">'horizontal'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-horizontal-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint for horizontal <code><table></code> elements' mobile view<sup><a href="#table-note-one">1</a></sup></td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-not-responsive-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for preset <code><table></code> elements</td><td data-label="Sample value">'preset'</td>
|
||||
|
|
@ -204,7 +200,7 @@
|
|||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="table-note-one">The values of <code>$table-horizontal-name</code> and <code>$table-horizontal-breakpoint</code> will only be used if <code>$include-horizontal-table</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="table-note-one">The value of <code>$table-horizontal-name</code> will only be used if <code>$include-horizontal-table</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
147
docs/demo.html
147
docs/demo.html
|
|
@ -77,26 +77,133 @@
|
|||
<!-- Insert your page content here-->
|
||||
<main>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-sm-11">
|
||||
<label for="check1" style="width: 280px;">Switch label </label>
|
||||
</div>
|
||||
<div class="col-sm-1 input-group">
|
||||
<input type="checkbox" id="check1" tabindex="0">
|
||||
<label for="check1" class="switch"></label>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="input-group">
|
||||
<input type="checkbox" id="check2" tabindex="0">
|
||||
<label for="check2">Switch</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="switch1">Switch with text on its left </label>
|
||||
<input type="checkbox" id="switch1" tabindex="0">
|
||||
<label for="switch1" class="switch"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="scrollable">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Sophia</td>
|
||||
<td data-label="Surname">Canderson</td>
|
||||
<td data-label="Alias">Candee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOneasdasdsada sdasdasdasdasdas dasdasdasasdas</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar diam eu nunc volutpat ultricies. Suspendisse id eleifend magna. Proin purus nisl, laoreet at libero eget, tincidunt feugiat ex. Suspendisse et dui sed erat maximus mattis nec vitae erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non justo placerat, cursus magna et, posuere metus. Proin id pretium tortor, ut sollicitudin enim. Nulla gravida lorem euismod orci finibus vehicula.
|
||||
|
||||
Praesent orci turpis, dictum et elementum a, cursus sed libero. Sed maximus gravida maximus. Aenean tristique dui in lacus sollicitudin volutpat. Fusce lobortis at metus vitae ultricies. Sed pretium ante vitae metus convallis, in tincidunt urna blandit. Proin nec dui ac est tincidunt elementum. Etiam eu nisi leo. In pulvinar erat ut diam vulputate, a rhoncus libero dictum. Proin condimentum volutpat elementum. Morbi nec ultrices lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur aliquam nunc eu mollis. Duis pharetra lectus rhoncus feugiat ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dictum erat orci, sed sodales sapien aliquam et.
|
||||
|
||||
Suspendisse in nulla nisi. Praesent vitae ornare sem. Nunc ornare eu ipsum sed mollis. Pellentesque mattis felis quis mauris feugiat lobortis. Fusce viverra eget neque eget ultricies. Cras a imperdiet nunc, sed malesuada augue. Sed blandit urna est, ut rutrum lorem tincidunt sit amet. Sed quam risus, rutrum at hendrerit eget, pharetra at ipsum. Nam nunc quam, semper non cursus at, lobortis fermentum ipsum.
|
||||
|
||||
Maecenas sed faucibus velit. Ut est risus, pulvinar in est iaculis, placerat mattis odio. Integer tincidunt eu lacus a mattis. Vivamus rutrum orci non augue eleifend, tincidunt viverra nibh vulputate. Nam sollicitudin, urna ac aliquet auctor, nibh neque hendrerit massa, sed blandit dolor mauris ut erat. Aliquam non arcu at ex dignissim viverra. Ut elit est, vulputate eu scelerisque eu, ultricies ac mi. Aenean vel consequat nulla. Nunc at nibh egestas, vestibulum enim a, luctus augue. Proin at urna at magna egestas aliquet sit amet non mi.
|
||||
|
||||
Vestibulum ex quam, tristique ac urna at, aliquam convallis turpis. Nunc malesuada, libero id egestas sodales, metus massa aliquam libero, quis dapibus turpis felis ut ligula. Curabitur at porta mi. Nullam laoreet efficitur quam, vel posuere odio tincidunt at. Nam augue lacus, tincidunt nec enim sed, feugiat vehicula enim. Vivamus faucibus hendrerit ipsum, eu tincidunt nunc ultrices vitae. Vestibulum vestibulum odio sed erat finibus, nec pretium enim eleifend. Praesent eget magna vel magna eleifend tempus ac eget dolor. Duis pretium arcu tincidunt nibh pretium, quis venenatis erat suscipit. Maecenas mattis mattis sem in rutrum. Nullam volutpat iaculis rhoncus. </p>
|
||||
<br/>
|
||||
<table class="horizontal">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Sophia</td>
|
||||
<td data-label="Surname">Canderson</td>
|
||||
<td data-label="Alias">Candee</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
<!-- End of page content-->
|
||||
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>.<br/>
|
||||
|
|
|
|||
|
|
@ -1241,3 +1241,11 @@
|
|||
- Added `box-shadow` option to `.switch` (was missing before).
|
||||
- Added `box-shadow` to `checkbox` and `radio`, updated flavors as required.
|
||||
- Added and updated customization documentation and navigation for `.switch` component.
|
||||
|
||||
## 20170609
|
||||
|
||||
- Removed `$table-horizontal-breakpoint`, will now use generated value from `$table-mobile-breakpoint`.
|
||||
- Added styling for `.scrollable` `table`s, total size about `0.29KB` gzipped, pretty large but that's the largest component that was added in the update.
|
||||
- Updated the definition of `hr` to use `$_1px` instead of `1px`.
|
||||
- Optimized `.horizontal` and `.scrollable` `table`s to use mixed definitions whenever possible.
|
||||
- Updated all flavors to use (or not) `.scrollable` `table`s.
|
||||
|
|
|
|||
|
|
@ -238,6 +238,7 @@ $checkbox-border-radius: $input-border-radius; // Border radius for checkbox/r
|
|||
$checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 0.375rem; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
|
||||
$checkbox-box-shadow: none; // Box shadow for checkbox/radio
|
||||
$include-switch: true; // Should switch components be included? (`true`/`false`)
|
||||
$switch-name: 'switch'; // Class name for switch components
|
||||
$switch-bar-back-color: #324148; // Back color for the switch's bar
|
||||
|
|
@ -254,7 +255,7 @@ $switch-knob-width: 1.25rem; // Width for the switch's knob
|
|||
$switch-knob-height: 1.25rem; // Height for the switch's knob
|
||||
$switch-knob-border-style: 0; // Border style for the switch's knob
|
||||
$switch-knob-border-radius: 100%; // Borer radius for the switch's knob
|
||||
$switch-bar-box-shadow: none; // Box shadow for the switch's knob
|
||||
$switch-knob-box-shadow: none; // Box shadow for the switch's knob
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables.
|
||||
|
|
@ -347,16 +348,20 @@ $table-mobile-card-spacing: 0.625rem; // 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
|
||||
$include-horizontal-table: true; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
|
||||
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
|
||||
$include-scrollable-table: true; // Should scrollable <table> elements be included? (`true`/`false`) [3]
|
||||
$table-scrollable-name: 'scrollable'; // Class name for <table> scrollable view
|
||||
$table-scrollable-height: 400px; // Height for <table> scrolalble view.
|
||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||
$table-striped-alt-body-back-color: #263238; // Alternate background color for <td> in striped <table>
|
||||
// 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.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal biew will be included in a class defined by
|
||||
// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal view will be included in a class defined by
|
||||
// $table-horizontal-name.
|
||||
// [3] - If $include-scrollable-table is `true`, then the <table> scrollable view will be included in a class defined by
|
||||
// $table-scrollable-name and a height defined by $table-scrollable-height.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #232e33; // Background color for cards
|
||||
|
|
|
|||
|
|
@ -348,16 +348,20 @@ $table-mobile-card-spacing: 0.625rem; // 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
|
||||
$include-horizontal-table: true; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
|
||||
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
|
||||
$include-scrollable-table: true; // Should scrollable <table> elements be included? (`true`/`false`) [3]
|
||||
$table-scrollable-name: 'scrollable'; // Class name for <table> scrollable view
|
||||
$table-scrollable-height: 400px; // Height for <table> scrolalble view.
|
||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||
$table-striped-alt-body-back-color: #e5e5e5; // Alternate background color for <td> in striped <table>
|
||||
// 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.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal biew will be included in a class defined by
|
||||
// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal view will be included in a class defined by
|
||||
// $table-horizontal-name.
|
||||
// [3] - If $include-scrollable-table is `true`, then the <table> scrollable view will be included in a class defined by
|
||||
// $table-scrollable-name and a height defined by $table-scrollable-height.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
|
|
|
|||
|
|
@ -286,13 +286,14 @@ $table-mobile-card-spacing: 0.625rem; // 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
|
||||
$include-horizontal-table: false; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$include-scrollable-table: false; // Should scrollable <table> elements be included? (`true`/`false`) [2]
|
||||
$include-striped-table: false; // [Hidden flag override] Should striped <table> elements be included (`true`/`false`) [2]
|
||||
// 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.
|
||||
// [2] - Due to the $include-horizontal-table and $include-striped-table flags being set to `false`, no styling will be
|
||||
// provided for horizontal and striped <table> elements. Please refer to a full fulavor to find the variables associated
|
||||
// with these components, if you want to enable them.
|
||||
// [2] - Due to the $include-horizontal-table, $include-scrollable-table and $include-striped-table flags being set to `false`,
|
||||
// no styling will be provided for horizontal, scrollable and striped <table> elements. Please refer to a full fulavor to find
|
||||
// the variables associated with these components, if you want to enable them.
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
|
|
|
|||
|
|
@ -360,16 +360,20 @@ $table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile
|
|||
$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
|
||||
$include-horizontal-table: true; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
|
||||
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
|
||||
$include-scrollable-table: true; // Should scrollable <table> elements be included? (`true`/`false`) [3]
|
||||
$table-scrollable-name: 'scrollable'; // Class name for <table> scrollable view
|
||||
$table-scrollable-height: 400px; // Height for <table> scrolalble view.
|
||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||
$table-striped-alt-body-back-color: #E5E9F0; // Alternate background color for <td> in striped <table>
|
||||
// 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.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal biew will be included in a class defined by
|
||||
// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal view will be included in a class defined by
|
||||
// $table-horizontal-name.
|
||||
// [3] - If $include-scrollable-table is `true`, then the <table> scrollable view will be included in a class defined by
|
||||
// $table-scrollable-name and a height defined by $table-scrollable-height.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #ECEFF4; // Background color for cards
|
||||
|
|
|
|||
|
|
@ -338,6 +338,7 @@ $table-mobile-card-spacing: 12px; // Space between <tr> cards - mobile
|
|||
$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
|
||||
$include-horizontal-table: false; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$include-scrollable-table: false; // Should scrollable <table> elements be included? (`true`/`false`) [2]
|
||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||
$table-striped-alt-body-back-color: #ece4ff; // Alternate background color for <td> in striped <table>
|
||||
|
|
@ -345,7 +346,9 @@ $table-striped-alt-body-back-color: #ece4ff; // Alternate background color fo
|
|||
// [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.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal view will be included in a class defined by
|
||||
// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
|
||||
// $table-horizontal-name.
|
||||
// [3] - If $include-scrollable-table is `true`, then the <table> scrollable view will be included in a class defined by
|
||||
// $table-scrollable-name and a height defined by $table-scrollable-height.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #f2d7d8; // Background color for cards
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ hr {
|
|||
line-height: $horizontal-rule-line-height;
|
||||
margin: $horizontal-rule-margin;
|
||||
@if $horizontal-rule-fancy-style {
|
||||
height: 1px;
|
||||
height: $_1px;
|
||||
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
}
|
||||
@else {
|
||||
|
|
|
|||
|
|
@ -6,8 +6,11 @@ $table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile vi
|
|||
$table-mobile-card-spacing: 10px !default; // Space between <tr> cards - mobile view.
|
||||
$table-mobile-card-label: 'data-label' !default;// Attribute used to replace column headers in mobile view.
|
||||
$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view.
|
||||
$include-horizontal-table: true !default; // Should horizontal tables be included?
|
||||
$include-horizontal-table: true !default; // Should horizontal tables be included? (`true`/`false`)
|
||||
$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view.
|
||||
$include-scrollable-table: true !default; // Should scrollable tables be included? (`true`/`false`)
|
||||
$table-scrollable-name: 'scrollable' !default;// Class name for table scrollable view.
|
||||
$table-scrollable-height: 400px !default; // Height for table scrollable view.
|
||||
$include-striped-table: true !default; // [Hidden flag] Should striped tables be included? (`true`/`false`)
|
||||
$table-striped-name: 'striped' !default; // Class name for striped table.
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
|
|
@ -118,8 +121,290 @@ table {
|
|||
}
|
||||
}
|
||||
// Horizontal table view.
|
||||
@if $include-horizontal-table {
|
||||
@media screen and (min-width: #{$table-horizontal-breakpoint}) {
|
||||
@if $include-horizontal-table and $include-scrollable-table {
|
||||
@media screen and (min-width: #{($table-mobile-breakpoint+1px)}) {
|
||||
table.#{$table-horizontal-name}, table.#{$table-scrollable-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;
|
||||
padding: $table-row-padding;
|
||||
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;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
table.#{$table-horizontal-name} {
|
||||
thead, tbody {
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
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
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
-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 {
|
||||
&:not(:first-child) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
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.
|
||||
}
|
||||
}
|
||||
}
|
||||
table.#{$table-scrollable-name} {
|
||||
overflow: auto;
|
||||
height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
thead, tbody {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
border: $table-border-style;
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: -0.0625rem;
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
padding: 0; // Resets padding to avooid awkward spacing.
|
||||
}
|
||||
th, td {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
// New syntax
|
||||
-webkit-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: #{$table-mobile-breakpoint}) {
|
||||
table.#{$table-horizontal-name}.#{$table-not-responsive-name}, table.#{$table-scrollable-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;
|
||||
padding: $table-row-padding;
|
||||
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;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
table.#{$table-horizontal-name}.#{$table-not-responsive-name} {
|
||||
thead, tbody {
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
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
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
-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 {
|
||||
&:not(:first-child) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
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.
|
||||
}
|
||||
}
|
||||
}
|
||||
table.#{$table-scrollable-name}.#{$table-not-responsive-name} {
|
||||
overflow: auto;
|
||||
height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
thead, tbody {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
border: $table-border-style;
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: -0.0625rem;
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
padding: 0; // Resets padding to avooid awkward spacing.
|
||||
}
|
||||
th, td {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
// New syntax
|
||||
-webkit-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $include-horizontal-table {
|
||||
@media screen and (min-width: #{($table-mobile-breakpoint+1px)}) {
|
||||
table.#{$table-horizontal-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
|
|
@ -203,7 +488,6 @@ table {
|
|||
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.
|
||||
|
|
@ -289,6 +573,164 @@ table {
|
|||
}
|
||||
}
|
||||
}
|
||||
@else if $include-scrollable-table {
|
||||
@media screen and (min-width: #{($table-mobile-breakpoint+1px)}) {
|
||||
table.#{$table-scrollable-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;
|
||||
overflow: auto;
|
||||
height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding: $table-row-padding;
|
||||
padding-top: 0;
|
||||
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: 1;
|
||||
max-width: 100%;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
border: $table-border-style;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: -0.0625rem;
|
||||
}
|
||||
tr {
|
||||
// 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 wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
padding: 0; // Resets padding to avooid awkward spacing.
|
||||
}
|
||||
th, td {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
// New syntax
|
||||
-webkit-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: #{$table-mobile-breakpoint}) {
|
||||
table.#{$table-scrollable-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;
|
||||
overflow: auto;
|
||||
height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding: $table-row-padding;
|
||||
padding-top: 0;
|
||||
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: 1;
|
||||
max-width: 100%;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
border: $table-border-style;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: -0.0625rem;
|
||||
}
|
||||
tr {
|
||||
// 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 wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
padding: 0; // Resets padding to avooid awkward spacing.
|
||||
}
|
||||
th, td {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
// New syntax
|
||||
-webkit-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Striped tables.
|
||||
@if $include-striped-table { // Striped tables can be turned on or off.
|
||||
table.#{$table-striped-name} {
|
||||
|
|
|
|||
Loading…
Reference in a new issue