← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/iron-range-behavior/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/iron-range-behavior/demo/index.html
 
1
<!--
 
2
@license
 
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
<!doctype html>
 
11
<html>
 
12
  <head>
 
13
    <title>iron-range-behavior demo</title>
 
14
 
 
15
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
16
 
 
17
    <link rel="import" href="../iron-range-behavior.html">
 
18
    <link rel="import" href="../../iron-input/iron-input.html">
 
19
 
 
20
    <style>
 
21
 
 
22
      body {
 
23
        font-family: sans-serif;
 
24
      }
 
25
 
 
26
    </style>
 
27
  </head>
 
28
  
 
29
  <body unresolved>
 
30
 
 
31
     <dom-module id="x-progressbar">
 
32
      <style>
 
33
        :host {
 
34
          display: block;
 
35
          height: 40px;
 
36
          background-color: #555;
 
37
          border-radius: 4px;
 
38
          padding: 8px;
 
39
          box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5);
 
40
        }
 
41
 
 
42
        .progress {
 
43
          background-color: #999;
 
44
          height: 100%;
 
45
          border-radius: 4px;
 
46
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
 
47
        }
 
48
 
 
49
        .progress-value {
 
50
          padding: 0 8px;
 
51
          font-size: 18px;
 
52
          color: #fff;
 
53
        }
 
54
      </style>
 
55
      <template>
 
56
        <div class="progress" horizontal center layout style$="{{_computeStyle(ratio)}}">
 
57
          <div class="progress-value"><span>{{ratio}}</span>%</div>
 
58
        </div>
 
59
      </template>
 
60
    </dom-module>
 
61
 
 
62
    <script>
 
63
      HTMLImports.whenReady(function() {
 
64
        Polymer({
 
65
          is: 'x-progressbar',
 
66
 
 
67
          behaviors: [Polymer.IronRangeBehavior],
 
68
 
 
69
          _computeStyle: function(ratio) {
 
70
            return 'width: ' + ratio + '%;';
 
71
          }
 
72
        });
 
73
      });
 
74
    </script>
 
75
 
 
76
    <x-progressbar min="0" max="200" value="120"></x-progressbar>
 
77
 
 
78
  </body>
 
79
</html>