third_party/polymer/components/paper-fab/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright 2013 The Polymer Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style
   5 license that can be found in the LICENSE file.
   6 -->
   7 <html>
   8 <head>
   9
  10   <meta charset="utf-8">
  11   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  13
  14   <title>paper-fab</title>
  15
  16   <script src="../webcomponentsjs/webcomponents.js"></script>
  17
  18   <link href="../font-roboto/roboto.html" rel="import">
  19   <link href="../core-icons/core-icons.html" rel="import">
  20   <link href="paper-fab.html" rel="import">
  21
  22   <style shim-shadowdom>
  23
  24     body {
  25       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  26       font-size: 14px;
  27       margin: 0;
  28       padding: 24px;
  29       -webkit-user-select: none;
  30       -moz-user-select: none;
  31       -ms-user-select: none;
  32       user-select: none;
  33       -webkit-tap-highlight-color: rgba(0,0,0,0);
  34       -webkit-touch-callout: none;
  35     }
  36
  37     section {
  38       padding: 20px 0;
  39     }
  40
  41     section > div {
  42       padding: 14px;
  43       font-size: 16px;
  44     }
  45
  46     paper-fab {
  47       color: #fff;
  48       margin-right:2em;
  49     }
  50
  51     paper-fab.blue {
  52       background: #5677fc;
  53     }
  54
  55     paper-fab.green {
  56       background: #259b24;
  57     }
  58
  59     paper-fab.yellow {
  60       background: #ffeb3b;
  61     }
  62
  63   </style>
  64
  65 </head>
  66 <body unresolved>
  67
  68   <section>
  69
  70     <div>Regular</div>
  71
  72     <paper-fab icon="arrow-forward" title="arrow-forward"></paper-fab>
  73     <paper-fab icon="create" class="blue" title="create"></paper-fab>
  74
  75   </section>
  76
  77   <section>
  78
  79     <div>Mini</div>
  80
  81     <paper-fab mini icon="done" class="green" title="done"></paper-fab>
  82     <paper-fab mini icon="reply" class="yellow" title="reply"></paper-fab>
  83
  84   </section>
  85
  86 </body>
  87 </html>