github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/popovers.less (about)

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