@finqu/cool 1.2.29 → 2.0.2

package/scss/_tables.scss

@@ -1,735 +1,611 @@
-// Tables
-// ---------------------------------------------------------------------------------------------------------------
-
-// Default structure
-.table {
-    background: transparent;
-    border-spacing: 0;
-    display: table;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    table-layout: auto;
-
-    .col-icon         { width: 15px; }
-    .col-small        { width: 48px; }
-    .col-small-medium { width: 74px; }
-    .col-medium       { width: 100px; }
-    .col-medium-large { width: 150px; }
-    .col-large        { width: 288px; }
-    .col-verylarge    { width: 432px; }
-    .col-img-xs       { width: 24px; }
-    .col-img-sm       { width: 32px; }
-    .col-img-md       { width: 50px; }
-    .col-img-lg       { width: 90px; }
-    .col-img-xl       { width: 120px; }
-    .col-select       { width: 45px; }
-
-    thead,
-    .thead {
-        display: table-header-group;
-        vertical-align: middle;
-        border-color: inherit;
-    }
-
-    tbody,
-    .tbody {
-        display: table-row-group;
-        vertical-align: middle;
-        border-color: inherit;
-    }
-
-    label.tr {
-        font-size: inherit;
-    }
+@use "variables" as *;
+@use "sass:color";
+/* Tables ========================================================================== */
 
-    .tr,
-    tr {
-        display: table-row;
+@mixin cool-tables {
+    .table {
+        background: transparent;
+        border-spacing: 0;
+        display: table;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        table-layout: auto;
 
-        &:first-child td,
-        &:first-child .td {
-            border-top: 0;
+        .col-icon {
+            --cool-table-cell-width: 15px;
         }
-
-        &[data-table-link],
-        &[data-table-btn] {
-            cursor: pointer;
+        .col-small {
+            --cool-table-cell-width: 48px;
+        }
+        .col-small-medium {
+            --cool-table-cell-width: 74px;
+        }
+        .col-medium {
+            --cool-table-cell-width: 100px;
+        }
+        .col-medium-large {
+            --cool-table-cell-width: 150px;
+        }
+        .col-large {
+            --cool-table-cell-width: 288px;
+        }
+        .col-img-sm {
+            --cool-table-cell-width: 32px;
+        }
+        .col-img-md {
+            --cool-table-cell-width: 45px;
+        }
+        .col-img-lg {
+            --cool-table-cell-width: 90px;
+        }
+        .col-select {
+            --cool-table-cell-width: 18px;
         }
 
-        .th,
-        th {
-            display: table-cell;
+        thead,
+        .thead {
+            display: table-header-group;
             vertical-align: middle;
-            font-family: $table-th-font-family;
-            line-height: $table-th-line-height;
-            background-color: $table-th-bg;
-            border-bottom: $border-width solid $table-border-color;
-            color: $table-head-color;
-            font-size: $table-th-font-size;
-            font-weight: $table-th-font-weight;
-            padding: $table-th-padding-mobile;
-            word-break: normal;
-            box-sizing: content-box;
-
-            @include media-breakpoint-up(sm) {
-                padding: $table-th-padding;
-            }
+            border-color: inherit;
         }
 
-        .td,
-        td {
-            display: table-cell;
+        tbody,
+        .tbody {
+            display: table-row-group;
             vertical-align: middle;
-            line-height: $table-td-line-height;
-            background: $table-bg;
-            border-top: $border-width solid $table-border-color;
-            color: $table-color;
-            padding: $table-td-padding-mobile;
-            box-sizing: content-box;
+            border-color: inherit;
+        }
 
-            @include media-breakpoint-down(sm) {
-                word-break: break-word;
+        .tr,
+        tr {
+            display: table-row;
+
+            &:first-child td,
+            &:first-child .td {
+                border-top: 0;
             }
 
-            @include media-breakpoint-up(sm) {
-                padding: $table-td-padding;
+            &[data-table-link],
+            &[data-table-btn] {
+                cursor: pointer;
             }
 
-            .span {
+            .th,
+            th {
+                display: table-cell;
                 vertical-align: middle;
+                font-family: var(--cool-table-th-font-family);
+                line-height: var(--cool-table-th-line-height);
+                background-color: var(--cool-table-th-bg);
+                border-bottom: var(--cool-border-width) solid var(--cool-table-border-color);
+                color: var(--cool-table-head-color);
+                font-size: var(--cool-table-th-font-size);
+                font-weight: var(--cool-table-th-font-weight);
+                padding: var(--cool-table-th-padding-mobile);
+                word-break: normal;
+                box-sizing: content-box;
+                width: var(--cool-table-cell-width, auto);
+                height: var(--cool-table-cell-height, auto);
+
+                @include media-breakpoint-up(sm) {
+                    padding: var(--cool-table-th-padding);
+                }
             }
-        }
-    }
-}
-
 
-// Table essentials
-.table {
+            .td,
+            td {
+                display: table-cell;
+                vertical-align: middle;
+                position: static;
+                box-sizing: content-box;
+                line-height: var(--cool-table-td-line-height);
+                background: var(--cool-table-bg);
+                border-top: var(--cool-border-width) solid var(--cool-table-border-color);
+                color: var(--cool-table-color);
+                padding: var(--cool-table-td-padding-mobile);
+                width: var(--cool-table-cell-width, auto);
+                height: var(--cool-table-cell-height, auto);
+
+                @include media-breakpoint-down(sm) {
+                    word-break: break-word;
+                }
 
-    // Has bg
-    &.has-bg {
-        > thead > th,
-        > .thead > .th,
-        > thead > tr > th,
-        > .thead > .tr > .th,
-        > .tr > .th {
-            background-color: $table-head-bg;
+                @include media-breakpoint-up(sm) {
+                    padding: var(--cool-table-td-padding);
+                }
+            }
         }
-    }
 
-    // Form
-    .form {
-        width: 100%;
-    }
+        ul {
+            display: block;
+            width: 100%;
+            box-sizing: border-box;
+            padding-left: 40px;
 
-    // List
-    ul {
-        display: block;
-        width: 100%;
-        box-sizing: border-box;
-        padding-left: 40px;
-        @include media-breakpoint-down(sm) {
-            padding-left: 10px;
+            @include media-breakpoint-down(sm) {
+                padding-left: 10px;
+            }
         }
-    }
 
-    li {
-        display: block;
-        list-style: none;
-        width: 100%;
-    }
+        li {
+            display: block;
+            list-style: none;
+            width: 100%;
+        }
+
+        a:not(.btn):not(.dropdown-item),
+        span.icon {
+            color: var(--cool-table-link-color);
 
-    // links
-    a:not(.btn),
-    span.icon {
-        color: $table-link-color;
+            &:hover:not(span) {
+                color: var(--cool-table-link-hover-color);
 
-        &:hover:not(span) {
-            color: $table-link-hover-color;
+                .icon {
+                    color: var(--cool-table-link-hover-color);
+                }
+            }
 
             .icon {
-                color: $table-link-hover-color;
+                color: var(--cool-table-icon-color);
+                font-size: 18px;
             }
         }
 
-        &.inherit-color {
-            color: inherit;
-
-            &:hover {
-                color: inherit;
-            }
+        p {
+            a:not(.btn):not(.dropdown-item),
+            span.icon {
+                color: var(--cool-table-link-color);
+                text-decoration: none;
 
-            .icon {
-                color: inherit;
+                &:hover {
+                    color: var(--cool-table-link-hover-color);
+                }
             }
         }
 
-        .icon {
-            color: $table-icon-color;
-            font-size: 18px;
-        }
-    }
+        .image.img-md {
+            --cool-image-width: 45px;
+            --cool-image-height: 45px;
 
-    p {
-        a:not(.btn),
-        span.icon  {
-            color: $table-link-color;
-            text-decoration: none;
+            &.img-thumbnail .icon {
+                --cool-image-icon-width: 20px;
+                --cool-image-icon-height: 20px;
+            }
 
-            &:hover {
-                color: $table-link-hover-color;
+            .icon {
+                --cool-image-icon-width: 42px;
+                --cool-image-icon-height: 42px;
             }
         }
-    }
-}
-
 
-// Striped
-.table-striped {
-    .tr,
-    tr {
-        &:nth-child(odd) .td,
-        &:nth-child(odd) td {
-            background: $table-accent-bg;
+        .badge {
+            white-space: normal;
         }
     }
-}
 
+    .table-sm .tr:first-child .td,
+    .table-sm tr:first-child td {
+        padding: var(--cool-table-th-padding-sm);
+    }
 
-// Bordered
-.table-bordered {
-    .td,
-    td {
-        border-left: $border-width solid $table-border-color;
-        &:last-child {
-            border-right: $border-width solid $table-border-color;
-        }
+    .table-sm .tr .td,
+    .table-sm tr td {
+        padding: var(--cool-table-td-padding-sm);
     }
-}
 
+    .table-borderless:not(.table-sortable) .tr .th,
+    .table-borderless:not(.table-sortable) .tr .td,
+    .table-borderless:not(.table-sortable) tr th,
+    .table-borderless:not(.table-sortable) tr td {
+        border: none;
+    }
 
-// Borderless
-.table-borderless {
-    .tr,
-    tr {
-        .th,
-        th,
-        td,
-        .td {
-            border: none;
-        }
+    .table-hover thead tr th,
+    .table-hover .thead .tr .th {
+        background-color: var(--cool-table-th-bg);
     }
-}
 
+    .table-hover > tbody > tr:hover > td,
+    .table-hover > .tbody > .tr:hover > .td {
+        background-color: var(--cool-table-hover-bg);
+    }
 
-// Sortable
-.table-sortable {
-    li {
-        margin-top: -$border-width;
-        cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABF0lEQ…%2BX%2BvObByYdEkFh8%2F6qXFrrfeocIk8x2VrNl9A%2F0l7Ib3y%2F5wAAAAAElFTkSuQmCC),move;
-        cursor: -webkit-grab;
-        cursor: grab;
+    .table-hover > tbody > tr:not(:first-child):not(:last-child):hover > td,
+    .table-hover > .tbody > .tr:not(:first-child):not(:last-child):hover > .td {
+        border-radius: 0;
+    }
 
-        &.root {
-            margin-top: $border-width;
+    .table-sortable {
+        &:has(.sortable-chosen) {
+            user-select: none;
         }
 
-        &.ui-sortable-helper,
-        &:focus,
-        &:active {
-            cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA8ElEQ…MaIrswx%2FYOXKRSUsXsh8s3Y91rlQK%2FF8IiOx%2B3vxAooqZGlRhljTAAAAAElFTkSuQmCC),move;
-            cursor: -webkit-grabbing;
-            cursor: grabbing;
+        &.table-borderless {
+            .table tbody,
+            .table .tbody {
+                outline: none;
+            }
         }
 
-        &.ui-state-highlight {
-            height: 75px;
-            width: 100%;
-            background: $grey-100;
-            border-radius: $border-radius;
+        li {
+            margin-top: calc(-1 * var(--cool-border-width));
         }
-    }
-
-    table,
-    .table {
-        position: relative;
 
-        thead,
-        .thead {
-            tr,
-            .tr {
-                th,
-                .th {
-                    background-color: $table-bg;
-
-                    &.sortable {
-                        color: $table-color;
-
-                        &:hover {
-                            cursor: pointer;
-                            background: lighten($table-head-bg, 2%) !important;
-                        }
-                    }
-                }
-            }
+        li:first-child {
+            margin-top: 0;
         }
 
-        tbody,
-        .tbody {
+        table,
+        .table {
             position: relative;
-            display: table;
-            width: 100%;
-            outline: $border-width solid $table-border-color;
-            outline-offset: -$border-width;
-            background-color: #ffffff;
-
-            > tr,
-            > .tr {
-                position: relative;
 
-                &.ui-sortable-handle {
-                    &:hover {
-                        td,
-                        .td {
-                            background-color: $table-hover-bg;
-                        }
-                    }
-
-                    &:after {
-                        position: absolute;
-                        top: calc(50% - 10px);
-                        left: 20px;
-                        line-height: 0;
-                        content: '';
-                        width: 16px;
-                        height: 16px;
-                        background-repeat: no-repeat;
-                        background-position: left;
-                        // Font Awesome Free fa-ellipsis-v
-                        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIgNTEyIj48cGF0aCBmaWxsPSIjNzY4NDhGIiBkPSJNOTYgMTg0YzM5LjggMCA3MiAzMi4yIDcyIDcycy0zMi4yIDcyLTcyIDcyLTcyLTMyLjItNzItNzIgMzIuMi03MiA3Mi03MnpNMjQgODBjMCAzOS44IDMyLjIgNzIgNzIgNzJzNzItMzIuMiA3Mi03MlMxMzUuOCA4IDk2IDggMjQgNDAuMiAyNCA4MHptMCAzNTJjMCAzOS44IDMyLjIgNzIgNzIgNzJzNzItMzIuMiA3Mi03Mi0zMi4yLTcyLTcyLTcyLTcyIDMyLjItNzIgNzJ6Ij48L3BhdGg+PC9zdmc+');
-                        @include media-breakpoint-down(sm) {
-                            left: 15px;
-                        }
-                    }
-
-                    &:hover {
-                        &:after {
-                            color: $table-link-hover-color;
-                        }
-                    }
-
-                    td,
-                    .td {
-                        height: 32px;
-
-                        &:first-child {
-                            padding-left: 40px;
-                            @include media-breakpoint-down(sm) {
-                                padding-left: 30px;
-                            }
-                        }
-                    }
-                }
+            thead tr th,
+            .thead .tr .th {
+                background-color: var(--cool-table-bg);
             }
-        }
-    }
-}
 
+            thead tr th.sortable,
+            .thead .tr .th.sortable {
+                color: var(--cool-table-color);
+            }
 
-// Condensed
-.table-sm {
-    .tr,
-    tr {
-        &:first-child {
-            .td,
-            td {
-                padding: $table-th-padding-sm;
+            thead tr th.sortable:hover,
+            .thead .tr .th.sortable:hover {
+                cursor: pointer;
+                background: var(--cool-table-sortable-head-hover-bg) !important;
             }
-        }
-        .td,
-        td {
-            padding: $table-td-padding-sm;
-        }
-    }
-}
 
+            tbody,
+            .tbody {
+                position: relative;
+                display: table;
+                width: 100%;
+                outline: var(--cool-border-width) solid var(--cool-table-border-color);
+                outline-offset: calc(-0.5 * var(--cool-border-width));
+                background-color: var(--cool-table-bg);
+
+                > tr td.ui-sortable-handle,
+                > .tr .td.ui-sortable-handle {
+                    width: var(--cool-table-sortable-handle-width);
+                    height: var(--cool-table-sortable-handle-height);
+                    padding-right: 0;
+                    text-align: center;
+                    cursor:
+                        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABF0lEQ…%2BX%2BvObByYdEkFh8%2F6qXFrrfeocIk8x2VrNl9A%2F0l7Ib3y%2F5wAAAAAElFTkSuQmCC),
+                        move;
+                    cursor: -webkit-grab;
+                    cursor: grab;
+                }
 
-// Hover
-.table-hover {
-    > .tbody,
-    > tbody {
-        > .tr,
-        > tr {
-            &:hover {
-                > .td,
-                > td {
-                    background-color: $table-hover-bg;
-                    .hover-this {
-                        color: $table-link-hover-color;
-                    }
+                > tr td.ui-sortable-handle:focus,
+                > tr td.ui-sortable-handle:active,
+                > .tr .td.ui-sortable-handle:focus,
+                > .tr .td.ui-sortable-handle:active {
+                    cursor:
+                        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA8ElEQ…MaIrswx%2FYOXKRSUsXsh8s3Y91rlQK%2FF8IiOx%2B3vxAooqZGlRhljTAAAAAElFTkSuQmCC),
+                        move;
+                    cursor: -webkit-grabbing;
+                    cursor: grabbing;
                 }
             }
         }
     }
-}
 
+    .table-bulk-actions tr.selected > td,
+    .table-bulk-actions .tr.selected > .td {
+        background-color: var(--cool-table-hover-bg);
+        color: var(--cool-table-hover-color);
+    }
 
-// Bulk actions
-.table-bulk-actions {
+    .table-bulk-actions tr th.bulk-action,
+    .table-bulk-actions tr td.bulk-action,
+    .table-bulk-actions .tr .th.bulk-action,
+    .table-bulk-actions .tr .td.bulk-action {
+        cursor: pointer;
+        text-align: center;
+        position: relative;
 
-    .tr,
-    tr {
+        &:hover {
+            background: var(--cool-table-bulk-actions-hover-bg);
+            color: var(--cool-table-bulk-actions-hover-color);
 
-        &.selected {
-            > .td,
-            > td {
-                background-color: $table-hover-bg;
-                color: $table-hover-color;
+            .dropdown-menu {
+                display: block;
             }
         }
 
-        .th,
-        .td,
-        th,
-        td {
-            &.bulk-action {
-                cursor: pointer;
-                text-align: center;
-                position: relative;
-
-                &:hover {
-                    background: color('blue');
-                    color: #ffffff;
-
-                    .dropdown-menu {
-                        display: block;
-                    }
-                }
+        .dropdown-menu {
+            background: var(--cool-section-bg);
+            border: var(--cool-border-width) solid var(--cool-border-color);
+            box-shadow: var(--cool-table-bulk-actions-dropdown-shadow);
+            clear: left;
+            display: none;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            position: absolute;
+            right: 0;
+            top: 100%;
+            z-index: 100;
+            width: 100%;
+            min-width: var(--cool-table-bulk-actions-dropdown-min-width);
+
+            li {
+                font-size: var(--cool-table-bulk-actions-dropdown-item-font-size);
+                font-weight: var(--cool-font-weight-normal);
+                line-height: var(--cool-table-bulk-actions-dropdown-item-line-height);
+                min-height: var(--cool-table-bulk-actions-dropdown-item-line-height);
+
+                & > * {
+                    color: var(--cool-body-color);
+                    cursor: pointer;
+                    display: block;
+                    padding: var(--cool-table-bulk-actions-dropdown-item-padding);
+                    text-decoration: none;
+                    text-transform: none;
 
-                .dropdown-menu {
-                    background: $section-bg;
-                    border: $border-width solid $border-color;
-                    box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
-                    clear: left;
-                    display: none;
-                    list-style: none;
-                    margin: 0;
-                    padding: 0;
-                    position: absolute;
-                    right: 0;
-                    top: 100%;
-                    z-index: 100;
-                    width: 100%;
-                    min-width: 150px;
-                    li {
-                        font-size: 12px;
-                        font-weight: 400;
-                        line-height: 25px;
-                        min-height: 25px;
-                        & > * {
-                            color: $body-color;
-                            cursor: pointer;
-                            display: block;
-                            padding: 5px 15px;
-                            text-decoration: none;
-                            text-transform: none;
-                            &:hover {
-                                background: color('blue');
-                                color: $section-bg;
-                            }
-                        }
+                    &:hover {
+                        background: var(--cool-table-bulk-actions-hover-bg);
+                        color: var(--cool-section-bg);
                     }
                 }
             }
         }
     }
 
-    &.bulk-actions-active {
-
-        .bulk-actions-header {
-            display: block;
-            z-index: 1002;
-            border-bottom: $border-width solid $table-border-color;
-
-            .input-group-sm {
-                .bulk-actions-count {
-                    margin-left: -6px;
-                }
-            }
-
-            .bulk-actions-count {
-                border-left: 0;
-            }
-        }
-    }
-
-    .bulk-actions-header {
+    .table-bulk-actions .bulk-actions-header {
         display: none;
         position: absolute;
-        background: $table-bg;
-        box-sizing: border-box;
         left: 0;
-        font-family: $font-family-sans-serif;
-
-        .input-group-dropdown {
-            border: $input-border-width solid $input-group-addon-border-color;
-        }
+        top: 0;
+        background: var(--cool-table-bg);
     }
 
-    .bulk-actions-trigger-spacer {
-        box-sizing: content-box;
+    .table-bulk-actions.bulk-actions-active .bulk-actions-header {
+        display: block;
+        z-index: 1002;
+        border-bottom: var(--cool-border-width) solid var(--cool-table-border-color);
+        background-color: var(--cool-table-th-bg);
     }
 
-    .col-select {
-        text-align: left;
+    .table-bulk-actions .col-select {
+        text-align: center;
         flex-wrap: nowrap;
         position: relative;
         padding-right: 0;
+        max-width: 100%;
+        line-height: 0;
+    }
 
-        &:not(.bulk-actions-select) {
-            .styled-checkbox {
-                padding-left: 6px;
+    .table-responsive {
+        @include media-breakpoint-down(sm) {
+            --cool-table-th-padding-mobile: var(--cool-table-responsive-td-padding);
+            --cool-table-td-padding-x: var(--cool-table-responsive-td-padding);
+            overflow: hidden;
+            table-layout: auto;
+
+            &.table-bulk-actions.bulk-actions-active .bulk-actions-header,
+            .bulk-actions-select {
+                background-color: transparent;
             }
-        }
-
-        .input-group {
-            flex-wrap: nowrap;
-
-            &.input-group-sm {
-
-                .input-group-text,
-                .input-group-prepend > .input-group-text,
-                .input-group-append > .input-group-text,
-                .input-group-dropdown,
-                .input-group-prepend > .input-group-dropdown,
-                .input-group-append > .input-group-dropdown, {
-                    height: 17px;
-                    padding: 5px 6px;
-                    box-sizing: content-box;
-                    color: $table-head-color;
-                }
-
-                .btn-sm {
-                    padding: 5px 6px;
-                    color: $table-head-color;
-                    &:after {
-                        padding-left: 0;
-                    }
-                }
 
-                .input-group-dropdown .dropdown {
-                    margin: -5px -6px;
-                }
+            th,
+            .th,
+            td,
+            .td {
+                --cool-table-cell-width: auto;
             }
 
-        }
-
-        .styled-checkbox {
-            label {
-                .checkbox-inner {
-                    z-index: 1003;
-                }
+            &.table-bordered {
+                border: none;
             }
-        }
 
-        .styled-radio {
-            label {
-                .radio-inner {
-                    z-index: 1003;
-                }
+            &.table-bulk-actions .bulk-actions-header {
+                border-bottom: 0;
             }
-        }
-    }
-}
-
-
-// Responsive
-.table-responsive {
-    @include media-breakpoint-down(sm) {
-        overflow: hidden;
-        table-layout: auto;
 
-        .col-icon,
-        .col-small,
-        .col-small-medium,
-        .col-medium,
-        .col-medium-large,
-        .col-large,
-        .col-verylarge,
-        .col-img-sm,
-        .col-img-md,
-        .col-img-lg,
-        .col-select {
-            width: auto;
-        }
-
-        &.table-bordered {
-            border: none;
-        }
+            > .thead > .tr > .th:not(.bulk-actions-select),
+            > thead > tr > th:not(.bulk-actions-select) {
+                display: none;
+            }
 
-        &.table-bulk-actions {
-            .bulk-actions-header {
+            > .thead > .tr > .th.bulk-actions-select,
+            > thead > tr > th.bulk-actions-select {
                 border-bottom: 0;
+                text-align: left;
+                padding: var(--cool-table-responsive-td-padding);
             }
-        }
 
-        > .thead,
-        > thead {
+            > .tbody > .tr,
+            > tbody > tr {
+                display: block;
+                margin-bottom: var(--cool-table-responsive-margin-bottom);
+                box-sizing: border-box;
+                margin-top: 0;
+                border-right: var(--cool-border-width) solid var(--cool-table-border-color);
+                border-bottom: var(--cool-border-width) solid var(--cool-table-border-color);
+                border-left: var(--cool-border-width) solid var(--cool-table-border-color);
+                border-radius: var(--cool-border-radius);
+
+                &:first-child > .td,
+                &:first-child > td {
+                    border-top: var(--cool-border-width) solid var(--cool-table-border-color);
+                    border-left: none;
+                    border-right: none;
+                    border-bottom: none;
+                }
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
 
-            > .tr,
-            > tr {
+            > .tbody > .tr > .td,
+            > tbody > tr > td {
+                display: flex;
+                text-align: left !important;
+                min-height: 0;
+                border-top: var(--cool-border-width) solid var(--cool-table-border-color);
+                border-left: none;
+                border-right: none;
+                border-bottom: none;
+                flex: 1;
+                flex-wrap: wrap;
+                width: 100%;
+                box-sizing: border-box;
+                padding: var(--cool-table-responsive-td-padding);
+                align-items: center;
+                font-size: var(--cool-table-responsive-td-font-size);
+                line-height: var(--cool-table-responsive-td-line-height);
+                border-radius: 0 0 var(--cool-border-radius) var(--cool-border-radius);
+
+                [type="checkbox"]:not(.onoffswitch-checkbox) {
+                    margin: 0 auto 0 0;
+                }
 
-                > .th,
-                > th {
+                &.col-select {
+                    flex-wrap: nowrap;
 
-                    &:not(.bulk-actions-select) {
-                        display: none;
+                    &[data-heading]:after {
+                        content: attr(data-heading);
+                        display: inline-block;
+                        width: 100%;
+                        text-align: left;
+                        font-weight: var(--cool-table-responsive-heading-font-weight);
+                        margin-left: 5px;
                     }
 
-                    &.bulk-actions-select {
+                    .form-check:not(.bulk-actions-select) {
                         padding-left: 0;
-                        border-bottom: 0;
+                        margin-left: 0;
                     }
                 }
-            }
-        }
 
-        > .tbody,
-        > tbody {
-            > .tr,
-            > tr {
-                display: block;
-                margin-bottom: 15px;
-                box-sizing: border-box;
-                margin-top: 0;
-                border-right: $border-width solid $table-border-color;
-                border-bottom: $border-width solid $table-border-color;
-                border-left: $border-width solid $table-border-color;
-                border-radius: $border-radius;
-
-                &:first-child {
-                    > .td,
-                    > td {
-                        border-top: $border-width solid $table-border-color;
-                        border-left: none;
-                        border-right: none;
-                        border-bottom: none;
-                    }
+                a:not(.btn):not(.dropdown-item) {
+                    padding: 0;
                 }
 
-                &:last-child {
-                    margin-bottom: 0;
+                &:first-of-type:not(.d-none),
+                &:first-of-type:not(.d-sm-none),
+                &:first-of-type:not(.d-md-none) {
+                    background: var(--cool-table-responsive-first-td-bg);
+                    border-radius: var(--cool-border-radius) var(--cool-border-radius) 0 0 !important;
                 }
 
-                > .td,
-                > td {
-                    display: flex;
-                    text-align: left !important;
-                    min-height: 0;
-                    border-top: $border-width solid $table-border-color;
-                    border-left: none;
-                    border-right: none;
-                    border-bottom: none;
-                    flex: 1;
-                    flex-wrap: wrap;
+                &:first-of-type.d-none + td,
+                &:first-of-type.d-none + .td,
+                &:first-of-type.d-sm-none + td,
+                &:first-of-type.d-sm-none + .td,
+                &:first-of-type.d-md-none + td,
+                &:first-of-type.d-md-none + .td {
+                    background: var(--cool-table-responsive-first-td-bg);
+                    border-radius: var(--cool-border-radius) var(--cool-border-radius) 0 0 !important;
+                }
+
+                .heading:not(.d-none):not(.d-sm-none):not(.d-md-none),
+                &[data-heading]:not(.col-select):before {
+                    content: attr(data-heading);
+                    display: inline-block;
                     width: 100%;
-                    box-sizing: border-box;
-                    padding: 8px;
-                    align-items: center;
-                    font-size: 85%;
-                    line-height: 16px;
-                    border-radius: 0 0 $border-radius $border-radius;
-
-                    [type="checkbox"]:not(.onoffswitch-checkbox) {
-                        margin: 0 auto 0 0;
-                    }
+                    text-align: left;
+                    font-weight: var(--cool-table-responsive-heading-font-weight);
+                    margin-bottom: var(--cool-table-responsive-heading-margin-bottom);
+                }
 
-                    &.col-select {
-                        flex-wrap: nowrap;
-
-                        &[data-heading]:after {
-                            content: attr(data-heading);
-                            display: inline-block;
-                            width: 100%;
-                            text-align: left;
-                            font-weight: 500;
-                            margin-left: 5px;
-                        }
-
-                        .styled-checkbox:not(.bulk-actions-select),
-                        .styled-radio:not(.bulk-actions-select) {
-                            padding-left: 0;
-                        }
-                    }
+                .heading:not(.d-none):not(.d-sm-none):not(.d-md-none) {
+                    margin-bottom: 0;
 
-                    a:not(.btn) {
-                        padding: 0;
+                    & + * {
+                        margin-top: var(--cool-table-responsive-heading-margin-bottom);
                     }
+                }
 
-                    &:first-of-type:not(.d-none),
-                    &:first-of-type:not(.d-sm-none),
-                    &:first-of-type:not(.d-md-none) {
-                        background: $grey-50;
-                        border-radius: $border-radius $border-radius 0 0;
-                    }
+                .d-block,
+                p {
+                    width: 100%;
+                }
 
-                    &:first-of-type.d-none + td:not(.default-bg-mobile),
-                    &:first-of-type.d-none + .td:not(.default-bg-mobile),
-                    &:first-of-type.d-sm-none + td:not(.default-bg-mobile),
-                    &:first-of-type.d-sm-none + .td:not(.default-bg-mobile),
-                    &:first-of-type.d-md-none + td:not(.default-bg-mobile),
-                    &:first-of-type.d-md-none + .td:not(.default-bg-mobile) {
-                        background: $grey-50;
-                        border-radius: $border-radius $border-radius 0 0;
-                    }
+                &.no-wrap-mobile {
+                    display: flex !important;
+                    flex-wrap: nowrap;
 
-                    &.has-bg-mobile {
-                        background: darken($section-bg, 5%);
+                    .heading:not(.d-none):not(.d-sm-none):not(.d-md-none),
+                    &[data-heading]:not(.col-select):before {
+                        width: 50%;
                     }
+                }
+            }
+        }
+    }
 
-                    &.default-bg-mobile {
-                        background: $section-bg;
-                    }
+    .table-sticky-actions {
+        overflow-x: auto;
+        position: relative;
+        display: flex;
 
-                    &.show-on-responsive-table {
-                        display: inherit !important;
-                    }
+        .table {
+            min-width: 100%;
+            white-space: nowrap;
+            border-collapse: collapse;
 
-                    .heading:not(.d-none):not(.d-sm-none):not(.d-md-none),
-                    &[data-heading]:not(.col-select):before {
-                        content: attr(data-heading);
-                        display: inline-block;
-                        width: 100%;
-                        text-align: left;
-                        font-weight: 500;
-                        margin-bottom: 5px;
-                    }
+            .badge {
+                white-space: nowrap;
+            }
+        }
 
-                    .heading:not(.d-none):not(.d-sm-none):not(.d-md-none) {
-                        margin-bottom: 0;
+        .col-sticky {
+            position: sticky;
+            right: 0;
+            z-index: 2;
 
-                        & + * {
-                            margin-top: 5px;
-                        }
-                    }
+            &:has(.dropdown-menu.show) {
+                z-index: 1001;
+            }
+        }
 
-                    .d-block,
-                    p {
-                        width: 100%;
-                    }
+        .table-sticky-actions-sentinel {
+            margin-left: -2px;
+        }
 
-                    &.no-wrap-mobile {
-                        display: flex !important;
-                        flex-wrap: nowrap;
+        &.sticky {
+            .col-sticky {
+                box-shadow: inset 1px 0 0px var(--cool-table-sticky-actions-shadow-color);
+                border: transparent;
+                background-color: var(--cool-table-sticky-actions-col-sticky-bg);
+                border-radius: 0;
 
-                        .heading:not(.d-none):not(.d-sm-none):not(.d-md-none),
-                        &[data-heading]:not(.col-select):before {
-                            width: 50%;
-                        }
-                    }
+                & + * {
+                    background-color: var(--cool-table-sticky-actions-col-sticky-bg);
+                }
+
+                &:before {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    left: calc(-1 * var(--cool-table-sticky-actions-shadow-width));
+                    width: var(--cool-table-sticky-actions-shadow-width);
+                    height: 100%;
+                    z-index: -1;
+                    background: var(--cool-table-sticky-actions-shadow-gradient);
                 }
             }
+
+            th.col-sticky {
+                border-bottom: 1px solid var(--cool-table-border-color);
+            }
+
+            tbody > tr:not(:last-of-type) > td.col-sticky {
+                border-bottom: 1px solid var(--cool-table-border-color);
+            }
         }
     }
-}
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-tables;
+    }
+} @else {
+    @include cool-tables;
+}