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

Side by Side Diff: third_party/polymer/components-chromium/paper-slider/demo.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 2 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 <html>
3 <head>
4 <title>paper-slider</title>
5
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0">
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-slider.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-slider {
30 width: 100%;
31 }
32
33 section {
34 max-width: 1000px;
35 padding: 20px 0;
36 background-color: #f0f0f0;
37 }
38
39 section > div {
40 padding: 14px;
41 }
42
43 .yellow-slider paper-slider::shadow #sliderKnobInner,
44 .yellow-slider paper-slider::shadow #sliderBar::shadow #activeProgress {
45 background-color: #f4b400;
46 }
47
48 .green-slider paper-slider::shadow #sliderKnobInner,
49 .green-slider paper-slider::shadow #sliderKnobInner::before,
50 .green-slider paper-slider::shadow #sliderBar::shadow #activeProgress {
51 background-color: #0f9d58;
52 }
53
54 #ratingsLabel {
55 padding-left: 12px;
56 color: #a0a0a0;
57 }
58
59 </style>
60
61 </head>
62 <body unresolved>
63
64 <section class="yellow-slider">
65
66 <div>Music, video, games &amp; other media</div>
67 <paper-slider value="50"></paper-slider>
68
69 <br>
70 <br>
71
72 <div>Notifications</div>
73 <paper-slider value="50"></paper-slider>
74
75 <br>
76 <br>
77
78 <div>Alarms</div>
79 <paper-slider value="80"></paper-slider>
80
81 </section>
82
83 <br>
84
85 <section>
86
87 <div center horizontal layout>
88 <div>R</div>
89 <paper-slider value="23" max="255" editable></paper-slider>
90 </div>
91
92 <br>
93 <br>
94
95 <div center horizontal layout>
96 <div>G</div>
97 <paper-slider value="183" max="255" editable></paper-slider>
98 </div>
99
100 <br>
101 <br>
102
103 <div center horizontal layout>
104 <div>B</div>
105 <paper-slider value="211" max="255" editable></paper-slider>
106 </div>
107
108 </section>
109
110 <br>
111
112 <section class="green-slider">
113
114 <div>Brightness</div>
115 <br>
116 <paper-slider pin value="50"></paper-slider>
117
118 </section>
119
120 <br>
121
122 <section class="green-slider">
123
124 <div>
125 <span>Ratings</span><span id="ratingsLabel"></span>
126 </div>
127 <br>
128 <paper-slider id="ratings" pin snaps max="10" step="1" value="5"></paper-sli der>
129
130 </section>
131
132 <script>
133
134 var ratings = document.querySelector('#ratings');
135 ratings.addEventListener('change', function() {
136 document.querySelector('#ratingsLabel').textContent = ratings.value;
137 });
138
139 </script>
140
141 </body>
142 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698