bower_components/core-tooltip/demo.html - Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

Side by Side Diff: bower_components/core-tooltip/demo.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master

Patch Set: Created 5 years, 11 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

OLD	NEW
	(Empty)
1 <!--

2 @license

3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polym er.github.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS .txt

6 The complete set of contributors may be found at http://polymer.github.io/CO NTRIBUTORS.txt

7 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/P ATENTS.txt

9 -->

10 <!doctype html>

11 <html lang="en">

12 <head>

13

14 <meta charset="utf-8">

15 <title>Core Tooltip</title>

16

17 <script src="../platform/platform.js"></script>

18

19 <link rel="import" href="../core-icon-button/core-icon-button.html">

20 <link rel="import" href="../paper-fab/paper-fab.html">

21 <link rel="import" href="core-tooltip.html">

22

23 <style>

24 body {

25 font-family: "Open Sans", sans-serif;

26 font-weight: 300;

27 padding: 24px;

28 }

29

30 .example {

31 margin: 35px 15px;

32 }

33

34 .example > * {

35 margin: 0 15px;

36 }

37

38 .fakebutton {

39 box-shadow: 0 0 3px #aaa inset;

40 border-radius: 3px;

41 padding: 7px 5px;

42 }

43 .fakebutton:hover {

44 background-color: white;

45 }

46

47 img {

48 width: 400px;

49 height: 150px;

50 object-fit: cover;

51 }

52

53 img.large {

54 border: 15px solid white;

55 box-sizing: border-box;

56 }

57

58 .profile {

59 width: 60px;

60 height: auto;

61 border-radius: 50%;

62 vertical-align: middle;

63 }

64

65 a {

66 color: currentcolor;

67 text-decoration: none;

68 }

69

70 .rich {

71 background: hotpink;

72 color: white;

73 padding:20px;

74 border-radius: 5px;

75 }

76

77 </style>

78

79 <style shim-shadowdom>

80 core-tooltip.fancy::shadow .core-tooltip {

81 opacity: 0;

82 -webkit-transition: all 300ms cubic-bezier(0,1.92,.99,1.07);

83 transition: all 300ms cubic-bezier(0,1.92,.99,1.07);

84 -webkit-transform: translate3d(0, -10px, 0);

85 transform: translate3d(0, -10px, 0);

86 }

87

88 core-tooltip.fancy:hover::shadow .core-tooltip,

89 core-tooltip.fancy:focus::shadow .core-tooltip {

90 opacity: 1;

91 -webkit-transform: translate3d(0, 0, 0);

92 transform: translate3d(0, 0, 0);

93 }

94 </style>

95

96 </head>

97 <body unresolved>

98

99 <article>

100

101 <button>Toggle all</button>

102

103 <section class="small" layout horizontal center-center>

104

105 <div class="example">

106

107 <core-tooltip label='position="left"' position="left">

108 <core-icon-button icon="drawer"></core-icon-button>

109 </core-tooltip>

110

111 <core-tooltip label='position="top"' position="top">

112 <core-icon-button icon="drawer"></core-icon-button>

113 </core-tooltip>

114

115 <core-tooltip label='position="bottom"' position="bottom">

116 <core-icon-button icon="drawer"></core-icon-button>

117 </core-tooltip>

118

119 <core-tooltip label='position="right"' position="right">

120 <core-icon-button icon="drawer"></core-icon-button>

121 </core-tooltip>

122

123 </div>

124

125 <div class="example">

126

127 <core-tooltip label="Fancy effect" class="fancy">

128 <paper-fab icon="add"></paper-fab>

129 </core-tooltip>

130

131 </div>

132

133 </section>

134

135 <section layout horizontal center-center>

136

137 <div class="example">

138

139 <core-tooltip>

140 <div class="rich">Rich tooltip with HTML</div>

141 <div tip>

142 <img src="https://pbs.twimg.com/profile_images/378800000548263523/ c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg

143 " class="profile" style="width: 40px;margin-right: 8px;">Eric <b>Bidelma n</b> - <a href="#">@ebidel</a></div>

144 </core-tooltip>

145

146 </div>

147

148 <div class="example">

149

150 <core-tooltip label="<core-tooltip large>" large>

151 Larger tooltips for mobile

152 </core-tooltip>

153

154 </div>

155

156 <div class="example">

157

158 <core-tooltip label="disabled" disabled>

159 Disabled Tooltip

160 </core-tooltip>

161

162 </div>

163

164 </section>

165

166 <section layout horizontal center-center>

167

168 <div class="example">

169

170 <core-tooltip label="Tooltip with no arrow and always on: <core-toolti p noarrow show>" position="bottom" noarrow show>

171 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jp g" class="large">

172 </core-tooltip>

173

174 </div>

175

176 </section>

177

178 <section layout horizontal center-center>

179

180 <div class="example">

181

182 <core-tooltip id="dynamic" show>

183 Tooltips are only shown (on hover) when a label is set<br> or a html rich snippet is given. →

184 </core-tooltip>

185 <button id="fillbutton">Fill tooltip</button>

186

187 </div>

188

189 </section>

190

191 </article>

192

193 <script>

194 document.querySelector('button').addEventListener('click', function(e) {

195 var tooltips = document.querySelectorAll('core-tooltip');

196 Array.prototype.forEach.call(tooltips, function(tooltip) {

197 tooltip.show = !tooltip.show;

198 });

199 });

200

201 document.querySelector('#fillbutton').addEventListener('click', function(e) {

202 e.stopPropagation();

203

204 var el = document.querySelector('#dynamic');

205 el.insertAdjacentHTML('beforeend', '<div tip><b>See</b>. Told ya so!</div>') ;

206

207 });

208 </script>

209

210 </body>

211 </html>

OLD	NEW

« no previous file with comments | « bower_components/core-tooltip/core-tooltip.html ('k') | bower_components/core-tooltip/index.html » ('j') | no next file with comments »