Index: third_party/polymer/components/core-tooltip/demo.html |
diff --git a/third_party/polymer/components/core-tooltip/demo.html b/third_party/polymer/components/core-tooltip/demo.html |
deleted file mode 100644 |
index bdb7b8c1ba661fc8c0e2adc866a0e52efefbba53..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/components/core-tooltip/demo.html |
+++ /dev/null |
@@ -1,171 +0,0 @@ |
-<!doctype html> |
-<html lang="en"> |
-<head> |
- |
- <meta charset="utf-8"> |
- <title>Core Tooltip</title> |
- |
- <script src="../platform/platform.js"></script> |
- |
- <link rel="import" href="core-tooltip.html"> |
- |
- <style> |
- body { |
- font-family: "Open Sans", sans-serif; |
- font-weight: 300; |
- padding: 24px; |
- } |
- |
- section { |
- display: flex; |
- justify-content: center; |
- align-items: center; |
- } |
- |
- .example { |
- margin: 35px 15px; |
- } |
- |
- .example > * { |
- margin: 0 15px; |
- } |
- |
- .fakebutton { |
- box-shadow: 0 0 3px #aaa inset; |
- border-radius: 3px; |
- padding: 7px 5px; |
- } |
- .fakebutton:hover { |
- background-color: white; |
- } |
- |
- img { |
- width: 400px; |
- height: 150px; |
- object-fit: cover; |
- } |
- |
- img.large { |
- border: 15px solid white; |
- box-sizing: border-box; |
- } |
- |
- .profile { |
- width: 60px; |
- height: auto; |
- border-radius: 50%; |
- vertical-align: middle; |
- } |
- |
- a { |
- color: currentcolor; |
- text-decoration: none; |
- } |
- |
- .rich { |
- background: hotpink; |
- color: white; |
- padding:20px; |
- border-radius: 5px; |
- } |
- |
- core-tooltip.fancy::shadow .polymer-tooltip { |
- opacity: 0; |
- -webkit-transition: all 300ms cubic-bezier(0,1.92,.99,1.07); |
- transition: all 300ms cubic-bezier(0,1.92,.99,1.07); |
- -webkit-transform: translate3d(0, -10px, 0); |
- transform: translate3d(0, -10px, 0); |
- } |
- |
- core-tooltip.fancy:hover::shadow .polymer-tooltip, |
- core-tooltip.fancy:focus::shadow .polymer-tooltip { |
- opacity: 1; |
- -webkit-transform: translate3d(0, 0, 0); |
- transform: translate3d(0, 0, 0); |
- } |
- </style> |
- <style shim-shadowdom2> |
- .on /deep/ .polymer-tooltip { |
- visibility: visible; |
- } |
- </style> |
- |
-</head> |
-<body unresolved> |
- |
- <article onclick="this.classList.toggle('on');"> |
- |
- <em>click the page to toggle all examples...</em> |
- |
- <section class="small"> |
- |
- <div class="example"> |
- |
- <core-tooltip label='position="left"' position="left"> |
- <div class="fakebutton">|||</div> |
- </core-tooltip> |
- |
- <core-tooltip label='position="top"' position="top"> |
- <div class="fakebutton">|||</div> |
- </core-tooltip> |
- |
- <core-tooltip label='position="bottom"' position="bottom"> |
- <div class="fakebutton">|||</div> |
- </core-tooltip> |
- |
- <core-tooltip label='position="right"' position="right"> |
- <div class="fakebutton">|||</div> |
- </core-tooltip> |
- |
- </div> |
- |
- <div class="example"> |
- |
- <core-tooltip label="Fancy effect" class="fancy"> |
- <img src="https://pbs.twimg.com/profile_images/378800000548263523/c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg |
- " class="profile"> |
- </core-tooltip> |
- |
- </div> |
- |
- </section> |
- |
- <section> |
- |
- <div class="example"> |
- |
- <core-tooltip> |
- <div class="rich">Rich tooltip with HTML</div> |
- <div tip> |
- <img src="https://pbs.twimg.com/profile_images/378800000548263523/c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg |
- " class="profile" style="width: 40px;margin-right: 8px;">Eric <b>Bidelman</b> - <a href="#">@ebidel</a></div> |
- </core-tooltip> |
- |
- </div> |
- |
- <div class="example"> |
- |
- <core-tooltip label="<core-tooltip large>" large> |
- Larger tooltips for mobile |
- </core-tooltip> |
- |
- </div> |
- |
- </section> |
- |
- <section> |
- |
- <div class="example"> |
- |
- <core-tooltip label="Tooltip with no arrow and always on: <core-tooltip noarrow show>" position="bottom" noarrow show> |
- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg" class="large"> |
- </core-tooltip> |
- |
- </div> |
- |
- </section> |
- |
- </article> |
- |
-</body> |
-</html> |