AdminLTE/build/scss/_layout.scss
REJack 42568b9b8d
Road to v3.0.0-beta.1
- replaced slimScroll to overlayScrollbars
- added new layout types (fixed, navbar-fixed & footer-fixed)
- changed old default layout from "fixed" to non-fixed
- enhanced PushMenu.js to load options via data
- enhanced Layout.js new layout calcs, options via data for scrollbar
- fixed forms fontawesome icons
- added warning-feedback (without icon)
- added sidebar-mini-md
- updated index to use layout-fixed
- updated index2 to use layout-fixed, layout-navbar-fixed & layout-footer-fixed
2019-06-05 13:34:15 +02:00

233 lines
3.5 KiB
SCSS

/*
* Core: General Layout Style
* -------------------------
*/
html,
body,
.wrapper {
min-height: 100%;
overflow-x: hidden;
}
.wrapper {
overflow: hidden;
position: relative;
& .content-wrapper {
min-height: calc(100vh - 112px);
}
.layout-boxed & {
@include box-shadow(0 0 10px rgba(0, 0, 0, .3));
&,
&:before {
margin: 0 auto;
max-width: $boxed-layout-max-width;
}
& .main-sidebar {
left: inherit;
}
}
.layout-navbar-fixed & {
.content-wrapper {
margin-top: 57px;
}
.main-header {
position: fixed;
top: 0;
right: 0;
left: 0;
}
}
.layout-footer-fixed & {
.main-footer {
position: fixed;
bottom: 0;
width: calc(100% - 250px);
}
}
.layout-top-nav & {
margin-left: 0;
& .main-sidebar {
bottom: inherit;
height: inherit;
}
.brand-image {
height: 33px;
}
& .main-sidebar{
display: none;
}
& .content-wrapper,
& .main-header,
& .main-footer {
margin-left: 0;
}
}
}
.content-wrapper,
.main-footer,
.main-header {
@include media-breakpoint-up(sm) {
@include transition(margin-left $transition-speed $transition-fn);
margin-left: $sidebar-width;
z-index: 3000;
.sidebar-collapse & {
margin-left: 0;
}
}
@include media-breakpoint-down(sm) {
&,
&:before {
margin-left: 0;
}
}
}
.content-wrapper {
background: $main-bg;
> .content {
padding: $content-padding-y $content-padding-x;
}
}
.main-sidebar {
&,
&:before {
$local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
@include transition($local-sidebar-transition);
width: $sidebar-width;
}
.sidebar-collapse & {
&,
&:before {
margin-left: -$sidebar-width;
}
}
@include media-breakpoint-down(sm) {
&,
&:before {
box-shadow: none!important;
margin-left: -$sidebar-width;
}
.sidebar-open & {
&,
&:before {
margin-left: 0;
}
}
}
}
:not(.layout-fixed) {
.main-sidebar {
position: absolute;
top: 0;
height: inherit;
min-height: 100%;
}
}
.layout-navbar-fixed {
&.sidebar-collapse {
.brand-link {
$local-sidebar-transition: width $transition-speed $transition-fn;
@include transition($local-sidebar-transition);
width: $sidebar-mini-width;
height: 57px;
}
.main-sidebar:hover {
.brand-link {
width: $sidebar-width;
}
}
}
.sidebar {
margin-top: 57px;
}
.brand-link {
position: fixed;
top: 0;
z-index: $zindex-main-sidebar;
width: $sidebar-width;
}
// Sidebar variants
@each $name, $color in $theme-colors {
.sidebar-dark-#{$name} .brand-link {
background-color: $sidebar-dark-bg;
}
.sidebar-light-#{$name} .brand-link {
background-color: $sidebar-light-bg;
}
}
}
.layout-fixed {
.main-sidebar {
height: 100vh;
position: fixed;
top: 0;
left: 0;
bottom: 0;
float: none;
}
}
.main-footer {
padding: $main-footer-padding;
color: #555;
border-top: $main-footer-border-top;
background: $main-footer-bg;
}
.content-header {
padding: 15px $content-padding-x;
h1 {
font-size: 1.8rem;
margin: 0;
}
.breadcrumb {
margin-bottom: 0;
padding: 0;
background: transparent;
line-height: 1.8rem;
}
}
.hold-transition {
.content-wrapper,
.main-header,
.main-footer {
transition: none!important;
}
}