| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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> |
| OLD | NEW |