atajwala/designer.html

## designer.html
<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../core-animated-pages/transitions/slide-from-right.html">

<polymer-element name="my-element">

  <body unresolved fullbleed>
    <template is="auto-binding">
    <style>
    body {
  font-family: "RobotoDraft";
  font-weight: 300;
}

core-animated-pages {
  width: 85%;
  height: 85%;
  -webkit-user-select: none;
  overflow: hidden;
}

core-animated-pages > * {
  border-radius: 5px;
  font-size: 50px;
  background-color: white;
}

body /deep/ core-toolbar {
  background-color: #03a9f4;
  color: #fff;
}

core-menu {
  color: #01579b;
  margin: 10px 0 0 0;
}

core-menu > paper-item {
  transition: all 300ms ease-in-out;
}

core-menu > paper-item.core-selected {
  background: #e1f5fe;
}

@media all and (max-width: 480px) {
  core-animated-pages {
    width: 100%;
    height: 100%;
  }
}
    </style>

    <core-scaffold id="scaffold">

      <nav>
        <core-toolbar>
          <span>Single Page Polymer</span>
        </core-toolbar>
        <core-menu valueattr="hash" selected="{{route}}">
  				<template repeat="{{page in pages}}">
    				<paper-item label="{{page.name}}" hash="{{page.hash}}">
      				<a href="#{{page.hash}}"></a>
    				</paper-item>
  				</template>
				</core-menu>
      </nav>

      <!-- flex makes the bar span across the top of the main content area -->
			<core-toolbar tool flex>
  			<!-- flex spaces this element and jusifies the icons to the right-side -->
  			<div flex>Application</div>
  			<core-icon-button icon="refresh"></core-icon-button>
  			<core-icon-button icon="add"></core-icon-button>
			</core-toolbar>

      <div layout horizontal center-center fit>
  			<core-animated-pages valueattr="hash" selected="{{route}}" transitions="slide-from-right">
  				<template repeat="{{page in pages}}">
    				<section hash="{{page.hash}}" layout vertical center-center>
      				<div>{{page.name}}</div>
    				</section>
  				</template>
				</core-animated-pages>
			</div>

    </core-scaffold>
    </template>
  </body>

  <script>

    var template = document.querySelector('template[is="auto-binding"]');
      template.pages = [
        {name: 'Single', hash: 'one'},
        {name: 'page', hash: 'two'},
        {name: 'app', hash: 'three'}
      ];

    Polymer({

    });

  </script>

</polymer-element>
	<link rel="import" href="../core-scaffold/core-scaffold.html">
	<link rel="import" href="../core-header-panel/core-header-panel.html">
	<link rel="import" href="../core-menu/core-menu.html">
	<link rel="import" href="../core-item/core-item.html">
	<link rel="import" href="../core-icon-button/core-icon-button.html">
	<link rel="import" href="../core-toolbar/core-toolbar.html">
	<link rel="import" href="../core-menu/core-submenu.html">
	<link rel="import" href="../core-icons/core-icons.html">
	<link rel="import" href="../paper-item/paper-item.html">
	<link rel="import" href="../core-animated-pages/core-animated-pages.html">
	<link rel="import" href="../core-animated-pages/transitions/slide-from-right.html">

	<polymer-element name="my-element">

	<body unresolved fullbleed>
	<template is="auto-binding">
	<style>
	body {
	font-family: "RobotoDraft";
	font-weight: 300;
	}

	core-animated-pages {
	width: 85%;
	height: 85%;
	-webkit-user-select: none;
	overflow: hidden;
	}

	core-animated-pages > * {
	border-radius: 5px;
	font-size: 50px;
	background-color: white;
	}

	body /deep/ core-toolbar {
	background-color: #03a9f4;
	color: #fff;
	}

	core-menu {
	color: #01579b;
	margin: 10px 0 0 0;
	}

	core-menu > paper-item {
	transition: all 300ms ease-in-out;
	}

	core-menu > paper-item.core-selected {
	background: #e1f5fe;
	}

	@media all and (max-width: 480px) {
	core-animated-pages {
	width: 100%;
	height: 100%;
	}
	}
	</style>

	<core-scaffold id="scaffold">

	<nav>
	<core-toolbar>
	<span>Single Page Polymer</span>
	</core-toolbar>
	<core-menu valueattr="hash" selected="{{route}}">
	<template repeat="{{page in pages}}">
	<paper-item label="{{page.name}}" hash="{{page.hash}}">
	<a href="#{{page.hash}}"></a>
	</paper-item>
	</template>
	</core-menu>
	</nav>

	<!-- flex makes the bar span across the top of the main content area -->
	<core-toolbar tool flex>
	<!-- flex spaces this element and jusifies the icons to the right-side -->
	<div flex>Application</div>
	<core-icon-button icon="refresh"></core-icon-button>
	<core-icon-button icon="add"></core-icon-button>
	</core-toolbar>

	<div layout horizontal center-center fit>
	<core-animated-pages valueattr="hash" selected="{{route}}" transitions="slide-from-right">
	<template repeat="{{page in pages}}">
	<section hash="{{page.hash}}" layout vertical center-center>
	<div>{{page.name}}</div>
	</section>
	</template>
	</core-animated-pages>
	</div>

	</core-scaffold>
	</template>
	</body>

	<script>

	var template = document.querySelector('template[is="auto-binding"]');
	template.pages = [
	{name: 'Single', hash: 'one'},
	{name: 'page', hash: 'two'},
	{name: 'app', hash: 'three'}
	];

	Polymer({

	});

	</script>

	</polymer-element>