hy-checkbox/lib/Layout/layout.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-05 10:29:03 
 */ 
@import "../../app/variables.less";

.@{ult-prefix}-layout {
  display: flex;
  // flex-direction: column;
  // flex: 1 1 auto;
  height: 100%;
  &-has-sider {
    flex-direction: row;
    flex: 1 1 auto;
    > .@{ult-prefix}-layout-content {
      flex: 1 1 auto;
    }
  }
  &-header {
    height: @header-height;
    background-color: @header-bg;
    box-shadow: 0 2px 0 -1px rgba(0, 0, 0, 0.05);
    flex: 0 0 auto;
    .trigger {
      margin: (@header-height - @header-trigger-line-height) / 2 @base-space * 3;
      font-size: 16px;
      line-height: @header-trigger-line-height;
      cursor: pointer;
      float: left;
    }
  }
  &-sider {
    width: @sider-width;
    background-color: @sider-bg-dark;
    display: flex;
    flex-direction: column;
    .@{ult-prefix}-logo {
      padding: @base-space * 3 / 2 @base-space;
      height: @header-height;
      width: 100%;
    }
    > .@{ult-prefix}-menu {
      flex: 1 1 auto;
      overflow-y: auto;
    }
    &-collapsed {
      width: @sider-width-collapsed;
      > .@{ult-prefix}-menu {
        overflow: inherit;
      }
    }
    & + .@{ult-prefix}-layout{
      flex-direction: column;
      flex: auto;
    }
  }
  &-content {
    flex: 1 1 auto;
    background-color: @content-bg-light;
    overflow-y: auto;
    > .content-wrapper {
      padding: 0 @base-space * 3 @base-space * 3;
    }
  }
  &-footer {
    background-color: @white;
    box-shadow: 0 -2px 0 -1px rgba(0, 0, 0, 0.05);
    color: @text-caption;
    padding: @base-space;
    font-size: @font-size-base;
    line-height: @base-space * 3;
    text-align: center;
  }
}