From 812546b3ce7a8d6fad82af7115cb86d4960eb74d Mon Sep 17 00:00:00 2001 From: Franck Gaudin Date: Mon, 4 Dec 2023 15:35:54 -0500 Subject: [PATCH] Hover display for a selected radio (#583) * fix(radio): hover display for a selected radio * fix(radio): modification following PR comment * fix(radio): add background on focus state --- .changeset/silver-ghosts-bake.md | 5 +++++ packages/Radio/src/radio.scss | 12 +++++++----- 2 files changed, 12 insertions(+), 5 deletions(-) create mode 100644 .changeset/silver-ghosts-bake.md diff --git a/.changeset/silver-ghosts-bake.md b/.changeset/silver-ghosts-bake.md new file mode 100644 index 00000000..b2f3a7e0 --- /dev/null +++ b/.changeset/silver-ghosts-bake.md @@ -0,0 +1,5 @@ +--- +"@igloo-ui/radio": patch +--- + +fix the problem of displaying the hover of a selected radio diff --git a/packages/Radio/src/radio.scss b/packages/Radio/src/radio.scss index 6ec0a2d5..054149bf 100644 --- a/packages/Radio/src/radio.scss +++ b/packages/Radio/src/radio.scss @@ -55,7 +55,6 @@ --ids-radio-background-disabled: var(--hop-neutral-surface-disabled); --ids-radio-background-disabled-checked: var(--hop-neutral-surface-disabled); --ids-radio-background-checked: var(--hop-neutral-surface-active); - --ids-radio-check-background-checked-hover: var(--hop-neutral-icon-hover) } %radio { @@ -117,18 +116,21 @@ &:focus { outline: none; box-shadow: var(--focus); + background-color: var(--ids-radio-background-hover, var(--ids-radio-background)); } &:hover { border-color: var(--ids-radio-border-hover); - background-color: var(--ids-radio-background-hover, var(--ids-radio-background)) + background-color: var(--ids-radio-background-hover, var(--ids-radio-background)); } - &:checked:hover { - border-color: var(--ids-radio-border-checked-hover, var(--ids-radio-border-hover)) ; + &:checked:hover, + &:checked:focus { + border-color: var(--ids-radio-border-checked-hover, var(--ids-radio-border-hover)); + background-color: var(--ids-radio-background-checked, var(--ids-radio-background-checked)); &::after { - background: var(--ids-radio-check-background-checked-hover, var(--ids-radio-background)); + background: var(--ids-radio-background); } }