naive-ui/styles/Layout.scss

@import './mixins/mixins.scss';

@include themes-mixin {
  @include b(layout) {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    transition: margin-left .3s $default-cubic-bezier;
    flex-direction: column;
    overflow: auto;
    @include m(has-sider) {
      flex-direction: row;
      & > {
        @include b(layout) {
          flex: 1;
        }
      }
    }
    @include m(absolute-positioned) {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
  @include b(layout-header) {
    box-sizing: border-box;
    width: 100%;
    background-color: $--n-card-color;
    @include m(absolute-positioned) {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
    }
    @include m(bordered) {
      border-bottom: solid 1px $--n-divider-color;
    }
  }
  @include b(layout-content) {
    box-sizing: border-box;
    position: relative;
    transition: margin-left .3s $default-cubic-bezier;
  }
  @include b(layout-footer) {
    box-sizing: border-box;
    @include m(bordered) {
      border-top: solid 1px $--n-divider-color;
    }
    @include m(absolute-positioned) {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
  @include b(layout-sider) {
    box-sizing: border-box;
    position: relative;
    background-color: $--n-card-color;
    transition: min-width .3s  $default-cubic-bezier, max-width .3s $default-cubic-bezier, transform .3s $default-cubic-bezier;
    @include e(toggle-button) {
      z-index: 1;
      transition: transform .3s $default-cubic-bezier;
      cursor: pointer;
      width: 36px;
      height: 36px;
      path {
        transition: fill .3s $default-cubic-bezier;
        fill: $service-layout-toggle-button-color;
      }
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateX(50%) translateY(-50%);
    }
    @include e(content) {
      opacity: 0;
      transition: opacity .3s $default-cubic-bezier,;
    }
    @include m(show-content) {
      @include e(content) {
        opacity: 1;
      }
    }
    @include m(bordered) {
      border-right: solid 1px $--n-divider-color;
    }
    @include m(collapsed) {
      @include e(toggle-button) {
        transform: translateX(50%) translateY(-50%) rotate(180deg);
      }
    }
    @include m(absolute-positioned) {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
    }
  }
}