Nav apraksta
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

_popover.scss 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. /* Popovers
  2. ******************************************************************************* */
  3. .modal-open .popover {
  4. z-index: $zindex-modal + 1;
  5. }
  6. .popover:not(.custom-popover) {
  7. --#{$prefix}popover-header-bg: transparent;
  8. .popover-header {
  9. --#{$prefix}popover-border-width: 0;
  10. padding-block-end: 0;
  11. }
  12. .popover-arrow::after {
  13. --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-bg);
  14. }
  15. }
  16. .popover:has([class^="popover-"]):not(.custom-popover) {
  17. --#{$prefix}popover-border-color: transparent;
  18. --#{$prefix}popover-header-bg: transparent;
  19. .popover-body {
  20. background-color: transparent;
  21. }
  22. }
  23. .popover:has([class^="popover-header-"]) {
  24. --#{$prefix}popover-border-color: #{$popover-border-color};
  25. --#{$prefix}popover-body-color: var(--#{$prefix}body-color);
  26. --#{$prefix}popover-header-bg: var(--#{$prefix}primary);
  27. }
  28. .popover {
  29. box-shadow: var(--#{$prefix}popover-box-shadow);
  30. .popover-arrow {
  31. z-index: 1;
  32. }
  33. &:not(.custom-popover).bs-popover-auto {
  34. > .popover-arrow::before {
  35. --#{$prefix}popover-bg: #{rgba(var(--#{$prefix}white-rgb), .1)};
  36. }
  37. &[data-popper-placement="bottom"] > {
  38. .popover-arrow {
  39. &::after {
  40. border-block-end-color: var(--#{$prefix}popover-arrow-border);
  41. inset-block-start: 1px;
  42. }
  43. }
  44. .popover-header::before {
  45. --#{$prefix}popover-border-width: 0;
  46. }
  47. }
  48. }
  49. [data-bs-theme="light"] & {
  50. &.popover-dark {
  51. --#{$prefix}popover-bg: color-mix(in sRGB, var(--#{$prefix}base-color) 90%, var(--#{$prefix}paper-bg));
  52. }
  53. }
  54. }
  55. /* custom popover
  56. ******************************************************************************* */
  57. .custom-popover {
  58. --#{$prefix}popover-max-width: 200px;
  59. --#{$prefix}popover-header-color: var(--#{$prefix}white);
  60. --#{$prefix}popover-body-padding-x: 1rem;
  61. --#{$prefix}popover-body-padding-y: .5rem;
  62. .popover-header {
  63. --#{$prefix}popover-header-bg: var(--#{$prefix}primary);
  64. }
  65. }
  66. /* Dark
  67. ******************************************************************************* */
  68. @if $enable-dark-mode {
  69. @include color-mode(dark) {
  70. .popover:not(.custom-popover) .popover-arrow::before {
  71. --#{$prefix}popover-arrow-border: #{rgba(var(--#{$prefix}white-rgb), .05)};
  72. }
  73. }
  74. }
  75. // scss-docs-start popover-modifiers
  76. @each $state in map-keys($theme-colors) {
  77. .popover {
  78. &.popover-#{$state} {
  79. --#{$prefix}popover-bg: var(--#{$prefix}#{$state});
  80. --#{$prefix}popover-header-bg: var(--#{$prefix}#{$state});
  81. --#{$prefix}popover-header-color: var(--#{$prefix}#{$state}-contrast);
  82. --#{$prefix}popover-body-color: var(--#{$prefix}#{$state}-contrast);
  83. & > .popover-arrow::after {
  84. --#{$prefix}popover-arrow-border: var(--#{$prefix}#{$state});
  85. }
  86. }
  87. &.popover-header-#{$state} {
  88. .popover-header,
  89. &.bs-popover-auto[data-popper-placement="bottom"] > .popover-arrow::after {
  90. --#{$prefix}popover-header-bg: var(--#{$prefix}#{$state});
  91. --#{$prefix}popover-header-color: var(--#{$prefix}#{$state}-contrast);
  92. }
  93. & > .popover-arrow::after {
  94. --#{$prefix}popover-arrow-border: var(--#{$prefix}#{$state});
  95. }
  96. }
  97. }
  98. }
  99. // scss-docs-end popover-modifiers