From 28a1b40f7d9480bec24053379aedf53c9173639e Mon Sep 17 00:00:00 2001 From: PriJoh Date: Fri, 8 Nov 2024 15:55:13 +0100 Subject: [PATCH 1/5] pfe-1828 Updated radiobutton hover, checkmarks hover, color, bg color --- src/less/components/payex/radio.less | 54 ++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/src/less/components/payex/radio.less b/src/less/components/payex/radio.less index e7842ed0af..b90cf5a537 100644 --- a/src/less/components/payex/radio.less +++ b/src/less/components/payex/radio.less @@ -10,5 +10,59 @@ border: 2px solid @radiobutton-border; } } + + &:is(:hover, :focus-visible) + label:before { + box-shadow: 0 0 0 0.375rem var(--gray); + } } } + +.checkmark { + label { + + border: 1px solid var(--gray); + outline: none !important; + + .radio.checkmark label .checkmark-icon { + background-color: var(--brand-secondary); + } + + &:hover { + background-color: var(--gray) !important; + color: var(--white); + border: 1px solid var(--gray) !important; + outline: none !important; + + .checkmark-icon, + > i { + background-color: var(--white); + } + + .checkmark-icon::before, .checkmark label:hover > i::before { + border-color: var(--gray) !important; + } + } + + &:active { + border: 3px solid var(--brand-secondary) !important; + outline: none; + } + + &:disabled { + color: var(--white) !important; + border: 1px solid var(--gray) !important; + background-color: var(--light-gray) !important; + outline: none; + } + + &:focus { + border: 1px solid var(--gray); + background-color: var(--light-gray); + + .checkmark-icon::before, .checkmark label:focus > i::before { + border-color: var(--light-gray); + } + } + + } +} From f1e6955e6ec755f7ca44a291a9329471b3fed619 Mon Sep 17 00:00:00 2001 From: PriJoh Date: Tue, 12 Nov 2024 15:10:31 +0100 Subject: [PATCH 2/5] pfe-1828 Added circle svg. Changed color, bg color and border on hover, default, disabled checkmark --- src/icons/payex/circlepx.svg | 3 + src/icons/payex/circlepx_disabled.svg | 3 + src/less/components/payex/radio.less | 114 +++++++++++++++++++------- src/less/variables-payex.less | 1 + 4 files changed, 92 insertions(+), 29 deletions(-) create mode 100644 src/icons/payex/circlepx.svg create mode 100644 src/icons/payex/circlepx_disabled.svg diff --git a/src/icons/payex/circlepx.svg b/src/icons/payex/circlepx.svg new file mode 100644 index 0000000000..10316e927e --- /dev/null +++ b/src/icons/payex/circlepx.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/payex/circlepx_disabled.svg b/src/icons/payex/circlepx_disabled.svg new file mode 100644 index 0000000000..1f101129fb --- /dev/null +++ b/src/icons/payex/circlepx_disabled.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/less/components/payex/radio.less b/src/less/components/payex/radio.less index b90cf5a537..b90b70ff88 100644 --- a/src/less/components/payex/radio.less +++ b/src/less/components/payex/radio.less @@ -6,6 +6,7 @@ input[type="radio"] { + label { + &:before { border: 2px solid @radiobutton-border; } @@ -14,55 +15,110 @@ &:is(:hover, :focus-visible) + label:before { box-shadow: 0 0 0 0.375rem var(--gray); } + + &:checked + label:before { + background-position: center; + background-image: url("../../../icons/payex/circlepx.svg"); + } } } +.radio input[type=radio][disabled]:checked+label:before { + background-image: url("../../../icons/payex/circlepx_disabled.svg"); +} + .checkmark { + label { - border: 1px solid var(--gray); - outline: none !important; + outline: none !important; + color: var(--light-black); .radio.checkmark label .checkmark-icon { background-color: var(--brand-secondary); } &:hover { - background-color: var(--gray) !important; - color: var(--white); - border: 1px solid var(--gray) !important; - outline: none !important; - + border: 1px solid var(--gray) !important; + background-color: var(--light-gray) !important; + color: var(--brand-secondary) !important; + .checkmark-icon, > i { - background-color: var(--white); + background-color: var(--brand-secondary) !important; } .checkmark-icon::before, .checkmark label:hover > i::before { - border-color: var(--gray) !important; - } - } + border-color: var(--light-gray) !important; + } - &:active { - border: 3px solid var(--brand-secondary) !important; - outline: none; + .checkmark-icon::before, + .checkmark label:hover > i::before { + border-color: var(--light-gray) !important; + } } + } +} - &:disabled { - color: var(--white) !important; - border: 1px solid var(--gray) !important; - background-color: var(--light-gray) !important; - outline: none; - } +.radio.checkmark input[type="radio"]:checked + label:hover { + border: 1px solid var(--brand-secondary); + outline: none !important; +} - &:focus { - border: 1px solid var(--gray); - background-color: var(--light-gray); +.radio.checkmark input[type="radio"]:checked + label { + border: 1px solid var(--brand-secondary); + outline: 3px solid var(--brand-secondary) !important; +} - .checkmark-icon::before, .checkmark label:focus > i::before { - border-color: var(--light-gray); - } - } - - } +.radio.checkmark input[type="radio"]:disabled:checked + label { + color: var(--white); + border: 1px solid var(--gray) !important; + outline: none !important; + + .checkmark-icon, + > i { + background-color: var(--white); + } + .checkmark-icon::before, .checkmark label:disabled > i::before { + border-color: var(--gray) !important; + } +} + +.radio.checkmark input[type="radio"]:disabled + label:hover { + color: var(--white) !important; + border: 1px solid var(--gray) !important; + outline: none !important; + background-color: var(--gray) !important; + box-shadow: none !important; + cursor: not-allowed !important; + + .checkmark-icon, + > i { + background-color: var(--white) !important; + } + .checkmark-icon::before, .checkmark label:disabled > i::before { + border-color: var(--gray) !important; + } +} + +.radio.checkmark input[type="radio"]:disabled:checked:hover + label { + color: var(--white); + border: 1px solid var(--gray) !important; + outline: none !important; + box-shadow: none; + + .checkmark-icon, + > i { + background-color: var(--white); + } + .checkmark-icon::before, .checkmark label:disabled > i::before { + border-color: var(--gray) !important; + } } + +.radio.checkmark input[type="radio"]:disabled + label { + color: var(--white); + border: 1px solid var(--gray) !important; + outline: none !important; + background-color: var(--gray) !important; +} \ No newline at end of file diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less index 48f60f0206..0c8ff4ef06 100644 --- a/src/less/variables-payex.less +++ b/src/less/variables-payex.less @@ -152,6 +152,7 @@ body { :root { /* Grayscale */ --black: #000000; + --light-black: #2F2424; --list-gray: #999999; --light-gray: #f4f4f4; --gray: #c8c8c8; From 598a072f2788eca0468b455e7dbdf075d78ab41e Mon Sep 17 00:00:00 2001 From: PriJoh Date: Wed, 13 Nov 2024 11:23:29 +0100 Subject: [PATCH 3/5] pfe-1828 Removed blank spaces --- src/less/components/payex/radio.less | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/less/components/payex/radio.less b/src/less/components/payex/radio.less index b90b70ff88..564427a06e 100644 --- a/src/less/components/payex/radio.less +++ b/src/less/components/payex/radio.less @@ -6,7 +6,7 @@ input[type="radio"] { + label { - + &:before { border: 2px solid @radiobutton-border; } @@ -85,12 +85,11 @@ } .radio.checkmark input[type="radio"]:disabled + label:hover { - color: var(--white) !important; - border: 1px solid var(--gray) !important; - outline: none !important; - background-color: var(--gray) !important; - box-shadow: none !important; - cursor: not-allowed !important; + color: var(--white) !important; + border: 1px solid var(--gray) !important; + outline: none !important; + background-color: var(--gray) !important; + cursor: not-allowed !important; .checkmark-icon, > i { @@ -103,9 +102,8 @@ .radio.checkmark input[type="radio"]:disabled:checked:hover + label { color: var(--white); - border: 1px solid var(--gray) !important; + border: 1px solid var(--gray) !important; outline: none !important; - box-shadow: none; .checkmark-icon, > i { @@ -118,7 +116,7 @@ .radio.checkmark input[type="radio"]:disabled + label { color: var(--white); - border: 1px solid var(--gray) !important; + border: 1px solid var(--gray) !important; outline: none !important; background-color: var(--gray) !important; } \ No newline at end of file From dc0913003976d56f769264b759373cd3b8da8027 Mon Sep 17 00:00:00 2001 From: PriJoh Date: Tue, 26 Nov 2024 14:34:15 +0100 Subject: [PATCH 4/5] pfe-1828 Changed border to outline and removed redundant code --- src/less/components/payex/radio.less | 20 +++----------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/src/less/components/payex/radio.less b/src/less/components/payex/radio.less index 564427a06e..e20923a32e 100644 --- a/src/less/components/payex/radio.less +++ b/src/less/components/payex/radio.less @@ -27,11 +27,10 @@ background-image: url("../../../icons/payex/circlepx_disabled.svg"); } -.checkmark { +.radio.checkmark { label { - border: 1px solid var(--gray); - outline: none !important; + outline: 1px solid var(--gray) !important; color: var(--light-black); .radio.checkmark label .checkmark-icon { @@ -39,7 +38,7 @@ } &:hover { - border: 1px solid var(--gray) !important; + outline-color: var(--gray); background-color: var(--light-gray) !important; color: var(--brand-secondary) !important; @@ -60,20 +59,12 @@ } } -.radio.checkmark input[type="radio"]:checked + label:hover { - border: 1px solid var(--brand-secondary); - outline: none !important; -} - .radio.checkmark input[type="radio"]:checked + label { - border: 1px solid var(--brand-secondary); outline: 3px solid var(--brand-secondary) !important; } .radio.checkmark input[type="radio"]:disabled:checked + label { color: var(--white); - border: 1px solid var(--gray) !important; - outline: none !important; .checkmark-icon, > i { @@ -86,8 +77,6 @@ .radio.checkmark input[type="radio"]:disabled + label:hover { color: var(--white) !important; - border: 1px solid var(--gray) !important; - outline: none !important; background-color: var(--gray) !important; cursor: not-allowed !important; @@ -102,8 +91,6 @@ .radio.checkmark input[type="radio"]:disabled:checked:hover + label { color: var(--white); - border: 1px solid var(--gray) !important; - outline: none !important; .checkmark-icon, > i { @@ -116,7 +103,6 @@ .radio.checkmark input[type="radio"]:disabled + label { color: var(--white); - border: 1px solid var(--gray) !important; outline: none !important; background-color: var(--gray) !important; } \ No newline at end of file From b5c4e532e3b12253a6793baaca7d72fdae355d92 Mon Sep 17 00:00:00 2001 From: PriJoh Date: Fri, 13 Dec 2024 14:14:58 +0100 Subject: [PATCH 5/5] pfe-1828 Nested disabled circle.svg up to previous rule --- src/less/components/payex/radio.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/less/components/payex/radio.less b/src/less/components/payex/radio.less index e20923a32e..114946eaac 100644 --- a/src/less/components/payex/radio.less +++ b/src/less/components/payex/radio.less @@ -20,11 +20,11 @@ background-position: center; background-image: url("../../../icons/payex/circlepx.svg"); } - } -} -.radio input[type=radio][disabled]:checked+label:before { - background-image: url("../../../icons/payex/circlepx_disabled.svg"); + &[disabled]:checked+label:before { + background-image: url("../../../icons/payex/circlepx_disabled.svg"); + } + } } .radio.checkmark {