pfe-1828 Updated radiobutton hover, checkmarks hover, color, bg color

SwedbankPay · Nov 8, 2024 · 28a1b40 · 28a1b40
1 parent 19ce11b
commit 28a1b40
Showing 1 changed file with 54 additions and 0 deletions.
diff --git 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);
+			}
+		}
+
+    }
+}