From 006201723af5688eb5c87c6166721160646b0225 Mon Sep 17 00:00:00 2001
From: Cindy <cindy.nacibide@teamdlab.com>
Date: Mon, 14 Dec 2020 18:02:36 +0100
Subject: [PATCH] [US TRTL-541] set font to all material in front common theme
---
.../src/main/config/sass/_fonts.scss | 16 ++--
cas/cas-server/src/main/config/sass/cas.scss | 2 +-
.../src/main/resources/static/css/cas.css | 9 --
.../account-information-tab.component.scss | 4 +-
.../modules/account/account.component.scss | 8 +-
.../level-input/level-input.component.scss | 2 +-
.../item-select/item-select.component.scss | 8 +-
.../header/menu/menu.component.scss | 2 +-
.../order-option/order-option.component.scss | 2 +-
.../vitamui-autocomplete.component.scss | 5 +-
.../vitamui-common-select.component.scss | 12 +--
.../vitamui-display-node.component.scss | 4 +-
...tamui-input-positive-number.component.scss | 2 +-
.../vitamui-input.component.scss | 2 +-
.../vitamui-textarea.component.scss | 4 +-
ui/ui-frontend-common/src/sass/_button.scss | 2 +-
.../src/sass/_editable-field.scss | 8 +-
ui/ui-frontend-common/src/sass/_form.scss | 4 +-
.../src/sass/_material-theme.scss | 7 +-
ui/ui-frontend-common/src/sass/_navbar.scss | 2 +-
ui/ui-frontend-common/src/sass/_preview.scss | 2 +-
.../src/sass/_sidepanel.scss | 2 +-
ui/ui-frontend-common/src/sass/_table.scss | 2 +-
ui/ui-frontend-common/src/sass/_theme.scss | 39 +++++++-
.../src/sass/material/_autocomplete.scss | 2 +-
.../sass/material/_button-toggle-group.scss | 2 +-
.../src/sass/material/_preview-tab.scss | 2 +-
.../src/sass/material/_select.scss | 4 +-
.../src/sass/mixins/_fonts.scss | 16 ++--
.../src/sass/mixins/material/_select.scss | 2 +-
ui/ui-frontend-common/src/styles.scss | 1 -
ui/ui-frontend/projects/demo/src/styles.scss | 4 -
.../user-information-tab.component.scss | 2 +-
.../projects/identity/src/sass/styles.scss | 4 -
.../projects/portal/src/sass/styles.scss | 3 -
.../src/app/audit/audit.component.scss | 2 +-
.../probative-value.component.scss | 2 +-
.../securisation/securisation.component.scss | 2 +-
.../referential/src/sass/_material-theme.scss | 93 -------------------
.../referential/src/sass/_sidepanel.scss | 2 +-
.../projects/referential/src/sass/styles.scss | 7 --
.../components/inputs/inputs.component.scss | 2 +-
.../projects/starter-kit/src/sass/styles.scss | 3 -
.../vitamui-input.component.scss | 2 +-
.../src/sass/_date-filter.scss | 2 +-
45 files changed, 108 insertions(+), 201 deletions(-)
rename ui/{ui-frontend/projects/identity => ui-frontend-common}/src/sass/_material-theme.scss (90%)
delete mode 100644 ui/ui-frontend/projects/referential/src/sass/_material-theme.scss
diff --git a/cas/cas-server/src/main/config/sass/_fonts.scss b/cas/cas-server/src/main/config/sass/_fonts.scss
index b409c8287..18ce0bf2e 100644
--- a/cas/cas-server/src/main/config/sass/_fonts.scss
+++ b/cas/cas-server/src/main/config/sass/_fonts.scss
@@ -15,53 +15,53 @@
*/
@mixin login-title {
- font-family: 'Mulish', sans-serif;
+
font-size: 28px;
font-weight: 300;
color: $charcoal-grey;
}
@mixin login-text-1 {
- font-family: 'Mulish', sans-serif;
+
font-size: 20px;
font-weight: 300;
color: $charcoal-grey;
}
@mixin button-primary {
- font-family: 'Mulish', sans-serif;
+
font-size: 15px;
font-weight: 500;
color: $white;
}
@mixin login-text-2 {
- font-family: 'Mulish', sans-serif;
+
font-size: 15px;
color: $greyish-two;
}
@mixin login-helper {
- font-family: 'Mulish', sans-serif;
+
font-size: 15px;
color: $cool-grey;
}
@mixin login-link {
- font-family: 'Mulish', sans-serif;
+
font-size: 15px;
color: var(--vitamui-secondary);
}
@mixin vitamui-input-placeholder {
- font-family: 'Mulish', sans-serif;
+
font-size: 15px;
text-align: left;
color: $greyish-two;
}
@mixin login-error {
- font-family: 'Mulish', sans-serif;
+
font-size: 14px;
letter-spacing: -0.4px;
color: $red;
diff --git a/cas/cas-server/src/main/config/sass/cas.scss b/cas/cas-server/src/main/config/sass/cas.scss
index 3f71af3ac..8ac0ce54b 100644
--- a/cas/cas-server/src/main/config/sass/cas.scss
+++ b/cas/cas-server/src/main/config/sass/cas.scss
@@ -14,7 +14,7 @@
body {
margin: 0;
color: $charcoal-grey;
- font-family: 'Mulish', sans-serif;
+
background: $pale-grey;
}
diff --git a/cas/cas-server/src/main/resources/static/css/cas.css b/cas/cas-server/src/main/resources/static/css/cas.css
index 9d34e8b17..bd9f53e63 100644
--- a/cas/cas-server/src/main/resources/static/css/cas.css
+++ b/cas/cas-server/src/main/resources/static/css/cas.css
@@ -56,27 +56,23 @@
background-color: #ffffff;
box-shadow: 0 0 80px 0 rgba(163, 163, 163, 0.3); }
.login-box h1 {
- font-family: 'Mulish', sans-serif;
font-size: 28px;
font-weight: 300;
color: #485053; }
.login-box header p {
margin-bottom: 0px; }
.login-box p {
- font-family: 'Mulish', sans-serif;
font-size: 20px;
font-weight: 300;
color: #485053;
line-height: 30px; }
.login-box p small {
- font-family: 'Mulish', sans-serif;
font-size: 15px;
color: #a6a6a6;
font-weight: 400; }
.login-box strong {
font-weight: 500; }
.login-box a {
- font-family: 'Mulish', sans-serif;
font-size: 15px;
color: var(--vitamui-secondary);
text-decoration: underline; }
@@ -108,7 +104,6 @@
.login-box input[type=password][disabled] {
opacity: 0.4; }
.login-box .form-error {
- font-family: 'Mulish', sans-serif;
font-size: 14px;
letter-spacing: -0.4px;
color: #C10000; }
@@ -117,7 +112,6 @@
vertical-align: middle;
margin-right: 10px; }
.login-box button.vitamui-primary {
- font-family: 'Mulish', sans-serif;
font-size: 15px;
font-weight: 500;
color: #ffffff;
@@ -136,7 +130,6 @@
.login-box button.vitamui-primary[disabled] {
opacity: 0.4; }
.login-box .helper {
- font-family: 'Mulish', sans-serif;
font-size: 15px;
color: #aab0b3;
text-align: right;
@@ -234,7 +227,6 @@
color: var(--vitamui-secondary);
font-size: 110px; }
.password-recovery .cancel-link {
- font-family: 'Mulish', sans-serif;
font-size: 15px;
color: #aab0b3;
text-decoration: underline;
@@ -451,7 +443,6 @@
body {
margin: 0;
color: #485053;
- font-family: 'Mulish', sans-serif;
background: #f7f8fb; }
* {
diff --git a/ui/ui-frontend-common/src/app/modules/account/account-information-tab/account-information-tab.component.scss b/ui/ui-frontend-common/src/app/modules/account/account-information-tab/account-information-tab.component.scss
index 3467fcf66..ce179dbe2 100644
--- a/ui/ui-frontend-common/src/app/modules/account/account-information-tab/account-information-tab.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/account/account-information-tab/account-information-tab.component.scss
@@ -11,7 +11,7 @@
label {
font-size: 14px;
- font-family:'Mulish', sans-serif;
+
color:var(--vitamui-grey-600);
font-weight: normal;
}
@@ -19,7 +19,7 @@ label {
span
{
font-size: 16px;
- font-family:'Mulish', sans-serif;
+
color:var(--vitamui-grey-900);
font-weight: bold;
}
diff --git a/ui/ui-frontend-common/src/app/modules/account/account.component.scss b/ui/ui-frontend-common/src/app/modules/account/account.component.scss
index faf7d70c6..0adb90462 100644
--- a/ui/ui-frontend-common/src/app/modules/account/account.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/account/account.component.scss
@@ -15,7 +15,7 @@ h2 {
mat-tab-group {
margin-top: 40px;
- font-family: 'Mulish',sans-serif;
+
}
:host::ng-deep {
@@ -32,7 +32,7 @@ mat-tab-group {
}
.mat-tab-label {
- font-family: 'Mulish',sans-serif;
+
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-right: 5px;
@@ -59,13 +59,13 @@ mat-tab-group {
}
.mat-tab-body-content {
- font-family: 'Mulish',sans-serif;
+
height: 100%;
overflow: hidden;
}
.mat-tab-body-content {
- font-family: 'Mulish',sans-serif;
+
height: 100%;
overflow: hidden;
}
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 6dbd87c31..50825b7b2 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
@@ -64,7 +64,7 @@ input {
}
input {
- font-family: 'Mulish', sans-serif;
+
background: none;
border: none;
transition: margin $anim-timing;
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 5cfcf94d0..adcaeb2bc 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
@@ -1,6 +1,6 @@
:host::ng-deep {
.selected-item-label, .unselected-item-label {
- font-family: 'Mulish', sans-serif;
+
color: var(--vitamui-grey-600);
font-size: 16px;
}
@@ -43,18 +43,18 @@
}
mat-select {
- font-family: 'Mulish', sans-serif;
+
color: var(--vitamui-grey-900);
font-size: 16px;
}
.mat-option-text {
- font-family: 'Mulish', sans-serif;
+
color: var(--vitamui-grey-900);
}
.mat-option {
- font-family: 'Mulish', sans-serif;
+
color: var(--vitamui-grey-900);
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.scss b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.scss
index 8f583876f..715b8eb30 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.scss
@@ -7,7 +7,7 @@
--headerHeight: 72px;
font-weight: 400;
font-size: 16px;
- font-family:'Mulish', sans-serif;
+
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
background: var(--vitamui-primary);
diff --git a/ui/ui-frontend-common/src/app/modules/components/order-dropdown/order-option/order-option.component.scss b/ui/ui-frontend-common/src/app/modules/components/order-dropdown/order-option/order-option.component.scss
index 6a2e6e594..80464ec7b 100644
--- a/ui/ui-frontend-common/src/app/modules/components/order-dropdown/order-option/order-option.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/order-dropdown/order-option/order-option.component.scss
@@ -19,7 +19,7 @@
color: #666666;
font-size: 14px;
font-weight: bold;
- font-family: 'Mulish', sans-serif;
+
white-space: nowrap;
width: 100%;
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 61ede20db..0a19e89d5 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
@@ -5,7 +5,6 @@ $animation-time: 150ms;
.vitamui-autocomplete {
position: relative;
- font-family: "Mulish", sans-serif;
> input {
background: $white;
@@ -52,7 +51,7 @@ $animation-time: 150ms;
}
.input-label {
- font-family: "Mulish", sans-serif;
+
font-size: 14px;
align-items: center;
letter-spacing: 0.1px;
@@ -73,7 +72,7 @@ $animation-time: 150ms;
> input {
padding-top: 30px;
- font-family: "Mulish", sans-serif;
+
font-size: 14px;
font-weight: bold;
color: var(--vitamui-grey-900);
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.scss
index fd672cfee..dbc6057a1 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.scss
@@ -3,7 +3,7 @@
:host::ng-deep {
.selected-label,
.unselected-label {
- font-family: "Mulish", sans-serif;
+
color: var(--vitamui-grey-600);
font-size: 14px;
}
@@ -43,11 +43,11 @@
padding: 8px 30px;
transition: border-color 150ms ease-out;
vertical-align: top;
- font-family: "Mulish", sans-serif;
+
}
.mat-form-field {
- font-family: "Mulish", sans-serif;
+
font-weight: 400;
width: 100%;
}
@@ -99,18 +99,18 @@
}
mat-select {
- font-family: "Mulish", sans-serif;
+
color: var(--vitamui-grey-900);
font-size: 14px;
}
.mat-option-text {
- font-family: "Mulish", sans-serif;
+
color: var(--vitamui-grey-900);
}
.mat-option {
- font-family: "Mulish", sans-serif;
+
color: var(--vitamui-grey-900);
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-display-node/vitamui-display-node.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-display-node/vitamui-display-node.component.scss
index 51bc844ec..5e84a58af 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-display-node/vitamui-display-node.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-display-node/vitamui-display-node.component.scss
@@ -1,7 +1,7 @@
@import '../../../../sass/variables/colors';
.parent-label {
- font-family: 'Mulish', sans-serif;
+
font-size: 14px;
font-weight: normal;
text-overflow: ellipsis;
@@ -10,7 +10,7 @@
}
ul, li {
- font-family: 'Mulish', sans-serif;
+
margin-top: 0;
margin-bottom: 0;
list-style: none;
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 4736c9856..a8ef43d78 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
@@ -72,7 +72,7 @@ input {
color: $charcoal-grey;
font-size: 14px;
font-weight: 500;
- font-family: 'Mulish', sans-serif;
+
background: none;
border: none;
transition: margin $anim-timing;
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 f2e0ceaaa..eb15c6dc4 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
@@ -86,7 +86,7 @@ input {
color: var(--vitamui-grey-900);
font-size: 14px;
font-weight: 500;
- font-family: 'Mulish', sans-serif;
+
background: none;
border: none;
transition: margin $anim-timing;
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 b2691fd17..4ae6358d7 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
@@ -72,7 +72,7 @@ textarea {
color: var(--vitamui-grey-700);
font-size: 14px;
font-weight: 500;
- font-family: 'Mulish', sans-serif;
+
background: none;
border: none;
transition: margin $anim-timing;
@@ -83,7 +83,7 @@ textarea {
label {
color: var(--vitamui-grey-600);
- font-family: 'Mulish', sans-serif;
+
font-size: 14px;
position: absolute;
line-height: 48px;
diff --git a/ui/ui-frontend-common/src/sass/_button.scss b/ui/ui-frontend-common/src/sass/_button.scss
index b16bfe5ba..e144dc569 100644
--- a/ui/ui-frontend-common/src/sass/_button.scss
+++ b/ui/ui-frontend-common/src/sass/_button.scss
@@ -70,7 +70,7 @@
height: 50px;
font-style: normal;
font-weight: bold;
- font-family: 'Mulish', sans-serif;
+
line-height: 20px;
letter-spacing: .5px;
border-radius: 50px;
diff --git a/ui/ui-frontend-common/src/sass/_editable-field.scss b/ui/ui-frontend-common/src/sass/_editable-field.scss
index 8a8f3442f..dbdd345ea 100644
--- a/ui/ui-frontend-common/src/sass/_editable-field.scss
+++ b/ui/ui-frontend-common/src/sass/_editable-field.scss
@@ -51,7 +51,7 @@ $anim-timing: 150ms ease-out;
}
.editable-field-content {
- font-family: 'Mulish', sans-serif;
+
display: flex;
flex-direction: column;
align-items: stretch;
@@ -60,7 +60,7 @@ $anim-timing: 150ms ease-out;
max-width: 100%;
.editable-field-label {
- font-family: 'Mulish', sans-serif;
+
position: absolute;
font-size: 12px;
color: var(--vitamui-grey-400);
@@ -87,7 +87,7 @@ $anim-timing: 150ms ease-out;
}
.editable-field-control > input {
- font-family: 'Mulish', sans-serif;
+
border: none!important;
margin-top: 5px;
@@ -97,7 +97,7 @@ $anim-timing: 150ms ease-out;
}
.editable-field-control > textarea {
- font-family: 'Mulish', sans-serif;
+
border: none!important;
&:focus {
diff --git a/ui/ui-frontend-common/src/sass/_form.scss b/ui/ui-frontend-common/src/sass/_form.scss
index ba75c1b78..39a874271 100644
--- a/ui/ui-frontend-common/src/sass/_form.scss
+++ b/ui/ui-frontend-common/src/sass/_form.scss
@@ -5,7 +5,7 @@
padding: 5px;
vertical-align: top;
margin-bottom: 10px;
- font-family: 'Mulish', sans-serif;
+
label {
font-size: 12px;
@@ -24,7 +24,7 @@
font-size: 12px;
font-weight: 400;
color: $red;
- font-family: 'Mulish', sans-serif;
+
}
input[type=text].vitamui-input,
diff --git a/ui/ui-frontend/projects/identity/src/sass/_material-theme.scss b/ui/ui-frontend-common/src/sass/_material-theme.scss
similarity index 90%
rename from ui/ui-frontend/projects/identity/src/sass/_material-theme.scss
rename to ui/ui-frontend-common/src/sass/_material-theme.scss
index 8f506297a..a52c4b37f 100644
--- a/ui/ui-frontend/projects/identity/src/sass/_material-theme.scss
+++ b/ui/ui-frontend-common/src/sass/_material-theme.scss
@@ -1,13 +1,8 @@
@import '~@angular/material/theming';
-@import '~ui-frontend-common/sass/variables/colors';
+@import './variables/colors';
// Plus imports for other components in your app.
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat-core();
-
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
diff --git a/ui/ui-frontend-common/src/sass/_navbar.scss b/ui/ui-frontend-common/src/sass/_navbar.scss
index 8f242681b..05439dc15 100644
--- a/ui/ui-frontend-common/src/sass/_navbar.scss
+++ b/ui/ui-frontend-common/src/sass/_navbar.scss
@@ -43,7 +43,7 @@
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.85);
padding: 0 20px 0 20px;
- font-family: 'Mulish', sans-serif;
+
font-size: 16px;
font-weight: 500;
line-height: 1em;
diff --git a/ui/ui-frontend-common/src/sass/_preview.scss b/ui/ui-frontend-common/src/sass/_preview.scss
index 1096724c8..14dc65e1d 100644
--- a/ui/ui-frontend-common/src/sass/_preview.scss
+++ b/ui/ui-frontend-common/src/sass/_preview.scss
@@ -111,7 +111,7 @@
margin-bottom: 20px;
label {
- font-family: 'Mulish', sans-serif;
+
font-size: 12px;
color: var(--vitamui-grey-600);
font-weight: normal;
diff --git a/ui/ui-frontend-common/src/sass/_sidepanel.scss b/ui/ui-frontend-common/src/sass/_sidepanel.scss
index 4f3ce071a..4ebd241ad 100644
--- a/ui/ui-frontend-common/src/sass/_sidepanel.scss
+++ b/ui/ui-frontend-common/src/sass/_sidepanel.scss
@@ -50,7 +50,7 @@
.vitamui-sidepanel-body {
font-size: 16px;
- font-family: 'Mulish', sans-serif;
+
color: var(--vitamui-grey-900);
position: absolute;
bottom: 0;
diff --git a/ui/ui-frontend-common/src/sass/_table.scss b/ui/ui-frontend-common/src/sass/_table.scss
index 799262d52..3c3ff648e 100644
--- a/ui/ui-frontend-common/src/sass/_table.scss
+++ b/ui/ui-frontend-common/src/sass/_table.scss
@@ -363,7 +363,7 @@ $row-padding: 0.8rem;
// Profile list item css
.vitamui-profile-list {
background-color: var(--vitamui-grey-100);
- font-family: 'Mulish',sans-serif;
+
.profile-label {
font-size: 12px;
diff --git a/ui/ui-frontend-common/src/sass/_theme.scss b/ui/ui-frontend-common/src/sass/_theme.scss
index c5d218c1c..41ea73e97 100644
--- a/ui/ui-frontend-common/src/sass/_theme.scss
+++ b/ui/ui-frontend-common/src/sass/_theme.scss
@@ -22,6 +22,39 @@
@import "spinner";
@import "explorer-banner";
@import "typography";
+@import "material-theme";
+
+@import url("https://fonts.googleapis.com/css?family=Mulish:200,300,400,500,600,700,800,900&display=swap");
+
+@import '~material-design-icons/iconfont/material-icons.css';
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+@import '~@angular/material/theming';
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+
+$custom-typography: mat-typography-config(
+ $font-family: 'Mulish',
+ $display-4: mat-typography-level(112px, 112px, 300),
+ $display-3: mat-typography-level(56px, 56px, 400),
+ $display-2: mat-typography-level(45px, 48px, 400),
+ $display-1: mat-typography-level(34px, 40px, 400),
+ $headline: mat-typography-level(24px, 32px, 400),
+ $title: mat-typography-level(20px, 32px, 500),
+ $subheading-2: mat-typography-level(16px, 28px, 400),
+ $subheading-1: mat-typography-level(15px, 24px, 400),
+ $body-2: mat-typography-level(14px, 24px, 500),
+ $body-1: mat-typography-level(14px, 20px, 400),
+ $caption: mat-typography-level(12px, 20px, 400),
+ $button: mat-typography-level(14px, 14px, 500),
+ $input: mat-typography-level(inherit, 1.125, 400)
+);
+
+@include mat-base-typography($custom-typography);
+@include mat-checkbox-typography($custom-typography);
+@include angular-material-typography($custom-typography);
+@include mat-core($custom-typography);
html, body {
height: 100%;
@@ -32,7 +65,7 @@ html, body {
font-family: 'Mulish', sans-serif;
font-style: normal;
font-weight: normal;
- src: local('Mulish'), url(https://fonts.googleapis.com/css?family=Mulish:200,300,400,500,600,700,800,900&display=swap) format('woff2');
+ src: local('Mulish', sans-serif), url(https://fonts.googleapis.com/css?family=Mulish:200,300,400,500,600,700,800,900&display=swap) format('woff2');
font-display: optional;
}
@@ -43,6 +76,10 @@ body {
color: black;
}
+button {
+ font-family: 'Mulish', sans-serif;
+}
+
* {
box-sizing: border-box;
}
diff --git a/ui/ui-frontend-common/src/sass/material/_autocomplete.scss b/ui/ui-frontend-common/src/sass/material/_autocomplete.scss
index ebe19a266..598925042 100644
--- a/ui/ui-frontend-common/src/sass/material/_autocomplete.scss
+++ b/ui/ui-frontend-common/src/sass/material/_autocomplete.scss
@@ -24,7 +24,7 @@
.mat-option-text {
display: flex;
align-items: center;
- font-family:'Mulish', sans-serif;
+
font-size: 14px;
line-height: 22px;
color: var(--vitamui-grey-900);
diff --git a/ui/ui-frontend-common/src/sass/material/_button-toggle-group.scss b/ui/ui-frontend-common/src/sass/material/_button-toggle-group.scss
index 66c712530..d8dcb01ce 100644
--- a/ui/ui-frontend-common/src/sass/material/_button-toggle-group.scss
+++ b/ui/ui-frontend-common/src/sass/material/_button-toggle-group.scss
@@ -38,7 +38,7 @@
}
.mat-button-toggle-label-content {
- font-family: 'Mulish',sans-serif;
+
font-size: 14px;
line-height: 36px!important;
padding: 0 14px!important;
diff --git a/ui/ui-frontend-common/src/sass/material/_preview-tab.scss b/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
index bc7928e97..1d5a271bf 100644
--- a/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
+++ b/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
@@ -1,6 +1,6 @@
.preview-tab-group.mat-tab-group {
.mat-tab-label {
- font-family: 'Mulish',sans-serif;
+
min-width: 130px;
height: 37px;
opacity: 1;
diff --git a/ui/ui-frontend-common/src/sass/material/_select.scss b/ui/ui-frontend-common/src/sass/material/_select.scss
index c03231c5f..523a457c8 100644
--- a/ui/ui-frontend-common/src/sass/material/_select.scss
+++ b/ui/ui-frontend-common/src/sass/material/_select.scss
@@ -3,7 +3,7 @@
}
.vitamui-mat-select.mat-form-field {
- font-family: "Mulish", sans-serif;
+
font-size: 14px;
font-weight: 500;
width: 240px;
@@ -118,7 +118,7 @@
}
.mat-select .mat-select-value {
- font-family: "Mulish", sans-serif;
+
}
.mat-select .mat-select-arrow-wrapper {
diff --git a/ui/ui-frontend-common/src/sass/mixins/_fonts.scss b/ui/ui-frontend-common/src/sass/mixins/_fonts.scss
index 92d415b85..15efd9859 100644
--- a/ui/ui-frontend-common/src/sass/mixins/_fonts.scss
+++ b/ui/ui-frontend-common/src/sass/mixins/_fonts.scss
@@ -15,53 +15,53 @@
*/
@mixin login-title {
- font-family: 'Mulish', sans-serif;
+
font-size: 28px;
font-weight: 300;
color: $charcoal-grey;
}
@mixin login-text-1 {
- font-family: 'Mulish', sans-serif;
+
font-size: 20px;
font-weight: 300;
color: $charcoal-grey;
}
@mixin button-primary {
- font-family: 'Mulish', sans-serif;
+
font-size: 15px;
font-weight: 500;
color: $white;
}
@mixin login-text-2 {
- font-family: 'Mulish', sans-serif;
+
font-size: 15px;
color: $greyish-two;
}
@mixin login-helper {
- font-family: 'Mulish', sans-serif;
+
font-size: 15px;
color: $cool-grey;
}
@mixin vitamui-link {
- font-family: 'Mulish', sans-serif;
+
font-size: 15px;
color: var(--vitamui-primary);
}
@mixin vitamui-input-placeholder {
- font-family: 'Mulish', sans-serif;
+
font-size: 14px;
text-align: left;
color: $greyish-two;
}
@mixin login-error {
- font-family: 'Mulish', sans-serif;
+
font-size: 14px;
letter-spacing: -0.4px;
color: $red;
diff --git a/ui/ui-frontend-common/src/sass/mixins/material/_select.scss b/ui/ui-frontend-common/src/sass/mixins/material/_select.scss
index afd14006e..30888eb28 100644
--- a/ui/ui-frontend-common/src/sass/mixins/material/_select.scss
+++ b/ui/ui-frontend-common/src/sass/mixins/material/_select.scss
@@ -14,7 +14,7 @@
.mat-option-text {
display: flex;
align-items: center;
- font-family:'Mulish', sans-serif;
+
font-size: 14px;
line-height: 22px;
color: var(--vitamui-grey-900);
diff --git a/ui/ui-frontend-common/src/styles.scss b/ui/ui-frontend-common/src/styles.scss
index 03c03d76e..33bcbe13a 100644
--- a/ui/ui-frontend-common/src/styles.scss
+++ b/ui/ui-frontend-common/src/styles.scss
@@ -1,6 +1,5 @@
/* You can add global styles to this file, and also import other style files */
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '~material-design-icons/iconfont/material-icons.css';
@import "sass/theme";
diff --git a/ui/ui-frontend/projects/demo/src/styles.scss b/ui/ui-frontend/projects/demo/src/styles.scss
index 411e6e933..ba849252a 100644
--- a/ui/ui-frontend/projects/demo/src/styles.scss
+++ b/ui/ui-frontend/projects/demo/src/styles.scss
@@ -1,9 +1,5 @@
/* You can add global styles to this file, and also import other style files */
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
-@import '~@angular/material/prebuilt-themes/indigo-pink.css';
-@import '~material-design-icons/iconfont/material-icons.css';
-
@import '~ui-frontend-common/sass/icons/vitamui-icons.css';
@import '~ui-frontend-common/sass/theme';
diff --git a/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-information-tab/user-information-tab.component.scss b/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-information-tab/user-information-tab.component.scss
index e0cdc8eaf..b1623e0d1 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-information-tab/user-information-tab.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-information-tab/user-information-tab.component.scss
@@ -4,7 +4,7 @@
padding-bottom: 30px;
label{
- font-family: 'Mulish', sans-serif;
+
padding-right: 30px;
font-size: 16px;
font-weight: 500;
diff --git a/ui/ui-frontend/projects/identity/src/sass/styles.scss b/ui/ui-frontend/projects/identity/src/sass/styles.scss
index 232026734..be8a2eeaf 100644
--- a/ui/ui-frontend/projects/identity/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/identity/src/sass/styles.scss
@@ -1,6 +1,3 @@
-@import '~@angular/material/prebuilt-themes/indigo-pink.css';
-@import '~material-design-icons/iconfont/material-icons.css';
-
@import '~ui-frontend-common/sass/icons/vitamui-icons.css';
@import '~ui-frontend-common/sass/theme';
@@ -8,7 +5,6 @@ $grid-gutter-width: 20px;
@import '~bootstrap/scss/bootstrap-grid';
-@import 'material-theme';
@import 'form';
@import 'login';
@import 'sidepanel';
diff --git a/ui/ui-frontend/projects/portal/src/sass/styles.scss b/ui/ui-frontend/projects/portal/src/sass/styles.scss
index f3c292024..5cc775039 100644
--- a/ui/ui-frontend/projects/portal/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/portal/src/sass/styles.scss
@@ -1,6 +1,3 @@
-@import '~@angular/material/prebuilt-themes/indigo-pink.css';
-@import '~material-design-icons/iconfont/material-icons.css';
-
@import '~ui-frontend-common/sass/icons/vitamui-icons.css';
@import '~ui-frontend-common/sass/theme';
diff --git a/ui/ui-frontend/projects/referential/src/app/audit/audit.component.scss b/ui/ui-frontend/projects/referential/src/app/audit/audit.component.scss
index 022482ab5..8376c8d30 100644
--- a/ui/ui-frontend/projects/referential/src/app/audit/audit.component.scss
+++ b/ui/ui-frontend/projects/referential/src/app/audit/audit.component.scss
@@ -4,7 +4,7 @@
padding-right: calc(100% - 700px);
margin-top: 10px;
display: inline-block;
- font-family: 'Mulish', sans-serif;
+
font-style: normal;
font-weight: normal;
font-size: 11px;
diff --git a/ui/ui-frontend/projects/referential/src/app/probative-value/probative-value.component.scss b/ui/ui-frontend/projects/referential/src/app/probative-value/probative-value.component.scss
index 022482ab5..8376c8d30 100644
--- a/ui/ui-frontend/projects/referential/src/app/probative-value/probative-value.component.scss
+++ b/ui/ui-frontend/projects/referential/src/app/probative-value/probative-value.component.scss
@@ -4,7 +4,7 @@
padding-right: calc(100% - 700px);
margin-top: 10px;
display: inline-block;
- font-family: 'Mulish', sans-serif;
+
font-style: normal;
font-weight: normal;
font-size: 11px;
diff --git a/ui/ui-frontend/projects/referential/src/app/securisation/securisation.component.scss b/ui/ui-frontend/projects/referential/src/app/securisation/securisation.component.scss
index 022482ab5..8376c8d30 100644
--- a/ui/ui-frontend/projects/referential/src/app/securisation/securisation.component.scss
+++ b/ui/ui-frontend/projects/referential/src/app/securisation/securisation.component.scss
@@ -4,7 +4,7 @@
padding-right: calc(100% - 700px);
margin-top: 10px;
display: inline-block;
- font-family: 'Mulish', sans-serif;
+
font-style: normal;
font-weight: normal;
font-size: 11px;
diff --git a/ui/ui-frontend/projects/referential/src/sass/_material-theme.scss b/ui/ui-frontend/projects/referential/src/sass/_material-theme.scss
deleted file mode 100644
index 8f506297a..000000000
--- a/ui/ui-frontend/projects/referential/src/sass/_material-theme.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-@import '~@angular/material/theming';
-@import '~ui-frontend-common/sass/variables/colors';
-
-// Plus imports for other components in your app.
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat-core();
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
-
-$vitamui-primary: (
- 50: var(--vitamui-primary),
- 100: var(--vitamui-primary),
- 200: var(--vitamui-primary),
- 300: var(--vitamui-primary),
- 400: var(--vitamui-primary),
- 500: var(--vitamui-primary),
- 600: var(--vitamui-primary),
- 700: var(--vitamui-primary),
- 800: var(--vitamui-primary),
- 900: var(--vitamui-primary),
- A100: var(--vitamui-primary),
- A200: var(--vitamui-primary),
- A400: var(--vitamui-primary),
- A700: var(--vitamui-primary),
- contrast: (
- 50: $light-primary-text,
- 100: $light-primary-text,
- 200: $light-primary-text,
- 300: $light-primary-text,
- 400: $light-primary-text,
- 500: $light-primary-text,
- 600: $light-primary-text,
- 700: $light-primary-text,
- 800: $light-primary-text,
- 900: $light-primary-text,
- A100: $light-primary-text,
- A200: $light-primary-text,
- A400: $light-primary-text,
- A700: $light-primary-text,
- )
-);
-
-$vitamui-secondary: (
- 50: var(--vitamui-secondary),
- 100: var(--vitamui-secondary),
- 200: var(--vitamui-secondary),
- 300: var(--vitamui-secondary),
- 400: var(--vitamui-secondary),
- 500: var(--vitamui-secondary),
- 600: var(--vitamui-secondary),
- 700: var(--vitamui-secondary),
- 800: var(--vitamui-secondary),
- 900: var(--vitamui-secondary),
- A100: var(--vitamui-secondary),
- A200: var(--vitamui-secondary),
- A400: var(--vitamui-secondary),
- A700: var(--vitamui-secondary),
- contrast: (
- 50: $light-primary-text,
- 100: $light-primary-text,
- 200: $light-primary-text,
- 300: $light-primary-text,
- 400: $light-primary-text,
- 500: $light-primary-text,
- 600: $light-primary-text,
- 700: $light-primary-text,
- 800: $light-primary-text,
- 900: $light-primary-text,
- A100: $light-primary-text,
- A200: $light-primary-text,
- A400: $light-primary-text,
- A700: $light-primary-text,
- )
-);
-
-$app-primary: mat-palette($vitamui-primary);
-$app-accent: mat-palette($vitamui-secondary);
-
-// The warn palette is optional (defaults to red).
-$app-warn: mat-palette($mat-red);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include angular-material-theme($app-theme);
diff --git a/ui/ui-frontend/projects/referential/src/sass/_sidepanel.scss b/ui/ui-frontend/projects/referential/src/sass/_sidepanel.scss
index 6574d237b..3bf75f399 100644
--- a/ui/ui-frontend/projects/referential/src/sass/_sidepanel.scss
+++ b/ui/ui-frontend/projects/referential/src/sass/_sidepanel.scss
@@ -14,7 +14,7 @@
margin-bottom: 20px;
label {
- font-family: 'Mulish', sans-serif;
+
font-size: 13px;
color: $greyish-two;
font-weight: normal;
diff --git a/ui/ui-frontend/projects/referential/src/sass/styles.scss b/ui/ui-frontend/projects/referential/src/sass/styles.scss
index d8169a07e..43f397764 100644
--- a/ui/ui-frontend/projects/referential/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/referential/src/sass/styles.scss
@@ -1,9 +1,3 @@
-
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
-@import "~material-design-icons/iconfont/material-icons.css";
-
-@import url("https://fonts.googleapis.com/css?family=Mulish");
-
@import "~ui-frontend-common/sass/icons/vitamui-icons.css";
@import "~ui-frontend-common/sass/theme";
@@ -11,7 +5,6 @@ $grid-gutter-width: 20px;
@import "~bootstrap/scss/bootstrap-grid";
-@import "material-theme";
@import "form";
@import "login";
@import "sidepanel";
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.scss b/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.scss
index 8f8c4f88f..bd8cbed93 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.scss
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.scss
@@ -8,7 +8,7 @@
.layer {
width: 33px;
height: 39px;
- font-family: 'Mulish', sans-serif;
+
font-size: 30px;
font-weight: normal;
font-style: normal;
diff --git a/ui/ui-frontend/projects/starter-kit/src/sass/styles.scss b/ui/ui-frontend/projects/starter-kit/src/sass/styles.scss
index e03d9e311..201f6e873 100644
--- a/ui/ui-frontend/projects/starter-kit/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/starter-kit/src/sass/styles.scss
@@ -1,6 +1,3 @@
-@import '~@angular/material/prebuilt-themes/indigo-pink.css';
-@import '~material-design-icons/iconfont/material-icons.css';
-
@import '~ui-frontend-common/sass/icons/vitamui-icons.css';
@import '~ui-frontend-common/sass/theme';
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 d212b0bce..ce4c76510 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
@@ -73,7 +73,7 @@ input {
color: var(--vitamui-grey-900);
font-size: 15px;
font-weight: 500;
- font-family: 'Mulish', sans-serif;
+
background: none;
border: none;
transition: margin $anim-timing;
diff --git a/ui/ui-frontend/projects/vitamui-library/src/sass/_date-filter.scss b/ui/ui-frontend/projects/vitamui-library/src/sass/_date-filter.scss
index 2faafc447..d010f56dc 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/sass/_date-filter.scss
+++ b/ui/ui-frontend/projects/vitamui-library/src/sass/_date-filter.scss
@@ -8,7 +8,7 @@
background-color: $white;
border: solid 1px var(--vitamui-secondary);
border-radius: 5px;
- font-family: 'Mulish', sans-serif;
+
font-size: 15px;
text-align: center;
color: var(--vitamui-secondary);
--
GitLab