fix(ui): Webview 에서 Button 호버 효과 대응

semicolondsm · Jun 2, 2022 · 8499c4d · 8499c4d
1 parent 0a7e33e
commit 8499c4d
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx
@@ -33,6 +33,7 @@ export const ButtonElement = styled.button<ButtonElementProps>`
     display: flex;
     align-items: center;
     border: none;
+    outline: none;
     cursor: ${(props) => props.cursor};
     background: ${(props) => props.theme.colors[props.background]};
     padding: ${(props) => `${props.paddingVertical}px ${props.paddingHorizontal}px`};
@@ -42,8 +43,13 @@ export const ButtonElement = styled.button<ButtonElementProps>`
     ${(props) => props.fullWidth && full()}
 
     ${(props) => props.fillStyle === 'link' && link(props)}
-
-    &:hover, &:active {
+    @media(hover: hover) {
+        &:hover {
+            background: ${(props) => props.theme.colors[props.activeBackground]};
+        }
+    }
+    -webkit-tap-highlight-color: transparent;
+    &:active {
         background: ${(props) => props.theme.colors[props.activeBackground]};
     }