• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
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
33html[dir=ltr] .bubble-top::before {
34  left: 17px;
35}
36
37html[dir=rtl] .bubble-top::before {
38  right: 17px;
39}
40
41html[dir=ltr] .bubble-right::before,
42html[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
53html[dir=ltr] .bubble-bottom::before {
54  left: 17px;
55}
56
57html[dir=rtl] .bubble-bottom::before {
58  right: 17px;
59}
60
61html[dir=ltr] .bubble-left::before,
62html[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
81html[dir=ltr] .bubble-top::after {
82  left: 17px;
83}
84
85html[dir=rtl] .bubble-top::after {
86  right: 17px;
87}
88
89html[dir=ltr] .bubble-right::after,
90html[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
101html[dir=ltr] .bubble-bottom::after {
102  left: 17px;
103}
104
105html[dir=rtl] .bubble-bottom::after {
106  right: 17px;
107}
108
109html[dir=ltr] .bubble-left::after,
110html[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
126html[dir=rtl] .error-message-bubble {
127  background-position: right top;
128}