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">
<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;
        }
        
        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;
            }
        }
        </style>
        <iron-icon icon="chat:wifi-tethering"></iron-icon>
        <div class="paper-font-body1">
            The easiest way to transfer files.
        </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'
    });
    </script>
</dom-module>