REGRESSION (r204052): Popovers on bot watcher's dashboard are broken
[WebKit.git] / Tools / BuildSlaveSupport / build.webkit.org-config / public_html / dashboard / Styles / Popover.css
1 /*
2  * Copyright (C) 2013 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .popover {
27     position: absolute;
28     min-width: 20px;
29     min-height: 20px;
30     box-sizing: border-box;
31     pointer-events: none;
32     z-index: 1000;
33     opacity: 0;
34 }
35
36 .popover.arrow-up {
37     padding: 16px 5px 5px 5px;
38 }
39
40 .popover.arrow-right {
41     padding: 5px 16px 5px 5px;
42 }
43
44 .popover.arrow-down {
45     padding: 5px 5px 16px 5px;
46 }
47
48 .popover.arrow-left {
49     padding: 5px 5px 5px 16px;
50 }
51
52 .popover.visible {
53     opacity: 1;
54 }
55
56 .popover.step-in {
57     /* The delay is after popover creation. Popover tracking code may add a delay of its own before it decides to create the popover. */
58     /* It is useful to separate the delays because popover creation can be costly, e.g. it can lazily load data from network during the transition. */
59     transition: opacity 0ms 800ms;
60     opacity: 1;
61 }
62
63 .popover.fade-out {
64     transition: opacity 500ms 200ms;
65     opacity: 0;
66 }
67
68 .popover > .container {
69     position: absolute;
70     left: 5px;
71     top: 5px;
72     right: 5px;
73     bottom: 5px;
74
75     padding: 5px;
76
77     overflow-y: auto;
78     overflow-x: hidden;
79
80     pointer-events: auto;
81 }
82
83 .popover > .container.center {
84     display: -webkit-flex;
85     -webkit-justify-content: center;
86     -webkit-align-items: center;
87 }
88
89 .popover.arrow-up > .container {
90     top: 16px;
91 }
92
93 .popover.arrow-right > .container {
94     right: 16px;
95 }
96
97 .popover.arrow-down > .container {
98     bottom: 16px;
99 }
100
101 .popover.arrow-left > .container {
102     left: 16px;
103 }
104
105 body.popover-prevent-document-scrolling {
106     overflow: hidden;
107 }