Change form error styling (#309)

hasgeek · Jul 20, 2020 · 8dc691b · 8dc691b
1 parent a37f11f
commit 8dc691b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/baseframe/static/css/mui.css b/baseframe/static/css/mui.css
@@ -4096,20 +4096,36 @@ li p + ol {
   line-height: 24px;
 }
 .mui-form .mui-form__error {
-  color: #c04b61;
+  color: #ffffff;
   margin: 8px 0 0;
-  padding: 0;
+  background: #c04b61;
+  border: 1px solid #c04b61;
+  padding: 8px 16px;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
+  border-radius: 2px;
+  display: inline-block;
 }
 .mui-form .mui-form__error > li {
   list-style: none;
   margin-top: 10px;
 }
+.mui-form .mui-form__error:before {
+  display: block;
+  content: '';
+  position: absolute;
+  border: 6px solid transparent;
+  border-bottom: 6px solid #c04b61;
+  top: -13px;
+  left: 20px;
+}
 .mui-form .has-error .mui-textfield > input,
 .mui-form .has-error .mui-textfield > textarea {
   border-bottom: 1px solid #c04b61;
 }
 .mui-form .has-error .mui-textfield > label,
-.mui-form .has-error label {
+.mui-form .has-error label,
+.mui-form .has-error .mui-form__helptext {
   color: #c04b61;
 }
 .mui-form .alert {

diff --git a/baseframe/static/sass/baseframe-material/_form.scss b/baseframe/static/sass/baseframe-material/_form.scss
@@ -68,9 +68,15 @@
   }
 
   .mui-form__error {
-    color: $mui-text-danger;
+    color: $mui-text-white;
     margin: $mui-grid-padding/2 0 0;
-    padding: 0;
+    background: $mui-danger-color;
+    border: 1px solid $mui-text-danger;
+    padding: $mui-grid-padding/2 $mui-grid-padding;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
+    border-radius: 2px;
+    display: inline-block;
     @extend .mui--text-caption;
 
     > li {
@@ -79,12 +85,23 @@
     }
   }
 
+  .mui-form__error:before {
+    display: block;
+    content: '';
+    position: absolute;
+    border: 6px solid transparent;
+    border-bottom: 6px solid $mui-text-danger;
+    top: -13px;
+    left: 20px;
+  }
+
   .has-error .mui-textfield > input,
   .has-error .mui-textfield > textarea {
     border-bottom: 1px solid $mui-text-danger;
   }
   .has-error .mui-textfield > label,
-  .has-error label {
+  .has-error label,
+  .has-error .mui-form__helptext {
     color: $mui-text-danger;
   }
 

diff --git a/baseframe/static/sass/mui/_custom.scss b/baseframe/static/sass/mui/_custom.scss
@@ -20,6 +20,7 @@ $mui-text-accent: #c0ccda !default;
 $mui-text-light: #4d5763 !default;
 $mui-text-danger: $mui-danger-color !default;
 $mui-text-hyperlink: #4a90e2 !default;
+$mui-text-white: #ffffff !default;
 
 // ============================================================================
 // GLOBAL VARIABLES