_popover.scss 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. .popover {
  2. background-color: $popover-bg-alt;
  3. border: $popover-border-width solid $popover-border-color-alt;
  4. @include box-shadow($popover-box-shadow-alt);
  5. .popover-arrow {
  6. &::before,
  7. &::after {
  8. border-color: transparent;
  9. border-style: solid;
  10. }
  11. }
  12. }
  13. .bs-popover-top,
  14. .bs-popover-auto[data-popper-placement^="top"] { // see note below
  15. > .popover-arrow {
  16. &::before {
  17. border-top-color: $popover-arrow-outer-color-alt;
  18. }
  19. &::after {
  20. border-top-color: $popover-arrow-color-alt;
  21. }
  22. }
  23. }
  24. .bs-popover-end,
  25. .bs-popover-auto[data-popper-placement^="right"] { // see note below
  26. > .popover-arrow {
  27. &::before {
  28. border-right-color: $popover-arrow-outer-color-alt;
  29. }
  30. &::after {
  31. border-right-color: $popover-arrow-color-alt;
  32. }
  33. }
  34. }
  35. .bs-popover-bottom,
  36. .bs-popover-auto[data-popper-placement^="bottom"] { // see note below
  37. > .popover-arrow {
  38. &::before {
  39. border-bottom-color: $popover-arrow-outer-color-alt;
  40. }
  41. &::after {
  42. border-bottom-color: $popover-arrow-color-alt;
  43. }
  44. }
  45. .popover-header::before {
  46. border-bottom: $popover-border-width solid $popover-header-bg-alt;
  47. }
  48. }
  49. .bs-popover-start,
  50. .bs-popover-auto[data-popper-placement^="left"] { // see note below
  51. > .popover-arrow {
  52. &::before {
  53. border-left-color: $popover-arrow-outer-color-alt;
  54. }
  55. &::after {
  56. border-left-color: $popover-arrow-color-alt;
  57. }
  58. }
  59. }
  60. // ***NOTE***: Do not use @extend as that would extend the base class and the dark class
  61. // Offset the popover to account for the popover arrow
  62. .popover-header {
  63. color: $popover-header-color-alt;
  64. background-color: $popover-header-bg-alt;
  65. border-bottom: $popover-border-width solid shade-color($popover-header-bg-alt, 10%);
  66. }
  67. .popover-body {
  68. color: $popover-body-color-alt;
  69. }