Rename all css files to less. Import less from library instead of css

explore/angular.json

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

explore/src/app/fos/fos.component.css

@@ -1,4 +0,0 @@
-.custom-bottom-border {
-	border-bottom: solid 5px rgba(var(--explore-color-rgb), var(--opacity));
-
-}

explore/src/app/fos/fos.component.html

@@ -111,9 +111,9 @@
 	</ng-container>
 	<ng-container *ngIf="keyword && keyword.length">
 		<div class="uk-margin-medium-top uk-padding-small">
-			<ng-container *ngFor="let item of viewResults;">
+			<ng-container *ngFor="let item of viewResults; let i=index">
 				<div
-					class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize custom-bottom-border">
+					class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize" [class.custom-bottom-border]="i < viewResults.length - 1">
 					<h2 class="uk-h4 uk-margin-remove">
 						<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
 							class="uk-link-text" [innerHTML]="highlightKeyword(item.id)">

explore/src/app/fos/fos.component.less

@@ -0,0 +1,5 @@
+@import (reference) "~src/assets/openaire-theme/less/_import-variables";
+
+.custom-bottom-border {
+	border-bottom: 5px solid fade(@explore-color, @global-opacity);
+}

explore/src/app/fos/fos.component.ts

@@ -16,7 +16,7 @@ import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
 @Component({
 	selector: 'fos',
 	templateUrl: 'fos.component.html',
-	styleUrls: ['fos.component.css']
+	styleUrls: ['fos.component.less']
 })
 export class FosComponent implements OnInit, OnDestroy {
 	public url: string = null;
@@ -174,4 +174,4 @@ export class FosComponent implements OnInit, OnDestroy {
     this._meta.updateTag({content: description}, "name='description'");
     this._meta.updateTag({content: description}, "property='og:description'");
   }
-}
+}

explore/src/app/home/home.component.css

@@ -1,42 +0,0 @@
-.home-background {
-  background-color: var(--light-color);
-}
-.link-actions img {
-	width: 17px;
-}
-.trello-button-blue {
-	background-color: #0076BA;
-	color: white;
-}
-.trello-button-blue:hover {
-	background-color: var(--secondary-color);
-}
-.home-logo img {
-	-webkit-filter: grayscale(1);
-	filter: grayscale(1);
-	transition-duration: 0.3s;
-}
-.home-logo:hover img {
-	-webkit-filter: grayscale(0);
-	filter: grayscale(0);
-	transition-duration: 0.3s;
-}
-#custom-links icon {
-	color: var(--primary-color);
-	/* transition: all 0.3s ease; */
-}
-#custom-links a:hover .link-title {
-	color: var(--secondary-color);
-}
-/* #custom-links a:hover icon {
-	transform: translateX(7px);
-	transition: all 0.3s ease;
-} */
-@media only screen and (min-width: 960px){
-  .explore-dark-logo-background {
-    background-image: url("~src/assets/explore-assets/home/explore-dark-logo.svg");
-    background-repeat: no-repeat;
-    background-position: left 95%;
-		background-size: 65%;
-  }
-}

explore/src/app/home/home.component.html

@@ -282,9 +282,9 @@
 			<h2 class="uk-heading-large uk-margin-medium-bottom uk-margin-remove-top">
 				you may
 			</h2>
-			<div id="custom-links" class="uk-padding uk-grid uk-child-width-1-2@m uk-text-bold" uk-grid uk-height-match="target: .link-title;">
+			<div class="uk-padding uk-grid uk-child-width-1-2@m uk-text-bold" uk-grid uk-height-match="target: .link-title;">
 				<div>
-					<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
+					<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal custom-link">
 						<a href="https://provide.openaire.eu/home" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
 							<span class="link-title">have your repository, Journal or CRIS system indexed in EXPLORE and take advantage of services for enriching metadata and counting usage?</span>
 							<icon name="east" ratio="1.5"></icon>
@@ -292,7 +292,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
+					<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal custom-link">
 						<a href="https://canada.explore.openaire.eu/" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
 							<span class="link-title">use EXPLORE as an application platform as a service (aPaaS) and set up a national portal for Open Science, such as Canada.EXPLORE?</span>
 							<icon name="east" ratio="1.5"></icon>

explore/src/app/home/home.component.less

@@ -0,0 +1,47 @@
+@import (reference) "~src/assets/openaire-theme/less/_import-variables";
+
+@trello-color: #0076BA;
+
+.home-background {
+  background-color: @global-inverse-color;
+}
+
+.link-actions img {
+  width: 17px;
+}
+
+.home-logo {
+  img {
+    -webkit-filter: grayscale(1);
+    filter: grayscale(1);
+    transition-duration: 0.3s;
+  }
+
+  &:hover img {
+    -webkit-filter: grayscale(0);
+    filter: grayscale(0);
+    transition-duration: 0.3s;
+  }
+}
+
+.custom-link {
+  border-bottom: @global-border-width solid @global-border;
+
+  icon {
+    color: @global-primary-background;
+  }
+
+  a:hover .link-title {
+    color: @global-secondary-background;
+  }
+
+}
+
+@media only screen and (min-width: @breakpoint-medium) {
+  .explore-dark-logo-background {
+    background-image: url("~src/assets/explore-assets/home/explore-dark-logo.svg");
+    background-repeat: no-repeat;
+    background-position: left 95%;
+    background-size: 65%;
+  }
+}

explore/src/app/home/home.component.ts

@@ -36,7 +36,7 @@ import {NumberUtils} from '../openaireLibrary/utils/number-utils.class';
 @Component({
   selector: 'home',
   templateUrl: 'home.component.html',
-  styleUrls: ['home.component.css']
+  styleUrls: ['home.component.less']
 })
 export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
   // MAX 12 logos in every slide

explore/src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit db5c95fe248c0e4fe059602185ee8a6161d9949f
+Subproject commit f4a723d3acd5b7a25a245f60865eda63db4658b5

explore/src/app/sdg/sdg.component.css

@@ -1,71 +0,0 @@
-.custom-sdg-dot:after {
-	content: "";
-	background-image: url(../../assets/explore-assets/sdg-dot-img.svg);
-	display: inline-block;
-	background-size: 100% 100%;
-	height: 18px;
-  width: 18px;
-	margin-left: 10px;
-}
-.sdg-card-text-color {
-	color: #F9F9F9 !important;
-}
-.sdg-card {
-	width: 265px;
-	height: 255px;
-}
-.sdg-card img {
-	height: 40px;
-	width: auto;
-}
-.sdg-1 {
-	background-color: #E6233D !important;
-}
-.sdg-2 {
-	background-color: #DF9F00 !important;
-}
-.sdg-3 {
-	background-color: #19A220 !important;
-}
-.sdg-4 {
-	background-color: #D70023 !important;
-}
-.sdg-5 {
-	background-color: #FF0B00 !important;
-}
-.sdg-6 {
-	background-color: #00BFE8 !important;
-}
-.sdg-7 {
-	background-color: #FFC300 !important;
-}
-.sdg-8 {
-	background-color: #B10240 !important;
-}
-.sdg-9 {
-	background-color: #FF5D00 !important;
-}
-.sdg-10 {
-	background-color: #F50D86 !important;
-}
-.sdg-11 {
-	background-color: #FF8A00 !important;
-}
-.sdg-12 {
-	background-color: #CA8A03 !important;
-}
-.sdg-13 {
-	background-color: #2B772B !important;
-}
-.sdg-14 {
-	background-color: #0098DF !important;
-}
-.sdg-15 {
-	background-color: #00B91C !important;
-}
-.sdg-16 {
-	background-color: #0069A2 !important;
-}
-.sdg-17 {
-	background-color: #1C336A !important;
-}

explore/src/app/sdg/sdg.component.html

@@ -30,9 +30,9 @@
 			</div>
 		</div>
 		<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center uk-position-relative" uk-scrollspy-class>
-			<img src="../../assets/explore-assets/sdg-hero-img.svg" loading="lazy">
+			<img src="assets/explore-assets/sdg-hero-img.svg" loading="lazy">
-			<div class="uk-position-absolute uk-card uk-card-default uk-padding" style="bottom: 0; left: 0">
+			<div class="uk-position-bottom-left uk-card uk-card-default uk-padding">
-				<img src="../../assets/explore-assets/sdg-badge.png" loading="lazy" style="max-width: 215px">
+				<img src="assets/explore-assets/sdg-badge.png" loading="lazy" style="max-width: 215px">
 			</div>
 		</div>
 	</div>
@@ -48,16 +48,16 @@
 					class="uk-link-reset">
 					<div class="uk-card uk-card-default uk-card-hover" [class]="'sdg-card sdg-' + sdg.code">
 						<div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-between">
-							<div class="uk-flex uk-flex-middle uk-padding-small uk-padding-remove-bottom">
+							<div class="uk-flex uk-flex-middle uk-light uk-padding-small uk-padding-remove-bottom">
-								<div class="uk-text-bold sdg-card-text-color uk-h4 uk-margin-remove">
+								<div class="uk-text-bold uk-h4 uk-margin-remove">
 									{{sdg.code}}
 								</div>
-								<div class="uk-text-bold sdg-card-text-color uk-text-uppercase uk-text-small uk-margin-small-left">
+								<div class="uk-text-bold uk-text-uppercase uk-text-small uk-margin-small-left">
 									<span [innerHTML]="sdg.html"></span>
 								</div>
 							</div>
 							<div class="uk-text-center">
-								<img [src]="'../../assets/explore-assets/sdgs/g' + sdg.code + '.png'" alt="">
+								<img [src]="'assets/explore-assets/sdgs/g' + sdg.code + '.png'" alt="">
 							</div>
 							<div class="uk-text-center uk-padding-small uk-background-default" style="border-radius: 0 0 4px 4px;">
 								<span class="uk-text-large uk-text-bold uk-margin-small-bottom">{{sdg.number == null ? '0' : sdg.number | number}}</span>

explore/src/app/sdg/sdg.component.less

@@ -0,0 +1,30 @@
+@import (reference) "~src/assets/openaire-theme/less/_import-variables";
+
+@sdgs: #E6233D, #DF9F00, #19A220, #D70023, #FF0B00, #00BFE8, #FFC300, #B10240, #FF5D00,
+#F50D86, #FF8A00, #CA8A03, #2B772B, #0098DF, #00B91C, #0069A2, #1C336A;
+
+custom-sdg-dot:after {
+  content: "";
+  background-image: url("~src/assets/explore-assets/sdg-dot-img.svg");
+  display: inline-block;
+  background-size: 100% 100%;
+  height: 18px;
+  width: 18px;
+  margin-left: 10px;
+}
+
+.sdg-card {
+  width: 265px;
+  height: 255px;
+
+  img {
+    height: @global-control-height;
+    width: auto;
+  }
+
+  each(@sdgs, {
+    &.sdg-@{index} {
+      background-color: @value !important;
+    }
+  })
+}

explore/src/app/sdg/sdg.component.ts

@@ -16,7 +16,7 @@ import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
 @Component({
 	selector: 'sdg',
 	templateUrl: 'sdg.component.html',
-	styleUrls: ['sdg.component.css']
+	styleUrls: ['sdg.component.less']
 })
 export class SdgComponent implements OnInit, OnDestroy {
 	public url: string = null;
@@ -94,4 +94,4 @@ export class SdgComponent implements OnInit, OnDestroy {
     this._meta.updateTag({content: description}, "name='description'");
     this._meta.updateTag({content: description}, "property='og:description'");
   }
-}
+}

explore/src/assets/common-assets

@@ -1 +1 @@
-Subproject commit d577c6d69a55901e319cf0cf5b93f900f1cdeaab
+Subproject commit f6bd64ca6f99fdff03c8368eb381d42871154512

explore/src/assets/explore-custom.less

@@ -14,6 +14,12 @@
 /* Label */
 @label-secondary-color: @explore-color;
 
+/* General */
+@general-tab-featured-tab: @explore-color;
+
+/* Landing */
+@landing-portal-color: @explore-color;
+
 .deposit {
   @import (multiple) "~src/assets/openaire-theme/less/_import";
 }

explore/src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit c80b7371801d42611c611707ca933c1c83c3c672
+Subproject commit bace9ea21587351f209341dc274ef7522ec4475d

explore/src/deprecated.css

@@ -1,4 +0,0 @@
-@import "assets/openaire-theme/css/structure/variables.css";
-@import "assets/common-assets/library.css";
-
-.landing { --landing-text-primary-color: var(--explore-color); }

explore/src/styles.less

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