Skip to content
GitLab
Commit 28fd9deb authored by Mark Otto's avatar Mark Otto
Browse files

un-nest and un-chain popover classes

parent fa2cc20e
Hide whitespace changes
Inline Side-by-side
Showing
with 106 additions and 107 deletions
+106 -107
scss/_popover.scss
+ 106
- 107
View file @ 28fd9deb
...@@ -27,141 +27,140 @@ ...@@ -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 {
position: absolute; border-width: $popover-arrow-height $popover-arrow-width/2 0;
display: block;
content: "";
border-color: transparent;
border-style: solid;
} }
// Popover directions .arrow::before {
bottom: 0;
&.bs-popover-top { border-top-color: $popover-arrow-outer-color;
margin-bottom: $popover-arrow-height; }
.arrow {
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
}
.arrow::before, .arrow::after {
.arrow::after { bottom: $popover-border-width;
border-width: $popover-arrow-height $popover-arrow-width/2 0; border-top-color: $popover-arrow-color;
} }
}
.arrow::before { .bs-popover-right {
bottom: 0; margin-left: $popover-arrow-height;
border-top-color: $popover-arrow-outer-color;
}
.arrow::after { .arrow {
bottom: $popover-border-width; left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
border-top-color: $popover-arrow-color; 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
} }
&.bs-popover-right { .arrow::before,
margin-left: $popover-arrow-height; .arrow::after {
border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0;
}
.arrow { .arrow::before {
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); left: 0;
width: $popover-arrow-height; border-right-color: $popover-arrow-outer-color;
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 {
.arrow::after { left: $popover-border-width;
border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0; border-right-color: $popover-arrow-color;
} }
}
.arrow::before { .bs-popover-bottom {
left: 0; margin-top: $popover-arrow-height;
border-right-color: $popover-arrow-outer-color;
}
.arrow::after { .arrow {
left: $popover-border-width; top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
border-right-color: $popover-arrow-color;
}
} }
&.bs-popover-bottom { .arrow::before,
margin-top: $popover-arrow-height; .arrow::after {
border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2;
}
.arrow { .arrow::before {
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); top: 0;
} border-bottom-color: $popover-arrow-outer-color;
}
.arrow::before, .arrow::after {
.arrow::after { top: $popover-border-width;
border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2; border-bottom-color: $popover-arrow-color;
} }
.arrow::before { // This will remove the popover-header's border just below the arrow
top: 0; .popover-header::before {
border-bottom-color: $popover-arrow-outer-color; 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;
}
}
.arrow::after { .bs-popover-left {
top: $popover-border-width; margin-right: $popover-arrow-height;
border-bottom-color: $popover-arrow-color;
}
// This will remove the popover-header's border just below the arrow .arrow {
.popover-header::before { right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
position: absolute; width: $popover-arrow-height;
top: 0; height: $popover-arrow-width;
left: 50%; margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
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 { .arrow::before,
margin-right: $popover-arrow-height; .arrow::after {
border-width: $popover-arrow-width/2 0 $popover-arrow-width/2 $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::before {
.arrow::after { right: 0;
border-width: $popover-arrow-width/2 0 $popover-arrow-width/2 $popover-arrow-height; border-left-color: $popover-arrow-outer-color;
} }
.arrow::before { .arrow::after {
right: 0; right: $popover-border-width;
border-left-color: $popover-arrow-outer-color; border-left-color: $popover-arrow-color;
} }
}
.arrow::after { .bs-popover-auto {
right: $popover-border-width; &[x-placement^="top"] {
border-left-color: $popover-arrow-color; @extend .bs-popover-top;
}
} }
&.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;
}
} }
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment