From 9066fa5227b731a942c5546ab67cf0d9e2f176c5 Mon Sep 17 00:00:00 2001
From: wojtask9 <wojtask9.kde@gmail.com>
Date: Wed, 13 Sep 2017 12:40:44 +0200
Subject: [PATCH] fix popover arrow computations

---
 docs/4.0/components/popovers.md |  8 +--
 js/src/popover.js               |  2 +-
 scss/_popover.scss              | 90 ++++++++++++++++-----------------
 scss/_variables.scss            |  7 +--
 4 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/docs/4.0/components/popovers.md b/docs/4.0/components/popovers.md
index 0a4bb363ca39..1c28e122add5 100644
--- a/docs/4.0/components/popovers.md
+++ b/docs/4.0/components/popovers.md
@@ -52,32 +52,32 @@ Four options are available: top, right, bottom, and left aligned.
 
 <div class="bd-example bd-example-popover-static">
   <div class="popover bs-popover-top bs-popover-top-docs">
-    <div class="arrow"></div>
     <h3 class="popover-header">Popover top</h3>
+    <div class="arrow"></div>
     <div class="popover-body">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
   <div class="popover bs-popover-right bs-popover-right-docs">
-    <div class="arrow"></div>
     <h3 class="popover-header">Popover right</h3>
+    <div class="arrow"></div>
     <div class="popover-body">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
   <div class="popover bs-popover-bottom bs-popover-bottom-docs">
-    <div class="arrow"></div>
     <h3 class="popover-header">Popover bottom</h3>
+    <div class="arrow"></div>
     <div class="popover-body">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
   <div class="popover bs-popover-left bs-popover-left-docs">
-    <div class="arrow"></div>
     <h3 class="popover-header">Popover left</h3>
+    <div class="arrow"></div>
     <div class="popover-body">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
diff --git a/js/src/popover.js b/js/src/popover.js
index aeccdf7501ab..56c32ea64126 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -31,8 +31,8 @@ const Popover = (() => {
     trigger   : 'click',
     content   : '',
     template  : '<div class="popover" role="tooltip">'
-              + '<div class="arrow"></div>'
               + '<h3 class="popover-header"></h3>'
+              + '<div class="arrow"></div>'
               + '<div class="popover-body"></div></div>'
   })
 
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 950d6ca3960f..fd54f3ff256c 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -20,139 +20,135 @@
 
   // Arrows
   //
-  // .arrow is outer, .arrow::after is inner
+  // .arrow:before is outer, .arrow::after is inner
 
   .arrow {
     position: absolute;
     display: block;
-    width: $popover-arrow-width;
-    height: $popover-arrow-height;
   }
 
   .arrow::before,
   .arrow::after {
     position: absolute;
-    display: block;
+    content: "";
     border-color: transparent;
     border-style: solid;
   }
 
-  .arrow::before {
-    content: "";
-    border-width: $popover-arrow-outer-width;
-  }
-  .arrow::after {
-    content: "";
-    border-width: $popover-arrow-outer-width;
-  }
-
+  $popover-arrow-width-half: $popover-arrow-width / 2;
+  $popover-arrow-height-half: $popover-arrow-height / 2;
   // Popover directions
 
   &.bs-popover-top {
-    margin-bottom: $popover-arrow-width;
+    margin-bottom: $popover-arrow-height-half;
 
     .arrow {
-      bottom: 0;
+      top: 100%;
+      width: $popover-arrow-width;
+      height: $popover-arrow-outer-height;
+      margin-right: $popover-arrow-margin;
+      margin-left: $popover-arrow-margin;
     }
 
     .arrow::before,
     .arrow::after {
-      border-bottom-width: 0;
+      border-width: $popover-arrow-height-half $popover-arrow-width-half 0;
     }
 
     .arrow::before {
-      bottom: -$popover-arrow-outer-width;
-      margin-left: -($popover-arrow-outer-width - 5);
+      bottom: 0;
       border-top-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      bottom: -($popover-arrow-outer-width - 1);
-      margin-left: -($popover-arrow-outer-width - 5);
+      top: 0;
       border-top-color: $popover-arrow-color;
     }
   }
 
   &.bs-popover-right {
-    margin-left: $popover-arrow-width;
+    margin-left: $popover-arrow-height-half;
 
     .arrow {
-      left: 0;
+      right: 100%;
+      width: $popover-arrow-outer-height;
+      height: $popover-arrow-width;
+      margin-top: $popover-arrow-margin;
+      margin-bottom: $popover-arrow-margin;
     }
 
     .arrow::before,
     .arrow::after {
-      margin-top: -($popover-arrow-outer-width - 3);
-      border-left-width: 0;
+      border-width: $popover-arrow-width-half $popover-arrow-height-half $popover-arrow-width-half 0;
     }
 
     .arrow::before {
-      left: -$popover-arrow-outer-width;
+      left: 0;
       border-right-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      left: -($popover-arrow-outer-width - 1);
+      right: 0;
       border-right-color: $popover-arrow-color;
     }
   }
 
   &.bs-popover-bottom {
-    margin-top: $popover-arrow-width;
+    margin-top: $popover-arrow-height-half;
 
     .arrow {
-      top: 0;
+      bottom: 100%;
+      width: $popover-arrow-width;
+      height: $popover-arrow-outer-height;
+      margin-right: $popover-arrow-margin;
+      margin-left: $popover-arrow-margin;
     }
 
     .arrow::before,
     .arrow::after {
-      margin-left: -($popover-arrow-width - 3);
-      border-top-width: 0;
+      border-width: 0 $popover-arrow-width-half $popover-arrow-height-half;
     }
 
     .arrow::before {
-      top: -$popover-arrow-outer-width;
+      top: 0;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      top: -($popover-arrow-outer-width - 1);
+      bottom: 0;
       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: 20px;
-      margin-left: -10px;
-      content: "";
-      border-bottom: 1px solid $popover-header-bg;
+    .popover-header:not(:empty) + .arrow::after {
+      border-bottom-color: $popover-header-bg;
     }
   }
 
   &.bs-popover-left {
-    margin-right: $popover-arrow-width;
+    margin-right: $popover-arrow-height-half;
 
     .arrow {
-      right: 0;
+      left: 100%;
+      width: $popover-arrow-outer-height;
+      height: $popover-arrow-width;
+      margin-top: $popover-arrow-margin;
+      margin-bottom: $popover-arrow-margin;
     }
 
     .arrow::before,
     .arrow::after {
-      margin-top: -($popover-arrow-outer-width - 3);
-      border-right-width: 0;
+      //margin-top: -$popover-border-width;
+      border-width: $popover-arrow-width-half 0 $popover-arrow-width-half $popover-arrow-height-half;
     }
 
     .arrow::before {
-      right: -$popover-arrow-outer-width;
+      right: 0;
       border-left-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      right: -($popover-arrow-outer-width - 1);
+      left: 0;
       border-left-color: $popover-arrow-color;
     }
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c0b5494e6182..4103f10bff34 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -636,11 +636,12 @@ $popover-body-color:               $body-color !default;
 $popover-body-padding-y:           9px !default;
 $popover-body-padding-x:           14px !default;
 
-$popover-arrow-width:                 10px !default;
-$popover-arrow-height:                5px !default;
+$popover-arrow-width:                 20px !default;
+$popover-arrow-height:                20px !default;
 $popover-arrow-color:                 $popover-bg !default;
+$popover-arrow-margin:                calc(#{$border-radius-lg} + #{$popover-border-width}) !default;
 
-$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
+$popover-arrow-outer-height:          calc(#{$popover-arrow-height / 2} + #{$popover-border-width}) !default;
 $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;