@font-face {
    font-family: 'social-sharer';
    src: url('//at.alicdn.com/t/font_zgropjjcewd8to6r.eot');
    src: url('//at.alicdn.com/t/font_zgropjjcewd8to6r.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_zgropjjcewd8to6r.woff') format('woff'),
    url('//at.alicdn.com/t/font_zgropjjcewd8to6r.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_zgropjjcewd8to6r.svg#social-sharer') format('svg');
}

.social-sharer {
    .icon {
        display: inline-block;
        margin: 0 3px;
        width: 30px;
        height: 30px;
        font-size: 18px;
        line-height: 31px;
        text-align: center;
        border: 1px solid currentColor;
        border-radius: 50%;
        vertical-align: middle;
        text-decoration: none;
        transition: .3s;

        &:before {
            font-family: 'social-sharer';
            font-weight: normal;
            font-style: normal;
            font-size: 18px;
            line-height: 1;
            text-transform: none;
            letter-spacing: normal;
            word-wrap: normal;
            white-space: nowrap;
            direction: ltr;

            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: 'liga';
        }

        &:hover {
            color: #fff;
        }
    }

    $plantforms: (weibo,     #E6162D, "\e600"),
                 (qzone,     #F3B73D, "\e602"),
                 (renren,    #0070CE, "\e606"),
                 (qq,        #28A8E2, "\e603"),
                 (wechat,    #0cc417, "\e60a"),
                 (douban,    #007706, "\e604"),
                 (facebook,  #3b5999, "\e607"),
                 (twitter,   #1da1f2, "\e608"),
                 (linkedin,  #0077B6, "\e605"),
                 (gplus,     #dd4b39, "\e609"),
                 (evernote,  #79C13A, "\e601"),
                 (yingxiang, #79C13A, "\e601"),
                 (email,     #1C9FF7, "\e60b"),
                 (webshare,  #00BCD4, "\e60c");

    @each $plantform, $color, $code in $plantforms {
        .icon-#{$plantform} {
            color: $color;
            border-color: $color;

            &:before {
                content: $code;
            }
            &:hover {
                background-color: $color;
            }
        }
    }

    .qrcode-box {
        position: absolute;
        bottom: 100%;
        margin-bottom: 20px;
        left: -1px * (260 - 30) / 2;
        width: 260px;
        padding: 20px 0;
        border-radius: 3px;
        background: #fff;
        box-shadow: 0 10px 50px rgba(0,0,0,.5);
        text-align: center;
        font-size: 14px;
        cursor: default;
        opacity: 0;
        visibility: hidden;
        transform: scale(.5);
        transform-origin: 50% 100%;
        transition: .3s;

        &:after {
            content: "";
            position: absolute;
            bottom: -20px;
            left: 50%;
            margin-left: -10px;
            border: 10px solid transparent;
            border-top-color: #fff;
            width: 0;
            height: 0;
        }

        h4 {
            font-size: 1em;
            line-height: 1;
            margin: 0;
        }
        img {
            display: block;
            width: 260px;
            height: 260px;
        }
        p {
            margin: 0;
            color: #666;
            line-height: 1;
        }
    }

    .icon-wechat {
        position: relative;

        &:hover {
            .qrcode-box {
                color: #222;
                opacity: 1;
                visibility: visible;
                transform: none;
            }
        }
    }
}