Permalink
Find file
3dcf5d4 May 10, 2016
71 lines (64 sloc) 1.99 KB
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/iron-icon/iron-icon.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="na-login">
<template>
<style>
:host {
position: absolute;
top: 46px;
left: 0;
right: 0;
bottom: 0;
background-color: var(--paper-purple-500);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
color: var(--paper-purple-50);
@apply(--layout);
@apply(--layout-center-center);
}
:host([signed-in]) {
opacity: 0;
pointer-events: none;
}
paper-button > * {
vertical-align: middle;
text-transform: none;
}
</style>
<paper-button on-tap="signIn" disabled="[[disabled]]">
<iron-icon icon="account-circle"></iron-icon>
<span>Sign in with Google</span>
</paper-button>
</template>
<script>
Polymer({
is: 'na-login',
properties: {
disabled: {
type: Boolean,
reflectToAttribute: true,
value: false
},
signedIn: {
type: Boolean,
reflectToAttribute: true,
value: false
}
},
signIn: function() {
this.fire('sign-in', null, { bubbles: false });
}
});
</script>
</dom-module>