164 lines
3.4 KiB
SCSS
Executable File
Vendored
164 lines
3.4 KiB
SCSS
Executable File
Vendored
//
|
|
// _layouts.scss
|
|
//
|
|
|
|
[data-layout-width="boxed"] {
|
|
body {
|
|
background-color: $boxed-body-bg;
|
|
}
|
|
|
|
#layout-wrapper {
|
|
max-width: $boxed-layout-width;
|
|
margin: 0 auto;
|
|
box-shadow: $box-shadow;
|
|
background-color: var(--#{$prefix}body-bg);
|
|
}
|
|
|
|
&[data-layout="vertical"] {
|
|
#layout-wrapper {
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
#page-topbar,
|
|
.footer {
|
|
max-width: $boxed-layout-width;
|
|
margin: 0 auto;
|
|
left: 0 !important;
|
|
}
|
|
|
|
&[data-sidebar-size="sm-hover"],
|
|
&[data-sidebar-size="sm"] {
|
|
&[data-layout="vertical"] {
|
|
@media (min-width: 768px) {
|
|
#layout-wrapper {
|
|
min-height: 1400px;
|
|
}
|
|
}
|
|
|
|
.main-content {
|
|
@media (max-width: 767.98px) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#page-topbar,
|
|
.footer {
|
|
left: 0 !important;
|
|
max-width: calc(#{$boxed-layout-width} - #{$vertical-menu-width-sm});
|
|
|
|
@media (min-width: 768px) {
|
|
left: $vertical-menu-width-sm !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-sidebar-size="sm-hover-active"],
|
|
&[data-sidebar-size="lg"] {
|
|
|
|
#page-topbar,
|
|
.footer {
|
|
max-width: calc(#{$boxed-layout-width} - #{$vertical-menu-width});
|
|
|
|
@media (min-width: 768px) {
|
|
left: $vertical-menu-width !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-sidebar-size="md"] {
|
|
|
|
#page-topbar,
|
|
.footer {
|
|
max-width: calc(#{$boxed-layout-width} - #{$vertical-menu-width-md});
|
|
|
|
@media (min-width: 768px) {
|
|
left: $vertical-menu-width-md !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// deteched
|
|
|
|
&[data-layout=vertical][data-layout-style=detached] {
|
|
body {
|
|
background-color: var(--#{$prefix}body-bg);
|
|
}
|
|
|
|
@media (min-width: 1024.1px) {
|
|
#layout-wrapper {
|
|
max-width: 1300px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.layout-width {
|
|
max-width: 1300px;
|
|
}
|
|
}
|
|
|
|
&[data-sidebar-size="sm-hover"],
|
|
&[data-sidebar-size="sm"],
|
|
&[data-sidebar-size="md"],
|
|
&[data-sidebar-size="lg"] {
|
|
|
|
#page-topbar,
|
|
.footer {
|
|
max-width: 100%;
|
|
left: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Horizontal Boxed Layout
|
|
|
|
[data-layout="horizontal"][data-layout-width="boxed"] {
|
|
|
|
#page-topbar,
|
|
#layout-wrapper,
|
|
.footer {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.container-fluid,
|
|
.navbar-header {
|
|
max-width: $boxed-layout-width;
|
|
}
|
|
|
|
.navbar-header {
|
|
padding: 0 calc(#{$grid-gutter-width} / 2) 0 0;
|
|
}
|
|
|
|
&[data-sidebar-size="sm-hover"],
|
|
&[data-sidebar-size="sm"] &[data-sidebar-size="sm-hover-active"],
|
|
&[data-sidebar-size="lg"] {
|
|
|
|
#page-topbar,
|
|
.footer {
|
|
left: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Scrollable layout
|
|
|
|
[data-layout-position="scrollable"] {
|
|
@media (min-width: 992px) {
|
|
|
|
#page-topbar,
|
|
.navbar-menu {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
&[data-layout="horizontal"] {
|
|
@media (min-width: 992px) {
|
|
|
|
#page-topbar,
|
|
.topnav {
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
} |