video/public/less/popovers.less

   1 //
   2 // Popovers
   3 // --------------------------------------------------
   4
   5
   6 .popover {
   7   position: absolute;
   8   top: 0;
   9   left: 0;
  10   z-index: @zindexPopover;
  11   display: none;
  12   width: 236px;
  13   padding: 1px;
  14   background-color: @popoverBackground;
  15   -webkit-background-clip: padding-box;
  16      -moz-background-clip: padding;
  17           background-clip: padding-box;
  18   border: 1px solid #ccc;
  19   border: 1px solid rgba(0,0,0,.2);
  20   .border-radius(6px);
  21   .box-shadow(0 5px 10px rgba(0,0,0,.2));
  22
  23   // Offset the popover to account for the popover arrow
  24   &.top     { margin-bottom: 10px; }
  25   &.right   { margin-left: 10px; }
  26   &.bottom  { margin-top: 10px; }
  27   &.left    { margin-right: 10px; }
  28
  29 }
  30
  31 .popover-title {
  32   margin: 0; // reset heading margin
  33   padding: 8px 14px;
  34   font-size: 14px;
  35   font-weight: normal;
  36   line-height: 18px;
  37   background-color: @popoverTitleBackground;
  38   border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
  39   .border-radius(5px 5px 0 0);
  40 }
  41
  42 .popover-content {
  43   padding: 9px 14px;
  44   p, ul, ol {
  45     margin-bottom: 0;
  46   }
  47 }
  48
  49 // Arrows
  50 .popover .arrow,
  51 .popover .arrow:after {
  52   position: absolute;
  53   display: inline-block;
  54   width: 0;
  55   height: 0;
  56   border-color: transparent;
  57   border-style: solid;
  58 }
  59 .popover .arrow:after {
  60   content: "";
  61   z-index: -1;
  62 }
  63
  64 .popover {
  65   &.top .arrow {
  66     bottom: -@popoverArrowWidth;
  67     left: 50%;
  68     margin-left: -@popoverArrowWidth;
  69     border-width: @popoverArrowWidth @popoverArrowWidth 0;
  70     border-top-color: @popoverArrowColor;
  71     &:after {
  72       border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
  73       border-top-color: @popoverArrowOuterColor;
  74       bottom: -1px;
  75       left: -@popoverArrowOuterWidth;
  76     }
  77   }
  78   &.right .arrow {
  79     top: 50%;
  80     left: -@popoverArrowWidth;
  81     margin-top: -@popoverArrowWidth;
  82     border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0;
  83     border-right-color: @popoverArrowColor;
  84     &:after {
  85       border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
  86       border-right-color: @popoverArrowOuterColor;
  87       bottom: -@popoverArrowOuterWidth;
  88       left: -1px;
  89     }
  90   }
  91   &.bottom .arrow {
  92     top: -@popoverArrowWidth;
  93     left: 50%;
  94     margin-left: -@popoverArrowWidth;
  95     border-width: 0 @popoverArrowWidth @popoverArrowWidth;
  96     border-bottom-color: @popoverArrowColor;
  97     &:after {
  98       border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
  99       border-bottom-color: @popoverArrowOuterColor;
 100       top: -1px;
 101       left: -@popoverArrowOuterWidth;
 102     }
 103   }
 104   &.left .arrow {
 105     top: 50%;
 106     right: -@popoverArrowWidth;
 107     margin-top: -@popoverArrowWidth;
 108     border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth;
 109     border-left-color: @popoverArrowColor;
 110     &:after {
 111       border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
 112       border-left-color: @popoverArrowOuterColor;
 113       bottom: -@popoverArrowOuterWidth;
 114       right: -1px;
 115     }
 116   }
 117 }