codekingpro/portable-devtools

1.popover {2  position: absolute;3  top: 0;4  left: 0;5  z-index: $zindex-popover;6  display: block;7  max-width: $popover-max-width;8  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.9  // So reset our font and text properties to avoid inheriting weird values.10  @include reset-text();11  @include font-size($popover-font-size);12  // Allow breaking very long words so they don't overflow the popover's bounds13  word-wrap: break-word;14  background-color: $popover-bg;15  background-clip: padding-box;16  border: $popover-border-width solid $popover-border-color;17  @include border-radius($popover-border-radius);18  @include box-shadow($popover-box-shadow);19 20  .arrow {21    position: absolute;22    display: block;23    width: $popover-arrow-width;24    height: $popover-arrow-height;25    margin: 0 $popover-border-radius;26 27    &::before,28    &::after {29      position: absolute;30      display: block;31      content: "";32      border-color: transparent;33      border-style: solid;34    }35  }36}37 38.bs-popover-top {39  margin-bottom: $popover-arrow-height;40 41  > .arrow {42    bottom: subtract(-$popover-arrow-height, $popover-border-width);43 44    &::before {45      bottom: 0;46      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;47      border-top-color: $popover-arrow-outer-color;48    }49 50    &::after {51      bottom: $popover-border-width;52      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;53      border-top-color: $popover-arrow-color;54    }55  }56}57 58.bs-popover-right {59  margin-left: $popover-arrow-height;60 61  > .arrow {62    left: subtract(-$popover-arrow-height, $popover-border-width);63    width: $popover-arrow-height;64    height: $popover-arrow-width;65    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners66 67    &::before {68      left: 0;69      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;70      border-right-color: $popover-arrow-outer-color;71    }72 73    &::after {74      left: $popover-border-width;75      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;76      border-right-color: $popover-arrow-color;77    }78  }79}80 81.bs-popover-bottom {82  margin-top: $popover-arrow-height;83 84  > .arrow {85    top: subtract(-$popover-arrow-height, $popover-border-width);86 87    &::before {88      top: 0;89      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);90      border-bottom-color: $popover-arrow-outer-color;91    }92 93    &::after {94      top: $popover-border-width;95      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);96      border-bottom-color: $popover-arrow-color;97    }98  }99 100  // This will remove the popover-header's border just below the arrow101  .popover-header::before {102    position: absolute;103    top: 0;104    left: 50%;105    display: block;106    width: $popover-arrow-width;107    margin-left: -$popover-arrow-width * .5;108    content: "";109    border-bottom: $popover-border-width solid $popover-header-bg;110  }111}112 113.bs-popover-left {114  margin-right: $popover-arrow-height;115 116  > .arrow {117    right: subtract(-$popover-arrow-height, $popover-border-width);118    width: $popover-arrow-height;119    height: $popover-arrow-width;120    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners121 122    &::before {123      right: 0;124      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;125      border-left-color: $popover-arrow-outer-color;126    }127 128    &::after {129      right: $popover-border-width;130      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;131      border-left-color: $popover-arrow-color;132    }133  }134}135 136.bs-popover-auto {137  &[x-placement^="top"] {138    @extend .bs-popover-top;139  }140  &[x-placement^="right"] {141    @extend .bs-popover-right;142  }143  &[x-placement^="bottom"] {144    @extend .bs-popover-bottom;145  }146  &[x-placement^="left"] {147    @extend .bs-popover-left;148  }149}150 151 152// Offset the popover to account for the popover arrow153.popover-header {154  padding: $popover-header-padding-y $popover-header-padding-x;155  margin-bottom: 0; // Reset the default from Reboot156  @include font-size($font-size-base);157  color: $popover-header-color;158  background-color: $popover-header-bg;159  border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);160  @include border-top-radius($popover-inner-border-radius);161 162  &:empty {163    display: none;164  }165}166 167.popover-body {168  padding: $popover-body-padding-y $popover-body-padding-x;169  color: $popover-body-color;170}171