From 5dc371b99ad3464e7d6ec09e3f3b10d70aceecd7 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Mon, 4 Jan 2021 10:14:36 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20Added=20media=20query=20to?= =?UTF-8?q?=20hover=20effects?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Solves stuck hover effect on touch devices --- .../src/components/SelectionControls/Checkbox/Input.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/libraries/core-react/src/components/SelectionControls/Checkbox/Input.tsx b/libraries/core-react/src/components/SelectionControls/Checkbox/Input.tsx index fe49eb3c48..9d038997f2 100644 --- a/libraries/core-react/src/components/SelectionControls/Checkbox/Input.tsx +++ b/libraries/core-react/src/components/SelectionControls/Checkbox/Input.tsx @@ -69,9 +69,11 @@ const InputWrapper = styled.span` display: inline-flex; border-radius: 50%; padding: ${enabled.padding}; - &:hover { - background-color: ${({ disabled }) => - disabled ? 'transparent' : color.hover}; + @media (hover: hover) and (pointer: fine) { + &:hover { + background-color: ${({ disabled }) => + disabled ? 'transparent' : color.hover}; + } } ` export type InputProps = { From 724ea74f46cc1204c989243f13407c8eb30257bf Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Mon, 4 Jan 2021 10:20:11 +0100 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20Also=20added=20media=20queri?= =?UTF-8?q?es=20to=20Radio=20and=20Switch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SelectionControls/Radio/Radio.tsx | 8 ++++--- .../SelectionControls/Switch/InputWrapper.tsx | 24 +++++++++++-------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/libraries/core-react/src/components/SelectionControls/Radio/Radio.tsx b/libraries/core-react/src/components/SelectionControls/Radio/Radio.tsx index e36bdc119e..9466944edc 100644 --- a/libraries/core-react/src/components/SelectionControls/Radio/Radio.tsx +++ b/libraries/core-react/src/components/SelectionControls/Radio/Radio.tsx @@ -83,9 +83,11 @@ const InputWrapper = styled.span` display: inline-flex; border-radius: 50%; padding: ${enabled.padding}; - &:hover { - background-color: ${({ disabled }) => - disabled ? 'transparent' : color.hover}; + @media (hover: hover) and (pointer: fine) { + &:hover { + background-color: ${({ disabled }) => + disabled ? 'transparent' : color.hover}; + } } ` export type RadioProps = { diff --git a/libraries/core-react/src/components/SelectionControls/Switch/InputWrapper.tsx b/libraries/core-react/src/components/SelectionControls/Switch/InputWrapper.tsx index c96ed55fce..82b68d030e 100644 --- a/libraries/core-react/src/components/SelectionControls/Switch/InputWrapper.tsx +++ b/libraries/core-react/src/components/SelectionControls/Switch/InputWrapper.tsx @@ -16,19 +16,23 @@ const BaseInputWrapper = styled.span` ` const InputWrapperDefault = styled(BaseInputWrapper)` - &:hover { - background-color: ${({ isDisabled }) => - isDisabled ? 'transparent' : enabled.hover.background}; - } - &:hover > span:last-child { - background-color: ${({ isDisabled }) => - isDisabled ? _disabled.background : enabled.hover.handle.background}; + @media (hover: hover) and (pointer: fine) { + &:hover { + background-color: ${({ isDisabled }) => + isDisabled ? 'transparent' : enabled.hover.background}; + } + &:hover > span:last-child { + background-color: ${({ isDisabled }) => + isDisabled ? _disabled.background : enabled.hover.handle.background}; + } } ` const InputWrapperSmall = styled(BaseInputWrapper)` - &:hover { - background-color: ${({ isDisabled }) => - isDisabled ? 'transparent' : enabled.hover.background}; + @media (hover: hover) and (pointer: fine) { + &:hover { + background-color: ${({ isDisabled }) => + isDisabled ? 'transparent' : enabled.hover.background}; + } } `