$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-btn {

&:before {

top: -$toolbar-size;

}

&:after {

top: 0;

}

}

&:after {

@include opacity(1);

@include scale(1);

}

}

&:after {

content: "";

position: absolute;

right: $toolbar-size - 6;

bottom: -10px;

width: 172px;

background: url('../img/toolbar_img.png') no-repeat;

@include opacity(0);

@include transform-origin(95% 95%);

@include scale(0.01);

@include transition(all .5s);

}

}

.toolbar-item-weixin {

&:after {

content: "";

height: 212px;

background-position: 0 0;

}

.toolbar-btn {

@extend .icon-happy;

&:after {

content: "公众\a账号"

}

}

}

.toolbar-item-feedback {

.toolbar-btn {

@extend .icon-bubbles;

&:after {

content: "意见\a反馈"

}

}

}

.toolbar-item-app {

&:after {

content: "";

height: 194px;

background-position: 0 -222px;

}

.toolbar-btn {

@extend .icon-mobile;

&:after {

content: "APP\a下载"

}

}

}

.toolbar-item-top {

.toolbar-btn {

@extend .icon-arrow-up2;

&:after {

content: "返回\a顶部"

}

}

}

.toolbar-btn {

&, &:before, &:after {

position: absolute;

left: 0;

width: $toolbar-size;

height: $toolbar-size;

}

&:before, &:after {

content: "";

color: #fff;

text-align: center;

@include transition(top .5s);

}

top: 0;

overflow: hidden;

@extend [class^="icon-"];

&:before { // icon

top: 0;

line-height: $toolbar-size;

background: #d0d6d9;

font-size: 30px;

}

&:after { // text

top: $toolbar-size;

line-height: 1.2;

padding-top: 12px;

background: #98a1a6;

font-size: 12px;

white-space: pre;

}

}