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 |