hy-checkbox/lib/Form/form.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-04 10:01:20 
 */ 

@import "../../app/variables.less";

.@{ult-prefix}-form {
  &-group {
    margin-bottom: @base-space *2;
    @media (min-width: @screen-sm) {
      display: flex;
      align-items: flex-start;
      &:before,
      &:after {
        content: " ";
        display: table;
      }
      &:after {
        clear: both;
        visibility: hidden;
        font-size: 0;
        height: 0;
      }
    }
    .@{ult-prefix}-label {
      font-size: @font-size-base;
      @media (min-width: @screen-sm) {
          width: 10em;
          padding-right: @base-space;
          padding-top: @base-space;
      }
      // @media (min-width: @screen-xl) {
      //     float: left;
      //     width: 20%;
      // }
      // @media (min-width: @screen-lg) and (max-width: @screen-xl-min) {
      //     float: left;
      //     width: 30%;
      // }
      // @media (min-width: @screen-md) and (max-width: @screen-lg-min) {
      //     float: left;
      //     width: 30%;
      // }
      // @media (min-width: @screen-sm) and (max-width: @screen-md-min) {
      //     float: left;
      //     width: 30%;
      // }
      @media (max-width: @screen-sm-min) {
          margin-bottom: @base-space / 2;
      }
      &::after {
        content: '：';
        font-size: inherit;
        color: inherit;
      }
      & + .@{ult-prefix}-textarea, & + .@{ult-prefix}-textarea-group {
        @media (min-width: @screen-sm) {
            width: 40%;
        }
        @media (max-width: @screen-sm-min) {
            margin-bottom: @base-space / 2;
        }
      }
    }
    .@{ult-prefix}-input, .@{ult-prefix}-form-checkbox {
      @media (min-width: @screen-sm) {
          width: 40%;
      }
      @media (max-width: @screen-sm-min) {
          margin-bottom: @base-space / 2;
      }
      &[name="identifyCode"] {
        width: @base-space * 14;
        margin-right: @base-space;
      }
    }

    .btn-identifyCode {
      width: @base-space * 13;
    }
    
    &.error, &.required {
      .@{ult-prefix}-input {
        border-color: @danger;
      }
      .validation-error {
        font-size: @font-size-base;
        padding-top: @base-space;
        position: relative;
        &::before {
          position: absolute;
          font-family: 'iconfont';
          font-size: 12px;
          line-height: 12px;
          @media (min-width: @screen-sm) {
            left: @base-space * -1 - 13px;
            top: @base-space + 2px;
          }
        }
        @media (min-width: @screen-sm) {
            padding-left: @base-space;
        }
        &.@{ult-prefix}-form-identifyCode-error {
          &::before {
            left: -@base-space * 15 - 13px;
          }
        }
      }
    }
    &.error {
      .@{ult-prefix}-input {
        border-color: @danger;
      }
      .validation-error {
        color: @danger;
        &::before {
          content: '\e695';
        }
      }
    }
    &.required {
      .@{ult-prefix}-input {
        border-color: @warning;
      }
      .validation-error {
        color: @warning;
        &::before {
          content: '\e69f';
        }
      }
    }
    &-offset-label {
      font-size: @font-size-base;
      @media (min-width: @screen-sm) {
          padding-left: 10em;
      }
      button:not(:last-child) {
        margin-right: @base-space;
      }
    }
    .forgetKey {
      font-size: @font-size-base;
      float: right;
    }
  }
  &-inline {
    display: flex;
    align-items: center;
    .@{ult-prefix}-form-group {
      margin-bottom: 0;
      margin-left: @base-space;
      margin-right: @base-space;
      position: relative;
      .@{ult-prefix}-input {
        width: @base-space * 21;
      }
      .@{ult-prefix}-label {
        width: auto;
      }
      .@{ult-prefix}-checkbox {
        margin-top: 0;
        margin-bottom: 0;
      }
      .validation-error {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        padding: 0;
        display: inline-block;
        text-align: left;
        &::before {
          left: auto;
          right: @base-space;
          top: -23px;
        }
      }
    }
  }
  &-label-invisible {
    .@{ult-prefix}-form-group {
      margin-left: 0;
      position: relative;
      @media (min-width: @screen-sm) {
        display: block;
      }
      &:last-child {
        margin-right: 0;
      }
      .validation-error {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        padding: 0;
        display: inline-block;
        text-align: left;
        &::before {
          left: auto;
          right: @base-space;
          top: -23px;
        }
      }
    }
    .@{ult-prefix}-label {
      display: none;
    }
    .@{ult-prefix}-input-icon {
      width: 100%;
    }
    .@{ult-prefix}-input {
      width: 100%;
    }
    .@{ult-prefix}-checkbox {
      margin: 0;
    }
  }
}