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

   1 @keyframes wcfPopover {
   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         }
  12 }
  13
  14 @keyframes wcfPopoverOut {
  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         }
  25 }
  26
  27 /* outer element containing both the pointer and content element */
  28 .popover {
  29         animation: wcfPopoverOut 0.3s;
  30         animation-fill-mode: forwards;
  31         background-color: $wcfContentBackground;
  32         border-radius: 2px;
  33         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  34         position: absolute;
  35         top: 0;
  36         vertical-align: middle;
  37         visibility: hidden;
  38         width: 500px !important;
  39         z-index: 500;
  40
  41         &.active {
  42                 animation: wcfPopover 0.3s;
  43                 animation-fill-mode: forwards;
  44         }
  45
  46         &.forceHide {
  47                 animation: 0;
  48                 visibility: hidden;
  49         }
  50
  51         > .elementPointer {
  52                 display: none;
  53         }
  54
  55         @include screen-sm-down {
  56                 display: none;
  57         }
  58 }
  59
  60 /* actual popover content */
  61 .popoverContent {
  62         background-color: $wcfContentBackground;
  63         border-radius: 3px;
  64         color: $wcfContentText;
  65         padding: 15px;
  66
  67         > div {
  68                 max-height: 290px;
  69                 min-height: 36px;
  70                 overflow: hidden;
  71         }
  72
  73         a {
  74                 color: $wcfContentLink;
  75
  76                 &:hover {
  77                         color: $wcfContentLinkActive;
  78                 }
  79         }
  80
  81         /* Workaround for the partially active mobile navigation on desktop devices. See #2791 */
  82         .jsMobileButtonGroupNavigation > .dropdownLabel {
  83                 display: none;
  84         }
  85 }