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 --cr-toolbar-height: 56px; | 11 --cr-toolbar-height: 56px; |
| 12 align-items: center; |
12 color: #fff; | 13 color: #fff; |
13 display: flex; | 14 display: flex; |
14 height: var(--cr-toolbar-height); | 15 height: var(--cr-toolbar-height); |
15 } | 16 } |
16 | 17 |
17 h1 { | 18 h1 { |
18 -webkit-margin-start: 6px; | 19 -webkit-margin-start: 6px; |
19 -webkit-padding-end: 2px; | 20 -webkit-padding-end: 2px; |
20 flex: 1; | 21 flex: 1; |
21 font-size: 123%; | 22 font-size: 123%; |
(...skipping 15 matching lines...) Expand all Loading... |
37 #menuButton { | 38 #menuButton { |
38 height: 32px; | 39 height: 32px; |
39 margin-bottom: 6px; | 40 margin-bottom: 6px; |
40 margin-top: 6px; | 41 margin-top: 6px; |
41 min-width: 32px; | 42 min-width: 32px; |
42 padding: 6px; | 43 padding: 6px; |
43 width: 32px; | 44 width: 32px; |
44 } | 45 } |
45 | 46 |
46 #centeredContent { | 47 #centeredContent { |
47 -webkit-margin-start: var(--cr-toolbar-field-margin, 0); | |
48 display: flex; | 48 display: flex; |
49 flex: 1 1 0; | 49 flex: 1 1 0; |
50 justify-content: center; | 50 justify-content: center; |
51 } | 51 } |
52 | 52 |
53 :host([narrow_]) #centeredContent { | 53 :host([narrow_]) #centeredContent { |
54 -webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px); | 54 -webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px); |
55 } | 55 } |
56 | 56 |
57 :host(:not([narrow_])) h1 { | 57 :host(:not([narrow_])) h1 { |
58 @apply(--cr-toolbar-header-wide); | 58 @apply(--cr-toolbar-header-wide); |
59 } | 59 } |
60 | 60 |
61 :host(:not([narrow_])) #leftContent { | 61 :host(:not([narrow_])) #leftContent { |
62 /* The amount of space left of the search field: | 62 /* The amount of space left of the search field: |
63 (width of window - width of search field) / 2. */ | 63 (width of window - width of search field) / 2. */ |
64 max-width: calc((100% - var(--cr-toolbar-field-width)) / 2); | 64 max-width: calc((100% - var(--cr-toolbar-field-width)) / 2); |
65 @apply(--cr-toolbar-left-content-wide); | 65 @apply(--cr-toolbar-left-content-wide); |
66 } | 66 } |
67 | 67 |
| 68 :host(:not([narrow_])) #centeredContent { |
| 69 -webkit-margin-start: var(--cr-toolbar-field-margin, 0); |
| 70 } |
| 71 |
68 :host(:not([narrow_])) #rightContent { | 72 :host(:not([narrow_])) #rightContent { |
69 @apply(--cr-toolbar-right-content-wide); | 73 @apply(--cr-toolbar-right-content-wide); |
70 } | 74 } |
71 | 75 |
72 :host([narrow_]) #centeredContent { | 76 :host([narrow_]) #centeredContent { |
73 justify-content: flex-end; | 77 justify-content: flex-end; |
74 } | 78 } |
75 | 79 |
76 :host([narrow_][showing-search_]) #leftContent { | 80 :host([narrow_][showing-search_]) #leftContent { |
77 opacity: 0; | 81 opacity: 0; |
(...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
153 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> | 157 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> |
154 </iron-media-query> | 158 </iron-media-query> |
155 </div> | 159 </div> |
156 | 160 |
157 <div id="rightContent"> | 161 <div id="rightContent"> |
158 <content select=".more-actions"></content> | 162 <content select=".more-actions"></content> |
159 </div> | 163 </div> |
160 </template> | 164 </template> |
161 <script src="cr_toolbar.js"></script> | 165 <script src="cr_toolbar.js"></script> |
162 </dom-module> | 166 </dom-module> |
OLD | NEW |