OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m
edia-query.html"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m
edia-query.html"> |
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> | 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> |
4 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se
arch_field.html"> | 4 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se
arch_field.html"> |
5 | 5 |
6 <dom-module id="cr-toolbar"> | 6 <dom-module id="cr-toolbar"> |
7 <template> | 7 <template> |
8 <style> | 8 <style> |
9 :host { | 9 :host { |
10 --cr-toolbar-field-width: 580px; | 10 --cr-toolbar-field-width: 580px; |
11 color: #fff; | 11 color: #fff; |
12 display: flex; | 12 display: flex; |
13 height: 56px; | 13 height: 56px; |
14 } | 14 } |
15 | 15 |
16 h1 { | 16 h1 { |
17 @apply(--layout-flex); | 17 @apply(--layout-flex); |
| 18 -webkit-margin-start: 6px; |
18 font-size: 123%; | 19 font-size: 123%; |
19 font-weight: 400; | 20 font-weight: 400; |
20 text-overflow: ellipsis; | 21 text-overflow: ellipsis; |
21 overflow: hidden; | 22 overflow: hidden; |
22 white-space: nowrap; | 23 white-space: nowrap; |
23 } | 24 } |
24 | 25 |
25 #leftContent { | 26 #leftContent { |
| 27 -webkit-margin-start: 18px; |
26 align-items: center; | 28 align-items: center; |
27 display: flex; | 29 display: flex; |
28 position: absolute; | 30 position: absolute; |
29 transition: opacity 100ms; | 31 transition: opacity 100ms; |
30 } | 32 } |
31 | 33 |
32 #leftContent paper-icon-button { | 34 #menuButton { |
33 -webkit-margin-end: 6px; | |
34 -webkit-margin-start: 18px; | |
35 height: 32px; | 35 height: 32px; |
36 margin-bottom: 6px; | 36 margin-bottom: 6px; |
37 margin-top: 6px; | 37 margin-top: 6px; |
38 min-width: 32px; | 38 min-width: 32px; |
39 padding: 6px; | 39 padding: 6px; |
40 width: 32px; | 40 width: 32px; |
41 } | 41 } |
42 | 42 |
| 43 :host(:not([show-menu])) #menuButton { |
| 44 display: none; |
| 45 } |
| 46 |
43 #centeredContent { | 47 #centeredContent { |
| 48 -webkit-margin-start: var(--cr-toolbar-field-margin, 0); |
44 -webkit-padding-end: 12px; | 49 -webkit-padding-end: 12px; |
45 display: flex; | 50 display: flex; |
46 flex: 1 1 0; | 51 flex: 1 1 0; |
47 justify-content: center; | 52 justify-content: center; |
48 } | 53 } |
49 | 54 |
50 :host(:not([narrow_])) #leftContent { | 55 :host(:not([narrow_])) #leftContent { |
51 max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2); | 56 max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2); |
52 } | 57 } |
53 | 58 |
54 :host([narrow_]) #centeredContent { | 59 :host([narrow_]) #centeredContent { |
55 justify-content: flex-end; | 60 justify-content: flex-end; |
56 } | 61 } |
57 | 62 |
58 :host([narrow_][showing-search_]) #leftContent { | 63 :host([narrow_][showing-search_]) #leftContent { |
59 opacity: 0; | 64 opacity: 0; |
60 } | 65 } |
61 </style> | 66 </style> |
62 <div id="leftContent"> | 67 <div id="leftContent"> |
63 <paper-icon-button icon="cr:menu" on-tap="onMenuTap_"> | 68 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_"> |
64 </paper-icon-button> | 69 </paper-icon-button> |
65 <h1>[[pageName]]</h1> | 70 <h1>[[pageName]]</h1> |
66 </div> | 71 </div> |
67 | 72 |
68 <div id="centeredContent"> | 73 <div id="centeredContent"> |
69 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" | 74 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" |
70 label="[[searchPrompt]]" clear-label="[[clearLabel]]" | 75 label="[[searchPrompt]]" clear-label="[[clearLabel]]" |
71 spinner-active="[[spinnerActive]]" | 76 spinner-active="[[spinnerActive]]" |
72 showing-search="{{showingSearch_}}"> | 77 showing-search="{{showingSearch_}}"> |
73 </cr-toolbar-search-field> | 78 </cr-toolbar-search-field> |
74 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> | 79 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> |
75 </iron-media-query> | 80 </iron-media-query> |
76 </div> | 81 </div> |
77 </template> | 82 </template> |
78 <script src="cr_toolbar.js"></script> | 83 <script src="cr_toolbar.js"></script> |
79 </dom-module> | 84 </dom-module> |
OLD | NEW |