fix: disabled 호버 스타일 및 active 스타일 추가

depromeet · Aug 21, 2024 · fdfda22 · fdfda22
1 parent f804000
commit fdfda22
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/apps/web/app/test/page.tsx b/apps/web/app/test/page.tsx
diff --git a/packages/core/sds/src/components/Button/styles.ts b/packages/core/sds/src/components/Button/styles.ts
@@ -85,13 +85,20 @@ export const buttonCss = css({
 
   cursor: 'pointer',
 
-  '&:hover': {
-    backgroundColor: `var(${buttonHoverColorVar})`,
-  },
-
   '&:disabled': {
     cursor: 'not-allowed',
   },
+
+  '@media (hover: none) and (pointer: coarse)': {
+    '&:not(:disabled):active': {
+      backgroundColor: `var(${buttonHoverColorVar})`,
+    },
+  },
+  '@media (hover: hover) and (pointer: fine)': {
+    '&:not(:disabled):hover': {
+      backgroundColor: `var(${buttonHoverColorVar})`,
+    },
+  },
 });
 
 export const leftDecorCss = css({