PairDrop/app/elements/x-cards/x-cards.html
Robin Linus e756a3fd0c Squashed commit of the following:
commit 5b7ac6f0f56f3888c01049f08b6b47dbeb3bcfb0
Author: Robin Linus <robin_woll@capira.de>
Date:   Wed Dec 30 18:06:48 2015 +0100

    Clean up about and social links

commit 9c7da37d1e8f58f1c45626289fbab336fc982a0f
Author: Robin Linus <robin_woll@capira.de>
Date:   Wed Dec 30 18:06:35 2015 +0100

    Change Slogan

commit fcea5cfb5c6928acabce44caacc1d75fafdab447
Author: Robin Linus <robin_woll@capira.de>
Date:   Wed Dec 30 18:06:22 2015 +0100

    Add shorturl

commit f09e9e42c30aa7b26df2a5fb00bec653f3ad68e1
Author: Robin Linus <robin_woll@capira.de>
Date:   Wed Dec 30 16:56:55 2015 +0100

    initial
2015-12-30 18:07:37 +01:00

105 lines
3.1 KiB
HTML

<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="../../styles/icons.html">
<link rel="import" href="../invitation-link/invitation-link.html">
<dom-module id="x-cards">
<template>
<style>
:host {
display: block;
overflow: hidden;
}
#placeholder {
opacity: 0;
background-color: grey;
@apply(--layout-fit);
}
paper-icon-button {
color: #52524F;
}
paper-icon-button:hover {
color: #4285f4;
}
.share {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
}
.share a {
color: #52524F;
text-decoration: none;
padding-left: 8px;
padding-right: 8px;
}
.share a:hover,
#btn:hover {
color: #4285f4;
}
</style>
<div id="placeholder"></div>
<div id="container">
<div class="share">
<paper-icon-button id="btn" icon="chat:info-outline" on-tap="_switch"></paper-icon-button>
</div>
<content select="div"></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'x-cards',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
animationConfig: {
value: function() {
return {
'entry': [{
name: 'reverse-ripple-animation',
id: 'reverse-ripple',
toPage: this
}],
'exit': [{
name: 'fade-out-animation',
node: this.$.container,
timing: {
delay: 150,
duration: 0
}
}, {
name: 'ripple-animation',
id: 'ripple',
fromPage: this
}]
};
}
},
sharedElements: {
value: function() {
return {
'ripple': this.$.btn,
'reverse-ripple': this.$.btn
};
}
}
},
_switch: function() {
document.querySelector('#pages').select(1);
}
});
})();
</script>