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 --paper-icon-button-ink-color: white; | 12 --paper-icon-button-ink-color: white; |
13 align-items: center; | 13 align-items: center; |
14 color: #fff; | 14 color: #fff; |
15 display: flex; | 15 display: flex; |
16 height: var(--cr-toolbar-height); | 16 height: var(--cr-toolbar-height); |
17 } | 17 } |
18 | 18 |
19 h1 { | 19 h1 { |
20 -webkit-margin-start: 6px; | 20 -webkit-margin-start: 6px; |
21 -webkit-padding-end: 12px; | 21 -webkit-padding-end: 12px; |
22 flex: 1; | 22 flex: 1; |
23 font-size: 123%; | 23 font-size: 123%; |
24 font-weight: 400; | 24 font-weight: 400; |
| 25 overflow: hidden; |
25 text-overflow: ellipsis; | 26 text-overflow: ellipsis; |
26 overflow: hidden; | |
27 white-space: nowrap; | 27 white-space: nowrap; |
28 } | 28 } |
29 | 29 |
30 #leftContent { | 30 #leftContent { |
31 /* margin-start here must match margin-end on #rightContent. */ | 31 /* margin-start here must match margin-end on #rightContent. */ |
32 -webkit-margin-start: 12px; | 32 -webkit-margin-start: 12px; |
33 position: relative; | 33 position: relative; |
34 transition: opacity 100ms; | 34 transition: opacity 100ms; |
35 } | 35 } |
36 | 36 |
(...skipping 20 matching lines...) Expand all Loading... |
57 | 57 |
58 #rightContent { | 58 #rightContent { |
59 -webkit-margin-end: 12px; | 59 -webkit-margin-end: 12px; |
60 } | 60 } |
61 | 61 |
62 :host([narrow]) #centeredContent { | 62 :host([narrow]) #centeredContent { |
63 justify-content: flex-end; | 63 justify-content: flex-end; |
64 } | 64 } |
65 | 65 |
66 :host([narrow][showing-search_]) #leftContent { | 66 :host([narrow][showing-search_]) #leftContent { |
| 67 opacity: 0; |
67 position: absolute; | 68 position: absolute; |
68 opacity: 0; | |
69 } | 69 } |
70 | 70 |
71 :host(:not([narrow])) #leftContent { | 71 :host(:not([narrow])) #leftContent { |
72 flex: 1 1 var(--cr-toolbar-field-margin, 0); | 72 flex: 1 1 var(--cr-toolbar-field-margin, 0); |
73 } | 73 } |
74 | 74 |
75 :host(:not([narrow])) #rightContent { | 75 :host(:not([narrow])) #rightContent { |
76 flex: 1 1 0; | 76 flex: 1 1 0; |
77 text-align: end; | 77 text-align: end; |
78 } | 78 } |
(...skipping 16 matching lines...) Expand all Loading... |
95 white-space: nowrap; | 95 white-space: nowrap; |
96 z-index: 2; | 96 z-index: 2; |
97 } | 97 } |
98 | 98 |
99 #menuPromo::before { | 99 #menuPromo::before { |
100 background: inherit; | 100 background: inherit; |
101 /* Up arrow. 105% in Y coordinates fixes glitch at 110/125% zoom. */ | 101 /* Up arrow. 105% in Y coordinates fixes glitch at 110/125% zoom. */ |
102 clip-path: polygon(0 105%, 100% 105%, 50% 0); | 102 clip-path: polygon(0 105%, 100% 105%, 50% 0); |
103 content: ''; | 103 content: ''; |
104 display: block; | 104 display: block; |
| 105 height: 6px; |
105 left: 10px; | 106 left: 10px; |
106 height: 6px; | |
107 position: absolute; | 107 position: absolute; |
108 top: -6px; | 108 top: -6px; |
109 width: 12px; | 109 width: 12px; |
110 } | 110 } |
111 | 111 |
112 :host-context([dir=rtl]) #menuPromo::before { | 112 :host-context([dir=rtl]) #menuPromo::before { |
113 left: auto; | 113 left: auto; |
114 right: 10px; | 114 right: 10px; |
115 } | 115 } |
116 | 116 |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
156 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow}}"> | 156 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow}}"> |
157 </iron-media-query> | 157 </iron-media-query> |
158 </div> | 158 </div> |
159 | 159 |
160 <div id="rightContent"> | 160 <div id="rightContent"> |
161 <content select=".more-actions"></content> | 161 <content select=".more-actions"></content> |
162 </div> | 162 </div> |
163 </template> | 163 </template> |
164 <script src="cr_toolbar.js"></script> | 164 <script src="cr_toolbar.js"></script> |
165 </dom-module> | 165 </dom-module> |
OLD | NEW |