@charset "UTF-8";

@import "input";

@import "button";

@mixin listSquare($imgsize: 80px) {
    .list-square {
        margin-right: -#{$paddingBase};

        .list-square-item {
            position: relative;
            margin: 0 $paddingBase 0 0;
            overflow: hidden;

            @include inline-block;

            .imgbox {
                border: 1px solid $borderColor;
                width: $imgsize;
                height: $imgsize;
                padding: 1px;
                line-height: $imgsize;
                text-align: center;

                .img {
                    max-width: $imgsize;
                    max-height: $imgsize;
                    vertical-align: middle;
                }
            }

            //继续添加图片
            .icon-jixutianjiatupian01 {
                font-size: $font-size-h3;
                position: absolute;
                left: $imgsize / 2 - 12px;
                top: $imgsize / 2 - 12px;
                color: $grayLight;
            }

            //隐藏type=file域
            .hidden-file {
                opacity: 0;
                font-size: $imgsize;
                line-height: $imgsize;
                position: absolute;
                top: 0;
                left: 0;
            }

            .corner {
                position: absolute;
                padding: 4px;
                right: 0;
                top: 0;
                color: #fff;
                background-color: $grayLight;
                cursor: pointer;
            }
        }
    }
}

@mixin listGroup($fontColor: #999, $tipsColor: red, $fontSize: 12px) {
    .list-group {
        padding: 0 $paddingLeft;

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

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

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

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

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

        .table {
            td {
                padding: 0px;
            }
        }

        .element-txt {
            @include inline-block;

            vertical-align: middle;

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

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

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

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

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

    @if $listType == 21 {
        .list-align {
            .list-label {
                @include inline-block;

                vertical-align: middle;
                width: $labelWidth;
                text-align: $textAlgin;
            }

            .list-label-vtop {
                vertical-align: top;
            }

            .list-element {
                @include inline-block;

                vertical-align: middle;
                margin-left: $spaceLeft;

                .list-label {
                    width: auto;
                }
            }

            .error-msg {
                display: block;
                margin-left: $spaceLeft + $labelWidth;
                margin-top: 5px;
            }
        }
    }
}

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

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

// @include formType(12);

// @include formType(21);