snapdrop/app/elements/buddy-finder/personal-avatar.html

<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../styles/icons.html">
<link rel="import" href="device-name.html">
<dom-module id="personal-avatar">
    <template>
        <style>
        :host {
            @apply(--layout-vertical);
            @apply(--layout-center);
            width: 360px;
            position: absolute;
            bottom: 16px;
            left: 50%;
            margin-left: -180px;
            z-index: 12;
            cursor: pointer;
        }
        
        :host:hover iron-icon,
        :host:hover device-name {
            color: #3367d6;
        }

        :host:hover iron-icon {
            transform: scale(1.05);
        }
        
        iron-icon {
            width: 80px;
            height: 80px;
            color: #4285f4;
            margin-bottom: 6px;
        }
        
        .paper-font-body1 {
            font-size: 13px;
        }
        
        .discover {
            color: #4285f4;
            line-height: 18px;
        }
        
        @media all and (max-width: 370px) {
            .discover {
                font-size: 12px;
            }
        }
        
        @media all and (max-height: 370px) {
            :host {
                bottom: 8px;
            }
            iron-icon {
                width: 32px;
                height: 32px;
                margin-bottom: 2px;
            }
            .slogan {
                display: none;
            }
        }
        </style>
        <device-name id="deviceName"></device-name>
        <iron-icon icon="chat:wifi-tethering"></iron-icon>
        <div class="paper-font-body1 slogan">
            The easiest way to transfer data across devices.
        </div>
        <div class="paper-font-body1 discover">
            Allow me to be discovered by: Everyone in this network.
        </div>
    </template>
    <script>
    'use strict';
    Polymer({
        is: 'personal-avatar',
        listeners: {
            'tap': '_openDeviceNameDialog'
        },
        _openDeviceNameDialog: function() {
            this.$.deviceName.open();
        }
    });
    </script>
</dom-module>