Skip to content

Instantly share code, notes, and snippets.

@AutoSponge

AutoSponge/index.html

Last active August 29, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AutoSponge/e5585d3f5cc96fcac374 to your computer and use it in GitHub Desktop.
Save AutoSponge/e5585d3f5cc96fcac374 to your computer and use it in GitHub Desktop.
Download ZIP
designer
Raw
index.html
<!doctype html>
<html>
<head>
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<script src="../components/platform/platform.js"></script>
<link rel="import" href="my-app.html">
<style>
body, html {
margin: 0;
height: 100%;
}
my-app {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body unresolved touch-action="auto">
<my-app></my-app>
</body>
</html>
Raw
my-app.html
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="../components/paper-tabs/paper-tab.html">
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<!--<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">-->
<!--<link rel="import" href="../components/core-animated-pages/transitions/cross-fade.html">-->
<!--<link rel="import" href="../components/core-animated-pages/transitions/slide-down.html">-->
<!--<link rel="import" href="../components/core-animated-pages/transitions/slide-up.html">-->
<!--<link rel="import" href="../components/core-animated-pages/transitions/tile-cascade.html">-->
<polymer-element name="my-app">
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
font-family: 'RobotoDraft', sans-serif;
}
core-card {
width: 300px;
height: 300px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0 2px 4px, rgba(0, 0, 0, 0.0980392) 0 0 3px;
background-color: rgb(255, 255, 255);
}
#app {
width: 100%;
height: 100%;
/*border: 5px solid rgb(204, 204, 204);*/
left: 0;
top: 0;
position: absolute;
}
#menu {
color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.2) 0 3px 2px;
background-color: rgb(50, 140, 200);
}
#menu::shadow #selectionBar {
background-color: rgb(255, 255, 255);
}
paper-tab::shadow #ink {
color: rgb(255, 255, 255);
}
core-animated-pages {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-color: rgb(238, 238, 238);
}
</style>
<section id="app" layout vertical>
<paper-tabs id="menu" selected="0">
<paper-tab active>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
</paper-tabs>
<section id="content" flex relative>
<core-animated-pages selected="{{ $.menu.selected }}" notap>
<section layout vertical center center-justified active>
<core-card>hi</core-card>
</section>
<section></section>
</core-animated-pages>
</section>
</section>
</template>
<script>
Polymer( 'my-app', {
} );
</script>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment