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.expandable-bubble {
6  -webkit-border-image: url('chrome://theme/IDR_APP_NOTIFICATION_SMALL_BUBBLE')
7                        5 5 7 6 stretch;
8  -webkit-box-sizing: border-box;
9  -webkit-user-select: none;
10  border-width: 5px 5px 7px 6px;
11  color: #444;
12  cursor: pointer;
13  display: inline-block;
14  font-size: 12px;
15  position: absolute;
16  z-index: 1;
17}
18
19.expandable-bubble::after {
20  bottom: -1px;
21  content: url('chrome://theme/IDR_APP_NOTIFICATION_NUB');
22  display: block;
23  height: 7px;
24  position: absolute;
25  right: 5px;  /* TODO(finnur): Need to handle RTL properly. */
26  width: 9px;
27}
28
29.expandable-bubble > .expandable-bubble-contents > .expandable-bubble-title {
30  display: inline-block;
31  margin-left: 1px;
32  margin-top : -3px;
33  overflow: hidden;
34  white-space: nowrap;
35}
36
37.expandable-bubble[masked] > .expandable-bubble-contents >
38    .expandable-bubble-title::after {
39  content: url('chrome://theme/IDR_APP_NOTIFICATION_NUB_MASK');
40  display: block;
41  height: 15px;
42  overflow: hidden;
43  position: absolute;
44  right: 0;
45  top: 0;
46  width: 12px;
47}
48
49.expandable-bubble[expanded] > .expandable-bubble-contents >
50    .expandable-bubble-title {
51  font-size: 13px;
52  margin-bottom: 3px;
53  margin-left: 0;
54}
55
56.expandable-bubble-close {
57  height: 16px;
58  position: absolute;
59  right: 0;
60  top: 0;
61  width: 16px;
62  z-index: 2;
63}
64
65.expandable-bubble[expanded] {
66  padding: 3px;
67  z-index: 3;  /* One higher then the close button on an unexpanded bubble. */
68}
69
70.expandable-bubble[expanded] > .expandable-bubble-close {
71  z-index: 4;
72}
73
74.expandable-bubble-close {
75  background-image: -webkit-image-set(
76      url('../../../resources/default_100_percent/close_2.png') 1x,
77      url('../../../resources/default_200_percent/close_2.png') 2x);
78}
79
80.expandable-bubble-close:hover {
81  background-image: -webkit-image-set(
82      url('../../../resources/default_100_percent/close_2_hover.png') 1x,
83      url('../../../resources/default_200_percent/close_2_hover.png') 2x);
84}
85
86.expandable-bubble-close:active {
87  background-image: -webkit-image-set(
88      url('../../../resources/default_100_percent/close_2_pressed.png') 1x,
89      url('../../../resources/default_200_percent/close_2_pressed.png') 2x);
90}
91