git.roojs.org Git - roojs1/blob - scss/bootstrap/_popover.scss

   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   font-size: $popover-font-size;
  12   // Allow breaking very long words so they don't overflow the popover's bounds
  13   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 $border-radius-lg;
  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: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
  43   }
  44
  45   .arrow::before,
  46   .arrow::after {
  47     border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
  48   }
  49
  50   .arrow::before {
  51     bottom: 0;
  52     border-top-color: $popover-arrow-outer-color;
  53   }
  54
  55   .arrow::after {
  56     bottom: $popover-border-width;
  57     border-top-color: $popover-arrow-color;
  58   }
  59 }
  60
  61 .bs-popover-right {
  62   margin-left: $popover-arrow-height;
  63
  64   .arrow {
  65     left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
  66     width: $popover-arrow-height;
  67     height: $popover-arrow-width;
  68     margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
  69   }
  70
  71   .arrow::before,
  72   .arrow::after {
  73     border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
  74   }
  75
  76   .arrow::before {
  77     left: 0;
  78     border-right-color: $popover-arrow-outer-color;
  79   }
  80
  81   .arrow::after {
  82     left: $popover-border-width;
  83     border-right-color: $popover-arrow-color;
  84   }
  85 }
  86
  87 .bs-popover-bottom {
  88   margin-top: $popover-arrow-height;
  89
  90   .arrow {
  91     top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
  92   }
  93
  94   .arrow::before,
  95   .arrow::after {
  96     border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
  97   }
  98
  99   .arrow::before {
 100     top: 0;
 101     border-bottom-color: $popover-arrow-outer-color;
 102   }
 103
 104   .arrow::after {
 105     top: $popover-border-width;
 106     border-bottom-color: $popover-arrow-color;
 107   }
 108
 109   // This will remove the popover-header's border just below the arrow
 110   .popover-header::before {
 111     position: absolute;
 112     top: 0;
 113     left: 50%;
 114     display: block;
 115     width: $popover-arrow-width;
 116     margin-left: ($popover-arrow-width / -2);
 117     content: "";
 118     border-bottom: $popover-border-width solid $popover-header-bg;
 119   }
 120 }
 121
 122 .bs-popover-left {
 123   margin-right: $popover-arrow-height;
 124
 125   .arrow {
 126     right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
 127     width: $popover-arrow-height;
 128     height: $popover-arrow-width;
 129     margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
 130   }
 131
 132   .arrow::before,
 133   .arrow::after {
 134     border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
 135   }
 136
 137   .arrow::before {
 138     right: 0;
 139     border-left-color: $popover-arrow-outer-color;
 140   }
 141
 142   .arrow::after {
 143     right: $popover-border-width;
 144     border-left-color: $popover-arrow-color;
 145   }
 146 }
 147
 148 .bs-popover-auto {
 149   &[x-placement^="top"] {
 150     @extend .bs-popover-top;
 151   }
 152   &[x-placement^="right"] {
 153     @extend .bs-popover-right;
 154   }
 155   &[x-placement^="bottom"] {
 156     @extend .bs-popover-bottom;
 157   }
 158   &[x-placement^="left"] {
 159     @extend .bs-popover-left;
 160   }
 161 }
 162
 163
 164 // Offset the popover to account for the popover arrow
 165 .popover-header {
 166   padding: $popover-header-padding-y $popover-header-padding-x;
 167   margin-bottom: 0; // Reset the default from Reboot
 168   font-size: $font-size-base;
 169   color: $popover-header-color;
 170   background-color: $popover-header-bg;
 171   border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
 172   $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
 173   @include border-top-radius($offset-border-width);
 174
 175   &:empty {
 176     display: none;
 177   }
 178 }
 179
 180 .popover-body {
 181   padding: $popover-body-padding-y $popover-body-padding-x;
 182   color: $popover-body-color;
 183 }