@charset "UTF-8";

@import "input";

@import "button";

@mixin formLayout($fontColor: #999, $tipsColor: red, $fontSize: 12px) {
    .form-layout {
        padding: 0 $paddingLeft;

        .form-item {
            font-size: 0;
            margin: $listItemVerticalMargin 0 0;
        }

        .form-label {
            text-align: right;
            font-size: $fontSize;
            color: $fontColor;
        }

        .form-element {
            font-size: $fontSize;
        }

        .error-msg {
            font-size: $fontSize;
            color: $tipsColor;
        }

        .tips-msg {
            font-size: $fontSize;
            color: $fontColor;
            padding-left: 10px;
            vertical-align: middle;
        }

        .element-txt {
            @include inline-block;

            .number {
                font-size: 14px;
                font-weight: 700;
                font-style: normal;
            }

            .light {
                font-weight: 700;
                font-style: normal;
                font-size: 14px;
                color: $highRad;
            }
        }
    }
}

//$formType 11  纵向排列  $formType 21  横向向排列
@mixin formType($formType: 11, $labelWidth: 90px, $textAlgin: right, $spaceLeft: 10px) {
    @if $formType == 11 {
        .form-valign {
            .form-label {
                display: block;
                text-align: left;
            }

            .form-element {
                margin-top: 5px;
            }

            .error-msg {
                display: block;
                margin-top: 5px;
            }
        }
    }

    @if $formType == 21 {
        .form-align {
            @if $labelWidth != 90px {
                .form-label-#{$labelWidth} {
                    width: $labelWidth;
                    text-align: $textAlgin;
                }
                .error-msg-#{$labelWidth} {
                    margin-left: $spaceLeft + $labelWidth;
                }
            }
            @else {
                .form-label {
                    @include inline-block;
                    vertical-align: middle;
                    width: 90px;
                    text-align: $textAlgin;
                }
                .form-element {
                    @include inline-block;
                    vertical-align: middle;
                    margin-left: $spaceLeft;
                }
                .error-msg {
                    display: block;
                    margin-left: $spaceLeft + $labelWidth;
                    margin-top: 5px;
                }
            }
        }
    }
}

//行内form
@mixin formInlineBlock($itemSpace: 10px) {
    .form-inline-block {
        .form-item {
            @include inline-block;

            vertical-align: top;
            margin-right: $itemSpace;
        }
    }
}

// @include formType(12);

// @include formType(21);