@finqu/cool 1.2.29 → 2.0.2

package/scss/_tabs.scss

@@ -1,178 +1,50 @@
-// Tabs
-// ---------------------------------------------------------------------------------------------------------------
-
-.tabs {
-    margin: 0 0 20px 0;
-    padding: $section-padding 0;
-    width: 100%;
-    box-sizing: border-box;
-    font-size: 0;
-    display: flex;
-    align-items: flex-end;
-    border-radius: $border-radius;
-
-    > li,
-    > div {
-        background: $tabs-bg;
-        display: inline-block;
-        list-style: none;
-        user-select: none;
-        font-size: $font-size-lg;
-        margin: 0 spacer(2) 0 0;
-        text-align: center;
-        overflow: hidden;
-        flex-grow: 0;
-
-        &:hover {
-            > span,
-            > a {
-                color: theme-color('dark');
-                border-color: theme-color('dark');
-            }
-        }
-
-        &.active {
-            > span,
-            > a {
-                color: theme-color('primary');
-                border-color: theme-color('primary');
-            }
-        }
-
-        > a,
-        > span {
-            color: $tabs-text-color;
-            cursor: pointer;
-            display: block;
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: theme-color('medium');
-            padding: 0 0 spacer(2) 0;
-            font-family: $font-family-title;
-            font-weight: 600;
-
-            @include media-breakpoint-up(md) {
-                border-bottom: 3px solid transparent;
-            }
-        }
-    }
-}
-
-.tab-toggler {
-    display: none;
-
-    @include media-breakpoint-down(sm) {
-        display: block;
-    }
-}
-
-.tab-content {
-    border-radius: $border-radius;
-
-    & + .tab-content {
-        margin-top: 20px;
-    }
-
-    &.with-background {
-        background: white;
-        padding: 10px;
-    }
-
-    &.has-table {
-        padding: 0;
-        border: none;
-    }
-}
-
-@include media-breakpoint-down(sm) {
-
-    .tabs-container {
-        margin-left: -5px;
-        margin-right: -5px;
-    }
-
-    .tabs {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        position: relative;
-        z-index: 19;
-        flex: 1 1 auto;
-        padding: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        border-radius: $border-radius;
-        border: 0;
-        box-sizing: border-box;
-        margin-bottom: 10px;
-
-        > li,
-        > div {
-            display: none;
-            flex: 1 0 100%;
-            border-radius: $border-radius;
-            border: 0;
-            text-align: center;
-            max-width: 100%;
-            text-align: left;
-
-            > a,
-            > span {
-                padding: 10px;
-            }
-
-            &.active {
-                display: block;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                order: -1;
-            }
-
-            &:hover:not(.active) {
-                background-color: theme-color('light');
-                > a {
-                    border-color: transparent;
-                }
-            }
-        }
-    }
-
-    .tab-toggler {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        height: 40px;
-        display: block;
-        line-height: 40px;
-        text-align: right;
-        border: none;
-        border-radius: $border-radius;
-        background: transparent;
-        background-color: transparent;
-        z-index: 100;
-
-        .icon {
-            margin-right: 15px;
-            color: theme-color('dark');
-        }
-    }
-
-    .tabs-container {
-        position: relative;
-
-        &.open {
-            .tabs {
-                > li,
-                > div {
-                    display: block;
-                    border-radius: 0;
-                }
-            }
-        }
-    }
-}
+@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;
+}

package/scss/_toast.scss

@@ -1,182 +1,277 @@
-// Toast
-// ---------------------------------------------------------------------------------------------------------------
-
-.toast {
-	position: absolute;
-	display: block;
-	z-index: $zindex-toast;
-	opacity: 0;
-	transition: opacity 0.25s;
-
-	&.show {
-		opacity: 1;
-	}
-}
+@use "variables" as *;
+/* Toast ========================================================================== */
+
+@mixin cool-toast {
+    // ── Container: fixed overlay per placement zone ──────────────────────
+    .toast-container {
+        // Offset from edge — overridable per-instance via inline custom props
+        --_toast-offset-x: var(--cool-toast-offset-x);
+        --_toast-offset-y: var(--cool-toast-offset-y);
+        --_toast-gap: var(--cool-toast-gap);
+        --_toast-stack-offset: var(--cool-toast-stack-offset);
+        --_toast-max-visible: 3;
+        --_toast-animation-easing: ease-in-out;
+        --_toast-transform-origin-x: left;
+        --_toast-transform-origin-y: top;
+
+        position: fixed;
+        z-index: var(--cool-zindex-toast);
+        display: grid;
+        margin-block: 0;
+        margin-inline: 0;
+        transition: gap var(--cool-toast-transition-duration) var(--_toast-animation-easing);
+        padding: var(--_toast-offset-y) var(--_toast-offset-x);
+        transform-origin: var(--_toast-transform-origin-x) var(--_toast-transform-origin-y);
+        translate: 0 0 0;
+        gap: 0;
+
+        // ── Placement: vertical ─────────────────────────────────────────
+        &[data-placement^="top-"] {
+            top: 0;
+            flex-direction: column-reverse; // newest on top
+        }
 
-.toast-inner {
-	background-clip: padding-box;
-	border-radius: $toast-border-radius;
-	font-size: $toast-font-size;
-	word-wrap: break-word;
-	@include reset-text;
-}
+        &[data-placement^="bottom-"] {
+            bottom: 0;
+            flex-direction: column; // newest on bottom
+        }
 
-.toast-header {
-	display: flex;
-    align-items: center;
-    justify-content: space-between;
-	padding: $toast-header-padding-y $toast-header-padding-x;
-	margin-top: 0;
-	margin-bottom: 0;
-	font-size: $font-size-base;
-	border-width: $toast-border-width;
-	border-style: solid;
-	border-top-left-radius: calc(#{$border-radius} - #{$toast-border-width});
-	border-top-right-radius: calc(#{$border-radius} - #{$toast-border-width});
-
-	span {
-		font-weight: $font-weight-bold;
-	}
-
-	button[data-toast-close] {
-        background-color: transparent;
-        border: 0;
-        opacity: 0.75;
-        line-height: 0;
-        padding: 0;
+        // ── Placement: horizontal ───────────────────────────────────────
+        &[data-placement$="-left"] {
+            left: 0;
+            justify-items: start;
+        }
 
-        svg {
-        	pointer-events: none;
+        &[data-placement$="-center"] {
+            left: 0;
+            right: 0;
+            margin-inline: auto;
+            justify-items: center;
         }
 
-        &:hover,
-        &:focus {
-            opacity: 1;
-            outline: 0
+        &[data-placement$="-right"] {
+            right: 0;
+            justify-items: end;
+            --_toast-transform-origin-x: right;
+        }
+
+        // ── Transform origin per placement direction ────────────────────
+        &[data-placement^="top-"] .toast {
+            --_toast-transform-origin-y: top;
+        }
+
+        &[data-placement^="bottom-"] .toast {
+            --_toast-transform-origin-y: bottom;
+        }
+
+        &[data-placement$="-center"] .toast {
+            --_toast-transform-origin-y: center;
+        }
+
+        .toast {
+            transition:
+                grid-area var(--cool-toast-transition-duration) var(--_toast-animation-easing),
+                scale var(--cool-toast-transition-duration) var(--_toast-animation-easing),
+                opacity var(--cool-toast-transition-duration) var(--_toast-animation-easing),
+                translate var(--cool-toast-transition-duration) var(--_toast-animation-easing);
+        }
+
+        // ── Stacking (collapsed state) ──────────────────────────────────
+        // Each toast has --_toast-index set by JS (0 = front, 1 = behind, …)
+        // Toasts behind the front-most get progressively smaller + more transparent
+
+        &:not(:hover) {
+            // top-* uses column-reverse: older items are below newest,
+            // negative margin-top pulls them UP behind the newest
+            &[data-placement^="top-"] .toast {
+                &:not(:last-child) {
+                    translate: 0 calc((var(--_toast-index)) * var(--_toast-stack-offset)) 0;
+                }
+
+                &[data-toast-hidden="true"] {
+                    translate: 0 0 0;
+                }
+            }
+
+            // bottom-* and center-* use normal column: older items are above newest,
+            // negative margin-bottom pulls the next item UP behind
+            &[data-placement^="bottom-"] .toast,
+            &[data-placement^="center-"] .toast {
+                &:not(:last-child) {
+                    translate: 0 calc(-1 * (var(--_toast-index)) * var(--_toast-stack-offset)) 0;
+                }
+
+                &[data-toast-hidden="true"] {
+                    translate: 0 0 0;
+                }
+            }
+
+            .toast {
+                // Scale + opacity based on index for depth effect
+                scale: calc(1 - var(--_toast-index, 0) * var(--cool-toast-stack-scale));
+                opacity: calc(1 - var(--_toast-index, 0) * var(--cool-toast-stack-opacity));
+
+                &[data-toast-hidden="true"] {
+                    opacity: 0;
+                }
+            }
+        }
+
+        // ── Expanded state (hover) ──────────────────────────────────────
+        &:hover {
+            .toast {
+                scale: 1;
+                opacity: 1;
+                translate: 0 0 0;
+                grid-area: auto;
+
+                &[data-toast-hidden="true"] {
+                    opacity: 1;
+                }
+            }
+
+            gap: var(--_toast-gap);
         }
     }
 
-	&:empty {
-		display: none;
-	}
-}
+    // ── Individual toast ─────────────────────────────────────────────────
+    .toast {
+        position: relative;
+        display: block;
+        pointer-events: auto;
+        max-width: var(--cool-toast-max-width, 420px);
+        width: max-content;
+        z-index: calc(var(--_toast-max-visible, 3) - var(--_toast-index, 0));
+        will-change: scale, opacity, translate, grid-area;
+        opacity: 0;
+        grid-area: 1/1;
+        min-width: 220px;
+
+        &.show {
+            opacity: 1;
+        }
+    }
 
-.toast-body {
-	display: flex;
-    align-items: center;
-    justify-content: space-between;
-	padding: $toast-body-padding-y $toast-body-padding-x;
-	-webkit-font-smoothing: subpixel-antialiased;
+    // ── Inner wrapper ────────────────────────────────────────────────────
+    .toast-inner {
+        background-clip: padding-box;
+        background-color: var(--cool-toast-bg);
+        border-radius: var(--cool-toast-border-radius);
+        font-size: var(--cool-toast-font-size);
+        word-wrap: break-word;
+        font-family: var(--cool-font-family-base);
+        font-style: normal;
+        font-weight: var(--cool-font-weight-base);
+        line-height: var(--cool-line-height-base);
+        text-align: start;
+        text-decoration: none;
+        text-shadow: none;
+        text-transform: none;
+        letter-spacing: normal;
+        word-break: normal;
+        word-spacing: normal;
+        white-space: normal;
+        line-break: auto;
+    }
 
-	button[data-toast-close] {
+    button[data-toast-close] {
         background-color: transparent;
         border: 0;
+        color: var(--cool-toast-header-color);
         opacity: 0.75;
         line-height: 0;
         padding: 0;
-        margin-left: $toast-body-padding-x;
+        cursor: pointer;
 
         svg {
-        	pointer-events: none;
+            pointer-events: none;
         }
 
         &:hover,
         &:focus {
             opacity: 1;
-            outline: 0
+            outline: 0;
         }
     }
-}
-
-
-// Themes
-.toast-light {
-	.toast-inner {
-		background-color: $toast-bg-light;
-
-		.toast-header {
-			color: $toast-header-color-light;
-			background-color: $toast-header-bg-light;
-			border-color: $toast-header-bg-light;
-
-			button[data-toast-close] {
-				color: $toast-header-color-light;
-			}
-		}
-
-		.toast-body {
-			color: $toast-body-color-light;
-
-			button[data-toast-close] {
-				color: $toast-body-color-light;
-			}
-		}
-	}
-}
 
-.toast-dark {
-	.toast-inner {
-		background-color: $toast-bg-dark;
+    // ── Header ───────────────────────────────────────────────────────────
+    .toast-header {
+        display: flex;
+        align-items: center;
+        padding: var(--cool-toast-header-padding-y) var(--cool-toast-header-padding-x) 0;
+        gap: var(--cool-toast-header-gap, 8px);
+        margin-top: 0;
+        margin-bottom: 0;
+        color: var(--cool-toast-header-color);
+        background-color: var(--cool-toast-header-bg);
+        border-color: var(--cool-toast-header-bg);
+        font-size: var(--cool-font-size-base);
+        border-width: var(--cool-toast-border-width);
+        border-style: solid;
+        border-top-left-radius: calc(var(--cool-border-radius) - var(--cool-toast-border-width));
+        border-top-right-radius: calc(var(--cool-border-radius) - var(--cool-toast-border-width));
+
+        span {
+            font-weight: var(--cool-font-weight-bold);
+        }
 
-		.toast-header {
-			color: $toast-header-color-dark;
-			background-color: $toast-header-bg-dark;
-			border-color: $toast-header-bg-dark;
+        &:empty {
+            display: none;
+        }
+    }
 
-			button[data-toast-close] {
-				color: $toast-header-color-dark;
-			}
-		}
+    // ── Body ─────────────────────────────────────────────────────────────
+    .toast-body {
+        padding: var(--cool-toast-body-padding-y) var(--cool-toast-body-padding-x);
+        color: var(--cool-toast-body-color);
+        -webkit-font-smoothing: subpixel-antialiased;
 
-		.toast-body {
-			color: $toast-body-color-dark;
+        &:has(> button[data-toast-close]) {
+            display: grid;
+            grid-template-columns: 1fr auto;
+        }
+    }
 
-			button[data-toast-close] {
-				color: $toast-body-color-dark;
-			}
-		}
-	}
-}
+    // ── Icon ─────────────────────────────────────────────────────────────
+    .toast-icon {
+        --icon-size: 16px;
+        flex-shrink: 0;
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:has(> img) {
+            --icon-size: 24px;
+        }
 
+        img {
+            --icon-radius: var(
+                --cool-toast-icon-border-radius,
+                calc(
+                    var(--cool-border-radius) - var(--cool-toast-border-width) - var(--cool-toast-header-padding-y) / 2
+                )
+            );
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: var(--icon-radius);
+        }
 
-// Sizes
-.toast-sm {
-    .toast-inner {
-    	.toast-header {
-			padding: $toast-header-padding-y-sm $toast-header-padding-x-sm;
-			font-size: $toast-font-size-sm;
-    	}
-
-    	.toast-body {
-    		padding: $toast-body-padding-y-sm $toast-body-padding-x-sm;
-			font-size: $toast-font-size-sm;
-
-			button[data-toast-close] {
-				margin-left: $toast-body-padding-x-sm;
-			}
-    	}
+        i,
+        svg {
+            font-size: calc(var(--icon-size) * 0.625);
+            color: var(--cool-toast-body-color);
+            opacity: 0.75;
+        }
     }
 }
 
-.toast-lg {
-    .toast-inner {
-    	.toast-header {
-			padding: $toast-header-padding-y-lg $toast-header-padding-x-lg;
-			font-size: $toast-font-size-lg;
-
-			span {
-				font-weight: $font-weight-normal;
-			}
-    	}
-
-    	.toast-body {
-    		padding: $toast-body-padding-y-lg $toast-body-padding-x-lg;
-			font-size: $toast-font-size-lg;
-			font-weight: $font-weight-light;
-
-			button[data-toast-close] {
-				margin-left: $toast-body-padding-x-lg;
-			}
-    	}
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-toast;
     }
-}
+} @else {
+    @include cool-toast;
+}