resources/tools/dash/app/pal/static/sass/bootstrap/_popover.scss

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