| 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 |