diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-duration-input/editable-duration-input.component.html b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-duration-input/editable-duration-input.component.html
index 8992efca9ad13f9596b7e2ce3f7fb0f906dcf54f..a4c931c533ada3b82f3a3914ebde705015b92dab 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-duration-input/editable-duration-input.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-duration-input/editable-duration-input.component.html
@@ -1,8 +1,8 @@
<ng-container *ngIf="!disabled">
<div class="editable-field-wrapper" cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{ label }}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content">{{ control?.value | humanizedDuration}}</span>
<div class="editable-field-control vitamui-duration-input" [formGroup]="delaySlaForm">
<input type="number" class="days" formControlName="days" min="0"/><div class="unit">J</div>
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-email-input/editable-email-input.component.html b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-email-input/editable-email-input.component.html
index 70ffcbfede035a45d9ce898477dcc6a45a62d49f..b2baa437a2d37cdfb1ee94b06e2f7a3381b76851 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-email-input/editable-email-input.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-email-input/editable-email-input.component.html
@@ -1,9 +1,9 @@
<div class="editable-field-wrapper" *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{label}}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content">{{control?.value}}</span>
<div class="editable-field-control align" [formGroup]="formEmail">
<input type="text" formControlName="emailFirstPart">
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.html b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.html
index 5ac775a914f510eadefa2a55266003cd514ae14c..638a182efecc95e8e021aaf983d43f29cd406218 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.html
@@ -1,13 +1,13 @@
<div class="editable-field-wrapper" *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{label}}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content">{{control?.value?.name}}</span>
<div class="editable-field-control">
<div class="vitamui-input-file">
<label for="vitamui-input-file">
- <span class="vitamui-input-file-label" i18n="Upload the file@@editableFieldFileLabel">Uploader le fichier</span>
+ <span class="text-primary underline" i18n="Upload the file@@editableFieldFileLabel">Uploader le fichier</span>
<div class="vitamui-input-file-filename">{{file?.name}}</div>
</label>
<input id="vitamui-input-file" type="file" [accept]="accept" (change)="setFile($event.target.files)" #fileInput>
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-input/editable-input.component.html b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-input/editable-input.component.html
index 89a66e97204dd08048aecadb46ec98f5ada1de22..cdb13ea4a68e74b06d94aa00e3fd0746c656b438 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-input/editable-input.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-input/editable-input.component.html
@@ -1,8 +1,8 @@
<div class="editable-field-wrapper" *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{label}}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content">{{control?.value}}</span>
<div class="editable-field-control">
<input type="number" [formControl]="control" [maxlength]="maxlength" #input *ngIf="type === 'number'">
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-level-input/editable-level-input.component.html b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-level-input/editable-level-input.component.html
index fdf0f43db1b61bc21a9cb227f8984e7beef42ad6..4815b08d537a750b3ba591c11426bc05857fc878 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-level-input/editable-level-input.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-level-input/editable-level-input.component.html
@@ -1,8 +1,8 @@
<ng-container *ngIf="!disabled">
<div class="editable-field-wrapper" cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{label}}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content">
{{ control.value | subLevel:prefix }}
</span>
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.html b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.html
index d310ae5b07ffa9e08d1f9294bed7f0ddeac2547b..8e3f73f27b93f5706a08d318566aeed31466b82e 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.html
@@ -1,8 +1,8 @@
<div class="editable-field-wrapper" *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{label}}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content">{{content(control?.value)}}</span>
<div class="editable-field-control">
<mat-form-field class="vitamui-mat-select vitamui-mat-select-mini">
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.html b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.html
index daab80ef66be10b7127424c81db7598626e0b830..587cc9a85be0b5870168a6c04b19cb6d8d7bf9af 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.html
@@ -1,8 +1,8 @@
<div class="editable-field-wrapper" *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{label}}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content display-all">{{control?.value}}</span>
<div class="editable-field-control">
<textarea [formControl]="control" [maxlength]="maxlength" rows="3" #input></textarea>
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.scss b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.scss
index 8b5ae90978caedfe4b4600743ba39c9369c2258e..d4b611a915da7fd6113f184e24a1b01b1e31dc4d 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-textarea/editable-textarea.component.scss
@@ -1,9 +1,3 @@
-textarea {
- resize: vertical;
- width: 100%;
- height: 100%;
-}
-
.editable-field-content .editable-field-text-content.display-all {
white-space: normal;
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-toggle-group/editable-toggle-group.component.html b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-toggle-group/editable-toggle-group.component.html
index 12f13e1b6f27e88c4b23e5f761ac720134afd81e..1c6423954e202e59ad7c2ee57822993c07b5049d 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-toggle-group/editable-toggle-group.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-toggle-group/editable-toggle-group.component.html
@@ -1,8 +1,8 @@
<div class="editable-field-wrapper" *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{label}}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content">{{content(control?.value)}}</span>
<div class="editable-field-control">
<mat-button-toggle-group [formControl]="control" class="vitamui-button-toggle-group">
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/level-input/level-input.component.scss b/ui/ui-frontend-common/src/app/modules/components/editable-field/level-input/level-input.component.scss
index 50825b7b2feff319c455c39cca6e4f0eac39338e..8742030f66450f407bf4fabcb781e4820a36db10 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/level-input/level-input.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/level-input/level-input.component.scss
@@ -7,23 +7,8 @@ $anim-timing: 150ms ease-out;
:host {
display: inline-block;
- &.vitamui-focused .vitamui-input {
- border-color: var(--vitamui-primary);
- }
-
- &.vitamui-focused .vitamui-input,
- &.vitamui-float .vitamui-input {
- label {
- transform: scale(0.7) translateY(-15px);
- }
-
- input {
- margin-top: 15px;
- }
- }
-
&.ng-valid.ng-touched .vitamui-input {
- border-color: #43ea2a;
+ border-color: $green;
}
&.ng-invalid.ng-touched .vitamui-input {
@@ -32,25 +17,7 @@ $anim-timing: 150ms ease-out;
}
.vitamui-input {
- transition: border-color $anim-timing;
- border: solid 1px var(--vitamui-grey-300);
- border-radius: $input-height / 2;
- height: $input-height;
- position: relative;
- display: inline-flex;
- align-items: center;
- width: 100%;
- background-color: $white;
- padding: 7px 45px 7px 25px;
- vertical-align: top;
-}
-
-input {
- text-transform: uppercase;
-}
-
-.vitamui-input.disabled {
- opacity: 0.4;
+ height: $input-height !important;
}
:host.ng-pending {
@@ -59,30 +26,11 @@ input {
}
}
-.vitamui-input-errors {
- min-height: 30px;
-}
-
input {
-
+ text-transform: uppercase;
background: none;
border: none;
transition: margin $anim-timing;
outline: none;
width: 100%;
}
-
-label {
- color: var(--vitamui-grey-700);
- font-size: 14px;
- position: absolute;
- line-height: 48px;
- left: 25px;
- transform-origin: left;
- transition: transform $anim-timing;
- pointer-events: none;
-
- .required-marker {
- color: $red;
- }
-}
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/multiple-email-input/multiple-email-input.component.html b/ui/ui-frontend-common/src/app/modules/components/editable-field/multiple-email-input/multiple-email-input.component.html
index c94cc18cef573291837499e2f2eb045865fe20f1..f48175d170d8c4ad99ddd51ce6c6f3d09ad630f9 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/multiple-email-input/multiple-email-input.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/multiple-email-input/multiple-email-input.component.html
@@ -1,8 +1,8 @@
<ng-container *ngIf="!disabled">
<div class="editable-field-wrapper" cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{label}}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content">
<div *ngFor="let email of control.value">
{{ email }}
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.scss b/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.scss
index adcaeb2bc7e7e18b73b00ed166f1412894da85d1..b01a51be30f49255eb57454f7960ac931fb1dc51 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.scss
@@ -27,7 +27,7 @@
}
mat-form-field {
- border: 1px solid var(--vitamui-grey-300);
+ border: 1px solid var(--vitamui-grey-400);
background-color: white;
padding-left: 25px;
padding-right: 25px;
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.html b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.html
index b4e4a2b47bcdccfdd9e1643f5d5a5b628aa6fbfa..d1246797b9134c32123a6bf951e0f1c9dd6eb64b 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.html
@@ -5,7 +5,7 @@
</label>
<input #vitamUIInput [type]="type" [required]="required" [disabled]="disabled" [autofocus]="autofocus"
- [attr.maxlength]="maxlength" (blur)="onBlur()" (focus)="onFocus()" [(ngModel)]="value"
+ [attr.maxlength]="maxlength" (blur)="onBlur()" (focus)="onFocus()" [(ngModel)]="value"
(ngModelChange)="onValueChange($event)">
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss
index eb15c6dc4b21edde45bdac8ebcfec44cdb5c8d8e..cf1d100443552905ee293c86c1202ed23563aeff 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss
@@ -8,103 +8,15 @@ $anim-timing: 150ms ease-out;
:host {
display: inline-block;
- &.vitamui-focused .vitamui-input {
- border-color: var(--vitamui-primary);
- }
-
- &.vitamui-focused .vitamui-input,
- &.vitamui-float .vitamui-input {
- label {
- transform: scale(0.7) translateY(-15px);
- }
-
- input {
- margin-top: 15px;
- }
- }
-
&.ng-invalid .vitamui-input {
border-color: $red;
}
-}
-
-.vitamui-input {
- display: inline-flex;
- align-items: center;
- position: relative;
- height: $input-height;
- width: 100%;
- border-radius: $input-height / 2;
- border: solid 1px var(--vitamui-grey-400);
- background-color: $white;
- padding: 8px 30px;
- transition: border-color $anim-timing;
- vertical-align: top;
-
- &:hover:not(.disabled) {
- box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
- }
-
- &:focus {
- @include elevation-0;
-
- &:not(.disabled)
- {
- border: 1px solid var(--vitamui-grey-300);
- }
- }
-
- mat-spinner {
- position: absolute;
- top: 12px;
- right: 12px;
- display: none;
- }
-}
-
-.vitamui-input.disabled {
- background-color: var(--vitamui-grey-300);
- border: none;
- color: var(--vitamui-grey-300);
-}
-
-.vitamui-input.disabled, .vitamui-input.disabled > * {
- cursor: no-drop;
-}
-:host.ng-pending {
- .vitamui-input mat-spinner {
- display: block;
+ &.ng-pending .vitamui-input mat-spinner {
+ display: block;
}
}
.vitamui-input-errors {
min-height: 23px;
}
-
-input {
- color: var(--vitamui-grey-900);
- font-size: 14px;
- font-weight: 500;
-
- background: none;
- border: none;
- transition: margin $anim-timing;
- outline: none;
- width: 100%;
-}
-
-label {
- color: var(--vitamui-grey-600);
- font-size: 14px;
- position: absolute;
- left: 30px;
- transform-origin: left;
- transition: transform $anim-timing;
- pointer-events: none;
- white-space: nowrap;
-
- .required-marker {
- color: $red;
- }
-}
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-textarea.component.html b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-textarea.component.html
index 5b29394cbdb96d884c5009c6503c428dd4601263..317098ebad321e9c90472b6b342ceea1390ebbc5 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-textarea.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-textarea.component.html
@@ -1,4 +1,4 @@
-<div class="vitamui-textarea" [class.disabled]="disabled">
+<div class="vitamui-input" [class.disabled]="disabled">
<label>
{{placeholder}}
<span *ngIf="required" class="required-marker">*</span>
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-textarea.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-textarea.component.scss
index 4ae6358d748d538026ee7d6cdb9c4720e808c41e..323deb1e416ed8f39337b22b52a291be29a40065 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-textarea.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-textarea.component.scss
@@ -2,98 +2,32 @@
@import '../../../../sass/mixins/elevation';
$input-height: 90px;
-$input-small-height: 34px;
-$anim-timing: 150ms ease-out;
:host {
- display: inline-block;
-
- &.vitamui-focused .vitamui-textarea {
- border-color: $greyish-two;
+ align-items: baseline;
+ &.ng-valid.ng-touched .vitamui-input {
+ border-color: $green;
}
- &.vitamui-focused .vitamui-textarea,
- &.vitamui-float .vitamui-textarea {
- label {
- transform: scale(0.7) translateY(-15px);
- }
-
- textarea {
- margin-top: 15px;
- }
- }
-
- &.ng-valid.ng-touched .vitamui-textarea {
- border-color: #43ea2a;
- }
-
- &.ng-invalid.ng-touched .vitamui-textarea {
+ &.ng-invalid.ng-touched .vitamui-input {
border-color: $red;
}
}
-.vitamui-textarea {
- @include elevation-1;
- display: inline-flex;
- align-items: center;
- position: relative;
- width: 100%;
- border-radius: 25px;
- border: solid 1px #f0f0f0;
- background-color: $white;
- padding: 8px 30px;
- transition: border-color $anim-timing;
- vertical-align: top;
-
- mat-spinner {
- position: absolute;
- top: 12px;
- right: 12px;
- display: none;
- }
-}
-
-.vitamui-textarea.disabled {
- border: none;
- background-color: var(--vitamui-grey-300);
+.vitamui-input {
+ border-radius: 25px !important;
+ height: 100% !important;
+ min-height: $input-height !important;
}
:host.ng-pending {
- .vitamui-textarea mat-spinner {
+ .vitamui-input mat-spinner {
display: block;
}
}
-.vitamui-input-errors {
- min-height: 30px;
-}
-
-textarea {
- color: var(--vitamui-grey-700);
- font-size: 14px;
- font-weight: 500;
-
- background: none;
- border: none;
- transition: margin $anim-timing;
- outline: none;
- width: 100%;
- resize: none;
-}
-
-label {
- color: var(--vitamui-grey-600);
-
- font-size: 14px;
- position: absolute;
- line-height: 48px;
- left: 30px;
- top: 5px;
- transform-origin: left;
- transition: transform $anim-timing;
+label{
+ top: 15px;
pointer-events: none;
-
- .required-marker {
- color: $red;
- }
}
+
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-list-input/vitamui-list-input.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-list-input/vitamui-list-input.component.scss
index a6a2c6238cc820afc4023665bc7b70fee005ad99..1cf9d569319b8db5b3e1afe82d782f55b26035f8 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-list-input/vitamui-list-input.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-list-input/vitamui-list-input.component.scss
@@ -31,10 +31,6 @@ mat-chip span {
}
}
-input.vitamui-input {
- width: 100%;
-}
-
.vitamui-chip-list {
margin-bottom: 20px;
padding-left: 34px;
@@ -63,10 +59,6 @@ input.vitamui-input {
}
-.vitamui-input-errors {
- min-height: 20px;
-}
-
.required-marker {
color: $red;
}
diff --git a/ui/ui-frontend-common/src/sass/_editable-field.scss b/ui/ui-frontend-common/src/sass/_editable-field.scss
index dbdd345ea3f06a71b1aab375b4d5a17e9889f6f6..5ecc0b69b3add20f3f098f27d27ebb8e6eaa62e9 100644
--- a/ui/ui-frontend-common/src/sass/_editable-field.scss
+++ b/ui/ui-frontend-common/src/sass/_editable-field.scss
@@ -13,18 +13,9 @@ $anim-timing: 150ms ease-out;
}
.editable-field {
- display: inline-flex;
- align-items: center;
justify-content: space-between;
- position: relative;
min-height: $input-height;
- width: 100%;
- border-radius: $input-height / 2;
- border: 1px solid var(--vitamui-grey-400);
- background-color: $white;
- padding: 7px 45px 7px 25px;
- transition: border-color $anim-timing;
- vertical-align: top;
+ width: 100% !important;
cursor: pointer;
outline: none;
@@ -42,7 +33,7 @@ $anim-timing: 150ms ease-out;
}
&:hover:not(.edit-mode), &:focus:not(.edit-mode) {
- @include elevation-1;
+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
i.edit-icon {
opacity: 1;
@@ -59,23 +50,10 @@ $anim-timing: 150ms ease-out;
position: relative;
max-width: 100%;
- .editable-field-label {
-
- position: absolute;
- font-size: 12px;
- color: var(--vitamui-grey-400);
- letter-spacing: 0.4px;
- line-height: 16px;
- transform-origin: left;
- transition: transform $anim-timing;
- white-space: nowrap;
- }
-
.editable-field-text-content {
- margin-top: 16px;
+ margin-top: 15px;
width: 100%;
line-height: 24px;
- color: var(--vitamui-grey-900);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -83,13 +61,11 @@ $anim-timing: 150ms ease-out;
.editable-field-control {
display: none;
- height: 100%;
}
.editable-field-control > input {
-
- border: none!important;
margin-top: 5px;
+ padding: 0px;
&:focus {
outline: none;
@@ -97,7 +73,6 @@ $anim-timing: 150ms ease-out;
}
.editable-field-control > textarea {
-
border: none!important;
&:focus {
@@ -108,11 +83,14 @@ $anim-timing: 150ms ease-out;
.editable-field.edit-mode {
border-color: var(--vitamui-primary);
- padding: 15px 10px 5px 20px;
+ padding: 15px 10px 5px 30px;
.editable-field-content {
- .editable-field-label {
- transform: scale((11 / 13)) translateY(-14px);
+
+ > label:first-of-type {
+ transform: scale((12 / 14)) translateY(-15px);
+ letter-spacing: 0.4px;
+ line-height: 16px;
}
.editable-field-text-content {
@@ -131,14 +109,14 @@ $anim-timing: 150ms ease-out;
border-radius: $input-height / 2;
padding: 10px;
background-color: white;
- box-shadow: 0 0 20px 0 rgba(169, 169, 169, 0.3);
+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
z-index: 1;
margin: 10px 0 10px 10px;
display: flex;
justify-content: space-between;
button {
- @include elevation-1;
+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
background: none;
border: none;
color: white;
diff --git a/ui/ui-frontend-common/src/sass/_file.scss b/ui/ui-frontend-common/src/sass/_file.scss
index e99ae85387653a198eb93366a56d62b859b54637..5b2e64a39fd0ec51c38a5bad60aa31b45f528637 100644
--- a/ui/ui-frontend-common/src/sass/_file.scss
+++ b/ui/ui-frontend-common/src/sass/_file.scss
@@ -1,22 +1,14 @@
.vitamui-input-file {
label {
- font-size: 14px;
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
+ position: unset !important;
}
- label > .vitamui-input-file-label {
- font-size: 14px;
- font-weight: 500;
- color: var(--vitamui-primary);
- text-decoration: underline;
- cursor: pointer;
- }
-
- input[type=file] {
- display: none;
+ input[type="file"] {
+ visibility: hidden;
}
}
diff --git a/ui/ui-frontend-common/src/sass/_form.scss b/ui/ui-frontend-common/src/sass/_form.scss
index 39a874271cb700722f4c78b8dd6ffd1ba5fbdb56..7ec41d349b9e726ced6b24e29f0ef99eeca59784 100644
--- a/ui/ui-frontend-common/src/sass/_form.scss
+++ b/ui/ui-frontend-common/src/sass/_form.scss
@@ -5,16 +5,15 @@
padding: 5px;
vertical-align: top;
margin-bottom: 10px;
-
+ font-weight: 400;
label {
- font-size: 12px;
+ font-size: 14px;
color: var(--vitamui-grey-600);
- font-weight: 500;
}
div {
- font-weight: 500;
+ color: var(--vitamui-grey-900);
}
}
@@ -24,61 +23,47 @@
font-size: 12px;
font-weight: 400;
color: $red;
-
}
input[type=text].vitamui-input,
input[type=password].vitamui-input,
input[type=email].vitamui-input {
- border: none;
outline: none;
- border-radius: 25px;
- transition: border-color 200ms ease-out;
- height: 50px;
padding: 0 30px;
- border: 1px solid var(--vitamui-grey-400);
width: 100%;
max-width: 300px;
- @include elevation-0;
-
- &:focus {
- border-color: $greyish-two;
- }
+ border: solid 1px var(--vitamui-grey-400);
&.ng-valid.ng-touched {
- border-color: #43ea2a;
+ border-color: $green;
}
&.ng-invalid.ng-touched {
border-color: $red;
}
-
- &[disabled] {
- opacity: 0.4;
- }
-
+
&.vitamui-small {
height: 34px;
border-radius: 17px;
}
&::-webkit-input-placeholder {
- color: $greyish-two;
+ color: var(--vitamui-grey-600);
font-weight: 400;
}
&::-moz-placeholder {
- color: $greyish-two;
+ color: var(--vitamui-grey-600);
font-weight: 400;
}
&:-ms-input-placeholder {
- color: $greyish-two;
+ color: var(--vitamui-grey-600);
font-weight: 400;
}
&:-moz-placeholder {
- color: $greyish-two;
+ color: var(--vitamui-grey-600);
font-weight: 400;
}
-}
+}
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/sass/_input.scss b/ui/ui-frontend-common/src/sass/_input.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d1c940fa8b06dec9bb673b6b2dd9943b0ddb0e77
--- /dev/null
+++ b/ui/ui-frontend-common/src/sass/_input.scss
@@ -0,0 +1,103 @@
+$anim-timing: 150ms ease-out;
+
+.vitamui-input {
+ display: inline-flex;
+ align-items: center;
+ position: relative;
+ width: 100%;
+ border-radius: 87px;
+ border: solid 1px var(--vitamui-grey-400);
+ background-color: $white;
+ padding: 8px 30px;
+ transition: border-color $anim-timing;
+ vertical-align: top;
+
+ &:not(.editable-field) {
+ height: 50px;
+ }
+
+ &:hover:not(.disabled) {
+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
+ }
+
+ &:focus {
+ @include elevation-0;
+
+ &:not(.disabled) {
+ border: 1px solid var(--vitamui-primary);
+ }
+ }
+
+ label {
+ position: absolute;
+ font-size: 14px;
+ font-weight: 400;
+ color: var(--vitamui-grey-600);
+ letter-spacing: 0.1px;
+ line-height: 22px;
+ white-space: nowrap;
+ transform-origin: left;
+ transition: transform $anim-timing;
+
+ .required-marker {
+ color: $red;
+ }
+ }
+
+
+ input, textarea {
+ font-size: 16px;
+ font-weight: 400;
+ background: none;
+ border: none;
+ outline: none;
+ }
+
+ input{
+ line-height: 24px;
+ transform-origin: left;
+ transition: margin $anim-timing;
+ }
+
+ textarea {
+ resize: none;
+ width: 100%;
+ height: 100%;
+ }
+
+ &.disabled {
+ background-color: var(--vitamui-grey-300);
+ border: none;
+ }
+
+ &.disabled > * {
+ cursor: no-drop;
+
+ input {
+ color: var(--vitamui-grey-700);
+ }
+ }
+}
+
+.vitamui-focused .vitamui-input {
+ border-color: var(--vitamui-primary);
+}
+
+.vitamui-focused .vitamui-input,
+.vitamui-float .vitamui-input {
+ label:first-of-type {
+ transform: scale((12 / 14)) translateY(-12px);
+ letter-spacing: 0.4px;
+ line-height: 16px;
+ }
+
+ input {
+ margin-top: 15px;
+ padding: 0px;
+ }
+ textarea {
+ margin-top: 25px;
+ padding: 0px;
+ }
+}
+
diff --git a/ui/ui-frontend-common/src/sass/_theme.scss b/ui/ui-frontend-common/src/sass/_theme.scss
index f1d68a2d19a6d1b66d95a33b882371264dd07800..1109efdf280af11048c9602435a00c5ab47be492 100644
--- a/ui/ui-frontend-common/src/sass/_theme.scss
+++ b/ui/ui-frontend-common/src/sass/_theme.scss
@@ -10,6 +10,7 @@
@import "file";
@import "form";
@import "icon";
+@import "input";
@import "layout";
@import "modal";
@import "navbar";
@@ -73,10 +74,10 @@ body {
margin: 0;
font-family: 'Mulish', sans-serif;
background-color: var(--vitamui-background);
- color: black;
+ color: var(--vitamui-grey-900);
}
-button {
+button, textarea, input {
font-family: 'Mulish', sans-serif;
}
diff --git a/ui/ui-frontend-common/src/sass/material.scss b/ui/ui-frontend-common/src/sass/material.scss
index 6fe558639537511fb59a300d435f0a0568eaede5..9e23c79615fb5ac9bd86bf118f813c0f0c06ff58 100644
--- a/ui/ui-frontend-common/src/sass/material.scss
+++ b/ui/ui-frontend-common/src/sass/material.scss
@@ -4,6 +4,7 @@
@import "material/dialog";
@import "material/form-field";
@import "material/icon";
+@import "material/input";
@import "material/menu";
@import "material/modal";
@import "material/preview-tab";
diff --git a/ui/ui-frontend-common/src/sass/material/_input.scss b/ui/ui-frontend-common/src/sass/material/_input.scss
new file mode 100644
index 0000000000000000000000000000000000000000..760e46d8589887ac334f0f64854379baf511e0f2
--- /dev/null
+++ b/ui/ui-frontend-common/src/sass/material/_input.scss
@@ -0,0 +1,9 @@
+.vitamui-input {
+
+ mat-spinner {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/sass/material/_select.scss b/ui/ui-frontend-common/src/sass/material/_select.scss
index 523a457c8245619439c4cb94cfa9011d810e4920..6a62a6f8148e608005c51571b8c1bba29c269b13 100644
--- a/ui/ui-frontend-common/src/sass/material/_select.scss
+++ b/ui/ui-frontend-common/src/sass/material/_select.scss
@@ -83,6 +83,7 @@
&.mat-form-field-disabled {
.mat-form-field-flex {
background-color: var(--vitamui-grey-300);
+ border: none;
.mat-select .mat-select-value {
font-weight: normal;
@@ -108,7 +109,7 @@
.mat-form-field-flex {
padding-right: 15px;
- border: 1px solid var(--vitamui-grey-300);
+ border: 1px solid var(--vitamui-grey-400);
.mat-form-field-infix {
border-top-width: 0;
@@ -117,10 +118,6 @@
width: 100%;
}
- .mat-select .mat-select-value {
-
- }
-
.mat-select .mat-select-arrow-wrapper {
visibility: hidden;
}
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-domain-input/editable-domain-input.component.html b/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-domain-input/editable-domain-input.component.html
index 50d757f788c1765ebf8f2d9cebafb96ffcac57b4..f7acb723e321519646c34f5e766172152dd02ec3 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-domain-input/editable-domain-input.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-domain-input/editable-domain-input.component.html
@@ -1,8 +1,8 @@
<ng-container *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{label}}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content">
<div *ngFor="let domain of control.value">
{{domain}} <ng-container *ngIf="domain===defaultDomain" i18n="By default@@emailDomainInputByDefault">(par défaut)</ng-container>
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-keystore/editable-keystore.component.html b/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-keystore/editable-keystore.component.html
index 03a166b71cf771bdf898f8983f8e3c1a55f8f3de..7a3eae81c3af338bc1b6d48d253d1bd5d8bc642e 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-keystore/editable-keystore.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-keystore/editable-keystore.component.html
@@ -1,14 +1,14 @@
<ng-container *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label" i18n="Keystore@@idpFormLabelKeystore">Keystore de CAS</span>
+ <label i18n="Keystore@@idpFormLabelKeystore">Keystore de CAS</label>
<span class="editable-field-text-content">{{ originValue?.name }}</span>
<div class="editable-field-control">
<div class="vitamui-input-file">
<label for="vitamui-input-keystore">
- <span class="vitamui-input-file-label" i18n="Upload the file@@editableFieldFileLabel">Uploader le fichier</span>
+ <span class="text-primary underline" i18n="Upload the file@@editableFieldFileLabel">Uploader le fichier</span>
<div class="vitamui-input-file-filename">{{file?.name}}</div>
</label>
<input id="vitamui-input-keystore" type="file" (change)="setFile($event.target.files)" accept=".jks" #fileInput>
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-patterns/editable-patterns.component.html b/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-patterns/editable-patterns.component.html
index 07cc1d79ec1ca9454761f3f0d6a7d76569fe066a..0edd7e3f9750095a94d985b9be473577c5717e5b 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-patterns/editable-patterns.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-patterns/editable-patterns.component.html
@@ -1,8 +1,8 @@
<ng-container *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
- <span class="editable-field-label">{{label}}</span>
+ <label>{{label}}</label>
<span class="editable-field-text-content">
<div *ngFor="let pattern of control.value">{{pattern}}</div>
</span>
diff --git a/ui/ui-frontend/projects/portal/src/sass/login.scss b/ui/ui-frontend/projects/portal/src/sass/login.scss
index 10866a4c27db80ecee6a33fb875f3d1c7dddf6dd..f72bba73b9c6fe1402cbcc82d6b62474f09eaabb 100644
--- a/ui/ui-frontend/projects/portal/src/sass/login.scss
+++ b/ui/ui-frontend/projects/portal/src/sass/login.scss
@@ -51,11 +51,11 @@
border: 1px solid transparent;
&:focus {
- border-color: $greyish-two;
+ border-color: var(--vitamui-primary);
}
&.ng-valid.ng-touched {
- border-color: #43ea2a;
+ border-color: $green;
}
&.ng-invalid.ng-touched {
diff --git a/ui/ui-frontend/projects/referential/src/sass/login.scss b/ui/ui-frontend/projects/referential/src/sass/login.scss
index 394ae7a22f259c9a881f2e365aaedbdd71192337..dfadfeda635c8b17d3d910311c600b0575f8b886 100644
--- a/ui/ui-frontend/projects/referential/src/sass/login.scss
+++ b/ui/ui-frontend/projects/referential/src/sass/login.scss
@@ -53,7 +53,7 @@
}
&.ng-valid.ng-touched {
- border-color: #43ea2a;
+ border-color: $green;
}
&.ng-invalid.ng-touched {
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.html
index 83a436f5f60d6db7559142635f318b34458a68ed..d9b1f43d59b03ab5bc3ca4aae3961f8cd5d81e0a 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.html
@@ -46,7 +46,7 @@
</div>
<div class="row m-0">
<div class="col-8">
- <vitamui-common-multiple-email-input [formControl]="emails" [label]="'Editale multiple email input'">
+ <vitamui-common-multiple-email-input [formControl]="emails" [label]="'Editable multiple email input'">
</vitamui-common-multiple-email-input>
</div>
<vitamui-common-multiple-email-input [formControl]="emails"
@@ -117,7 +117,7 @@
<vitamui-common-textarea [formControl]="textarea" placeholder="Textarea" disabled>
</vitamui-common-textarea>
</div>
- <div class="row m-0">
+ <div class="row m-0 mt-4">
<div class="col-8">
<vitamui-common-editable-textarea [formControl]="textarea" [label]="'Editable textarea'">
</vitamui-common-editable-textarea>
diff --git a/ui/ui-frontend/projects/vitamui-library/src/lib/components/vitamui-input/vitamui-input.component.scss b/ui/ui-frontend/projects/vitamui-library/src/lib/components/vitamui-input/vitamui-input.component.scss
index ce4c765108054967f5174722b9bf442d10db1533..8e9cce527ba4c7cf59180059abc71a3379445bfa 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/lib/components/vitamui-input/vitamui-input.component.scss
+++ b/ui/ui-frontend/projects/vitamui-library/src/lib/components/vitamui-input/vitamui-input.component.scss
@@ -24,11 +24,11 @@ $anim-timing: 150ms ease-out;
}
&.ng-valid.ng-touched .vitamui-input {
- border-color: #43ea2a;
+ border-color: $green;
}
&.ng-invalid.ng-touched .vitamui-input {
- border-color: #ff0000;
+ border-color: $red;
}
}
@@ -59,7 +59,7 @@ $anim-timing: 150ms ease-out;
margin-bottom: 10px;
}
-:host.ng-pending {
+:host {
.vitamui-input mat-spinner {
display: block;
}