lib/scss/components/_datatables.scss
//------------------------------------------------------------------------------
// DATATABLES STYLING
//------------------------------------------------------------------------------
.dataTables_wrapper {
@extend .row, .wrap;
margin-top: 1.5937rem;
table {
@extend .margin-y2;
overflow-x: auto;
margin-top: 0;
margin-bottom: 0;
}
}
#stats-table_wrapper {
margin: 0rem -1rem 0rem -0.5rem;
@media only screen and (max-width: 560px) {
margin: 0rem -1rem 0rem -1rem;
}
}
.dataTables_length,
.dataTables_filter {
@extend .text-5, .bold;
line-height: size(1);
label {
display: inline;
}
input {
@extend .text-5, .bold;
border-radius: size(0.25);
display: inline;
line-height: size(1);
height: size(1);
max-width: 10rem;
min-width: 0;
padding: 0 0.25rem;
width: inherit;
}
}
.dataTables_scrollBody {
margin-inline-end: 15rem;
}
.dataTables_scroll {
margin-bottom: 3.5rem;
width: 100%;
}
.dataTables_info {
@extend .center, .text-6, .margin-x1;
}
.dataTables_paginate {
@extend .text-6;
.paginate_button {
@extend .bold, .margin-x1;
}
}
#participants-table-report_wrapper {
table {
border-collapse: collapse;
overflow: auto;
position: relative;
thead {
@include color('brand');
font-size: 1rem;
td, th:first-child {
padding: 1.437rem 0 1.437rem 1.626rem !important;
}
th {
padding: 1.3rem;
}
th:nth-child(1n+7) {
display: none;
}
}
tbody {
tr {
border-bottom: 1px solid $color-theme-report-dark-gray;
}
tr:hover {
background: mix(color('black'), color('white'), 10%);
transition: 0s;
}
tr td:nth-child(1n+7) {
display: none;
}
}
}
}
#participants-table-report {
table {
margin-top: 0;
}
thead {
display: none;
}
tr {
white-space: pre;
}
td:first-child::first-line {
font-weight: 700;
}
td {
font-weight: 500;
font-size: 1rem;
}
td:nth-child(n+2) {
padding: 0;
text-align: center;
width: 4.813rem;
}
td:first-child {
padding: 2.125rem 0 2.125rem .75rem;
}
}
#participants-table-report_info {
color: $color-theme-report-dark-gray;
padding-left: 3.5rem;
font-size: 1rem;
}
#participants-table-report_paginate {
a {
color: $color-theme-report-dark-gray;
font-weight: 700;
font-size: 1rem;
}
}
#participants-table-report_filter {
display: contents;
label {
input {
background-image: url(/static/img/icons/search.svg);
background-repeat: no-repeat;
background-color: $color-white;
background-position: 4px 4px !important;
background-size: 14px;
padding-left: 1.25rem;
margin-top: 0.375rem;
width: 7.75rem;
}
}
}
#participants-table-report_length {
display: grid;
grid-template-columns: auto auto;
grid-gap: .875rem;
label {
text-indent: 0.125rem;
font-size: 1rem;
color: $color-theme-report-dark-gray;
margin-bottom: 2.188rem;
margin-top: 0.375rem;
select {
border-radius: 0.3125rem;
border: 2px solid $color-base-pink;
box-sizing: border-box;
padding: 0 0.563rem;
height: 1.75rem;
color: $color-base-pink;
font-weight: 700;
line-height: 1.188rem;
text-transform: lowercase;
display: inline;
min-width: 0;
width: 4.375rem;
margin: 0 0.875rem;
}
}
}
#order-participants {
display: grid;
width: 100%;
grid-template-columns: 1rem auto auto;
span {
font-size: 1rem;
color: $color-theme-report-dark-gray;
}
.order-select-params {
display: flex;
align-items: baseline;
gap: 0.875rem;
}
#sort-icons {
margin-top: 0.375rem;
}
#select-order-participant {
width: 13.25rem;
border-radius: 0.3125rem;
border: 2px solid $color-base-pink;
box-sizing: border-box;
padding: 0 0.6875rem;
height: 1.75rem;
color: $color-base-pink;
font-weight: 700;
line-height: 1.188rem;
text-transform: lowercase;
margin-right: .25rem;
min-width: 0;
}
#divider {
color: $color-theme-report-gray;
margin-top: 0.375rem;
}
}
@media (min-width: 1426px) {
#participants-table-report_filter {
label {
input {
width: 12.813rem;
}
}
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
#participants-table-report_wrapper {
table {
thead {
th:nth-child(n+2) {
text-align: center;
}
tr th:first-child {
width: 40rem !important;
}
}
}
}
#participants-table-report {
td:nth-child(n+2) {
width: 4.553rem;
}
}
}
@media (min-width: 1600px) {
#participants-table-report_info {
padding-left: 8.5rem;
}
}