| 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/default-theme.html"> |
| 10 <link rel="import" href="../paper-styles/typography.html"> |
| 11 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
| 10 | 12 |
| 11 <!-- | 13 <!-- |
| 14 Material design: [Toolbars](https://www.google.com/design/spec/components/toolba
rs.html) |
| 15 |
| 12 `paper-toolbar` is a horizontal bar containing items that can be used for | 16 `paper-toolbar` is a horizontal bar containing items that can be used for |
| 13 label, navigation, search and actions. The items place inside the | 17 label, navigation, search and actions. The items place inside the |
| 14 `paper-toolbar` are projected into a `class="horizontal center layout"` containe
r inside of | 18 `paper-toolbar` are projected into a `class="horizontal center layout"` containe
r inside of |
| 15 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items' | 19 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items' |
| 16 sizing. | 20 sizing. |
| 17 | 21 |
| 18 Example: | 22 Example: |
| 19 | 23 |
| 20 <paper-toolbar> | 24 ```html |
| 21 <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button> | 25 <paper-toolbar> |
| 22 <div class="title">Title</div> | 26 <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button> |
| 23 <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-butto
n> | 27 <div class="title">Title</div> |
| 24 </paper-toolbar> | 28 <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button> |
| 29 </paper-toolbar> |
| 30 ``` |
| 25 | 31 |
| 26 `paper-toolbar` has a standard height, but can made be taller by setting `tall` | 32 `paper-toolbar` has a standard height, but can made be taller by setting `tall` |
| 27 class on the `paper-toolbar`. This will make the toolbar 3x the normal height. | 33 class on the `paper-toolbar`. This will make the toolbar 3x the normal height. |
| 28 | 34 |
| 29 <paper-toolbar class="tall"> | 35 ```html |
| 30 <paper-icon-button icon="menu"></paper-icon-button> | 36 <paper-toolbar class="tall"> |
| 31 </paper-toolbar> | 37 <paper-icon-button icon="menu"></paper-icon-button> |
| 38 </paper-toolbar> |
| 39 ``` |
| 32 | 40 |
| 33 Apply `medium-tall` class to make the toolbar medium tall. This will make the | 41 Apply `medium-tall` class to make the toolbar medium tall. This will make the |
| 34 toolbar 2x the normal height. | 42 toolbar 2x the normal height. |
| 35 | 43 |
| 36 <paper-toolbar class="medium-tall"> | 44 ```html |
| 37 <paper-icon-button icon="menu"></paper-icon-button> | 45 <paper-toolbar class="medium-tall"> |
| 38 </paper-toolbar> | 46 <paper-icon-button icon="menu"></paper-icon-button> |
| 47 </paper-toolbar> |
| 48 ``` |
| 39 | 49 |
| 40 When `tall`, items can pin to either the top (default), middle or bottom. Use | 50 When `tall`, items can pin to either the top (default), middle or bottom. Use |
| 41 `middle` class for middle content and `bottom` class for bottom content. | 51 `middle` class for middle content and `bottom` class for bottom content. |
| 42 | 52 |
| 43 <paper-toolbar class="tall"> | 53 ```html |
| 44 <paper-icon-button icon="menu"></paper-icon-button> | 54 <paper-toolbar class="tall"> |
| 45 <div class="middle title">Middle Title</div> | 55 <paper-icon-button icon="menu"></paper-icon-button> |
| 46 <div class="bottom title">Bottom Title</div> | 56 <div class="middle title">Middle Title</div> |
| 47 </paper-toolbar> | 57 <div class="bottom title">Bottom Title</div> |
| 58 </paper-toolbar> |
| 59 ``` |
| 48 | 60 |
| 49 For `medium-tall` toolbar, the middle and bottom contents overlap and are | 61 For `medium-tall` toolbar, the middle and bottom contents overlap and are |
| 50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are | 62 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are |
| 51 still honored separately. | 63 still honored separately. |
| 52 | 64 |
| 53 To make an element completely fit at the bottom of the toolbar, use `fit` along | 65 To make an element completely fit at the bottom of the toolbar, use `fit` along |
| 54 with `bottom`. | 66 with `bottom`. |
| 55 | 67 |
| 56 <paper-toolbar class="tall"> | 68 ```html |
| 57 <div id="progressBar" class="bottom fit"></div> | 69 <paper-toolbar class="tall"> |
| 58 </paper-toolbar> | 70 <div id="progressBar" class="bottom fit"></div> |
| 71 </paper-toolbar> |
| 72 ``` |
| 59 | 73 |
| 60 ### Styling | 74 ### Styling |
| 61 | 75 |
| 62 The following custom properties and mixins are available for styling: | 76 The following custom properties and mixins are available for styling: |
| 63 | 77 |
| 64 Custom property | Description | Default | 78 Custom property | Description | Default |
| 65 ----------------|-------------|---------- | 79 ----------------|-------------|---------- |
| 80 `--paper-toolbar-title` | Mixin applied to the title of the toolbar | `{}` |
| 66 `--paper-toolbar-background` | Toolbar background color | `--default-primary
-color` | 81 `--paper-toolbar-background` | Toolbar background color | `--default-primary
-color` |
| 67 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co
lor` | 82 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co
lor` |
| 83 `--paper-toolbar-height` | Custom height for toolbar | `64px` |
| 84 `--paper-toolbar-sm-height` | Custom height for small screen toolbar | `56px` |
| 68 `--paper-toolbar` | Mixin applied to the toolbar | `{}` | 85 `--paper-toolbar` | Mixin applied to the toolbar | `{}` |
| 86 `--paper-toolbar-medium` | Mixin applied to medium height toolbar | `{}` |
| 87 `--paper-toolbar-tall` | Mixin applied to tall height toolbar | `{}` |
| 69 | 88 |
| 70 ### Accessibility | 89 ### Accessibility |
| 71 | 90 |
| 72 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `
title` will | 91 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `
title` will |
| 73 be used as the label of the toolbar via `aria-labelledby`. | 92 be used as the label of the toolbar via `aria-labelledby`. |
| 74 | 93 |
| 75 @demo demo/index.html | 94 @demo demo/index.html |
| 76 --> | 95 --> |
| 77 | 96 |
| 78 </head><body><dom-module id="paper-toolbar"> | 97 </head><body><dom-module id="paper-toolbar"> |
| 98 <template> |
| 99 <style> |
| 100 :host { |
| 101 /* technical */ |
| 102 display: block; |
| 103 position: relative; |
| 104 box-sizing: border-box; |
| 105 -moz-box-sizing: border-box; |
| 79 | 106 |
| 80 <style> | 107 /* size */ |
| 81 :host { | 108 height: var(--paper-toolbar-height, 64px); |
| 82 /* technical */ | |
| 83 display: block; | |
| 84 position: relative; | |
| 85 box-sizing: border-box; | |
| 86 -moz-box-sizing: border-box; | |
| 87 | 109 |
| 88 /* size */ | 110 background: var(--paper-toolbar-background, --default-primary-color); |
| 89 height: 64px; | 111 color: var(--paper-toolbar-color, --text-primary-color); |
| 90 | 112 |
| 91 background: var(--paper-toolbar-background, --default-primary-color); | 113 @apply(--paper-toolbar); |
| 92 color: var(--paper-toolbar-color, --text-primary-color); | 114 } |
| 93 | 115 |
| 94 @apply(--paper-toolbar); | 116 :host(.animate) { |
| 95 } | 117 /* transition */ |
| 96 | 118 transition: height 0.18s ease-in; |
| 97 :host(.animate) { | |
| 98 /* transition */ | |
| 99 transition: height 0.18s ease-in; | |
| 100 } | |
| 101 | |
| 102 :host(.medium-tall) { | |
| 103 height: 128px; | |
| 104 } | |
| 105 | |
| 106 :host(.tall) { | |
| 107 height: 192px; | |
| 108 } | |
| 109 | |
| 110 .toolbar-tools { | |
| 111 position: relative; | |
| 112 height: 64px; | |
| 113 padding: 0 16px; | |
| 114 pointer-events: none; | |
| 115 } | |
| 116 | |
| 117 /* | |
| 118 * TODO: Where should media query breakpoints live so they can be shared bet
ween elements? | |
| 119 */ | |
| 120 | |
| 121 @media (max-width: 639px) { | |
| 122 :host { | |
| 123 height: 56px; | |
| 124 } | 119 } |
| 125 | 120 |
| 126 :host(.medium-tall) { | 121 :host(.medium-tall) { |
| 127 height: 112px; | 122 height: calc(var(--paper-toolbar-height, 64px) * 2); |
| 123 @apply(--paper-toolbar-medium); |
| 128 } | 124 } |
| 129 | 125 |
| 130 :host(.tall) { | 126 :host(.tall) { |
| 131 height: 168px; | 127 height: calc(var(--paper-toolbar-height, 64px) * 3); |
| 128 @apply(--paper-toolbar-tall); |
| 132 } | 129 } |
| 133 | 130 |
| 134 .toolbar-tools { | 131 .toolbar-tools { |
| 135 height: 56px; | 132 position: relative; |
| 133 height: var(--paper-toolbar-height, 64px); |
| 134 padding: 0 16px; |
| 135 pointer-events: none; |
| 136 @apply(--layout-horizontal); |
| 137 @apply(--layout-center); |
| 136 } | 138 } |
| 137 } | |
| 138 | |
| 139 #topBar { | |
| 140 position: relative; | |
| 141 } | |
| 142 | |
| 143 /* middle bar */ | |
| 144 #middleBar { | |
| 145 position: absolute; | |
| 146 top: 0; | |
| 147 right: 0; | |
| 148 left: 0; | |
| 149 } | |
| 150 | |
| 151 :host(.tall) #middleBar, | |
| 152 :host(.medium-tall) #middleBar { | |
| 153 -webkit-transform: translateY(100%); | |
| 154 transform: translateY(100%); | |
| 155 } | |
| 156 | |
| 157 /* bottom bar */ | |
| 158 #bottomBar { | |
| 159 position: absolute; | |
| 160 right: 0; | |
| 161 bottom: 0; | |
| 162 left: 0; | |
| 163 } | |
| 164 | |
| 165 /* | |
| 166 * make elements (e.g. buttons) respond to mouse/touch events | |
| 167 * | |
| 168 * `.toolbar-tools` disables touch events so multiple toolbars can stack and
not | |
| 169 * absorb events. All children must have pointer events re-enabled to work a
s | |
| 170 * expected. | |
| 171 */ | |
| 172 .toolbar-tools > ::content > *:not([disabled]) { | |
| 173 pointer-events: auto; | |
| 174 } | |
| 175 | |
| 176 .toolbar-tools > ::content .title { | |
| 177 @apply(--paper-font-title); | |
| 178 @apply(--layout-flex); | |
| 179 | |
| 180 pointer-events: none; | |
| 181 text-overflow: ellipsis; | |
| 182 white-space: nowrap; | |
| 183 overflow: hidden; | |
| 184 | 139 |
| 185 /* | 140 /* |
| 186 * Polymer/polymer/issues/1525 | 141 * TODO: Where should media query breakpoints live so they can be shared b
etween elements? |
| 187 * --paper-font-title defines a `font-weight` | |
| 188 * let's override its value, but we need `important!` | |
| 189 * because all mixins are resolved in rule's selector that has higher prec
edence | |
| 190 * than the current selector. | |
| 191 */ | 142 */ |
| 192 font-weight: 400 !important; | |
| 193 } | |
| 194 | 143 |
| 195 /** | 144 @media (max-width: 639px) { |
| 196 * TODO: Refactor these selectors | 145 :host { |
| 197 * Work in progress. | 146 height: var(--paper-toolbar-sm-height, 56px); |
| 198 */ | 147 } |
| 199 .toolbar-tools > ::content paper-icon-button[icon=menu] { | |
| 200 margin-right: 24px; | |
| 201 } | |
| 202 | 148 |
| 203 .toolbar-tools > ::content > .title, | 149 :host(.medium-tall) { |
| 204 .toolbar-tools > ::content[select=".middle"] > .title, | 150 height: calc(var(--paper-toolbar-sm-height, 56px) * 2); |
| 205 .toolbar-tools > ::content[select=".bottom"] > .title { | 151 } |
| 206 margin-left: 56px; | |
| 207 } | |
| 208 | 152 |
| 209 .toolbar-tools > ::content > paper-icon-button + .title, | 153 :host(.tall) { |
| 210 .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title, | 154 height: calc(var(--paper-toolbar-sm-height, 56px) * 3); |
| 211 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title { | 155 } |
| 212 margin-left: 0; | |
| 213 } | |
| 214 | 156 |
| 215 .toolbar-tools > ::content > .fit { | 157 .toolbar-tools { |
| 216 position: absolute; | 158 height: var(--paper-toolbar-sm-height, 56px); |
| 217 top: auto; | 159 } |
| 218 right: 0; | 160 } |
| 219 bottom: 0; | |
| 220 left: 0; | |
| 221 width: auto; | |
| 222 margin: 0; | |
| 223 } | |
| 224 | 161 |
| 225 </style> | 162 #topBar { |
| 163 position: relative; |
| 164 } |
| 226 | 165 |
| 227 <template> | 166 /* middle bar */ |
| 167 #middleBar { |
| 168 position: absolute; |
| 169 top: 0; |
| 170 right: 0; |
| 171 left: 0; |
| 172 } |
| 228 | 173 |
| 229 <div id="topBar" class$="[[_computeBarClassName(justify)]]"> | 174 :host(.tall) #middleBar, |
| 175 :host(.medium-tall) #middleBar { |
| 176 -webkit-transform: translateY(100%); |
| 177 transform: translateY(100%); |
| 178 } |
| 179 |
| 180 /* bottom bar */ |
| 181 #bottomBar { |
| 182 position: absolute; |
| 183 right: 0; |
| 184 bottom: 0; |
| 185 left: 0; |
| 186 } |
| 187 |
| 188 /* |
| 189 * make elements (e.g. buttons) respond to mouse/touch events |
| 190 * |
| 191 * `.toolbar-tools` disables touch events so multiple toolbars can stack a
nd not |
| 192 * absorb events. All children must have pointer events re-enabled to work
as |
| 193 * expected. |
| 194 */ |
| 195 .toolbar-tools > ::content > *:not([disabled]) { |
| 196 pointer-events: auto; |
| 197 } |
| 198 |
| 199 .toolbar-tools > ::content .title { |
| 200 @apply(--paper-font-common-base); |
| 201 |
| 202 white-space: nowrap; |
| 203 overflow: hidden; |
| 204 text-overflow: ellipsis; |
| 205 font-size: 20px; |
| 206 font-weight: 400; |
| 207 line-height: 1; |
| 208 pointer-events: none; |
| 209 |
| 210 @apply(--layout-flex); |
| 211 @apply(--paper-toolbar-title); |
| 212 } |
| 213 |
| 214 /** |
| 215 * TODO: Refactor these selectors |
| 216 * Work in progress. |
| 217 */ |
| 218 .toolbar-tools > ::content paper-icon-button[icon=menu] { |
| 219 margin-right: 24px; |
| 220 } |
| 221 |
| 222 .toolbar-tools > ::content > .title, |
| 223 .toolbar-tools > ::content[select=".middle"] > .title, |
| 224 .toolbar-tools > ::content[select=".bottom"] > .title { |
| 225 margin-left: 56px; |
| 226 } |
| 227 |
| 228 .toolbar-tools > ::content > paper-icon-button + .title, |
| 229 .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title, |
| 230 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title { |
| 231 margin-left: 0; |
| 232 } |
| 233 |
| 234 .toolbar-tools > ::content > .fit { |
| 235 position: absolute; |
| 236 top: auto; |
| 237 right: 0; |
| 238 bottom: 0; |
| 239 left: 0; |
| 240 width: auto; |
| 241 margin: 0; |
| 242 } |
| 243 |
| 244 /* TODO(noms): Until we have a better solution for classes that don't use |
| 245 * /deep/ create our own. |
| 246 */ |
| 247 .start-justified { |
| 248 @apply(--layout-start-justified); |
| 249 } |
| 250 |
| 251 .center-justified { |
| 252 @apply(--layout-center-justified); |
| 253 } |
| 254 |
| 255 .end-justified { |
| 256 @apply(--layout-end-justified); |
| 257 } |
| 258 |
| 259 .around-justified { |
| 260 @apply(--layout-around-justified); |
| 261 } |
| 262 |
| 263 .justified { |
| 264 @apply(--layout-justified); |
| 265 } |
| 266 </style> |
| 267 |
| 268 <div id="topBar" class$="toolbar-tools [[_computeBarExtraClasses(justify)]]"
> |
| 230 <content select=":not(.middle):not(.bottom)"></content> | 269 <content select=":not(.middle):not(.bottom)"></content> |
| 231 </div> | 270 </div> |
| 232 | 271 |
| 233 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]"> | 272 <div id="middleBar" class$="toolbar-tools [[_computeBarExtraClasses(middleJu
stify)]]"> |
| 234 <content select=".middle"></content> | 273 <content select=".middle"></content> |
| 235 </div> | 274 </div> |
| 236 | 275 |
| 237 <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]"> | 276 <div id="bottomBar" class$="toolbar-tools [[_computeBarExtraClasses(bottomJu
stify)]]"> |
| 238 <content select=".bottom"></content> | 277 <content select=".bottom"></content> |
| 239 </div> | 278 </div> |
| 240 | |
| 241 </template> | 279 </template> |
| 242 | 280 |
| 243 </dom-module> | 281 </dom-module> |
| 244 | |
| 245 <script src="paper-toolbar-extracted.js"></script></body></html> | 282 <script src="paper-toolbar-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1468623004:
Update Polymer from 1.2.1 -> 1.2.3 (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@travis-yml