mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-24 20:02:53 +01:00
un-nest and un-chain popover classes
This commit is contained in:
Mark Otto
parent
fa2cc20e92
commit
28fd9deb54
@ -27,141 +27,140 @@
|
|||||||
width: $popover-arrow-width;
|
width: $popover-arrow-width;
|
||||||
height: $popover-arrow-height;
|
height: $popover-arrow-height;
|
||||||
margin: 0 $border-radius-lg;
|
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::before,
|
||||||
.arrow::after {
|
.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;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
display: block;
|
display: block;
|
||||||
|
width: $popover-arrow-width;
|
||||||
|
margin-left: -$popover-arrow-width/2;
|
||||||
content: "";
|
content: "";
|
||||||
border-color: transparent;
|
border-bottom: $popover-border-width solid $popover-header-bg;
|
||||||
border-style: solid;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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
|
||||||
}
|
}
|
||||||
|
|
||||||
// Popover directions
|
.arrow::before,
|
||||||
|
.arrow::after {
|
||||||
&.bs-popover-top {
|
border-width: $popover-arrow-width/2 0 $popover-arrow-width/2 $popover-arrow-height;
|
||||||
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 {
|
.arrow::before {
|
||||||
margin-left: $popover-arrow-height;
|
right: 0;
|
||||||
|
border-left-color: $popover-arrow-outer-color;
|
||||||
.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 {
|
.arrow::after {
|
||||||
margin-top: $popover-arrow-height;
|
right: $popover-border-width;
|
||||||
|
border-left-color: $popover-arrow-color;
|
||||||
.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 {
|
.bs-popover-auto {
|
||||||
margin-right: $popover-arrow-height;
|
&[x-placement^="top"] {
|
||||||
|
@extend .bs-popover-top;
|
||||||
.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^="right"] {
|
||||||
&[x-placement^="top"] {
|
@extend .bs-popover-right;
|
||||||
@extend .bs-popover-top;
|
}
|
||||||
}
|
&[x-placement^="bottom"] {
|
||||||
&[x-placement^="right"] {
|
@extend .bs-popover-bottom;
|
||||||
@extend .bs-popover-right;
|
}
|
||||||
}
|
&[x-placement^="left"] {
|
||||||
&[x-placement^="bottom"] {
|
@extend .bs-popover-left;
|
||||||
@extend .bs-popover-bottom;
|
|
||||||
}
|
|
||||||
&[x-placement^="left"] {
|
|
||||||
@extend .bs-popover-left;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user