Import library less. Rename all component css to less

angular.json

@@ -48,7 +48,6 @@
             ],
             "styles": [
               "src/styles.less",
-              "src/deprecated.css",
               "src/assets/common-assets/library-css/material.scss"
             ],
             "scripts": [

package.json

@@ -42,7 +42,7 @@
     "rxjs": "^6.5.1",
     "ts-md5": "^1.2.0",
     "tslib": "^2.0.0",
-    "uikit": "^3.12.0",
+    "uikit": "3.12.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {

src/app/browse-stakeholder/browse-stakeholder.component.css

@@ -1,24 +0,0 @@
-.uk-card {
-  --border-color: none;
-  --type-color: none;
-  border-bottom: 4px solid var(--border-color);
-}
-
-.uk-card .type {
-  color: var(--type-color);
-}
-
-.funder {
-  --border-color:  rgba(60, 159, 148, 0.3);
-  --type-color: #3C9F94;
-}
-
-.ri {
-  --border-color:  rgba(208, 35, 174, 0.3);
-  --type-color: #D023AE;
-}
-
-.organization {
-  --border-color:  rgba(226, 139, 108, 0.3);
-  --type-color: #E28B6C;
-}

src/app/browse-stakeholder/browse-stakeholder.component.less

@@ -0,0 +1,25 @@
+@funder-color: #3C9F94;
+@ri-color: #D023AE;
+@organization-color: #E28B6C;
+
+.setType(@color) {
+  border-bottom: 4px solid fade(@color, 30%);
+
+  & .type {
+    color: @color;
+  }
+}
+
+.uk-card {
+  &.funder {
+    .setType(@funder-color);
+  }
+
+  &.ri {
+    .setType(@ri-color);
+  }
+
+  &.organization {
+    .setType(@organization-color);
+  }
+}

src/app/browse-stakeholder/browse-stakeholder.component.ts

@@ -11,7 +11,7 @@ import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
 @Component({
   selector: 'browse-stakeholder',
   templateUrl: 'browse-stakeholder.component.html',
-  styleUrls: ['browse-stakeholder.component.css']
+  styleUrls: ['browse-stakeholder.component.less']
 })
 export class BrowseStakeholderComponent {
   @Input() public stakeholder: StakeholderInfo = null;

src/app/contact/contact.component.css

@@ -1 +0,0 @@
-

src/app/contact/contact.component.ts

@@ -16,8 +16,7 @@ import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
 
 @Component({
     selector: 'contact',
-    templateUrl: './contact.component.html',
+    templateUrl: './contact.component.html'
-    styleUrls: ['contact.component.css']
 })
 export class ContactComponent implements OnInit {
     public url: string = null;

src/app/home/home.component.css

@@ -1,41 +0,0 @@
-.home-background {
-  background-color: var(--light-color);
-}
-
-@media only screen and (min-width: 960px) {
-  .monitor-dark-logo-background {
-    background-image: url("~src/assets/monitor-assets/home/monitor-dark-logo.svg");
-    background-repeat: no-repeat;
-    background-position: left 95%;
-    background-size: 65%;
-  }
-}
-
-.graph-background {
-  background-image: url('~src/assets/monitor-assets/home/graph.svg');
-  background-position-y: 50%;
-  background-position-x: -5%;
-  background-size: 25%;
-}
-
-.contact-us .left img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 160px;
-  height: 190px;
-  object-fit: cover;
-  border-radius: 18px;
-  transform: matrix(1, -0.07, 0.07, 1, 0, 0);
-}
-
-.contact-us .right img {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 160px;
-  height: 190px;
-  object-fit: cover;
-  border-radius: 18px;
-  transform: matrix(1, 0.07, -0.07, 1, 0, 0);
-}

src/app/home/home.component.less

@@ -0,0 +1,47 @@
+@import (reference) "~src/assets/openaire-theme/less/_import-variables";
+
+.home-background {
+  background-color: @global-inverse-color;
+}
+
+@media only screen and (min-width: @breakpoint-medium) {
+  .monitor-dark-logo-background {
+    background-image: url("~src/assets/monitor-assets/home/monitor-dark-logo.svg");
+    background-repeat: no-repeat;
+    background-position: left 95%;
+    background-size: 65%;
+  }
+}
+
+.graph-background {
+  background-image: url('~src/assets/monitor-assets/home/graph.svg');
+  background-position-y: 50%;
+  background-position-x: -5%;
+  background-size: 25%;
+}
+
+.contact-us {
+
+  .left img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 160px;
+    height: 190px;
+    object-fit: cover;
+    border-radius: 18px;
+    transform: matrix(1, -0.07, 0.07, 1, 0, 0);
+  }
+
+  .right img {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 160px;
+    height: 190px;
+    object-fit: cover;
+    border-radius: 18px;
+    transform: matrix(1, 0.07, -0.07, 1, 0, 0);
+  }
+
+}

src/app/home/home.component.ts

@@ -1,12 +1,12 @@
 import {
-  Component,
-  ViewChild,
-  OnDestroy,
   AfterViewInit,
+  Component,
   ElementRef,
-  ViewChildren,
+  OnDestroy,
+  OnInit,
   QueryList,
-  OnInit
+  ViewChild,
+  ViewChildren
 } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
@@ -28,14 +28,13 @@ import {UserManagementService} from "../openaireLibrary/services/user-management
 import {properties} from "../../environments/environment";
 import {Subscriber} from "rxjs";
 import {QuickContactService} from '../openaireLibrary/sharedComponents/quick-contact/quick-contact.service';
-import {CanExitGuard, IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard";
+import {IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard";
-import {element} from "protractor";
 import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields";
 
 @Component({
   selector: 'home',
   templateUrl: 'home.component.html',
-  styleUrls: ['home.component.css']
+  styleUrls: ['home.component.less']
 })
 export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactivateComponent {
   public pageTitle = "OpenAIRE | Monitor";

src/app/learn-how/learn-how.component.ts

@@ -13,8 +13,8 @@ import {StakeholderEntities} from '../openaireLibrary/monitor/entities/stakehold
 
 @Component({
   selector: 'learn-how',
-  styleUrls: ['learn-how.component.css'],
   templateUrl: 'learn-how.component.html',
+  styleUrls: ['learn-how.component.less'],
 })
 export class LearnHowComponent {
   public pageContents = null;

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 770c3fb3eff99ddab059f0de657f576443b01a7d
+Subproject commit 9a03dd9a3db273c3aa44f751dd27bbc4a4b70681

src/assets/common-assets

@@ -1 +1 @@
-Subproject commit d577c6d69a55901e319cf0cf5b93f900f1cdeaab
+Subproject commit bb96e1c48fbc2090220d2b72415b929c3cc23492

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit a61c749816accd456cf30c9e4983d61282f28a89
+Subproject commit 3bc96a4bdccd2f09dab039759375fa8980e8e59e

src/deprecated.css

@@ -1,2 +0,0 @@
-@import "assets/openaire-theme/css/structure/variables.css";
-@import "assets/common-assets/library.css";

src/styles.less

@@ -1,3 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~src/assets/openaire-theme/less/_import";
+@import "~src/assets/common-assets/less/_import";
 @import "assets/monitor-custom";