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

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