snapchat-link.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="social-link-behavior.html">

<!--
`snapchat-link`
@demo demo/index.html 
-->

<dom-module id="snapchat-link">
<template>
    <style>
    :host {
        display: inline-block;
    }
    a{
        text-decoration: none;
        color: black;
    }
        a:hover{
        text-decoration: underline;
        color: black;
    }
    .container {
        cursor: hand;
        cursor: pointer;
        @apply(--layout-horizontal);
    }
    p {
        margin: 0px 0px 0px 5px;
        @apply(--layout-flex-none)
    }
    </style>

<a href="{{href}}" target="_blank" style="color:{{color}}">
    <div class="container">

        <svg viewBox="0 0 17.26 16.11" style="height:{{height}};fill:{{color}}; padding-left: 15px">
        <path d="M17.07,12.62A4.78,4.78,0,0,1,13.8,9.81v0a0.66,0.66,0,0,1-.08-0.53,1.52,1.52,0,0,1,.91-0.52l0.23-.08a1.15,1.15,0,0,0,.93-0.94A0.81,0.81,0,0,0,15.2,7a1.06,1.06,0,0,0-.4-0.08,0.9,0.9,0,0,0-.37.08,1.9,1.9,0,0,1-.68.2,0.65,0.65,0,0,1-.18,0l0-.29V6.84a8.6,8.6,0,0,0-.22-3.51A4.66,4.66,0,0,0,9,.54H8.69A4.66,4.66,0,0,0,4.36,3.33a8.59,8.59,0,0,0-.22,3.51l0,0.34a0.67,0.67,0,0,1-.22,0A1.81,1.81,0,0,1,3.2,7a1,1,0,0,0-1.26.59c-0.05.29,0.06,0.7,0.92,1L3.12,8.73A1.5,1.5,0,0,1,4,9.25a0.69,0.69,0,0,1-.09.56,4.91,4.91,0,0,1-3.33,2.8,0.46,0.46,0,0,0-.39.48,0.59,0.59,0,0,0,0,.2c0.19,0.44.91,0.75,2.28,1a2.86,2.86,0,0,1,.08.33c0,0.13.06,0.27,0.1,0.41a0.5,0.5,0,0,0,.52.38,2.31,2.31,0,0,0,.41-0.06,4.38,4.38,0,0,1,.89-0.1,3.91,3.91,0,0,1,.63.05,3,3,0,0,1,1.18.61,3.45,3.45,0,0,0,2.28.76H8.83a4.32,4.32,0,0,0,2.55-.76,3.06,3.06,0,0,1,1.18-.61,3.93,3.93,0,0,1,.64-0.05,4.42,4.42,0,0,1,.89.09,2.2,2.2,0,0,0,.43,0A0.49,0.49,0,0,0,15,15c0-.14.07-0.27,0.1-0.41a2.94,2.94,0,0,1,.08-0.33c1.34-.21,2-0.51,2.22-1a0.59,0.59,0,0,0,0-.2A0.47,0.47,0,0,0,17.07,12.62Z" transform="translate(-0.2 -0.54)"/>
        </svg>

        <template is="dom-if" if="{{text}}">
            <p style="color:{{color}}; font-size: {{height}};">Snapchat<p>
        </template>
    </div>
</a>

</template>

<script>
    Polymer({

    is: 'snapchat-link',
    behaviors: [
        SocialLinkBehavior
    ],
    properties: {
        color: {
            value: "#fffc00"
        }
    }


    });
</script>
</dom-module>