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