1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<html>
12  <head>
13    <title>paper-checkbox demo</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-lite.js"></script>
20    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
21    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
22    <link rel="import" href="../paper-checkbox.html">
23
24    <style is="custom-style" include="demo-pages-shared-styles">
25      paper-checkbox {
26        display: block;
27        margin-right: 24px;
28      }
29
30      demo-snippet {
31        margin-bottom: 40px;
32      }
33      .vertical-section-container {
34        max-width: 550px;
35      }
36    </style>
37  </head>
38  <body unresolved>
39    <div class="vertical-section-container centered">
40      <h3>Checkboxes can be checked or unchecked, or disabled entirely</h3>
41      <demo-snippet class="centered-demo">
42        <template>
43          <paper-checkbox>Checkbox</paper-checkbox>
44          <paper-checkbox checked>Checkbox</paper-checkbox>
45          <paper-checkbox disabled>Disabled</paper-checkbox>
46        </template>
47      </demo-snippet>
48
49      <h3>Checkboxes can hide the ripple effect using the <i>noink</i> attribute</h3>
50      <demo-snippet class="centered-demo">
51        <template>
52          <paper-checkbox noink>Checkbox</paper-checkbox>
53        </template>
54      </demo-snippet>
55
56      <h3>Checkboxes can be styled using custom properties</h3>
57      <demo-snippet class="centered-demo small-text">
58        <template>
59          <style is="custom-style">
60            paper-checkbox.red {
61              --paper-checkbox-checked-color: var(--paper-red-500);
62              --paper-checkbox-checked-ink-color: var(--paper-red-500);
63              --paper-checkbox-unchecked-color: var(--paper-red-900);
64              --paper-checkbox-unchecked-ink-color: var(--paper-red-900);
65              --paper-checkbox-label-color: var(--paper-red-500);
66              --paper-checkbox-vertical-align: top;
67            }
68
69            paper-checkbox.green {
70              align-self: center;
71              border: 1px solid var(--paper-green-200);
72              padding: 8px 16px;
73
74              --paper-checkbox-checked-color: var(--paper-green-500);
75              --paper-checkbox-checked-ink-color: var(--paper-green-500);
76              --paper-checkbox-unchecked-color: var(--paper-green-900);
77              --paper-checkbox-unchecked-ink-color: var(--paper-green-900);
78              --paper-checkbox-label-color: var(--paper-green-500);
79              --paper-checkbox-label-spacing: 0;
80              --paper-checkbox-margin: 8px 16px 8px 0;
81              --paper-checkbox-vertical-align: top;
82            }
83
84            paper-checkbox.blue {
85              --paper-checkbox-checked-color: var(--paper-blue-500);
86              --paper-checkbox-checked-ink-color: var(--paper-blue-500);
87              --paper-checkbox-unchecked-color: var(--paper-blue-900);
88              --paper-checkbox-unchecked-ink-color: var(--paper-blue-900);
89              --paper-checkbox-label-color: var(--paper-blue-500);
90              --paper-checkbox-label-checked-color: var(--paper-blue-900);
91            }
92
93            paper-checkbox .subtitle {
94              display: block;
95              font-size: 0.8em;
96              margin-top: 2px;
97              max-width: 150px;
98            }
99          </style>
100
101          <paper-checkbox class="red">
102            Checkbox
103            <span class="subtitle">With a subtitle</span>
104          </paper-checkbox>
105          <paper-checkbox checked class="green">
106            Checkbox
107            <span class="subtitle">
108              With a longer subtitle that wraps to another line
109            </span>
110          </paper-checkbox>
111          <paper-checkbox class="blue">Checkbox</paper-checkbox>
112        </template>
113      </demo-snippet>
114    </div>
115  </body>
116</html>
117