IBX-6467: Richtext field validation is not styled properly

ibexa · Oct 2, 2023 · 96e3b02 · 96e3b02
1 parent bf3e33c
commit 96e3b02
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/src/bundle/Resources/public/scss/_general.scss b/src/bundle/Resources/public/scss/_general.scss
@@ -233,6 +233,26 @@
     }
 }
 
+.ibexa-field-edit--ezrichtext {
+    .ibexa-data-source__richtext.ck.ck-editor__editable.ck-rounded-corners:not(.ck-editor__nested-editable) {
+        border-radius: $ibexa-border-radius $ibexa-border-radius 0 0;
+    }
+
+    &.is-invalid {
+        .ibexa-label {
+            color: $ibexa-color-danger;
+        }
+
+        .ibexa-data-source {
+            border-color: $ibexa-color-danger;
+        }
+
+        .ibexa-data-source__richtext {
+            background-color: $ibexa-color-danger-100;
+        }
+    }
+}
+
 .ck {
     &.ck-editor__editable_inline {
         border: none;

diff --git a/src/bundle/Resources/public/scss/variables/colors.scss b/src/bundle/Resources/public/scss/variables/colors.scss
@@ -16,6 +16,7 @@ $ibexa-color-dark-300: #a0a4a8 !default;
 $ibexa-color-dark-200: #cfd1d3 !default;
 
 $ibexa-color-danger: #db0032 !default;
+$ibexa-color-danger-100: #fbe5ea !default;
 
 $ibexa-btn-focus-box-shadow: 0 0 0 calculateRem(3px) rgba($ibexa-color-primary, 0.2) !default;
 $ibexa-btn-hover-box-shadow: 0 calculateRem(22px) calculateRem(24px) 0 rgba($ibexa-color-danger, 0.2) !default;