| Index: third_party/polymer/components-chromium/core-tooltip/demo.html
|
| diff --git a/third_party/polymer/components-chromium/core-tooltip/demo.html b/third_party/polymer/components-chromium/core-tooltip/demo.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..bdb7b8c1ba661fc8c0e2adc866a0e52efefbba53
|
| --- /dev/null
|
| +++ b/third_party/polymer/components-chromium/core-tooltip/demo.html
|
| @@ -0,0 +1,171 @@
|
| +<!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>
|
|
|
Chromium Code Reviews
Issue 592593002:
Inline scripts were extracted from Polymer elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master