@finqu/cool 1.2.29 → 2.0.2

package/scss/_navbar.scss

@@ -1,290 +1,122 @@
-// Navbar
-// ---------------------------------------------------------------------------------------------------------------
+@use "variables" as *;
+/* Navbar ========================================================================== */
 
-html.dom-ready {
+@mixin cool-navbar {
     .navbar {
-    	.navbar-brand {
-			.sidebar-left-toggler,
-			.sidebar-right-toggler {
-				.border,
-				.img-bordered {
-					transition: border-color .15s ease-in-out;
-				}
-			}
-    	}
-
-    	.navbar-nav {
-			.nav-item {
-				transition: color .15s ease-in-out;
-
-				.border,
-				.img-bordered {
-					transition: border-color .15s ease-in-out;
-				}
-			}
-    	}
+        align-items: center;
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        grid-template-areas: "left center right";
+        background-color: var(--cool-navbar-bg);
+        height: var(--cool-navbar-height);
+        position: relative;
+        padding: 0 var(--cool-navbar-padding-x);
+        z-index: 10;
+        gap: var(--cool-navbar-nav-gap);
+        border-bottom: var(--cool-navbar-border-width) solid var(--cool-navbar-border-color);
+        box-sizing: content-box;
+
+        @include media-breakpoint-down(md) {
+            --cool-navbar-height: var(--cool-navbar-height-sm);
+            --cool-navbar-item-height: var(--cool-navbar-item-height-sm);
+        }
+
+        .navbar-left {
+            grid-area: left;
+        }
+
+        .navbar-center {
+            grid-area: center;
+        }
+
+        .navbar-right {
+            grid-area: right;
+        }
+
+        .navbar-brand {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            box-sizing: border-box;
+
+            .brand-container {
+                display: flex;
+                height: 100%;
+                align-items: center;
+                justify-content: flex-start;
+                width: 100%;
+                height: 100%;
+
+                .brand {
+                    svg {
+                        margin-top: var(--cool-navbar-brand-svg-margin-top);
+                    }
+                }
+            }
+
+            .sidebar-left-toggler {
+                display: flex;
+                width: min-content;
+                height: 100%;
+                justify-content: center;
+                align-items: center;
+
+                @include media-breakpoint-up(lg) {
+                    display: none;
+                }
+            }
+        }
+
+        .navbar-nav {
+            display: flex;
+            height: 100%;
+            justify-content: flex-end;
+            align-items: center;
+            gap: var(--cool-navbar-item-padding-x);
+
+            .nav-item-spacer {
+                flex: 0 0 var(--cool-navbar-item-spacer-width);
+                width: var(--cool-navbar-item-spacer-width);
+            }
+
+            .nav-item {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: var(--cool-navbar-item-font-size);
+                line-height: 0;
+                border: 0;
+                cursor: pointer;
+                outline: 0;
+                color: var(--cool-navbar-color);
+                margin: 0;
+                box-sizing: border-box;
+                text-align: center;
+                height: var(--cool-navbar-item-height);
+                min-width: var(--cool-navbar-item-min-width);
+                background-color: var(--cool-navbar-item-bg);
+                border-radius: var(--cool-border-radius);
+                transition: color 0.15s ease-in-out;
+                aspect-ratio: 1/1;
+
+                &.btn {
+                    padding: 0 var(--cool-navbar-item-padding-x);
+                }
+
+                &:hover,
+                &.active {
+                    color: var(--cool-navbar-hover-color);
+                    background-color: var(--cool-navbar-item-hover-bg);
+                }
+            }
+        }
     }
 }
 
-.navbar {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	background-color: $navbar-bg;
-	height: $navbar-height;
-	position: relative;
-	border-bottom: $navbar-border-width solid $navbar-border-color;
-	padding: 0 $navbar-padding-x;
-	@include media-breakpoint-down(sm) {
-		height: $navbar-height-sm;
-		padding: 0;
-	}
-
-	.navbar-brand {
-		display: flex;
-		align-items: center;
-		height: 100%;
-		box-sizing: border-box;
-		@include media-breakpoint-down(lg) {
-			width: 100%;
-		}
-
-		& + .navbar-nav {
-			margin-left: 20px;
-		}
-
-		// Brand
-		.brand-container {
-			display: flex;
-			height: 100%;
-			align-items: center;
-			justify-content: flex-start;
-			width: 100%;
-			height: 100%;
-			@include media-breakpoint-down(lg) {
-				justify-content: center;
-			}
-
-			.brand {
-				svg {
-					margin-top: 5px;
-				}
-			}
-		}
-
-		// Sidebar toggles
-		.sidebar-left-toggler,
-		.sidebar-right-toggler {
-		    display: flex;
-		    min-width: $navbar-height-sm;
-		    height: 100%;
-		    justify-content: center;
-		    align-items: center;
-		    @include media-breakpoint-up(lg) {
-		    	display: none
-		    }
-
-		    &.open {
-				.icon {
-					margin-right: -5px;
-
-					&.animated span {
-						&:nth-child(1) {
-							transform: rotate(45deg);
-							top: 0px;
-							left: 0px;
-						}
-
-						&:nth-child(2) {
-							width: 0%;
-					  		opacity: 0;
-						}
-
-						&:nth-child(3) {
-							transform: rotate(-45deg);
-							top: 15px;
-							left: 0px;
-						}
-					}
-				}
-			}
-
-			.icon {
-				&.animated {
-					width: 22px;
-					height: 15px;
-					position: relative;
-					transform: rotate(0deg);
-					transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
-					cursor: pointer;
-
-					span {
-						display: block;
-						position: absolute;
-						height: 2px;
-						width: 100%;
-						background: $navbar-color;
-						border-radius: 1px;
-						opacity: 1;
-						left: 0;
-						transform: rotate(0deg);
-						transition: 0.25s ease-in-out;
-
-						&:nth-child(1) {
-							top: 0px;
-							transform-origin: left center;
-						}
-
-						&:nth-child(2) {
-							top: 6px;
-							transform-origin: left center;
-						}
-
-						&:nth-child(3) {
-							top: 12px;
-							transform-origin: left center;
-						}
-					}
-				}
-			}
-
-			.border,
-			.img-bordered {
-				border-color: $navbar-color;
-			}
-
-			.avatar {
-				margin-right: spacer(2);
-				position: relative;
-				border: $border-width solid theme-color('light');
-				border-radius: 50%;
-
-				.notification-counter {
-				    background-color: theme-color('brand');
-				    color: white;
-				    font-weight: bolder;
-				    font-size: 10px;
-				    border-radius: 10px;
-				    padding: 2px 4px;
-				    height: 18px;
-				    display: flex;
-				    justify-content: center;
-				    align-items: center;
-				    position: absolute;
-				    left: -5px;
-				    top: -5px;
-				    z-index: 10;
-				    border: $border-width solid theme-color('light');
-				}
-			}
-		}
-	}
-
-	// Nav
-	.navbar-nav {
-		display: flex;
-		width: 100%;
-		height: 100%;
-		justify-content: flex-end;
-		align-items: center;
-		margin-right: -#{$navbar-item-padding-x};
-
-		@include media-breakpoint-down(lg) {
-			display: none;
-		}
-
-		// IE 11 fix
-		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-			justify-content: flex-start;
-		}
-
-		.nav-item-spacer {
-			flex: 0 0 $navbar-item-spacer-width;
-			width: $navbar-item-spacer-width;
-		}
-
-		.nav-item {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			padding: 0 $navbar-item-padding-x;
-			font-size: $navbar-item-font-size;
-			line-height: 0;
-			background-color: transparent;
-			border: 0;
-			cursor: pointer;
-			outline: 0;
-			color: $navbar-color;
-			margin: 0 0 auto 0;
-			box-sizing: border-box;
-			text-align: center;
-			height: 100%;
-			min-width: $navbar-item-min-width;
-
-			.icon {
-				width: auto;
-				height: $navbar-item-icon-size;
-			}
-
-			&:hover,
-			&.active {
-				color: $navbar-hover-color;
-
-				.border,
-				.img-bordered {
-					border-color: $navbar-hover-color;
-				}
-			}
-
-			.border,
-			.img-bordered {
-				border-color: $navbar-color;
-			}
-
-			&.pulse {
-			    position: relative;
-
-			    &:after {
-			        content: " ";
-			        position: absolute;
-			        top: calc(50% - #{$navbar-item-icon-size / 2});
-			        left: calc(50% - #{$navbar-item-icon-size / 2});
-			        display: block;
-			        width: $navbar-item-icon-size;
-			        height: $navbar-item-icon-size;
-			        border-radius: 50%;
-			        cursor: pointer;
-			        box-shadow: 0 0 0 rgba($navbar-pulse-shadow-color, 0.4);
-			        animation: navbar-item-pulse 2s 10;
-			    }
-
-			    &:hover {
-			        animation: none;
-			    }
-			}
-
-			.pulse:hover {
-			    animation: none;
-				}
-		}
-
-		.nav-dropdown {
-			height: 100%;
-		}
-	}
-}
-
-@keyframes navbar-item-pulse {
-    0% {
-        box-shadow: 0 0 0 0 rgba($navbar-pulse-shadow-color, 0.4);
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-navbar;
     }
-
-    70% {
-        box-shadow: 0 0 0 10px rgba($navbar-pulse-shadow-color, 0);
-    }
-
-    100% {
-        box-shadow: 0 0 0 0 rgba($navbar-pulse-shadow-color, 0);
-    }
-}
+} @else {
+    @include cool-navbar;
+}

package/scss/_notification.scss

@@ -1,13 +1,115 @@
-// Notification
-// ---------------------------------------------------------------------------------------------------------------
+@use "variables" as *;
+/* Notifications & Alerts ========================================================================== */
 
-.notification {
-	border-radius: $border-radius;
-	padding: spacer(3);
+@mixin cool-notification {
+    .alert {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        box-sizing: border-box;
+        padding: var(--cool-alert-padding);
+        background-color: var(--cool-alert-bg);
+        color: var(--cool-alert-color);
+        border: var(--cool-alert-border-width) solid var(--cool-alert-border-color);
+        border-radius: var(--cool-alert-border-radius);
+        margin-bottom: var(--cool-alert-margin-bottom);
+
+        .alert-icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: var(--cool-alert-icon-width);
+            height: var(--cool-alert-icon-height);
+            flex-shrink: 0;
+            flex-grow: 0;
+            border: 1px solid;
+            border-radius: 50%;
+
+            .icon {
+                font-size: var(--cool-alert-icon-font-size);
+            }
+        }
+
+        .alert-content-container {
+            padding: 0;
+            box-sizing: border-box;
+            flex: 1;
+
+            .alert-content {
+                font-size: var(--cool-alert-font-size, var(--cool-font-size-sm));
+            }
+
+            .alert-action {
+                margin-top: var(--cool-section-padding);
+            }
+        }
+
+        .alert-icon + .alert-content-container {
+            padding-left: var(--cool-section-padding);
+        }
+    }
+
+    .section .alert {
+        border-radius: $section-inner-border-radius;
+    }
+
+    .alert-sm {
+        --cool-alert-padding: var(--cool-alert-padding-sm);
+
+        .alert-icon {
+            border: 0;
+        }
+
+        .alert-icon + .alert-content-container {
+            padding-left: 0;
+        }
+    }
+
+    @each $color, $value in $theme-colors {
+        .alert-#{$color} {
+            --cool-alert-bg: var(--cool-theme-bg-color-#{$color});
+            --cool-alert-border-color: var(--cool-theme-color-#{$color});
+            --cool-alert-color: var(--cool-theme-foreground-color-#{$color});
+
+            .btn-primary,
+            .btn-secondary,
+            .btn-action,
+            .btn-remove .btn-outline-primary,
+            .btn-outline-secondary {
+                --cool-btn-bg: var(--cool-body-surface-bg);
+                --cool-btn-color: var(--cool-theme-foreground-color-#{$color});
+                --cool-btn-border-color: var(--cool-color-grey-350);
+                --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-foreground-color-#{$color}) 5%, transparent);
+            }
+        }
+    }
+
+    .notification {
+        border-radius: var(--cool-notification-border-radius);
+        padding: var(--cool-notification-padding);
+        background-color: var(--cool-notification-bg);
+        color: var(--cool-notification-color);
+        border: var(--cool-notification-border-width) solid var(--cool-notification-border-color);
+        position: relative;
+        box-sizing: border-box;
+    }
+
+    @each $color, $value in $theme-colors {
+        .notification-#{$color} {
+            --cool-notification-bg: var(--cool-theme-bg-color-#{$color});
+            --cool-notification-color: var(--cool-theme-foreground-color-#{$color});
+            --cool-notification-border-color: var(--cool-theme-color-#{$color});
+        }
+    }
 }
 
-@each $color, $value in $theme-colors {
-    .notification-#{$color} {
-        @include notification-variant($value);
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-notification;
     }
-}
+} @else {
+    @include cool-notification;
+}

package/scss/_pagination.scss

@@ -1,88 +1,82 @@
-// Pagination
-// ---------------------------------------------------------------------------------------------------------------
-
-.pagination {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 0 20px 0;
-    padding-left: 0;
-    list-style: none;
-    border-radius: $border-radius;
-    justify-content: center;
-    overflow: hidden;
-    font-family: $font-family-title;
-    font-weight: 600;
-
-    .page-item {
-        outline: 0;
-        position: relative;
-        margin: 0 5px;
-
-        &:after {
-            content: " ";
-            height: 4px;
-            border-radius: 4px;
-            width: 100%;
-            bottom: 0;
-            background-color: transparent;
-        }
-
-        &:first-child {
-            .page-link {
-                margin-left: 0;
-                border-left: 0;
-            }
-        }
-
-        &:last-child {
-            .page-link {
-                border-right: 0;
-            }
-        }
-
-        &.active {
-            .page-link {
-                z-index: 2;
-                color: $pagination-active-color;
-            }
-
-            &:after {
-                background-color: $pagination-active-color;
-                display: block;
-            }
-        }
-
-        &.disabled {
-            cursor: not-allowed;
-
-            .page-link {
-                color: $pagination-disabled-color;
-                pointer-events: none;
-            }
-        }
-
-        &:not(.active):not(.disabled) {
-            .page-link {
-                &:focus,
-                &:hover {
-                    color: $pagination-hover-color;
-                    text-decoration: none;
-                }
-            }
-
-            &:hover:after {
-                background-color: $pagination-color;
-                display: block;
-            }
-        }
-
-        .page-link {
-            position: relative;
-            display: block;
-            padding: $pagination-padding-y $pagination-padding-x;
-            margin-left: -1px;
-            line-height: $pagination-line-height;
-            color: $pagination-color;
-        }
-    }
-}
+@use "variables" as *;
+/* Pagination ========================================================================== */
+
+@mixin cool-pagination {
+    .pagination {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        justify-content: center;
+        overflow: hidden;
+        font-family: var(--cool-pagination-font-family);
+        font-weight: var(--cool-pagination-font-weight);
+        gap: var(--cool-spacing-1);
+
+        .page-item {
+            position: relative;
+            outline: 0;
+            margin: 0;
+
+            &:after {
+                content: " ";
+                width: 100%;
+                height: 2px;
+                bottom: 0;
+                background-color: transparent;
+            }
+
+            &.active {
+                .page-link {
+                    z-index: 2;
+                    color: var(--cool-pagination-active-color);
+                }
+
+                &:after {
+                    background-color: var(--cool-pagination-active-color);
+                    display: block;
+                }
+            }
+
+            &.disabled {
+                cursor: not-allowed;
+
+                .page-link {
+                    color: var(--cool-pagination-disabled-color);
+                    pointer-events: none;
+                }
+            }
+
+            &:not(.active):not(.disabled) {
+                .page-link {
+                    &:focus,
+                    &:hover {
+                        color: var(--cool-pagination-hover-color);
+                        text-decoration: none;
+                    }
+                }
+
+                &:hover:after {
+                    background-color: var(--cool-pagination-color);
+                    display: block;
+                }
+            }
+
+            .page-link {
+                position: relative;
+                display: block;
+                padding: var(--cool-pagination-padding-y) var(--cool-pagination-padding-x);
+                color: var(--cool-pagination-color);
+            }
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-pagination;
+    }
+} @else {
+    @include cool-pagination;
+}