third_party/polymer/components/core-layout/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-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, core-layout {
  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       <core-layout core-flex>
  55         <div>Hi I'm some content</div>
  56         <core-layout core-flex vertical>
  57           <core-layout align="center">
  58             <h3>Title</h3>
  59             <button>hello</button>
  60           </core-layout>
  61           <core-layout core-flex>
  62             <div core-flex class="core-relative">
  63               Main content
  64               <div class="abs">abs pos :)</div>
  65             </div>
  66             <div>Sidebar content</div>
  67           </core-layout>
  68           <div>Some more stuffs...</div>
  69           <core-layout justify="end">
  70             <b>Footer</b>
  71           </core-layout>
  72         </core-layout>
  73         <div>A last bit, like a panel</div>
  74       </core-layout>
  75     </template>
  76   </polymer-element>
  77
  78   <h3>core-layout example</h3>
  79   <layout-demo></layout-demo>
  80
  81 </body>
  82 </html>