Merge pull request #11525 from jibees/11524-enlarged-unit-price-tooltip-image-on-variant-edit-page

BUU: Fix question mark icon for tooltip

app/assets/javascripts/templates/shared/question_mark_with_tooltip_icon.html.haml

@@ -1 +1 @@
-%button.question-mark-icon{"ng-class" => "{open: tt_isOpen}", type: 'button'}
+.question-mark-icon{"ng-class" => "{open: tt_isOpen}", type: 'button'}

app/webpacker/css/admin_v3/all.scss

@@ -121,7 +121,7 @@
 @import "../admin/variant_overrides";
 @import "../admin/welcome";
 
-@import "../shared/question-mark-icon";
+@import "shared/question-mark-icon";
 @import "../admin/question-mark-tooltip";
 
 @import "~tom-select/src/scss/tom-select.default";

app/webpacker/css/admin_v3/shared/question-mark-icon.scss

@@ -0,0 +1,98 @@
+.unit-price {
+  display: flex;
+  align-items: center;
+}
+
+.question-mark-icon {
+  background-image: url("../images/question-mark-icon.svg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-radius: 50%;
+  cursor: pointer;
+
+  // Reset button element css attributes
+  padding: 0;
+  margin: 0;
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    background-color: transparent;
+  }
+
+  &.open {
+    background-image: none;
+    background-color: $orient;
+
+    &:focus {
+      outline: 0;
+    }
+
+    &::before {
+      @include icon-font;
+      content: "";
+      color: $white;
+      vertical-align: super;
+    }
+  }
+}
+
+// Question mark icon into a field
+.field .question-mark-icon {
+  width: 15px;
+  min-width: 15px;
+  height: 15px;
+  margin-left: 2px;
+}
+
+.joyride-tip-guide.question-mark-tooltip {
+  width: 16rem;
+  max-width: 65%;
+  // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
+  margin-left: -7.4rem;
+  margin-top: -0.1rem;
+  background-color: transparent;
+  z-index: $modal-zIndex + 1;
+
+  .background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    cursor: pointer;
+  }
+
+  .joyride-content-wrapper {
+    background-color: $orient;
+    padding: $padding-small;
+    border-radius: $radius-small;
+    color: $white;
+    width: 100%;
+    font-size: 0.8rem;
+  }
+
+  .joyride-nub.bottom {
+    // Need to rewrite all with !important as it's marked as !important in the original file
+    border-color: $orient !important;
+    border-bottom-color: transparent !important;
+    border-left-color: transparent !important;
+    border-right-color: transparent !important;
+    left: 7.4rem;
+    z-index: -1;
+  }
+
+  &.cart-sidebar {
+    // Small size (used in the cart sidebar)
+    width: 13rem;
+    margin-left: -10.4rem;
+
+    .joyride-nub.bottom {
+      left: 10.4rem;
+    }
+  }
+}

app/webpacker/css/shared/question-mark-icon.scss

@@ -10,6 +10,7 @@
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 50%;
+  cursor: pointer;
 
   // Reset button element css attributes
   padding: 0;