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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_0.5.0/bower_components/paper-tabs/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-tabs/bower.json ('k') | polymer_0.5.0/bower_components/paper-tabs/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
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 8 subject to an additional IP rights grant found at http://polymer.github.io/P ATENTS.txt
9 --> 9 -->
10 <!doctype html> 10 <!doctype html>
11 <html> 11 <html>
12 <head> 12 <head>
13 <title>paper-tabs</title> 13 <title>paper-tabs</title>
14 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1, user-scalable=yes"> 14 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1, user-scalable=yes">
15 <script src="../platform/platform.js"></script> 15
16 <script src="../webcomponentsjs/webcomponents.js"></script>
16 17
17 <link rel="import" href="../core-icons/core-icons.html"> 18 <link rel="import" href="../core-icons/core-icons.html">
19 <link rel="import" href="../font-roboto/roboto.html">
18 <link rel="import" href="paper-tabs.html"> 20 <link rel="import" href="paper-tabs.html">
19 <link rel="import" href="../core-toolbar/core-toolbar.html"> 21 <link rel="import" href="../core-toolbar/core-toolbar.html">
22 <link rel="import" href="../core-media-query/core-media-query.html">
20 <link rel="import" href="../paper-icon-button/paper-icon-button.html"> 23 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
21 <link rel="import" href="../font-roboto/roboto.html">
22 24
23 <style shim-shadowdom> 25 <style shim-shadowdom>
24 26
25 body { 27 body {
26 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; 28 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
27 margin: 0; 29 margin: 0;
28 padding: 24px; 30 padding: 24px;
29 color: #333; 31 color: #333;
30 -webkit-user-select: none; 32 }
31 -moz-user-select: none; 33
32 -ms-user-select: none; 34 body.core-narrow {
33 user-select: none; 35 padding: 8px;
34 -webkit-tap-highlight-color: rgba(0,0,0,0);
35 -webkit-touch-callout: none;
36 } 36 }
37 37
38 paper-tabs, core-toolbar { 38 paper-tabs, core-toolbar {
39 background-color: #00bcd4; 39 background-color: #00bcd4;
40 color: #fff; 40 color: #fff;
41 box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2); 41 box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
42 } 42 }
43 43
44 core-toolbar paper-tabs { 44 core-toolbar paper-tabs {
45 box-shadow: none; 45 box-shadow: none;
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
78 <paper-tabs selected="0" noink nobar> 78 <paper-tabs selected="0" noink nobar>
79 79
80 <paper-tab>ITEM ONE</paper-tab> 80 <paper-tab>ITEM ONE</paper-tab>
81 <paper-tab>ITEM TWO</paper-tab> 81 <paper-tab>ITEM TWO</paper-tab>
82 <paper-tab>ITEM THREE</paper-tab> 82 <paper-tab>ITEM THREE</paper-tab>
83 83
84 </paper-tabs> 84 </paper-tabs>
85 85
86 <br> 86 <br>
87 <br> 87 <br>
88
89 <h3>B. The bottom bar appears to indicate the selected tab, but without slidin g effect.</h3>
90
91 <paper-tabs selected="0" noink noslide>
92
93 <paper-tab>ITEM ONE</paper-tab>
94 <paper-tab>ITEM TWO</paper-tab>
95 <paper-tab>ITEM THREE</paper-tab>
96
97 </paper-tabs>
98
99 <br>
100 <br>
88 101
89 <h3>B. The bar slides to the selected tab</h3> 102 <h3>C. The bar slides to the selected tab</h3>
90 103
91 <paper-tabs selected="0" noink> 104 <paper-tabs selected="0" noink>
92 105
93 <paper-tab>ITEM ONE</paper-tab> 106 <paper-tab>ITEM ONE</paper-tab>
94 <paper-tab>ITEM TWO</paper-tab> 107 <paper-tab>ITEM TWO</paper-tab>
95 <paper-tab>ITEM THREE</paper-tab> 108 <paper-tab>ITEM THREE</paper-tab>
96 109
97 </paper-tabs> 110 </paper-tabs>
98 111
99 <br> 112 <br>
100 <br> 113 <br>
101 114
102 <h3>C. Inky Tabs</h3> 115 <h3>D. Inky Tabs</h3>
103 116
104 <paper-tabs selected="0"> 117 <paper-tabs selected="0">
105 118
106 <paper-tab>ITEM ONE</paper-tab> 119 <paper-tab>ITEM ONE</paper-tab>
107 <paper-tab>ITEM TWO</paper-tab> 120 <paper-tab>ITEM TWO</paper-tab>
108 <paper-tab>ITEM THREE</paper-tab> 121 <paper-tab>ITEM THREE</paper-tab>
109 122
110 </paper-tabs> 123 </paper-tabs>
111 124
112 <br> 125 <br>
113 <br> 126 <br>
114 127
115 <paper-tabs selected="0" class="transparent-teal"> 128 <paper-tabs selected="0" class="transparent-teal">
116 129
117 <paper-tab>ITEM ONE</paper-tab> 130 <paper-tab>ITEM ONE</paper-tab>
118 <paper-tab>ITEM TWO</paper-tab> 131 <paper-tab>ITEM TWO</paper-tab>
119 <paper-tab>ITEM THREE</paper-tab> 132 <paper-tab>ITEM THREE</paper-tab>
120 133
121 </paper-tabs> 134 </paper-tabs>
122 135
123 <br> 136 <br>
124 <br> 137 <br>
125 138
139 <h3>E. Scrollable Tabs</h3>
140
141 <paper-tabs id="scrollableTabs" selected="0" scrollable>
142
143 <paper-tab>NUMBER ONE ITEM</paper-tab>
144 <paper-tab>ITEM TWO</paper-tab>
145 <paper-tab>THE THIRD ITEM</paper-tab>
146 <paper-tab>THE ITEM FOUR</paper-tab>
147 <paper-tab>FIFTH</paper-tab>
148 <paper-tab>THE SIXTH TAB</paper-tab>
149 <paper-tab>NUMBER SEVEN</paper-tab>
150 <paper-tab>EIGHT</paper-tab>
151 <paper-tab>NUMBER NINE</paper-tab>
152 <paper-tab>THE TENTH</paper-tab>
153 <paper-tab>THE ITEM ELEVEN</paper-tab>
154 <paper-tab>TWELFTH ITEM</paper-tab>
155
156 </paper-tabs>
157
158 <br>
159 <br>
160
161 <h3>F. Link Tabs</h3>
162
163 <paper-tabs selected="0" link>
164
165 <paper-tab><a href="#item1" horizontal center-center layout>ITEM ONE</a></pa per-tab>
166 <paper-tab><a href="#item2" horizontal center-center layout>ITEM TWO</a></pa per-tab>
167 <paper-tab><a href="#item3" horizontal center-center layout>ITEM THREE</a></ paper-tab>
168
169 </paper-tabs>
170
171 <br>
172 <br>
173
174 <h3>G. Tabs in Toolbar</h3>
175
126 <core-toolbar class="medium-tall"> 176 <core-toolbar class="medium-tall">
127 177
128 <paper-icon-button icon="menu"></paper-icon-button> 178 <paper-icon-button icon="menu"></paper-icon-button>
129 <div flex>Title</div> 179 <div flex>Title</div>
130 <paper-icon-button icon="search"></paper-icon-button> 180 <paper-icon-button icon="search"></paper-icon-button>
131 <paper-icon-button icon="more-vert"></paper-icon-button> 181 <paper-icon-button icon="more-vert"></paper-icon-button>
132 182
133 <div class="bottom fit" horizontal layout> 183 <div class="bottom fit" horizontal layout>
134 184
135 <paper-tabs selected="0" flex style="max-width: 600px;"> 185 <paper-tabs selected="0" flex style="max-width: 600px;">
136 186
137 <paper-tab>ITEM ONE</paper-tab> 187 <paper-tab>ITEM ONE</paper-tab>
138 <paper-tab>ITEM TWO</paper-tab> 188 <paper-tab>ITEM TWO</paper-tab>
139 <paper-tab>ITEM THREE</paper-tab> 189 <paper-tab>ITEM THREE</paper-tab>
140 190
141 </paper-tabs> 191 </paper-tabs>
142 192
143 </div> 193 </div>
144 194
145 </core-toolbar> 195 </core-toolbar>
146 196
147 <br> 197 <br>
148 <br> 198 <br>
149 199
150 <core-toolbar class="tall"> 200 <core-toolbar class="tall">
151 201
152 <paper-tabs selected="0" class="bottom indent" style="width: 200px;" self-en d> 202 <paper-tabs selected="0" class="bottom" self-end style="width: 300px;">
153 203
154 <paper-tab>ITEM ONE</paper-tab> 204 <paper-tab>ITEM ONE</paper-tab>
155 <paper-tab>ITEM TWO</paper-tab> 205 <paper-tab>ITEM TWO</paper-tab>
156 206
157 </paper-tabs> 207 </paper-tabs>
158 208
159 <div class="bottom" flex></div> 209 <div class="bottom" flex></div>
160 210
161 <paper-icon-button class="bottom" icon="search"></paper-icon-button> 211 <paper-icon-button class="bottom" icon="search"></paper-icon-button>
162 212
163 </core-toolbar> 213 </core-toolbar>
164 214
215 <!-- detect when window is narrow -->
216 <core-media-query id="mediaQuery" query="max-width: 640px"></core-media-query>
217
218 <script>
219
220 document.querySelector('#mediaQuery').addEventListener('core-media-change',
221 function(e) {
222 document.body.classList.toggle('core-narrow', e.detail.matches);
223 document.querySelector('#scrollableTabs').updateBar();
224 });
225
226 </script>
227
165 </body> 228 </body>
166 </html> 229 </html>
OLDNEW
« no previous file with comments | « polymer_0.5.0/bower_components/paper-tabs/bower.json ('k') | polymer_0.5.0/bower_components/paper-tabs/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698