demo-css.html revision 1320f92c476a1ad9d19dba2a48c72b75566198e9 
1<!DOCTYPE html>
2<!--
3Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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-box;
36          -moz-box-sizing: border-box;
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      <link rel="stylesheet" href="core-layout.css">
54      <link rel="stylesheet" href="core-layout-host.css">
55      <div class="core-flex core-h">
56        <div>Hi I'm some content</div>
57        <div class="core-flex core-v">
58          <div class="core-h core-align-center">
59            <h3>Title</h3>
60            <button>hello</button>
61          </div>
62          <div class="core-flex core-h">
63            <div class="core-flex core-relative">
64              Main content
65              <div class="abs">abs pos :)</div>
66            </div>
67            <div>Sidebar content</div>
68          </div>
69          <div>Some more stuffs...</div>
70          <div class="core-h core-justify-end">
71            <b>Footer</b>
72          </div>
73        </div>
74        <div>A last bit, like a panel</div>
75      </div>
76    </template>
77  </polymer-element>
78
79  <h3>core-layout example</h3>
80  <layout-demo></layout-demo>
81  
82</body>
83</html>
84