UNPKG

api-console-assets

Version:

This repo only exists to publish api console components to npm

110 lines (85 loc) 2.91 kB
<!-- @license Copyright (c) 2015 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 --> <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <title>demo1</title> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="../../font-roboto/roboto.html"> <link rel="import" href="../../iron-icons/iron-icons.html"> <link rel="import" href="../../paper-icon-button/paper-icon-button.html"> <link rel="import" href="../app-drawer/app-drawer.html"> <link rel="import" href="../app-scroll-effects/app-scroll-effects.html"> <link rel="import" href="../app-header/app-header.html"> <link rel="import" href="../app-toolbar/app-toolbar.html"> <link rel="import" href="../demo/sample-content.html"> <style is="custom-style"> body { margin: 0; font-family: 'Roboto', 'Noto', sans-serif; background-color: #eee; } #startDrawer { --app-drawer-content-container: { box-shadow: 1px 0 2px 1px rgba(0,0,0,0.18); } } #endDrawer { --app-drawer-content-container: { box-shadow: -1px 0 2px 1px rgba(0,0,0,0.18); } } app-header { position: fixed; top: 0; left: 0; width: 100%; background-color: #4285f4; color: #fff; } app-header paper-icon-button { --paper-icon-button-ink-color: white; } sample-content { padding-top: 192px; } </style> </head> <body> <template is="dom-bind" id="app"> <app-header condenses reveals effects="waterfall"> <app-toolbar> <paper-icon-button icon="menu" on-tap="toggleLeft"></paper-icon-button> <div main-title></div> <paper-icon-button icon="shopping-cart" on-tap="toggleRight"></paper-icon-button> </app-toolbar> <app-toolbar></app-toolbar> <app-toolbar> <div spacer main-title>My App</div> </app-toolbar> </app-header> <app-drawer id="startDrawer" align="start"></app-drawer> <app-drawer id="endDrawer" align="end"></app-drawer> <sample-content size="100"></sample-content> </template> <script> (function(scope) { scope.toggleLeft = function() { this.$.startDrawer.toggle(); }; scope.toggleRight = function() { this.$.endDrawer.toggle(); }; })(document.querySelector('#app')); </script> </body> </html>