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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1187823002: Update Polymer components and re-run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 5 years, 6 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
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-toolbar/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 --><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
11 <!-- 11 <!--
12 `paper-toolbar` is a horizontal bar containing items that can be used for 12 `paper-toolbar` is a horizontal bar containing items that can be used for
13 label, navigation, search and actions. The items place inside the 13 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 14 `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' 15 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'
16 sizing. 16 sizing.
17 17
18 Example: 18 Example:
19 19
20 <paper-toolbar> 20 <paper-toolbar>
21 <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button> 21 <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
22 <div title>Title</div> 22 <div class="title">Title</div>
23 <paper-icon-button icon="more" on-tap="moreAction"></paper-icon-button> 23 <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-butto n>
24 </paper-toolbar> 24 </paper-toolbar>
25 25
26 `paper-toolbar` has a standard height, but can made be taller by setting `tall` 26 `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. 27 class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
28 28
29 <paper-toolbar class="tall"> 29 <paper-toolbar class="tall">
30 <paper-icon-button icon="menu"></paper-icon-button> 30 <paper-icon-button icon="menu"></paper-icon-button>
31 </paper-toolbar> 31 </paper-toolbar>
32 32
33 Apply `medium-tall` class to make the toolbar medium tall. This will make the 33 Apply `medium-tall` class to make the toolbar medium tall. This will make the
34 toolbar 2x the normal height. 34 toolbar 2x the normal height.
35 35
36 <paper-toolbar class="medium-tall"> 36 <paper-toolbar class="medium-tall">
37 <paper-icon-button icon="menu"></paper-icon-button> 37 <paper-icon-button icon="menu"></paper-icon-button>
38 </paper-toolbar> 38 </paper-toolbar>
39 39
40 When `tall`, items can pin to either the top (default), middle or bottom. Use 40 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. 41 `middle` class for middle content and `bottom` class for bottom content.
42 42
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 title class="middle">Middle Title</div> 45 <div class="middle title">Middle Title</div>
46 <div title class="bottom">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 ### Styling 53 ### Styling
54 54
55 The following custom properties and mixins are available for styling: 55 The following custom properties and mixins are available for styling:
56 56
57 Custom property | Description | Default 57 Custom property | Description | Default
58 ----------------|-------------|---------- 58 ----------------|-------------|----------
59 `--paper-toolbar-background` | Toolbar background color | `--default-primary -color` 59 `--paper-toolbar-background` | Toolbar background color | `--default-primary -color`
60 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co lor` 60 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co lor`
61 `--paper-toolbar` | Mixin applied to the toolbar | `{}` 61 `--paper-toolbar` | Mixin applied to the toolbar | `{}`
62 62
63 ### Accessibility 63 ### Accessibility
64 64
65 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the `title` attribute will 65 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class ` title` will
66 be used as the label of the toolbar via `aria-labelledby`. 66 be used as the label of the toolbar via `aria-labelledby`.
67 67
68 @demo demo/index.html 68 @demo demo/index.html
69 --> 69 -->
70 70
71 </head><body><dom-module id="paper-toolbar"> 71 </head><body><dom-module id="paper-toolbar">
72 72
73 <style> 73 <style>
74 :host { 74 :host {
75 /* technical */ 75 /* technical */
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
124 height: 168px; 124 height: 168px;
125 } 125 }
126 126
127 .toolbar-tools { 127 .toolbar-tools {
128 height: 56px; 128 height: 56px;
129 } 129 }
130 } 130 }
131 131
132 #topBar { 132 #topBar {
133 position: relative; 133 position: relative;
134 z-index: 1;
135 } 134 }
136 135
137 /* middle bar */ 136 /* middle bar */
138 #middleBar { 137 #middleBar {
139 position: absolute; 138 position: absolute;
140 top: 0; 139 top: 0;
141 right: 0; 140 right: 0;
142 left: 0; 141 left: 0;
143 z-index: 2;
144 } 142 }
145 143
146 :host(.tall) #middleBar, 144 :host(.tall) #middleBar,
147 :host(.medium-tall) #middleBar { 145 :host(.medium-tall) #middleBar {
148 -webkit-transform: translateY(100%); 146 -webkit-transform: translateY(100%);
149 transform: translateY(100%); 147 transform: translateY(100%);
150 } 148 }
151 149
152 /* bottom bar */ 150 /* bottom bar */
153 #bottomBar { 151 #bottomBar {
154 position: absolute; 152 position: absolute;
155 right: 0; 153 right: 0;
156 bottom: 0; 154 bottom: 0;
157 left: 0; 155 left: 0;
158 z-index: 1;
159 } 156 }
160 157
161 /* 158 /*
162 * make elements (e.g. buttons) respond to mouse/touch events 159 * make elements (e.g. buttons) respond to mouse/touch events
163 * 160 *
164 * `.toolbar-tools` disables touch events so multiple toolbars can stack and not 161 * `.toolbar-tools` disables touch events so multiple toolbars can stack and not
165 * absorb events. All children must have pointer events re-enabled to work a s 162 * absorb events. All children must have pointer events re-enabled to work a s
166 * expected. 163 * expected.
167 */ 164 */
168 .toolbar-tools > ::content > *:not([disabled]) { 165 .toolbar-tools > ::content > *:not([disabled]) {
169 pointer-events: auto; 166 pointer-events: auto;
170 } 167 }
171 168
172 .toolbar-tools > ::content [title] { 169 .toolbar-tools > ::content .title {
173 @apply(--paper-font-title); 170 @apply(--paper-font-title);
174 @apply(--layout-flex); 171 @apply(--layout-flex);
175 172
173 pointer-events: none;
176 text-overflow: ellipsis; 174 text-overflow: ellipsis;
177 white-space: nowrap; 175 white-space: nowrap;
178 overflow: hidden; 176 overflow: hidden;
179 177
180 /* 178 /*
181 * Polymer/polymer/issues/1525 179 * Polymer/polymer/issues/1525
182 * --paper-font-title defines a `font-weight` 180 * --paper-font-title defines a `font-weight`
183 * let's override its value, but we need `important!` 181 * let's override its value, but we need `important!`
184 * because all mixins are resolved in rule's selector that has higher prec edence 182 * because all mixins are resolved in rule's selector that has higher prec edence
185 * than the current selector. 183 * than the current selector.
186 */ 184 */
187 font-weight: 400 !important; 185 font-weight: 400 !important;
188 } 186 }
189 187
190 /** 188 /**
191 * TODO: Refactor these selectors 189 * TODO: Refactor these selectors
192 * Work in progress. 190 * Work in progress.
193 */ 191 */
194 .toolbar-tools > ::content paper-icon-button[icon=menu] { 192 .toolbar-tools > ::content paper-icon-button[icon=menu] {
195 margin-left: -8px;
196 margin-right: 24px; 193 margin-right: 24px;
197 } 194 }
198 195
199 .toolbar-tools > ::content paper-icon-button + paper-icon-button { 196 .toolbar-tools > ::content > .title,
200 margin-right: -8px; 197 .toolbar-tools > ::content[select=".middle"] > .title,
201 } 198 .toolbar-tools > ::content[select=".bottom"] > .title {
202
203 .toolbar-tools > ::content > [title],
204 .toolbar-tools > ::content[select=".middle"] > [title],
205 .toolbar-tools > ::content[select=".bottom"] > [title] {
206 margin-left: 56px; 199 margin-left: 56px;
207 } 200 }
208 201
209 .toolbar-tools > ::content > paper-icon-button + [title], 202 .toolbar-tools > ::content > paper-icon-button + .title,
210 .toolbar-tools > ::content[select=".middle"] paper-icon-button + [title], 203 .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
211 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + [title] { 204 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
212 margin-left: 0; 205 margin-left: 0;
213 } 206 }
214 </style> 207 </style>
215 208
216 <template> 209 <template>
217 210
218 <div id="topBar" class$="[[_computeBarClassName(justify)]]"> 211 <div id="topBar" class$="[[_computeBarClassName(justify)]]">
219 <content select=":not(.middle):not(.bottom)"></content> 212 <content select=":not(.middle):not(.bottom)"></content>
220 </div> 213 </div>
221 214
222 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]"> 215 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
223 <content select=".middle"></content> 216 <content select=".middle"></content>
224 </div> 217 </div>
225 218
226 <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]"> 219 <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
227 <content select=".bottom"></content> 220 <content select=".bottom"></content>
228 </div> 221 </div>
229 222
230 </template> 223 </template>
231 224
232 </dom-module> 225 </dom-module>
233 226
234 <script src="paper-toolbar-extracted.js"></script></body></html> 227 <script src="paper-toolbar-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-toolbar/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698