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

Side by Side Diff: sky/examples/flights-app/app-toast.sky

Issue 886683002: Add a selection and outline to flights-app. (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Created 5 years, 10 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
OLDNEW
1 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" /> 1 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
2 2
3 <sky-element name="app-toast"> 3 <sky-element name="app-toast">
4 <template> 4 <template>
5 <style> 5 <style>
6 :host { 6 :host {
7 position: absolute; 7 position: absolute;
8 bottom: 32px; 8 bottom: 32px;
9 right: 32px; 9 right: 32px;
10 max-width: 55%; 10 max-width: 55%;
11 box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4); 11 box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4);
12 background-image: linear-gradient(#E5D658, #DFCF43); 12 background-image: linear-gradient(#E5D658, #DFCF43);
13 border: 1px solid #AEA477; 13 border: 1px solid #AEA477;
14 padding: 6px; 14 padding: 6px;
15 border-radius: 2px; 15 border-radius: 2px;
16 display: flex; 16 display: flex;
17 align-items: center; 17 align-items: center;
18 font-size: 0.8em; 18 font-size: 0.8em;
19 overflow: hidden; 19 overflow: hidden;
20 } 20 }
21 21
22 .header { 22 .header {
23 flex-shrink: 0; 23 flex-shrink: 0;
24 margin-right: 6px; 24 margin-right: 6px;
25 } 25 }
26
27 .close-box {
28 position: absolute;
29 top: 3px;
30 right: 3px;
31 width: 1em;
32 overflow: hidden;
33 text-align: center;
34 outline: 1px solid #AEA477;
35 }
26 </style> 36 </style>
27 <div class="header"> 37 <div class="header">
28 <content select=".toast-icon" /> 38 <content select=".toast-icon" />
29 </div> 39 </div>
30 <div class="content"> 40 <div class="content">
31 <content select=".toast-content" /> 41 <content select=".toast-content" />
32 </div> 42 </div>
43 <div class="close-box">
44 X
45 </div>
33 </template> 46 </template>
34 <script> 47 <script>
35 module.exports = class extends SkyElement { 48 module.exports = class extends SkyElement {
36 }.register(); 49 }.register();
37 </script> 50 </script>
38 </sky-element> 51 </sky-element>
OLDNEW
« no previous file with comments | « sky/examples/flights-app/app-search-input.sky ('k') | sky/tests/framework/flights-app-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698