add scss

mittwald · Jan 23, 2024 · c1c1c85 · c1c1c85
1 parent 0761fad
commit c1c1c85
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/...src/components/Tooltip/Tooltip.module.css → ...rc/components/Tooltip/Tooltip.module.scss b/...src/components/Tooltip/Tooltip.module.css → ...rc/components/Tooltip/Tooltip.module.scss
@@ -1,6 +1,6 @@
 @import "@/styles";
 
-.root {
+.tooltip {
   border-radius: var(--border-radius--default);
   background-color: var(--tooltip--background-color);
   color: var(--tooltip--color);
@@ -10,28 +10,25 @@
   max-width: var(--tooltip--max-width);
   transform: translate3d(0, 0, 0);
 
-  --translate-origin-length: calc(
-    var(--tooltip--tooltip-to-content-spacing) / 2
-  );
+  --translate-origin-length: var(--tooltip--tooltip-to-content-spacing) / 2;
 
   /* Placement */
-
   &[data-placement="top"] {
     margin-bottom: var(--tooltip--tooltip-to-content-spacing);
     --translate-origin: translateY(var(--translate-origin-length));
   }
 
   &[data-placement="bottom"] {
     margin-top: var(--tooltip--tooltip-to-content-spacing);
-    --translate-origin: translateY(calc(var(--translate-origin-length) * -1));
+    --translate-origin: translateY(var(--translate-origin-length) * -1);
     .arrow svg {
       transform: rotate(180deg);
     }
   }
 
   &[data-placement="right"] {
     margin-left: var(--tooltip--tooltip-to-content-spacing);
-    --translate-origin: translateX(calc(var(--translate-origin-length) * -1));
+    --translate-origin: translateX(var(--translate-origin-length) * -1);
     .arrow svg {
       transform: rotate(90deg);
     }

diff --git a/packages/components/src/components/Tooltip/Tooltip.tsx b/packages/components/src/components/Tooltip/Tooltip.tsx
@@ -1,6 +1,6 @@
 import * as Aria from "react-aria-components";
 import React, { FC, PropsWithChildren } from "react";
-import styles from "./Tooltip.module.css";
+import styles from "./Tooltip.module.scss";
 import clsx from "clsx";
 
 export interface TooltipProps
@@ -9,7 +9,7 @@ export interface TooltipProps
 export const Tooltip: FC<TooltipProps> = (props) => {
   const { children, className, ...rest } = props;
 
-  const rootClassName = clsx(className, styles.root);
+  const rootClassName = clsx(styles.tooltip, className);
 
   return (
     <Aria.Tooltip {...rest} className={rootClassName}>