@finqu/cool 1.2.29 → 2.0.2

package/scss/_dialog.scss

@@ -1,160 +1,351 @@
-// Dialog
-// ---------------------------------------------------------------------------------------------------------------
-
-.dialog {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: $zindex-dialog;
-    overflow: hidden;
-    outline: 0;
-    -webkit-overflow-scrolling: touch;
-
-    .dialog-container {
-        position: relative;
-        width: auto;
-        margin: 10px;
-        pointer-events: none;
-        @include media-breakpoint-up(sm) {
-            max-width: 600px;
-            margin: 25px auto;
-        }
+@use "variables" as *;
+/* Dialog ========================================================================== */
 
-        .dialog-content {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            pointer-events: auto;
+@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;
-            text-align: left;
-            border: none;
-            border-radius: $border-radius;
-            background-color: #ffffff;
-            background-clip: padding-box;
-            outline: 0;
-            overflow: auto;
-            box-shadow: 0 30px 40px 0 rgba(34, 44, 54, 0.2), 0 2px 16px 0 rgba(34, 44, 54, 0.09);
-
-            .dialog-header {
+            margin: var(--cool-dialog-margin);
+            pointer-events: none;
+
+            .dialog-content {
                 display: flex;
-                align-items: flex-start;
-                justify-content: space-between;
-                padding: $dialog-padding-y $dialog-padding-x;
-                border-bottom: $dialog-border-width solid $border-color;
-
-                .dialog-title {
-                    font-size: 20px;
-                    width: 100%;
-                    font-family: $dialog-title-font-family;
-                    font-weight: $dialog-title-font-weight;
-                    @include text-truncate;
+                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;
                 }
 
-                button[data-dialog-close] {
-                    font-size: 18px;
-                    background-color: transparent;
-                    border: 0;
-                    opacity: 0.75;
-                    color: $body-color;
-
-                    &:hover,
-                    &:focus {
-                        opacity: 1;
-                        outline: 0
+                @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;
+                        }
                     }
                 }
-            }
 
-            .dialog-body {
-                position: relative;
-                flex: 1 1 auto;
-                padding: $dialog-padding-y $dialog-padding-x;
-                overflow-y: auto;
+                &:not(:has(.dialog-header)) .dialog-body .content-full-height {
+                    margin-top: calc(var(--cool-dialog-padding-y) * -1);
+                }
 
-                .content-full-width {
-                    margin-left: -$dialog-padding-x;
-                    margin-right: -$dialog-padding-x;
+                &:not(:has(.dialog-footer)) .dialog-body .content-full-height {
+                    margin-bottom: calc(var(--cool-dialog-padding-y) * -1);
                 }
-            }
 
-            .dialog-footer {
-                display: flex;
-                align-items: center;
-                padding: $dialog-padding-y $dialog-padding-x;
-                border-top: $dialog-border-width solid $border-color;
+                .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;
 
-                .spacer {
-                    flex: 1;
+                                    &.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);
+        }
 
-// Sizes
-.dialog-sm {
-    .dialog-container {
-        @include media-breakpoint-up(sm) {
-            max-width: 300px;
+        .dialog-lg {
+            --cool-dialog-width: var(--cool-dialog-width-lg);
+        }
+
+        .dialog-xl {
+            --cool-dialog-width: var(--cool-dialog-width-xl);
         }
     }
-}
 
-.dialog-lg {
-    .dialog-container {
-        @include media-breakpoint-up(sm) {
-            max-width: 800px;
+    .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);
 
-// Utilities
-.dialog-centered {
-    .dialog-container {
-        display: flex;
-        align-items: center;
-        @include media-breakpoint-up(sm) {
-            min-height: calc(100% - 50px);
+            @include media-breakpoint-up(sm) {
+                height: calc(100dvh - var(--cool-dialog-margin-y-lg) * 2);
+            }
         }
     }
-}
 
-.dialog-prevent-scroll {
-    overflow: hidden;
-}
+    .dialog-notification {
+        .dialog-container {
+            @include media-breakpoint-up(sm) {
+                max-width: var(--cool-dialog-notification-width);
+            }
 
-.dialog-backdrop {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    opacity: 0;
-    background-color: #000000;
-    z-index: $zindex-dialog;
-    backface-visibility: hidden;
-    transition: opacity 0.1s;
-}
+            .dialog-content {
+                .dialog-header {
+                    padding: var(--cool-dialog-padding-y) var(--cool-dialog-padding-x) 0;
 
-.has-dialogs .dialog-backdrop {
-    opacity: 0.3;
-}
+                    .dialog-title {
+                        text-align: center;
+                    }
 
-.dialog-overflow-visible {
-    overflow: visible;
+                    .dialog-header-close {
+                        display: none;
+                    }
+                }
 
-    .dialog-container {
+                .dialog-body {
+                    text-align: center;
+                    min-height: var(--cool-dialog-notification-body-height);
+                }
 
-        .dialog-content {
-            overflow: visible;
+                .dialog-footer {
+                    justify-content: center;
 
-            .dialog-body {
-                overflow-y: visible;
+                    .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;
+}