From dc5f651d2381cdc495518a2f17cf653e1fd5ddfe Mon Sep 17 00:00:00 2001
From: Cindy <cindy.nacibide@teamdlab.com>
Date: Tue, 15 Dec 2020 20:53:38 +0100
Subject: [PATCH] [US TRTL-517] refacto input css
---
.../editable-duration-input.component.html | 4 +-
.../editable-email-input.component.html | 4 +-
.../editable-file.component.html | 6 +-
.../editable-input.component.html | 4 +-
.../editable-level-input.component.html | 4 +-
.../editable-select.component.html | 4 +-
.../editable-textarea.component.html | 4 +-
.../editable-textarea.component.scss | 6 -
.../editable-toggle-group.component.html | 4 +-
.../level-input/level-input.component.scss | 58 +---------
.../multiple-email-input.component.html | 4 +-
.../item-select/item-select.component.scss | 2 +-
.../vitamui-input.component.html | 2 +-
.../vitamui-input.component.scss | 92 +---------------
.../vitamui-textarea.component.html | 2 +-
.../vitamui-textarea.component.scss | 90 ++-------------
.../vitamui-list-input.component.scss | 8 --
.../src/sass/_editable-field.scss | 46 ++------
ui/ui-frontend-common/src/sass/_file.scss | 14 +--
ui/ui-frontend-common/src/sass/_form.scss | 37 ++-----
ui/ui-frontend-common/src/sass/_input.scss | 103 ++++++++++++++++++
ui/ui-frontend-common/src/sass/_theme.scss | 5 +-
ui/ui-frontend-common/src/sass/material.scss | 1 +
.../src/sass/material/_input.scss | 9 ++
.../src/sass/material/_select.scss | 7 +-
.../editable-domain-input.component.html | 4 +-
.../editable-keystore.component.html | 6 +-
.../editable-patterns.component.html | 4 +-
.../projects/portal/src/sass/login.scss | 4 +-
.../projects/referential/src/sass/login.scss | 2 +-
.../components/inputs/inputs.component.html | 4 +-
.../vitamui-input.component.scss | 6 +-
32 files changed, 198 insertions(+), 352 deletions(-)
create mode 100644 ui/ui-frontend-common/src/sass/_input.scss
create mode 100644 ui/ui-frontend-common/src/sass/material/_input.scss
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 8992efca9..a4c931c53 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 70ffcbfed..b2baa437a 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 5ac775a91..638a182ef 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 89a66e972..cdb13ea4a 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 fdf0f43db..4815b08d5 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 d310ae5b0..8e3f73f27 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 daab80ef6..587cc9a85 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 8b5ae9097..d4b611a91 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 12f13e1b6..1c6423954 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 50825b7b2..8742030f6 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 c94cc18ce..f48175d17 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 adcaeb2bc..b01a51be3 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 b4e4a2b47..d1246797b 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 eb15c6dc4..cf1d10044 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 5b29394cb..317098eba 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 4ae6358d7..323deb1e4 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 a6a2c6238..1cf9d5693 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 dbdd345ea..5ecc0b69b 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 e99ae8538..5b2e64a39 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 39a874271..7ec41d349 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 000000000..d1c940fa8
--- /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 f1d68a2d1..1109efdf2 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 6fe558639..9e23c7961 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 000000000..760e46d85
--- /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 523a457c8..6a62a6f81 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 50d757f78..f7acb723e 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 03a166b71..7a3eae81c 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 07cc1d79e..0edd7e3f9 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 10866a4c2..f72bba73b 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 394ae7a22..dfadfeda6 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 83a436f5f..d9b1f43d5 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 ce4c76510..8e9cce527 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;
}
--
GitLab