dlstatic / static-wappnr · Files

@import "var";

/**
	m/m_bar
	左下角工具条
*/
.m-bar{
	position: absolute;
}
.m-bar-bg{
	position: fixed;
	left: 0;
	top:0;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: none;
}

.m-bar-content{
	position: fixed;
	z-index: 1000;
	left: 20px;
	bottom: 65px;
	text-align: center;
	.m-bar-btn{
		position: relative;
		width: 46px;
		height: 46px;
		border-radius: 100%; 
		background: @hbg-color;
		border: 2px #fff solid;
		z-index: 1001;
	}
	.m-bar-icon{
		margin: 0;
		display: inline-block;
		height: 100%;
	}
	a{
		position: absolute;
		width: 50px;
		height: 50px;
		background: @bg-fff;
		border-radius: 100%; 
		font-size: 12px;
		color: #666;
		display: none;
		overflow: hidden;
	}
	p{
		line-height: normal;
		margin-top: -2px;
	}
	.icon{
		display: inline-block;
		width: 18px;
		height: 18px;
		line-height: normal;
		margin-top: 5px;
		.bg-img;
	}
	.icon-home{
		background-position: 0 -309px;
	}
	.icon-me{
		background-position: -23px -309px;
	}
	.icon-order{
		background-position: -48px -309px;
	}
}

.m-bar.open{ 
	.m-bar-content{
	
		a{
			display: block;
		}
		.bar-home{
			animation: as1 0.3s;
			-moz-animation: as1 0.3s;	/* Firefox */
			-webkit-animation: as1 0.3s;	/* Safari 和 Chrome */
			-o-animation: as1 0.3s;	/* Opera */
			left: 0;
			top:-70px;
		}
		
		.bar-me{
			animation: as2 0.3s;
			-moz-animation: as2 0.3s;	/* Firefox */
			-webkit-animation: as2 0.3s;	/* Safari 和 Chrome */
			-o-animation: as2 0.3s;	/* Opera */
			top: -52px;
			left:60px;
		}
		.bar-order{
			animation: as3 0.3s;
			-moz-animation: as3 0.3s;	/* Firefox */
			-webkit-animation: as3 0.3s;	/* Safari 和 Chrome */
			-o-animation: as3 0.3s;	/* Opera */
			bottom: -10px;
			left:70px;
		}
	}
}
// .bar-home
.open-home{
	from {top:0;}
	to {top:-70px;}
}
@keyframes as1
{
	.open-home
}

@-moz-keyframes as1
{
	.open-home
}

@-webkit-keyframes as1
{
	.open-home
}

@-o-keyframes as1 
{
	.open-home
}
// .bar-me
.open-me{
	from {top:0;left: 0}
	to {top: -52px;left:60px;}
}
@keyframes as2
{
	.open-me
}

@-moz-keyframes as2
{
	.open-me
}

@-webkit-keyframes as2
{
	.open-me
}

@-o-keyframes as2 
{
	.open-me
}

// .bar-order
.open-order{
	from {bottom:0;left: 0}
	to {bottom: -10px;left:70px;}
}
@keyframes as3
{
	.open-order
}

@-moz-keyframes as3
{
	.open-order
}

@-webkit-keyframes as3
{
	.open-order
}

@-o-keyframes as3
{
	.open-order
}

.m-bar.close{

	.m-bar-content{
		a{
			display: block;
		}
		.bar-home{
			animation: as1-1 0.3s;
			-moz-animation: as1-1 0.3s;	/* Firefox */
			-webkit-animation: as1-1 0.3s;	/* Safari 和 Chrome */
			-o-animation: as1-1 0.3s;	/* Opera */
			left: 0;
			top:0;
		}
		
		.bar-me{
			animation: as2-1 0.3s;
			-moz-animation: as2-1 0.3s;	/* Firefox */
			-webkit-animation: as2-1 0.3s;	/* Safari 和 Chrome */
			-o-animation: as2-1 0.3s;	/* Opera */
			left: 0;
			top:0;
		}
		.bar-order{
			animation: as3-1 0.3s;
			-moz-animation: as3-1 0.3s;	/* Firefox */
			-webkit-animation: as3-1 0.3s;	/* Safari 和 Chrome */
			-o-animation: as3-1 0.3s;	/* Opera */
			left: 0;
			top:0;
		}
	}
}

// .bar-home
.close-home{
	from {top:-70px;}
	to {top:0;}
}
@keyframes as1-1
{
	.close-home
}

@-moz-keyframes as1-1
{
	.close-home
}

@-webkit-keyframes as1-1
{
	.close-home
}

@-o-keyframes as1-1 
{
	.close-home
}
// .bar-me
.close-me{
	from {bottom: -10px;left:70px;}
	to {bottom:0;left: 0}
}
@keyframes as2-1
{
	.close-me
}

@-moz-keyframes as2-1
{
	.close-me
}

@-webkit-keyframes as2-1
{
	.close-me
}

@-o-keyframes as2-1 
{
	.close-me
}

// .bar-order
.close-order{
	from {bottom: -10px;left:70px;}
	to {bottom:0;left: 0}
}
@keyframes as3-1
{
	.close-order
	
}

@-moz-keyframes as3-1
{
	from {bottom: -10px;left:70px;}
	.close-order
}

@-webkit-keyframes as3-1
{
	.close-order
}

@-o-keyframes as3-1
{
	.close-order
}