@import 'base.less';
@hamburger-size : 30px;
.t-btn{
	position: relative;
	display: block;
	line-height: 2.5;
	font-size: 16px;
	text-align: center;
	color: #fff;
	border-radius: 3px;

	&--normal{
		background-color: @color-blue;

		&:active{
			background-color: #3895F5;
		}
	}

	&--warn{
		background-color: @color-red;

		&:active{
			background-color: #ef3737;
		}
	}

	&--default{
		color: @font-color-87;
		background-color: #f5f5f5;

		&:active{
			background-color: #ddd;
		}
	}

	&:after{
		display: block;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		height: 200%;
		-webkit-transform: scale(.5);
	    transform: scale(.5);
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    border: 1px solid rgba(0,0,0,.2);
		border-radius: 6px;
		box-sizing: border-box;
	}
}
/**
 * Hamburger
 */
.t-hamburger-common{
	display:block;
	list-style: none;
	height: @hamburger-size / 6;
	margin-bottom: 7px;
	background-color: #fff;
}
.t-hamburger{
	display:block;
	width: @hamburger-size;
	height: @hamburger-size;
	padding: @hamburger-size / 3;
	background-color: @color-blue;

	li{
		.t-hamburger-common;
	}
	&:before,
	&:after{
		content: '';
		.t-hamburger-common;
	}

	&:before{
		-webkit-animation: hb-top-close 400ms ease-out forwards;
		animation: hb-top-close 400ms ease-out forwards;
	}

	&:after{
		-webkit-animation: hb-bottom-close 400ms ease-out forwards;
		animation: hb-bottom-close 400ms ease-out forwards;
	}
	li{
		-webkit-animation: hb-middle-close 400ms ease-out forwards;
		animation: hb-middle-close 400ms ease-out forwards;
	}

	&.open{
		&:before{
			-webkit-animation: hb-top 400ms ease-out forwards;
			animation: hb-top 400ms ease-out forwards;
		}

		&:after{
			-webkit-animation: hb-bottom 400ms ease-out forwards;
			animation: hb-bottom 400ms ease-out forwards;
		}
		li{
			-webkit-animation: hb-middle 400ms ease-out forwards;
			animation: hb-middle 400ms ease-out forwards;
		}
	}
}
@-webkit-keyframes hb-top{ 
    0%{ 
    	-webkit-transform: translate3d(0,0,0) rotate(0); 
    } 
    50%{ 
    	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(0); 
    } 
    100%{ 
    	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(45deg); 
    }
}
@keyframes hb-top{ 
    0%{ 
    	-webkit-transform: translate3d(0,0,0) rotate(0); 
    } 
    50%{ 
    	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(0); 
    } 
    100%{ 
    	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(45deg); 
    }
}

@-webkit-keyframes hb-top-close{ 
    100%{ 
    	-webkit-transform: translate3d(0,0,0) rotate(0); 
    } 
    50%{ 
    	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(0); 
    } 
    0%{ 
    	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(45deg); 
    }
}
@keyframes hb-top-close{ 
    100%{ 
    	-webkit-transform: translate3d(0,0,0) rotate(0); 
    } 
    50%{ 
    	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(0); 
    } 
    0%{ 
    	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(45deg); 
    }
}

    
    
@-webkit-keyframes hb-bottom{ 
    0%{ 
    	-webkit-transform: translate3d(0,0,0) rotate(0); 
    } 
    50%{ 
    	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(0); 
    } 
    100%{ 
    	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(-45deg); 
    }
}
@keyframes hb-bottom{ 
    0%{ 
    	-webkit-transform: translate3d(0,0,0) rotate(0); 
    } 
    50%{ 
    	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(0); 
    } 
    100%{ 
    	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(-45deg); 
    }
}
    
@-webkit-keyframes hb-bottom-close{ 
    100%{ 
    	-webkit-transform: translate3d(0,0,0) rotate(0); 
    } 
    50%{ 
    	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(0); 
    } 
    0%{ 
    	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(-45deg); 
    }
}
@keyframes hb-bottom-close{ 
    100%{ 
    	-webkit-transform: translate3d(0,0,0) rotate(0);
    } 
    50%{ 
    	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(0); 
    } 
    0%{ 
    	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(-45deg); 
    }
}
    
    
@-webkit-keyframes hb-middle{ 
    0%{ 
    	opacity:1;
    } 
    50%{ 
    	opacity: 1;
    } 
    51%{ 
    	opacity:0;
    } 
    100%{ 
    	opacity:0;
    }
}
@keyframes hb-middle{ 
    0%{ 
    	opacity:1;
    } 
    50%{ 
    	opacity: 1;
    } 
    51%{ 
    	opacity:0;
    } 
    100%{ 
    	opacity:0;
    }
}
    
@-webkit-keyframes hb-middle-close{ 
    0%{
    	opacity:0;
    } 
    50%{
    	opacity: 0;
    } 
    51%{
    	opacity:1;
    } 
    100%{
    	opacity:1;
    }
}
@keyframes hb-middle-close{ 
    0%{
    	opacity:0;
    } 
    50%{
    	opacity: 0;
    } 
    51%{
    	opacity:1;
    } 
    100%{
    	opacity:1;
    }
}

