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

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

Issue 2092213003: [MD settings] update polymer (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 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
OLDNEW
1 <!-- 1 <!--
2 @license
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 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 4 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 5 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 6 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 7 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 8 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"> 9 --><html><head><link rel="import" href="../polymer/polymer.html">
9 <link rel="import" href="../paper-styles/default-theme.html"> 10 <link rel="import" href="../paper-styles/default-theme.html">
10 <link rel="import" href="../paper-styles/typography.html"> 11 <link rel="import" href="../paper-styles/typography.html">
11 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> 12 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
(...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after
96 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class ` title` will 97 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class ` title` will
97 be used as the label of the toolbar via `aria-labelledby`. 98 be used as the label of the toolbar via `aria-labelledby`.
98 99
99 @demo demo/index.html 100 @demo demo/index.html
100 --> 101 -->
101 102
102 </head><body><dom-module id="paper-toolbar"> 103 </head><body><dom-module id="paper-toolbar">
103 <template> 104 <template>
104 <style> 105 <style>
105 :host { 106 :host {
107 --calculated-paper-toolbar-height: var(--paper-toolbar-height, 64px);
108 --calculated-paper-toolbar-sm-height: var(--paper-toolbar-sm-height, 56p x);
109
106 /* technical */ 110 /* technical */
107 display: block; 111 display: block;
108 position: relative; 112 position: relative;
109 box-sizing: border-box; 113 box-sizing: border-box;
110 -moz-box-sizing: border-box; 114 -moz-box-sizing: border-box;
111 115
112 /* size */ 116 /* size */
113 height: var(--paper-toolbar-height, 64px); 117 height: var(--calculated-paper-toolbar-height);
114 118
115 background: var(--paper-toolbar-background, --primary-color); 119 background: var(--paper-toolbar-background, --primary-color);
116 color: var(--paper-toolbar-color, --dark-theme-text-color); 120 color: var(--paper-toolbar-color, --dark-theme-text-color);
117 121
118 @apply(--paper-toolbar); 122 @apply(--paper-toolbar);
119 } 123 }
120 124
121 :host(.animate) { 125 :host(.animate) {
122 /* transition */ 126 /* transition */
123 transition: var(--paper-toolbar-transition, height 0.18s ease-in); 127 transition: var(--paper-toolbar-transition, height 0.18s ease-in);
124 } 128 }
125 129
126 :host(.medium-tall) { 130 :host(.medium-tall) {
127 height: calc(var(--paper-toolbar-height, 64px) * 2); 131 height: calc(var(--calculated-paper-toolbar-height) * 2);
128 @apply(--paper-toolbar-medium); 132 @apply(--paper-toolbar-medium);
129 } 133 }
130 134
131 :host(.tall) { 135 :host(.tall) {
132 height: calc(var(--paper-toolbar-height, 64px) * 3); 136 height: calc(var(--calculated-paper-toolbar-height) * 3);
133 @apply(--paper-toolbar-tall); 137 @apply(--paper-toolbar-tall);
134 } 138 }
135 139
136 .toolbar-tools { 140 .toolbar-tools {
137 position: relative; 141 position: relative;
138 height: var(--paper-toolbar-height, 64px); 142 height: var(--calculated-paper-toolbar-height);
139 padding: 0 16px; 143 padding: 0 16px;
140 pointer-events: none; 144 pointer-events: none;
141 @apply(--layout-horizontal); 145 @apply(--layout-horizontal);
142 @apply(--layout-center); 146 @apply(--layout-center);
143 @apply(--paper-toolbar-content); 147 @apply(--paper-toolbar-content);
144 } 148 }
145 149
146 /* 150 /*
147 * TODO: Where should media query breakpoints live so they can be shared b etween elements? 151 * TODO: Where should media query breakpoints live so they can be shared b etween elements?
148 */ 152 */
149 153
150 @media (max-width: 600px) { 154 @media (max-width: 600px) {
151 :host { 155 :host {
152 height: var(--paper-toolbar-sm-height, 56px); 156 height: var(--calculated-paper-toolbar-sm-height);
153 } 157 }
154 158
155 :host(.medium-tall) { 159 :host(.medium-tall) {
156 height: calc(var(--paper-toolbar-sm-height, 56px) * 2); 160 height: calc(var(--calculated-paper-toolbar-sm-height) * 2);
157 } 161 }
158 162
159 :host(.tall) { 163 :host(.tall) {
160 height: calc(var(--paper-toolbar-sm-height, 56px) * 3); 164 height: calc(var(--calculated-paper-toolbar-sm-height) * 3);
161 } 165 }
162 166
163 .toolbar-tools { 167 .toolbar-tools {
164 height: var(--paper-toolbar-sm-height, 56px); 168 height: var(--calculated-paper-toolbar-sm-height);
165 } 169 }
166 } 170 }
167 171
168 #topBar { 172 #topBar {
169 position: relative; 173 position: relative;
170 } 174 }
171 175
172 /* middle bar */ 176 /* middle bar */
173 #middleBar { 177 #middleBar {
174 position: absolute; 178 position: absolute;
(...skipping 104 matching lines...) Expand 10 before | Expand all | Expand 10 after
279 <content select=".middle"></content> 283 <content select=".middle"></content>
280 </div> 284 </div>
281 285
282 <div id="bottomBar" class$="toolbar-tools [[_computeBarExtraClasses(bottomJu stify)]]"> 286 <div id="bottomBar" class$="toolbar-tools [[_computeBarExtraClasses(bottomJu stify)]]">
283 <content select=".bottom"></content> 287 <content select=".bottom"></content>
284 </div> 288 </div>
285 </template> 289 </template>
286 290
287 </dom-module> 291 </dom-module>
288 <script src="paper-toolbar-extracted.js"></script></body></html> 292 <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_summary.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698