zhibo/node_modules/ele-admin/es/ele-pro-layout/style/layout-style.scss

@import '../../style/themes/default.scss';

/* 固定顶栏 */
.ele-admin-fixed-header:not(.ele-admin-fixed-body) {
  padding-top: $--header-height;

  .ele-admin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  &.ele-admin-show-tabs .ele-admin-body {
    padding-top: $--tabs-height;
  }

  .ele-admin-tabs {
    position: fixed;
    left: 0;
    right: 0;
    top: $--header-height;
    transition: left $--sidebar-transition-anim;
  }

  .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
    left: $--sidebar-width;
  }

  &.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
    left: $--sidebar-collapse-width;
  }

  &:not(.ele-admin-fixed-sidebar) {
    .ele-admin-sidebar,
    .ele-admin-sidebar-nav {
      z-index: calc(#{$--layout-z-index} + 1);
    }

    &:not(.ele-admin-logo-auto):not(.ele-admin-side-dark) {
      .ele-admin-logo {
        box-shadow: 0 -1px 0 $--border-color-extra-light inset;
      }

      &.ele-admin-head-dark .ele-admin-logo,
      &.ele-admin-tab-card .ele-admin-logo,
      &:not(.ele-admin-show-tabs) .ele-admin-logo {
        box-shadow: none;
      }
    }
  }

  &.ele-admin-side-mix {
    .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
      left: calc(
        #{$--sidebar-width} - #{$--sidebar-collapse-width} + #{$--sidebar-nav-width}
      );
    }

    .ele-admin-sidebar-nav + .ele-admin-body .ele-admin-tabs {
      left: $--sidebar-nav-width;
    }

    &.ele-admin-nav-collapse {
      .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
        left: $--sidebar-width;
      }

      .ele-admin-sidebar-nav + .ele-admin-body .ele-admin-tabs {
        left: $--sidebar-collapse-width;
      }
    }

    &.ele-admin-collapse {
      .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
        left: $--sidebar-nav-width;
      }

      &.ele-admin-nav-collapse .ele-admin-sidebar + .ele-admin-body {
        .ele-admin-tabs {
          left: $--sidebar-collapse-width;
        }
      }
    }
  }
}

/* 固定侧栏 */
.ele-admin-fixed-sidebar:not(.ele-admin-fixed-body) {
  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    top: $--header-height;
  }

  &:not(.ele-admin-fixed-header):not(.ele-admin-logo-auto) .ele-admin-logo {
    position: fixed;
    top: 0;
    left: 0;
  }

  &.ele-admin-logo-auto:not(.ele-admin-fixed-header) {
    .ele-admin-sidebar-nav,
    &:not(.ele-admin-side-mix) .ele-admin-sidebar {
      top: 0;
      z-index: calc(#{$--layout-z-index} + 3);
    }
  }

  .ele-admin-body {
    width: 100%;
  }

  .ele-admin-header,
  .ele-admin-sidebar + .ele-admin-body,
  .ele-admin-sidebar-nav + .ele-admin-body {
    padding-left: $--sidebar-width;
    transition: padding-left $--sidebar-transition-anim,
      box-shadow $--sidebar-transition-anim;
  }

  &.ele-admin-collapse {
    .ele-admin-sidebar + .ele-admin-body,
    &:not(.ele-admin-fixed-header):not(.ele-admin-side-mix) .ele-admin-header {
      padding-left: $--sidebar-collapse-width;
    }
  }

  &.ele-admin-side-mix {
    &.ele-admin-collapse .ele-admin-body {
      width: 100%;
    }

    .ele-admin-sidebar {
      left: $--sidebar-nav-width;
    }

    .ele-admin-header,
    .ele-admin-sidebar + .ele-admin-body,
    .ele-admin-sidebar-nav + .ele-admin-body {
      padding-left: $--sidebar-nav-width;
    }

    &:not(.ele-admin-fixed-header) .ele-admin-sidebar {
      position: relative;
      top: auto;
    }

    &.ele-admin-nav-collapse {
      .ele-admin-body {
        width: 100%;
      }

      .ele-admin-header,
      .ele-admin-sidebar + .ele-admin-body,
      .ele-admin-sidebar-nav + .ele-admin-body {
        padding-left: $--sidebar-collapse-width;
      }

      .ele-admin-sidebar {
        left: $--sidebar-collapse-width;
      }
    }
  }

  &.ele-admin-fixed-header {
    .ele-admin-header {
      padding-left: 0;
    }

    &.ele-admin-side-mix {
      .ele-admin-sidebar + .ele-admin-body {
        padding-left: calc(
          #{$--sidebar-width} - #{$--sidebar-collapse-width} + #{$--sidebar-nav-width}
        );
      }

      &.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body {
        padding-left: $--sidebar-nav-width;
      }

      &.ele-admin-nav-collapse {
        .ele-admin-header {
          padding-left: 0;
        }

        .ele-admin-sidebar {
          left: $--sidebar-collapse-width;
        }

        .ele-admin-sidebar + .ele-admin-body {
          padding-left: $--sidebar-width;
        }

        &.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body {
          padding-left: $--sidebar-collapse-width;
        }
      }
    }
  }
}

/* 固定主体 */
.ele-admin-fixed-body {
  .ele-admin-content {
    height: calc(100vh - #{$--header-height});
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    height: calc(100vh - #{$--header-height});
  }

  &.ele-admin-show-tabs {
    .ele-admin-content {
      height: calc(100vh - #{$--header-height} - #{$--tabs-height});
    }

    &.ele-admin-tab-card .ele-admin-content {
      height: calc(
        100vh - #{$--header-height} - #{$--tabs-height} - #{$--tabs-card-padding}
      );
    }
  }
}

/* 全屏内容区域 */
.ele-admin-body-fullscreen {
  padding-top: 0 !important;

  .ele-admin-header,
  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    display: none;
  }

  .ele-admin-body {
    min-height: 100vh;
    padding-left: 0 !important;
    width: 100% !important;
  }

  .ele-admin-tabs {
    left: 0 !important;
    top: 0 !important;
  }

  &.ele-admin-fixed-body {
    .ele-admin-content {
      height: 100vh !important;
    }

    &.ele-admin-show-tabs:not(.ele-admin-content-fullscreen) {
      .ele-admin-content {
        height: calc(100vh - #{$--tabs-height}) !important;
      }

      &.ele-admin-tab-card .ele-admin-content {
        height: calc(
          100vh - #{$--tabs-height} - #{$--tabs-card-padding}
        ) !important;
      }
    }
  }

  &.ele-admin-content-fullscreen {
    .ele-admin-body {
      padding-top: 0 !important;
    }

    .ele-admin-tabs {
      display: none;
    }
  }
}

/* 主体内容定宽 */
.ele-admin-body-limit .ele-body {
  max-width: $--body-limit-width;
  margin: 0 auto;
}

/* logo 宽度自适应 */
.ele-admin-logo-auto.ele-admin-layout {
  .ele-admin-logo {
    width: auto;
    padding: 0 12px 0 24px;
    color: $--logo-light-color;
    background: none;
    box-shadow: none;
    transition: none;

    & > span {
      display: inline;
    }

    & + .ele-admin-header-nav {
      margin-left: 12px;
    }
  }

  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    z-index: calc(#{$--layout-z-index} + 1);
  }

  &.ele-admin-head-dark .ele-admin-logo {
    color: $--logo-dark-color;
  }
}