@import "./var";
/**
 * 1.表单验证
 * 2.表单布局
 */


/**
 * 1.表单验证
 */

.#{$prefix}form__controls {
    display: block;
    position: relative;
    font-size: 0;
    color:$color-text;
}
.#{$prefix}form__text{
    font-size: $form-layout-font-size;
    color:$form-layout-color-text;
    vertical-align: middle;
}

// 帮助文本：行内（默认）、块级
.#{$prefix}form__help-text {
    font-size: $form-layout-font-size;
    color: $form-layout-color-text-label;
    vertical-align: middle;
    margin-top: 8px;
}

.#{$prefix}form__help-text--inline {
    display: inline-block;
    vertical-align: middle;
    font-size:$form-layout-font-size;
    margin-left:$help-text-inline-margin-left;
}

.#{$prefix}form__controls .#{$prefix}icon-valid {
    display: none;
    margin-left: $form-icon-valid-margin-left;
}

// .form-unit .tc-15-input-textarea {
//     vertical-align: top;
// }
// .form-unit .valid-bubble {
//     margin-top: 1px;
//     display: none;
// }
// .form-unit .valid-bubble .tc-15-bubble-inner {
//     left: 20px;
// }

/* 验证中 */

// .valid-result {
//     font-size: $form-layout-font-size;
//     display: none;
//     vertical-align: middle;
//     margin-left: 10px;
//     color: $form-layout-color-text-label;
// }
// .show-valid-result .valid-result {
//     display: inline-block;
// }
// .show-valid-result.is-error .valid-result {
//     color: var(--text-error-color);
// }

/* 验证成功 */

.#{$prefix}form__controls.is-success .#{$prefix}icon-valid {
    display: inline-block;
    background-image: $form-validate-success;
    background-position: inherit;
}


/* 验证中 */

.#{$prefix}form__controls.is-validating .#{$prefix}icon-valid {
    display: inline-block;
    background-image: url(../../assets/image/slice/svg/loading.svg);
    background-position: inherit;
    -moz-animation: spin .6s infinite linear;
    -webkit-animation: spin .6s infinite linear;
    animation: spin .6s infinite linear;
}

/* 验证错误 */

.#{$prefix}form__controls.is-error .#{$prefix}icon-valid {
    display: inline-block;
    background-image: $form-validate-error;
    background-position: inherit;
}

.#{$prefix}form__controls.is-error .#{$prefix}form__help-text {
    color: $color-error;
}

// 开启失败的错误文本要跟着后面 
.#{$prefix}form__controls .#{$prefix}switch+.#{$prefix}form__help-text {
    display: inline-block;
    margin-left: 5px;
    margin-top: 0;
}

// 块级radio和checkbox，显示验证图标比较别扭
.#{$prefix}form__controls .#{$prefix}form-check--block+.#{$prefix}icon-valid {
    display: none;
}


/**
 * 
 * 2. 表单布局
 *
 */

.#{$prefix}form {
    display: table;
    font-size: $form-layout-font-size;
    line-height: 1.5;
}

.#{$prefix}form__item {
    display: table-row;
}

.#{$prefix}form .#{$prefix}form__label,
.#{$prefix}form .#{$prefix}form__controls {
    display: table-cell;
    vertical-align: top;
    padding-bottom: 16px;
}

.#{$prefix}form .#{$prefix}form__label {
    vertical-align: baseline;
    color: $form-layout-color-text-label;
    padding-right: 20px;
    padding-top: ($form-height - 18px)/2;
    padding-bottom: ($form-height - 18px)/2;
    width: 1px; //为了不分配多余的空间
    .#{$prefix}icon{
        vertical-align: -4px;
    }
}

.#{$prefix}form .#{$prefix}form__label label,
.#{$prefix}form .#{$prefix}form__label legend {
    display: inline-block;
    white-space: nowrap;
    font-size: $form-layout-font-size;
    transform: translate3d(0, 0, 0); //为了让红色星号相对label固定
}

.#{$prefix}form .#{$prefix}form__controls {
    color: $form-layout-color-text-weight;
    word-wrap:break-word;
    word-break:break-word;
    padding-right:24px;
    width:100%;
}

// 调整对齐方式：纯文本行业、radio、checkbox
.#{$prefix}form .#{$prefix}form__controls--text {
    padding-top: ($form-height - 18px)/2;
}
.#{$prefix}form .#{$prefix}form__controls .#{$prefix}text-cost{
    vertical-align: -5px;
    display: inline-block;
    line-height: $form-height;
}

.#{$prefix}form>.#{$prefix}form__item:last-child .#{$prefix}form__label,
.#{$prefix}form>.#{$prefix}form__item:last-child .#{$prefix}form__controls {
    padding-bottom: 0;
}

.#{$prefix}form>.#{$prefix}form__item:last-child .#{$prefix}form .#{$prefix}form__label,
.#{$prefix}form>.#{$prefix}form__item:last-child .#{$prefix}form .#{$prefix}form__controls {
    padding-bottom: 16px;
}
.#{$prefix}form>.#{$prefix}form__item:last-child .#{$prefix}form--vertical .#{$prefix}form__label{
    padding-bottom: 0px;
}

.#{$prefix}form>.#{$prefix}form__item:last-child .#{$prefix}form>.#{$prefix}form__item:last-child .#{$prefix}form__label,
.#{$prefix}form>.#{$prefix}form__item:last-child .#{$prefix}form>.#{$prefix}form__item:last-child .#{$prefix}form__controls {
    padding-bottom: 0;
}

//纯文本行的对齐调整 2020/08/25 好像没有用了
.pure-text-row .#{$prefix}form__label,
.pure-text-row .#{$prefix}form__controls,
.pure-text-row .form-ctrl-label,
.pure-text-row .form-ctrl-label-stacked {
    line-height: 25px;
}

// 必填项
.#{$prefix}form .#{$prefix}form__label.is-required label:after {
    display: inline-block;
    content: '*';
    color: $color-error;
    line-height: 1;
    position: absolute;
    margin:5px 0 0 3px;
}

// 固定布局
.#{$prefix}form--fixed-layout .#{$prefix}form__label label {
    white-space: normal;
    width: $form-layout-label-width;
}

.#{$prefix}form--fixed-layout .#{$prefix}form__label.is-required label {
    width: $form-layout-label-width;
}

// 表单嵌套
.#{$prefix}form .#{$prefix}form {
    background-color: $color-bg-gray;
    padding: 10px;
}
.#{$prefix}form .#{$prefix}form:nth-of-type(n+2) {
    margin-top: 10px;
}

 


/* 表单 垂直结构 */

.#{$prefix}form--vertical {}

.#{$prefix}form--vertical .#{$prefix}form__label,
.#{$prefix}form--vertical .#{$prefix}form__controls {
    display: block;
}

.#{$prefix}form--vertical .#{$prefix}form__label {
    padding-bottom: 0;
    padding-top: 0;
    font-size: $form-layout-font-size;
    width:auto;
    margin-bottom:10px;
}

.#{$prefix}form--vertical .#{$prefix}form__label label {
    color: $form-layout-color-text;
}
.#{$prefix}form--vertical .#{$prefix}form__help-text{
    margin-top:4px;
}
.#{$prefix}form--vertical .#{$prefix}form__controls--text{
    padding-top:0;
}


/* 表单 inline布局 */

.#{$prefix}form--inline {
    display: block;
}

.#{$prefix}form--inline>.#{$prefix}form__item {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
}
.#{$prefix}form--inline>.#{$prefix}form__item .#{$prefix}form__controls {
    width: auto;
}

.#{$prefix}form--inline>.#{$prefix}form__item .#{$prefix}form__controls,
.#{$prefix}form--inline>.#{$prefix}form__item .#{$prefix}form__label,
.#{$prefix}form--inline>.#{$prefix}form__item:last-child .#{$prefix}form__controls,
.#{$prefix}form--inline>.#{$prefix}form__item:last-child .#{$prefix}form__label {
    padding-bottom: 10px;
    padding-right: 0;
}

.#{$prefix}form--inline .#{$prefix}form__label label {
    padding-right: 10px;
}


/* vertial + inline 表单布局 */

.#{$prefix}form--inline.#{$prefix}form--vertical>.#{$prefix}form__item .#{$prefix}form__label {
    padding-bottom: 0;
}

.#{$prefix}form--inline.#{$prefix}form--vertical>.#{$prefix}form__item .#{$prefix}form__label label {
    padding-right: 0;
}

// 宽度100%
.#{$prefix}form.size-full-width{
    width:100%;
}
// .#{$prefix}form.size-full-width .#{$prefix}form__controls{
//     width:100%;
//     padding-right:24px;
// }
.#{$prefix}form .#{$prefix}form__controls > .#{$prefix}icon-valid{
    position: absolute;
    margin-top:($form-height - 16px)/2;
}
.#{$prefix}form .#{$prefix}form__controls.#{$prefix}form__controls--text > .#{$prefix}icon-valid{
    margin-top:0px;
}

.#{$prefix}form--readonly .#{$prefix}form__label,
.#{$prefix}form--readonly .#{$prefix}form__controls {
    padding-bottom: 0
}

/*表单操作按钮设置*/
.#{$prefix}form-operate{
    padding-top: 20px;
    border-top: 1px solid $form-layout-color-border-inner;
    margin-top: 20px;
}
.#{$prefix}form-operate .#{$prefix}btn{
    margin-right:10px;
}
.#{$prefix}form-title{
    margin-bottom: 11px;
}
.#{$prefix}form-operate--dialog{
    margin-top: 10px;
    border-top: none;
    text-align: center;
}

.#{$prefix}form {
    .#{$prefix}justify-grid {
        & .#{$prefix}justify-grid__col--left,
        & .#{$prefix}justify-grid__col:first-child {
            .#{$prefix}btn,
            .#{$prefix}select,
            .#{$prefix}dropdown,
            .#{$prefix}combobox,
            .#{$prefix}segment{
                margin-right: 0px;
            }
            
        }
        & .#{$prefix}justify-grid__col--right,
        & .#{$prefix}justify-grid__col--right:first-child{
            text-align: right;

            .#{$prefix}btn,
            .#{$prefix}select,
            .#{$prefix}dropdown,
            .#{$prefix}combobox,
            .#{$prefix}segment{
                margin-left: 0px;
                margin-right:0;
            }
            .#{$prefix}btn--icon{
                margin-left:0;
            }
        }
    }
}

.#{$prefix}form::-ms-expand {
    display: none;
}