????

/*
@mixin?toolbar-item($pos,$hoverPos)?{
??background-position:?0?$pos;

??&:hover?{
????background-position:?0?$hoverPos;
??}
}

$toolbar-size:?52px;
.toolbar-item,?.toolbar-layer?{
??background-image:?url(../img/toolbar.png);
}

.toolbar?{
??position:?fixed;
??left:?50%;
??bottom:?5px;
??margin-left:?-$toolbar-size?/?2;
}

.toolbar-item?{
??position:?relative;
??display:?block;
??width:?$toolbar-size;
??height:?$toolbar-size;
??margin-top:?1px;
??transition:?background-position?1s;
??@include?transition(background-position?1s);

??&:hover?{
????.toolbar-layer?{
??????opacity:?1;
??????@include?opacity(1);
??????@include?scale(1);
????}
??}
}

.toolbar-item-weixin?{
??@include?toolbar-item(-798px,?-860px);

??.toolbar-layer?{
????height:?212px;
????background-position:?0?0;
??}
}

.toolbar-item-feedback?{
??@include?toolbar-item(-426px,?-488px);
}

.toolbar-item-app?{
??@include?toolbar-item(-550px,?-612px);

??.toolbar-layer?{
????height:?194px;
????background-position:?0?-222px;
??}
}

.toolbar-item-top?{
??@include?toolbar-item(-674px,?-736px);
}

.toolbar-layer?{
??position:?absolute;
??right:?$toolbar-size?-?6;
??bottom:?-10px;
??width:?172px;
??@include?opacity(0);
??@include?transform-origin(95%?95%);
??@include?scale(0.01);
??@include?transition(all?1s)
}*/


$toolbar-size:?52px;
.toolbar?{
??position:?fixed;
??left:?50%;
??bottom:?5px;
??margin-left:?-$toolbar-size?/?2;
}

.toolbar-item?{
??position:?relative;
??display:?block;
??width:?$toolbar-size;
??height:?$toolbar-size;
??margin-top:?1px;

??&:hover?{
????.toolbar-icon?{
??????top:?-$toolbar-size;
????}

????.toolbar-text?{
??????top:?0;
????}

????.toolbar-layer?{
??????@include?opacity(1);
??????@include?scale(1);
????}
??}
}

.toolbar-btn?{
??position:?absolute;
??left:?0;
??top:?0;
??width:?$toolbar-size;
??height:?$toolbar-size;
??overflow:?hidden;
}

.toolbar-icon?{
??position:?absolute;
??left:?0;
??top:?0;
??width:?$toolbar-size;
??height:?$toolbar-size;
??background-color:?#d0d6d9;
??font-size:?30px;
??color:?#fff;
??text-align:?center;
??line-height:?$toolbar-size;
??@include?transition(top?1s);
}

.toolbar-text?{
??position:?absolute;
??left:?0;
??top:?$toolbar-size;
??width:?$toolbar-size;
??height:?$toolbar-size;
??background-color:?#98a1a6;
??padding-top:?12px;
??font-size:?12px;
??color:?#fff;
??text-align:?center;
??line-height:?1.2;
??@include?transition(top?1s);
}

.toolbar-layer?{
??position:?absolute;
??right:?$toolbar-size?-?6;
??bottom:?-10px;
??width:?172px;
??background-image:?url(../../img/toolbar_img.png);
??background-repeat:?no-repeat;
??@include?opacity(0);
??@include?transform-origin(95%?95%);
??@include?scale(0.01);
??@include?transition(all?1s);
}

.toolbar-layer-weixin?{
??height:?212px;
??background-position:?0?0;
}

.toolbar-layer-app?{
??height:?194px;
??background-position:?0?-222px;
}