Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(222)

Side by Side Diff: polymer_1.0.4/bower_components/paper-toggle-button/demo/index.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!doctype html>
2 <!--
3 @license
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
8 Code distributed by Google as part of the polymer project is also
9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
10 -->
11 <html>
12 <head>
13 <title>paper-toggle-button demo</title>
14
15 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initia l-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="../../paper-styles/paper-styles.html">
21 <link rel="import" href="../../paper-styles/demo-pages.html">
22 <link rel="import" href="../paper-toggle-button.html">
23
24 <style is="custom-style">
25 .line {
26 margin-bottom: 40px;
27 }
28
29 .line span {
30 margin-left: 24px;
31 }
32
33 paper-toggle-button.blue {
34 --paper-toggle-button-checked-bar-color: var(--paper-light-blue-500);
35 --paper-toggle-button-checked-button-color: var(--paper-light-blue-500) ;
36 --paper-toggle-button-checked-ink-color: var(--paper-light-blue-500);
37 --paper-toggle-button-unchecked-bar-color: var(--paper-light-blue-900);
38 --paper-toggle-button-unchecked-button-color: var(--paper-light-blue-90 0);
39 --paper-toggle-button-unchecked-ink-color: var(--paper-light-blue-900);
40 }
41
42 paper-toggle-button.red {
43 --paper-toggle-button-checked-bar-color: var(--paper-red-500);
44 --paper-toggle-button-checked-button-color: var(--paper-red-500);
45 --paper-toggle-button-checked-ink-color: var(--paper-red-500);
46 --paper-toggle-button-unchecked-bar-color: var(--paper-red-900);
47 --paper-toggle-button-unchecked-button-color: var(--paper-red-900);
48 --paper-toggle-button-unchecked-ink-color: var(--paper-red-900);
49 }
50
51 paper-toggle-button.green {
52 --paper-toggle-button-checked-bar-color: var(--paper-green-500);
53 --paper-toggle-button-checked-button-color: var(--paper-green-500);
54 --paper-toggle-button-checked-ink-color: var(--paper-green-500);
55 --paper-toggle-button-unchecked-bar-color: var(--paper-green-900);
56 --paper-toggle-button-unchecked-button-color: var(--paper-green-900);
57 --paper-toggle-button-unchecked-ink-color: var(--paper-green-900);
58 }
59
60 paper-toggle-button.orange {
61 --paper-toggle-button-checked-bar-color: var(--paper-orange-500);
62 --paper-toggle-button-checked-button-color: var(--paper-orange-500);
63 --paper-toggle-button-checked-ink-color: var(--paper-orange-500);
64 --paper-toggle-button-unchecked-bar-color: var(--paper-orange-900);
65 --paper-toggle-button-unchecked-button-color: var(--paper-orange-900);
66 --paper-toggle-button-unchecked-ink-color: var(--paper-orange-900);
67 }
68 </style>
69 </head>
70 <body>
71 <div class="horizontal center-justified layout">
72 <div>
73 <h4>Enabled</h4>
74 <div class="horizontal-section">
75 <div class="line"><paper-toggle-button></paper-toggle-button><span>Oxy gen</span></div>
76 <div class="line"><paper-toggle-button></paper-toggle-button><span>Car bon</span></div>
77 <div class="line"><paper-toggle-button checked></paper-toggle-button>< span>Hydrogen</span></div>
78 <div class="line"><paper-toggle-button checked></paper-toggle-button>< span>Nitrogen</span></div>
79 <div class="line"><paper-toggle-button checked></paper-toggle-button>< span>Calcium</span></div>
80 </div>
81 </div>
82
83 <div>
84 <h4>Disabled</h4>
85 <div class="horizontal-section">
86 <div class="line"><paper-toggle-button disabled></paper-toggle-button> <span>Oxygen</span></div>
87 <div class="line"><paper-toggle-button disabled></paper-toggle-button> <span>Carbon</span></div>
88 <div class="line"><paper-toggle-button checked disabled></paper-toggle -button><span>Hydrogen</span></div>
89 <div class="line"><paper-toggle-button checked disabled></paper-toggle -button><span>Nitrogen</span></div>
90 <div class="line"><paper-toggle-button checked disabled></paper-toggle -button><span>Calcium</span></div>
91 </div>
92 </div>
93
94 <div>
95 <h4>Color</h4>
96 <div class="horizontal-section">
97 <div class="line"><paper-toggle-button class="blue"></paper-toggle-but ton><span>Oxygen</span></div>
98 <div class="line"><paper-toggle-button class="red"></paper-toggle-butt on><span>Carbon</span></div>
99 <div class="line"><paper-toggle-button checked class="orange"></paper- toggle-button><span>Hydrogen</span></div>
100 <div class="line"><paper-toggle-button checked class="green"></paper-t oggle-button><span>Nitrogen</span></div>
101 <div class="line"><paper-toggle-button checked class="blue"></paper-to ggle-button><span>Calcium</span></div>
102 </div>
103 </div>
104 </div>
105 </body>
106 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698