<div id="app">
    <div class="app-container">
        <div class="header">
            Featured Article
        </div>
        <div class="bkg-image"></div>
        <div class="content-container">Crazed squirrel steals peoples nutz!</div>
        <social-share :distance="150" :scale="0.8">
            <button class="share-button" slot="social-item"><i class="fa fa-facebook" aria-hidden="true"></i></button>
            <button class="share-button" slot="social-item"><i class="fa fa-twitter" aria-hidden="true"></i></button>
            <button class="share-button" slot="social-item"><i class="fa fa-tumblr" aria-hidden="true"></i></button>
            <button class="share-button" slot="social-item"><i class="fa fa-facebook" aria-hidden="true"></i></button>
            <button class="share-button" slot="social-item"><i class="fa fa-twitter" aria-hidden="true"></i></button>
        </social-share>
        <social-share position="right">
            <button class="share-button" slot="social-item"><i class="fa fa-pinterest" aria-hidden="true"></i></button>
            <button class="share-button" slot="social-item"><i class="fa fa-snapchat" aria-hidden="true"></i></button>
            <button class="share-button" slot="social-item"><i class="fa fa-github" aria-hidden="true"></i></button>
        </social-share>
    </div>
</div>

html
    background-image: radial-gradient(circle, #72F274 0%, #27332C 200%)
    height: 100vh
    width: 100vw
    font-family: Roboto,san-serif;
.app-container
    margin-left: auto
    margin-right:auto
    max-width: 460px
    position: relative
    max-height: 680px
    height: 100vh
    background: white
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24)
    & > .header 
        background: #546E7A
        padding: 16px
        color: white
        font-size: 22px
    & > .bkg-image
        background: url(https://vuetifyjs.com/public/doc-images/carousel/squirrel.jpg)
        background-size: cover
        width: 100%
        height: 180px
    & > .content-container
        padding: 16px
        font-size: 16px
    
.share-button
    z-index: 100
    transition: .3s cubic-bezier(0,0,.2,1)
    display: flex
    align-items: center
    justify-content: center
    cursor: pointer
    border-style: none
    outline: 0
    height: 64px
    width: 64px
    background-color: #546E7A
    border-radius: 100%
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    &:active
          box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
    i
        color: white 
        font-size: 30px
    
.social-share-container
    z-index: 1000
    position: absolute
    bottom: 16px
    left: 16px
    &.right
        right: 16px
        left: initial
    &>.share-container > *
        transition: .3s cubic-bezier(0,0,.2,1)
        position: absolute;
        z-index: -1
        bottom: 0;
        
            

Vue.component('social-share', {
    props: {
        distance: {
            type: Number,
            default: 100        
        },
        position: {
            type: String,
            default: 'left'
        },
        scale: {
            type: Number,
            default: 1
        }
    },
    data: function() {
        return {
            opened: false
        }
    },
    methods: {
        calcRotation: function(index) {
            if (this.$slots['social-item'].length == 1) {
                return 45;
            }
            return ( 90 / (this.$slots['social-item'].length-1) ) * index;
        },
        open: function() {
            this.opened = !this.opened;
            
            this.$slots['social-item'].forEach((item, index) => {
                let angle = this.calcRotation(index) * Math.PI/180;
                angle *= this.position === 'left' ? -1 : 1;
                const x = -Math.sin(angle) * this.distance,
                      y = this.distance*Math.cos(angle);
                
                item.elm.style = `transform: translate(${x}px,-${y}px) scale(${this.scale})`;
                if (!this.opened) {
                    item.elm.style = `transform: translate(0,0) scale(0)`;
                }
            });
        }
    }, 
    template: `
        <div class="social-share-container" v-bind:class="{right: position !== 'left'}">
            <button class="share-button" v-on:click="open">
                <i class="material-icons" v-if="!opened">share</i>
                <i class="material-icons" v-if="opened">close</i>
            </button>
            <div class="share-container" v-bind:class="{opened: opened}">
                <slot name="social-item"></slot>
            </div>
        </div>
    `
});

new Vue({
   el: '#app'
});