Fix style of Tooltip arrow

camomeui · May 15, 2023 · 53614db · 53614db · vercel · May 15, 2023
1 parent d71aa94
commit 53614db
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/.changeset/shaggy-meals-burn.md b/.changeset/shaggy-meals-burn.md
@@ -0,0 +1,5 @@
+---
+"@camome/core": minor
+---
+
+Fix style of Tooltip arrow
diff --git a/packages/core/src/components/Tooltip/styles.module.scss b/packages/core/src/components/Tooltip/styles.module.scss
@@ -62,8 +62,7 @@
       bottom: 100%;
 
       &:before {
-        // `locals.$arrowSize * 2 * -1` works on Chrome but not Safari
-        bottom: calc(locals.$arrowSize * 1.9 * -1);
+        bottom: calc(locals.$arrowSize * 2 * -1 + 1px);
         left: 50%;
         translate: calc(locals.$arrowSize * -1);
         border-top: locals.$arrowSize solid var(--cmm-Tooltip-bg);
@@ -76,8 +75,9 @@
       left: 100%;
 
       &:before {
-        // `locals.$arrowSize * 2 * -1` works on Chrome but not Safari
-        left: calc(locals.$arrowSize * 1.9 * -1);
+        top: 50%;
+        left: calc(locals.$arrowSize * 2 * -1 + 1px);
+        translate: 0 -50%;
         border-right: locals.$arrowSize solid var(--cmm-Tooltip-bg);
       }
     }
@@ -88,7 +88,7 @@
       top: 100%;
 
       &:before {
-        top: calc(locals.$arrowSize * 1.9 * -1);
+        top: calc(locals.$arrowSize * 2 * -1 + 1px);
         left: 50%;
         translate: calc(locals.$arrowSize * -1);
         border-bottom: locals.$arrowSize solid var(--cmm-Tooltip-bg);
@@ -101,7 +101,9 @@
       right: 100%;
 
       &:before {
-        right: calc(locals.$arrowSize * 1.9 * -1);
+        top: 50%;
+        right: calc(locals.$arrowSize * 2 * -1 + 1px);
+        translate: 0 -50%;
         border-left: locals.$arrowSize solid var(--cmm-Tooltip-bg);
       }
     }

diff --git a/packages/core/src/components/Tooltip/variables.scss b/packages/core/src/components/Tooltip/variables.scss
@@ -1,4 +1,4 @@
 $arrowSize_name: --cmm-Tooltip-arrow-size;
-$arrowSize: var($arrowSize_name, 0.3rem);
+$arrowSize: var($arrowSize_name, 6px);
 $offset_name: --cmm-Tooltip-offset;
 $offset: var($offset_name, 0.2rem);
diff --git a/packages/core/src/components/Tooltip/variables.ts b/packages/core/src/components/Tooltip/variables.ts
@@ -1,7 +1,7 @@
 import { ComponentCssVariables } from "../../types";
 
 const variables = {
-  arrowSize: "0.3rem",
+  arrowSize: "6px",
   offset: "0.2rem",
 } as const satisfies ComponentCssVariables;