naive-ui/styles/Layout.scss

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

@include themes-mixin {
  @include b(layout) {
    color: $--layout-text-color;
    background-color: $--layout-background-color;
    @include once {
      box-sizing: border-box;
      position: relative;
      z-index: auto;
      display: flex;
      flex-wrap: nowrap;
      transition:
        margin-left .3s $--n-ease-in-out-cubic-bezier,
        background-color .3s $--n-ease-in-out-cubic-bezier,
        color .3s $--n-ease-in-out-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-sider) {
          z-index: 1;
        }
      }
    }
  }
  @include b(layout-header) {
    @include once {
      transition:
        background-color .3s $--n-ease-in-out-cubic-bezier,
        border-color .3s $--n-ease-in-out-cubic-bezier;
      box-sizing: border-box;
      width: 100%;
      @include m(absolute-positioned) {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
      }
    }
    background-color: $--layout-header-background-color;
    @include m(bordered) {
      border-bottom: solid 1px $--layout-header-border-color;
    }
  }
  @include b(layout-content) {
    @include once {
      box-sizing: border-box;
      z-index: auto;
      position: relative;
    }
    transition:
      margin-left .3s $--n-ease-in-out-cubic-bezier,
      background-color .3s $--n-ease-in-out-cubic-bezier,
      color .3s $--n-ease-in-out-cubic-bezier;
  }
  @include b(layout-footer) {
    @include once {
      transition:
        background-color .3s $--n-ease-in-out-cubic-bezier,
        border-color .3s $--n-ease-in-out-cubic-bezier;
      box-sizing: border-box;
      @include m(absolute-positioned) {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
    @include m(bordered) {
      border-top: solid 1px $--layout-footer-border-color;
    }
  }
  @include b(layout-sider) {
    @include once {
      box-sizing: border-box;
      z-index: auto;
      position: relative;
      transition:
        min-width .3s  $--n-ease-in-out-cubic-bezier,
        max-width .3s $--n-ease-in-out-cubic-bezier,
        transform .3s $--n-ease-in-out-cubic-bezier,
        background-color .3s $--n-ease-in-out-cubic-bezier,
        border-color .3s $--n-ease-in-out-cubic-bezier;
    }  
    background-color: $--layout-sider-background-color;
    @include e(toggle-button) {
      @include once {
        z-index: 1;
        transition:
          transform .3s $--n-ease-in-out-cubic-bezier,
          fill .3s $--n-ease-in-out-cubic-bezier;
        cursor: pointer;
        width: 36px;
        height: 36px;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateX(50%) translateY(-50%);
      }
      fill: $--layout-sider-toggle-button-fill;
    }
    @include once {
      @include e(content) {
        opacity: 0;
        transition: opacity .3s $--n-ease-in-out-cubic-bezier;
      }
    }
    @include once {
      @include m(show-content) {
        @include e(content) {
          opacity: 1;
        }
      }
      @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;
        @include e(content) {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          overflow: auto;
        }
      }
    }
    @include m(bordered) {
      border-right: solid 1px $--layout-sider-border-color;
    }
  }
}