PFE-6: Added input-border-disabled-color and changed success border c…

…olor for input fields
SwedbankPay · Jan 18, 2024 · a084afa · a084afa
1 parent b148903
commit a084afa
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/src/less/components/payex/form.less b/src/less/components/payex/form.less
@@ -3,3 +3,53 @@
 .help-block {
 	color: @help-block-text;
 }
+
+
+.form-group {
+	&.disabled,
+	[disabled] {
+		color: @brand-secondary-light-3;
+
+		.input-group-addon {
+			border-color: var(--input-border-disabled-color);
+			color: var(--text-disabled);
+
+			i {
+				color: var(--text-disabled);
+			}
+		}
+
+		input::placeholder {
+			color: var(--text-disabled);
+		}
+
+		&.form-control {
+			border-color: var(--input-border-disabled-color);
+		}
+
+		label {
+			color: var(--text-disabled);
+		}
+	}
+
+	&.has-success {
+		.form-control {
+			border-color: var(--input-border-success-color);
+		}
+
+		.input-group-addon,
+		.input-group-addon.postfix {
+			border-color: var(--input-border-success-color);
+		}
+
+		i {
+			color: var(--input-border-success-color);
+		}
+
+		&:focus-within {
+			.form-control {
+				border-color: var(--input-border-focus-color);
+			}
+		}
+	}
+}
diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less
@@ -250,7 +250,8 @@ body {
 	--input-addon-color: var(--brand-secondary, #3c3c3c);
 	--input-border-color: var(--brand-secondary-hover, #5f5f5f);
 	--input-border-focus-color: var(--brand-secondary, #3c3c3c);
-	--input-border-success-color: var(--payex-light-blue);
+	--input-border-success-color: var(--brand-success);
+	--input-border-disabled-color: var(--brand-secondary-light-3, #c8c8c8);
 
 	/* Panel */
 	--panel-default-border-color: var(--brand-secondary-light-3, #c8c8c8);