yun-ui/packages/style/stylesheets/form.less

Mobile UI Components Library for Vue.js by yunzhijia.

@import "var";

@keyframes error {
  0% {
    background-color: #ffffff;
  }
  100% {
    background-color: @formError;
  }
}

@-webkit-keyframes error {
  0% {
    background-color: #ffffff;
  }
  100% {
    background-color: @formError;
  }
}

@-moz-keyframes error {
  0% {
    background-color: #ffffff;
  }
  100% {
    background-color: @formError;
  }
}

/* cell */
.@{uiName} {

  &-form {
    //background-color: #ffffff;
  }
  &-form-item {
    .resetInput();
    position: relative;
    padding: 0 @formPadding;
    height: @formItemHeight;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
    overflow: hidden;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #ffffff;
    &:after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      left: @formPadding;
      border-bottom: 1px solid #dce1e8;
      transform: scaleY(.5);
      -webkit-transform: scaleY(.5);
    }
    &.error {
      background-color: @formError;
      animation: error .9s 3 linear;
      -webkit-animation: error .9s 3 linear;
      -moz-animation: error .9s 3 linear;
    }
    textarea, input {
      background-color: transparent;
    }
  }

  // -*-item
  &-textarea-item {
    height: auto;
  }
  &-input-label,
  &-form-title {
    font-size: @formLabelFontSize;
    padding-right: @formPadding;
  }
  
  &-input-control {
    -webkit-flex: 1;
    flex: 1;
    > input, > textarea {
      display: block;
      width: 100%;
      border: none;
    }
    .input-textarea-content {
      height: @formTextareaMaxHeight;
    }
    > textarea {
      margin: @formPadding 0;
      height: @formTextareaHeight;
      resize: none;
    }
    &.is-align-right {
      >input {
        text-align: right;
      }
    }
  }
  &-textarea-count {
    color: @warnColor;
    padding-bottom: @formPadding;
    text-align: right;
  }
  &-form-title {
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-flex: 1;
  }
  &-checkbox-item:after {
    left: @formPadding;
  }

  //radio
  &-radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: right;
    background-color: transparent;
    &-input {
      width: 100%;
      height: 100%;
      background-color: transparent;
      opacity: 0;
    }
    &-inner {
      display: none;
      position: absolute;
      top: 0;
      right: @formPadding;
      width: @formRadioInnerSize;
      height: @formItemHeight;
      line-height: @formItemHeight;
      > .icon-true {
        position: relative;
        z-index: 10;
        color: @themeColor;
      }
    }
    &-input:checked + &-inner {
      display: block;
    }
  }
  //cell secondary text
  &-form-secondary {
    color: @secondaryFontColor;
  }
  
}