From de534dc07d3ec23674bd01262270bfd3dad996be Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Tue, 21 Jan 2020 19:55:19 +0100
Subject: [PATCH] Styling fixes for forms.

---
 .../pages/schemas/schema-form.component.html  |  2 +-
 frontend/app/theme/_forms.scss                | 23 ++++++-------------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/frontend/app/features/schemas/pages/schemas/schema-form.component.html b/frontend/app/features/schemas/pages/schemas/schema-form.component.html
index f3e399fc3..291b137a3 100644
--- a/frontend/app/features/schemas/pages/schemas/schema-form.component.html
+++ b/frontend/app/features/schemas/pages/schemas/schema-form.component.html
@@ -11,7 +11,7 @@
         </ng-container>
 
         <ng-container content>
-            <sqx-form-error closeable="true" [error]="createForm.error | async"></sqx-form-error>
+            <sqx-form-error [error]="createForm.error | async"></sqx-form-error>
         
             <div class="form-group">
                 <label for="schemaName">Name <small class="hint">(required)</small></label>
diff --git a/frontend/app/theme/_forms.scss b/frontend/app/theme/_forms.scss
index 15700d220..1676cb219 100644
--- a/frontend/app/theme/_forms.scss
+++ b/frontend/app/theme/_forms.scss
@@ -32,28 +32,19 @@
 
     // Small triangle under the error tooltip with the border trick.
     &::after {
-        @include absolute(auto, auto, -.75rem, .625rem);
-        border-color: $color-theme-error transparent transparent;
-        border-style: solid;
-        border-width: .4rem;
-        content: '';
-        height: 0;
-        width: 0;
+        @include absolute(null, null, -.75rem, .625rem);
+        @include caret-bottom($color-theme-error, .4rem);
     }
 
     // The tooltip rectangle itself.
     & {
-        @include absolute(auto, auto, .4rem, 0);
+        @include absolute(null, null, .4rem, 0);
         @include border-radius(2px);
         background: $color-theme-error;
         color: $color-dark-foreground;
-        cursor: none;
-        display: inline-block;
         font-size: .9rem;
         font-weight: normal;
-        line-height: 1.1rem;
-        padding: .25rem .4rem;
-        padding-bottom: .5rem;
+        padding: .25rem .5rem;
     }
 }
 
@@ -74,7 +65,7 @@
         color: $color-dark-foreground;
         font-size: .9rem;
         font-weight: normal;
-        margin-bottom: .8rem;
+        margin-bottom: .75rem;
         margin-top: .25rem;
         padding: .5rem;
         padding-right: 1.5rem;
@@ -185,10 +176,10 @@
         }
 
         &:hover {
-            background: $color-theme-blue-dark;
+            background: $color-theme-blue;
 
             &.separated {
-                border-color: $color-theme-blue-dark;
+                border-color: $color-theme-blue;
             }
         }