diff --git a/cas/cas-server/src/main/config/sass/_fonts.scss b/cas/cas-server/src/main/config/sass/_fonts.scss
index b409c82878df1af5a859aecacf105f3e48bfaa4f..18ce0bf2e7a15da72af510d16898992e1e71b4b0 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 3f71af3accc2f5044352f655d22ed8b98ca51c5d..8ac0ce54b0b6ebcf2b0b2bad94f3c1cb5d50dcf1 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 9d34e8b17a549da295afb9b7868a84a30dcd06f6..bd9f53e6391ed9945bdc44a9b17f37a09dea5604 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 3467fcf6610ec230d4b48932849e03b93ff59791..ce179dbe2897e68fb50383cf890d4c12b78b5e4e 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 faf7d70c64126994a244ae7b975c19358b3cc122..0adb90462cfdc7d0ab809da893e131145d00615a 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 6dbd87c3188aaf6a35acd994a0e40afc3f995c5b..50825b7b2feff319c455c39cca6e4f0eac39338e 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 5cfcf94d03bfdc53d0def63499d476e41a6afa57..adcaeb2bc7e7e18b73b00ed166f1412894da85d1 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 8f583876f0577daed4de762c8ae02d8e5c4b0468..715b8eb30223f9b8c50381f08b9601f1ef08e9fe 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 6a2e6e59438dd5e29683191c2a07e537ba83e844..80464ec7bc2426cc4c889f8cd807a16bf4f4c728 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 61ede20db18f04a12775e1e502fd99a805eb4232..0a19e89d5f0d5eec92ef0604126d1f7593a4d567 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 fd672cfeed4c70e9132a2f9783ea034ab94a085a..dbc6057a1b9806aee98cc92be6155a9b2942f078 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 51bc844ec86f1f566be5dbe7e0ef4b5a2a265e9d..5e84a58afa9c03d9e1c97a42b1852a2dd7432904 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 4736c9856dd2685f23a01f69568e5b5893a8d465..a8ef43d78aa5762e958ab021c960574d698e0d88 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 f2e0ceaaa60ecc533dfb6178fab1ed6d6edd6ccb..eb15c6dc4b21edde45bdac8ebcfec44cdb5c8d8e 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 b2691fd172848d1bb103c8e3d90ec1914f0de21b..4ae6358d748d538026ee7d6cdb9c4720e808c41e 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 b16bfe5ba2226cc4a00bbc5ff59ef97a45a0592b..e144dc5693a6a2e3760353b9dfab5854ffdf5fe8 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 8a8f3442fdffe90a53400ee53f88d53902430b67..dbdd345ea3f06a71b1aab375b4d5a17e9889f6f6 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 ba75c1b781ec7030cd18b109750c05b5740cf4ff..39a874271cb700722f4c78b8dd6ffd1ba5fbdb56 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 8f506297ae6802dcf532369a9998604238e5b439..a52c4b37f5dba701a4fe9e2cfe72fd134f1cb381 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 8f242681b96ea9f38c783a97cf69c86b6af759d7..05439dc152b227e4e74b1621ca4fd3b9db817808 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 1096724c84d7d31cc8a2170250d89ba8e7dcaf8c..14dc65e1d38d20beca267ebaef2261e6b103d752 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 4f3ce071a8920c3b40fc8db3c405db883b3fed5a..4ebd241ad7150dcc67fbba8197c72d951b58dd07 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 799262d526e1823ed6c64283a8354acbd3594627..3c3ff648e4bf48156c3de3201cf523cd39d64762 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 c5d218c1c2f90e4b8d691e2cdfe7aea06463f0c6..41ea73e9790c6a91f59e6b0619569af135f41eaa 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 ebe19a2665e5e9839cd776a3cf0a953c1757fc97..5989250424ce6e220a96bd5095ef87628abd401f 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 66c712530f1fda9ad12da42e779f99cd3cd0f71d..d8dcb01ce30e54d125ebe78df766868a64152d9a 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 bc7928e97bffa7a3dae7b1d800a45d337815bff9..1d5a271bfa052539e4a233959f25d76c5cbc819a 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 c03231c5f54e30c762b8b9c79f8b1bfbb6ceb3aa..523a457c8245619439c4cb94cfa9011d810e4920 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 92d415b85ef4a8c783485d3d07768cb19393c5e5..15efd985990fa37633baa0bc1b32a4c9daa1f64d 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 afd14006ee45e1b08912e54f3a44386951216e51..30888eb28130f05b658bd4eda6cb5a0492fa538e 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 03c03d76e5978fd4aeb990ccd3f9702b75e871fd..33bcbe13acd48d7cae3c8100fc6108392ec525b5 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 411e6e933edabc73f656b37d2ad035369f5b5b10..ba849252ac61d46f3ce1c1684549d89aa3e8d92f 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 e0cdc8eaf9878828445fccc2e0bee4afd9abf7fb..b1623e0d1d7f0e54499fbbea6e51a4d0463c7acb 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 2320267341f5a0f3840841291d788a3c3a6a1148..be8a2eeaff935ad2556f3704c9cf84dd5458a16c 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 f3c292024a00c991905850b4cbd2884193d9c676..5cc775039ddf9aa2b56bad11c0f0e2863781f323 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 022482ab5231e4a00400d00c08074d97e7238e23..8376c8d30f7eadf8336543bde4a5f34bec08975b 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 022482ab5231e4a00400d00c08074d97e7238e23..8376c8d30f7eadf8336543bde4a5f34bec08975b 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 022482ab5231e4a00400d00c08074d97e7238e23..8376c8d30f7eadf8336543bde4a5f34bec08975b 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 8f506297ae6802dcf532369a9998604238e5b439..0000000000000000000000000000000000000000
--- 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 6574d237b91b3b0e46e780b11f115b87335859dc..3bf75f399b4a31447de8496951e9a8917c017415 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 d8169a07ead970f66a7808eb890c0b752fd5d200..43f39776429cc7e76b075c7cb56a877745a605fd 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 8f8c4f88f0eb7d57741bf8479e3b273d124ffa44..bd8cbed93ff3c4ec97647832347a65ec4091477b 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 e03d9e31122afc90b967212b22eb9cda6d650d98..201f6e87351288e87a1cb42b786a7af32c3e9b54 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 d212b0bce9d820a15492b1668472aa8f6f47b122..ce4c765108054967f5174722b9bf442d10db1533 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 2faafc447bf5f33093e3b40631d98932307bb6b0..d010f56dcfd68c77d5d9f67c123949b8e2b6e52b 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);