Admin Control Panel v2.0

✎ 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;
    }
  }
}

Cancel