1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- .popover {
- background-color: $popover-bg-alt;
- border: $popover-border-width solid $popover-border-color-alt;
- @include box-shadow($popover-box-shadow-alt);
- .popover-arrow {
- &::before,
- &::after {
- border-color: transparent;
- border-style: solid;
- }
- }
- }
- .bs-popover-top,
- .bs-popover-auto[data-popper-placement^="top"] { // see note below
- > .popover-arrow {
- &::before {
- border-top-color: $popover-arrow-outer-color-alt;
- }
- &::after {
- border-top-color: $popover-arrow-color-alt;
- }
- }
- }
- .bs-popover-end,
- .bs-popover-auto[data-popper-placement^="right"] { // see note below
- > .popover-arrow {
- &::before {
- border-right-color: $popover-arrow-outer-color-alt;
- }
- &::after {
- border-right-color: $popover-arrow-color-alt;
- }
- }
- }
- .bs-popover-bottom,
- .bs-popover-auto[data-popper-placement^="bottom"] { // see note below
- > .popover-arrow {
- &::before {
- border-bottom-color: $popover-arrow-outer-color-alt;
- }
- &::after {
- border-bottom-color: $popover-arrow-color-alt;
- }
- }
- .popover-header::before {
- border-bottom: $popover-border-width solid $popover-header-bg-alt;
- }
- }
- .bs-popover-start,
- .bs-popover-auto[data-popper-placement^="left"] { // see note below
- > .popover-arrow {
- &::before {
- border-left-color: $popover-arrow-outer-color-alt;
- }
- &::after {
- border-left-color: $popover-arrow-color-alt;
- }
- }
- }
- // ***NOTE***: Do not use @extend as that would extend the base class and the dark class
- // Offset the popover to account for the popover arrow
- .popover-header {
- color: $popover-header-color-alt;
- background-color: $popover-header-bg-alt;
- border-bottom: $popover-border-width solid shade-color($popover-header-bg-alt, 10%);
- }
- .popover-body {
- color: $popover-body-color-alt;
- }
|