wcfsetup/install/files/style/ui/popover.scss

   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 containing both the pointer and content element */
  12 .popover {
  13         animation: wcfPopoverOut .3s;
  14         animation-fill-mode: forwards;
  15         background-color: $wcfContentBackground;
  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);
  18         position: absolute;
  19         top: 0;
  20         vertical-align: middle;
  21         visibility: hidden;
  22         width: 500px !important;
  23         z-index: 500;
  24
  25         &.active {
  26                 animation: wcfPopover .3s;
  27                 animation-fill-mode: forwards;
  28         }
  29
  30         &.forceHide {
  31                 animation: 0;
  32                 visibility: hidden;
  33         }
  34
  35         > .elementPointer {
  36                 display: none;
  37         }
  38
  39         @include screen-sm-down {
  40                 display: none;
  41         }
  42 }
  43
  44 /* actual popover content */
  45 .popoverContent {
  46         background-color: $wcfContentBackground;
  47         border-radius: 3px;
  48         color: $wcfContentText;
  49         padding: 15px;
  50
  51         > div {
  52                 max-height: 290px;
  53                 min-height: 36px;
  54                 overflow: hidden;
  55         }
  56
  57         a {
  58                 color: $wcfContentLink;
  59
  60                 &:hover {
  61                         color: $wcfContentLinkActive;
  62                 }
  63         }
  64
  65         /* Workaround for the partially active mobile navigation on desktop devices. See #2791 */
  66         .jsMobileButtonGroupNavigation > .dropdownLabel {
  67                 display: none;
  68         }
  69 }