vui-design/src/style/components/layout.less

A high quality UI Toolkit based on Vue.js

@vui-layout: ~"@{vui}-layout";

.@{vui-layout} {
  flex:auto;
  display:flex;
  box-sizing:border-box;
  min-height:0;
  background-color:@layout-background-color;
  flex-direction:column;

  &-header {
    flex:0 0 auto;
    display:block;
    box-sizing:border-box;
    height:@layout-header-height;
    padding:@layout-header-padding;
    line-height:@layout-header-height;

    &-light {
      background-color:@layout-header-light-background-color;
    }

    &-dark {
      background-color:@layout-header-dark-background-color;
    }
  }

  &-sider {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    box-sizing:border-box;
    min-width:0;
    transition:all @transition-duration @transition-timing-function;

    & &-body {
      flex:1;
      display:block;
      box-sizing:border-box;
      height:100%;
      overflow:hidden;
    }
    & &-body-scrollbar {
      display:block;
      box-sizing:border-box;
      height:100%;
      overflow-x:hidden;
      overflow-y:scroll;
    }

    & &-footer {
      cursor:pointer;
      display:block;
      box-sizing:border-box;
      width:100%;
      border-top:1px solid transparent;
      transition:all @transition-duration @transition-timing-function;
    }

    & &-trigger {
      cursor:pointer;
      display:flex;
      justify-content:center;
      align-items:center;
      box-sizing:border-box;
      width:100%;
      height:@layout-sider-trigger-height;
      border-top:1px solid transparent;
      font-size:@layout-sider-trigger-font-size;
      transition:all @transition-duration @transition-timing-function;
    }

    &-light {
      background-color:@layout-sider-light-background-color;
    }
    &-light &-footer {
      border-top-color:@layout-sider-footer-light-border-color;
      background-color:@layout-sider-light-background-color;
    }
    &-light &-trigger {
      border-top-color:@layout-sider-trigger-light-border-color;
      background-color:@layout-sider-light-background-color;
      color:@layout-sider-trigger-light-font-color;
    }
    &-light &-trigger:hover {
      color:@layout-sider-trigger-light-hover-font-color;
    }
    &-light &-trigger:active {
      color:@layout-sider-trigger-light-active-font-color;
    }

    &-dark {
      background-color:@layout-sider-dark-background-color;
    }
    &-dark &-footer {
      border-top-color:@layout-sider-footer-dark-border-color;
      background-color:@layout-sider-dark-background-color;
    }
    &-dark &-trigger {
      border-top-color:@layout-sider-trigger-dark-border-color;
      background-color:@layout-sider-dark-background-color;
      color:@layout-sider-trigger-dark-font-color;
    }
    &-dark &-trigger:hover {
      color:@layout-sider-trigger-dark-hover-font-color;
    }
    &-dark &-trigger:active {
      color:@layout-sider-trigger-dark-active-font-color;
    }
  }

  &-content {
    flex:auto;
    display:block;
    box-sizing:border-box;
    min-height:0;
  }

  &-footer {
    flex:0 0 auto;
    display:block;
    box-sizing:border-box;
    padding:@layout-footer-padding;
    color:@layout-footer-font-color;
    font-size:@layout-footer-font-size;
    line-height:@layout-footer-line-height;
  }

  &-with-sider {
    flex-direction:row;
  }
  &-with-sider &,
  &-with-sider &-content {
    overflow-x:hidden;
  }
}