OLD | NEW |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. | 3 * found in the LICENSE file. |
4 * | 4 * |
5 * Css based bubble. | 5 * Css based bubble. |
6 */ | 6 */ |
7 | 7 |
8 .bubble { | 8 .bubble { |
9 background: white; | 9 background: white; |
10 border: 1px solid rgba(0, 0, 0, 0.25); | 10 border: 1px solid rgba(0, 0, 0, 0.25); |
11 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | 11 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
12 font-size: 12px; | 12 font-size: 12px; |
13 margin: 2px; | 13 margin: 2px; |
14 max-width: 250px; | 14 max-width: 250px; |
15 padding: 16px; | 15 padding: 16px; |
16 position: absolute; | 16 position: absolute; |
17 } | 17 } |
18 | 18 |
19 .bubble:before { | 19 .bubble::before { |
20 border-style: solid; | 20 border-style: solid; |
21 border-width: 8px; | 21 border-width: 8px; |
22 content: ''; | 22 content: ''; |
23 display: block; | 23 display: block; |
24 position: absolute; | 24 position: absolute; |
25 } | 25 } |
26 | 26 |
27 .bubble-top:before { | 27 .bubble-top::before { |
28 border-color: rgba(0, 0, 0, 0.25) transparent transparent transparent; | 28 border-color: rgba(0, 0, 0, 0.25) transparent transparent transparent; |
29 bottom: -16px; | 29 bottom: -16px; |
30 } | 30 } |
31 | 31 |
32 html[dir=ltr] .bubble-top:before { | 32 html[dir=ltr] .bubble-top::before { |
33 left: 17px; | 33 left: 17px; |
34 } | 34 } |
35 | 35 |
36 html[dir=rtl] .bubble-top:before { | 36 html[dir=rtl] .bubble-top::before { |
37 right: 17px; | 37 right: 17px; |
38 } | 38 } |
39 | 39 |
40 html[dir=ltr] .bubble-right:before, | 40 html[dir=ltr] .bubble-right::before, |
41 html[dir=rtl] .bubble-left:before { | 41 html[dir=rtl] .bubble-left::before { |
42 border-color: transparent rgba(0, 0, 0, 0.25) transparent transparent; | 42 border-color: transparent rgba(0, 0, 0, 0.25) transparent transparent; |
43 left: -16px; | 43 left: -16px; |
44 top: 17px; | 44 top: 17px; |
45 } | 45 } |
46 | 46 |
47 .bubble-bottom:before { | 47 .bubble-bottom::before { |
48 border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent; | 48 border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent; |
49 top: -16px; | 49 top: -16px; |
50 } | 50 } |
51 | 51 |
52 html[dir=ltr] .bubble-bottom:before { | 52 html[dir=ltr] .bubble-bottom::before { |
53 left: 17px; | 53 left: 17px; |
54 } | 54 } |
55 | 55 |
56 html[dir=rtl] .bubble-bottom:before { | 56 html[dir=rtl] .bubble-bottom::before { |
57 right: 17px; | 57 right: 17px; |
58 } | 58 } |
59 | 59 |
60 html[dir=ltr] .bubble-left:before, | 60 html[dir=ltr] .bubble-left::before, |
61 html[dir=rtl] .bubble-right:before { | 61 html[dir=rtl] .bubble-right::before { |
62 border-color: transparent transparent transparent rgba(0, 0, 0, 0.25); | 62 border-color: transparent transparent transparent rgba(0, 0, 0, 0.25); |
63 right: -16px; | 63 right: -16px; |
64 top: 17px; | 64 top: 17px; |
65 } | 65 } |
66 | 66 |
67 .bubble:after { | 67 .bubble::after { |
68 border-style: solid; | 68 border-style: solid; |
69 border-width: 8px; | 69 border-width: 8px; |
70 content: ''; | 70 content: ''; |
71 display: block; | 71 display: block; |
72 position: absolute; | 72 position: absolute; |
73 } | 73 } |
74 | 74 |
75 .bubble-top:after { | 75 .bubble-top::after { |
76 border-color: white transparent transparent transparent; | 76 border-color: white transparent transparent transparent; |
77 bottom: -15px; | 77 bottom: -15px; |
78 } | 78 } |
79 | 79 |
80 html[dir=ltr] .bubble-top:after { | 80 html[dir=ltr] .bubble-top::after { |
81 left: 17px; | 81 left: 17px; |
82 } | 82 } |
83 | 83 |
84 html[dir=rtl] .bubble-top:after { | 84 html[dir=rtl] .bubble-top::after { |
85 right: 17px; | 85 right: 17px; |
86 } | 86 } |
87 | 87 |
88 html[dir=ltr] .bubble-right:after, | 88 html[dir=ltr] .bubble-right::after, |
89 html[dir=rtl] .bubble-left:after { | 89 html[dir=rtl] .bubble-left::after { |
90 border-color: transparent white transparent transparent; | 90 border-color: transparent white transparent transparent; |
91 left: -15px; | 91 left: -15px; |
92 top: 17px; | 92 top: 17px; |
93 } | 93 } |
94 | 94 |
95 .bubble-bottom:after { | 95 .bubble-bottom::after { |
96 border-color: transparent transparent white transparent; | 96 border-color: transparent transparent white transparent; |
97 top: -15px; | 97 top: -15px; |
98 } | 98 } |
99 | 99 |
100 html[dir=ltr] .bubble-bottom:after { | 100 html[dir=ltr] .bubble-bottom::after { |
101 left: 17px; | 101 left: 17px; |
102 } | 102 } |
103 | 103 |
104 html[dir=rtl] .bubble-bottom:after { | 104 html[dir=rtl] .bubble-bottom::after { |
105 right: 17px; | 105 right: 17px; |
106 } | 106 } |
107 | 107 |
108 html[dir=ltr] .bubble-left:after, | 108 html[dir=ltr] .bubble-left::after, |
109 html[dir=rtl] .bubble-right:after { | 109 html[dir=rtl] .bubble-right::after { |
110 border-color: transparent transparent transparent white; | 110 border-color: transparent transparent transparent white; |
111 right: -15px; | 111 right: -15px; |
112 top: 17px; | 112 top: 17px; |
113 } | 113 } |
OLD | NEW |