@finqu/cool 1.3.0 → 2.0.2

package/scss/_tables.scss

@@ -0,0 +1,611 @@
+@use "variables" as *;
+@use "sass:color";
+/* Tables ========================================================================== */
+
+@mixin cool-tables {
+    .table {
+        background: transparent;
+        border-spacing: 0;
+        display: table;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        table-layout: auto;
+
+        .col-icon {
+            --cool-table-cell-width: 15px;
+        }
+        .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;
+        }
+
+        thead,
+        .thead {
+            display: table-header-group;
+            vertical-align: middle;
+            border-color: inherit;
+        }
+
+        tbody,
+        .tbody {
+            display: table-row-group;
+            vertical-align: middle;
+            border-color: inherit;
+        }
+
+        .tr,
+        tr {
+            display: table-row;
+
+            &:first-child td,
+            &:first-child .td {
+                border-top: 0;
+            }
+
+            &[data-table-link],
+            &[data-table-btn] {
+                cursor: pointer;
+            }
+
+            .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);
+                }
+            }
+
+            .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;
+                }
+
+                @include media-breakpoint-up(sm) {
+                    padding: var(--cool-table-td-padding);
+                }
+            }
+        }
+
+        ul {
+            display: block;
+            width: 100%;
+            box-sizing: border-box;
+            padding-left: 40px;
+
+            @include media-breakpoint-down(sm) {
+                padding-left: 10px;
+            }
+        }
+
+        li {
+            display: block;
+            list-style: none;
+            width: 100%;
+        }
+
+        a:not(.btn):not(.dropdown-item),
+        span.icon {
+            color: var(--cool-table-link-color);
+
+            &:hover:not(span) {
+                color: var(--cool-table-link-hover-color);
+
+                .icon {
+                    color: var(--cool-table-link-hover-color);
+                }
+            }
+
+            .icon {
+                color: var(--cool-table-icon-color);
+                font-size: 18px;
+            }
+        }
+
+        p {
+            a:not(.btn):not(.dropdown-item),
+            span.icon {
+                color: var(--cool-table-link-color);
+                text-decoration: none;
+
+                &:hover {
+                    color: var(--cool-table-link-hover-color);
+                }
+            }
+        }
+
+        .image.img-md {
+            --cool-image-width: 45px;
+            --cool-image-height: 45px;
+
+            &.img-thumbnail .icon {
+                --cool-image-icon-width: 20px;
+                --cool-image-icon-height: 20px;
+            }
+
+            .icon {
+                --cool-image-icon-width: 42px;
+                --cool-image-icon-height: 42px;
+            }
+        }
+
+        .badge {
+            white-space: normal;
+        }
+    }
+
+    .table-sm .tr:first-child .td,
+    .table-sm tr:first-child td {
+        padding: var(--cool-table-th-padding-sm);
+    }
+
+    .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;
+    }
+
+    .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);
+    }
+
+    .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;
+    }
+
+    .table-sortable {
+        &:has(.sortable-chosen) {
+            user-select: none;
+        }
+
+        &.table-borderless {
+            .table tbody,
+            .table .tbody {
+                outline: none;
+            }
+        }
+
+        li {
+            margin-top: calc(-1 * var(--cool-border-width));
+        }
+
+        li:first-child {
+            margin-top: 0;
+        }
+
+        table,
+        .table {
+            position: relative;
+
+            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);
+            }
+
+            thead tr th.sortable:hover,
+            .thead .tr .th.sortable:hover {
+                cursor: pointer;
+                background: var(--cool-table-sortable-head-hover-bg) !important;
+            }
+
+            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;
+                }
+
+                > 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);
+    }
+
+    .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;
+
+        &:hover {
+            background: var(--cool-table-bulk-actions-hover-bg);
+            color: var(--cool-table-bulk-actions-hover-color);
+
+            .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;
+
+                    &:hover {
+                        background: var(--cool-table-bulk-actions-hover-bg);
+                        color: var(--cool-section-bg);
+                    }
+                }
+            }
+        }
+    }
+
+    .table-bulk-actions .bulk-actions-header {
+        display: none;
+        position: absolute;
+        left: 0;
+        top: 0;
+        background: var(--cool-table-bg);
+    }
+
+    .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);
+    }
+
+    .table-bulk-actions .col-select {
+        text-align: center;
+        flex-wrap: nowrap;
+        position: relative;
+        padding-right: 0;
+        max-width: 100%;
+        line-height: 0;
+    }
+
+    .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;
+            }
+
+            th,
+            .th,
+            td,
+            .td {
+                --cool-table-cell-width: auto;
+            }
+
+            &.table-bordered {
+                border: none;
+            }
+
+            &.table-bulk-actions .bulk-actions-header {
+                border-bottom: 0;
+            }
+
+            > .thead > .tr > .th:not(.bulk-actions-select),
+            > thead > tr > th:not(.bulk-actions-select) {
+                display: none;
+            }
+
+            > .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);
+            }
+
+            > .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;
+                }
+            }
+
+            > .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;
+                }
+
+                &.col-select {
+                    flex-wrap: nowrap;
+
+                    &[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;
+                    }
+
+                    .form-check:not(.bulk-actions-select) {
+                        padding-left: 0;
+                        margin-left: 0;
+                    }
+                }
+
+                a:not(.btn):not(.dropdown-item) {
+                    padding: 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;
+                }
+
+                &: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%;
+                    text-align: left;
+                    font-weight: var(--cool-table-responsive-heading-font-weight);
+                    margin-bottom: var(--cool-table-responsive-heading-margin-bottom);
+                }
+
+                .heading:not(.d-none):not(.d-sm-none):not(.d-md-none) {
+                    margin-bottom: 0;
+
+                    & + * {
+                        margin-top: var(--cool-table-responsive-heading-margin-bottom);
+                    }
+                }
+
+                .d-block,
+                p {
+                    width: 100%;
+                }
+
+                &.no-wrap-mobile {
+                    display: flex !important;
+                    flex-wrap: nowrap;
+
+                    .heading:not(.d-none):not(.d-sm-none):not(.d-md-none),
+                    &[data-heading]:not(.col-select):before {
+                        width: 50%;
+                    }
+                }
+            }
+        }
+    }
+
+    .table-sticky-actions {
+        overflow-x: auto;
+        position: relative;
+        display: flex;
+
+        .table {
+            min-width: 100%;
+            white-space: nowrap;
+            border-collapse: collapse;
+
+            .badge {
+                white-space: nowrap;
+            }
+        }
+
+        .col-sticky {
+            position: sticky;
+            right: 0;
+            z-index: 2;
+
+            &:has(.dropdown-menu.show) {
+                z-index: 1001;
+            }
+        }
+
+        .table-sticky-actions-sentinel {
+            margin-left: -2px;
+        }
+
+        &.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;
+
+                & + * {
+                    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;
+}

package/scss/_tabs.scss

@@ -0,0 +1,50 @@
+@use "variables" as *;
+/* Tabs ========================================================================== */
+
+@mixin cool-tabs {
+    .tabs-container {
+        overflow-x: auto;
+
+        &:has(+ .tab-content) {
+            padding-bottom: var(--cool-section-spacer);
+        }
+    }
+
+    .tabs {
+        display: inline-flex;
+        gap: 1px;
+        align-items: center;
+        background-color: var(--cool-section-bg);
+        border-radius: calc(var(--cool-section-border-radius) + 2px);
+        padding: 2px;
+        list-style-type: none;
+        margin: 0;
+        border: 1px solid var(--cool-section-border-color);
+        box-shadow: var(--cool-box-shadow-sm);
+
+        .tab-item {
+            &.active .tab-item-action {
+                border-color: var(--cool-theme-text-color-info);
+                color: var(--cool-theme-text-color-info);
+            }
+
+            .tab-item-action {
+                display: block;
+                padding: var(--cool-spacing-1) var(--cool-spacing-1);
+                border: 1px solid transparent;
+                border-radius: var(--cool-section-border-radius);
+                transition: all 0.2s ease-in-out;
+                color: var(--cool-theme-text-color-dark);
+                font-size: var(--cool-font-size-sm);
+            }
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-tabs;
+    }
+} @else {
+    @include cool-tabs;
+}