@finqu/cool 1.3.0 → 2.0.2

package/scss/_dialog.scss

@@ -0,0 +1,351 @@
+@use "variables" as *;
+/* Dialog ========================================================================== */
+
+@mixin cool-dialog {
+    .dialog {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: var(--cool-zindex-dialog);
+        overflow: hidden;
+        outline: 0;
+        -webkit-overflow-scrolling: touch;
+
+        .dialog-container {
+            position: relative;
+            margin: var(--cool-dialog-margin);
+            pointer-events: none;
+
+            .dialog-content {
+                display: flex;
+                flex-direction: column;
+                width: var(--cool-dialog-width);
+                pointer-events: auto;
+                position: relative;
+                text-align: left;
+                border: none;
+                border-radius: var(--cool-border-radius);
+                background-color: var(--cool-dialog-bg);
+                background-clip: padding-box;
+                outline: 0;
+                overflow: auto;
+                box-shadow: var(--cool-dialog-box-shadow);
+
+                @include media-breakpoint-down(md) {
+                    min-width: 50vw;
+                }
+
+                @include media-breakpoint-down(sm) {
+                    min-width: calc(100vw - calc(var(--cool-dialog-margin-x) * 2));
+                }
+
+                .dialog-header {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: var(--cool-dialog-padding-y) var(--cool-dialog-padding-x);
+                    border-bottom: var(--cool-dialog-border-width) solid var(--cool-border-color);
+                    min-height: var(--cool-dialog-header-height);
+
+                    @include media-breakpoint-down(md) {
+                        text-align: center;
+                    }
+
+                    & + .dialog-body,
+                    & + .dialog-footer {
+                        padding-top: 0;
+                    }
+
+                    .dialog-title {
+                        font-size: var(--cool-dialog-title-font-size);
+                        width: 100%;
+                        font-family: var(--cool-dialog-title-font-family);
+                        font-weight: var(--cool-dialog-title-font-weight);
+                    }
+
+                    .dialog-header-close {
+                        position: absolute;
+                        top: calc(var(--cool-dialog-padding-y) * 0.5);
+                        right: calc(var(--cool-dialog-padding-x) * 0.5);
+                        color: var(--cool-body-color);
+                        background-color: transparent;
+                        border: 0;
+                        opacity: 0.75;
+
+                        &:hover,
+                        &:focus {
+                            opacity: 1;
+                            outline: 0;
+                        }
+                    }
+                }
+
+                &:not(:has(.dialog-header)) .dialog-body .content-full-height {
+                    margin-top: calc(var(--cool-dialog-padding-y) * -1);
+                }
+
+                &:not(:has(.dialog-footer)) .dialog-body .content-full-height {
+                    margin-bottom: calc(var(--cool-dialog-padding-y) * -1);
+                }
+
+                .dialog-body {
+                    position: relative;
+                    flex: 1 1 auto;
+                    padding: var(--cool-dialog-padding-y) var(--cool-dialog-padding-x);
+                    overflow-y: auto;
+                    max-height: var(--cool-dialog-body-height, auto);
+                    --cool-table-th-padding: var(--cool-table-th-padding-y) var(--cool-dialog-padding-x);
+                    --cool-table-td-padding: var(--cool-table-td-padding-y) var(--cool-dialog-padding-x);
+                    --cool-list-group-item-padding-x: var(--cool-dialog-padding-x);
+
+                    &:has(+ .dialog-footer) {
+                        padding-bottom: 0;
+                    }
+
+                    .content-full-width {
+                        margin-left: calc(var(--cool-dialog-padding-x) * -1);
+                        margin-right: calc(var(--cool-dialog-padding-x) * -1);
+                    }
+
+                    .content-to-top {
+                        margin-top: calc(var(--cool-dialog-padding-y) * -1);
+                    }
+
+                    .content-to-bottom {
+                        margin-bottom: calc(var(--cool-dialog-padding-y) * -1);
+                    }
+
+                    > .tabs-container {
+                        border-bottom: 1px solid var(--cool-section-tabs-border-color);
+                        margin-left: calc(var(--cool-dialog-padding-x) * -1);
+                        margin-right: calc(var(--cool-dialog-padding-x) * -1);
+
+                        > .tab-nav {
+                            display: flex;
+                            align-items: stretch;
+                            flex-wrap: nowrap;
+                            list-style: none;
+                            padding: 0 var(--cool-dialog-padding-x);
+                            margin: 0;
+                            overflow: visible;
+                            border-bottom: 1px solid var(--cool-section-tabs-border-color);
+                            gap: var(--cool-section-tabs-item-gap);
+                            position: relative;
+
+                            > .tab-nav-item {
+                                display: flex;
+                                align-items: stretch;
+                                flex-grow: 0;
+                                flex-shrink: 0;
+                                position: relative;
+                                margin: 0;
+                                font-family: var(--cool-font-family-sans-serif);
+                                font-weight: var(--cool-font-weight-base);
+                                padding: 0;
+
+                                &.dropdown-container {
+                                    display: none;
+                                    position: absolute;
+                                    right: var(--cool-section-tabs-item-gap);
+                                    top: 0;
+                                    bottom: 0;
+
+                                    &.visible {
+                                        display: flex;
+                                    }
+                                }
+
+                                > .tab-nav-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;
+
+                                    &: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-font-weight-bold);
+                                    }
+                                }
+
+                                > span.tab-item-action {
+                                    cursor: default;
+                                }
+                            }
+                        }
+
+                        > .tab-content-item:not(.active) {
+                            display: none;
+                        }
+                    }
+                }
+
+                .dialog-footer {
+                    display: flex;
+                    align-items: center;
+                    padding: var(--cool-dialog-padding-y) var(--cool-dialog-padding-x);
+                    border-top: var(--cool-dialog-border-width) solid var(--cool-border-color);
+                    gap: var(--cool-spacing-2);
+                    min-height: var(--cool-dialog-footer-height);
+
+                    .btn {
+                        flex: 1;
+                    }
+
+                    .spacer {
+                        width: 30%;
+                    }
+                }
+            }
+        }
+    }
+
+    @include media-breakpoint-up(md) {
+        .dialog {
+            --cool-dialog-width: var(--cool-dialog-width-md);
+            --cool-dialog-margin: var(--cool-dialog-margin-y-lg);
+        }
+
+        .dialog-sm {
+            --cool-dialog-width: var(--cool-dialog-width-sm);
+        }
+
+        .dialog-lg {
+            --cool-dialog-width: var(--cool-dialog-width-lg);
+        }
+
+        .dialog-xl {
+            --cool-dialog-width: var(--cool-dialog-width-xl);
+        }
+    }
+
+    .dialog-full {
+        .dialog-container {
+            width: calc(100vw - calc(var(--cool-dialog-margin-x) * 2));
+            height: calc(100dvh - calc(var(--cool-dialog-margin-y) * 2));
+            max-width: 100%;
+            margin: auto;
+            position: absolute;
+            inset: 0;
+
+            @include media-breakpoint-up(sm) {
+                width: calc(100vw - calc(var(--cool-dialog-margin-x-lg) * 2));
+                height: calc(100dvh - calc(var(--cool-dialog-margin-y-lg) * 2));
+            }
+
+            .dialog-content {
+                width: 100%;
+                height: 100%;
+                display: grid;
+                grid-template-rows: auto 1fr auto;
+
+                &:not(:has(.dialog-footer)) {
+                    grid-template-rows: auto 1fr;
+                }
+            }
+        }
+    }
+
+    .dialog-centered:not(.dialog-full) {
+        .dialog-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: calc(100dvh - var(--cool-dialog-margin-y) * 2);
+
+            @include media-breakpoint-up(sm) {
+                height: calc(100dvh - var(--cool-dialog-margin-y-lg) * 2);
+            }
+        }
+    }
+
+    .dialog-notification {
+        .dialog-container {
+            @include media-breakpoint-up(sm) {
+                max-width: var(--cool-dialog-notification-width);
+            }
+
+            .dialog-content {
+                .dialog-header {
+                    padding: var(--cool-dialog-padding-y) var(--cool-dialog-padding-x) 0;
+
+                    .dialog-title {
+                        text-align: center;
+                    }
+
+                    .dialog-header-close {
+                        display: none;
+                    }
+                }
+
+                .dialog-body {
+                    text-align: center;
+                    min-height: var(--cool-dialog-notification-body-height);
+                }
+
+                .dialog-footer {
+                    justify-content: center;
+
+                    .spacer {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+
+    .dialog-backdrop {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        opacity: 0;
+        background-color: #000000;
+        z-index: var(--cool-zindex-dialog);
+        backface-visibility: hidden;
+        transition: opacity 0.1s;
+    }
+
+    .has-dialogs .dialog-backdrop {
+        opacity: var(--cool-dialog-backdrop-opacity);
+    }
+
+    .dialog-overflow-visible {
+        overflow: visible;
+
+        .dialog-container {
+            .dialog-content {
+                overflow: visible;
+
+                .dialog-body {
+                    overflow-y: visible;
+                }
+            }
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-dialog;
+    }
+} @else {
+    @include cool-dialog;
+}

package/scss/_dropdown.scss

@@ -0,0 +1,165 @@
+@use "variables" as *;
+/* Dropdown ========================================================================== */
+
+@mixin cool-dropdown {
+    .dropdown {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+
+        .dropdown-trigger {
+            > .icon {
+                pointer-events: none;
+            }
+        }
+    }
+
+    .dropdown-menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: var(--cool-zindex-dropdown);
+        display: none;
+        float: left;
+        min-width: var(--cool-dropdown-width);
+        padding: var(--cool-dropdown-padding-y) 0;
+        margin: 0;
+        font-size: var(--cool-dropdown-font-size);
+        text-align: left;
+        list-style: none;
+        background-color: var(--cool-dropdown-bg);
+        background-clip: padding-box;
+        border: var(--cool-dropdown-border-width) solid var(--cool-dropdown-border-color);
+        color: var(--cool-dropdown-color);
+        overflow: hidden;
+        box-shadow: var(--cool-dropdown-box-shadow);
+        border-radius: var(--cool-dropdown-border-radius);
+        font-family: var(--cool-font-family-sans-serif);
+    }
+
+    .dropdown-divider {
+        height: 0;
+        margin: var(--cool-nav-divider-margin-y) 0;
+        overflow: hidden;
+        border-top: var(--cool-dropdown-border-width) solid var(--cool-dropdown-divider-bg);
+    }
+
+    .dropdown-content {
+        width: 100%;
+        padding: var(--cool-dropdown-item-padding-y) var(--cool-dropdown-item-padding-x);
+    }
+
+    .dropdown-item {
+        display: block;
+        width: 100%;
+        padding: var(--cool-dropdown-item-padding-y) var(--cool-dropdown-item-padding-x);
+        color: var(--cool-dropdown-link-color);
+        font-family: var(--cool-font-family-sans-serif);
+        font-weight: var(--cool-font-weight-normal);
+        line-height: var(--cool-dropdown-line-height);
+        text-align: inherit;
+        background-color: transparent;
+        appearance: none;
+        white-space: nowrap;
+        border: 0;
+
+        &:hover,
+        &:focus {
+            color: var(--cool-dropdown-link-hover-color);
+            text-decoration: none;
+            cursor: pointer;
+            background-color: var(--cool-dropdown-link-hover-bg);
+        }
+
+        &.active,
+        &:active {
+            color: var(--cool-dropdown-link-active-color);
+            text-decoration: none;
+            background-color: var(--cool-dropdown-link-active-bg);
+        }
+
+        &.disabled,
+        &:disabled {
+            color: var(--cool-dropdown-link-disabled-color);
+            background: transparent;
+            cursor: default;
+        }
+
+        .icon + span {
+            margin-left: var(--cool-icon-spacer);
+        }
+    }
+
+    button.dropdown-item {
+        cursor: pointer;
+        outline: 0;
+    }
+
+    .dropdown-menu.show {
+        display: block;
+    }
+
+    .dropdown-title {
+        display: block;
+        padding: var(--cool-dropdown-item-padding-y) var(--cool-dropdown-item-padding-x);
+        font-size: var(--cool-font-size-xs);
+        color: var(--cool-dropdown-title-color);
+        text-transform: uppercase;
+        letter-spacing: 0.2px;
+    }
+
+    .dropdown-item-text {
+        display: block;
+        padding: var(--cool-dropdown-item-padding-y) var(--cool-dropdown-item-padding-x);
+        color: var(--cool-dropdown-link-color);
+    }
+
+    .dropdown-scrollable-content {
+        position: relative;
+    }
+
+    .dropdown-list {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+
+        li {
+            a {
+                display: block;
+                width: 100%;
+                font-weight: var(--cool-font-weight-normal);
+                color: var(--cool-dropdown-link-color);
+                white-space: nowrap;
+                box-sizing: border-box;
+
+                &:hover,
+                &:focus {
+                    color: var(--cool-dropdown-link-hover-color);
+                    text-decoration: none;
+                    background-color: var(--cool-dropdown-link-hover-bg);
+                }
+
+                &.active,
+                &:active {
+                    color: var(--cool-dropdown-link-active-color);
+                    text-decoration: none;
+                    background-color: var(--cool-dropdown-link-active-bg);
+                }
+
+                &.disabled,
+                &:disabled {
+                    color: var(--cool-dropdown-link-disabled-color);
+                    background-color: transparent;
+                }
+            }
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-dropdown;
+    }
+} @else {
+    @include cool-dropdown;
+}