166 lines
4.2 KiB
Sass
166 lines
4.2 KiB
Sass
.popover
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
z-index: $zindex-popover
|
|
display: block
|
|
max-width: $popover-max-width
|
|
|
|
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
|
// So reset our font and text properties to avoid inheriting weird values.
|
|
+reset-text
|
|
|
|
font-size: $popover-font-size
|
|
|
|
// Allow breaking very long words so they don't overflow the popover's bounds
|
|
word-wrap: break-word
|
|
background-color: $popover-bg
|
|
background-clip: padding-box
|
|
border: $popover-border-width solid $popover-border-color
|
|
|
|
+border-radius($popover-border-radius)
|
|
+box-shadow($popover-box-shadow)
|
|
|
|
.arrow
|
|
position: absolute
|
|
display: block
|
|
width: $popover-arrow-width
|
|
height: $popover-arrow-height
|
|
margin: 0 $border-radius-lg
|
|
|
|
&::before,
|
|
&::after
|
|
position: absolute
|
|
display: block
|
|
content: ""
|
|
border-color: transparent
|
|
border-style: solid
|
|
|
|
.bs-popover-top
|
|
margin-bottom: $popover-arrow-height
|
|
|
|
.arrow
|
|
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1)
|
|
|
|
.arrow::before,
|
|
.arrow::after
|
|
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0
|
|
|
|
.arrow::before
|
|
bottom: 0
|
|
border-top-color: $popover-arrow-outer-color
|
|
|
|
.arrow::after
|
|
bottom: $popover-border-width
|
|
border-top-color: $popover-arrow-color
|
|
|
|
.bs-popover-right
|
|
margin-left: $popover-arrow-height
|
|
|
|
.arrow
|
|
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1)
|
|
width: $popover-arrow-height
|
|
height: $popover-arrow-width
|
|
margin: $border-radius-lg 0
|
|
|
|
// make sure the arrow does not touch the popover's rounded corners
|
|
|
|
.arrow::before,
|
|
.arrow::after
|
|
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0
|
|
|
|
.arrow::before
|
|
left: 0
|
|
border-right-color: $popover-arrow-outer-color
|
|
|
|
.arrow::after
|
|
left: $popover-border-width
|
|
border-right-color: $popover-arrow-color
|
|
|
|
.bs-popover-bottom
|
|
margin-top: $popover-arrow-height
|
|
|
|
.arrow
|
|
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1)
|
|
|
|
.arrow::before,
|
|
.arrow::after
|
|
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2)
|
|
|
|
.arrow::before
|
|
top: 0
|
|
border-bottom-color: $popover-arrow-outer-color
|
|
|
|
.arrow::after
|
|
top: $popover-border-width
|
|
border-bottom-color: $popover-arrow-color
|
|
|
|
// This will remove the popover-header's border just below the arrow
|
|
.popover-header::before
|
|
position: absolute
|
|
top: 0
|
|
left: 50%
|
|
display: block
|
|
width: $popover-arrow-width
|
|
margin-left: $popover-arrow-width / -2
|
|
content: ""
|
|
border-bottom: $popover-border-width solid $popover-header-bg
|
|
|
|
.bs-popover-left
|
|
margin-right: $popover-arrow-height
|
|
|
|
.arrow
|
|
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1)
|
|
width: $popover-arrow-height
|
|
height: $popover-arrow-width
|
|
margin: $border-radius-lg 0
|
|
|
|
// make sure the arrow does not touch the popover's rounded corners
|
|
|
|
.arrow::before,
|
|
.arrow::after
|
|
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height
|
|
|
|
.arrow::before
|
|
right: 0
|
|
border-left-color: $popover-arrow-outer-color
|
|
|
|
.arrow::after
|
|
right: $popover-border-width
|
|
border-left-color: $popover-arrow-color
|
|
|
|
.bs-popover-auto
|
|
&[x-placement^="top"]
|
|
@extend .bs-popover-top
|
|
|
|
&[x-placement^="right"]
|
|
@extend .bs-popover-right
|
|
|
|
&[x-placement^="bottom"]
|
|
@extend .bs-popover-bottom
|
|
|
|
&[x-placement^="left"]
|
|
@extend .bs-popover-left
|
|
|
|
// Offset the popover to account for the popover arrow
|
|
.popover-header
|
|
padding: $popover-header-padding-y $popover-header-padding-x
|
|
margin-bottom: 0
|
|
|
|
// Reset the default from Reboot
|
|
font-size: $font-size-base
|
|
color: $popover-header-color
|
|
background-color: $popover-header-bg
|
|
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%)
|
|
|
|
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width})
|
|
|
|
+border-top-radius($offset-border-width)
|
|
|
|
&:empty
|
|
display: none
|
|
|
|
.popover-body
|
|
padding: $popover-body-padding-y $popover-body-padding-x
|
|
color: $popover-body-color
|