git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/popovers.less

   1 //
   2 // Popovers
   3 // --------------------------------------------------
   4
   5
   6 .popover {
   7   position: absolute;
   8   top: 0;
   9   left: 0;
  10   z-index: @zindex-popover;
  11   display: none;
  12   max-width: @popover-max-width;
  13   padding: 1px;
  14   text-align: left; // Reset given new insertion method
  15   background-color: @popover-bg;
  16   -webkit-bg-clip: padding-box;
  17      -moz-bg-clip: padding;
  18   background-clip: padding-box;
  19   border: 1px solid @popover-fallback-border-color;
  20   border: 1px solid @popover-border-color;
  21   border-radius: @border-radius-large;
  22   .box-shadow(0 5px 10px rgba(0,0,0,.2));
  23
  24   // Overrides for proper insertion
  25   white-space: normal;
  26
  27   // Offset the popover to account for the popover arrow
  28   &.top     { margin-top: -10px; }
  29   &.right   { margin-left: 10px; }
  30   &.bottom  { margin-top: 10px; }
  31   &.left    { margin-left: -10px; }
  32 }
  33
  34 .popover-title {
  35   margin: 0; // reset heading margin
  36   padding: 8px 14px;
  37   font-size: @font-size-base;
  38   font-weight: normal;
  39   line-height: 18px;
  40   background-color: @popover-title-bg;
  41   border-bottom: 1px solid darken(@popover-title-bg, 5%);
  42   border-radius: 5px 5px 0 0;
  43 }
  44
  45 .popover-content {
  46   padding: 9px 14px;
  47 }
  48
  49 // Arrows
  50 //
  51 // .arrow is outer, .arrow:after is inner
  52
  53 .popover .arrow {
  54   &,
  55   &:after {
  56     position: absolute;
  57     display: block;
  58     width: 0;
  59     height: 0;
  60     border-color: transparent;
  61     border-style: solid;
  62   }
  63 }
  64 .popover .arrow {
  65   border-width: @popover-arrow-outer-width;
  66 }
  67 .popover .arrow:after {
  68   border-width: @popover-arrow-width;
  69   content: "";
  70 }
  71
  72 .popover {
  73   &.top .arrow {
  74     left: 50%;
  75     margin-left: -@popover-arrow-outer-width;
  76     border-bottom-width: 0;
  77     border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
  78     border-top-color: @popover-arrow-outer-color;
  79     bottom: -@popover-arrow-outer-width;
  80     &:after {
  81       content: " ";
  82       bottom: 1px;
  83       margin-left: -@popover-arrow-width;
  84       border-bottom-width: 0;
  85       border-top-color: @popover-arrow-color;
  86     }
  87   }
  88   &.right .arrow {
  89     top: 50%;
  90     left: -@popover-arrow-outer-width;
  91     margin-top: -@popover-arrow-outer-width;
  92     border-left-width: 0;
  93     border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
  94     border-right-color: @popover-arrow-outer-color;
  95     &:after {
  96       content: " ";
  97       left: 1px;
  98       bottom: -@popover-arrow-width;
  99       border-left-width: 0;
 100       border-right-color: @popover-arrow-color;
 101     }
 102   }
 103   &.bottom .arrow {
 104     left: 50%;
 105     margin-left: -@popover-arrow-outer-width;
 106     border-top-width: 0;
 107     border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
 108     border-bottom-color: @popover-arrow-outer-color;
 109     top: -@popover-arrow-outer-width;
 110     &:after {
 111       content: " ";
 112       top: 1px;
 113       margin-left: -@popover-arrow-width;
 114       border-top-width: 0;
 115       border-bottom-color: @popover-arrow-color;
 116     }
 117   }
 118
 119   &.left .arrow {
 120     top: 50%;
 121     right: -@popover-arrow-outer-width;
 122     margin-top: -@popover-arrow-outer-width;
 123     border-right-width: 0;
 124     border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
 125     border-left-color: @popover-arrow-outer-color;
 126     &:after {
 127       content: " ";
 128       right: 1px;
 129       border-right-width: 0;
 130       border-left-color: @popover-arrow-color;
 131       bottom: -@popover-arrow-width;
 132     }
 133   }
 134
 135 }