OLD | NEW |
(Empty) | |
| 1 /* Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 2 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 3 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 4 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 5 Code distributed by Google as part of the polymer project is also |
| 6 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt */ |
| 7 |
| 8 :host { |
| 9 box-sizing: border-box; |
| 10 position: relative; |
| 11 display: inline-block; |
| 12 } |
| 13 |
| 14 :host(:hover) .polymer-tooltip { |
| 15 visibility: visible !important; |
| 16 } |
| 17 |
| 18 :host(:focus) .polymer-tooltip { |
| 19 visibility: visible !important; |
| 20 } |
| 21 |
| 22 .polymer-tooltip:not(.show) { |
| 23 visibility: hidden; |
| 24 } |
| 25 |
| 26 .polymer-tooltip { |
| 27 pointer-events: none; |
| 28 position: absolute; |
| 29 display: flex; |
| 30 font-size: 10px; |
| 31 font-family: sans-serif; |
| 32 padding: 8px; |
| 33 color: white; |
| 34 background-color: rgba(0,0,0,0.8); |
| 35 box-sizing: border-box; |
| 36 border-radius: 3px; /* TODO: not in spec. */ |
| 37 white-space: nowrap; |
| 38 line-height: 6px; |
| 39 z-index: 1002; /* TODO: this is brittle. */ |
| 40 } |
| 41 |
| 42 :host([large]) .polymer-tooltip { |
| 43 line-height: 14px; |
| 44 font-size: 14px; |
| 45 padding: 16px; |
| 46 } |
| 47 |
| 48 .polymer-tooltip.noarrow::after { |
| 49 display: none; |
| 50 } |
| 51 |
| 52 .polymer-tooltip::after { |
| 53 position: absolute; |
| 54 border: solid transparent; |
| 55 content: ''; |
| 56 height: 0; |
| 57 width: 0; |
| 58 border-width: 4px; |
| 59 } |
| 60 |
| 61 .top { |
| 62 margin-bottom: 10px; /* TODO: not specified in spec */ |
| 63 bottom: 100%; |
| 64 } |
| 65 |
| 66 .right { |
| 67 margin-left: 10px; /* TODO: not specified in spec */ |
| 68 left: 100%; |
| 69 } |
| 70 |
| 71 .bottom { |
| 72 top: 100%; |
| 73 margin-top: 10px; /* TODO: not specified in spec */ |
| 74 } |
| 75 |
| 76 .left { |
| 77 margin-right: 10px; /* TODO: not specified in spec */ |
| 78 right: 100%; |
| 79 } |
| 80 |
| 81 .polymer-tooltip.bottom::after { |
| 82 bottom: 100%; |
| 83 left: calc(50% - 4px); |
| 84 border-bottom-color: rgba(0,0,0,0.8); |
| 85 } |
| 86 |
| 87 .polymer-tooltip.left::after { |
| 88 left: 100%; |
| 89 top: calc(50% - 4px); |
| 90 border-left-color: rgba(0,0,0,0.8); |
| 91 } |
| 92 |
| 93 .polymer-tooltip.top::after { |
| 94 top: 100%; |
| 95 left: calc(50% - 4px); |
| 96 border-top-color: rgba(0,0,0,0.8); |
| 97 } |
| 98 |
| 99 .polymer-tooltip.right::after { |
| 100 right: 100%; |
| 101 top: calc(50% - 4px); |
| 102 border-right-color: rgba(0,0,0,0.8); |
| 103 } |
OLD | NEW |