You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
2.9 KiB
146 lines
2.9 KiB
|
|
.simple-table {
|
|
|
|
table {
|
|
width: 100%;
|
|
display: table;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
|
|
thead {
|
|
display: table-header-group;
|
|
}
|
|
|
|
tbody {
|
|
display: table-row-group;
|
|
}
|
|
|
|
* tr {
|
|
color: inherit;
|
|
display: table-row;
|
|
outline: 0;
|
|
vertical-align: middle;
|
|
|
|
> td, th {
|
|
display: table-cell;
|
|
padding: 16px;
|
|
font-size: 0.875rem;
|
|
text-align: start;
|
|
font-weight: 400;
|
|
line-height: 1.43;
|
|
border-bottom: 1px solid var(--palette-table-lines);
|
|
letter-spacing: 0.01071em;
|
|
vertical-align: inherit;
|
|
}
|
|
|
|
> th {
|
|
font-weight: 500;
|
|
line-height: 1.5rem;
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr:last-child {
|
|
td {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.simple-table.table-dense {
|
|
& * tr {
|
|
& td, th {
|
|
padding: 6px 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.simple-table.table-hover {
|
|
& .table-container table tbody {
|
|
& tr:hover {
|
|
background-color: var(--palette-table-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.simple-table.table-bordered {
|
|
& .table-container table tbody {
|
|
& tr {
|
|
td {
|
|
border-right: 1px solid var(--palette-table-lines);
|
|
}
|
|
|
|
td:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.simple-table.table-striped {
|
|
& .table-container table tbody {
|
|
& tr:nth-of-type(odd) {
|
|
background-color: var(--palette-table-striped);
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-hover.table-striped {
|
|
& .table-container table tbody {
|
|
& tr:nth-of-type(odd):nth-of-type(odd):hover {
|
|
background-color: var(--palette-table-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.simple-table.table-sticky-header {
|
|
.table-container {
|
|
overflow-x: auto;
|
|
max-height: 100%;
|
|
}
|
|
|
|
& * table {
|
|
border-collapse: separate;
|
|
|
|
thead {
|
|
& * th:first-child {
|
|
border-radius: var(--default-borderradius) 0 0 0;
|
|
}
|
|
|
|
& * th:last-child {
|
|
border-radius: 0 var(--default-borderradius) 0 0;
|
|
}
|
|
|
|
& * th {
|
|
background-color: var(--palette-surface);
|
|
position: sticky;
|
|
z-index: 1;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.simple-table.table-sticky-footer {
|
|
.table-container {
|
|
overflow-x: auto;
|
|
max-height: 100%;
|
|
}
|
|
|
|
& * table {
|
|
border-collapse: separate;
|
|
|
|
tfoot {
|
|
& * td {
|
|
background-color: var(--palette-surface);
|
|
position: sticky;
|
|
z-index: 1;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|