// Name:            上传资料
// Description:     UploadMaterial2
// Author:          allen.hu(jiabao_hu@corp.netease.com)
// ========================================================================

@import "../../core/module/uploadmaterial.mcss";

// Varibles:
// ========================================================================


$m-uploadmaterial_height = 340px;
$m-uploadmaterial_width =  992px;
$m-uploadmaterial_background = #FFFFFF;
$m-uploadmaterial_border_color_selected = #8fc31f;
$m-uploadmaterial_border_color = #dddddd;
$m-uploadmaterial_legend_background_color = #F7F7F7;
$m-uploadmaterial_legend_width = 910px;
$m-uploadmaterial_legend_height = 36px;
$m-uploadmaterial_item_height = 200px;
$m-uploadmaterial_item_label_width = 500px;
$m-uploadmaterial_item_ctrl_width = 160px;
$m-uploadmaterial_item_desc_width = 100px;

// Component:       `m-uploadmaterial`
// ========================================================================

.m-uploadmaterial {
    width: $m-uploadmaterial_width;

    min-height: $m-uploadmaterial_height;

    background: $m-uploadmaterial_background;

	outline: #m-uploadmaterial_border_color solid 1px;

	margin: 10px auto;

    padding: 20px 40px;
}

.m-uploadmaterial-legend{
	width: 100%;
	background: $m-uploadmaterial_legend_background_color;
	height:$m-uploadmaterial_legend_height;

	> span {
		font-size: 16px;
        text-align: left;
        line-height: 36px;
        margin-left: 25px;
    }
}


.m-uploadmaterial-item{
	width: 100%;
	height: $m-uploadmaterial_item_height;

	margin-top: 25px;

	.red{
        color: red;
        @extend .f-fl;
    }
}

.m-uploadmaterial-label{
	width: $m-uploadmaterial_item_label_width;


	.red{
		color: red;
		@extend .f-fl;
		width: 20px;
	}

	> label {
		font-family:MicrosoftYaHei;
        font-size:16px;
        color:black;;
        line-height:20px;
        @extend .f-fl;
	}
	> span {
		@extend .f-fl;
		display: block;
        font-family:MicrosoftYaHei;
        font-size:14px;
        color:#AAAAAA;;
        line-height: 28px;
        > a {
            font-family:MicrosoftYaHei;
            font-size:14px;
            color:#38ABD0;;
            line-height:14px;
        }
        clear: both;
    }


	margin-top: 10px;
	margin-right: 10px;
	@extend .f-fl;
}

.m-uploadmaterial-delete{
    position: absolute;
    margin-left: 133px;
    margin-top: -8px;
    z-index: 1;
}

.m-uploadmaterial-ctrl{
	width: $m-uploadmaterial_item_ctrl_width;
	position: relative;

	.m-uploadmaterial-ctrl-picture-table{
		display: table;
		width: 140px;
		height: 140px;
		table-layout: fixed;
	}

	.m-uploadmaterial-ctrl-picture{
		width: 140px;
		height: 140px;
		background: #f5f5f5;
		border: 1px solid #DDD;
		display: table-cell;
        vertical-align: middle;
        text-align: center;
		> img {
            max-height: 100%;
            max-width: 100%;
	    }

	}

	.m-uploadmaterial-ctrl-button{
        width: 140px;
        height: 36px;
        overflow: hidden;
        position: relative;
        margin-top: 10px;

		 > input[type="button"], button{
            background:#339BBF;
            width:140px;
            height:36px;
            color: white;
            font-size: 14px;
        }

         > input[type="file"]{
            position: absolute;
            bottom: 0;
            opacity:0;
            font-size: 200px;
            left: 0;
        }
     }

	@extend .f-fl;
}

.m-uploadmaterial-desc{
	width: $m-uploadmaterial_item_desc_width;

	margin-left: 5px;
	margin-top: 151px;

	> input[type="button"], button{
        background:white;
        width:140px;
        height:36px;
        color: black;
        font-size: 14px;
        border-style:solid;
    }


	@extend .f-fl;
}