$toolbar-size: 52px;
@charset UTF-8;
.toolbar {
??? position: fixed;
??? left: 50%;
??? bottom: 10px;
??? 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 - 5px;
??????? bottom: -10px;
??????? width: 172px;
??????? background-image: url(../img/toolbar_img.png);
??????? background-repeat: no-repeat;
??????? @include opacity(0);
??????? @include origin(95% 95%);
??????? @include scale(0.01);
??????? @include transition(all 1s);
??? }
}

.toolbar-item-weixin {
??? &:after {
??????? content: "";
??????? height: 212px;
??????? background-position: 0 0;
??? }
??? .toolbar-btn {
??????? &:before {
??????????? content: "\e901";
??????? }
??????? &:after {
??????????? content: "微信分享";
??????? }
??? }
}

.toolbar-item-feedback {
??? .toolbar-btn {
??????? &:before {
??????????? content: "\e902";
??????? }
??????? &:after {
??????????? content: "意見反饋";
??????? }
??? }
}

.toolbar-item-app {
??? &:after {
??????? content: "";
??????? height: 194px;
??????? background-position: 0 222px;
??? }
??? .toolbar-btn {
??????? &:before {
??????????? content: "\e900";
??????? }
??????? &:after {
??????????? content: "APP下載";
??????? }
??? }
}

.toolbar-item-top {
??? .toolbar-btn {
??????? &:before {
??????????? content: "\e903";
??????? }
??????? &:after {
??????????? content: "返回頂部";
??????? }
??? }
}

.toolbar-btn {
??? position: absolute;
??? left: 0;
??? top: 0;
??? width: $toolbar-size;
??? height: $toolbar-size;
??? overflow: hidden;
?? ?
??? font-family: 'icomoon';
??? speak: none;
??? font-style: normal;
??? font-weight: normal;
??? font-variant: normal;
??? text-transform: none;
??? line-height: 1;

??? /* Better Font Rendering =========== */
??? -webkit-font-smoothing: antialiased;
??? -moz-osx-font-smoothing: grayscale;
?? ?
??? &:before {? // icon
??????? content: "";
??????? position: absolute;
??????? left: 0;
??????? top: 0;
??????? width: $toolbar-size;
??????? height: $toolbar-size;
??????? font-size: 30px;
??????? text-align: center;
??????? line-height: $toolbar-size;
??????? background-color: #d0d6d9;
??????? color: #fff;
??????? @include transition(top 1s);
??? }
??? &:after {?? // text
??????? content: "";
??????? position: absolute;
??????? left: 0;
??????? top: $toolbar-size;
??????? width: $toolbar-size;
??????? height: $toolbar-size;
??????? font-size: 12px;
??????? padding-top: 12px;
??????? text-align: center;
??????? line-height: 1.2;
??????? background-color: #98a1a6;
??????? color: #fff;
??????? @include transition(top 1s);
??? }
}