Bugfix/marp 1497 download tooltip is different from figma (#252)

axonivy-market · Dec 10, 2024 · 8145ab3 · 8145ab3
1 parent e4a7b57
commit 8145ab3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/...product-detail/product-detail-version-action/product-detail-version-action.component.scss b/...product-detail/product-detail-version-action/product-detail-version-action.component.scss
@@ -11,22 +11,23 @@
   justify-content: space-between;
   box-shadow: 0px 4px 30px 0px #0000001a;
   border: 0.5px solid var(--ivy-secondary-border-color);
-  top: 0.8rem !important;
+  top: 1rem !important;
 
   .tooltip-arrow {
-    top: -0.8rem !important;
+    top: -1rem !important;
     width: 0;
     height: 0;
     border-left: 13px solid transparent;
     border-right: 13px solid transparent;
-    border-bottom: 13px solid var(--ivy-secondary-border-color);
     &::before {
+      box-sizing: border-box !important;
       width: 0;
       height: 0;
-      border-left: 12px solid transparent !important;
-      border-right: 12px solid transparent !important;
-      border-bottom: 12px solid var(--bs-body-bg) !important;
-      top: 0.15rem !important;
+      transform: rotate(45deg);
+      border-top-left-radius: 5px !important;
+      border: 1rem solid var(--bs-body-bg) !important;
+      box-shadow: -0.05em -0.05em 0em var(--ivy-secondary-border-color-up-arrow);
+      top: 0.05rem !important;
       left: -0.75rem;
     }
   }

diff --git a/marketplace-ui/src/assets/scss/custom-style.scss b/marketplace-ui/src/assets/scss/custom-style.scss
@@ -69,6 +69,7 @@ p {
   --header-border-color: #ebebeb;
   --footer-border-color: #e7e7e7;
   --ivy-secondary-border-color: #e7e7e7;
+  --ivy-secondary-border-color-up-arrow: #0000001a;
   --ivy-custom-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 11 8 5 14 11'/%3e%3c/svg%3e") !important;
   --active-tab-indicator-color: #{$ivyPrimaryTextColorLight};
   --info-dropdown-bg: #ffffff;
@@ -177,6 +178,7 @@ p {
   --header-border-color: #{$ivySecondaryTextLight};
   --footer-border-color: #4f4e4e;
   --ivy-secondary-border-color: #4f4e4e;
+  --ivy-secondary-border-color-up-arrow: #4f4e4e;
   --ivy-custom-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 11 8 5 14 11'/%3e%3c/svg%3e") !important;
   --active-tab-indicator-color: #{$white};
   --info-dropdown-bg: #{$ivyBodyBackgroundDark};