| 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 outline: none; | |
| 13 } | |
| 14 | |
| 15 :host(:hover:not([disabled])) .core-tooltip { | |
| 16 visibility: visible !important; | |
| 17 } | |
| 18 | |
| 19 :host([focused]) .core-tooltip { | |
| 20 visibility: visible !important; | |
| 21 } | |
| 22 | |
| 23 .core-tooltip:not(.show) { | |
| 24 visibility: hidden; | |
| 25 } | |
| 26 | |
| 27 .core-tooltip { | |
| 28 position: absolute; | |
| 29 font-size: 10px; | |
| 30 font-family: sans-serif; | |
| 31 padding: 8px; | |
| 32 color: white; | |
| 33 background-color: rgba(0,0,0,0.8); | |
| 34 box-sizing: border-box; | |
| 35 border-radius: 3px; /* TODO: not in spec. */ | |
| 36 white-space: nowrap; | |
| 37 line-height: 6px; | |
| 38 z-index: 1002; /* TODO: this is brittle. */ | |
| 39 -webkit-user-select: none; | |
| 40 user-select: none; | |
| 41 } | |
| 42 | |
| 43 :host([large]) .core-tooltip { | |
| 44 line-height: 14px; | |
| 45 font-size: 14px; | |
| 46 padding: 16px; | |
| 47 } | |
| 48 | |
| 49 .core-tooltip.noarrow::after { | |
| 50 display: none; | |
| 51 } | |
| 52 | |
| 53 .core-tooltip::after { | |
| 54 position: absolute; | |
| 55 border: solid transparent; | |
| 56 content: ''; | |
| 57 height: 0; | |
| 58 width: 0; | |
| 59 border-width: 4px; | |
| 60 } | |
| 61 | |
| 62 .top { | |
| 63 margin-bottom: 10px; /* TODO: not specified in spec */ | |
| 64 bottom: 100%; | |
| 65 } | |
| 66 | |
| 67 .right { | |
| 68 margin-left: 10px; /* TODO: not specified in spec */ | |
| 69 left: 100%; | |
| 70 } | |
| 71 | |
| 72 .bottom { | |
| 73 top: 100%; | |
| 74 margin-top: 10px; /* TODO: not specified in spec */ | |
| 75 } | |
| 76 | |
| 77 .left { | |
| 78 margin-right: 10px; /* TODO: not specified in spec */ | |
| 79 right: 100%; | |
| 80 } | |
| 81 | |
| 82 .core-tooltip.bottom::after { | |
| 83 bottom: 100%; | |
| 84 left: calc(50% - 4px); | |
| 85 border-bottom-color: rgba(0,0,0,0.8); | |
| 86 } | |
| 87 | |
| 88 .core-tooltip.left::after { | |
| 89 left: 100%; | |
| 90 top: calc(50% - 4px); | |
| 91 border-left-color: rgba(0,0,0,0.8); | |
| 92 } | |
| 93 | |
| 94 .core-tooltip.top::after { | |
| 95 top: 100%; | |
| 96 left: calc(50% - 4px); | |
| 97 border-top-color: rgba(0,0,0,0.8); | |
| 98 } | |
| 99 | |
| 100 .core-tooltip.right::after { | |
| 101 right: 100%; | |
| 102 top: calc(50% - 4px); | |
| 103 border-right-color: rgba(0,0,0,0.8); | |
| 104 } | |
| OLD | NEW |