From 28fd9deb549af2943500edbb527b22fe6936c4d2 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 26 Dec 2017 21:58:57 -0800
Subject: [PATCH] un-nest and un-chain popover classes
---
scss/_popover.scss | 213 ++++++++++++++++++++++-----------------------
1 file changed, 106 insertions(+), 107 deletions(-)
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 00195323fe..6682f141af 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -27,141 +27,140 @@
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 {
- position: absolute;
- display: block;
- content: "";
- border-color: transparent;
- border-style: solid;
+ border-width: $popover-arrow-height $popover-arrow-width/2 0;
}
- // Popover directions
-
- &.bs-popover-top {
- margin-bottom: $popover-arrow-height;
-
- .arrow {
- bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
- }
+ .arrow::before {
+ bottom: 0;
+ border-top-color: $popover-arrow-outer-color;
+ }
- .arrow::before,
- .arrow::after {
- border-width: $popover-arrow-height $popover-arrow-width/2 0;
- }
+ .arrow::after {
+ bottom: $popover-border-width;
+ border-top-color: $popover-arrow-color;
+ }
+}
- .arrow::before {
- bottom: 0;
- border-top-color: $popover-arrow-outer-color;
- }
+.bs-popover-right {
+ margin-left: $popover-arrow-height;
- .arrow::after {
- bottom: $popover-border-width;
- border-top-color: $popover-arrow-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
}
- &.bs-popover-right {
- margin-left: $popover-arrow-height;
+ .arrow::before,
+ .arrow::after {
+ border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0;
+ }
- .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 {
+ left: 0;
+ border-right-color: $popover-arrow-outer-color;
+ }
- .arrow::before,
- .arrow::after {
- border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0;
- }
+ .arrow::after {
+ left: $popover-border-width;
+ border-right-color: $popover-arrow-color;
+ }
+}
- .arrow::before {
- left: 0;
- border-right-color: $popover-arrow-outer-color;
- }
+.bs-popover-bottom {
+ margin-top: $popover-arrow-height;
- .arrow::after {
- left: $popover-border-width;
- border-right-color: $popover-arrow-color;
- }
+ .arrow {
+ top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
}
- &.bs-popover-bottom {
- margin-top: $popover-arrow-height;
+ .arrow::before,
+ .arrow::after {
+ border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2;
+ }
- .arrow {
- top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
- }
+ .arrow::before {
+ top: 0;
+ border-bottom-color: $popover-arrow-outer-color;
+ }
- .arrow::before,
- .arrow::after {
- border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2;
- }
+ .arrow::after {
+ top: $popover-border-width;
+ border-bottom-color: $popover-arrow-color;
+ }
- .arrow::before {
- top: 0;
- border-bottom-color: $popover-arrow-outer-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;
+ }
+}
- .arrow::after {
- top: $popover-border-width;
- border-bottom-color: $popover-arrow-color;
- }
+.bs-popover-left {
+ margin-right: $popover-arrow-height;
- // 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;
- }
+ .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
}
- &.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,
- .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::before {
- right: 0;
- border-left-color: $popover-arrow-outer-color;
- }
+ .arrow::after {
+ right: $popover-border-width;
+ border-left-color: $popover-arrow-color;
+ }
+}
- .arrow::after {
- right: $popover-border-width;
- border-left-color: $popover-arrow-color;
- }
+.bs-popover-auto {
+ &[x-placement^="top"] {
+ @extend .bs-popover-top;
}
- &.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;
- }
+ &[x-placement^="right"] {
+ @extend .bs-popover-right;
+ }
+ &[x-placement^="bottom"] {
+ @extend .bs-popover-bottom;
+ }
+ &[x-placement^="left"] {
+ @extend .bs-popover-left;
}
}
--
GitLab