third_party/polymer/components/core-layout/demo-parent.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-layout demo</title>
  13
  14   <script src="../platform/platform.js"></script>
  15   <link rel="import" href="core-layout.html">
  16
  17   <style>
  18     body {
  19       font-size: 20px;
  20     }
  21
  22     layout-demo {
  23       height: 300px;
  24     }
  25
  26   </style>
  27
  28 </head>
  29 <body unresolved>
  30
  31   <polymer-element name="layout-demo" noscript>
  32     <template>
  33       <style>
  34         div {
  35           box-sizing: border-flow;
  36           -moz-flow-sizing: border-flow;
  37           border: 2px solid #ccc;
  38         }
  39
  40         .abs {
  41           position: absolute;
  42           font-size: 14px;
  43           padding: 4px;
  44           right: 10%;
  45           bottom: 10px;
  46           height: 30px;
  47           width: 70px;
  48           border-radius: 10px;
  49           background: seagreen;
  50           border: none;
  51         }
  52       </style>
  53       <core-layout></core-layout>
  54       <div core-flex>
  55         <core-layout></core-layout>
  56         <div>Hi I'm some content</div>
  57         <div core-flex>
  58           <core-layout vertical></core-layout>
  59           <div>
  60             <core-layout align="center"></core-layout>
  61             <h3>Title</h3>
  62             <button>hello</button>
  63           </div>
  64           <div core-flex>
  65             <core-layout></core-layout>
  66             <div core-flex class="core-relative">
  67               Main content
  68               <div class="abs">abs pos :)</div>
  69             </div>
  70             <div>Sidebar content</div>
  71           </div>
  72           <div>Some more stuffs...</div>
  73           <div>
  74             <core-layout justify="end"></core-layout>
  75             <b>Footer</b>
  76           </div>
  77         </div>
  78         <div>A last bit, like a panel</div>
  79       </div>
  80     </template>
  81   </polymer-element>
  82
  83   <h3>core-layout example</h3>
  84   <layout-demo></layout-demo>
  85
  86 </body>
  87 </html>