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 |