New: (Fixes #768) Input Group added .input-group-password pattern

Update: (#768) Input Group Inset should be styled by Form Validation classes
liferay · Apr 4, 2018 · 6f676da · 6f676da
1 parent 194e3e0
commit 6f676da
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/packages/clay/src/scss/components/_form-validation.scss b/packages/clay/src/scss/components/_form-validation.scss
@@ -99,6 +99,18 @@
 	select.form-control:not([multiple]):not([size]) {
 		background-image: $input-danger-select-icon;
 	}
+
+	.input-group-inset-item {
+		background-color: $input-danger-bg;
+		border-color: $input-danger-border-color;
+		box-shadow: $input-danger-box-shadow;
+	}
+
+	.form-control:focus ~ .input-group-inset-item {
+		background-color: setter($input-danger-focus-bg, $input-danger-bg);
+		border-color: setter($input-danger-focus-border-color, $input-danger-border-color);
+		box-shadow: setter($input-danger-focus-box-shadow, $input-danger-box-shadow);
+	}
 }
 
 .has-warning {
@@ -132,6 +144,18 @@
 	select.form-control:not([multiple]):not([size]) {
 		background-image: $input-warning-select-icon;
 	}
+
+	.input-group-inset-item {
+		background-color: $input-warning-bg;
+		border-color: $input-warning-border-color;
+		box-shadow: $input-warning-box-shadow;
+	}
+
+	.form-control:focus ~ .input-group-inset-item {
+		background-color: setter($input-warning-focus-bg, $input-warning-bg);
+		border-color: setter($input-warning-focus-border-color, $input-warning-border-color);
+		box-shadow: setter($input-warning-focus-box-shadow, $input-warning-box-shadow);
+	}
 }
 
 .has-success {
@@ -165,4 +189,16 @@
 	select.form-control:not([multiple]):not([size]) {
 		background-image: $input-success-select-icon;
 	}
+
+	.input-group-inset-item {
+		background-color: $input-success-bg;
+		border-color: $input-success-border-color;
+		box-shadow: $input-success-box-shadow;
+	}
+
+	.form-control:focus ~ .input-group-inset-item {
+		background-color: setter($input-success-focus-bg, $input-success-bg);
+		border-color: setter($input-success-focus-border-color, $input-success-border-color);
+		box-shadow: setter($input-success-focus-box-shadow, $input-success-box-shadow);
+	}
 }
diff --git a/packages/clay/src/scss/components/_input-groups.scss b/packages/clay/src/scss/components/_input-groups.scss
@@ -460,4 +460,20 @@
 			}
 		}
 	}
+}
+
+// Input Group Password
+
+.input-group-password {
+	.form-control[type="text"] ~ .input-group-inset-item {
+		.input-password-label {
+			display: none;
+		}
+	}
+
+	.form-control[type="password"] ~ .input-group-inset-item {
+		.input-text-label {
+			display: none;
+		}
+	}
 }