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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_0.5.0/bower_components/paper-dialog/demo.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 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
« no previous file with comments | « polymer_0.5.0/bower_components/paper-dialog/bower.json ('k') | polymer_0.5.0/bower_components/paper-dialog/index.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
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://polym er.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/CO NTRIBUTORS.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/P ATENTS.txt
9 -->
10 <!doctype html>
11 <html>
12 <head>
13
14 <meta charset="utf-8">
15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1, user-scalable=yes">
17
18 <title>paper-dialog</title>
19
20 <script src="../webcomponentsjs/webcomponents.js"></script>
21
22 <link href="../font-roboto/roboto.html" rel="import">
23 <link href="../paper-button/paper-button.html" rel="import">
24
25 <link href="paper-dialog.html" rel="import">
26 <link href="paper-action-dialog.html" rel="import">
27
28 <style shim-shadowdom>
29 body {
30 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
31 font-size: 14px;
32 margin: 0;
33 padding: 24px;
34 -webkit-tap-highlight-color: rgba(0,0,0,0);
35 -webkit-touch-callout: none;
36 }
37
38 section {
39 padding: 20px 0;
40 }
41
42 section > div {
43 padding: 14px;
44 font-size: 16px;
45 }
46
47 button {
48 margin: 8px 4px;
49 }
50
51 html /deep/ [autofocus] {
52 color: #03a9f4;
53 }
54
55 html /deep/ .scrolling::shadow #scroller {
56 height: 350px;
57 }
58
59 html /deep/ .colored {
60 border: 1px solid #0f9d58;
61 background-color: #b7e1cd;
62 color: #0f9d58;
63 }
64
65 html /deep/ .size-position {
66 position: fixed;
67 top: 16px;
68 right: 16px;
69 }
70
71 html /deep/ .size-position::shadow #scroller {
72 width: 300px;
73 height: 300px;
74 }
75
76 </style>
77
78 <!--
79 <style>
80 body {
81 -webkit-transform: translateZ(0);
82 transform: translateZ(0);
83 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
84 font-size: 16px;
85 color: rgba(0, 0, 0, 0.87);
86 }
87
88 paper-dialog {
89 width: 50%;
90 min-width: 430px;
91 }
92
93 p {
94 margin-bottom: 0;
95 }
96
97 paper-dialog paper-button {
98 font-weight: bold;
99 }
100
101 paper-button[autofocus] {
102 color: #4285f4;
103 }
104 </style>
105 -->
106 </head>
107 <body unresolved>
108
109 <template is="auto-binding">
110
111 <section on-tap="{{toggleDialog1}}">
112
113 <div>Dialog Layouts</div>
114
115 <button>
116 Plain dialog
117 </button>
118
119 <paper-dialog>
120 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
121 </paper-dialog>
122
123 <button>
124 Dialog with heading
125 </button>
126
127 <paper-dialog heading="Title">
128 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
129 </paper-dialog>
130
131 <button>
132 Dialog with actions
133 </button>
134
135 <paper-action-dialog heading="Title">
136 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
137
138 <paper-button dismissive>More Info...</paper-button>
139 <paper-button affirmative>Decline</paper-button>
140 <paper-button affirmative autofocus>Accept</paper-button>
141 </paper-action-dialog>
142
143 <button>
144 Modal dialog with backdrop and actions
145 </button>
146
147 <paper-action-dialog backdrop autoCloseDisabled layered="false">
148 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
149
150 <paper-button affirmative autofocus>Tap me to close</paper-button>
151 </paper-action-dialog>
152
153 </section>
154
155 <section on-tap="{{toggleDialog1}}">
156
157 <div>Scrolling</div>
158
159 <button>
160 Dialog with heading
161 </button>
162
163 <paper-dialog heading="Title" class="scrolling">
164 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
165 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
166 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
167 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
168 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
169 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
170 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
171 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
172 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
173 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
174 </paper-dialog>
175
176 <button>
177 Dialog with actions
178 </button>
179
180 <paper-action-dialog heading="Title" class="scrolling">
181
182 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
183 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
184 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
185 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
186 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
187 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
188 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
189 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
190 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
191 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
192
193 <paper-button dismissive>More Info...</paper-button>
194 <paper-button affirmative>Decline</paper-button>
195 <paper-button affirmative autofocus>Accept</paper-button>
196
197 </paper-action-dialog>
198
199 </section>
200
201 <section on-tap="{{toggleDialog2}}">
202
203 <div>Transitions</div>
204
205 <template repeat="{{transitions}}">
206 <button transition="{{}}">{{}}</button>
207 </template>
208
209 <paper-dialog id="dialog2" transition="{{transition}}">
210
211 <h1>{{transition || 'No Transition'}}</h1>
212
213 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
214
215 </paper-dialog>
216
217 </section>
218
219 <section on-tap="{{toggleDialog1}}">
220
221 <div>Custom Styling</div>
222
223 <button>
224 Colors
225 </button>
226
227 <paper-dialog heading="Custom Colors" class="colored">
228 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
229 </paper-dialog>
230
231 <button>
232 Size &amp; Position
233 </button>
234
235 <paper-dialog heading="Custom Size &amp; Position" class="size-position">
236 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
237 </paper-dialog>
238
239 </section>
240
241 </template>
242
243 <script>
244
245
246 var scope = document.querySelector('template[is=auto-binding]');
247
248 scope.toggleDialog1 = function(e) {
249 if (e.target.localName != 'button') {
250 return;
251 }
252 var d = e.target.nextElementSibling;
253 if (!d) {
254 return;
255 }
256 d.toggle();
257 };
258
259 scope.transitions = [
260 'core-transition-center',
261 'core-transition-top',
262 'core-transition-bottom',
263 'core-transition-left',
264 'core-transition-right'
265 ];
266
267 scope.toggleDialog2 = function(e) {
268 if (e.target.localName != 'button') {
269 return;
270 }
271 scope.transition = e.target.getAttribute('transition');
272 document.getElementById('dialog2').toggle();
273 };
274
275 </script>
276
277 </body>
278 </html>
OLDNEW
« no previous file with comments | « polymer_0.5.0/bower_components/paper-dialog/bower.json ('k') | polymer_0.5.0/bower_components/paper-dialog/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698