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

Side by Side Diff: third_party/polymer/v1_0/components/paper-toolbar/paper-toolbar.html

Issue 1221923003: Update bower.json for Polymer elements and add PRESUBMIT.py (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 5 years, 5 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
1 <!-- 1 <!--
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also 6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 --> 8 -->
9 9
10 <link rel="import" href="../polymer/polymer.html"> 10 <link rel="import" href="../polymer/polymer.html">
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after
45 <paper-toolbar class="tall"> 45 <paper-toolbar class="tall">
46 <paper-icon-button icon="menu"></paper-icon-button> 46 <paper-icon-button icon="menu"></paper-icon-button>
47 <div class="middle title">Middle Title</div> 47 <div class="middle title">Middle Title</div>
48 <div class="bottom title">Bottom Title</div> 48 <div class="bottom title">Bottom Title</div>
49 </paper-toolbar> 49 </paper-toolbar>
50 50
51 For `medium-tall` toolbar, the middle and bottom contents overlap and are 51 For `medium-tall` toolbar, the middle and bottom contents overlap and are
52 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are 52 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
53 still honored separately. 53 still honored separately.
54 54
55 To make an element completely fit at the bottom of the toolbar, use `fit` along
56 with `bottom`.
57
58 <paper-toolbar class="tall">
59 <div id="progressBar" class="bottom fit"></div>
60 </paper-toolbar>
61
55 ### Styling 62 ### Styling
56 63
57 The following custom properties and mixins are available for styling: 64 The following custom properties and mixins are available for styling:
58 65
59 Custom property | Description | Default 66 Custom property | Description | Default
60 ----------------|-------------|---------- 67 ----------------|-------------|----------
61 `--paper-toolbar-background` | Toolbar background color | `--default-primary -color` 68 `--paper-toolbar-background` | Toolbar background color | `--default-primary -color`
62 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co lor` 69 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co lor`
63 `--paper-toolbar` | Mixin applied to the toolbar | `{}` 70 `--paper-toolbar` | Mixin applied to the toolbar | `{}`
64 71
(...skipping 134 matching lines...) Expand 10 before | Expand all | Expand 10 after
199 .toolbar-tools > ::content[select=".middle"] > .title, 206 .toolbar-tools > ::content[select=".middle"] > .title,
200 .toolbar-tools > ::content[select=".bottom"] > .title { 207 .toolbar-tools > ::content[select=".bottom"] > .title {
201 margin-left: 56px; 208 margin-left: 56px;
202 } 209 }
203 210
204 .toolbar-tools > ::content > paper-icon-button + .title, 211 .toolbar-tools > ::content > paper-icon-button + .title,
205 .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title, 212 .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
206 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title { 213 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
207 margin-left: 0; 214 margin-left: 0;
208 } 215 }
216
217 .toolbar-tools > ::content > .fit {
218 position: absolute;
219 top: auto;
220 right: 0;
221 bottom: 0;
222 left: 0;
223 width: auto;
224 margin: 0;
225 }
226
209 </style> 227 </style>
210 228
211 <template> 229 <template>
212 230
213 <div id="topBar" class$="[[_computeBarClassName(justify)]]"> 231 <div id="topBar" class$="[[_computeBarClassName(justify)]]">
214 <content select=":not(.middle):not(.bottom)"></content> 232 <content select=":not(.middle):not(.bottom)"></content>
215 </div> 233 </div>
216 234
217 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]"> 235 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
218 <content select=".middle"></content> 236 <content select=".middle"></content>
(...skipping 116 matching lines...) Expand 10 before | Expand all | Expand 10 after
335 } 353 }
336 } 354 }
337 } 355 }
338 if (labelledBy.length > 0) { 356 if (labelledBy.length > 0) {
339 this.setAttribute('aria-labelledby', labelledBy.join(' ')); 357 this.setAttribute('aria-labelledby', labelledBy.join(' '));
340 } 358 }
341 }, 359 },
342 360
343 _computeBarClassName: function(barJustify) { 361 _computeBarClassName: function(barJustify) {
344 var classObj = { 362 var classObj = {
345 center: true, 363 'center': true,
346 horizontal: true, 364 'horizontal': true,
347 layout: true, 365 'layout': true,
348 'toolbar-tools': true 366 'toolbar-tools': true
349 }; 367 };
350 368
351 // If a blank string or any falsy value is given, no other class name is 369 // If a blank string or any falsy value is given, no other class name is
352 // added. 370 // added.
353 if (barJustify) { 371 if (barJustify) {
354 var justifyClassName = (barJustify === 'justified') ? 372 var justifyClassName = (barJustify === 'justified') ?
355 barJustify : 373 barJustify :
356 barJustify + '-justified'; 374 barJustify + '-justified';
357 375
358 classObj[justifyClassName] = true; 376 classObj[justifyClassName] = true;
359 } 377 }
360 378
361 return classNames(classObj); 379 return classNames(classObj);
362 } 380 }
363 381
364 }); 382 });
365 383
366 }()); 384 }());
367 385
368 </script> 386 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698