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 | ||
11 | /* outer element containg 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; |
99247776 AE |
16 | border: 1px solid $wcfDropdownBorder; |
17 | box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2); | |
cf1e012a AE |
18 | position: absolute; |
19 | top: 0; | |
20 | vertical-align: middle; | |
cf1e012a AE |
21 | width: 400px !important; |
22 | z-index: 500; | |
23 | ||
cf1e012a | 24 | &.active { |
99247776 AE |
25 | animation: wcfPopover .3s; |
26 | animation-fill-mode: forwards; | |
cf1e012a AE |
27 | } |
28 | ||
99247776 AE |
29 | &.forceHide { |
30 | animation: 0; | |
31 | visibility: hidden; | |
cf1e012a AE |
32 | } |
33 | ||
34 | > .elementPointer { | |
27f3ef15 | 35 | border-width: 0 10px 10px; |
cf1e012a | 36 | border-style: solid; |
99247776 AE |
37 | border-color: $wcfDropdownBorder transparent; |
38 | top: 0; | |
cf1e012a AE |
39 | |
40 | &.flipVertical { | |
27f3ef15 | 41 | border-width: 10px 10px 0; |
99247776 | 42 | bottom: 0; |
cf1e012a | 43 | top: auto; |
99247776 AE |
44 | |
45 | > span { | |
27f3ef15 AE |
46 | border-width: 10px 10px 0; |
47 | bottom: 1px; | |
99247776 AE |
48 | top: auto; |
49 | } | |
cf1e012a | 50 | } |
99247776 AE |
51 | |
52 | > span { | |
53 | border-color: $wcfContentBackground transparent; | |
54 | border-style: solid; | |
27f3ef15 AE |
55 | border-width: 0 10px 10px; |
56 | left: -10px; | |
99247776 | 57 | position: absolute; |
27f3ef15 | 58 | top: 1px; |
99247776 | 59 | } |
cf1e012a | 60 | } |
99247776 AE |
61 | } |
62 | ||
63 | /* actual popover content */ | |
64 | .popoverContent { | |
65 | background-color: $wcfContentBackground; | |
66 | border-radius: 3px; | |
67 | color: $wcfContentText; | |
68 | max-height: 320px; | |
69 | min-height: 36px; | |
70 | overflow: hidden; | |
71 | padding: 10px; | |
cf1e012a | 72 | |
99247776 AE |
73 | a { |
74 | color: $wcfContentLink; | |
cf1e012a | 75 | |
99247776 AE |
76 | &:hover { |
77 | color: $wcfContentLinkActive; | |
78 | } | |
cf1e012a AE |
79 | } |
80 | } |