From 5f0522b30ece45957f3a8f8b8b37155c5432d737 Mon Sep 17 00:00:00 2001
From: Cindy <cindy.nacibide@teamdlab.com>
Date: Thu, 17 Dec 2020 23:43:50 +0100
Subject: [PATCH] [US TRTL-621] Update with new style
---
.../editable-select.component.scss | 2 +-
.../editable-textarea.component.html | 4 +-
.../level-input/level-input.component.scss | 6 +-
.../multiple-email-input.component.html | 2 +-
.../vitamui-autocomplete.component.scss | 22 +++---
.../vitamui-duration-input.component.scss | 7 +-
...tamui-input-positive-number.component.scss | 73 +-----------------
.../vitamui-input.component.scss | 3 +-
.../vitamui-textarea.component.html | 2 +-
.../vitamui-textarea.component.scss | 6 +-
.../vitamui-list-input.component.scss | 4 +-
.../src/sass/_editable-field.scss | 25 +++----
ui/ui-frontend-common/src/sass/_form.scss | 20 +++--
ui/ui-frontend-common/src/sass/_input.scss | 31 ++++----
ui/ui-frontend-common/src/sass/_preview.scss | 2 +-
.../src/sass/material/_select.scss | 24 +++---
.../editable-domain-input.component.html | 2 +-
.../editable-keystore.component.html | 2 +-
.../profiles-form.component.scss | 2 +-
.../projects/identity/src/sass/login.scss | 2 +-
.../referential/src/sass/_sidepanel.scss | 6 +-
.../components/inputs/inputs.component.html | 28 +++----
.../app/components/inputs/inputs.component.ts | 3 +-
.../projects/starter-kit/src/sass/login.scss | 2 +-
.../vitamui-input.component.scss | 75 +------------------
25 files changed, 106 insertions(+), 249 deletions(-)
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.scss b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.scss
index 7486a86e6..13dc00a19 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-select/editable-select.component.scss
@@ -1,3 +1,3 @@
.editable-field {
- max-height: 50px;
+ height: 60px;
}
\ No newline at end of file
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 587cc9a85..205ab6c46 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,6 +1,6 @@
<div class="editable-field-wrapper" *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="vitamui-input editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
<label>{{label}}</label>
<span class="editable-field-text-content display-all">{{control?.value}}</span>
@@ -33,7 +33,7 @@
</div>
-<div *ngIf="disabled" class="read-only-field squarish">
+<div *ngIf="disabled" class="read-only-field">
<label>{{label}}</label>
<div>{{control?.value}}</div>
</div>
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 8742030f6..156aacee7 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
@@ -1,6 +1,6 @@
@import '../../../../../sass/variables/colors';
-$input-height: 50px;
+$input-height: 60px;
$input-small-height: 34px;
$anim-timing: 150ms ease-out;
@@ -8,11 +8,11 @@ $anim-timing: 150ms ease-out;
display: inline-block;
&.ng-valid.ng-touched .vitamui-input {
- border-color: $green;
+ border: 1px solid $green;
}
&.ng-invalid.ng-touched .vitamui-input {
- border-color: $red;
+ border: 1px solid $red;
}
}
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 f48175d17..164e5f06d 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,6 +1,6 @@
<ng-container *ngIf="!disabled">
<div class="editable-field-wrapper" cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="vitamui-input editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
<label>{{label}}</label>
<span class="editable-field-text-content">
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-autocomplete/vitamui-autocomplete.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-autocomplete/vitamui-autocomplete.component.scss
index 0a19e89d5..93700a3a8 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-autocomplete/vitamui-autocomplete.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-autocomplete/vitamui-autocomplete.component.scss
@@ -9,10 +9,11 @@ $animation-time: 150ms;
> input {
background: $white;
box-sizing: border-box;
- border-radius: 87px;
+ border-radius: 4px;
background-color: $white;
- border: solid 1px var(--vitamui-grey-400);
- height: 50px;
+ border: none;
+ box-shadow: 0px 4px 24px rgba(46, 53, 69, 0.25);
+ height: 60px;
width: 100%;
padding: 10px 40px 10px 29px;
transition: padding $animation-time ease-out;
@@ -21,10 +22,6 @@ $animation-time: 150ms;
outline: none;
border: solid 1px var(--vitamui-primary);
}
-
- &:hover {
- box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
- }
}
&.disabled {
@@ -53,28 +50,29 @@ $animation-time: 150ms;
.input-label {
font-size: 14px;
+ font-weight: 700;
align-items: center;
letter-spacing: 0.1px;
- line-height: 22px;
+ line-height: 10px;
position: absolute;
left: 30px;
top: 16px;
pointer-events: none;
transform-origin: left;
- color: var(--vitamui-grey-600);
+ color: var(--vitamui-primary);
transition: transform $animation-time ease-out, top $animation-time ease-out;
}
&.label-up {
.input-label {
- transform: scale(0.7) translateY(-15px);
+ transform: scale((12/14)) translateY(-15px);
}
> input {
padding-top: 30px;
- font-size: 14px;
- font-weight: bold;
+ font-size: 16px;
+ font-weight: 700;
color: var(--vitamui-grey-900);
}
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-duration-input/vitamui-duration-input.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-duration-input/vitamui-duration-input.component.scss
index 41a558a64..1b897c241 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-duration-input/vitamui-duration-input.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-duration-input/vitamui-duration-input.component.scss
@@ -6,11 +6,10 @@
display:flex;
justify-content: center; /* align horizontal */
align-items: center;
- border-radius: 87px;
- box-shadow: 0 0 20px 0 #a9a9a94d;
+ border-radius: 4px;
+ box-shadow: 0px 4px 24px rgba(46, 53, 69, 0.25);
background-color: $white;
- background-color: var(--white);
- border: solid 1px #f0f0f0;
+ border: none;
}
.unite {
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.scss
index a8ef43d78..1e49ce028 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.scss
@@ -1,63 +1,22 @@
@import '../../../../sass/variables/colors';
@import '../../../../sass/mixins/elevation';
-$input-height: 50px;
+$input-height: 60px;
$input-small-height: 34px;
$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: 1px solid $green;
}
&.ng-invalid.ng-touched .vitamui-input {
- border-color: #ff0000;
- }
-}
-
-.vitamui-input {
- display: inline-flex;
- align-items: center;
- position: relative;
- height: $input-height;
- width: 100%;
- border-radius: $input-height / 2;
- border: solid 1px #f0f0f0;
- background-color: #ffffff;
- padding: 8px 30px;
- transition: border-color $anim-timing;
- vertical-align: top;
- @include elevation-1;
-
- mat-spinner {
- position: absolute;
- top: 12px;
- right: 12px;
- display: none;
+ border: 1px solid $red;
}
}
-.vitamui-input.disabled {
- opacity: 0.4;
-}
-
:host.ng-pending {
.vitamui-input mat-spinner {
display: block;
@@ -68,29 +27,3 @@ $anim-timing: 150ms ease-out;
min-height: 30px;
}
-input {
- color: $charcoal-grey;
- font-size: 14px;
- font-weight: 500;
-
- background: none;
- border: none;
- transition: margin $anim-timing;
- outline: none;
- width: 100%;
-}
-
-label {
- color: $greyish-two;
- 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-input.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss
index cf1d10044..afe9679af 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
@@ -1,7 +1,6 @@
@import '../../../../sass/variables/colors';
@import '../../../../sass/mixins/elevation';
-$input-height: 50px;
$input-small-height: 34px;
$anim-timing: 150ms ease-out;
@@ -9,7 +8,7 @@ $anim-timing: 150ms ease-out;
display: inline-block;
&.ng-invalid .vitamui-input {
- border-color: $red;
+ border: 1px solid $red;
}
&.ng-pending .vitamui-input mat-spinner {
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 317098eba..530c475dc 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,5 +1,5 @@
<div class="vitamui-input" [class.disabled]="disabled">
- <label>
+ <label class="mt-1">
{{placeholder}}
<span *ngIf="required" class="required-marker">*</span>
</label>
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 323deb1e4..1e11eef52 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
@@ -5,17 +5,17 @@ $input-height: 90px;
:host {
align-items: baseline;
+
&.ng-valid.ng-touched .vitamui-input {
- border-color: $green;
+ border: 1px solid $green;
}
&.ng-invalid.ng-touched .vitamui-input {
- border-color: $red;
+ border: 1px solid $red;
}
}
.vitamui-input {
- border-radius: 25px !important;
height: 100% !important;
min-height: $input-height !important;
}
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 1cf9d5693..4fa4893c0 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
@@ -32,8 +32,8 @@ mat-chip span {
}
.vitamui-chip-list {
- margin-bottom: 20px;
- padding-left: 34px;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
}
:host.list-input-mini {
diff --git a/ui/ui-frontend-common/src/sass/_editable-field.scss b/ui/ui-frontend-common/src/sass/_editable-field.scss
index 5ecc0b69b..80ddb8710 100644
--- a/ui/ui-frontend-common/src/sass/_editable-field.scss
+++ b/ui/ui-frontend-common/src/sass/_editable-field.scss
@@ -1,4 +1,3 @@
-$input-height: 50px;
$anim-timing: 150ms ease-out;
.editable-field-wrapper {
@@ -14,7 +13,7 @@ $anim-timing: 150ms ease-out;
.editable-field {
justify-content: space-between;
- min-height: $input-height;
+ min-height: 60px;
width: 100% !important;
cursor: pointer;
outline: none;
@@ -33,7 +32,6 @@ $anim-timing: 150ms ease-out;
}
&:hover:not(.edit-mode), &:focus:not(.edit-mode) {
- box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
i.edit-icon {
opacity: 1;
@@ -53,7 +51,8 @@ $anim-timing: 150ms ease-out;
.editable-field-text-content {
margin-top: 15px;
width: 100%;
- line-height: 24px;
+ font-weight: 700;
+ line-height: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -105,8 +104,8 @@ $anim-timing: 150ms ease-out;
.editable-field-actions {
width: 85px;
- height: $input-height;
- border-radius: $input-height / 2;
+ height: 50px;
+ border-radius: 25px;
padding: 10px;
background-color: white;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
@@ -120,10 +119,10 @@ $anim-timing: 150ms ease-out;
background: none;
border: none;
color: white;
- height: $input-height - 20px;
- width: $input-height - 20px;
+ height: 30px;
+ width: 30px;
padding: 0;
- border-radius: ($input-height - 10px) / 2;
+ border-radius: 20px;
transition: opacity 200ms ease-out, background-color 200ms ease-out;
&:disabled {
@@ -135,18 +134,18 @@ $anim-timing: 150ms ease-out;
}
&.editable-field-confirm {
- background-color: #74c41c;
+ background-color: $green;
&:hover, &:active, &:focus {
- background-color: lighten(#74c41c, 15%);
+ background-color: lighten($green, 15%);
}
}
&.editable-field-cancel {
- background-color: #ea0101;
+ background-color: $red;
&:hover, &:active, &:focus {
- background-color: lighten(#ea0101, 15%);
+ background-color: lighten($red, 15%);
}
}
}
diff --git a/ui/ui-frontend-common/src/sass/_form.scss b/ui/ui-frontend-common/src/sass/_form.scss
index 7ec41d349..77e4d633f 100644
--- a/ui/ui-frontend-common/src/sass/_form.scss
+++ b/ui/ui-frontend-common/src/sass/_form.scss
@@ -1,6 +1,6 @@
.read-only-field {
display: inline-block;
- min-height: 50px;
+ min-height: 60px;
width: 100%;
padding: 5px;
vertical-align: top;
@@ -8,12 +8,14 @@
font-weight: 400;
label {
- font-size: 14px;
- color: var(--vitamui-grey-600);
+ font-size: 12px;
+ font-weight: 700;
+ color: var(--vitamui-primary);
}
div {
color: var(--vitamui-grey-900);
+ font-weight: 700;
}
}
@@ -32,19 +34,23 @@ input[type=email].vitamui-input {
padding: 0 30px;
width: 100%;
max-width: 300px;
- border: solid 1px var(--vitamui-grey-400);
+ border: none;
+ box-shadow: 0px 4px 24px rgba(46, 53, 69, 0.25);
+ border-radius: 4px;
+ font-size: 16px;
+ font-weight: 700;
&.ng-valid.ng-touched {
- border-color: $green;
+ border: 1px solid $green;
}
&.ng-invalid.ng-touched {
- border-color: $red;
+ border: 1px solid $red;
}
&.vitamui-small {
height: 34px;
- border-radius: 17px;
+ border-radius: 4px;
}
&::-webkit-input-placeholder {
diff --git a/ui/ui-frontend-common/src/sass/_input.scss b/ui/ui-frontend-common/src/sass/_input.scss
index d1c940fa8..1937a1b8d 100644
--- a/ui/ui-frontend-common/src/sass/_input.scss
+++ b/ui/ui-frontend-common/src/sass/_input.scss
@@ -5,19 +5,19 @@ $anim-timing: 150ms ease-out;
align-items: center;
position: relative;
width: 100%;
- border-radius: 87px;
- border: solid 1px var(--vitamui-grey-400);
- background-color: $white;
+ border-radius: 4px;
+ border: none;
+ background-color: white;
padding: 8px 30px;
transition: border-color $anim-timing;
vertical-align: top;
&:not(.editable-field) {
- height: 50px;
+ height: 60px;
}
- &:hover:not(.disabled) {
- box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
+ &:not(.disabled) {
+ box-shadow: 0px 4px 24px rgba(46, 53, 69, 0.25);
}
&:focus {
@@ -31,10 +31,10 @@ $anim-timing: 150ms ease-out;
label {
position: absolute;
font-size: 14px;
- font-weight: 400;
- color: var(--vitamui-grey-600);
+ font-weight: 700;
+ color: var(--vitamui-primary);
letter-spacing: 0.1px;
- line-height: 22px;
+ line-height: 10px;
white-space: nowrap;
transform-origin: left;
transition: transform $anim-timing;
@@ -47,14 +47,15 @@ $anim-timing: 150ms ease-out;
input, textarea {
font-size: 16px;
- font-weight: 400;
+ font-weight: 700;
+ color: var(--vitamui-grey-900);
background: none;
border: none;
outline: none;
}
input{
- line-height: 24px;
+ line-height: 18px;
transform-origin: left;
transition: margin $anim-timing;
}
@@ -62,19 +63,19 @@ $anim-timing: 150ms ease-out;
textarea {
resize: none;
width: 100%;
- height: 100%;
+ height: 80%;
}
&.disabled {
background-color: var(--vitamui-grey-300);
border: none;
}
-
+
&.disabled > * {
cursor: no-drop;
input {
- color: var(--vitamui-grey-700);
+ color: var(--vitamui-grey-900);
}
}
}
@@ -88,7 +89,7 @@ $anim-timing: 150ms ease-out;
label:first-of-type {
transform: scale((12 / 14)) translateY(-12px);
letter-spacing: 0.4px;
- line-height: 16px;
+ line-height: 10px;
}
input {
diff --git a/ui/ui-frontend-common/src/sass/_preview.scss b/ui/ui-frontend-common/src/sass/_preview.scss
index 14dc65e1d..8ba507840 100644
--- a/ui/ui-frontend-common/src/sass/_preview.scss
+++ b/ui/ui-frontend-common/src/sass/_preview.scss
@@ -113,7 +113,7 @@
label {
font-size: 12px;
- color: var(--vitamui-grey-600);
+ color: var(--vitamui-primary);
font-weight: normal;
}
}
diff --git a/ui/ui-frontend-common/src/sass/material/_select.scss b/ui/ui-frontend-common/src/sass/material/_select.scss
index 6a62a6f81..6a7f73ccd 100644
--- a/ui/ui-frontend-common/src/sass/material/_select.scss
+++ b/ui/ui-frontend-common/src/sass/material/_select.scss
@@ -4,7 +4,7 @@
.vitamui-mat-select.mat-form-field {
- font-size: 14px;
+ font-size: 16px;
font-weight: 500;
width: 240px;
@@ -28,6 +28,7 @@
.mat-form-field-wrapper {
padding-bottom: 0;
+ background-color: white;
}
&.no-bottom-padding .mat-form-field-wrapper {
@@ -64,9 +65,9 @@
.mat-form-field-flex {
vertical-align: top;
- border-radius: 25px;
+ border-radius: 4px;
transition: box-shadow 200ms ease-out;
- height: 50px;
+ height: 60px;
align-items: center;
padding: 0 30px;
}
@@ -84,16 +85,13 @@
.mat-form-field-flex {
background-color: var(--vitamui-grey-300);
border: none;
+ box-shadow:none;
.mat-select .mat-select-value {
font-weight: normal;
color: var(--vitamui-grey-700);
}
- &:hover {
- box-shadow: none;
- }
-
.select-arrow {
i {
color: var(--vitamui-grey-700);
@@ -109,7 +107,8 @@
.mat-form-field-flex {
padding-right: 15px;
- border: 1px solid var(--vitamui-grey-400);
+ border: none;
+ box-shadow: 0px 4px 24px rgba(46, 53, 69, 0.25);
.mat-form-field-infix {
border-top-width: 0;
@@ -135,9 +134,7 @@
}
:not(.mat-form-field-disabled).mat-form-field-flex {
- &:hover {
- box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
- }
+
.mat-select .mat-select-value {
color: var(--vitamui-grey-900);
@@ -167,10 +164,7 @@
height: 25px;
padding: 0;
border: none;
-
- &:hover {
- @include elevation-0;
- }
+ box-shadow: none;
}
.mat-form-field-infix {
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 f7acb723e..2278f0148 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,6 +1,6 @@
<ng-container *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="vitamui-input editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
<label>{{label}}</label>
<span class="editable-field-text-content">
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 7a3eae81c..eb62a4396 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,7 +1,7 @@
<ng-container *ngIf="!disabled">
<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
- <div class="vitamui-input editable-field squarish" [class.edit-mode]="editMode" (click)="enterEditMode()">
+ <div class="vitamui-input editable-field" [class.edit-mode]="editMode" (click)="enterEditMode()">
<div class="editable-field-content">
<label i18n="Keystore@@idpFormLabelKeystore">Keystore de CAS</label>
<span class="editable-field-text-content">{{ originValue?.name }}</span>
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/profiles-form/profiles-form.component.scss b/ui/ui-frontend/projects/identity/src/app/shared/profiles-form/profiles-form.component.scss
index 77424d56d..b0550677d 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/profiles-form/profiles-form.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/shared/profiles-form/profiles-form.component.scss
@@ -3,7 +3,7 @@
width: 65%;
> div {
- height: 50px;
+ height: 60px;
}
}
diff --git a/ui/ui-frontend/projects/identity/src/sass/login.scss b/ui/ui-frontend/projects/identity/src/sass/login.scss
index 3455246d3..b3202cac4 100644
--- a/ui/ui-frontend/projects/identity/src/sass/login.scss
+++ b/ui/ui-frontend/projects/identity/src/sass/login.scss
@@ -56,7 +56,7 @@
}
&.ng-valid.ng-touched {
- border-color: #43ea2a;
+ border-color: $green;
}
&.ng-invalid.ng-touched {
diff --git a/ui/ui-frontend/projects/referential/src/sass/_sidepanel.scss b/ui/ui-frontend/projects/referential/src/sass/_sidepanel.scss
index 3bf75f399..30aa38526 100644
--- a/ui/ui-frontend/projects/referential/src/sass/_sidepanel.scss
+++ b/ui/ui-frontend/projects/referential/src/sass/_sidepanel.scss
@@ -15,9 +15,9 @@
label {
- font-size: 13px;
- color: $greyish-two;
- font-weight: normal;
+ font-size: 12px;
+ color: var(--vitamui-primary);
+ font-weight: 700;
}
}
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 d9b1f43d5..ebc9d81d2 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
@@ -1,22 +1,22 @@
<div class="d-flex flex-column">
<h4>Simple</h4>
- <div class="d-flex flex-column contrast-container">
+ <div class="d-flex flex-column">
<div class="row m-0 pl-3 pr-3 mt-4">
<vitamui-common-input [formControl]="streetEmpty" placeholder="N° et nom de rue"></vitamui-common-input>
- <vitamui-common-input [formControl]="street" placeholder="N° et nom de rue"></vitamui-common-input>
- <vitamui-common-input disabled [formControl]="street" placeholder="N° et nom de rue"></vitamui-common-input>
+ <vitamui-common-input [formControl]="streetInvalid" placeholder="N° et nom de rue"></vitamui-common-input>
+ <vitamui-common-input disabled [formControl]="streetDisable" placeholder="N° et nom de rue"></vitamui-common-input>
</div>
<div class="row m-0">
<div class="col-8">
<vitamui-common-editable-input [formControl]="streetEmpty" [label]="'Editable input'">
</vitamui-common-editable-input>
</div>
- <vitamui-common-editable-input [formControl]="street" [label]="'Editable input disabled'" [disabled]="true">
+ <vitamui-common-editable-input [formControl]="streetDisable" [label]="'Editable input disabled'" [disabled]="true">
</vitamui-common-editable-input>
</div>
</div>
<h4>Email</h4>
- <div class="d-flex flex-column contrast-container">
+ <div class="d-flex flex-column">
<div class="row m-0 pl-3 mt-4">
<vitamui-common-input class="field-email" [formControl]="emailFirstPart" placeholder="Adresse e-mail">
@@ -35,7 +35,7 @@
</div>
</mat-form-field>
</div>
- <div class="row m-0 ">
+ <div class="row m-0">
<div class="col-8">
<vitamui-common-editable-email-input [formControl]="email" [label]="'Editable email'"
[domains]="['test.fr', 'test.com', 'test.de']"></vitamui-common-editable-email-input>
@@ -56,14 +56,14 @@
</div>
<h4>List</h4>
- <div class="d-flex flex-column contrast-container">
+ <div class="d-flex flex-column">
<div class="row m-0 pl-3 pr-3 mt-4">
<vitamui-common-list-input [formControl]="list" [placeholder]="'Multiple input'">
</vitamui-common-list-input>
</div>
</div>
<h4>Select</h4>
- <div class="d-flex flex-column contrast-container">
+ <div class="d-flex flex-column">
<div class="row m-0 mt-4">
<div class="col-8">
<mat-form-field class="mr-3 field-domain vitamui-mat-select">
@@ -108,7 +108,7 @@
</div>
</div>
<h4>Textarea</h4>
- <div class="d-flex flex-column contrast-container">
+ <div class="d-flex flex-column">
<div class="row m-0 mt-4">
<div class="col-8">
<vitamui-common-textarea [formControl]="textarea" placeholder="Textarea">
@@ -129,7 +129,7 @@
</div>
<h4>Level</h4>
- <div class="d-flex flex-column contrast-container">
+ <div class="d-flex flex-column">
<div class="row m-0 mt-4 pl-3">
<vitamui-common-level-input></vitamui-common-level-input>
</div>
@@ -144,7 +144,7 @@
</div>
</div>
<h4>Toggle</h4>
- <div class="row m-0 contrast-container">
+ <div class="row m-0">
<div class="col-12 mt-4">
<vitamui-common-slide-toggle class="mr-3">Slide Toggle</vitamui-common-slide-toggle>
<vitamui-common-slide-toggle class="mr-3" [checked]="true" [disabled]="true">Slide Toggle disabled</vitamui-common-slide-toggle>
@@ -153,7 +153,7 @@
</div>
<h4>Toggle Group</h4>
- <div class="d-flex flex-column contrast-container">
+ <div class="d-flex flex-column">
<div class="row m-0 mt-4 pl-3">
<mat-button-toggle-group [formControl]="control" class="vitamui-button-toggle-group mr-4">
<mat-button-toggle [value]="'FIRST'">
@@ -204,7 +204,7 @@
</div>
</div>
<h4>Duration</h4>
- <div class="d-flex flex-column contrast-container">
+ <div class="d-flex flex-column">
<div class="row m-0 mt-4 pl-3">
<vitamui-common-vitamui-duration-input [formControl]="duration">
</vitamui-common-vitamui-duration-input>
@@ -220,7 +220,7 @@
</div>
</div>
<h4>File</h4>
- <div class="row m-0 contrast-container">
+ <div class="row m-0">
<div class="col-8 mt-4">
<vitamui-common-editable-file [formControl]="file" [label]="'Editable file upload'">
</vitamui-common-editable-file>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.ts b/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.ts
index 6af294853..d0e046c18 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.ts
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.ts
@@ -11,7 +11,8 @@ export class InputsComponent implements OnInit {
public control = new FormControl();
public streetEmpty = new FormControl('', [Validators.maxLength(3)]);
- public street = new FormControl('azerty', [Validators.maxLength(3)]);
+ public streetInvalid = new FormControl('azerty', [Validators.maxLength(3)]);
+ public streetDisable = new FormControl('azerty', [Validators.maxLength(6)]);
public emailFirstPart = new FormControl('azerty', [Validators.maxLength(25)]);
public email = new FormControl('azerty@test.fr', [Validators.maxLength(25)]);
public domain = new FormControl('test.fr', [Validators.maxLength(10)]);
diff --git a/ui/ui-frontend/projects/starter-kit/src/sass/login.scss b/ui/ui-frontend/projects/starter-kit/src/sass/login.scss
index 8b4d33d4e..a5b1b4ea2 100644
--- a/ui/ui-frontend/projects/starter-kit/src/sass/login.scss
+++ b/ui/ui-frontend/projects/starter-kit/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/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 8e9cce527..f9386e49d 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
@@ -1,28 +1,13 @@
@import "~ui-frontend-common/sass/variables/colors";
@import "~ui-frontend-common/sass/mixins/elevation";
-$input-height: 50px;
+$input-height: 60px;
$input-small-height: 34px;
$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: $green;
}
@@ -32,66 +17,8 @@ $anim-timing: 150ms ease-out;
}
}
-.vitamui-input {
- display: inline-flex;
- align-items: center;
- position: relative;
- height: $input-height;
- width: 100%;
- border-radius: $input-height / 2;
- border: solid 1px #f0f0f0;
- background-color: #ffffff;
- padding: 8px 30px;
- transition: border-color $anim-timing;
- vertical-align: top;
- @include elevation-1;
-
- mat-spinner {
- position: absolute;
- top: 12px;
- right: 12px;
- display: none;
- }
-}
-
-.vitamui-input.disabled {
- opacity: 0.4;
- margin-bottom: 10px;
-}
-
:host {
.vitamui-input mat-spinner {
display: block;
}
}
-
-.vitamui-input-errors {
- min-height: 30px;
-}
-
-input {
- color: var(--vitamui-grey-900);
- font-size: 15px;
- font-weight: 500;
-
- background: none;
- border: none;
- transition: margin $anim-timing;
- outline: none;
- width: 100%;
-}
-
-label {
- color: $greyish-two;
- font-size: 15px;
- position: absolute;
- left: 30px;
- transform-origin: left;
- transition: transform $anim-timing;
- pointer-events: none;
- white-space: nowrap;
-
- .required-marker {
- color: var(--vitamui-primary);
- }
-}
--
GitLab