MyX/resources/sass/dashmix/_layout-variations.scss

//
// 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
  &.page-header-dark #page-header,
  html.dark & #page-header {
    color: darken($body-color-light, 8%);
    background-color: $header-dark-bg;
  }

  &.page-header-glass {
    #page-header {
      position: absolute;
      background-color: transparent;
    }

    html.dark & #page-header {
      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: rgba($header-bg, .9);
        box-shadow: 0 .25rem .625rem rgba(0,0,0,.02);
        backdrop-filter: blur(1rem);
      }

      &.page-header-scroll.page-header-dark #page-header,
      html.dark &.page-header-scroll #page-header {
        background-color: rgba($header-dark-bg, .9);
        box-shadow: none;
        backdrop-filter: blur(1rem);
      }
    }

    #main-container,
    &.page-header-fixed #main-container {
      padding-top: 0;
    }
  }

  &.page-header-fixed {
    #page-header {
      position: fixed;
      box-shadow: 0 5px 10px rgba(0,0,0,.02);
    }

    &.page-header-dark #page-header,
    html.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;
        }
      }
    }
  }

  // Page Footer
  &.page-footer-fixed {
    #page-footer {
      position: fixed;
      height: $footer-height;
    }

    #main-container {
      padding-bottom: $footer-height;
    }

    #page-footer {
      bottom: 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-footer {
        padding-left: $sidebar-width;
      }

      &.sidebar-r.sidebar-o #page-footer {
        padding-right: $sidebar-width;
        padding-left: 0;
      }
    }
  }

  // Sidebar and Side Overlay
  &.sidebar-dark #sidebar,
  html.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;
        }
      }

      #sidebar.with-mini-nav {
        .content-header,
        .content-side {
          width: $sidebar-width - $sidebar-mini-nav-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;
    }
  }
}