third_party/polymer/components-chromium/paper-checkbox/demo.html

   1 <!--
   2     @license
   3     Copyright (c) 2014 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>paper-checkbox</title>
  14
  15   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  16   <meta name="mobile-web-app-capable" content="yes">
  17   <meta name="apple-mobile-web-app-capable" content="yes">
  18
  19   <script src="../webcomponentsjs/webcomponents.js"></script>
  20
  21   <link rel="import" href="paper-checkbox.html">
  22   <link rel="import" href="../font-roboto/roboto.html">
  23   <link rel="import" href="../core-label/core-label.html">
  24
  25   <style shim-shadowdom>
  26
  27     body {
  28       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  29       margin: 0;
  30       padding: 24px;
  31       -webkit-user-select: none;
  32       -moz-user-select: none;
  33       -ms-user-select: none;
  34       user-select: none;
  35       -webkit-tap-highlight-color: rgba(0,0,0,0);
  36       -webkit-touch-callout: none;
  37     }
  38
  39     paper-checkbox {
  40       padding: 20px 20px 20px 0;
  41     }
  42
  43     section {
  44       width: 300px;
  45     }
  46
  47     paper-checkbox.blue::shadow #ink[checked] {
  48       color: #4285f4;
  49     }
  50
  51     paper-checkbox.blue::shadow #checkbox.checked {
  52       border-color: #4285f4;
  53     }
  54
  55   </style>
  56
  57 </head>
  58 <body unresolved>
  59
  60   <core-label horizontal layout>
  61     <paper-checkbox for></paper-checkbox>
  62     <div vertical layout>
  63       <h4>Notifications</h4>
  64       <div>Notify me about updates to apps or games that I've downloaded</div>
  65     </div>
  66   </core-label>
  67
  68   <br>
  69
  70   <core-label horizontal layout>
  71     <paper-checkbox checked for></paper-checkbox>
  72     <div vertical layout>
  73       <h4>Auto-updates</h4>
  74       <div>Auto-update apps over wifi only</div>
  75     </div>
  76   </core-label>
  77
  78   <br>
  79
  80   <core-label horizontal layout>
  81     <paper-checkbox for></paper-checkbox>
  82     <div vertical layout>
  83       <h4>Clear search history</h4>
  84       <div>Remove all the searches you have ever performed</div>
  85     </div>
  86   </core-label>
  87
  88   <br>
  89   <br>
  90   <br>
  91
  92   <section>
  93
  94     <h3>Sound</h3>
  95
  96     <core-label center horizontal layout>
  97       <div flex>Touch sounds</div>
  98       <paper-checkbox class="blue" checked for></paper-checkbox>
  99     </core-label>
 100
 101     <core-label center horizontal layout>
 102       <div flex>Screen lock sound</div>
 103       <paper-checkbox class="blue" for></paper-checkbox>
 104     </core-label>
 105
 106     <core-label center horizontal layout>
 107       <div flex>Vibrate on touch</div>
 108       <paper-checkbox class="blue" for></paper-checkbox>
 109     </core-label>
 110
 111   </section>
 112
 113 </body>
 114 </html>