← 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-icon-button/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-icon-button/demo/index.html
 
1
<!doctype html>
 
2
<!--
 
3
@license
 
4
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
5
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
6
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
7
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
8
Code distributed by Google as part of the polymer project is also
 
9
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
10
-->
 
11
<html>
 
12
  <head>
 
13
    <title>paper-icon-button demo</title>
 
14
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
15
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
16
 
 
17
    <link rel="import" href="../../iron-icons/iron-icons.html">
 
18
    <link rel="import" href="../../paper-styles/color.html">
 
19
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
 
20
    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
 
21
    <link rel="import" href="../paper-icon-button.html">
 
22
 
 
23
    <style is="custom-style" include="demo-pages-shared-styles">
 
24
      paper-icon-button {
 
25
        margin-left: 10px;
 
26
        margin-right: 10px;
 
27
      }
 
28
    </style>
 
29
  </head>
 
30
  <body unresolved>
 
31
    <div class="vertical-section-container centered">
 
32
      <h3>Buttons can use iron-icons or external images, and can be disabled</h3>
 
33
      <demo-snippet class="centered-demo">
 
34
        <template>
 
35
          <paper-icon-button icon="favorite" title="heart"></paper-icon-button>
 
36
          <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
 
37
          <paper-icon-button disabled icon="reply" title="reply"></paper-icon-button>
 
38
        </template>
 
39
      </demo-snippet>
 
40
 
 
41
      <h3>Buttons can hide the ripple effect using the <i>noink</i> attribute</h3>
 
42
      <demo-snippet class="centered-demo">
 
43
        <template>
 
44
          <paper-icon-button noink icon="find-in-page" title="find"></paper-icon-button>
 
45
        </template>
 
46
      </demo-snippet>
 
47
 
 
48
      <h3>Buttons can be styled using regular CSS and custom properties</h3>
 
49
      <demo-snippet class="centered-demo">
 
50
        <template>
 
51
          <style is="custom-style">
 
52
            paper-icon-button.pink {
 
53
              color: var(--paper-pink-500);
 
54
              --paper-icon-button-ink-color: var(--paper-indigo-500);
 
55
            }
 
56
            paper-icon-button.pink:hover {
 
57
              background-color: var(--paper-pink-500);
 
58
              color: white;
 
59
            }
 
60
            paper-icon-button.blue {
 
61
              --paper-icon-button-ink-color: var(--paper-orange-500);
 
62
              background-color: var(--paper-light-blue-500);
 
63
              color: white;
 
64
              border-radius: 3px;
 
65
              padding: 2px;
 
66
            }
 
67
          </style>
 
68
          <paper-icon-button icon="favorite" title="heart" class="pink"></paper-icon-button>
 
69
          <paper-icon-button icon="flight-takeoff" title="take off" class="blue"></paper-icon-button>
 
70
        </template>
 
71
      </demo-snippet>
 
72
 
 
73
      <h3>Buttons can be resized</h3>
 
74
      <demo-snippet class="centered-demo">
 
75
        <template>
 
76
          <style is="custom-style">
 
77
            paper-icon-button.giant {
 
78
              width: 100px;
 
79
              height: 100px;
 
80
            }
 
81
          </style>
 
82
          <paper-icon-button icon="alarm-on" title="wake up" class="giant"></paper-icon-button>
 
83
        </template>
 
84
      </demo-snippet>
 
85
 
 
86
      <h3>Buttons can be used as a link</h3>
 
87
      <demo-snippet class="centered-demo">
 
88
        <template>
 
89
          <a href="https://www.polymer-project.org" tabindex="-1">
 
90
            <paper-icon-button icon="polymer"></paper-icon-button>
 
91
          </a>
 
92
          <style>
 
93
            a paper-icon-button,
 
94
            a:active paper-icon-button,
 
95
            a:visited paper-icon-button {
 
96
              color: #000000;
 
97
            }
 
98
          </style>
 
99
        </template>
 
100
      </demo-snippet>
 
101
    </div>
 
102
  </body>
 
103
</html>