FloatPanel.less
1.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// FloatPanel
.@{prefix}-floatpanel {
position: absolute;
.box-shadow(@floatpanel-box-shadow);
}
.@{prefix}-floatpanel.@{prefix}-fixed {
position: fixed;
}
// Popover panel
.@{prefix}-floatpanel .@{prefix}-arrow,
.@{prefix}-floatpanel .@{prefix}-arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.@{prefix}-floatpanel .@{prefix}-arrow {
border-width: @popover-arrow-outer-width;
}
.@{prefix}-floatpanel .@{prefix}-arrow:after {
border-width: @popover-arrow-width;
content: "";
}
.@{prefix}-floatpanel.@{prefix}-popover {
.reset-gradient();
.border-radius(6px);
.box-shadow(@floatpanel-box-shadow);
top: 0;
left: 0;
background: @popover-bg;
border: 1px solid @panel-border;
border: 1px solid @popover-arrow-outer;
&.@{prefix}-bottom {
margin-top: @popover-arrow-width;
*margin-top: 0;
& > .@{prefix}-arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @panel-border;
border-bottom-color: @popover-arrow-outer;
top: -@popover-arrow-outer-width;
&:after {
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
border-bottom-color: @popover-arrow;
}
}
&.@{prefix}-start { margin-left: -22px; }
&.@{prefix}-start > .@{prefix}-arrow { left: 20px; }
&.@{prefix}-end { margin-left: 22px; }
&.@{prefix}-end > .@{prefix}-arrow { right: 10px; left: auto; }
}
}