126 lines
2.0 KiB
SCSS
126 lines
2.0 KiB
SCSS
|
/* Popovers */
|
||
|
|
|
||
|
|
.popover-static-demo {
|
||
|
|
.popover {
|
||
|
|
width: 185px;
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
float: left;
|
||
|
|
margin: 1rem .5rem;
|
||
|
|
z-index: 10;
|
||
|
|
&.bs-popover-bottom-demo,
|
||
|
|
&.bs-popover-top-demo {
|
||
|
|
.arrow {
|
||
|
|
left: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.bs-popover-left-demo,
|
||
|
|
&.bs-popover-right-demo{
|
||
|
|
.arrow {
|
||
|
|
top: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover {
|
||
|
|
z-index: 1029;
|
||
|
|
&.bs-popover-top-demo {
|
||
|
|
.arrow {
|
||
|
|
&:before{
|
||
|
|
border-top-color: $popover-border-color;
|
||
|
|
}
|
||
|
|
&:after{
|
||
|
|
border-top-color: $popover-arrow-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.bs-popover-right-demo{
|
||
|
|
.arrow {
|
||
|
|
&:before{
|
||
|
|
border-right-color: $popover-border-color;
|
||
|
|
}
|
||
|
|
&:after{
|
||
|
|
border-right-color: $popover-arrow-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.bs-popover-bottom-demo{
|
||
|
|
.arrow {
|
||
|
|
&:before{
|
||
|
|
border-bottom-color: $popover-border-color;
|
||
|
|
}
|
||
|
|
&:after{
|
||
|
|
border-bottom-color: $popover-arrow-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.popover-header {
|
||
|
|
&:before {
|
||
|
|
border-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.bs-popover-left-demo{
|
||
|
|
.arrow {
|
||
|
|
&:before{
|
||
|
|
border-left-color: $popover-border-color;
|
||
|
|
}
|
||
|
|
&:after{
|
||
|
|
border-left-color: $popover-arrow-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.popover-header {
|
||
|
|
font-size: .9375rem;
|
||
|
|
border-bottom: 0;
|
||
|
|
color: $popover-header-color;
|
||
|
|
border-bottom: 1px solid $popover-border-color;
|
||
|
|
}
|
||
|
|
&.left {
|
||
|
|
.arrow {
|
||
|
|
&:before {
|
||
|
|
border-left-color: $popover-border-color;
|
||
|
|
}
|
||
|
|
&:after {
|
||
|
|
border-left-color: $popover-arrow-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.right {
|
||
|
|
.arrow {
|
||
|
|
&:before {
|
||
|
|
border-right-color: $popover-border-color;
|
||
|
|
}
|
||
|
|
&:after {
|
||
|
|
border-right-color: $popover-arrow-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.top {
|
||
|
|
.arrow {
|
||
|
|
&:before {
|
||
|
|
border-top-color: $popover-border-color;
|
||
|
|
}
|
||
|
|
&:after {
|
||
|
|
border-top-color: $popover-arrow-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.bottom {
|
||
|
|
.arrow {
|
||
|
|
&:before {
|
||
|
|
border-bottom-color: $popover-border-color;
|
||
|
|
}
|
||
|
|
&:after {
|
||
|
|
border-bottom-color: $popover-arrow-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $color, $value in $theme-colors {
|
||
|
|
.popover-#{$color} {
|
||
|
|
@include popover-variant($color);
|
||
|
|
}
|
||
|
|
}
|