home
/
forge
/
roadtovirtuosity.com
/
public
/
assets
/
_scss
/
codebase
➕ New
📤 Upload
✎ Editing:
_layout-variations.scss
← Back
// // Layout Variations // -------------------------------------------------- #page-container { // Main content > #page-header .content-header, > #page-header .content, > #main-container .content, > #page-footer .content { max-width: $space-main-max-width; } @include media-breakpoint-up(xl) { &.main-content-narrow { > #page-header .content-header, > #page-header .content, > #main-container .content, > #page-footer .content { width: $space-narrow; } } } &.main-content-boxed { > #page-header .content-header, > #page-header .content, > #main-container .content, > #page-footer .content { max-width: $space-boxed; } } // Page header related @include media-breakpoint-up(lg) { &.page-header-modern #page-header { background-color: $body-bg; box-shadow: none !important; > .content-header { padding-top: 1.25rem; } } } &.page-header-dark #page-header { color: darken($body-color-light, 8%); background-color: $header-dark-bg; } &.page-header-glass { #page-header { position: absolute; background-color: transparent; } &.page-header-fixed { #page-header { transition: background-color .2s linear; will-change: background-color; box-shadow: none; } &.page-header-scroll #page-header { background-color: $header-bg; box-shadow: 0 5px 10px rgba(0,0,0,.02); } &.page-header-scroll.page-header-dark #page-header { background-color: $header-dark-bg; box-shadow: none; } } #main-container, &.page-header-fixed #main-container { padding-top: 0; } } &.page-header-fixed { #page-header { position: fixed; box-shadow: 0 .25rem .625rem rgba($black, .02); } &.page-header-dark #page-header { box-shadow: none; } #main-container { padding-top: $header-height; } } &.page-header-fixed, &.page-header-glass { #page-header { top: 0; right: 0; left: 0; z-index: $zindex-fixed; min-width: 320px; max-width: 100%; width: auto; } @include media-breakpoint-up(lg) { &.sidebar-o #page-header { padding-left: $sidebar-width; .overlay-header { left: $sidebar-width; } } &.sidebar-r.sidebar-o #page-header { padding-right: $sidebar-width; padding-left: 0; .overlay-header { right: $sidebar-width; left: 0; } } // Mini Sidebar &.sidebar-mini.sidebar-o #page-header { padding-left: $sidebar-mini-width; .overlay-header { left: $sidebar-mini-width; } } &.sidebar-mini.sidebar-r.sidebar-o #page-header { padding-right: $sidebar-mini-width; padding-left: 0; .overlay-header { right: $sidebar-mini-width; left: 0; } } } } // Sidebar and Side Overlay @include media-breakpoint-up(lg) { &.page-header-modern:not(.sidebar-dark) #sidebar { box-shadow: .25rem 0 .625rem $body-bg-dark; } &.page-header-modern.sidebar-r:not(.sidebar-dark) #sidebar { box-shadow: -.25rem 0 .625rem $body-bg-dark; } } &.sidebar-dark #sidebar { color: $body-color-light; background-color: $sidebar-dark-bg; box-shadow: none; } // Side Scroll &.side-scroll { #sidebar .js-sidebar-scroll, #side-overlay { overflow-y: visible; } @include media-breakpoint-up(lg) { #sidebar { .content-header, .content-side { width: $sidebar-width !important; } } #side-overlay { .content-header, .content-side { width: $side-overlay-width !important; } } } } @include media-breakpoint-up(lg) { &.sidebar-o { padding-left: $sidebar-width; } &.sidebar-r.sidebar-o { padding-right: $sidebar-width; padding-left: 0; } // Mini Sidebar &.sidebar-mini.sidebar-o { padding-left: $sidebar-mini-width; } &.sidebar-mini.sidebar-o.sidebar-r { padding-right: $sidebar-mini-width; padding-left: 0; } &.sidebar-mini.sidebar-o #sidebar:not(:hover) .content-header { width: $sidebar-mini-width !important; margin-left: 0; } } }
💾 Save Changes
Cancel
📤 Upload File
×
Select File
Upload
Cancel
➕ Create New
×
Type
📄 File
📁 Folder
Name
Create
Cancel
✎ Rename Item
×
Current Name
New Name
Rename
Cancel
🔐 Change Permissions
×
Target File
Permission (e.g., 0755, 0644)
0755
0644
0777
Apply
Cancel