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

Side by Side Diff: third_party/polymer/components-chromium/core-tooltip/demo.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 2 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
(Empty)
1 <!doctype html>
2 <html lang="en">
3 <head>
4
5 <meta charset="utf-8">
6 <title>Core Tooltip</title>
7
8 <script src="../platform/platform.js"></script>
9
10 <link rel="import" href="core-tooltip.html">
11
12 <style>
13 body {
14 font-family: "Open Sans", sans-serif;
15 font-weight: 300;
16 padding: 24px;
17 }
18
19 section {
20 display: flex;
21 justify-content: center;
22 align-items: center;
23 }
24
25 .example {
26 margin: 35px 15px;
27 }
28
29 .example > * {
30 margin: 0 15px;
31 }
32
33 .fakebutton {
34 box-shadow: 0 0 3px #aaa inset;
35 border-radius: 3px;
36 padding: 7px 5px;
37 }
38 .fakebutton:hover {
39 background-color: white;
40 }
41
42 img {
43 width: 400px;
44 height: 150px;
45 object-fit: cover;
46 }
47
48 img.large {
49 border: 15px solid white;
50 box-sizing: border-box;
51 }
52
53 .profile {
54 width: 60px;
55 height: auto;
56 border-radius: 50%;
57 vertical-align: middle;
58 }
59
60 a {
61 color: currentcolor;
62 text-decoration: none;
63 }
64
65 .rich {
66 background: hotpink;
67 color: white;
68 padding:20px;
69 border-radius: 5px;
70 }
71
72 core-tooltip.fancy::shadow .polymer-tooltip {
73 opacity: 0;
74 -webkit-transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
75 transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
76 -webkit-transform: translate3d(0, -10px, 0);
77 transform: translate3d(0, -10px, 0);
78 }
79
80 core-tooltip.fancy:hover::shadow .polymer-tooltip,
81 core-tooltip.fancy:focus::shadow .polymer-tooltip {
82 opacity: 1;
83 -webkit-transform: translate3d(0, 0, 0);
84 transform: translate3d(0, 0, 0);
85 }
86 </style>
87 <style shim-shadowdom2>
88 .on /deep/ .polymer-tooltip {
89 visibility: visible;
90 }
91 </style>
92
93 </head>
94 <body unresolved>
95
96 <article onclick="this.classList.toggle('on');">
97
98 <em>click the page to toggle all examples...</em>
99
100 <section class="small">
101
102 <div class="example">
103
104 <core-tooltip label='position="left"' position="left">
105 <div class="fakebutton">|||</div>
106 </core-tooltip>
107
108 <core-tooltip label='position="top"' position="top">
109 <div class="fakebutton">|||</div>
110 </core-tooltip>
111
112 <core-tooltip label='position="bottom"' position="bottom">
113 <div class="fakebutton">|||</div>
114 </core-tooltip>
115
116 <core-tooltip label='position="right"' position="right">
117 <div class="fakebutton">|||</div>
118 </core-tooltip>
119
120 </div>
121
122 <div class="example">
123
124 <core-tooltip label="Fancy effect" class="fancy">
125 <img src="https://pbs.twimg.com/profile_images/378800000548263523/c1 10b0a4c3e3e4d3dcce1d2020f3eded.jpeg
126 " class="profile">
127 </core-tooltip>
128
129 </div>
130
131 </section>
132
133 <section>
134
135 <div class="example">
136
137 <core-tooltip>
138 <div class="rich">Rich tooltip with HTML</div>
139 <div tip>
140 <img src="https://pbs.twimg.com/profile_images/378800000548263523/ c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg
141 " class="profile" style="width: 40px;margin-right: 8px;">Eric <b>Bidelma n</b> - <a href="#">@ebidel</a></div>
142 </core-tooltip>
143
144 </div>
145
146 <div class="example">
147
148 <core-tooltip label="<core-tooltip large>" large>
149 Larger tooltips for mobile
150 </core-tooltip>
151
152 </div>
153
154 </section>
155
156 <section>
157
158 <div class="example">
159
160 <core-tooltip label="Tooltip with no arrow and always on: <core-toolti p noarrow show>" position="bottom" noarrow show>
161 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jp g" class="large">
162 </core-tooltip>
163
164 </div>
165
166 </section>
167
168 </article>
169
170 </body>
171 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698