← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-drawer-panel/demo/index.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/paper-drawer-panel/demo/index.html
 
1
<!doctype html>
 
2
<!--
 
3
Copyright (c) 2015 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>paper-drawer-panel demo</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-lite.js"></script>
 
19
 
 
20
    <link rel="import" href="../../paper-styles/demo-pages.html">
 
21
    <link rel="import" href="../../paper-button/paper-button.html">
 
22
    <link rel="import" href="../paper-drawer-panel.html">
 
23
 
 
24
    <style is="custom-style">
 
25
 
 
26
      #paperDrawerPanel [main] {
 
27
        text-align: center;
 
28
        background-color: var(--google-grey-100);
 
29
      }
 
30
 
 
31
      #paperDrawerPanel [drawer] {
 
32
        border-right: 1px solid var(--google-grey-300);
 
33
      }
 
34
 
 
35
      #paperDrawerPanel[right-drawer] [drawer] {
 
36
        border-left: 1px solid var(--google-grey-300);
 
37
      }
 
38
 
 
39
      paper-button {
 
40
        color: white;
 
41
        margin: 10px;
 
42
        background-color: var(--google-blue-700);
 
43
        white-space: nowrap;
 
44
      }
 
45
 
 
46
      button {
 
47
        display: block;
 
48
        line-height: 40px;
 
49
        background-color: transparent;
 
50
        border: none;
 
51
        font-size: 14px;
 
52
        margin: 20px;
 
53
      }
 
54
 
 
55
    </style>
 
56
  </head>
 
57
 
 
58
  <body unresolved>
 
59
 
 
60
    <paper-drawer-panel id="paperDrawerPanel" force-narrow>
 
61
      <div drawer>
 
62
        <button tabindex="0">Options</button>
 
63
        <button tabindex="0">Settings</button>
 
64
        <button tabindex="0" paper-drawer-toggle>Close drawer</button>
 
65
      </div>
 
66
      <div main>
 
67
        <div>
 
68
          <paper-button onclick="flipDrawer()" raised>flip drawer</paper-button>
 
69
        </div>
 
70
        <div>
 
71
          <paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
 
72
        </div>
 
73
      </div>
 
74
    </paper-drawer-panel>
 
75
 
 
76
    <script>
 
77
      (function(global) {
 
78
 
 
79
        'use strict';
 
80
 
 
81
        var DRAWER_ATTR = 'right-drawer';
 
82
 
 
83
        var pdp = document.getElementById('paperDrawerPanel');
 
84
 
 
85
        global.flipDrawer = function() {
 
86
          if (pdp.hasAttribute(DRAWER_ATTR)) {
 
87
            pdp.removeAttribute(DRAWER_ATTR);
 
88
          } else {
 
89
            pdp.setAttribute(DRAWER_ATTR, '');
 
90
          }
 
91
        }
 
92
 
 
93
      }(this));
 
94
    </script>
 
95
 
 
96
  </body>
 
97
</html>