| 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 --><html><head><link rel="import" href="../polymer/polymer.html"> | 8 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 9 <link rel="import" href="../paper-styles/paper-styles.html"> | 9 <link rel="import" href="../paper-styles/paper-styles.html"> |
| 10 | 10 |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 43 <paper-toolbar class="tall"> | 43 <paper-toolbar class="tall"> |
| 44 <paper-icon-button icon="menu"></paper-icon-button> | 44 <paper-icon-button icon="menu"></paper-icon-button> |
| 45 <div class="middle title">Middle Title</div> | 45 <div class="middle title">Middle Title</div> |
| 46 <div class="bottom title">Bottom Title</div> | 46 <div class="bottom title">Bottom Title</div> |
| 47 </paper-toolbar> | 47 </paper-toolbar> |
| 48 | 48 |
| 49 For `medium-tall` toolbar, the middle and bottom contents overlap and are | 49 For `medium-tall` toolbar, the middle and bottom contents overlap and are |
| 50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are | 50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are |
| 51 still honored separately. | 51 still honored separately. |
| 52 | 52 |
| 53 To make an element completely fit at the bottom of the toolbar, use `fit` along |
| 54 with `bottom`. |
| 55 |
| 56 <paper-toolbar class="tall"> |
| 57 <div id="progressBar" class="bottom fit"></div> |
| 58 </paper-toolbar> |
| 59 |
| 53 ### Styling | 60 ### Styling |
| 54 | 61 |
| 55 The following custom properties and mixins are available for styling: | 62 The following custom properties and mixins are available for styling: |
| 56 | 63 |
| 57 Custom property | Description | Default | 64 Custom property | Description | Default |
| 58 ----------------|-------------|---------- | 65 ----------------|-------------|---------- |
| 59 `--paper-toolbar-background` | Toolbar background color | `--default-primary
-color` | 66 `--paper-toolbar-background` | Toolbar background color | `--default-primary
-color` |
| 60 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co
lor` | 67 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co
lor` |
| 61 `--paper-toolbar` | Mixin applied to the toolbar | `{}` | 68 `--paper-toolbar` | Mixin applied to the toolbar | `{}` |
| 62 | 69 |
| (...skipping 134 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 197 .toolbar-tools > ::content[select=".middle"] > .title, | 204 .toolbar-tools > ::content[select=".middle"] > .title, |
| 198 .toolbar-tools > ::content[select=".bottom"] > .title { | 205 .toolbar-tools > ::content[select=".bottom"] > .title { |
| 199 margin-left: 56px; | 206 margin-left: 56px; |
| 200 } | 207 } |
| 201 | 208 |
| 202 .toolbar-tools > ::content > paper-icon-button + .title, | 209 .toolbar-tools > ::content > paper-icon-button + .title, |
| 203 .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title, | 210 .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title, |
| 204 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title { | 211 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title { |
| 205 margin-left: 0; | 212 margin-left: 0; |
| 206 } | 213 } |
| 214 |
| 215 .toolbar-tools > ::content > .fit { |
| 216 position: absolute; |
| 217 top: auto; |
| 218 right: 0; |
| 219 bottom: 0; |
| 220 left: 0; |
| 221 width: auto; |
| 222 margin: 0; |
| 223 } |
| 224 |
| 207 </style> | 225 </style> |
| 208 | 226 |
| 209 <template> | 227 <template> |
| 210 | 228 |
| 211 <div id="topBar" class$="[[_computeBarClassName(justify)]]"> | 229 <div id="topBar" class$="[[_computeBarClassName(justify)]]"> |
| 212 <content select=":not(.middle):not(.bottom)"></content> | 230 <content select=":not(.middle):not(.bottom)"></content> |
| 213 </div> | 231 </div> |
| 214 | 232 |
| 215 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]"> | 233 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]"> |
| 216 <content select=".middle"></content> | 234 <content select=".middle"></content> |
| 217 </div> | 235 </div> |
| 218 | 236 |
| 219 <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]"> | 237 <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]"> |
| 220 <content select=".bottom"></content> | 238 <content select=".bottom"></content> |
| 221 </div> | 239 </div> |
| 222 | 240 |
| 223 </template> | 241 </template> |
| 224 | 242 |
| 225 </dom-module> | 243 </dom-module> |
| 226 | 244 |
| 227 <script src="paper-toolbar-extracted.js"></script></body></html> | 245 <script src="paper-toolbar-extracted.js"></script></body></html> |
| OLD | NEW |