| 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
|
| deleted file mode 100644
|
| index 75a7acf81bc50e13e62a1d4b355b2afb95830db4..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/components-chromium/core-tooltip/demo.html
|
| +++ /dev/null
|
| @@ -1,211 +0,0 @@
|
| -<!--
|
| - @license
|
| - Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
| - This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| - The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| - The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| - Code distributed by Google as part of the polymer project is also
|
| - subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| --->
|
| -<!doctype html>
|
| -<html lang="en">
|
| -<head>
|
| -
|
| - <meta charset="utf-8">
|
| - <title>Core Tooltip</title>
|
| -
|
| - <script src="../webcomponentsjs/webcomponents.js"></script>
|
| -
|
| - <link rel="import" href="../core-icon-button/core-icon-button.html">
|
| - <link rel="import" href="../paper-fab/paper-fab.html">
|
| - <link rel="import" href="core-tooltip.html">
|
| -
|
| - <style>
|
| - body {
|
| - font-family: "Open Sans", sans-serif;
|
| - font-weight: 300;
|
| - padding: 24px;
|
| - }
|
| -
|
| - .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;
|
| - }
|
| -
|
| - </style>
|
| -
|
| - <style shim-shadowdom>
|
| - core-tooltip.fancy::shadow .core-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 .core-tooltip,
|
| - core-tooltip.fancy:focus::shadow .core-tooltip {
|
| - opacity: 1;
|
| - -webkit-transform: translate3d(0, 0, 0);
|
| - transform: translate3d(0, 0, 0);
|
| - }
|
| - </style>
|
| -
|
| -</head>
|
| -<body unresolved>
|
| -
|
| - <article>
|
| -
|
| - <button>Toggle all</button>
|
| -
|
| - <section class="small" layout horizontal center-center>
|
| -
|
| - <div class="example">
|
| -
|
| - <core-tooltip label='position="left"' position="left">
|
| - <core-icon-button icon="drawer"></core-icon-button>
|
| - </core-tooltip>
|
| -
|
| - <core-tooltip label='position="top"' position="top">
|
| - <core-icon-button icon="drawer"></core-icon-button>
|
| - </core-tooltip>
|
| -
|
| - <core-tooltip label='position="bottom"' position="bottom">
|
| - <core-icon-button icon="drawer"></core-icon-button>
|
| - </core-tooltip>
|
| -
|
| - <core-tooltip label='position="right"' position="right">
|
| - <core-icon-button icon="drawer"></core-icon-button>
|
| - </core-tooltip>
|
| -
|
| - </div>
|
| -
|
| - <div class="example">
|
| -
|
| - <core-tooltip label="Fancy effect" class="fancy">
|
| - <paper-fab icon="add"></paper-fab>
|
| - </core-tooltip>
|
| -
|
| - </div>
|
| -
|
| - </section>
|
| -
|
| - <section layout horizontal center-center>
|
| -
|
| - <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>
|
| -
|
| - <div class="example">
|
| -
|
| - <core-tooltip label="disabled" disabled>
|
| - Disabled Tooltip
|
| - </core-tooltip>
|
| -
|
| - </div>
|
| -
|
| - </section>
|
| -
|
| - <section layout horizontal center-center>
|
| -
|
| - <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>
|
| -
|
| - <section layout horizontal center-center>
|
| -
|
| - <div class="example">
|
| -
|
| - <core-tooltip id="dynamic" show>
|
| - Tooltips are only shown (on hover) when a label is set<br> or a html rich snippet is given. →
|
| - </core-tooltip>
|
| - <button id="fillbutton">Fill tooltip</button>
|
| -
|
| - </div>
|
| -
|
| - </section>
|
| -
|
| - </article>
|
| -
|
| -<script>
|
| - document.querySelector('button').addEventListener('click', function(e) {
|
| - var tooltips = document.querySelectorAll('core-tooltip');
|
| - Array.prototype.forEach.call(tooltips, function(tooltip) {
|
| - tooltip.show = !tooltip.show;
|
| - });
|
| - });
|
| -
|
| - document.querySelector('#fillbutton').addEventListener('click', function(e) {
|
| - e.stopPropagation();
|
| -
|
| - var el = document.querySelector('#dynamic');
|
| - el.insertAdjacentHTML('beforeend', '<div tip><b>See</b>. Told ya so!</div>');
|
| -
|
| - });
|
| -</script>
|
| -
|
| -</body>
|
| -</html>
|
|
|