Files
emoticon/src/styles/partials/theme-elements/_data-tables.scss
T
2025-03-25 17:30:21 +09:00

163 lines
2.5 KiB
SCSS

/** =====================
Data Tables css start
========================== **/
.table {
color: #888;
td,
th {
border-top: 1px solid $theme-border;
white-space: nowrap;
padding: 1.05rem 0.75rem;
}
thead th {
border-bottom: 1px solid $theme-border;
}
tbody + tbody {
border-top: 2px solid $theme-border;
}
&.table-sm {
th,
td {
padding: 0.35rem;
}
}
}
/* Border versions */
.table-bordered {
border: 1px solid $theme-border;
td,
th {
border: 1px solid $theme-border;
}
}
/* Zebra-striping */
.table-striped {
tbody tr:nth-of-type(2n + 1) {
background-color: transparentize($primary-color, 0.95);
}
}
/* Hover effect */
.table-hover {
tbody tr {
&:hover {
background-color: transparentize($primary-color, 0.95);
}
}
}
/* Table backgrounds */
.table {
.thead-dark {
th {
color: #fff;
background-color: $dark-color;
border-color: darken($dark-color, 10%);
}
}
}
.table-dark {
color: #fff;
background-color: $dark-color;
td,
th,
thead th {
border-color: darken($dark-color, 10%);
}
&.table-striped {
tbody tr:nth-of-type(odd) {
background-color: darken($dark-color, 2%);
}
}
&.table-hover {
tbody tr {
&:hover {
background-color: darken($dark-color, 5%);
}
}
}
}
/* fixed header position */
table.dataTable.fixedHeader-floating {
top: 0 !important;
@media screen and (max-width: 992px) {
display: none !important;
}
}
@media screen and (max-width: 992px) {
.fixedHeader-locked {
display: none !important;
}
}
/** =====================
Foo-table css start
========================== **/
.footable .pagination > {
.active > {
a,
span {
background-color: $primary-color;
border-color: $primary-color;
&:focus,
&:hover {
background-color: $primary-color;
border-color: $primary-color;
}
}
}
li > {
a,
span {
color: #222;
}
}
}
.footable-details.table,
.footable.table {
margin-bottom: 0;
}
table {
&.footable > tfoot > tr.footable-paging > td > span.label {
margin-bottom: 0;
}
&.footable-paging-center > tfoot > tr.footable-paging > td {
padding-bottom: 0;
}
}
.table-columned > {
tbody > {
tr > {
td {
border: 0;
border-left: 1px solid $theme-border;
}
th {
border: 0;
}
}
}
}
/**====== Foo-table css end ======**/
/**====== Data Tables css end ======**/