///////////////////////////// // CORE / COMPONENTS / TABLES ///////////////////////////// .dcf-table caption { color: $color-caption; // If the caption font-size is not 1em, then change the font-size @if (to-number($font-size-caption) != to-number(#{ms(0)}em)) { font-size: $font-size-caption; } // If the $font-weight-caption-bold variable = true, then change the font-weight to bold @if ($font-weight-caption-bold) { font-weight: bold; } padding-bottom: $padding-bottom-caption; @if ($text-wrap-balance-caption == true) { text-wrap: balance; } } .dcf-table thead { font-size: $font-size-thead; } .dcf-table tbody { border-bottom: $border-width-table $border-style-table $border-color-table; border-top: $border-width-table $border-style-table $border-color-table; font-size: $font-size-tbody; } .dcf-table tfoot { font-size: $font-size-tfoot; } .dcf-table th, .dcf-table td { padding-right: $padding-right-table-cell; } .dcf-table-bordered, .dcf-table-bordered td, .dcf-table-bordered th { border: $border-width-table $border-style-table $border-color-table; } .dcf-table-bordered td, .dcf-table-bordered th, .dcf-table-striped td, .dcf-table-striped th { padding-left: $padding-left-table-bordered-striped-cell; padding-right: $padding-right-table-bordered-striped-cell; } .dcf-table-bordered tr:not(:last-child), .dcf-table-striped tr:not(:last-child) { border-bottom: $border-width-table $border-style-table $border-color-table; } .dcf-table-striped tbody tr:nth-of-type(even) { background-color: $bg-color-table-stripe; } .dcf-table thead th, .dcf-table thead td { padding-bottom: $padding-bottom-thead-cell; vertical-align: bottom; } .dcf-table tbody th, .dcf-table tbody td, .dcf-table tfoot th, .dcf-table tfoot td { padding-top: $padding-top-tbody-tfoot-cell; vertical-align: top; } .dcf-table tbody th, .dcf-table tbody td { padding-bottom: $padding-bottom-tbody-cell; } .dcf-table-bordered thead th { padding-top: $padding-top-table-bordered-thead-cell; } .dcf-wrapper-table-scroll { @include overflow-x-auto; left: 50%; margin-left: -50vw; margin-right: -50vw; padding-bottom: $padding-bottom-table-scroll; position: relative; right: 50%; width: 100vw; } @include mq(sm, max, width) { .dcf-table-responsive thead { @include sr-only; } .dcf-table-responsive tr, .dcf-table-responsive th { display: block; } .dcf-table-responsive td { border-collapse: separate; display: table; text-align: left !important; width: 100%; } .dcf-table-responsive.dcf-table-bordered, .dcf-table-responsive.dcf-table-bordered thead th { @include b-0; } .dcf-table-responsive.dcf-table-bordered tbody td { @include bt-0; } .dcf-table-responsive:not(.dcf-table-bordered) tbody tr { padding-bottom: $padding-bottom-table-responsive-tbody-tr; } .dcf-table-responsive:not(.dcf-table-bordered) tbody td { @include pb-0; } .dcf-table-responsive:not(.dcf-table-bordered):not(.dcf-table-striped) tbody td { @include pr-0; } // scss-lint:disable SelectorDepth .dcf-table-responsive.dcf-table-bordered tbody tr:last-child td:last-child { @include bb-0; } .dcf-table-responsive tbody td[data-label]::before { content: attr(data-label); display: table-cell; font-weight: bold; padding-right: $padding-right-table-cell; width: $width-table-responsive-data-label; } }