diff options
Diffstat (limited to 'systrace/catapult/third_party/polymer/components/core-tooltip/demo.html')
| -rw-r--r-- | systrace/catapult/third_party/polymer/components/core-tooltip/demo.html | 211 |
1 files changed, 0 insertions, 211 deletions
diff --git a/systrace/catapult/third_party/polymer/components/core-tooltip/demo.html b/systrace/catapult/third_party/polymer/components/core-tooltip/demo.html deleted file mode 100644 index 7ea6aea..0000000 --- a/systrace/catapult/third_party/polymer/components/core-tooltip/demo.html +++ /dev/null @@ -1,211 +0,0 @@ -<!-- - @license - Copyright (c) 2015 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> |