Fix arrow styles

shipshapecode · Jul 2, 2019 · faef692 · faef692
1 parent 4d9e993
commit faef692
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 85 deletions.
diff --git a/docs/welcome/css/welcome.css b/docs/welcome/css/welcome.css
@@ -112,60 +112,14 @@ pre {
   color: rgba(0, 0, 0, 0.75);
 }
 
-.tippy-popper.shepherd-popper .tippy-arrow {
-  border: 16px solid transparent;
-  content: '';
-  display: block;
-  height: 0;
-  position: absolute;
-  width: 0;
-}
-
-.tippy-popper.shepherd-popper[x-placement^='top'] {
-  margin-bottom: 16px;
-}
-
-.tippy-popper.shepherd-popper[x-placement^='top'] .tippy-arrow {
-  border-bottom: 0;
-  border-top-color: #ffffff;
-  left: calc(50% - 16px);
-}
-
-.tippy-popper.shepherd-popper[x-placement^='bottom'] {
-  margin-top: 16px;
-}
-
-.tippy-popper.shepherd-popper[x-placement^='bottom'] .tippy-arrow {
-  border-bottom-color: #ffffff;
-  border-top: 0;
-  left: calc(50% - 16px);
-}
-
-.tippy-popper.shepherd-popper[x-placement^='bottom'] .shepherd-has-title-theme .tippy-arrow {
-  border-bottom-color: #e6e6e6;
-}
-
 .tippy-popper.shepherd-popper[x-placement^='left'] {
   margin-right: 16px;
 }
 
-.tippy-popper.shepherd-popper[x-placement^='left'] .tippy-arrow {
-  border-left-color: #ffffff;
-  border-right: 0;
-  margin-top: -16px;
-  top: calc(50% - 16px);
-}
-
 .tippy-popper.shepherd-popper[x-placement^='right'] {
   margin-left: 16px;
 }
 
-.tippy-popper.shepherd-popper[x-placement^='right'] .tippy-arrow {
-  border-left: 0;
-  border-right-color: #ffffff;
-  top: calc(50% - 16px);
-}
-
 .tippy-popper.shepherd-popper .shepherd-element:not(.shepherd-has-title) .shepherd-content header,
 .tippy-popper.shepherd-popper .shepherd-element:not(.shepherd-has-title) .shepherd-content .shepherd-header {
   background: transparent;

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -25,4 +25,4 @@ $use-drop-shadow: true !default;
 
 // Popper options
 $arrow-pointer-events: none !default;
-$arrow-size: 16px !default;
+$arrow-size: 2.1 !default;
diff --git a/src/scss/tippy/_base-tooltips.scss b/src/scss/tippy/_base-tooltips.scss
@@ -12,21 +12,25 @@
  * </div>
  */
 
-.shepherd-popper .tippy-arrow {
-  transform: scale(1.5);
-}
-
 .tippy-popper.shepherd-popper {
   @include popper-theme-arrows($arrow-size: $arrow-size, $arrow-pointer-events: $arrow-pointer-events);
 
   z-index: $shepherd-element-z-index;
 
-  & .tippy-tooltip {
-    background-color: rgba(0, 0, 0, 0);
-    max-height: $shepherd-element-max-height;
-    max-width: $shepherd-element-max-width;
-    padding: 0;
-    width: $shepherd-element-width;
+  .tippy-tooltip {
+    background-color: $shepherd-text-background;
+
+    .tippy-arrow {
+      transform: scale($arrow-size);
+      z-index: $shepherd-element-z-index + 1;
+    }
+
+    .tippy-content {
+      max-height: $shepherd-element-max-height;
+      max-width: $shepherd-element-max-width;
+      padding: 0;
+      text-align: center;
+      width: $shepherd-element-width;
+    }
   }
 }
-
diff --git a/src/scss/tippy/_popper-theme-arrows.scss b/src/scss/tippy/_popper-theme-arrows.scss
@@ -1,55 +1,59 @@
-@mixin popper-theme-arrows($arrow-size: 16px, $arrow-pointer-events: null, $text-bg: $shepherd-text-background, $header-bg: $shepherd-header-background) {
-  .tippy-arrow {
-    border: $arrow-size solid transparent;
-    content: '';
-    display: block;
-    height: 0;
-    pointer-events: $arrow-pointer-events;
-    position: absolute;
-    width: 0;
-  }
-
-  // Centers and middles
+@mixin popper-theme-arrows($arrow-size: 2.1, $arrow-pointer-events: null, $text-bg: $shepherd-text-background, $header-bg: $shepherd-header-background) {
+  $margin: calc((#{$arrow-size} / 2.1) * 16px);
 
   &[x-placement^='top'] {
-    margin-bottom: $arrow-size;
+    margin-bottom: $margin;
 
     .tippy-arrow {
-      border-bottom: 0;
       border-top-color: $text-bg;
-      left: calc(50% - #{$arrow-size});
+    }
+
+    .shepherd-has-title-theme {
+      .tippy-arrow {
+        border-top-color: $header-bg;
+      }
     }
   }
 
   &[x-placement^='bottom'] {
-    margin-top: $arrow-size;
+    margin-top: $margin;
 
     .tippy-arrow {
-      border-bottom-color: $header-bg;
-      border-top: 0;
-      left: calc(50% - #{$arrow-size});
+      border-bottom-color: $text-bg;
+    }
+
+    .shepherd-has-title-theme {
+      .tippy-arrow {
+        border-bottom-color: $header-bg;
+      }
     }
   }
 
   &[x-placement^='left'] {
-    margin-right: $arrow-size;
+    margin-right: $margin;
 
     .tippy-arrow {
       border-left-color: $text-bg;
-      border-right: 0;
-      margin-top: -$arrow-size;
-      top: calc(50% - #{$arrow-size});
+    }
+
+    .shepherd-has-title-theme {
+      .tippy-arrow {
+        border-left-color: $header-bg;
+      }
     }
   }
 
   &[x-placement^='right'] {
-    margin-left: $arrow-size;
+    margin-left: $margin;
 
     .tippy-arrow {
-      border-left: 0;
       border-right-color: $text-bg;
-      top: calc(50% - #{$arrow-size});
+    }
+
+    .shepherd-has-title-theme {
+      .tippy-arrow {
+        border-right-color: $header-bg;
+      }
     }
   }
 }
-