cargo-ant/src/styles/components/form.less

A high quality UI components Library with Vue.js

@form-prefix-cls: ~"@{css-prefix}form";
@form-item-prefix-cls: ~"@{form-prefix-cls}-item";

.@{form-prefix-cls} {
    .@{form-item-prefix-cls}-label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: @font-size-small;
        color: @text-color;
        line-height: 1;
        padding: 10px 12px 10px 0;
        box-sizing: border-box;
    }
    &-label-left .@{form-item-prefix-cls}-label {
        text-align: left;
    }
    &-label-top .@{form-item-prefix-cls}-label {
        float: none;
        display: inline-block;
        padding: 0 0 10px 0;
    }
    &-inline{
        .@{form-item-prefix-cls} {
            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
        }
    }

    // add by CargoPM FEN 增加紧凑型布局
    &-compact{
        .@{form-item-prefix-cls} {
            padding-top:4px;
            padding-bottom:4px;
            margin-bottom: 0;

            &-error-tip{
                display: none;
                position: absolute;
                top: 120%;
                padding: 8px 12px;
                color: #fff;
                background: @error-color;
                border-radius:@border-radius-small;
                z-index: 5;
                white-space:nowrap;
                box-shadow:0 0 5px rgba(0,0,0,.2);

                &:after{
                    position: absolute;
                    left: 16px;
                    top: -10px;
                    content: '';
                    width: 0;
                    height: 0;
                    border:5px solid transparent;
                    border-bottom-color: @error-color;
                }
            }

            .@{css-prefix}tiled-select-group,.@{css-prefix}checkbox-group,.@{css-prefix}radio-group,.@{css-prefix}upload{
                & ~ .@{form-item-prefix-cls}-error-tip {
                    display: block;
                    position: static;
                    color: @error-color;
                    background: transparent;
                    box-shadow: none;
                    padding: 0 0 8px 0;

                    &:after{
                        display: none;
                    }
                }
            }

            &:hover > .@{form-item-prefix-cls}-content{ //防止 item 下面包 item 导致所有的 tips 一起显示
                > .@{form-item-prefix-cls}-error-tip{
                    display: block;
                }
            }
        }
    }

    // add by CargoPM FEN 增加纯文字排版
    &-text{
      .@{form-prefix-cls}{
        &-item{
          margin-bottom:4px;

            &:last-child{
                margin-bottom: 0;
            }

          &-label{
            font-weight:500;
            line-height: inherit;
            padding-top:0;
            padding-bottom: 0;

              // TODO 等到何时的时候程序一起改
              //&:after{
              //    content:':'
              //}
          }

          &-content{
            line-height: inherit;
          }
        }
      }

      &.@{form-prefix-cls}-label-top{
        .@{form-prefix-cls}{
          &-item{
            margin-bottom: 8px;
          }
        }
      }
    }
}

.@{form-item-prefix-cls} {
    margin-bottom: 24px;
    vertical-align: top;
    .clearfix();
    &-content {
        position: relative;
        line-height: 32px;
        font-size: @font-size-small;
    }
    & & {
      margin-bottom: 0;
      // add by FEN 紧凑模式下，item 里面的 item padding 为 0 不然对不齐
      padding-top: 0;
      padding-bottom:0;
    }
    & & &-content {
        margin-left: 0!important;
    }

    &-error-tip{
        position: absolute;
        top: 100%;
        left: 0;
        line-height: 1;
        padding-top: 6px;
        color: @error-color;
    }

    &-required {
        .@{form-item-prefix-cls}-label:before {
            content: '*';
            display: inline-block;
            margin-right: 4px;
            line-height: 1;
            font-family: SimSun;
            font-size: @font-size-small;
            color: @error-color;
        }
    }
    &-error {
        // todo
    }

    &-small{
        .@{form-item-prefix-cls}{
            &-content {
                line-height: 24px;
            }

            &-label{
                padding-top:6px;
                padding-bottom:6px;
            }
        }
    }
}