third_party/polymer/components/core-scaffold/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <html>
  11 <head>
  12   <title>core-scaffold</title>
  13
  14   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  15   <meta name="mobile-web-app-capable" content="yes">
  16   <meta name="apple-mobile-web-app-capable" content="yes">
  17
  18   <script src="../webcomponentsjs/webcomponents.js"></script>
  19
  20   <link rel="import" href="core-scaffold.html">
  21   <link rel="import" href="../core-header-panel/core-header-panel.html">
  22   <link rel="import" href="../core-menu/core-menu.html">
  23   <link rel="import" href="../core-item/core-item.html">
  24
  25   <style>
  26
  27     html, body {
  28       height: 100%;
  29       margin: 0;
  30     }
  31
  32     body {
  33       font-family: sans-serif;
  34     }
  35
  36     core-scaffold {
  37       position: absolute;
  38       top: 0;
  39       right: 0;
  40       bottom: 0;
  41       left: 0;
  42     }
  43
  44     .content {
  45       background-color: #fff;
  46       height: 5000px;
  47       padding: 20px;
  48     }
  49
  50     /* some default styles for mode="cover" on core-scaffold */
  51     core-scaffold[mode=cover]::shadow core-header-panel::shadow #mainContainer {
  52       left: 120px;
  53     }
  54
  55     core-scaffold[mode=cover] .content {
  56       margin: 20px 100px 20px 0;
  57     }
  58
  59   </style>
  60
  61 </head>
  62
  63 <body unresolved>
  64
  65   <core-scaffold>
  66
  67     <core-header-panel navigation flex mode="seamed">
  68       <core-toolbar style="background-color: #526E9C; color: #fff;">Application</core-toolbar>
  69       <core-menu>
  70         <core-item icon="settings" label="item1"></core-item>
  71         <core-item icon="settings" label="item2"></core-item>
  72       </core-menu>
  73     </core-header-panel>
  74
  75     <div tool>Title</div>
  76
  77     <div class="content">Content goes here...</div>
  78
  79   </core-scaffold>
  80
  81 </body>
  82 </html>