[ACS-8042] Fixed styles for inputs in library creation (#9751)

Alfresco · Jul 10, 2024 · bb8cb1e · bb8cb1e
1 parent 4ee1143
commit bb8cb1e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/lib/content-services/src/lib/dialogs/library/library.dialog.html b/lib/content-services/src/lib/dialogs/library/library.dialog.html
@@ -2,7 +2,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
 
 <mat-dialog-content class="adf-library-dialog-content">
   <form novalidate [formGroup]="form" (submit)="submit()">
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
       <input
         required
@@ -28,7 +28,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
       <input
         required
@@ -46,7 +46,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field adf-library-dialog-form-field-description">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
       <textarea
         matInput

diff --git a/lib/content-services/src/lib/dialogs/library/library.dialog.scss b/lib/content-services/src/lib/dialogs/library/library.dialog.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-library-dialog {
     .adf-library-dialog-content {
         padding: 0;
@@ -16,7 +18,47 @@
 
     .adf-library-dialog-form-field {
         width: 100%;
-        padding-top: 20px;
+        padding-top: 9.5px;
+
+        &:first-of-type {
+            padding-top: 13.5px;
+        }
+
+        &:last-of-type {
+            padding-top: 4.5px;
+        }
+
+        #{$mat-floating-label} {
+            -webkit-font-smoothing: subpixel-antialiased;
+        }
+
+        &#{$mat-form-field-hide-placeholder} {
+            #{$mat-floating-label} {
+                padding-top: 11px;
+            }
+        }
+
+        &-description {
+            &#{$mat-form-field-hide-placeholder} {
+                #{$mat-floating-label} {
+                    padding-top: 20px;
+                }
+            }
+        }
+
+        #{$mat-form-field-infix} {
+            padding-bottom: 3.5px;
+        }
+
+        #{$mat-form-field-error-wrapper} {
+            margin-left: -2px;
+            font-size: 10.5px;
+            -webkit-font-smoothing: subpixel-antialiased;
+
+            #{$mat-form-field-error} {
+                height: 13.125px;
+            }
+        }
     }
 
     .adf-action-buttons {

diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -99,6 +99,8 @@ $mat-text-field--no-label: '.mdc-text-field--no-label';
 $mat-form-field-infix: '.mat-mdc-form-field-infix';
 $mat-form-field-hide-placeholder: '.mat-form-field-hide-placeholder';
 $mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
+$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
+$mat-form-field-error: '.mat-mdc-form-field-error';
 $mat-checkbox-background: '.mdc-checkbox__background';
 $mat-dialog-content: '.mdc-dialog__content';
 $mat-floating-label: '.mdc-floating-label';