projects / GitHub / WoltLab / WCF.git / blame
| Commit | Line | Data |
|---|---|---|
| 99247776 | 1 | @keyframes wcfPopover { |
| 8a52619a TD |
2 | 0% { |
| 3 | visibility: visible; | |
| 4 | transform: translateY(-20px); | |
| 5 | opacity: 0; | |
| 6 | } | |
| 7 | 100% { | |
| 8 | visibility: visible; | |
| 9 | transform: translateY(0); | |
| 10 | opacity: 1; | |
| 11 | } | |
| 99247776 AE |
12 | } |
| 13 | ||
| 14 | @keyframes wcfPopoverOut { | |
| 8a52619a TD |
15 | 0% { |
| 16 | visibility: visible; | |
| 17 | transform: translateY(0); | |
| 18 | opacity: 1; | |
| 19 | } | |
| 20 | 100% { | |
| 21 | visibility: hidden; | |
| 22 | transform: translateY(-20px); | |
| 23 | opacity: 0; | |
| 24 | } | |
| 99247776 AE |
25 | } |
| 26 | ||
| d0f37ffb | 27 | /* outer element containing both the pointer and content element */ |
| cf1e012a | 28 | .popover { |
| 8a52619a | 29 | animation: wcfPopoverOut 0.3s; |
| 99247776 | 30 | animation-fill-mode: forwards; |
| cf1e012a | 31 | background-color: $wcfContentBackground; |
| 0b394b83 | 32 | border-radius: 2px; |
| 8a52619a | 33 | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); |
| cf1e012a AE |
34 | position: absolute; |
| 35 | top: 0; | |
| 36 | vertical-align: middle; | |
| 3a8d4181 | 37 | visibility: hidden; |
| d0f37ffb | 38 | width: 500px !important; |
| cf1e012a | 39 | z-index: 500; |
| 8a52619a | 40 | |
| cf1e012a | 41 | &.active { |
| 8a52619a | 42 | animation: wcfPopover 0.3s; |
| 99247776 | 43 | animation-fill-mode: forwards; |
| cf1e012a | 44 | } |
| 8a52619a | 45 | |
| 99247776 AE |
46 | &.forceHide { |
| 47 | animation: 0; | |
| 48 | visibility: hidden; | |
| cf1e012a | 49 | } |
| 8a52619a | 50 | |
| cf1e012a | 51 | > .elementPointer { |
| c5dd767e | 52 | display: none; |
| cf1e012a | 53 | } |
| 8a52619a | 54 | |
| 1d0c6649 MW |
55 | @include screen-sm-down { |
| 56 | display: none; | |
| 57 | } | |
| 99247776 AE |
58 | } |
| 59 | ||
| 60 | /* actual popover content */ | |
| 61 | .popoverContent { | |
| 62 | background-color: $wcfContentBackground; | |
| 63 | border-radius: 3px; | |
| 64 | color: $wcfContentText; | |
| d0f37ffb | 65 | padding: 15px; |
| 8a52619a | 66 | |
| 9c7c30c4 MW |
67 | > div { |
| 68 | max-height: 290px; | |
| 69 | min-height: 36px; | |
| 70 | overflow: hidden; | |
| 71 | } | |
| 8a52619a | 72 | |
| 99247776 AE |
73 | a { |
| 74 | color: $wcfContentLink; | |
| 8a52619a | 75 | |
| 99247776 AE |
76 | &:hover { |
| 77 | color: $wcfContentLinkActive; | |
| 78 | } | |
| cf1e012a | 79 | } |
| 8a52619a | 80 | |
| 191e6e08 AE |
81 | /* Workaround for the partially active mobile navigation on desktop devices. See #2791 */ |
| 82 | .jsMobileButtonGroupNavigation > .dropdownLabel { | |
| 83 | display: none; | |
| 84 | } | |
| cf1e012a | 85 | } |