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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/welcome/win10/inline.html

Issue 2733433002: [Win10 FRE] Make inlined-image more Polymer-friendly to fix <action-link> CSS inclusion. (Closed)
Patch Set: Remove .content; reorder Polymer 'properties' field. Created 3 years, 9 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
« no previous file with comments | « chrome/browser/resources/welcome/win10/inline.css ('k') | chrome/browser/resources/welcome/win10/inline.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>$i18n{headerText}</title> 5 <title>$i18n{headerText}</title>
6 6
7 <link rel="import" href="chrome://resources/cr_elements/icons.html"> 7 <link rel="import" href="chrome://resources/cr_elements/icons.html">
8 <link rel="import" href="chrome://resources/html/cr.html"> 8 <link rel="import" href="chrome://resources/html/cr.html">
9 <link rel="import" href="chrome://resources/html/action_link.html"> 9 <link rel="import" href="chrome://resources/html/action_link.html">
10 <link rel="import" href="chrome://resources/html/action_link_css.html"> 10 <link rel="import" href="chrome://resources/html/action_link_css.html">
11 <link rel="import" href="chrome://resources/html/polymer.html"> 11 <link rel="import" href="chrome://resources/html/polymer.html">
12 <link rel="import" href="chrome://resources/html/util.html"> 12 <link rel="import" href="chrome://resources/html/util.html">
13 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.h tml"> 13 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.h tml">
14 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-bu tton.html"> 14 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-bu tton.html">
15 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.ht ml"> 15 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.ht ml">
16 16
17 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> 17 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
18 <link rel="stylesheet" href="/welcome.css"> 18 <link rel="stylesheet" href="/welcome.css">
19 19
20 <script src="/welcome.js"></script> 20 <dom-module id="welcome-win10-inline">
21 </head> 21 <template>
22 <body> 22 <style include="action-link">
23 <!-- TODO(tmartino): Create a dom-module and transfer contents of inline.css 23 :host {
24 inside.--> 24 align-items: flex-start;
25 <template is="dom-bind" id="inline-app"> 25 display: inline-flex;
26 <div class="content"> 26 flex-direction: column;
27 padding: 4em 1.5em 1.5em 1.5em;
28 }
29
30 a {
31 color: var(--google-blue-500);
32 text-decoration: none;
33 }
34
35 ol {
36 margin: 0;
37 padding: 0;
38 }
39
40 strong {
41 font-weight: 500;
42 }
43
44 .header-logo {
45 content: url(chrome://welcome-win10/logo-large.png);
46 height: 4em;
47 }
48
49 .heading {
50 font-size: 2.125em;
51 padding-bottom: 2rem;
52 padding-top: 1rem;
53 }
54
55 .sections {
56 margin-bottom: 2em;
57 }
58
59 .section.expandable {
60 border-top: 1px solid var(--google-grey-300);
61 }
62
63 .section.expandable:last-child {
64 border-bottom: 1px solid var(--google-grey-300);
65 }
66
67 .section.expandable .section-heading {
68 color: var(--google-blue-500);
69 cursor: pointer;
70 }
71
72 .section-heading {
73 align-items: center;
74 display: flex;
75 padding: 1.5em 0;
76 }
77
78 .section-heading-text {
79 flex: 1;
80 font-weight: 500;
81 }
82
83 .section.expandable .section-heading-text {
84 font-weight: normal;
85 }
86
87 .section.expandable.expanded .section-heading-text {
88 font-weight: 500;
89 }
90
91 .section-heading-expand {
92 height: 1.25em;
93 transition: transform 150ms cubic-bezier(.4, .2, 0, 1) 50ms;
94 width: 1.25em;
95 }
96
97 .section.expandable.expanded .section-heading-expand {
98 transform: rotate(180deg);
99 transition-delay: 150ms;
100 }
101
102 .section-steps {
103 overflow: hidden;
104 }
105
106 .section-steps li {
107 -webkit-margin-start: 1.25em;
108 -webkit-padding-start: 1em;
109 margin-bottom: 1em;
110 }
111
112 .section-steps li:last-child {
113 margin-bottom: 1em;
114 }
115
116 .section.expandable .section-steps {
117 max-height: 0;
118 opacity: 0;
119 transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms,
120 opacity 150ms;
121 visibility: hidden;
122 }
123
124 .section.expandable.expanded .section-steps {
125 max-height: 28.75em;
126 opacity: 1;
127 transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms,
128 opacity 150ms 250ms;
129 visibility: visible;
130 }
131
132 .button {
133 -webkit-font-smoothing: antialiased;
134 background: var(--google-blue-500);
135 border-radius: 2px;
136 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
137 color: #fff;
138 display: inline-block;
139 font-size: .8125em;
140 font-weight: 500;
141 line-height: 2.25rem;
142 padding: 0 1em;
143 text-align: center;
144 transition: 300ms cubic-bezier(.4, .2, 0, 1);
145 will-change: box-shadow;
146 }
147
148 .button:hover {
149 background: var(--paper-blue-a400);
150 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px
151 rgba(0, 0, 0, .24)
152 }
153
154 .logo-small {
155 content: url(chrome://welcome-win10/logo-small.png);
156 display: inline;
157 height: 1.25em;
158 vertical-align: top;
159 width: 1.25em;
160 }
161
162 .screenshot {
163 display: block;
164 height: 440px;
165 margin: 0 auto;
166 max-width: 100%;
167 position: relative;
168 top: -96px;
169 width: 720px;
170 }
171
172 .screenshot-image {
173 box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px
174 rgba(0, 0, 0, .24);
175 height: 48vw;
176 margin: 1em 0;
177 max-height: 300px;
178 max-width: 400px;
179 min-height: 150px;
180 min-width: 200px;
181 position: relative;
182 width: 64vw;
183 }
184
185 #default-image {
186 background: url(chrome://welcome-win10/default.webp);
187 background-repeat: no-repeat;
188 background-size: cover;
189 }
190
191 #taskbar-image {
192 background: url(chrome://welcome-win10/pin.webp);
193 background-repeat: no-repeat;
194 background-size: cover;
195 }
196
197 .screenshot-overlay {
198 box-sizing: border-box;
199 line-height: 0;
200 position: absolute;
201 }
202
203 #browser-overlay {
204 left: 41%;
205 top: 81%;
206 }
207
208 #edge-overlay {
209 left: 49%;
210 top: 88%;
211 }
212
213 #taskbar-overlay {
214 left: 31%;
215 top: 73%;
216 }
217
218 #taskbar-overlay div {
219 color: #ccc;
220 font-family: Tahoma, Verdana, Segoe, sans-serif;
221 font-weight: 500;
222 }
223
224 #icon-overlay {
225 background-image: url(chrome://welcome-win10/logo-small.png);
226 background-size: cover;
227 height: 8%;
228 left: 46%;
229 top: 90%;
230 width: 6%;
231 }
232
233 /* These values are precisely set so that the text over the screenshot
234 * starts scaling at the same time the image starts scaling too. */
235 @media (max-width: 626px) {
236 #browser-overlay {
237 font-size: 1.28vw;
238 }
239
240 #edge-overlay {
241 font-size: 1.44vw;
242 }
243
244 #taskbar-overlay {
245 font-size: 1.95vw;
246 }
247 }
248
249 /* Font-sizes used when the screenshot exactly reaches its max size. */
250 @media (min-width: 626px) {
251 #browser-overlay {
252 font-size: 8px;
253 }
254
255 #edge-overlay {
256 font-size: 9px;
257 }
258
259 #taskbar-overlay {
260 font-size: 12.2px;
261 }
262 }
263 </style>
27 <div class="header-logo"></div> 264 <div class="header-logo"></div>
28 <div class="heading">$i18n{headerText}</div> 265 <div class="heading">$i18n{headerText}</div>
29 <div class="sections"> 266 <div class="sections">
30 <div class$="[[computeClasses(isCombined)]]"> 267 <div class$="[[computeClasses(isCombined)]]">
31 <template is="dom-if" if="[[isCombined]]"> 268 <template is="dom-if" if="[[isCombined]]">
32 <a is="action-link" class="section-heading" on-tap="onToggle"> 269 <a is="action-link" class="section-heading" on-tap="onToggle">
33 <div class="section-heading-text"> 270 <div class="section-heading-text">
34 $i18n{defaultBrowserSubheaderText} 271 $i18n{defaultBrowserSubheaderText}
35 </div> 272 </div>
36 <iron-icon class="section-heading-expand" icon="cr:expand-more"> 273 <iron-icon class="section-heading-expand" icon="cr:expand-more">
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after
83 </div> 320 </div>
84 </div> 321 </div>
85 </li> 322 </li>
86 </ol> 323 </ol>
87 </div> 324 </div>
88 </template> 325 </template>
89 </div> 326 </div>
90 <paper-button class="button" on-tap="onContinue"> 327 <paper-button class="button" on-tap="onContinue">
91 $i18n{continueText} 328 $i18n{continueText}
92 </paper-button> 329 </paper-button>
93 </div> 330 </template>
94 </template> 331 <script src="/welcome.js"></script>
332 </dom-module>
333 </head>
334 <body>
335 <welcome-win10-inline></welcome-win10-inline>
95 </body> 336 </body>
96 </html> 337 </html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/welcome/win10/inline.css ('k') | chrome/browser/resources/welcome/win10/inline.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698