dati/lib/style/common/layout.less

@import '../themes/default.less';
@import '../mixins.less';

/* -- 背景色 -- */
.lz-bgc {
  &--base {
    // 基本
    background-color: @fill-base;
  }
  &--base-inverse {
    // 基本反色
    background-color: @fill-tap;
  }
  &--disabled {
    // 失效
    background-color: @fill-disabled;
  }
  &--mask {
    // 遮罩
    background-color: @fill-mask;
  }
  &--grey {
    // 灰色
    background-color: @fill-grey;
  }
  &--icon {
    // 图标背景色
    background-color: @color-icon-base;
  }
  // 状态色
  &--primary {
    // 主色
    background-color: @brand-primary;
  }
  &--primary-tap {
    // 主色按下
    background-color: @brand-primary-tap;
  }
  &--success {
    // 成功
    background-color: @brand-success;
  }
  &--warning {
    // 警告
    background-color: @brand-warning;
  }
  &--error {
    // 失败
    background-color: @brand-error;
  }
  &--important {
    // 重要
    background-color: @brand-important;
  }
  &--hot {
    // 热门
    background-color: @brand-hot;
  }
  &--wait {
    // 等待
    background-color: @brand-wait;
  }
}
/* -- 边框 -- */
.lz-bd {
  &--all {
    .scale-hairline-common();
    .hairline('all');
    &-remove {
      &::before {
        content: none;
      }
    }
  }
  &--t {
    .scale-hairline-common();
    .hairline('top');
    &-remove {
      &::before {
        content: none;
      }
    }
  }
  &--r {
    .scale-hairline-common();
    .hairline('right');
    &-remove {
      &::before {
        content: none;
      }
    }
  }
  &--b {
    .scale-hairline-common();
    .hairline('bottom');
    &-remove {
      &::before {
        content: none;
      }
    }
  }
  &--l {
    .scale-hairline-common();
    .hairline('left');
    &-remove {
      &::before {
        content: none;
      }
    }
  }

  &__color {
    &--base {
      // 基本
      &::before {
        border-color: @border-color-base;
      }
    }
    &--base-inverse {
      // 基本 - 反色
      &::before {
        border-color: @border-color-base-inverse;
      }
    }
    // 状态色
    &--primary {
      // 主色
      &::before {
        border-color: @brand-primary;
      }
    }
    &--primary-tap {
      // 主色按下
      &::before {
        border-color: @brand-primary-tap;
      }
    }
    &--success {
      // 成功
      &::before {
        border-color: @brand-success;
      }
    }
    &--warning {
      // 警告
      &::before {
        border-color: @brand-warning;
      }
    }
    &--error {
      // 失败
      &::before {
        border-color: @brand-error;
      }
    }
    &--important {
      // 重要
      &::before {
        border-color: @brand-important;
      }
    }
    &--hot {
      // 热门
      &::before {
        border-color: @brand-hot;
      }
    }
    &--wait {
      // 等待
      &::before {
        border-color: @brand-wait;
      }
    }
  }

  &__radius {
    &--xs {
      overflow: hidden;
      border-radius: @radius-xs;
      &::before {
        border-radius: @radius-xs;
      }
    }
    &--sm {
      overflow: hidden;
      border-radius: @radius-sm;
      &::before {
        border-radius: @radius-sm;
      }
    }
    &--md {
      overflow: hidden;
      border-radius: @radius-md;
      &::before {
        border-radius: @radius-md;
      }
    }
    &--lg {
      overflow: hidden;
      border-radius: @radius-lg;
      &::before {
        border-radius: @radius-lg;
      }
    }
    &--circle {
      overflow: hidden;
      border-radius: @radius-circle;
      &::before {
        border-radius: @radius-circle;
      }
    }
  }
}
/* -- 滚动区域 -- */
.lz-overflow {
  &__auto {
    overflow: auto;
  }
  &__x {
    overflow-x: scroll;
    overflow-y: hidden;
  }
  &__y {
    overflow-x: hidden;
    overflow-y: scroll;
  }
  &__hidden {
    overflow: hidden;
  }
}
/* -- 定位 -- */
.lz-position {
  &__rel {
    position: relative;
  }
  &__abs {
    position: absolute;
  }
  &__fix {
    position: fixed;
  }
  &__sti {
    position: sticky;
  }
}
/* -- 布局 -- */
.lz-display {
  &__block {
    display: block;
  }
  &__inline-block {
    display: inline-block;
  }
  &__table {
    display: table;
  }
}
/* -- 隐藏 -- */
.lz-hidden {
  &__none {
    display: none;
  }
  &__visibility {
    visibility: hidden;
  }
}
/* -- 填充 -- */
.lz-fill {
  width: 100%;
  height: 100%;

  &__w {
    width: 100%;
  }

  &__h {
    height: 100%;
  }
}
/* -- 内容区块 -- */
.lz-session {
  background-color: @fill-base;
  color: @color-text-base;
}
/* -- 正方形 -- */
.lz-fillbox {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 100%;

  &-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
  }
}
/* -- 元素居中 -- */
.lz-cc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

/* -- 内外边距 -- */
.lz-margin {
  &-0 {
    margin: 0;
  }
  &-xs {
    margin: @margin-spacing-xs;
  }
  &-sm {
    margin: @margin-spacing-sm;
  }
  &-md {
    margin: @margin-spacing-md;
  }
  &-lg {
    margin: @margin-spacing-lg;
  }
  &-xl {
    margin: @margin-spacing-xl;
  }

  &--t {
    &-0 {
      margin: 0;
    }
    &-xs {
      margin: @margin-spacing-xs;
    }
    &-sm {
      margin: @margin-spacing-sm;
    }
    &-md {
      margin: @margin-spacing-md;
    }
    &-lg {
      margin: @margin-spacing-lg;
    }
    &-xl {
      margin: @margin-spacing-xl;
    }
  }

  &--r {
    &-0 {
      margin: 0;
    }
    &-xs {
      margin: @margin-spacing-xs;
    }
    &-sm {
      margin: @margin-spacing-sm;
    }
    &-md {
      margin: @margin-spacing-md;
    }
    &-lg {
      margin: @margin-spacing-lg;
    }
    &-xl {
      margin: @margin-spacing-xl;
    }
  }

  &--b {
    &-0 {
      margin: 0;
    }
    &-xs {
      margin: @margin-spacing-xs;
    }
    &-sm {
      margin: @margin-spacing-sm;
    }
    &-md {
      margin: @margin-spacing-md;
    }
    &-lg {
      margin: @margin-spacing-lg;
    }
    &-xl {
      margin: @margin-spacing-xl;
    }
  }

  &--l {
    &-0 {
      margin: 0;
    }
    &-xs {
      margin: @margin-spacing-xs;
    }
    &-sm {
      margin: @margin-spacing-sm;
    }
    &-md {
      margin: @margin-spacing-md;
    }
    &-lg {
      margin: @margin-spacing-lg;
    }
    &-xl {
      margin: @margin-spacing-xl;
    }
  }

  &--lr {
    &-0 {
      margin-left: 0;
      margin-right: 0;
    }
    &-xs {
      margin-left: @margin-spacing-xs;
      margin-right: @margin-spacing-xs;
    }
    &-sm {
      margin-left: @margin-spacing-sm;
      margin-right: @margin-spacing-sm;
    }
    &-md {
      margin-left: @margin-spacing-md;
      margin-right: @margin-spacing-md;
    }
    &-lg {
      margin-left: @margin-spacing-lg;
      margin-right: @margin-spacing-lg;
    }
    &-xl {
      margin-left: @margin-spacing-xl;
      margin-right: @margin-spacing-xl;
    }
  }

  &--tb {
    &-0 {
      margin-top: 0;
      margin-bottom: 0;
    }
    &-xs {
      margin-top: @margin-spacing-xs;
      margin-bottom: @margin-spacing-xs;
    }
    &-sm {
      margin-top: @margin-spacing-sm;
      margin-bottom: @margin-spacing-sm;
    }
    &-md {
      margin-top: @margin-spacing-md;
      margin-bottom: @margin-spacing-md;
    }
    &-lg {
      margin-top: @margin-spacing-lg;
      margin-bottom: @margin-spacing-lg;
    }
    &-xl {
      margin-top: @margin-spacing-xl;
      margin-bottom: @margin-spacing-xl;
    }
  }
}
.lz-padding {
  &-0 {
    padding: 0;
  }
  &-xs {
    padding: @padding-spacing-xs;
  }
  &-sm {
    padding: @padding-spacing-sm;
  }
  &-md {
    padding: @padding-spacing-md;
  }
  &-lg {
    padding: @padding-spacing-lg;
  }
  &-xl {
    padding: @padding-spacing-xl;
  }

  &--t {
    &-0 {
      padding: 0;
    }
    &-xs {
      padding: @padding-spacing-xs;
    }
    &-sm {
      padding: @padding-spacing-sm;
    }
    &-md {
      padding: @padding-spacing-md;
    }
    &-lg {
      padding: @padding-spacing-lg;
    }
    &-xl {
      padding: @padding-spacing-xl;
    }
  }

  &--r {
    &-0 {
      padding: 0;
    }
    &-xs {
      padding: @padding-spacing-xs;
    }
    &-sm {
      padding: @padding-spacing-sm;
    }
    &-md {
      padding: @padding-spacing-md;
    }
    &-lg {
      padding: @padding-spacing-lg;
    }
    &-xl {
      padding: @padding-spacing-xl;
    }
  }

  &--b {
    &-0 {
      padding: 0;
    }
    &-xs {
      padding: @padding-spacing-xs;
    }
    &-sm {
      padding: @padding-spacing-sm;
    }
    &-md {
      padding: @padding-spacing-md;
    }
    &-lg {
      padding: @padding-spacing-lg;
    }
    &-xl {
      padding: @padding-spacing-xl;
    }
  }

  &--l {
    &-0 {
      padding: 0;
    }
    &-xs {
      padding: @padding-spacing-xs;
    }
    &-sm {
      padding: @padding-spacing-sm;
    }
    &-md {
      padding: @padding-spacing-md;
    }
    &-lg {
      padding: @padding-spacing-lg;
    }
    &-xl {
      padding: @padding-spacing-xl;
    }
  }

  &--lr {
    &-0 {
      padding-left: 0;
      padding-right: 0;
    }
    &-xs {
      padding-left: @padding-spacing-xs;
      padding-right: @padding-spacing-xs;
    }
    &-sm {
      padding-left: @padding-spacing-sm;
      padding-right: @padding-spacing-sm;
    }
    &-md {
      padding-left: @padding-spacing-md;
      padding-right: @padding-spacing-md;
    }
    &-lg {
      padding-left: @padding-spacing-lg;
      padding-right: @padding-spacing-lg;
    }
    &-xl {
      padding-left: @padding-spacing-xl;
      padding-right: @padding-spacing-xl;
    }
  }

  &--tb {
    &-0 {
      padding-top: 0;
      padding-bottom: 0;
    }
    &-xs {
      padding-top: @padding-spacing-xs;
      padding-bottom: @padding-spacing-xs;
    }
    &-sm {
      padding-top: @padding-spacing-sm;
      padding-bottom: @padding-spacing-sm;
    }
    &-md {
      padding-top: @padding-spacing-md;
      padding-bottom: @padding-spacing-md;
    }
    &-lg {
      padding-top: @padding-spacing-lg;
      padding-bottom: @padding-spacing-lg;
    }
    &-xl {
      padding-top: @padding-spacing-xl;
      padding-bottom: @padding-spacing-xl;
    }
  }
}

/* -- 浮动 --  */

.lz-clear-float::after,
.lz-clear-float::before {
  content: ' ';
  display: table;
}

.lz-clear-float::after {
  clear: both;
}

.lz-float-l {
  float: left;
}

.lz-float-r {
  float: right;
}