OLD | NEW |
1 <app> | 1 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" /> |
| 2 <import src="app-header.sky" /> |
| 3 <import src="app-title.sky" /> |
| 4 <import src="app-menu-button.sky" /> |
| 5 <import src="app-panel.sky" /> |
| 6 <import src="app-panel-header.sky" /> |
| 7 <import src="app-panel-content.sky" /> |
| 8 <import src="app-toolbar.sky" /> |
| 9 <import src="app-search-input.sky" /> |
| 10 <import src="app-scrollable.sky" /> |
| 11 <import src="app-toast.sky" /> |
| 12 |
| 13 <template> |
2 <style> | 14 <style> |
3 * { box-sizing: border-box; } | 15 * { box-sizing: border-box; } |
4 | 16 |
5 t, span { | 17 t, span { |
6 display: inline; | 18 display: inline; |
7 } | 19 } |
8 | 20 |
9 app { | 21 :host { |
10 display: flex; | 22 display: flex; |
11 flex-direction: column; | 23 flex-direction: column; |
12 height: 100%; | 24 height: 100%; |
13 background-color: #494949; | 25 background-color: #494949; |
14 font-family: "Helvetica Neue", sans-serif; | 26 font-family: "Helvetica", sans-serif; |
15 font-size: 16px; | 27 font-size: 16px; |
16 color: #2B2B2B; | 28 color: #2B2B2B; |
17 } | 29 } |
18 | 30 |
19 app-header { | 31 .toast-icon { |
20 display: flex; | |
21 background: linear-gradient(#3E77B7, #6C98C4); | |
22 padding: 8px; | |
23 color: white; | |
24 border-bottom: 1px solid #3E77B7; | |
25 } | |
26 | |
27 app-title { | |
28 flex: 1; | |
29 display: flex; | |
30 align-items: center; | |
31 font-size: 22px; | |
32 margin-left: 8px; | |
33 } | |
34 | |
35 app-menu-button { | |
36 display: flex; | |
37 border-radius: 4px; | |
38 justify-content: center; | |
39 align-items: center; | |
40 width: 30px; | |
41 height: 30px; | |
42 } | |
43 | |
44 .menu-icon { | |
45 width: 18px; | |
46 } | |
47 | |
48 .menu-icon-inner { | |
49 width: 14px; | |
50 } | |
51 | |
52 app-scrollable { | |
53 flex: 1; | |
54 box-shadow: inset 0px 0px 22px 2px rgba(22, 22, 22, 0.63); | |
55 overflow: scroll; | |
56 } | |
57 | |
58 app-panel { | |
59 display: flex; | |
60 flex-direction: column; | |
61 background-color: white; | |
62 } | |
63 | |
64 app-panel-header { | |
65 background-color: #DEDEDE; | |
66 padding: 8px; | |
67 display: flex; | |
68 align-items: center; | |
69 } | |
70 | |
71 app-panel-content { | |
72 display: flex; | |
73 } | |
74 | |
75 app-toolbar { | |
76 background-color: #F6F6F6; | |
77 padding: 0 8px; | |
78 } | |
79 | |
80 app-search-input { | |
81 background-color: #F6F6F6; | |
82 padding: 4px; | |
83 display: flex; | |
84 align-items: center; | |
85 font-size: 1.2em; | |
86 } | |
87 | |
88 app-toast { | |
89 position: absolute; | |
90 bottom: 32px; | |
91 right: 32px; | |
92 max-width: 55%; | |
93 box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4); | |
94 background-color: #b0281a; | |
95 background-image: linear-gradient(#E5D658, #DFCF43); | |
96 border: 1px solid #AEA477; | |
97 padding: 6px; | |
98 border-radius: 2px; | |
99 display: flex; | |
100 align-items: center; | |
101 font-size: 0.8em; | |
102 } | |
103 | |
104 app-toast-header { | |
105 flex-shrink: 0; | |
106 margin-right: 6px; | |
107 } | |
108 | |
109 .tip-icon { | |
110 font-weight: bold; | 32 font-weight: bold; |
111 font-size: 24px; | 33 font-size: 24px; |
112 border-radius: 16px; | 34 border-radius: 16px; |
113 width: 32px; | 35 width: 32px; |
114 height: 32px; | 36 height: 32px; |
115 border: 2px solid black; | 37 border: 2px solid black; |
116 line-height: 30px; | 38 line-height: 30px; |
117 text-align: center; | 39 text-align: center; |
118 } | 40 } |
119 | 41 |
120 .tip-price { | 42 .tip-price { |
121 font-weight: bold; | 43 font-weight: bold; |
122 } | 44 } |
123 | 45 |
124 .input-text { | |
125 margin-left: 8px; | |
126 } | |
127 | |
128 .route-result { | 46 .route-result { |
129 margin: 16px 16px 0 16px; | 47 margin: 16px 16px 0 16px; |
130 } | 48 } |
131 | 49 |
132 .route-title { | 50 .route-title { |
133 flex: 1; | 51 flex: 1; |
134 } | 52 } |
135 | 53 |
136 .airline { | 54 .airline { |
137 border-radius: 2px; | 55 border-radius: 2px; |
(...skipping 22 matching lines...) Expand all Loading... |
160 a { | 78 a { |
161 text-decoration: none; | 79 text-decoration: none; |
162 color: #1155CC; | 80 color: #1155CC; |
163 } | 81 } |
164 </style> | 82 </style> |
165 <app-header> | 83 <app-header> |
166 <app-title> | 84 <app-title> |
167 <t>Search</t> | 85 <t>Search</t> |
168 </app-title> | 86 </app-title> |
169 <app-menu-button> | 87 <app-menu-button> |
170 <img src="images/menu-white.png" class="menu-icon"> | 88 <img src="/sky/examples/flights/images/menu-white.png" style="width: 18px"
/> |
171 </app-menu-button> | 89 </app-menu-button> |
172 </app-header> | 90 </app-header> |
173 <app-toolbar> | 91 <app-toolbar> |
174 <app-search-input> | 92 <app-search-input /> |
175 <span class="input-icon"><t>🔎</t></span> | |
176 <span class="input-text"><t>flights today to dc by price</t></span> | |
177 </app-search-input> | |
178 </app-toolbar> | 93 </app-toolbar> |
179 <app-scrollable> | 94 <app-scrollable> |
180 <app-panel class="route-result"> | 95 <app-panel class="route-result"> |
181 <app-panel-header> | 96 <app-panel-header> |
182 <div class="route-title"> | 97 <div class="route-title"> |
183 <t>SFO to DCA</t> | 98 <t>SFO to DCA</t> |
184 </div> | 99 </div> |
185 <app-menu-button> | 100 <app-menu-button> |
186 <img src="images/menu-enabled.png" class="menu-icon-inner"> | 101 <img src="/sky/examples/flights/images/menu-enabled.png" style="width:
14px" /> |
187 </app-menu-button> | 102 </app-menu-button> |
188 </app-panel-header> | 103 </app-panel-header> |
189 <app-panel-content class="airline"> | 104 <app-panel-content class="airline"> |
190 <div class="airline-logo"> | 105 <div class="airline-logo"> |
191 <img class="airline-logo-image" src="images/virgin-america.jpg"> | 106 <img class="airline-logo-image" src="/sky/examples/flights/images/virg
in-america.jpg" /> |
192 </div> | 107 </div> |
193 <div class="airline-name"> | 108 <div class="airline-name"> |
194 <t>Virgin America</t> | 109 <t>Virgin America</t> |
195 </div> | 110 </div> |
196 <div class="airline-best-price"> | 111 <div class="airline-best-price"> |
197 <t><a>$800</a></t> | 112 <t><a>$800</a></t> |
198 </div> | 113 </div> |
199 </app-panel-content> | 114 </app-panel-content> |
200 <app-panel-content class="airline"> | 115 <app-panel-content class="airline"> |
201 <div class="airline-logo"> | 116 <div class="airline-logo"> |
202 <img class="airline-logo-image" src="images/ba.jpg"> | 117 <img class="airline-logo-image" src="/sky/examples/flights/images/ba.j
pg" /> |
203 </div> | 118 </div> |
204 <div class="airline-name"> | 119 <div class="airline-name"> |
205 <t>British Airways</t> | 120 <t>British Airways</t> |
206 </div> | 121 </div> |
207 <div class="airline-best-price"> | 122 <div class="airline-best-price"> |
208 <t><a>$700</a></t> | 123 <t><a>$700</a></t> |
209 </div> | 124 </div> |
210 </app-panel-content> | 125 </app-panel-content> |
211 <app-panel-content class="airline"> | 126 <app-panel-content class="airline"> |
212 <div class="airline-logo"> | 127 <div class="airline-logo"> |
213 <img class="airline-logo-image" src="images/united.jpg"> | 128 <img class="airline-logo-image" src="/sky/examples/flights/images/unit
ed.jpg" /> |
214 </div> | 129 </div> |
215 <div class="airline-name"> | 130 <div class="airline-name"> |
216 <t>United</t> | 131 <t>United</t> |
217 </div> | 132 </div> |
218 <div class="airline-best-price"> | 133 <div class="airline-best-price"> |
219 <t><a>$667</a></t> | 134 <t><a>$667</a></t> |
220 </div> | 135 </div> |
221 </app-panel-content> | 136 </app-panel-content> |
222 <app-panel-content class="airline"> | 137 <app-panel-content class="airline"> |
223 <div class="airline-logo"> | 138 <div class="airline-logo"> |
224 <img class="airline-logo-image" src="images/delta.jpg"> | 139 <img class="airline-logo-image" src="/sky/examples/flights/images/delt
a.jpg" /> |
225 </div> | 140 </div> |
226 <div class="airline-name"> | 141 <div class="airline-name"> |
227 <t>Delta</t> | 142 <t>Delta</t> |
228 </div> | 143 </div> |
229 <div class="airline-best-price"> | 144 <div class="airline-best-price"> |
230 <t><a>$450</a></t> | 145 <t><a>$450</a></t> |
231 </div> | 146 </div> |
232 </app-panel-content> | 147 </app-panel-content> |
233 </app-panel> | 148 </app-panel> |
234 <app-panel class="route-result"> | 149 <app-panel class="route-result"> |
235 <app-panel-header> | 150 <app-panel-header> |
236 <div class="route-title"> | 151 <div class="route-title"> |
237 <t>SJC to DCA</t> | 152 <t>SJC to DCA</t> |
238 </div> | 153 </div> |
239 <app-menu-button> | 154 <app-menu-button> |
240 <img src="images/menu-enabled.png" class="menu-icon-inner"> | 155 <img src="/sky/examples/flights/images/menu-enabled.png" style="width:
14px" /> |
241 </app-menu-button> | 156 </app-menu-button> |
242 </app-panel-header> | 157 </app-panel-header> |
243 <app-panel-content class="airline"> | 158 <app-panel-content class="airline"> |
244 <div class="airline-logo"> | 159 <div class="airline-logo"> |
245 <img class="airline-logo-image" src="images/virgin-america.jpg"> | 160 <img class="airline-logo-image" src="/sky/examples/flights/images/virg
in-america.jpg" /> |
246 </div> | 161 </div> |
247 <div class="airline-name"> | 162 <div class="airline-name"> |
248 <t>Virgin America</t> | 163 <t>Virgin America</t> |
249 </div> | 164 </div> |
250 <div class="airline-best-price"> | 165 <div class="airline-best-price"> |
251 <t><a>$1500</a></t> | 166 <t><a>$1500</a></t> |
252 </div> | 167 </div> |
253 </app-panel-content> | 168 </app-panel-content> |
254 <app-panel-content class="airline"> | 169 <app-panel-content class="airline"> |
255 <div class="airline-logo"> | 170 <div class="airline-logo"> |
256 <img class="airline-logo-image" src="images/jetblue.jpg"> | 171 <img class="airline-logo-image" src="/sky/examples/flights/images/jetb
lue.jpg" /> |
257 </div> | 172 </div> |
258 <div class="airline-name"> | 173 <div class="airline-name"> |
259 <t>jetBlue</t> | 174 <t>jetBlue</t> |
260 </div> | 175 </div> |
261 <div class="airline-best-price"> | 176 <div class="airline-best-price"> |
262 <t><a>$650</a></t> | 177 <t><a>$650</a></t> |
263 </div> | 178 </div> |
264 </app-panel-content> | 179 </app-panel-content> |
265 <app-panel-content class="airline"> | 180 <app-panel-content class="airline"> |
266 <div class="airline-logo"> | 181 <div class="airline-logo"> |
267 <img class="airline-logo-image" src="images/united.jpg"> | 182 <img class="airline-logo-image" src="/sky/examples/flights/images/unit
ed.jpg" /> |
268 </div> | 183 </div> |
269 <div class="airline-name"> | 184 <div class="airline-name"> |
270 <t>United</t> | 185 <t>United</t> |
271 </div> | 186 </div> |
272 <div class="airline-best-price"> | 187 <div class="airline-best-price"> |
273 <t><a>$367</a></t> | 188 <t><a>$367</a></t> |
274 </div> | 189 </div> |
275 </app-panel-content> | 190 </app-panel-content> |
276 </app-panel> | 191 </app-panel> |
277 </app-scrollable> | 192 </app-scrollable> |
278 <app-toast> | 193 <app-toast> |
279 <app-toast-header> | 194 <div class="toast-icon"> |
280 <div class="tip-icon"> | 195 <t>?</t> |
281 <t>?</t> | 196 </div> |
282 </div> | 197 <div class="toast-content"> |
283 </app-toast-header> | |
284 <app-toast-content> | |
285 <t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t> | 198 <t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t> |
286 </app-toast-content> | 199 </div> |
287 </app-toast> | 200 </app-toast> |
288 </app> | 201 </template> |
| 202 <script> |
| 203 SkyElement({ |
| 204 name: "flights-app", |
| 205 }); |
| 206 </script> |
OLD | NEW |