feat(clay-css): Atlas Form Validation add styles for readonly input s…

…uccess, error, and warning states feat(clay-css): Form Validation add Sass maps `$input-danger-readonly`, `$input-success-readonly`, and `$input-warning-readonly` fixes #2715
liferay · Nov 28, 2019 · faf5748 · faf5748
1 parent 0b2dc93
commit faf5748
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 0 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_forms.scss b/packages/clay-css/src/scss/atlas/variables/_forms.scss
@@ -72,6 +72,7 @@ $input-readonly-bg: $white !default;
 $input-readonly: () !default;
 $input-readonly: map-deep-merge((
 	bg: $input-readonly-bg,
+	border-color: $input-border-color,
 	focus-box-shadow: none,
 ), $input-readonly);
 
@@ -87,6 +88,14 @@ $input-danger-border-color: $danger-l1 !default;
 $input-danger-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
 $input-danger-focus-box-shadow: $input-focus-box-shadow !default;
 $input-danger-color: $input-color !default;
+
+$input-danger-readonly: () !default;
+$input-danger-readonly: map-deep-merge((
+	bg: map-get($input-readonly, bg),
+	border-color: map-get($input-readonly, border-color),
+	focus-border-color: $input-focus-border-color,
+), $input-danger-readonly);
+
 $input-danger-checkbox-label-color: $danger !default;
 $input-danger-select-icon-color: $input-danger-border-color !default;
 $input-danger-select-icon: clay-icon(caret-double-l, $input-danger-select-icon-color) !default;
@@ -97,6 +106,14 @@ $input-success-border-color: $success-l1 !default;
 $input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
 $input-success-focus-box-shadow: $input-focus-box-shadow !default;
 $input-success-color: $input-color !default;
+
+$input-success-readonly: () !default;
+$input-success-readonly: map-deep-merge((
+	bg: map-get($input-readonly, bg),
+	border-color: map-get($input-readonly, border-color),
+	focus-border-color: $input-focus-border-color,
+), $input-success-readonly);
+
 $input-success-checkbox-label-color: $success !default;
 $input-success-select-icon-color: $input-success-border-color !default;
 $input-success-select-icon: clay-icon(caret-double-l, $input-success-select-icon-color) !default;
@@ -106,6 +123,14 @@ $input-warning-border-color: $warning-l1 !default;
 // Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
 $input-warning-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
 $input-warning-focus-box-shadow: $input-focus-box-shadow !default;
+
+$input-warning-readonly: () !default;
+$input-warning-readonly: map-deep-merge((
+	bg: map-get($input-readonly, bg),
+	border-color: map-get($input-readonly, border-color),
+	focus-border-color: $input-focus-border-color,
+), $input-warning-readonly);
+
 $input-warning-color: $input-color !default;
 $input-warning-checkbox-label-color: $warning !default;
 $input-warning-select-icon-color: $input-warning-border-color !default;

diff --git a/packages/clay-css/src/scss/components/_form-validation.scss b/packages/clay-css/src/scss/components/_form-validation.scss
@@ -92,6 +92,10 @@
 		}
 	}
 
+	.form-control[readonly] {
+		@include clay-button-variant($input-danger-readonly);
+	}
+
 	.form-feedback-item {
 		color: $form-feedback-invalid-color;
 	}
@@ -152,6 +156,10 @@
 		}
 	}
 
+	.form-control[readonly] {
+		@include clay-button-variant($input-warning-readonly);
+	}
+
 	.form-feedback-item {
 		color: $form-feedback-warning-color;
 	}
@@ -212,6 +220,10 @@
 		}
 	}
 
+	.form-control[readonly] {
+		@include clay-button-variant($input-success-readonly);
+	}
+
 	.form-feedback-item {
 		color: $form-feedback-valid-color;
 	}

diff --git a/packages/clay-css/src/scss/variables/_forms.scss b/packages/clay-css/src/scss/variables/_forms.scss
@@ -215,6 +215,8 @@ $input-danger-focus-box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-inv
 $input-danger-color: null !default;
 $input-danger-focus-color: null !default;
 
+$input-danger-readonly: () !default;
+
 $input-danger-checkbox-label-color: $form-feedback-invalid-color !default;
 $input-danger-label-color: null !default;
 $input-danger-select-icon-color: $input-danger-border-color !default;
@@ -229,6 +231,8 @@ $input-success-focus-box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-va
 $input-success-color: null !default;
 $input-success-focus-color: null !default;
 
+$input-success-readonly: () !default;
+
 $input-success-checkbox-label-color: $form-feedback-valid-color !default;
 $input-success-label-color: null !default;
 $input-success-select-icon-color: $input-success-border-color !default;
@@ -243,6 +247,8 @@ $input-warning-focus-box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-wa
 $input-warning-color: null !default;
 $input-warning-focus-color: null !default;
 
+$input-warning-readonly: () !default;
+
 $input-warning-checkbox-label-color: $form-feedback-warning-color !default;
 $input-warning-label-color: null !default;
 $input-warning-select-icon-color: $input-warning-border-color !default;