d-render/src/cip-form-item/style/index.less

数据渲染库 - form、table、search-form

.@{elNamespace}-form--label-top{
  .@{elNamespace}-form-item{
    flex-wrap: wrap;
  }
  .@{elNamespace}-form-item__label{
    width: 100%;

  }
}
.@{elNamespace}-form-item.is-danger{
  .error-info{
    display: inline !important;
  }
}
.@{elNamespace}-form-item{
  .@{elNamespace}-form-item__label{
    height: unset; // 覆盖默认的height:32px, 防止label折行后叠加到下一个item
  }
  &.label-pos{
    &--left{
      .@{elNamespace}-form-item__label{
        text-align: left; // fix label 居左
      }
      .cip-form-item__label{
        justify-content: flex-start; // 修复文字位置
      }
    }
    &--right{
      .@{elNamespace}-form-item__label{
        text-align: right; // fix label 居右
      }
      .cip-form-item__label{
        justify-content: flex-end; // 修复文字位置
      }
    }
    &--top{
      .@{elNamespace}-form-item__label{
        text-align: left; // fix label 居左
        padding-right: 0; // 非top时选在右侧的内边距12px
      }
      .cip-form-item__label{
        justify-content: flex-start; // 修复文字位置
      }
    }
  }
  &.pos-top{
    flex-wrap: wrap;
    &--padding{
      >.@{elNamespace}-form-item__content{
        padding-left: 12px;
      }
    }
    .@{elNamespace}-form-item__label{
      //width: 100% !important;
      text-align: left;
      justify-content: flex-start; // el-form-item__label默认开启flex导致text-align无效
    }
    >.@{elNamespace}-form-item__content{
      width: 100% !important;
      box-sizing: border-box;
      flex: unset;
      //padding-left: 12px;
      .basic-table{
        width: 100%; // 修复pos-top下 basic宽度为0的问题
      }
    }
  }
}
// pc模式下的el-form-item--in-table特殊化处理
.cip-form-item--pc.cip-form-item{
  &.cip-form-item--in-table{
    //display: inline !important;
    > .@{elNamespace}-form-item{
      margin: 0;
      display: inline !important;
      .@{elNamespace}-form-item__content{
        display: flex;
        flex-wrap: nowrap;
        flex-grow: 2;
        width:auto;
        font-size: 12px;
      }
    }
  }
}
// 公共部分的功能
.cip-form-item.@{elNamespace}-form-item__wrapper{
  display: flex;
  width: 100%;
  &.cip-form-item--hidden{ // 隐藏
    display: none !important;
//    height: 0;
//    overflow: hidden;
  }
  // 手动实现label-position top [注释：原el-form不支持对单个item进行label-position的配置]
  &.cip-form-item--label-position-top{
    > .@{elNamespace}-form-item{
      display: block;
    }
  }
  // 修改el-form-item采用flex布局
  > .@{elNamespace}-form-item{
    flex-grow: 2;
    display: flex;
    align-items: flex-start;
    width: 100%;

    .@{elNamespace}-form-item__label{
      flex-shrink: 0;
    }

    .@{elNamespace}-form-item__content{
      margin-left:0 !important;
      flex-grow: 2;
      flex-shrink: 1;
      width: 0;
      display: flex;
      //align-items: center;  // 此处center将当值 input组件垂直居中破坏样式
    }
  }
  .content--end{
    .@{elNamespace}-form-item__content{
      align-self: flex-end;
    }
  }
  // input框在inline-block下出现空隙
  .@{elNamespace}-input__inner, .@{elNamespace}-input__count{
    vertical-align: top;
  }
  .@{elNamespace}-input-group{
    vertical-align: middle;
  }
  // label为空的时候，移除label的padding
  .hide-label{
    > .@{elNamespace}-form-item__label{
      padding: 0;
      display: none;
    }
  }
}

// form-item 位于tabel下时的样式处理 ?:比较将此样式放在cip-table下还是cip-form-item中
.@{elNamespace}-table {
  // table时的居右功能【注，cell使用flex布局所以text-align将无效】
  .is-right {
    .cell{
      justify-content: flex-end;
      text-align: right;
    }
  }
  .is-center{
    .cell{
      justify-content: center;
      text-align: center;
    }
  }
  // 在table内部时的溢出省略号功能
  .cell.@{elNamespace}-tooltip{
    .cip-form-item__input{
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

// cci标准部分针对cip-form的样式， 后期需要迁移到@cip/cci-standard-theme项目中
.cip-form, .cip-search-form{
  .@{elNamespace}-form-item__label{

  }
  .cip-form-item__label{
    color: var(--cip-form-label-color, inherit);
    font-weight: var(--cip-form-label-font-weight, normal);
    display: flex;
    align-items: center;
  }
  // 入侵el-form-item__content
  .@{elNamespace}-form-item__content{
    color: var(--cip-form-content-color, inherit);
    font-weight: var(--cip-form-content-font-weight, normal);
  }
}

.cip-form-item__error--default{}
.cip-form-item__error--tooltip{
  > .@{elNamespace}-form-item{
    margin-bottom: var(--cip-form-item-mb, 4px);
  }
}