heyui/heyui/themes/components/form.less

A UI components Library.

@form-prefix: ~"@{prefix}form";
.form-content-width100 {
  input[type='text'],
  input[type='password'],
  textarea,
  .@{prefix}input,
  .@{prefix}radio,
  .@{prefix}checkbox,
  .@{prefix}select,
  .@{prefix}input-group {
    width: 100%;
  }
}

.@{form-prefix} {
  .clearfix();
  .@{form-prefix} {
    &-item {
      padding-bottom: 24px;
      &-no-padding{
        padding-bottom: 0px;
      }
      position: relative;
      &-label {
        display: inline-block;
        text-align: right;
        vertical-align: middle;
        font-size: @font-size-mini;
        color: @gray-color;
        line-height: 1;
        padding: 9px 15px 10px 15px;
        box-sizing: border-box;
      }
      &-required {
        .@{form-prefix}-item-label::before {
          content: "*";
          color: @red-color;
          font-size: 15px;
          display: inline-block;
          margin-right: 4px;
          line-height: 8px;
          vertical-align: middle;
        }
      }
      &-content {
        // line-height: 32px;
        font-size: @font-size-mini;
      }
      &-wrap {
        position: relative;
        .clearfix();
      }
      &-error {
        position: absolute;
        margin-top: 5px;
        color: @red-color;
        line-height: 1;
      }
    }
  }
  &.@{form-prefix} {
    &-label {
      &-left {
        .@{form-prefix}-item-label {
          text-align: left;
        }

        .@{form-prefix}-item-required {
          .@{form-prefix}-item-label {
            &:before {
              content: none;
            }
            &:after {
              content: "*";
              color: @red-color;
              font-size: 15px;
              display: inline-block;
              margin-right: 4px;
              line-height: 8px;
              vertical-align: middle;
            }
          }
        }
      }
    }
    &-block .@{form-prefix}-item,
    .@{form-prefix}-item-block {
      .clearfix();
      &-label {
        display: block;
        text-align: left;
        padding-left: 0;
        &:empty {
          display: none;
        }
      }
      &-content {
        .clearfix();
        .form-content-width100();
      }
    }
    &-inline .@{form-prefix}-item {
      display: inline-block;
      &-label {
        float: left;
      }
      &-content {
        float: left;
        margin-right: 20px;
      }
    }
    &-twocolumn .@{form-prefix}-item {
      width: 50%;
      float: left;
      &-label {
        width: 80px;
        float: left;
      }
      &-content {
        .form-content-width100();
      }
    }
    &-single .@{form-prefix}-item,
    .@{form-prefix}-item-single {
      width: 100%;
      .clearfix();
      .@{form-prefix}-item-label {
        width: 80px;
        float: left;
      }
      .@{form-prefix}-item-content {
        margin-left: 80px;
        .form-content-width100();
      }
    }
  }
}