third_party/polymer/components-chromium/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, initial-scale=1, user-scalable=no">
  13
  14   <title>paper-fab</title>
  15
  16   <script src="../platform/platform.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       margin: 0;
  27       padding: 24px;
  28       -webkit-user-select: none;
  29       -moz-user-select: none;
  30       -ms-user-select: none;
  31       user-select: none;
  32       -webkit-tap-highlight-color: rgba(0,0,0,0);
  33       -webkit-touch-callout: none;
  34       transform: translateZ(0);
  35       -webkit-transform: translateZ(0);
  36     }
  37
  38     paper-fab {
  39       color: #FFF;
  40       margin-right:2em;
  41     }
  42
  43     paper-fab.blue {
  44       background: #5677fc;
  45     }
  46
  47     paper-fab.green {
  48       background: #259b24;
  49     }
  50
  51     paper-fab.yellow {
  52       background: #ffeb3b;
  53       color: #000;
  54     }
  55
  56   </style>
  57
  58 </head>
  59 <body unresolved>
  60
  61   <h3>Regular</h3>
  62
  63   <paper-fab icon="arrow-forward"></paper-fab>
  64   <paper-fab icon="create" class="blue"></paper-fab>
  65
  66   <h3>Mini</h3>
  67
  68   <paper-fab icon="done" class="mini green"></paper-fab>
  69   <paper-fab icon="reply" class="mini yellow"></paper-fab>
  70
  71 </body>
  72 </html>