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