Commit | Line | Data |
---|---|---|
99247776 AE |
1 | @keyframes wcfPopover { |
2 | 0% { visibility: visible; transform: translateY(-20px); opacity: 0; } | |
3 | 100% { visibility: visible; transform: translateY(0); opacity: 1; } | |
4 | } | |
5 | ||
6 | @keyframes wcfPopoverOut { | |
7 | 0% { visibility: visible; transform: translateY(0); opacity: 1; } | |
8 | 100% { visibility: hidden; transform: translateY(-20px); opacity: 0; } | |
9 | } | |
10 | ||
d0f37ffb | 11 | /* outer element containing both the pointer and content element */ |
cf1e012a | 12 | .popover { |
99247776 AE |
13 | animation: wcfPopoverOut .3s; |
14 | animation-fill-mode: forwards; | |
cf1e012a | 15 | background-color: $wcfContentBackground; |
0b394b83 AE |
16 | border-radius: 2px; |
17 | box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); | |
cf1e012a AE |
18 | position: absolute; |
19 | top: 0; | |
20 | vertical-align: middle; | |
3a8d4181 | 21 | visibility: hidden; |
d0f37ffb | 22 | width: 500px !important; |
cf1e012a AE |
23 | z-index: 500; |
24 | ||
cf1e012a | 25 | &.active { |
99247776 AE |
26 | animation: wcfPopover .3s; |
27 | animation-fill-mode: forwards; | |
cf1e012a AE |
28 | } |
29 | ||
99247776 AE |
30 | &.forceHide { |
31 | animation: 0; | |
32 | visibility: hidden; | |
cf1e012a AE |
33 | } |
34 | ||
35 | > .elementPointer { | |
c5dd767e | 36 | display: none; |
cf1e012a | 37 | } |
99247776 AE |
38 | } |
39 | ||
40 | /* actual popover content */ | |
41 | .popoverContent { | |
42 | background-color: $wcfContentBackground; | |
43 | border-radius: 3px; | |
44 | color: $wcfContentText; | |
45 | max-height: 320px; | |
46 | min-height: 36px; | |
47 | overflow: hidden; | |
d0f37ffb | 48 | padding: 15px; |
cf1e012a | 49 | |
99247776 AE |
50 | a { |
51 | color: $wcfContentLink; | |
cf1e012a | 52 | |
99247776 AE |
53 | &:hover { |
54 | color: $wcfContentLinkActive; | |
55 | } | |
cf1e012a AE |
56 | } |
57 | } |