@import "./variables.less";
@import "./mixins.less";
@import "./core.less";
@import "./animation.less";

//loading
.u-loading{
	.mask(1050);
	.u-loading-box{
		.transformV_center(left,0);
		right: 0;
		.u-loading-icon{
			width: 30px;/*no*/
			height: 30px;/*no*/
			background-position: center;
			background-repeat: no-repeat;
			.bgImg("white_loading_icon.png");
			.background-size(cover);
			margin: 0 auto;
			.animation(loading 1s steps(12, end) infinite);
		}
		.u-loading-text{ 
    		color: @LOADING-COMPONENT-TEXT-COLOR;
			margin-top: 12px;
			text-align: center;
		}
	}
}

.keyframes(loading,{
  	0%{
        .transform(rotate3d(0,0,1,0deg));
  	}
  	100%{
        .transform(rotate3d(0,0,1,360deg));
  	}
});

.custom-loading();

//弹出框
.u-dialog{
	.mask();
	.u-dialog-box{
		.transform_center();
	    width: 250px;
	    background-color: @DIALOG-COMPONENT-BOX-BG;
	    border-radius: 12px;
	    .u-dialog-content{
		    padding: 15px;
		    text-align: center;
		    position: relative;
		    &:after{
		    	.defaultBorder();
		    }
		}
		.u-dialog-button{
		    display: table;
		    width: 100%;
		    table-layout: fixed;
		    border-collapse: separate;
		    .u-dialog-cancel,
		    .u-dialog-confirm{
			    display: table-cell;
			    color: @DIALOG-COMPONENT-BUTTON-COLOR;
			    text-align: center;
			    padding: 15px 0;
			    line-height: 1;
			    position: relative;
		    }
			.u-dialog-cancel:after{
			    content: '';
			    position: absolute;
			    top: 0;
			    bottom: 0;
			    right: 0;
			    width: 1px;/*no*/
			    .transform(scaleX(0.5));
			    background-color: @DEFAULT-BORDER-COLOR;
			}
		}
	}    
}

.fade-enter-active,
.fade-leave-active{
    .transition(opacity 0.5s linear);
}

.fade-enter,
.fade-leave-active{
    opacity: 0;
}

.custom-dialog();

//开关
.u-switch(){
	.u-switch{
	    position: relative;
	    width: 100px;
	    height: 50px;
		.u-switch-handle{
			.transform_center();
		    width: 50px;
		    height: 30px;
		    border: 2px solid;/*no*/
		    border-radius: 20px;
		    .transition(background-color ease-in-out 0.2s,border ease-in-out 0.2s);
		    &:before{
			    content: '';
			    position: absolute;
    			z-index: 1;
			    top: -1px;/*no*/
			    width: 28px;
    			height: 28px;
			    .transition(left 0.2s ease-in-out);
			    border-radius: 50%;
			    background-color: @SWITCH-COMPONENT-CIRCLE-BG;
			    .box-shadow(0 2px 5px @SWITCH-COMPONENT-CIRCLE-BOXSHADOW);
		    }
		}
		//开关 开
		&.u-switch-on .u-switch-handle{
		    border-color: @SWITCH-COMPONENT-ONSTATE-BORDER;
		    background-color: @SWITCH-COMPONENT-ONSTATE-BG;		    
		    &:before{
				left: 18px;
		    }
		} 
		//开关 关
		&.u-switch-off .u-switch-handle{
		    border-color: @SWITCH-COMPONENT-OFFSTATE-BORDER;
		    background-color: @SWITCH-COMPONENT-OFFSTATE-BG;
		    &:before{
    			left: -1px;/*no*/
		    }
		}
		//开关 不可控
		&.disabled{
			opacity: 0.3;
		}	
	}
}

//选择列表
.u-select(){
	.u-select{
	    width: 100%;
	    height: 100%;
	    overflow: auto;
	    position: relative;
	}
	.u-select-scroll .u-select-row{
		padding: 15px 45px 15px 20px;
		position: relative;
		.display-box();
		.box-vertical-alignment();
		.u-select-image{
			width: 50px;
			height: 50px;
			margin-right: 10px;
		}
		.u-select-icon{
			margin-right: 10px;
			.iconfont(@SELECT-COMPONENT-ICON-FONTSIZE);
		}
		div{
			.flex();
			min-width: 0;
		}
		.u-select-title{
		    .text_oneRow_ellipsis();
		}
		.u-select-subtitle{
		    .text_oneRow_ellipsis();
		}
		&:before{
		    content: '\e7a1';
		    .transformV_center(right,15px);
		    .defaultIconfont(@SELECT-COMPONENT-DEFAULTICON-FONTSIZE);
		    display: none;
		}		
		&:after{
			.defaultBorder();	
		}
		&.active:before{
			display: block;
		}
	}
	//上拉加载
	.u-select-load{
		text-align: center;
	}
	.u-select-tip{
		.transformV_center(left,0);
		width: 100%;
		text-align: center;
	}
}

//按钮
.u-button(){
	.u-button{
	    width: 240px;
	    color: @BUTTON-COMPONENT-COLOR;
	    font-size: inherit;
	    background-color: @BUTTON-COMPONENT-BG;
	    border-radius: 20px;
	    text-align: center;
    	line-height: 1;
    	margin: 0 auto;
	    padding: 10px 0;
	    .transition(all 0.2s linear);
	    background-clip: padding-box;
	    //按钮 active
	    .tap_row(@BUTTON-COMPONENT-ACTIVE-BG);
	   	//按钮 不可控
		&.disabled{
    		background-color: @BUTTON-COMPONENT-DISABLED-BG;
		}
	}
}

//输入框
.u-text(){
	.u-text{
	    width: 100%;
	    display: table;
	    position: relative;
		input{
    		display: table-cell;
		    width: 100%;
		    border: 0;
		    outline: 0;
		    -webkit-appearance: none;
		    padding: 20px 70px 20px 0;
		    background-color: @TEXT-COMPONENT-INPUT-BG;
		    &[type = text] ~ .u-text-see{
			    color: @TEXT-COMPONENT-TEXTINPUT-SEEICON-COLOR;
			}
		}
		.u-text-icon{
			.iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
		    width: 42px;
		    padding-left: 17px;
		    display: table-cell;
		    vertical-align: middle;
		}	
		.u-text-title{
		    width: 72px;
		    padding-left: 20px;
		    display: table-cell;
		    vertical-align: middle;
		}			
		.u-text-clear,
		.u-text-see{
		    position: absolute;
		    top: 0;
		    width: 30px;
		    height: 100%;
		    &:before{
		    	.transform_center();
		    	.defaultIconfont(@TEXT-COMPONENT-DEFAULTICON-FONTSIZE);
			}
		}	
		//x icon
		.u-text-clear{
			right: 30px;
			&:before{
			    content: '\e724';
			}
		}
		//眼睛 icon
		.u-text-see{
		    right: 0;
		    &:before{
			    content: '\e73c';
			}			
		}		
		&:after{
			.defaultBorder();	
		}
	}

    @media (max-height: 400px/*no*/){
        #app{
            height: 647px;
            position: relative;
        }
    }
}

//列表
.u-list(){
	.u-list{
	    width: 100%;
	    height: 100%;
	    overflow: auto;
	    position: relative;
	}
	.u-list-scroll .u-list-row{		
		padding: 15px 15px 15px 20px;
		position: relative;
		.display-box();
		.box-vertical-alignment();
	    .u-list-left-image{
			width: 50px;
			height: 50px;
			margin-right: 10px;
		}
		.u-list-left-icon{
			margin-right: 10px;
			.iconfont(@LIST-COMPONENT-ICON-FONTSIZE);
		}
		div{
			.flex();
			min-width: 0;
		}
		.u-list-title{
		    .text_oneRow_ellipsis();
		}
		.u-list-subtitle{
			.text_oneRow_ellipsis();
		}		
		.u-list-right-text{
		    margin-left: 4px;      
		}
		.u-list-right-icon{
			.defaultIconfont(@LIST-COMPONENT-DEFAULTICON-FONTSIZE);
		}		
		&:after{
			.defaultBorder();	
		}
	}
	//上拉加载
	.u-list-load{
	    text-align: center;
	}
	//list 无内容
	.u-list-tip{
		.transformV_center(left,0);
		width: 100%;
		text-align: center;
	}	
}

//侧滑列表
.u-swipe-list(){
	.u-swipe-list{
	    width: 100%;
	    height: 100%;
	    position: relative;
	    overflow: auto;
	} 	
	.u-swipe-list-scroll .u-swipe-list-row{
	    position: relative;
	    overflow: hidden;
		.u-swipe-list-handle{
		    position: relative;
		    .transition(left 0.4s ease);
		    left: 0;
    		background-color: @SWIPELIST-COMPONENT-ROW-BG;
		    padding: 15px 20px;
			.display-box();
			.box-vertical-alignment();
		    z-index: 2;
			.u-swipe-list-image{
			    width: 50px;
			    height: 50px;
			    margin-right: 10px;
			}	
			.u-swipe-list-icon{
				margin-right: 10px;
				.iconfont(@SWIPELIST-COMPONENT-ICON-FONTSIZE);
			}
			div{
			    .flex();
			    min-width: 0;
			}
			.u-swipe-list-title{
			    .text_oneRow_ellipsis();
			}	
			.u-swipe-list-subtitle{
				.text_oneRow_ellipsis();
			} 					    
		}
		.u-swipe-list-button{
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    right: 0;
		    z-index: 1;
		    div{
			    width: 60px;
			    height: 100%;
			    .display-box();
			    .box-horizontal-alignment();
			    .box-vertical-alignment();
			    color: @SWIPELIST-COMPONENT-BUTTON-COLOR;
			    float: left;
			    &:nth-last-of-type(1){
				    background-color: @SWIPELIST-COMPONENT-DELETEBUTTON-BG;
				}
				&:nth-last-of-type(2){
				    background-color: @SWIPELIST-COMPONENT-OTHERBUTTON-BG;
				}
			}
		}				    	
	    &:after{
	    	.defaultBorder();
		    z-index: 2;
		}
		&.active .u-swipe-list-handle{
			left: -120px;
		}	
	}
	//上拉加载
	.u-swipe-list-load{
	    text-align: center;
	}
	//swipeList 无内容
	.u-swipeList-tip{
		.transformV_center(left,0);
		width: 100%;
		text-align: center;
	}
}

//数字加减器
.u-number-adjustment(){
	.u-number-adjustment{
		position: relative;
		height: 100px;
		text-align: center;
		.u-number-adjustment-value{
		    font-size: @NUMBERADJUSTMENT-COMPONENT-VALUE-FONTSIZE;
		    display: inline-block;
		    width: 90px;
		}
		.down-arrow,
		.up-arrow{
		    position: absolute;
		    top: 0;
		    width: 50px;
		    height: 100%;
		    color: inherit;
		    background-color: @NUMBERADJUSTMENT-COMPONENT-ARROW-BG;
		    padding: 0;
		    .transition(none);
		    &:before{
		    	.transform_center();
		    	.defaultIconfont(@NUMBERADJUSTMENT-COMPONENT-DEFAULTICON-FONTSIZE);  	
		    }
		    &:active{
		    	background-color: @NUMBERADJUSTMENT-COMPONENT-ARROW-ACTIVE-BG;
		    }
		    &.disabled{
			    display: none;
			    background-color: @NUMBERADJUSTMENT-COMPONENT-ARROW-DISABLED-BG;
			}
		}
		//< icon
		.down-arrow{
		    left: 0; 
		    &:before{
			    content: '\e6c7';  
			}
		}
		//> icon
		.up-arrow{
		    right: 0;
		    &:before{
			    content: '\e6c8';
			}
		}	
	}
}

//展开列表
.u-folding-list(){
	.u-folding-list-row{
		position: relative;
		&:after{
			.defaultBorder();
		}
	}
	.u-folding-list-handle{
		padding: 15px 5px 15px 20px;
		position: relative;
		.display-box();
		.box-vertical-alignment();
		overflow: hidden;
		.u-folding-list-left-image{
			width: 50px;
			height: 50px;
			margin-right: 10px;
		}
		.u-folding-list-left-icon{
			margin-right: 10px;
			.iconfont(@FOLDINGLIST-COMPONENT-ICON-FONTSIZE);
		}
		div{
			.flex();
			min-width: 0;
		}
		.u-folding-list-title{
		    .text_oneRow_ellipsis();
		}
		.u-folding-list-subtitle{
			.text_oneRow_ellipsis();
		}
		.u-folding-list-right-text{
		    margin-left: 4px;  
		}
		.u-folding-list-right-icon{
		    .defaultIconfont(@FOLDINGLIST-COMPONENT-DEFAULTICON-FONTSIZE);
		    .transition(transform 0.5s);
		} 
	}
	.u-folding-list-content{
		overflow: hidden;
		height: 0;
		.transition(height 0.5s);
		background-color: @FOLDINGLIST-COMPONENT-CONTENT-BG;
	}
	.u-folding-list-button-group{
	    display: table;
	    width: 100%;
	    table-layout: fixed;
		.u-folding-list-button{
			display: table-cell;
			padding: 6px 0;
			.u-folding-list-button-bg{
				width: 35px;
				height: 35px;
				background-color: @FOLDINGLIST-COMPONENT-BUTTON-BG;
				border-radius: 25px;
				.iconfont(@FOLDINGLIST-COMPONENT-BUTTON-ICON-FONTSIZE,35px);
				text-align: center;
				margin: 0 auto;
			}	
		}
	}
	.active{
		.u-folding-list-handle .u-folding-list-right-icon{
			.transform(rotate(-180deg));
		}
		.u-folding-list-content{
			height: 47px;
		}
	}
}

//带联动选择器
.u-picker(){
	.u-picker-hd{
		height: 45px;
		text-align: center;
		position: relative;
		.u-picker-title{
			line-height: 45px;
		}
		.u-picker-cancel,
		.u-picker-confirm{
		    width: 45px;
			line-height: 45px;
		}
		.u-picker-cancel{
			float: left;
		}
		.u-picker-confirm{
			float: right;
		}
		&:after{
			.defaultBorder();
		}
	}
	.u-picker-data{
		.display-box();
		position: relative;
		height: 150px;
		.u-picker-wheel{
			.flex();
			overflow: hidden;
			.u-picker-row{
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
		}
		.u-picker-indicator{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 30px;
		    margin: auto;
		    pointer-events: none;
		    &:before{
		    	.defaultBorder(top);
		    }
			&:after{
				.defaultBorder();
			}
		}
		.u-picker-mask{
			position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    .linear-gradient(@PICKER-COMPONENT-MASK-GRADIENT-STARTCOLOR,@PICKER-COMPONENT-MASK-GRADIENT-CENTERCOLOR,@PICKER-COMPONENT-MASK-GRADIENT-ENDCOLOR);
		    background: linear-gradient(@PICKER-COMPONENT-MASK-GRADIENT-STARTCOLOR,@PICKER-COMPONENT-MASK-GRADIENT-CENTERCOLOR,@PICKER-COMPONENT-MASK-GRADIENT-ENDCOLOR);
		    opacity: 0.9;
		    pointer-events: none;
		}
	}
}

//无档位滑动条
.u-slide(){
	.u-slide{
	    position: relative;
	    padding: 0 25px;
	    margin: 20px 0;
	    height: 48px;
	    > div {
		    position: relative;
		    height: 30px;
			.u-slide-bg{
			    position: absolute;
			    top: 0;
			    bottom: 0;
			    left: 0;
			    width: 100%;
			    height: 10px;
			    margin: auto;
			    background-color: @SLIDE-COMPONENT-BG;
			    border-radius: 10px;
			    z-index: 1;
			}
			.u-slide-range{
			    position: absolute;
			    top: 0;
			    bottom: 0;
			    left: 0;
			    height: 10px;
			    margin: auto;
			    background-color: @SLIDE-COMPONENT-RANGE-BG;
			    border-radius: 10px;
			    z-index: 2;
			}
			.u-slide-handle{
			    position: absolute;
			    top: 50%;
			    left: 0;
			    width: 20px;
			    height: 20px;
			    margin: -10px 0 0 -10px;
			    background-color: @SLIDE-COMPONENT-HANDLE-BG;
			    border-radius: 100px;
			    z-index: 3;
			}
			.u-slide-value{
			    position: absolute;
			    top: -15px;
			    left: 0;
			    .transform(translateX(-50%));
			    font-size: @SLIDE-COMPONENT-VALUE-FONTSIZE;
			    z-index: 3;
			}
 		}
 		.u-slide-min,
 		.u-slide-max{
			font-size: @SLIDE-COMPONENT-MINMAXVALUE-FONTSIZE;
 		}
 		.u-slide-min{
		    float: left;
		    margin-left: -10px;
 		}
 		.u-slide-max{
		    float: right;
		    margin-right: -10px;
		}
		&.disabled{
	    	color: @SLIDE-COMPONENT-DISABLED-COLOR;
		    > div {
		    	.u-slide-range,
		    	.u-slide-handle{
		    		background-color: @SLIDE-COMPONENT-DISABLED-BG;
		    	}
		    }
		}
	}	
}

//图片轮播
.u-carousel(){
	.u-carousel{
	    width: 100%;
		height: 250px;
		overflow: hidden;
		position: relative;
		.u-carousel-inner{
			width: 100%;
		    white-space: nowrap;
		    font-size: 0;
		    .u-carousel-item{
		    	display: inline-block;
    			width: 100%;
		    	.u-carousel-image{
		    		width: 100%;
		    	}
		    }
		}
		.u-carousel-indicators{
			position: absolute;
			bottom: 10px;
		    left: 0;
		    width: 100%;
		    text-align: center;
		    font-size: 0;
		    li{
				width: 10px;
				height: 10px;
				background-color: @CAROUSEL-COMPONENT-INDICATORS-BG;
				border-radius: 50%;
				margin: 0 5px;
				display: inline-block;
				&.active{
					opacity: 0.6;
				}
		    }
		}
	}
}

//走马灯
.u-marquee(){
	.u-marquee{
		width: 100%;
		height: 25px;
		overflow: hidden;
		.u-marquee-text{
			display: inline-block;
			line-height: 25px;
		}
	}
}

.u-comm-loading(){
	.u-comm-loading{
		.mask(1050);
		.u-comm-loading-content{
			.transformV_center(left,0);
			right: 0;
			.loader{
				font-size: 16px;
				margin: 0 auto;
				width: 3.750em;
				height: 3.750em;
				position: relative;
				&:before{
					content: '';
				  	.margin_center(0.500em,0.500em);			  
				  	border-radius: 50%;
				  	.transform(translateZ(0) scale(0.55));  
				}
			}
			.icon{
				font-size: 16px;
				margin: 0 auto;
				width: 3.750em;
				height: 3.750em;
				position: relative;
				&:before{					
					.transform_center();
					.iconfont(4.125em);
				}
			}
			.u-comm-loading-text{
				font-size: 16px;
				margin-top: 20px;
				text-align: center;
			}
		}
		.u-comm-loading-button{
		    position: absolute;
		    bottom: 65px; 
		    left: 0;
		    right: 0;           
		    width: 240px;
		    color: @BUTTON-COMPONENT-COLOR;
		    font-size: inherit;
		    background-color: @BUTTON-COMPONENT-BG;
		    border-radius: 20px;
		    text-align: center;
	    	line-height: 1;
	    	margin: 0 auto;
		    padding: 10px 0;
		    .transition(all 0.2s linear);
		    background-clip: padding-box;
		    //按钮 active
		    .tap_row(@BUTTON-COMPONENT-ACTIVE-BG);
		   	//按钮 不可控
			&.disabled{
	    		background-color: @BUTTON-COMPONENT-DISABLED-BG;
			}				
		}
		//loading
		&.u-comm-loading-status-0{
			.u-comm-loading-content{
				color: #00ffff;
				.loader{
					display: block;
					&:before{
					  	.animation(commLoading 1.3s infinite linear);					
					}
				}
				.icon{
					display: none;
				}
			}
			.u-comm-loading-button{
				display: none;
			}
		}
		//绑定成功
		&.u-comm-loading-status-1{
			.u-comm-loading-content{
				color: #00ffff;
				.loader{
					display: none;
				}
				.icon{
					display: block;
					&:before{		
						content: '\e800';
					}
				}
			}
			.u-comm-loading-button{
				display: block;
			}
		}
		//绑定失败
		&.u-comm-loading-status-2{			
			.u-comm-loading-content{
				color: #fff;
				.loader{
					display: none;
				}
				.icon{
					display: block;
					&:before{
						content: '\e646';
					}
				}
			}
			.u-comm-loading-button{
				display: block;
			}
		}
	}

	.keyframes(commLoading,{
		0%,
	  	100% {
	    	.box-shadow(0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0);
	  	}
	  	12.5% {
	    	.box-shadow(0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
	  	}
	  	25% {
	    	.box-shadow(0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
	  	}
	  	37.5% {
	    	.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em);
	  	}
	  	50% {
	    	.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em);
	  	}
	  	62.5% {
	    	.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em);
	  	}
	  	75% {
	    	.box-shadow(0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0);
	  	}
	  	87.5% {
	    	.box-shadow(0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em);
	  	}
	});	
}

.u-process(){
    .u-process{
        .mask(1050);
        .u-process-content{
            .transformV_center(left,0);
            width: 100%;
            .loader{
                font-size: 16px;
                width: 3.750em;
                height: 3.750em;
                margin: 0 auto;
                position: relative;
                &:before{
                    content: '';
                    .margin_center(0.500em,0.500em);              
                    border-radius: 50%;
                    .transform(translateZ(0) scale(0.55)); 
                }
            }
            .icon{
                font-size: 16px;
                width: 3.750em;
                height: 3.750em;
                margin: 0 auto;
                position: relative;
                &:before{                   
                    .transform_center();
                    .iconfont(4.125em);
                }
            }
            .u-process-text{
                margin-top: 20px;
                text-align: center;
            }
        }
        .u-process-button{
            position: absolute;
            bottom: 65px;
            left: 0;
            width: 100%;            
            display: table;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 25px 0;
            li{        
//              display: table-cell;
//              color: @BUTTON-COMPONENT-COLOR;
//              font-size: inherit;
//              background-color: @BUTTON-COMPONENT-BG;
//              border-radius: 5px;
//              text-align: center;
//              line-height: 1;
//              padding: 10px 0;
//              .transition(all 0.2s linear);
//              background-clip: padding-box;
//              //按钮 active
//              .tap_row(@BUTTON-COMPONENT-ACTIVE-BG);
//              //按钮 不可控
//              &.disabled{
//                  background-color: @BUTTON-COMPONENT-DISABLED-BG;
//              }
            }               
        }
        //loading
        &.u-process-status-0{
            .u-process-content{
                color: #00ffff;
                .loader{
                    display: block;
                    &:before{
                        .animation(commLoading 1.3s linear infinite);                   
                    }
                }
                .icon{
                    display: none;
                }
            }
        }
        //成功 state
        &.u-process-status-1{
            .u-process-content{
                color: #00ffff;
                .loader{
                    display: none;
                }
                .icon{
                    display: block;
                    &:before{       
                        content: '\e800';
                    }
                }
            }
        }
        //失败 state
        &.u-process-status-2{   
            .u-process-content{
                color: #fff;
                .loader{
                    display: none;
                }
                .icon{
                    display: block;
                    &:before{
                        content: '\e646';
                    }
                }
            }
        }
    }

    .keyframes(commLoading,{
        0%,
        100% {
            .box-shadow(0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0);
        }
        12.5% {
            .box-shadow(0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
        }
        25% {
            .box-shadow(0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
        }
        37.5% {
            .box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em);
        }
        50% {
            .box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em);
        }
        62.5% {
            .box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em);
        }
        75% {
            .box-shadow(0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0);
        }
        87.5% {
            .box-shadow(0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em);
        }
    }); 
}


.edit-name(){
	.edit-name-text{
	    width: 100%;
	    display: table;
	    position: relative;
		input{
		    display: table-cell;
		    width: 80%;
		    border: 0;
		    outline: 0;
		    -webkit-appearance: none;
		    padding: 20px 0 20px 10px;
		    background-color: @EDITNAME-COMPONENT-INPUT-BG;
		    &[type = text] ~ .edit-name-see{
			    color: @EDITNAME-COMPONENT-TEXTINPUT-SEEICON-COLOR;
			}
		}
		.edit-name-icon{
			.iconfont(@EDITNAME-COMPONENT-ICON-FONTSIZE);
		    width: 35px;
		    padding-left: 10px;
		    display: table-cell;
		    vertical-align: middle;
		}	
		.edit-name-title{
		    width: 55px;
		    padding-left: 10px;
		    display: table-cell;
		    vertical-align: middle;
		}			
		.edit-name-clear,
		.edit-name-see{
		    position: absolute;
		    top: 0;
		    width: 30px;
		    height: 100%;
		    &:before{
		    	.transform_center();
		    	.defaultIconfont(@EDITNAME-COMPONENT-DEFAULTICON-FONTSIZE);
			}
		}	
		//x icon
		.edit-name-clear{
			right: 30px;
			&:before{
			    content: '\e724';
			}
		}
		//眼睛 icon
		.edit-name-see{
		    right: 0;
		    &:before{
			    content: '\e73c';
			}			
		}		
		&:after{
			.defaultBorder();
		}     
	}

	.edit-name-button{
	    width: 240px;
	    color: @EDITNAME-COMPONENT-BUTTON-COLOR;
	    font-size: inherit;
	    background-color: @EDITNAME-COMPONENT-BUTTON-BG;
	    border-radius: 20px;
	    text-align: center;
    	line-height: 1;
    	margin: 0 auto;
	    padding: 10px 0;
	    .transition(all 0.2s linear);
	    background-clip: padding-box;
	    //按钮 active
	    .tap_row(@EDITNAME-COMPONENT-BUTTON-ACTIVE-BG);
	   	//按钮 不可控
		&.disabled{
    		background-color: @EDITNAME-COMPONENT-BUTTON-DISABLED-BG;
		}
	}
}