2019-07-18 14:22:11 +00:00
|
|
|
//
|
|
|
|
// Component: Table
|
|
|
|
//
|
2015-10-31 21:00:16 +00:00
|
|
|
|
2019-05-18 08:35:36 +00:00
|
|
|
.table {
|
2019-06-27 08:43:40 +00:00
|
|
|
&:not(.table-dark) {
|
|
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
|
|
|
|
// fixed table head
|
|
|
|
&.table-head-fixed {
|
|
|
|
thead tr:nth-child(1) th {
|
|
|
|
background-color: $white;
|
2019-07-17 21:01:00 +00:00
|
|
|
border-bottom: 0;
|
2020-05-30 13:06:11 +00:00
|
|
|
box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color;
|
2019-06-27 08:43:40 +00:00
|
|
|
position: sticky;
|
|
|
|
top: 0;
|
|
|
|
z-index: 10;
|
|
|
|
}
|
2019-05-18 08:35:36 +00:00
|
|
|
|
2019-06-27 08:43:40 +00:00
|
|
|
&.table-dark {
|
|
|
|
thead tr {
|
|
|
|
&:nth-child(1) th {
|
|
|
|
background-color: $table-dark-bg;
|
2020-05-30 13:06:11 +00:00
|
|
|
box-shadow: inset 0 1px 0 $table-dark-border-color, inset 0 -1px 0 $table-dark-border-color;
|
2019-06-27 08:43:40 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2015-10-31 21:00:16 +00:00
|
|
|
}
|
|
|
|
|
2019-06-27 08:43:40 +00:00
|
|
|
// no border
|
|
|
|
&.no-border {
|
|
|
|
&,
|
|
|
|
td,
|
|
|
|
th {
|
|
|
|
border: 0;
|
|
|
|
}
|
2015-10-31 21:00:16 +00:00
|
|
|
}
|
|
|
|
|
2019-06-27 08:43:40 +00:00
|
|
|
// .text-center in tables
|
|
|
|
&.text-center {
|
|
|
|
&,
|
|
|
|
td,
|
|
|
|
th {
|
|
|
|
text-align: center;
|
|
|
|
}
|
2015-10-31 21:00:16 +00:00
|
|
|
}
|
2018-03-17 17:07:55 +00:00
|
|
|
|
2019-09-07 05:18:40 +00:00
|
|
|
&.table-valign-middle {
|
2019-06-27 08:43:40 +00:00
|
|
|
thead > tr > th,
|
|
|
|
thead > tr > td,
|
|
|
|
tbody > tr > th,
|
|
|
|
tbody > tr > td {
|
|
|
|
vertical-align: middle;
|
2018-03-17 17:07:55 +00:00
|
|
|
}
|
2019-06-27 08:43:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.card-body.p-0 & {
|
|
|
|
thead > tr > th,
|
|
|
|
thead > tr > td,
|
2020-09-24 09:16:02 +00:00
|
|
|
tfoot > tr > th,
|
|
|
|
tfoot > tr > td,
|
2019-06-27 08:43:40 +00:00
|
|
|
tbody > tr > th,
|
|
|
|
tbody > tr > td {
|
|
|
|
&:first-of-type {
|
2019-10-29 08:22:51 +00:00
|
|
|
padding-left: map-get($spacers, 4);
|
2019-06-27 08:43:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&:last-of-type {
|
2019-10-29 08:22:51 +00:00
|
|
|
padding-right: map-get($spacers, 4);
|
2019-06-27 08:43:40 +00:00
|
|
|
}
|
2018-03-17 17:07:55 +00:00
|
|
|
}
|
2015-10-31 21:00:16 +00:00
|
|
|
}
|
|
|
|
}
|
2020-06-04 22:35:50 +00:00
|
|
|
|
|
|
|
// Expandable Table
|
2020-06-27 16:58:40 +00:00
|
|
|
|
|
|
|
.table-hover tbody tr.expandable-body:hover {
|
|
|
|
background-color: inherit !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
[data-widget="expandable-table"] {
|
|
|
|
cursor: pointer;
|
2020-07-22 14:03:54 +00:00
|
|
|
|
2021-02-27 11:56:00 +00:00
|
|
|
i.expandable-table-caret {
|
2020-07-22 14:03:54 +00:00
|
|
|
transition: transform $transition-speed linear;
|
|
|
|
}
|
|
|
|
&[aria-expanded="true"] {
|
2021-11-24 21:44:04 +00:00
|
|
|
i.expandable-table-caret {
|
|
|
|
// stylelint-disable selector-max-attribute
|
|
|
|
&[class*="right"] {
|
|
|
|
transform: rotate(90deg);
|
|
|
|
}
|
|
|
|
&[class*="left"] {
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
}
|
|
|
|
// stylelint-enable selector-max-attribute
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
[aria-expanded="true"] {
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
i.expandable-table-caret {
|
|
|
|
transition: transform $transition-speed linear;
|
|
|
|
}
|
|
|
|
[data-widget="expandable-table"] {
|
|
|
|
i.expandable-table-caret {
|
2020-07-22 14:03:54 +00:00
|
|
|
// stylelint-disable selector-max-attribute
|
|
|
|
&[class*="right"] {
|
|
|
|
transform: rotate(90deg);
|
|
|
|
}
|
|
|
|
&[class*="left"] {
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
}
|
|
|
|
// stylelint-enable selector-max-attribute
|
|
|
|
}
|
|
|
|
}
|
2020-06-27 16:58:40 +00:00
|
|
|
}
|
|
|
|
|
2020-06-04 22:35:50 +00:00
|
|
|
.expandable-body {
|
2020-07-22 14:03:54 +00:00
|
|
|
> td {
|
|
|
|
padding: 0 !important;
|
2020-06-04 22:35:50 +00:00
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
> div,
|
|
|
|
> p {
|
|
|
|
padding: $table-cell-padding;
|
|
|
|
}
|
|
|
|
}
|
2020-07-22 14:03:54 +00:00
|
|
|
|
|
|
|
.table {
|
|
|
|
width: calc(100% - #{$table-cell-padding});
|
|
|
|
margin: 0 0 0 $table-cell-padding;
|
|
|
|
|
|
|
|
tr:first-child {
|
|
|
|
td,
|
|
|
|
th {
|
|
|
|
border-top: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-06-04 22:35:50 +00:00
|
|
|
}
|
2020-09-23 14:08:15 +00:00
|
|
|
|
2021-04-13 12:24:31 +00:00
|
|
|
@include dark-mode () {
|
2020-09-23 14:08:15 +00:00
|
|
|
.table-bordered {
|
|
|
|
&,
|
|
|
|
td,
|
|
|
|
th {
|
|
|
|
border-color: $gray-600;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.table-hover {
|
|
|
|
tbody tr:hover {
|
|
|
|
color: $gray-300;
|
|
|
|
background-color: lighten($dark, 2.5%);
|
|
|
|
border-color: $gray-600;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.table {
|
|
|
|
thead th {
|
|
|
|
border-bottom-color: $gray-600;
|
|
|
|
}
|
|
|
|
th,
|
|
|
|
td {
|
|
|
|
border-top-color: $gray-600;
|
|
|
|
}
|
|
|
|
&.table-head-fixed {
|
|
|
|
thead tr:nth-child(1) th {
|
|
|
|
background-color: lighten($dark, 5%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|