vui-design/src/style/components/form.less

A high quality UI Toolkit based on Vue.js

@vui-form: ~"@{vui}-form";

@keyframes vuiFormItemControlMessageFadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}

@keyframes vuiFormItemControlMessageFadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

.@{vui-form} {
  display:block;
  box-sizing:border-box;
  color:@form-font-color;
  font-size:@form-font-size;
  line-height:@form-line-height;

  &-group {
    position:relative;
    border:1px solid @form-group-border-color;
    border-radius:@form-group-border-radius;
    padding:@form-group-padding;

    &-title {
      position:absolute;
      top:0;
      left:@margin-xl;
      padding:0 @form-group-title-padding-horizontal;
      color:@form-group-title-font-color;
      font-size:@form-group-title-font-size;
      transform:translateY(-50%);
    }

    & + & {
      margin-top:@form-group-margin-top;
    }
  }

  &-item {
    &-label {
      display:flex;
      align-items:center;
      box-sizing:border-box;
      overflow:hidden;
      color:@form-item-label-font-color;

      &-left {
        justify-content:flex-start;
      }

      &-right {
        justify-content:flex-end;
      }

      &-required {
        flex:0 0 auto;
        display:block;
        box-sizing:border-box;
        margin-right:@form-item-label-required-mark-margin-right;
        color:@form-item-label-required-mark-font-color;
        font-family:SimSun, sans-serif;
      }

      &-optional {
        flex:0 0 auto;
        display:block;
        box-sizing:border-box;
        margin-left:@form-item-label-optional-mark-margin-left;
        color:@form-item-label-optional-mark-font-color;
      }

      &-content {
        flex:0 1 auto;
        display:block;

        .writeEllipsis;
      }

      &-description {
        color:@form-item-label-description-font-color;
      }

      &-tooltip {
        flex:0 0 auto;
        display:flex;
        justify-content:center;
        align-items:center;
        box-sizing:border-box;
        margin-left:@form-item-label-tooltip-margin-left;
        color:@form-item-label-tooltip-font-color;

        .@{vui}-icon {
          display:block;
        }
      }

      &-colon {
        flex:0 0 auto;
        display:block;
        box-sizing:border-box;
        margin-left:@form-item-label-colon-margin-left;
      }
    }

    &-control {
      position:relative;
      display:block;
      box-sizing:border-box;

      &-extra {
        margin-top:@form-item-control-extra-margin-top;
        color:@form-item-control-extra-font-color;
      }

      &-message {
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        padding:(@form-horizontal-item-margin-bottom - floor(@form-font-size * @form-line-height)) / 2 0;
        color:@form-item-control-message-font-color;

        &-fade-enter-active {
          animation:vuiFormItemControlMessageFadeIn @animation-in-duration @animation-in-timing-function both;
        }
        &-fade-leave-active {
          animation:vuiFormItemControlMessageFadeOut @animation-out-duration @animation-out-timing-function both;
        }
      }
    }
  }

  &-horizontal {

  }
  &-horizontal &-item {
    display:flex;
    justify-content:flex-start;
    align-items:stretch;
    box-sizing:border-box;
    margin-bottom:@form-horizontal-item-margin-bottom;

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

    &-label {
      max-height:@form-horizontal-item-label-max-height;
      padding-right:@form-horizontal-item-label-padding-right;
    }

    &-control {
      flex:1;
      width:0;
    }
  }

  &-vertical {

  }
  &-vertical &-item {
    display:block;
    box-sizing:border-box;
    margin-bottom:@form-vertical-item-margin-bottom;

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

    &-label {
      margin-bottom:@form-vertical-item-label-margin-bottom;
    }
  }

  &-inline {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    box-sizing:border-box;
  }
  &-inline &-item {
    display:flex;
    justify-content:flex-start;
    align-items:stretch;
    box-sizing:border-box;
    min-height:@form-inline-item-min-height;
    margin-right:@form-inline-item-margin-left;

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

    &-label {
      max-height:@form-inline-item-label-max-height;
      padding-right:@form-inline-item-label-padding-right;
    }
  }

  &-item-error {
    .vui-input .vui-input-input input { border-color:@error-color; }
    .vui-input-hovered .vui-input-input input { border-color:@error-color; }
    .vui-input-focused .vui-input-input input { border-color:@error-color; }
    .vui-input-disabled .vui-input-input input { border-color:@error-color; }

    .vui-input-number { border-color:@error-color; }
    .vui-input-number-hovered { border-color:@error-color; }
    .vui-input-number-focused { border-color:@error-color; }
    .vui-input-number-disabled { border-color:@error-color; }

    .vui-textarea .vui-textarea-input { border-color:@error-color; }
    .vui-textarea-hovered .vui-textarea-input { border-color:@error-color; }
    .vui-textarea-focused .vui-textarea-input { border-color:@error-color; }
    .vui-textarea-disabled .vui-textarea-input { border-color:@error-color; }

    .vui-select .vui-select-selection { border-color:@error-color; }
    .vui-select .vui-select-selection-arrow { color:@error-color; }
    .vui-select-hovered .vui-select-selection { border-color:@error-color; }
    .vui-select-hovered .vui-select-selection-arrow { color:@error-color; }
    .vui-select-focused .vui-select-selection { border-color:@error-color; }
    .vui-select-focused .vui-select-selection-arrow { color:@error-color; }
    .vui-select-actived .vui-select-selection { border-color:@error-color; }
    .vui-select-actived .vui-select-selection-arrow { color:@error-color; }
    .vui-select-disabled .vui-select-selection { border-color:@error-color; }
    .vui-select-disabled .vui-select-selection-arrow { color:@error-color; }

    .vui-cascader .vui-cascader-selection { border-color:@error-color; }
    .vui-cascader .vui-cascader-selection-arrow { color:@error-color; }
    .vui-cascader-hovered .vui-cascader-selection { border-color:@error-color; }
    .vui-cascader-hovered .vui-cascader-selection-arrow { color:@error-color; }
    .vui-cascader-focused .vui-cascader-selection { border-color:@error-color; }
    .vui-cascader-focused .vui-cascader-selection-arrow { color:@error-color; }
    .vui-cascader-actived .vui-cascader-selection { border-color:@error-color; }
    .vui-cascader-actived .vui-cascader-selection-arrow { color:@error-color; }
    .vui-cascader-disabled .vui-cascader-selection { border-color:@error-color; }
    .vui-cascader-disabled .vui-cascader-selection-arrow { color:@error-color; }

    .vui-cascade-selector .vui-cascade-selector-source-list .vui-cascade-selector-source { border-color:@error-color; }
    .vui-cascade-selector .vui-cascade-selector-target { border-color:@error-color; }
    .vui-cascade-selector-disabled .vui-cascade-selector-source-list .vui-cascade-selector-source { border-color:@error-color; }
    .vui-cascade-selector-disabled .vui-cascade-selector-target { border-color:@error-color; }

    .vui-transfer .vui-transfer-panel { border-color:@error-color; }
    .vui-transfer .vui-transfer-panel .vui-transfer-panel-search .vui-input .vui-input-input input { border-color:@default-color; }
    .vui-transfer-disabled .vui-transfer-panel { border-color:@error-color; }
    .vui-transfer-disabled .vui-transfer-panel .vui-transfer-panel-search .vui-input .vui-input-input input { border-color:@default-color; }

    .mx-datepicker-input { border-color:@error-color; }
    .mx-datepicker-input:hover { border-color:@error-color; }
    .mx-datepicker-input:focus { border-color:@error-color; }
    .mx-datepicker-input.disabled { border-color:@error-color; }
    .mx-datepicker-input:disabled { border-color:@error-color; }
  }
}