@finqu/cool 1.3.0 → 2.0.2

package/scss/_section.scss

@@ -0,0 +1,735 @@
+@use "variables" as *;
+/* Section ========================================================================== */
+
+@mixin cool-section {
+    .section {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: var(--cool-section-spacer);
+        box-shadow: var(--cool-section-box-shadow);
+        border-radius: var(--cool-section-border-radius);
+        border: var(--cool-section-border-width) solid var(--cool-section-border-color);
+
+        &:has(.select.show) {
+            z-index: var(--cool-zindex-select);
+        }
+
+        @include media-breakpoint-down(sm) {
+            margin-bottom: var(--cool-section-spacer-mobile);
+        }
+
+        &:has(.section-content .expander.expanded) {
+            .section-title.section-title-collapsible {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
+        &:not([class*="order-"]):last-child,
+        &.last-child {
+            margin-bottom: 0;
+        }
+
+        > * {
+            position: relative;
+
+            &:only-child {
+                border-radius: var(--cool-section-border-radius);
+            }
+
+            &:first-child:not(:only-child) {
+                border-top-left-radius: var(--cool-section-border-radius);
+                border-top-right-radius: var(--cool-section-border-radius);
+            }
+
+            &:last-child:not(:only-child),
+            &.is-last-visible {
+                border-bottom-left-radius: var(--cool-section-border-radius);
+                border-bottom-right-radius: var(--cool-section-border-radius);
+            }
+
+            &:not(:first-child):not(:last-child):not(.is-last-visible) {
+                border-radius: 0;
+            }
+        }
+
+        .section-content:not(.d-none) + .section-content,
+        .section-title + .section-content,
+        .section-filters + .section-content,
+        .section-bulk-actions + .section-content,
+        * + .section-header {
+            padding-top: 0;
+        }
+    }
+
+    .section-container {
+        margin-bottom: var(--cool-section-spacer);
+
+        @include media-breakpoint-down(sm) {
+            margin-bottom: var(--cool-section-spacer-mobile);
+        }
+    }
+
+    .section-title {
+        font-family: var(--cool-section-title-font-family);
+        font-size: var(--cool-section-title-font-size);
+        font-weight: var(--cool-section-title-font-weight);
+        color: var(--cool-section-title-color);
+        background: var(--cool-section-title-bg);
+        padding: var(--cool-section-padding);
+        display: flex;
+        align-items: center;
+        gap: var(--cool-spacing-2);
+        flex-grow: 1;
+
+        @include media-breakpoint-down(sm) {
+            flex-direction: var(--cool-section-title-direction-mobile, column);
+            align-items: var(--cool-section-title-align-mobile, start);
+        }
+
+        .title {
+            display: inline-flex;
+            flex-wrap: wrap;
+            gap: var(--cool-spacing-1);
+            align-items: center;
+
+            p {
+                font-weight: var(--cool-font-weight-bold);
+                font-size: var(--cool-font-size-base);
+                margin: 0;
+            }
+
+            .section-subtitle {
+                flex: 0 0 100%;
+                --cool-section-subtitle-font-family: var(--cool-font-family-base);
+                --cool-section-subtitle-font-size: var(--cool-font-size-base);
+                --cool-section-subtitle-font-weight: var(--cool-font-weight-bold);
+                --cool-section-spacer: 0;
+
+                @include media-breakpoint-down(sm) {
+                    --cool-section-spacer: 0;
+                }
+            }
+        }
+
+        .actions {
+            display: inline-flex;
+            gap: var(--cool-spacing-1);
+            color: var(--cool-section-title-actions-color);
+            font-weight: var(--cool-font-weight-normal);
+            font-size: var(--cool-font-size-base);
+            font-family: var(--cool-font-family-base);
+            margin-left: auto;
+            text-align: right;
+
+            @include media-breakpoint-down(sm) {
+                margin-left: var(--cool-section-title-actions-margin-left-mobile, 0);
+                text-align: var(--cool-section-title-actions-align-mobile, left);
+            }
+        }
+
+        > .icon,
+        > .title > .icon {
+            color: var(--cool-section-title-icons-color);
+            font-size: var(--cool-section-title-icons-size);
+            margin-right: 5px;
+        }
+
+        > .btn-text {
+            --cool-btn-font-family: var(--cool-section-title-font-family);
+            --cool-btn-font-size: var(--cool-section-title-font-size);
+            --cool-btn-font-weight: var(--cool-section-title-font-weight);
+            --cool-btn-line-height: var(--cool-line-height-base);
+            --cool-btn-bg: var(--cool-section-title-bg);
+            --cool-btn-color: var(--cool-section-title-color);
+        }
+
+        .btn-group,
+        .form-group {
+            margin: 0;
+        }
+    }
+
+    .section-subtitle {
+        display: block;
+        margin-bottom: var(--cool-section-spacer);
+        font-family: var(--cool-section-subtitle-font-family);
+        font-size: var(--cool-section-subtitle-font-size);
+        font-weight: var(--cool-section-subtitle-font-weight);
+        color: var(--cool-section-subtitle-color);
+        margin-bottom: var(--cool-section-spacer);
+
+        @include media-breakpoint-down(sm) {
+            --cool-section-spacer: var(--cool-section-spacer-mobile);
+        }
+    }
+
+    .section-content {
+        flex-direction: column;
+        flex-grow: 1;
+        background: var(--cool-section-bg);
+        color: var(--cool-section-color);
+        padding-top: var(--cool-section-padding-top, var(--cool-section-padding));
+        padding-bottom: var(--cool-section-padding-bottom, var(--cool-section-padding));
+        padding-left: var(--cool-section-padding-left, var(--cool-section-padding));
+        padding-right: var(--cool-section-padding-right, var(--cool-section-padding));
+        box-sizing: border-box;
+        overflow: auto;
+
+        &:has(.fr-popup.fr-active) {
+            overflow: visible;
+        }
+
+        &:has(> .table-sticky-actions:only-child),
+        &:has(> .content-full-width-m:only-child > .table),
+        &:has(> .content-full-width:only-child > .table),
+        &:has(> .table:only-child) {
+            padding-top: 0;
+            padding-bottom: 0;
+
+            &:has(> .table.table-responsive) {
+                @include media-breakpoint-down(sm) {
+                    padding-top: var(--cool-section-padding);
+                    padding-bottom: var(--cool-section-padding);
+                }
+            }
+
+            .table {
+                tbody {
+                    tr:last-child {
+                        td:first-child {
+                            border-bottom-left-radius: var(--cool-section-border-radius);
+                        }
+
+                        td:last-child {
+                            border-bottom-right-radius: var(--cool-section-border-radius);
+                        }
+                    }
+                }
+            }
+        }
+
+        &:first-child {
+            &:has(> .table-sticky-actions:only-child),
+            &:has(> .content-full-width-m:only-child > .table),
+            &:has(> .content-full-width:only-child > .table),
+            &:has(> .table:only-child) {
+                padding-top: 0;
+                padding-bottom: 0;
+
+                .table-sticky-actions {
+                    border-radius: var(--cool-section-border-radius);
+                }
+
+                .table {
+                    thead {
+                        tr {
+                            th:first-child {
+                                border-top-left-radius: var(--cool-section-border-radius);
+                            }
+
+                            th:last-child {
+                                border-top-right-radius: var(--cool-section-border-radius);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &:has(> .content-full-width-m:only-child > .table.table-responsive),
+        &:has(> .content-full-width:only-child > .table.table-responsive),
+        &:has(> .table.table-responsive:only-child) {
+            @include media-breakpoint-down(sm) {
+                padding-top: var(--cool-section-padding);
+                padding-bottom: var(--cool-section-padding);
+            }
+        }
+
+        .content-full-width-m {
+            @include media-breakpoint-down(lg) {
+                margin-inline: calc(-1 * var(--cool-section-padding));
+            }
+        }
+
+        .content-full-width {
+            @include media-breakpoint-up(md) {
+                margin-inline: calc(-1 * var(--cool-section-padding));
+            }
+        }
+
+        p:last-child {
+            margin-bottom: 0;
+        }
+
+        & > .form-group:first-child {
+            margin-top: 1px;
+        }
+
+        & > .form-group:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .section-collapse {
+        position: relative;
+        overflow: hidden;
+
+        &:not(.show) {
+            display: none;
+        }
+
+        &.show {
+            overflow: visible;
+        }
+    }
+
+    .section-image {
+        position: relative;
+        background: var(--cool-section-bg);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        overflow: hidden;
+        aspect-ratio: var(--cool-aspect-ratio, auto);
+        min-height: var(--cool-image-height, auto);
+
+        &.size-xs {
+            --cool-image-height: 120px;
+        }
+
+        &.size-sm {
+            --cool-image-height: 170px;
+        }
+
+        &.size-md {
+            --cool-image-height: 230px;
+        }
+
+        &.size-lg {
+            --cool-image-height: 326px;
+        }
+
+        &.darken-image {
+            &::after {
+                position: absolute;
+                inset: 0;
+                background-color: var(--cool-section-image-darken-bg);
+                content: "";
+                pointer-events: none;
+            }
+        }
+
+        .image-badge {
+            position: absolute;
+            top: 30px;
+            left: -40px;
+            transform: rotate(-40deg);
+            background-color: var(--cool-section-image-badge-bg);
+            color: var(--cool-section-image-badge-color);
+            box-shadow: var(--cool-section-image-badge-shadow);
+            text-align: center;
+            letter-spacing: 1px;
+            width: 220px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            box-sizing: border-box;
+            padding: var(--cool-section-image-badge-padding);
+            font-size: var(--cool-section-image-badge-font-size);
+
+            .image-badge-content {
+                display: block;
+                width: 145px;
+                height: 18px;
+                margin-left: 28px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+    }
+
+    .section-video {
+        height: 100%;
+        background-color: var(--cool-section-bg);
+        overflow: hidden;
+        aspect-ratio: var(--cool-aspect-ratio, auto);
+        height: var(--cool-video-height, auto);
+
+        &.size-md {
+            --cool-video-height: 230px;
+        }
+
+        &.size-lg {
+            --cool-video-height: 326px;
+        }
+
+        &.has-content {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+
+    .section-hr {
+        background: var(--cool-section-bg);
+        position: relative;
+
+        & + * {
+            padding-top: var(--cool-section-padding);
+        }
+
+        &::after {
+            display: block;
+            content: "";
+            height: var(--cool-section-divider-height);
+            background: var(--cool-section-divider-color);
+            margin-inline: var(--cool-section-divider-padding);
+        }
+
+        &.content-full-width,
+        &.content-full-width-m {
+            &::after {
+                margin-inline: 0;
+            }
+        }
+    }
+
+    .section-header {
+        display: flex;
+        background-color: var(--cool-section-bg);
+        gap: var(--cool-spacing-2);
+        align-items: stretch;
+        width: 100%;
+        padding-left: var(--cool-spacing-2);
+        padding-right: var(--cool-spacing-2);
+        border-bottom: var(--cool-border-width) solid var(--cool-section-divider-color);
+
+        .section-tabs {
+            --cool-section-tabs-bg: transparent;
+            flex: 1 1 0;
+            min-width: 0;
+            width: 100%;
+            height: auto;
+
+            .tabs-container {
+                height: 100%;
+            }
+        }
+
+        .section-tabs .tabs-container,
+        .section-search {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        @include media-breakpoint-up(sm) {
+            .section-search {
+                padding-top: var(--cool-spacing-2);
+                padding-bottom: var(--cool-spacing-2);
+                flex: 0 0 auto;
+                min-width: 200px;
+            }
+        }
+
+        @include media-breakpoint-down(sm) {
+            flex-direction: column;
+            padding-top: var(--cool-spacing-2);
+            padding-bottom: var(--cool-spacing-2);
+
+            &:has(.section-tabs) {
+                padding-top: 0;
+            }
+        }
+    }
+
+    .section-tabs {
+        display: flex;
+        align-items: center;
+        background: var(--cool-section-tabs-bg);
+        color: var(--cool-section-color);
+
+        .tabs-container {
+            display: flex;
+            align-items: stretch;
+            flex-wrap: nowrap;
+            list-style: none;
+            padding: 0 var(--cool-section-tabs-item-gap);
+            margin: 0;
+            gap: var(--cool-section-tabs-item-gap);
+            position: relative;
+            overflow: hidden;
+            flex: 1;
+
+            /* Prevent visual flash by initially hiding potentially overflowing tabs */
+            &:not(.js-initialized) {
+                overflow: hidden;
+
+                /* Use a gradient mask to fade out potentially overflowing content */
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    width: 60px;
+                    background: linear-gradient(
+                        to left,
+                        var(--cool-section-bg, #fff) 0%,
+                        var(--cool-section-bg, #fff) 30%,
+                        color-mix(in srgb, var(--cool-section-bg, #fff) 80%, transparent) 50%,
+                        transparent 100%
+                    );
+                    pointer-events: none;
+                    z-index: 1;
+                }
+
+                /* Initially hide tabs that are likely to overflow on smaller screens */
+                @media (max-width: 1200px) {
+                    > .tab-item:nth-child(n + 6) {
+                        visibility: hidden;
+                    }
+                }
+
+                @media (max-width: 992px) {
+                    > .tab-item:nth-child(n + 5) {
+                        visibility: hidden;
+                    }
+                }
+
+                @media (max-width: 768px) {
+                    > .tab-item:nth-child(n + 4) {
+                        visibility: hidden;
+                    }
+                }
+
+                @media (max-width: 576px) {
+                    > .tab-item:nth-child(n + 3) {
+                        visibility: hidden;
+                    }
+                }
+            }
+
+            /* Once initialized, let JavaScript control visibility */
+            &.js-initialized {
+                > .tab-item {
+                    visibility: visible;
+
+                    &.invisible {
+                        visibility: hidden;
+                    }
+                }
+            }
+
+            > .tab-item {
+                display: flex;
+                align-items: stretch;
+                flex-grow: 0;
+                flex-shrink: 0;
+                position: relative;
+                margin: 0;
+                font-family: var(--cool-section-tabs-font-family);
+                font-weight: var(--cool-section-tabs-font-weight);
+                padding: 0;
+
+                > .tab-item-action {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-grow: 1;
+                    line-height: 1;
+                    position: relative;
+                    text-align: center;
+                    cursor: pointer;
+                    min-width: var(--cool-section-tabs-item-min-width);
+                    color: var(--cool-section-tabs-color);
+                    padding: var(--cool-section-tabs-item-padding-y) 0;
+                    border-bottom: var(--cool-section-tabs-border-width) solid transparent;
+                    border-radius: 0;
+                    white-space: nowrap;
+
+                    &:hover {
+                        color: var(--cool-section-tabs-hover-color);
+                        border-color: var(--cool-section-tabs-border-hover-color);
+                    }
+
+                    &.active {
+                        color: var(--cool-section-tabs-active-color);
+                        border-color: var(--cool-section-tabs-border-active-color);
+                        font-weight: var(--cool-section-tabs-font-weight-active);
+                    }
+                }
+            }
+        }
+
+        .dropdown-container {
+            display: flex;
+            opacity: 0;
+            visibility: hidden;
+
+            /* Initially hidden until JavaScript determines if needed */
+            &:not(.js-ready) {
+                opacity: 0;
+                visibility: hidden;
+            }
+
+            &.visible {
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+    }
+
+    .section-search {
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-columns: max-content;
+        width: max-content;
+        min-width: 200px;
+        height: fit-content;
+        gap: var(--cool-spacing-1);
+        padding: 0 var(--cool-section-tabs-item-gap);
+
+        @include media-breakpoint-down(sm) {
+            grid-template-columns: auto 1fr auto;
+            width: 100%;
+        }
+
+        // Prevent layout shift
+        > .btn {
+            width: 40px;
+        }
+
+        .select-title {
+            width: 12px;
+        }
+    }
+
+    .section-filters {
+        display: none;
+        flex-wrap: wrap;
+        background: var(--cool-section-filters-bg);
+        color: var(--cool-section-filters-color);
+        padding: var(--cool-spacing-2);
+        gap: var(--cool-grid-gutter-x);
+        box-sizing: border-box;
+
+        &.active {
+            display: flex;
+            border-bottom: var(--cool-border-width) solid var(--cool-section-divider-color);
+
+            @include media-breakpoint-down(md) {
+                flex-direction: column;
+            }
+        }
+
+        .filter {
+            display: none;
+            box-sizing: border-box;
+
+            &.active {
+                display: block;
+            }
+        }
+    }
+
+    .section-bulk-actions {
+        display: none;
+    }
+
+    .section-placeholder {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        align-items: center;
+        justify-content: center;
+        background: var(--cool-section-bg);
+        color: var(--cool-section-color);
+        padding-top: var(--cool-section-padding-top, calc(var(--cool-section-padding) * 3));
+        padding-bottom: var(--cool-section-padding-bottom, calc(var(--cool-section-padding) * 3));
+        padding-left: var(--cool-section-padding-left, calc(var(--cool-section-padding) * 0.5));
+        padding-right: var(--cool-section-padding-right, calc(var(--cool-section-padding) * 0.5));
+        overflow-x: auto;
+        box-sizing: border-box;
+        min-height: 200px;
+
+        .placeholder-icon {
+            .icon-container {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+                width: var(--cool-section-placeholder-icon-size);
+                height: var(--cool-section-placeholder-icon-size);
+                color: var(--cool-section-placeholder-icon-color);
+                padding: var(--cool-section-placeholder-icon-padding);
+                margin: 0 auto;
+                box-sizing: content-box;
+
+                .icon {
+                    font-size: var(--cool-section-placeholder-icon-font-size);
+                }
+            }
+
+            & + * {
+                margin-top: var(--cool-section-placeholder-spacing);
+            }
+        }
+
+        .placeholder-title {
+            text-align: center;
+            font-family: var(--cool-section-placeholder-title-font-family);
+            font-weight: var(--cool-section-placeholder-title-font-weight);
+
+            & + .placeholder-description {
+                margin-top: var(--cool-section-placeholder-spacing-sm);
+            }
+
+            & + .placeholder-action,
+            & + .placeholder-action-secondary {
+                margin-top: var(--cool-section-placeholder-spacing);
+            }
+        }
+
+        .placeholder-description {
+            text-align: center;
+            color: var(--cool-section-placeholder-description-color);
+
+            .description {
+                margin-bottom: 0;
+            }
+
+            & + .placeholder-action,
+            & + .placeholder-action-secondary {
+                margin-top: var(--cool-section-placeholder-spacing);
+            }
+        }
+
+        .placeholder-action {
+            text-align: center;
+
+            & + .placeholder-action-secondary {
+                margin-top: var(--cool-section-placeholder-spacing);
+            }
+        }
+    }
+
+    .section-secondary {
+        --cool-section-bg: var(--cool-section-secondary-bg);
+        --cool-section-title-bg: var(--cool-section-secondary-bg);
+    }
+
+    @supports (container-type: inline-size) {
+        .section {
+            @container (max-width: 768px) {
+                --cool-section-padding: var(--cool-section-padding-mobile);
+            }
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-section;
+    }
+} @else {
+    @include cool-section;
+}