PageRenderTime 26ms CodeModel.GetById 12ms app.highlight 9ms RepoModel.GetById 1ms app.codeStats 1ms

/blogen/scss/bootstrap/_tooltip.scss

https://bitbucket.org/Trulsh/personal-bootstrap-projects
Sass | 115 lines | 93 code | 17 blank | 5 comment | 0 complexity | beac5a1d0f70f2dc0fc666310209f067 MD5 | raw file
  1// Base class
  2.tooltip {
  3  position: absolute;
  4  z-index: $zindex-tooltip;
  5  display: block;
  6  margin: $tooltip-margin;
  7  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
  8  // So reset our font and text properties to avoid inheriting weird values.
  9  @include reset-text();
 10  font-size: $tooltip-font-size;
 11  // Allow breaking very long words so they don't overflow the tooltip's bounds
 12  word-wrap: break-word;
 13  opacity: 0;
 14
 15  &.show { opacity: $tooltip-opacity; }
 16
 17  .arrow {
 18    position: absolute;
 19    display: block;
 20    width: $tooltip-arrow-width;
 21    height: $tooltip-arrow-height;
 22
 23    &::before {
 24      position: absolute;
 25      content: "";
 26      border-color: transparent;
 27      border-style: solid;
 28    }
 29  }
 30}
 31
 32.bs-tooltip-top {
 33  padding: $tooltip-arrow-height 0;
 34
 35  .arrow {
 36    bottom: 0;
 37
 38    &::before {
 39      top: 0;
 40      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
 41      border-top-color: $tooltip-arrow-color;
 42    }
 43  }
 44}
 45
 46.bs-tooltip-right {
 47  padding: 0 $tooltip-arrow-height;
 48
 49  .arrow {
 50    left: 0;
 51    width: $tooltip-arrow-height;
 52    height: $tooltip-arrow-width;
 53
 54    &::before {
 55      right: 0;
 56      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
 57      border-right-color: $tooltip-arrow-color;
 58    }
 59  }
 60}
 61
 62.bs-tooltip-bottom {
 63  padding: $tooltip-arrow-height 0;
 64
 65  .arrow {
 66    top: 0;
 67
 68    &::before {
 69      bottom: 0;
 70      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
 71      border-bottom-color: $tooltip-arrow-color;
 72    }
 73  }
 74}
 75
 76.bs-tooltip-left {
 77  padding: 0 $tooltip-arrow-height;
 78
 79  .arrow {
 80    right: 0;
 81    width: $tooltip-arrow-height;
 82    height: $tooltip-arrow-width;
 83
 84    &::before {
 85      left: 0;
 86      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
 87      border-left-color: $tooltip-arrow-color;
 88    }
 89  }
 90}
 91
 92.bs-tooltip-auto {
 93  &[x-placement^="top"] {
 94    @extend .bs-tooltip-top;
 95  }
 96  &[x-placement^="right"] {
 97    @extend .bs-tooltip-right;
 98  }
 99  &[x-placement^="bottom"] {
100    @extend .bs-tooltip-bottom;
101  }
102  &[x-placement^="left"] {
103    @extend .bs-tooltip-left;
104  }
105}
106
107// Wrapper for the tooltip content
108.tooltip-inner {
109  max-width: $tooltip-max-width;
110  padding: $tooltip-padding-y $tooltip-padding-x;
111  color: $tooltip-color;
112  text-align: center;
113  background-color: $tooltip-bg;
114  @include border-radius($tooltip-border-radius);
115}