third_party/polymer/components/core-tooltip/demo.html - Issue 592603004: Revert "Polymer elements added to third_party/polymer."

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

Issue 592603004: Revert "Polymer elements added to third_party/polymer." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 6 years, 3 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 <!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>

OLD	NEW