@finqu/cool 1.2.29 → 2.0.2

package/scss/_frame.scss

@@ -1,627 +1,948 @@
-// Frame
-// -----------------------------------------------------------------------------------------
-
-@if $frame-enable {
-
-	// Html
-	html.dom-ready {
-
-		@include media-breakpoint-down(lg) {
-			.sidebar-left,
-			.sidebar-right {
-				transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
-			}
-		}
-	}
-
-	html {
-		overflow-y: hidden;
-	}
-
-	html,
-	body {
-	    width: 100%;
-	    height: 100%;
-	    overflow-x: hidden;
-	}
-
-	// Body
-	body {
-		@include media-breakpoint-down(lg) {
-			&.sidebar-left-open {
-				.site-main > .sidebar-left {
-					transform: translate3d(0px, 0, 0);
-				}
-
-				.site-header,
-				.site-main > .content {
-					transform: translate3d($frame-sidebar-left-width, 0, 0);
-				}
-			}
-
-			&.sidebar-right-open {
-				.site-main > .sidebar-right {
-					transform: translate3d(0px, 0, 0);
-				}
-
-				.site-header,
-				.site-main > .content {
-					transform: translate3d(-#{$frame-sidebar-right-width}, 0, 0);
-				}
-			}
-		}
-	}
-
-
-	// Site header
-	.site-header {
-		position: relative;
-		z-index: 0;
-
-		@include media-breakpoint-down(lg) {
-			transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
-		}
-
-		& + .site-main {
-			height: calc(100% - #{$navbar-height + $navbar-border-width});
-
-			@include media-breakpoint-down(lg) {
-				height: calc(100% - #{$navbar-height-sm + $navbar-border-width});
-			}
-		}
-
-		@each $breakpoint, $container-max-width in $container-max-widths {
-
-	        @include media-breakpoint-up($breakpoint) {
-	        	$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-	        	&.d#{$infix}-none + .site-main {
-	        		height: 100%;
-	        	}
-	        }
-	    }
-	}
-
-
-	// Site main
-	.site-main {
-		position: relative;
-		overflow: visible;
-		z-index: 1;
-		height: 100%;
-
-		// Site content
-		.content {
-			position: relative;
-			width: 100%;
-		    height: 100%;
-		    overflow-x: hidden;
-		    overflow-y: auto;
-		    float: none;
-		    transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
-		    -webkit-overflow-scrolling: touch;
-		    box-shadow: $frame-content-box-shadow;
-		    background-color: $frame-content-bg;
-		    padding: $frame-content-padding-sm;
-		    border-radius: $frame-content-border-radius-sm;
-
-		    &.no-bg {
-		    	background-color: transparent;
-		    }
-
-		    @include media-breakpoint-up(lg) {
-		    	transition-property: top, bottom, width;
-			    transition-duration: 0.2s, 0.2s, 0.35s;
-			    transition-timing-function: linear, linear, ease;
-			    padding: $frame-content-padding;
-			    border-radius: $frame-content-border-radius;
-		    }
-
-		    .content-inner {
-		    	position: relative;
-		    	margin: 20px 0;
-		    	overflow: visible;
-
-		    	@include media-breakpoint-up(lg) {
-					margin: 20px 0;
-				}
-
-				@include media-breakpoint-down(sm) {
-					> .alert,
-					.section-container > .alert,
-					.section {
-						width: auto;
-						margin-left: -$frame-content-padding-sm * 2;
-						margin-right: -$frame-content-padding-sm * 2;
-					}
-				}
-		    }
-
-		    .content-header {
-				position: relative;
-				width: 100%;
-				margin: 0 0 spacer(4);
-
-				& + .content-inner {
-					margin-top: 0;
-				}
-
-				@include media-breakpoint-up(lg) {
-					margin: 0 0 spacer(4);
-				}
-
-				.breadcrumbs {
-					font-family: $font-family-title;
-					font-weight: 500;
-				}
-
-				.content-header-title {
-					font-size: $h4-font-size;
-					margin-bottom: 0;
-					font-family: $font-family-title;
-					font-weight: 600;
-					word-break: break-all;
-
-					@include media-breakpoint-up(sm) {
-						font-size: $h3-font-size;
-					}
-				}
-
-				.content-header-primary-action {
-					.btn {
-						@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
-
-						@include media-breakpoint-up(sm) {
-							@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-						}
-					}
-				}
-
-				.content-header-helper-actions {
-					margin-top: 10px;
-				}
-
-				.content-header-secondary-actions {
-					font-size: 0;
-
-					&.has-content {
-						margin: 20px (-$btn-padding-x-sm - 2px);
-					}
-
-					.btn {
-						@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-					}
-				}
-			}
-		}
-
-
-		// Sidebar left
-		.sidebar-left {
-			display: flex;
-			flex-direction: column;
-			position: absolute;
-			top: 0;
-		    bottom: 0;
-			left: 0;
-			overflow: hidden;
-			transform: translate3d(-#{$frame-sidebar-left-width}, 0, 0);
-			width: $frame-sidebar-left-width;
-			height: 100%;
-			max-height: 100%;
-			overflow-y: auto;
-			background-color: $frame-sidebar-left-bg-mobile;
-			border-right: $frame-sidebar-left-border-width solid $frame-sidebar-left-border-color;
-			transition-property: top, bottom, width;
-		    transition-duration: 0.2s, 0.2s, 0.35s;
-		    transition-timing-function: linear, linear, ease;
-		    z-index: auto;
-		    padding: $frame-sidebar-left-padding-y $frame-sidebar-left-padding-x;
-
-		    @include media-breakpoint-down(lg) {
-				position: fixed;
-				right: auto;
-				visibility: visible;
-				z-index: 1000;
-			}
-
-			@include media-breakpoint-up(lg) {
-				background-color: $frame-sidebar-left-bg;
-
-				&.visible {
-					transform: translate3d(0, 0, 0);
-
-					& + .content {
-						width: calc(100% - #{$frame-sidebar-left-width});
-						float: right;
-
-						.container-content {
-							max-width: 100%;
-						}
-					}
-				}
-			}
-
-			.sidebar-header {
-				padding: $frame-sidebar-left-header-padding-y $frame-sidebar-left-header-padding-x 0 $frame-sidebar-left-header-padding-x;
-				z-index: 11;
-				position: relative;
-			}
-
-			.sidebar-content {
-				position: relative;
-				height: 100%;
-				z-index: 10;
-				padding: $frame-sidebar-left-content-padding-y $frame-sidebar-left-content-padding-x;
-				display: flex;
-				flex-direction: column;
-				margin-top: $frame-sidebar-spacing;
-
-				> * {
-					flex-shrink: 0;
-				}
-
-				.ps__thumb-y {
-					background-color: rgba(0,0,0,0.5);
-				}
-
-				.ps__rail-y:focus > .ps__thumb-y {
-					background-color: rgba(0,0,0,0.8);
-				}
-
-				.collapse,
-				.collapsing {
-					width: 100%;
-				}
-
-				.nav {
-					position: relative;
-					margin: 0;
-					padding: $frame-sidebar-nav-padding-y $frame-sidebar-nav-padding-x;
-					list-style: none;
-					font-family: $frame-sidebar-nav-font-family;
-
-					li {
-						display: block;
-
-						.nav-item {
-							cursor: pointer;
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							overflow: hidden;
-							padding: $frame-sidebar-nav-item-child-padding-y $frame-sidebar-nav-item-child-padding-x;
-							position: relative;
-						    background: none;
-						    border: 0;
-						    flex: 0 0 auto;
-						    margin: 0;
-						    outline: 0;
-						    word-break: break-all;
-
-						    [data-collapse-indicator] {
-						    	color: theme-color('medium');
-
-					    		@include media-breakpoint-up(lg) {
-					    			display: none;
-					    		}
-					    	}
-
-						    .nav-item-title {
-						    	display: inline;
-						    	position: relative;
-						    	color: $frame-sidebar-nav-item-child-color;
-						    	font-size: $frame-sidebar-nav-item-child-font-size;
-						    	font-weight: $frame-sidebar-nav-item-child-font-weight;
-
-						    	&:after {
-									display: block;
-									content: " ";
-									position: absolute;
-									left: 0;
-									bottom: -2px;
-									width: 100%;
-									height: 2px;
-									border-radius: 2px;
-									background-color: black;
-									transform: scaleX(0);
-									transform-origin: left;
-									transition-property: transform;
-									transition-duration: .5s;
-									transition-timing-function: cubic-bezier(0.24, -0.06, 0.17, 1.71);
-								}
-						    }
-
-						    &:hover,
-							&:focus {
-								outline: 0;
-
-								.nav-item-title {
-									color: $frame-sidebar-nav-item-child-hover-color;
-
-									&:after {
-										transform: scaleX(1);
-									}
-								}
-							}
-
-						    &.active {
-								outline: 0;
-
-								.nav-item-title {
-									color: $frame-sidebar-nav-item-child-active-color;
-
-									&:after {
-										transform: scaleX(1);
-									}
-								}
-							}
-						}
-
-						&.nav-parent {
-							> .nav-item {
-								padding: $frame-sidebar-nav-item-padding-y $frame-sidebar-nav-item-padding-x;
-
-								&[disabled] {
-							    	cursor: default;
-							    }
-
-							    &:hover,
-							    &:focus {
-									.nav-item-title {
-										color: $frame-sidebar-nav-item-parent-hover-color;
-							    	}
-							    	.nav-icon,
-							    	.icon {
-										color: $frame-sidebar-nav-icon-hover-color;
-									}
-							    }
-
-								&.active,
-							    &[aria-expanded="true"] {
-							    	.nav-item-title {
-										color: $frame-sidebar-nav-item-parent-active-color;
-							    	}
-							    	.nav-icon {
-										color: $frame-sidebar-nav-icon-active-color;
-									}
-							    }
-
-							    &.active[aria-expanded="true"] {
-							    	cursor: default;
-
-							    	.nav-item-title:after {
-							    		display: none;
-							    	}
-							    }
-
-								.nav-item-title {
-									color: $frame-sidebar-nav-item-parent-color;
-									flex: 0 0 auto;
-									font-size: $frame-sidebar-nav-item-parent-font-size;
-									font-weight: $frame-sidebar-nav-item-parent-font-weight;
-									position: relative;
-								    align-self: center;
-								    display: inline;
-								    line-height: 25px;
-								    text-align: left;
-
-								    &:after {
-										bottom: -3px;
-										height: 3px;
-										border-radius: 3px;
-									}
-								}
-
-								&[data-toggle="collapse"] {
-									.nav-item-title {
-									    &:after {
-											display: none;
-										}
-
-										@include media-breakpoint-up(lg) {
-											&:after {
-												display: block;
-											}
-										}
-									}
-								}
-							}
-						}
-
-						.nav {
-							padding: $frame-sidebar-sub-nav-padding-y $frame-sidebar-sub-nav-padding-x;
-
-							li {
-								> .nav-item {
-									padding-left: 0;
-								}
-							}
-						}
-					}
-				}
-
-				> .spacer {
-					flex-grow: 1;
-					flex-shrink: 1;
-				}
-			}
-
-			.user-account {
-				display: none;
-				flex-direction: row;
-				justify-content: center;
-				align-items: center;
-				cursor: pointer;
-				padding: $frame-sidebar-left-content-padding-y $frame-sidebar-left-content-padding-x;
-				margin-top: $frame-sidebar-spacing;
-
-				@include media-breakpoint-up(lg) {
-					display: flex;
-				}
-
-				&:hover {
-					background-color: lighten($body-bg, 3%);
-				}
-
-				.avatar {
-					margin-right: spacer(2);
-					position: relative;
-					border: $border-width solid $grey-50;
-					border-radius: 50%;
-
-					.image {
-						overflow: hidden;
-					}
-
-					.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 $grey-50;
-					}
-				}
-
-				.information {
-					font-family: $font-family-title;
-					font-weight: 600;
-					flex: 1;
-
-					.user-name {
-						font-size: $font-size-sm;
-						margin-bottom: 0;
-						color: theme-color('dark');
-					}
-
-					.merchant-name {
-						font-size: $font-size-xs;
-						margin-bottom: 0;
-						color: theme-color('medium');
-					}
-				}
-
-				.icon {
-					color: theme-color('medium');
-				}
-			}
-		}
-
-
-		// Sidebar right
-		.sidebar-right {
-			display: flex;
-			flex-direction: column;
-			position: absolute;
-			top: 0;
-			right: 0;
-		    bottom: 0;
-		    width: $frame-sidebar-right-width;
-		    transform: translate3d($frame-sidebar-right-width, 0, 0);
-			height: 100%;
-			max-height: 100%;
-			overflow-y: auto;
-			background-color: $frame-sidebar-right-bg-mobile;
-			border-left: $frame-sidebar-right-border-width solid $frame-sidebar-right-border-color;
-			box-sizing: border-box;
-
-			@include media-breakpoint-up(lg) {
-				background-color: $frame-sidebar-right-bg;
-			}
-
-			@include media-breakpoint-down(lg) {
-				position: fixed;
-				left: auto;
-				visibility: visible;
-				overflow-y: visible;
-			}
-
-			@include media-breakpoint-up(lg) {
-				&.visible {
-					transform: translate3d(0, 0, 0);
-
-					& + .content {
-						width: calc(100% - #{$frame-sidebar-right-width});
-						float: right;
-
-						.container-content {
-							max-width: 100%;
-						}
-					}
-				}
-			}
-		}
-	}
+@use "variables" as *;
+/* Frame ========================================================================== */
+
+@mixin cool-frame {
+    .container-content {
+        display: flex;
+        flex-direction: column;
+        max-width: var(--cool-container-content-max-width);
+        min-height: 100%;
+        gap: var(--cool-spacing-4);
+
+        .content-header {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            width: 100%;
+            gap: var(--cool-spacing-1);
+
+            .breadcrumbs {
+                display: flex;
+                gap: var(--cool-icon-spacer);
+                font-family: var(--cool-font-family-title);
+                font-weight: var(--cool-font-weight-normal);
+            }
+
+            .content-header-title {
+                font-family: var(--cool-font-family-title);
+                font-size: var(--cool-h5-font-size);
+                font-weight: var(--cool-font-weight-bold);
+                word-break: break-all;
+            }
+
+            .content-header-primary-action .btn {
+                @include media-breakpoint-down(md) {
+                    --cool-btn-padding-y: var(--cool-btn-padding-y-sm);
+                    --cool-btn-padding-x: var(--cool-btn-padding-x-sm);
+                    --cool-btn-font-size: var(--cool-btn-font-size-sm);
+                    --cool-btn-line-height: var(--cool-btn-line-height-sm);
+                    --cool-btn-border-radius: var(--cool-btn-border-radius-sm);
+                }
+            }
+
+            .content-header-helper-actions {
+                display: flex;
+                gap: var(--cool-spacing-1);
+                align-items: center;
+                flex-wrap: wrap;
+            }
+
+            *:not(:empty) + .content-header-secondary-actions {
+                margin-top: var(--cool-spacing-2);
+            }
+
+            .content-header-secondary-actions {
+                display: flex;
+                gap: var(--cool-spacing-1);
+                align-items: center;
+                flex-wrap: wrap;
+            }
+        }
+
+        .content-inner {
+            position: relative;
+            overflow: visible;
+        }
+    }
+
+    html:not(:has(.site-main)) {
+        .container-content {
+            margin-top: calc(var(--cool-grid-gutter-x) * 2);
+        }
+    }
+
+    html:has(.site-main) {
+        overflow-y: hidden;
+        width: 100%;
+        height: 100%;
+        overflow-x: hidden;
+
+        &.sidebar-transitioning {
+            @include media-breakpoint-down(md) {
+                .sidebar-left,
+                .site-header,
+                .content {
+                    transition: transform 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
+                }
+            }
+
+            @include media-breakpoint-sidebar-right-down() {
+                .sidebar-right,
+                .site-header,
+                .content {
+                    transition: transform 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
+                }
+            }
+
+            @include media-breakpoint-up(lg) {
+                .sidebar-left,
+                .content {
+                    transition:
+                        transform 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1),
+                        width 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
+                }
+            }
+
+            @include media-breakpoint-sidebar-right-up() {
+                .sidebar-right,
+                .content {
+                    transition:
+                        transform 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1),
+                        width 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
+                }
+            }
+        }
+
+        body {
+            width: 100%;
+            height: 100%;
+            overflow-x: hidden;
+
+            @include media-breakpoint-down(md) {
+                &.sidebar-left-open {
+                    &:not(:has(.sidebar-left.sidebar-floating)) {
+                        .site-header,
+                        .site-main .sidebar-left + .content {
+                            transform: translate3d(calc(var(--cool-frame-sidebar-left-width) * -1), 0, 0);
+                        }
+                    }
+
+                    .site-main .sidebar-left {
+                        transform: translate3d(0px, 0, 0);
+                    }
+                }
+
+                &.sidebar-left-closed {
+                    &:not(:has(.sidebar-left.sidebar-floating)) {
+                        .site-header {
+                            transform: translate3d(0 0, 0);
+                        }
+
+                        .site-main .sidebar-left + .content {
+                            transform: translate3d(0 0, 0);
+                            width: 100%;
+                            float: none;
+                        }
+                    }
+
+                    .site-main .sidebar-left {
+                        transform: translate3d(calc(var(--cool-frame-sidebar-left-width) * -1), 0, 0);
+                    }
+                }
+            }
+
+            @include media-breakpoint-sidebar-right-down() {
+                &.sidebar-right-open {
+                    &:not(:has(.sidebar-right.sidebar-floating)) {
+                        .site-header,
+                        .site-main .content:has(+ .sidebar-right) {
+                            transform: translate3d(calc(var(--cool-frame-sidebar-right-width) * -1), 0, 0);
+                        }
+                    }
+
+                    .site-main .sidebar-right {
+                        transform: translate3d(0px, 0, 0);
+                    }
+                }
+
+                &.sidebar-right-closed {
+                    &:not(:has(.sidebar-right.sidebar-floating)) {
+                        .site-header {
+                            transform: translate3d(0 0, 0);
+                        }
+
+                        .site-main .content:has(+ .sidebar-right) {
+                            transform: translate3d(0 0, 0);
+                            width: 100%;
+                            float: none;
+                        }
+                    }
+
+                    .site-main .sidebar-right {
+                        transform: translate3d(var(--cool-frame-sidebar-right-width), 0, 0);
+                    }
+                }
+            }
+
+            @include media-breakpoint-up(lg) {
+                &.sidebar-left-closed {
+                    &:not(:has(.sidebar-left.sidebar-floating)) {
+                        .site-header {
+                            transform: translate3d(0 0, 0);
+                        }
+
+                        .site-main .sidebar-left + .content {
+                            width: 100%;
+                            margin-left: 0;
+                            float: none;
+                        }
+                    }
+
+                    .site-main .sidebar-left {
+                        transform: translate3d(calc(var(--cool-frame-sidebar-left-width) * -1), 0, 0);
+                    }
+                }
+
+                .site-main .sidebar-left {
+                    transform: translate3d(0px, 0, 0);
+
+                    & + .content {
+                        width: calc(100% - var(--cool-frame-sidebar-left-width));
+                        margin-left: var(--cool-frame-sidebar-left-width);
+                        float: none;
+                    }
+                }
+            }
+
+            @include media-breakpoint-sidebar-right-up() {
+                &.sidebar-right-closed {
+                    &:not(:has(.sidebar-right.sidebar-floating)) {
+                        .site-header {
+                            transform: translate3d(0 0, 0);
+                        }
+
+                        .site-main .content:has(+ .sidebar-right) {
+                            width: 100%;
+                            margin-right: 0;
+                            float: none;
+                        }
+                    }
+
+                    .site-main .sidebar-right {
+                        transform: translate3d(var(--cool-frame-sidebar-right-width), 0, 0);
+                    }
+                }
+
+                .site-main .sidebar-right {
+                    transform: translate3d(0px, 0, 0);
+                }
+
+                &:not(.sidebar-right-closed) .site-main .content:has(+ .sidebar-right) {
+                    width: calc(100% - var(--cool-frame-sidebar-right-width));
+                    margin-right: var(--cool-frame-sidebar-right-width);
+                    float: none;
+                }
+            }
+
+            // Combined logic for when both sidebars are present
+            @include media-breakpoint-up(lg) {
+                &.sidebar-left-closed {
+                    @include media-breakpoint-sidebar-right-up() {
+                        // When left sidebar is closed but right is open
+                        .site-main .sidebar-left + .content:has(+ .sidebar-right) {
+                            width: calc(100% - var(--cool-frame-sidebar-right-width));
+                            margin-left: 0;
+                            margin-right: var(--cool-frame-sidebar-right-width);
+                            float: none;
+                        }
+                    }
+                }
+            }
+
+            @include media-breakpoint-sidebar-right-up() {
+                &.sidebar-right-closed {
+                    @include media-breakpoint-up(lg) {
+                        // When right sidebar is closed but left is open
+                        .site-main .sidebar-left + .content:has(+ .sidebar-right) {
+                            width: calc(100% - var(--cool-frame-sidebar-left-width));
+                            margin-left: var(--cool-frame-sidebar-left-width);
+                            margin-right: 0;
+                            float: none;
+                        }
+                    }
+                }
+
+                // When both sidebars are closed
+                &.sidebar-right-closed {
+                    @include media-breakpoint-up(lg) {
+                        &.sidebar-left-closed {
+                            .site-main .sidebar-left + .content:has(+ .sidebar-right) {
+                                width: 100% !important;
+                                margin-left: 0 !important;
+                                margin-right: 0 !important;
+                                float: none !important;
+                            }
+                        }
+                    }
+                }
+
+                // When both sidebars are present and open
+                &:not(.sidebar-left-closed):not(.sidebar-right-closed) {
+                    @include media-breakpoint-up(lg) {
+                        .site-main .sidebar-left + .content:has(+ .sidebar-right) {
+                            width: calc(
+                                100% - var(--cool-frame-sidebar-left-width) - var(--cool-frame-sidebar-right-width)
+                            );
+                            margin-left: var(--cool-frame-sidebar-left-width);
+                            margin-right: var(--cool-frame-sidebar-right-width);
+                            float: none;
+                        }
+                    }
+                }
+            }
+        }
+
+        .site-header {
+            position: relative;
+            z-index: 1;
+
+            &:has(.navbar) + .site-main {
+                height: calc(100% - var(--cool-navbar-height));
+                border-top-left-radius: var(--cool-navbar-border-radius);
+                margin-top: calc(var(--cool-navbar-border-width) * -1);
+                z-index: 1;
+
+                @include media-breakpoint-down(md) {
+                    height: calc(100% - var(--cool-navbar-height-sm));
+                }
+            }
+
+            @each $breakpoint, $container-max-width in $container-max-widths {
+                @include media-breakpoint-up($breakpoint) {
+                    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+                    &.d#{$infix}-none + .site-main {
+                        height: 100%;
+                    }
+                }
+            }
+        }
+
+        @include media-breakpoint-sidebar-right-up() {
+            body:not(.sidebar-right-closed):has(.sidebar-right) .site-main {
+                border-top-right-radius: var(--cool-navbar-border-radius);
+            }
+        }
+
+        .site-main {
+            position: relative;
+            overflow: hidden;
+            height: 100%;
+            background-color: var(--cool-body-bg);
+
+            .content {
+                position: relative;
+                width: 100%;
+                height: 100%;
+                overflow-x: hidden;
+                overflow-y: auto;
+                float: none;
+                padding: calc(var(--cool-grid-gutter-x) * 2) 0;
+                -webkit-overflow-scrolling: touch;
+
+                .container-content {
+                    &.container-content-fluid {
+                        max-width: 100%;
+                    }
+
+                    &:has(> .h-100) {
+                        height: 100%;
+                    }
+
+                    .content-header {
+                        .content-header-title button[data-toggle="dropdown"] {
+                            font-size: inherit;
+                            font-family: inherit;
+                            font-weight: inherit;
+                            appearance: none;
+                            border: none;
+                            outline: none;
+                            background-color: transparent;
+                            padding: 0;
+                            margin: 0;
+                            width: max-content;
+
+                            &:after {
+                                width: calc(var(--cool-spacer) * 4);
+                                height: calc(var(--cool-spacer) * 4);
+                                padding-left: 0;
+                            }
+
+                            span {
+                                border-bottom: var(--cool-border-width) dashed currentColor;
+                            }
+                        }
+                    }
+
+                    .content-footer {
+                        position: relative;
+                        width: 100%;
+                    }
+                }
+            }
+
+            .sidebar-inset {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+            }
+
+            .sidebar-left {
+                display: flex;
+                flex-direction: column;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                overflow: hidden;
+                transform: translate3d(calc(var(--cool-frame-sidebar-left-width) * -1), 0, 0);
+                width: var(--cool-frame-sidebar-left-width);
+                height: 100%;
+                max-height: 100%;
+                overflow-y: auto;
+                background-color: var(--cool-frame-sidebar-bg-mobile);
+                border-right: var(--cool-frame-sidebar-border-width) solid var(--cool-frame-sidebar-border-color);
+                z-index: auto;
+                padding: var(--cool-frame-sidebar-padding-y) var(--cool-frame-sidebar-padding-x);
+                gap: var(--cool-spacing-4);
+
+                &.sidebar-floating {
+                    border-right: none;
+
+                    @include media-breakpoint-down(md) {
+                        border-top-right-radius: var(--cool-frame-sidebar-floating-border-radius);
+                        border-bottom-right-radius: var(--cool-frame-sidebar-floating-border-radius);
+                    }
+
+                    @include media-breakpoint-up(lg) {
+                        padding: var(--cool-frame-sidebar-floating-padding-y)
+                            var(--cool-frame-sidebar-floating-padding-x);
+                    }
+
+                    .sidebar-inset {
+                        background-color: var(--cool-frame-sidebar-floating-bg);
+                        box-shadow: var(--cool-frame-sidebar-floating-box-shadow);
+
+                        @include media-breakpoint-up(lg) {
+                            border-radius: var(--cool-frame-sidebar-floating-border-radius);
+                            border: var(--cool-frame-sidebar-floating-border-width) solid
+                                var(--cool-frame-sidebar-floating-border-color);
+                        }
+                    }
+                }
+
+                @include media-breakpoint-down(md) {
+                    position: fixed;
+                    right: auto;
+                    visibility: visible;
+                    z-index: calc(var(--cool-zindex-fixed) + 1);
+                }
+
+                @include media-breakpoint-up(lg) {
+                    background-color: var(--cool-frame-sidebar-bg);
+                }
+
+                .sidebar-header {
+                    display: flex;
+                    padding: var(--cool-frame-sidebar-header-padding-y) var(--cool-frame-sidebar-header-padding-x) 0
+                        var(--cool-frame-sidebar-header-padding-x);
+                    z-index: 11;
+                    position: relative;
+                    justify-content: space-between;
+                }
+
+                .sidebar-content {
+                    position: relative;
+                    height: 100%;
+                    z-index: 10;
+                    padding: var(--cool-frame-sidebar-content-padding-y) var(--cool-frame-sidebar-content-padding-x);
+                    display: flex;
+                    flex-direction: column;
+
+                    > * {
+                        flex-shrink: 0;
+                    }
+
+                    .ps__thumb-y {
+                        background-color: rgba(0, 0, 0, 0.5);
+                    }
+
+                    .ps__rail-y:focus > .ps__thumb-y {
+                        background-color: rgba(0, 0, 0, 0.8);
+                    }
+
+                    .collapse,
+                    .collapsing {
+                        width: 100%;
+                    }
+
+                    .nav {
+                        position: relative;
+                        margin: 0;
+                        padding: 0;
+                        list-style: none;
+                        display: grid;
+                        gap: 2px;
+
+                        li {
+                            position: relative;
+                            display: flex;
+                            flex-wrap: wrap;
+                            align-items: center;
+
+                            .nav-additional-action {
+                                padding: 0;
+                                flex: 0 auto;
+                                border: 0;
+                                background: none;
+                                margin: 0;
+                                line-height: calc(var(--cool-spacer) * 3.8);
+                                font-size: var(--cool-frame-sidebar-nav-a-icon-size);
+                                min-width: calc(var(--cool-spacer) * 3.2);
+                                text-align: center;
+                                box-sizing: content-box;
+                                outline: 0;
+
+                                &:hover {
+                                    .icon {
+                                        color: var(--cool-frame-sidebar-nav-a-icon-hover-color);
+                                    }
+                                }
+
+                                .icon {
+                                    color: var(--cool-frame-sidebar-nav-a-icon-color);
+                                }
+                            }
+
+                            &.nav-parent {
+                                .nav {
+                                    gap: 2px;
+
+                                    &:has(.nav-child:nth-child(2)) {
+                                        margin-top: 2px;
+                                    }
+                                }
+
+                                .nav-item-wrapper,
+                                > .nav-item {
+                                    padding: var(--cool-frame-sidebar-nav-item-padding-y)
+                                        var(--cool-frame-sidebar-nav-item-padding-x);
+
+                                    &[disabled] {
+                                        cursor: default;
+                                    }
+
+                                    &:hover,
+                                    &:focus {
+                                        outline: 0;
+                                        background-color: var(--cool-frame-sidebar-nav-item-parent-hover-bg);
+
+                                        .nav-item-title {
+                                            color: var(--cool-frame-sidebar-nav-item-parent-hover-color);
+                                        }
+
+                                        .nav-icon {
+                                            color: var(--cool-frame-sidebar-nav-icon-hover-color);
+                                        }
+                                    }
+
+                                    &[aria-expanded="true"],
+                                    &.active {
+                                        .nav-icon {
+                                            color: var(--cool-frame-sidebar-nav-icon-active-color);
+                                        }
+                                    }
+
+                                    @include media-breakpoint-up(lg) {
+                                        &.active {
+                                            background-color: var(--cool-frame-sidebar-nav-item-parent-active-bg);
+
+                                            .nav-item-title {
+                                                color: var(--cool-frame-sidebar-nav-item-parent-active-color);
+                                            }
+                                        }
+                                    }
+
+                                    .nav-item-title {
+                                        display: block;
+                                        position: relative;
+                                        font-size: var(--cool-frame-sidebar-nav-item-parent-font-size);
+                                        font-weight: var(--cool-frame-sidebar-nav-item-parent-font-weight);
+                                        color: var(--cool-frame-sidebar-nav-item-parent-color);
+                                        line-height: calc(var(--cool-spacer) * 3.8);
+                                        align-self: center;
+                                        text-align: left;
+                                        width: 100%;
+                                    }
+
+                                    .nav-icon {
+                                        align-self: center;
+                                        float: left;
+                                        text-align: center;
+                                        line-height: calc(var(--cool-spacer) * 3.8);
+                                        font-size: var(--cool-frame-sidebar-nav-icon-size);
+                                        margin: 0 auto;
+                                        color: var(--cool-frame-sidebar-nav-icon-color);
+                                        min-width: calc(var(--cool-spacer) * 3.2);
+
+                                        & + span {
+                                            margin-left: calc(var(--cool-spacer) * 1.6);
+                                        }
+                                    }
+
+                                    @include media-breakpoint-up(lg) {
+                                        &[data-collapse-container] ~ div,
+                                        &[data-toggle="collapse"] ~ div {
+                                            .nav {
+                                                .nav-child:first-child {
+                                                    display: none;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+
+                                .nav-item-wrapper > .nav-item {
+                                    &[aria-expanded="true"],
+                                    &.active {
+                                        .nav-icon {
+                                            color: var(--cool-frame-sidebar-nav-icon-active-color);
+                                        }
+                                    }
+                                }
+                            }
+
+                            > .nav-item-wrapper {
+                                display: flex;
+                                align-items: center;
+
+                                .nav-item {
+                                    padding: 0;
+                                    flex: 1;
+                                }
+                            }
+
+                            .nav-item-wrapper,
+                            .nav-item {
+                                position: relative;
+                                align-items: center;
+                                display: inline-flex;
+                                flex: 1 0;
+                                cursor: pointer;
+                                padding: var(--cool-frame-sidebar-nav-item-child-padding-y)
+                                    var(--cool-frame-sidebar-nav-item-child-padding-x);
+                                margin: 0;
+                                border: 0;
+                                background: none;
+                                font-family: var(--cool-frame-sidebar-nav-font-family);
+                                outline: 0;
+                                word-break: break-all;
+                                border-radius: var(--cool-border-radius);
+
+                                .nav-item-title {
+                                    color: var(--cool-frame-sidebar-nav-item-child-color);
+                                }
+
+                                &:hover,
+                                &:focus {
+                                    outline: 0;
+                                    background-color: var(--cool-frame-sidebar-nav-item-child-hover-bg);
+
+                                    .nav-item-title {
+                                        color: var(--cool-frame-sidebar-nav-item-child-hover-color);
+                                    }
+                                }
+                            }
+
+                            li {
+                                &.divider {
+                                    margin-left: calc(var(--cool-spacer) * 7.2);
+                                    margin-right: calc(var(--cool-spacer) * 4);
+                                    border-bottom: var(--cool-border-width) solid
+                                        var(--cool-frame-sidebar-nav-item-border-color);
+                                }
+
+                                > .nav-item {
+                                    padding-left: calc(var(--cool-spacer) * 7.2);
+
+                                    &.active {
+                                        outline: 0;
+                                        background-color: var(--cool-frame-sidebar-nav-item-child-active-bg);
+                                        font-weight: var(--cool-frame-sidebar-nav-item-child-font-weight);
+
+                                        .nav-item-title {
+                                            color: var(--cool-frame-sidebar-nav-item-child-active-color);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    > .nav {
+                        padding: var(--cool-frame-sidebar-sub-nav-padding-y) var(--cool-frame-sidebar-sub-nav-padding-x);
+                    }
+                }
+
+                .sidebar-footer {
+                    display: grid;
+                    gap: 2px;
+                    padding: var(--cool-frame-sidebar-footer-padding-y) var(--cool-frame-sidebar-footer-padding-x);
+
+                    .footer-item {
+                        display: flex;
+                        gap: var(--cool-spacing-1);
+                        padding: calc(var(--cool-spacer) * 1.6) var(--cool-spacing-2);
+                        align-items: center;
+                        border-radius: var(--cool-border-radius);
+                        appearance: none;
+                        -webkit-appearance: none;
+                        border: none;
+                        outline: none;
+                        box-shadow: none;
+                        text-align: left;
+                        background-color: var(--cool-frame-sidebar-footer-item-bg, transparent);
+                        cursor: pointer;
+
+                        &:hover {
+                            background-color: var(
+                                --cool-frame-sidebar-footer-item-hover-bg,
+                                var(--cool-frame-sidebar-nav-item-parent-hover-bg)
+                            );
+                        }
+
+                        @each $color, $value in $theme-bg-colors {
+                            &.footer-item-#{$color} {
+                                --cool-frame-sidebar-footer-item-bg: var(--cool-theme-bg-color-#{$color});
+                                --cool-frame-sidebar-footer-item-hover-bg: color-mix(
+                                    in srgb,
+                                    var(--cool-theme-bg-color-#{$color}),
+                                    white 10%
+                                );
+                                --cool-frame-sidebar-footer-item-title-color: var(
+                                    --cool-theme-foreground-color-#{$color}
+                                );
+                                --cool-frame-sidebar-footer-item-icon-bg: color-mix(
+                                    in srgb,
+                                    var(--cool-theme-bg-color-#{$color}),
+                                    white 10%
+                                );
+                                --cool-frame-sidebar-footer-item-icon-color: var(
+                                    --cool-theme-foreground-color-#{$color}
+                                );
+                            }
+                        }
+
+                        .icon-container {
+                            aspect-ratio: 1/1;
+                            flex-shrink: 0;
+                            flex-grow: 0;
+                            width: calc(var(--cool-spacer) * 4);
+                            border-radius: 50%;
+                            overflow: hidden;
+                            color: var(--cool-frame-sidebar-footer-item-icon-color, white);
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+
+                            &.icon-container-bg {
+                                background-color: var(
+                                    --cool-frame-sidebar-footer-item-icon-bg,
+                                    var(--cool-theme-color-medium)
+                                );
+
+                                .icon {
+                                    font-size: calc(var(--cool-spacer) * 2);
+                                }
+                            }
+                        }
+
+                        .title {
+                            flex: 1;
+                            font-size: var(--cool-font-size-sm);
+                            color: var(--cool-frame-sidebar-footer-item-title-color, var(--cool-theme-color-dark));
+                            font-weight: var(--cool-font-weight-bold);
+                        }
+                    }
+                }
+
+                .sidebar-spacer {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                }
+            }
+
+            .sidebar-right {
+                display: flex;
+                flex-direction: column;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: 0;
+                transform: translate3d(var(--cool-frame-sidebar-right-width), 0, 0);
+                width: var(--cool-frame-sidebar-right-width);
+                height: 100%;
+                max-height: 100%;
+                // background-color: var(--cool-frame-sidebar-bg-mobile);
+                border-left: var(--cool-frame-sidebar-border-width) solid var(--cool-frame-sidebar-border-color);
+                z-index: auto;
+                padding: var(--cool-frame-sidebar-padding-y) var(--cool-frame-sidebar-padding-x);
+                gap: var(--cool-spacing-4);
+                max-width: 95vw;
+
+                &.sidebar-floating {
+                    border-left: none;
+
+                    @include media-breakpoint-down(md) {
+                        border-top-left-radius: var(--cool-frame-sidebar-floating-border-radius);
+                        border-bottom-left-radius: var(--cool-frame-sidebar-floating-border-radius);
+                    }
+
+                    @include media-breakpoint-sidebar-right-up() {
+                        padding: var(--cool-frame-sidebar-floating-padding-y)
+                            var(--cool-frame-sidebar-floating-padding-x);
+                    }
+
+                    .sidebar-inset {
+                        background-color: var(--cool-frame-sidebar-floating-bg);
+                        box-shadow: var(--cool-frame-sidebar-floating-box-shadow);
+
+                        @include media-breakpoint-sidebar-right-up() {
+                            border-radius: var(--cool-frame-sidebar-floating-border-radius);
+                            border: var(--cool-frame-sidebar-floating-border-width) solid
+                                var(--cool-frame-sidebar-floating-border-color);
+                        }
+                    }
+                }
+
+                @include media-breakpoint-sidebar-right-down() {
+                    position: fixed;
+                    left: auto;
+                    visibility: visible;
+                    z-index: calc(var(--cool-zindex-fixed) + 1);
+                }
+
+                @include media-breakpoint-sidebar-right-up() {
+                    background-color: var(--cool-frame-sidebar-bg);
+                }
+
+                .sidebar-header {
+                    display: flex;
+                    padding: var(--cool-frame-sidebar-header-padding-y) var(--cool-frame-sidebar-header-padding-x) 0
+                        var(--cool-frame-sidebar-header-padding-x);
+                    z-index: 11;
+                    position: relative;
+                    justify-content: space-between;
+                }
+
+                .sidebar-content {
+                    position: relative;
+                    height: 100%;
+                    z-index: 10;
+                    padding: var(--cool-frame-sidebar-content-padding-y) var(--cool-frame-sidebar-content-padding-x);
+                    display: flex;
+                    flex-direction: column;
+
+                    > * {
+                        flex-shrink: 0;
+                    }
+
+                    .ps__thumb-y {
+                        background-color: rgba(255, 255, 255, 0.5);
+                    }
+
+                    .ps__rail-y:focus > .ps__thumb-y {
+                        background-color: rgba(255, 255, 255, 0.8);
+                    }
+                }
+
+                .sidebar-spacer {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                }
+            }
+
+            .sidebar-backdrop {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.5);
+                z-index: var(--cool-zindex-fixed);
+                opacity: 0;
+                visibility: hidden;
+                transition: opacity 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
+
+                &.show {
+                    opacity: 1;
+                    visibility: visible;
+                }
+            }
+
+            @include media-breakpoint-up(lg) {
+                &.compressed {
+                    .content {
+                        .container-content {
+                            padding-left: calc(var(--cool-spacer) * 2);
+                        }
+                    }
+
+                    .sidebar-left {
+                        .sidebar-content {
+                            padding: calc(var(--cool-spacer) * 4) var(--cool-spacer) calc(var(--cool-spacer) * 6)
+                                calc(var(--cool-spacer) * 3);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
 
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-frame;
+    }
 } @else {
-	.container-content {
-		margin-top: 30px;
-
-		.content-header {
-			position: relative;
-			width: 100%;
-			margin: 0 0 spacer(4);
-
-			& + .content-inner {
-				margin-top: 0;
-			}
-
-			@include media-breakpoint-up(lg) {
-				margin: 0 0 spacer(4);
-			}
-
-			.breadcrumbs {
-				font-family: $font-family-title;
-				font-weight: 500;
-			}
-
-			.content-header-title {
-				font-size: $h4-font-size;
-				margin-bottom: 0;
-				font-family: $font-family-title;
-				font-weight: 600;
-				word-break: break-all;
-
-				@include media-breakpoint-up(sm) {
-					font-size: $h3-font-size;
-				}
-			}
-
-			.content-header-primary-action {
-				.btn {
-					@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
-
-					@include media-breakpoint-up(sm) {
-						@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-					}
-				}
-			}
-
-			.content-header-helper-actions {
-				margin-top: 10px;
-			}
-
-			.content-header-secondary-actions {
-				font-size: 0;
-
-				&.has-content {
-					margin: 20px (-$btn-padding-x-sm - 2px);
-				}
-
-				.btn {
-					@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-				}
-			}
-		}
-	}
+    @include cool-frame;
+}
+
+/* Frame overrides for components/utilities ========================================================================== */
+@layer app {
+    html:has(.site-main) {
+        .site-main {
+            .sidebar-left {
+                .sidebar-content {
+                    .nav {
+                        li {
+                            [data-collapse-indicator] {
+                                width: calc(var(--cool-spacer) * 4.2);
+
+                                @include media-breakpoint-up(lg) {
+                                    display: none;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }