public/js/views/popover.less

   1 body.embedded .popover-footer-content,
   2 body.logged-out .popover-footer-content {
   3   display: none;
   4 }
   5
   6 .popover-item__action,
   7 .popover-item__action-disabled {
   8   border-radius: 4px;
   9   padding: 0px 5px;
  10 }
  11
  12 .popover-item__action:hover {
  13   cursor: pointer;
  14   background: #08c;
  15   color: white;
  16 }
  17
  18 .popover-item__action-disabled {
  19   color: #ccc;
  20 }
  21
  22 .popover-item__action-disabled:hover {
  23   background: #08c;
  24   cursor: default;
  25 }
  26
  27 .b-popover {
  28     display: block; // bootstrap-vue doesn't use `.show`. If the DOM element exists we should show it.
  29     transition: none; // we want the popover to hide instantly.
  30 }
  31
  32 .popover-body {
  33   &:extend(.popover-content);
  34 }
  35
  36
  37 // Hacking only the left placement of the popover, if you need top, bottom or right,
  38 // copy the styles in similar manner from `public/less/bootstrap/popovers.less`
  39
  40 .bs-popover-left {
  41   /**
  42   I'm so sorry for this hack 😿. Unfortunately the <b-popover> offset property
  43   can shift the popover only on y-axis (up and down) whilst thanks to reusing bootstrap 3
  44   styles, the arrow is hanging out 10px to the right and is covering the `...` ellipsis icon.
  45
  46   Since <b-popover> computes all the styles and adds them to the element, we need to use !important
  47
  48   The offset property still worked (`offset=0,10`) in bootstrap-vue@2.0.0-rc.27
  49
  50   This can be removed once we stop using the bootstrap 3 popover in our backbone code.
  51   */
  52   left: -10px !important;
  53 }
  54 .bs-popover-left .arrow {
  55   &:extend(.popover.left .arrow);
  56   top: 50% !important; // not proud of this but the vue-bootstrap adds the top attribute directly on the element so we need to use !important to override it
  57 }
  58
  59 .bs-popover-left .arrow:after {
  60   &:extend(.popover.left .arrow:after);
  61 }