♻️ Use scss + use css variable inheritance instead of recalculating +…

… fix little gap to the right of header

angular.json

@@ -141,7 +141,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "cp",
-      "style": "css"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "cp"

src/app/app.component.ts

@@ -11,7 +11,7 @@ const environmentName: string = environment.evn;
 @Component({
   selector: 'cp-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit, AfterViewInit {
   private _version: string;

src/app/basket/basket.component.ts

@@ -17,7 +17,7 @@ import {
 @Component({
   selector: 'cp-basket',
   templateUrl: './basket.component.html',
-  styleUrls: ['./basket.component.css']
+  styleUrls: ['./basket.component.scss']
 })
 export class BasketComponent implements OnInit, AfterViewInit {
   private _complexBasket: { [name: string]: BasketItem };

src/app/complex/complex-details/complex-details.component.ts

@@ -15,7 +15,7 @@ declare const expressionAtlasHeatmapHighcharts: any;
 @Component({
   selector: 'cp-complex-details',
   templateUrl: './complex-details.component.html',
-  styleUrls: ['./complex-details.component.css']
+  styleUrls: ['./complex-details.component.scss']
 })
 export class ComplexDetailsComponent implements OnInit, AfterViewInit, OnDestroy {
 

src/app/complex/complex-details/complex-disease/chembl-crossreference/chembl-crossreference.component.ts

@@ -4,7 +4,7 @@ import {CrossReference} from '../../../shared/model/complex-details/cross-refere
 @Component({
   selector: 'cp-chembl-crossreference',
   templateUrl: './chembl-crossreference.component.html',
-  styleUrls: ['./chembl-crossreference.component.css']
+  styleUrls: ['./chembl-crossreference.component.scss']
 })
 export class ChemblCrossreferenceComponent implements OnInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-disease/complex-disease.component.ts

@@ -5,7 +5,7 @@ import {CrossReference} from '../../shared/model/complex-details/cross-reference
 @Component({
   selector: 'cp-complex-disease',
   templateUrl: './complex-disease.component.html',
-  styleUrls: ['./complex-disease.component.css']
+  styleUrls: ['./complex-disease.component.scss']
 })
 
 export class ComplexDiseaseComponent implements OnInit {

src/app/complex/complex-details/complex-disease/efo-crossreferences/efo-crossreferences.component.ts

@@ -8,7 +8,7 @@ import {Category} from '../../../../shared/google-analytics/types/category.enum'
 @Component({
   selector: 'cp-efo-crossreferences',
   templateUrl: './efo-crossreferences.component.html',
-  styleUrls: ['./efo-crossreferences.component.css']
+  styleUrls: ['./efo-crossreferences.component.scss']
 })
 export class EfoCrossreferencesComponent implements OnInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-evidence/complex-evidence.component.ts

@@ -6,7 +6,7 @@ import {humapUrl} from '../../complex-portal-utils';
 @Component({
   selector: 'cp-complex-evidence',
   templateUrl: './complex-evidence.component.html',
-  styleUrls: ['./complex-evidence.component.css']
+  styleUrls: ['./complex-evidence.component.scss']
 })
 export class ComplexEvidenceComponent implements OnInit {
 

src/app/complex/complex-details/complex-expression/complex-expression.component.ts

@@ -6,7 +6,7 @@ import {MIJson} from 'complexviewer';
 @Component({
   selector: 'cp-complex-expression',
   templateUrl: './complex-expression.component.html',
-  styleUrls: ['./complex-expression.component.css']
+  styleUrls: ['./complex-expression.component.scss']
 })
 export class ComplexExpressionComponent implements OnInit {
   private _gxa = null;

src/app/complex/complex-details/complex-expression/go-celluar-crossreference/go-celluar-crossreference.component.ts

@@ -4,7 +4,7 @@ import {CrossReference} from '../../../shared/model/complex-details/cross-refere
 @Component({
   selector: 'cp-go-celluar-crossreference',
   templateUrl: './go-celluar-crossreference.component.html',
-  styleUrls: ['./go-celluar-crossreference.component.css']
+  styleUrls: ['./go-celluar-crossreference.component.scss']
 })
 export class GoCelluarCrossreferenceComponent implements OnInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-footer/complex-footer.component.ts

@@ -3,7 +3,7 @@ import {Component, OnInit, input } from '@angular/core';
 @Component({
   selector: 'cp-complex-footer',
   templateUrl: './complex-footer.component.html',
-  styleUrls: ['./complex-footer.component.css']
+  styleUrls: ['./complex-footer.component.scss']
 })
 export class ComplexFooterComponent implements OnInit {
   institute = input<string>();

src/app/complex/complex-details/complex-function/agonists/agonists.component.ts

@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-agonists',
   templateUrl: './agonists.component.html',
-  styleUrls: ['./agonists.component.css']
+  styleUrls: ['./agonists.component.scss']
 })
 export class AgonistsComponent implements OnInit {
   private _agonists: string[];

src/app/complex/complex-details/complex-function/antagonists/antagonists.component.ts

@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-antagonists',
   templateUrl: './antagonists.component.html',
-  styleUrls: ['./antagonists.component.css']
+  styleUrls: ['./antagonists.component.scss']
 })
 export class AntagonistsComponent implements OnInit {
   private _antagonists: string[];

src/app/complex/complex-details/complex-function/catalytic-activity/catalytic-activity.component.ts

@@ -7,7 +7,7 @@ import '../../../../../../node_modules/@swissprot/rhea-reaction-visualizer';
 @Component({
   selector: 'cp-catalytic-activity',
   templateUrl: './catalytic-activity.component.html',
-  styleUrls: ['./catalytic-activity.component.css']
+  styleUrls: ['./catalytic-activity.component.scss']
 })
 export class CatalyticActivityComponent implements OnInit {
   private _intenzCrossReferences: IntEnzCrossReference[];

src/app/complex/complex-details/complex-function/complex-function.component.ts

@@ -6,7 +6,7 @@ import {IntEnzCrossReference} from '../../shared/model/complex-details/intenz-cr
 @Component({
   selector: 'cp-complex-function',
   templateUrl: './complex-function.component.html',
-  styleUrls: ['./complex-function.component.css']
+  styleUrls: ['./complex-function.component.scss']
 })
 export class ComplexFunctionComponent implements OnInit, AfterViewInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-function/go-crossreferences/go-biological-process/go-biological-process.component.ts

@@ -4,7 +4,7 @@ import {CrossReference} from '../../../../shared/model/complex-details/cross-ref
 @Component({
   selector: 'cp-go-biological-process',
   templateUrl: 'go-biological-process.component.html',
-  styleUrls: ['go-biological-process.component.css']
+  styleUrls: ['go-biological-process.component.scss']
 })
 export class GoBiologicalProcessComponent implements OnInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-function/go-crossreferences/go-crossreferences.component.ts

@@ -4,7 +4,7 @@ import {CrossReference} from '../../../shared/model/complex-details/cross-refere
 @Component({
   selector: 'cp-go-crossreferences',
   templateUrl: './go-crossreferences.component.html',
-  styleUrls: ['./go-crossreferences.component.css']
+  styleUrls: ['./go-crossreferences.component.scss']
 })
 export class GoCrossreferencesComponent implements OnInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-function/go-crossreferences/go-molecular-function/go-molecular-function.component.ts

@@ -4,7 +4,7 @@ import {CrossReference} from '../../../../shared/model/complex-details/cross-ref
 @Component({
   selector: 'cp-go-molecular-function',
   templateUrl: 'go-molecular-function.component.html',
-  styleUrls: ['go-molecular-function.component.css']
+  styleUrls: ['go-molecular-function.component.scss']
 })
 export class GoMolecularFunctionComponent implements OnInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-function/ligands/ligands.component.ts

@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-ligands',
   templateUrl: './ligands.component.html',
-  styleUrls: ['./ligands.component.css']
+  styleUrls: ['./ligands.component.scss']
 })
 export class LigandsComponent implements OnInit {
   private _ligands: string[];

src/app/complex/complex-details/complex-function/reactome-crossreferences/reactome-cross-references.component.ts

@@ -12,7 +12,7 @@ import {forkJoin} from 'rxjs';
 @Component({
   selector: 'cp-reactome-cross-references',
   templateUrl: './reactome-cross-references.component.html',
-  styleUrls: ['./reactome-cross-references.component.css']
+  styleUrls: ['./reactome-cross-references.component.scss']
 })
 
 export class ReactomeCrossReferencesComponent implements OnInit {

src/app/complex/complex-details/complex-header/complex-header.component.ts

@@ -8,7 +8,7 @@ import {ComplexDetails} from '../../shared/model/complex-details/complex-details
 @Component({
   selector: 'cp-complex-header',
   templateUrl: './complex-header.component.html',
-  styleUrls: ['./complex-header.component.css']
+  styleUrls: ['./complex-header.component.scss']
 })
 export class ComplexHeaderComponent implements OnInit, AfterViewInit {
 

src/app/complex/complex-details/complex-header/download-modal/download-modal.component.ts

@@ -15,7 +15,7 @@ interface Format {
 @Component({
   selector: 'cp-download-modal',
   templateUrl: './download-modal.component.html',
-  styleUrls: ['./download-modal.component.css']
+  styleUrls: ['./download-modal.component.scss']
 })
 export class DownloadModalComponent implements OnInit {
   complexAC = input.required<string>();

src/app/complex/complex-details/complex-participants/complex-participant-legend/complex-participant-legend.component.ts

@@ -5,7 +5,7 @@ import {ComplexParticipant} from '../complex-participants.component';
 @Component({
   selector: 'cp-complex-participant-legend',
   templateUrl: './complex-participant-legend.component.html',
-  styleUrls: ['./complex-participant-legend.component.css'],
+  styleUrls: ['./complex-participant-legend.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class ComplexParticipantLegendComponent {

src/app/complex/complex-details/complex-participants/complex-participants.component.ts

@@ -22,7 +22,7 @@ export class ComplexParticipant {
 @Component({
   selector: 'cp-complex-participants',
   templateUrl: './complex-participants.component.html',
-  styleUrls: ['./complex-participants.component.css'],
+  styleUrls: ['./complex-participants.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class ComplexParticipantsComponent implements OnInit, AfterViewInit {

src/app/complex/complex-details/complex-properties/assemblies/assemblies.component.ts

@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-assemblies',
   templateUrl: './assemblies.component.html',
-  styleUrls: ['./assemblies.component.css']
+  styleUrls: ['./assemblies.component.scss']
 })
 export class AssembliesComponent implements OnInit {
   private _assemblies: string[];

src/app/complex/complex-details/complex-properties/complex-properties.component.ts

@@ -4,7 +4,7 @@ import {CrossReference} from '../../shared/model/complex-details/cross-reference
 @Component({
   selector: 'cp-complex-properties',
   templateUrl: './complex-properties.component.html',
-  styleUrls: ['./complex-properties.component.css']
+  styleUrls: ['./complex-properties.component.scss']
 })
 export class ComplexPropertiesComponent implements OnInit {
   private _propertiesDescription: string[];

src/app/complex/complex-details/complex-properties/emdb-crossreferences/emdb-crossreferences.component.ts

@@ -4,7 +4,7 @@ import {CrossReference} from '../../../shared/model/complex-details/cross-refere
 @Component({
   selector: 'cp-emdb-crossreferences',
   templateUrl: './emdb-crossreferences.component.html',
-  styleUrls: ['./emdb-crossreferences.component.css']
+  styleUrls: ['./emdb-crossreferences.component.scss']
 })
 export class EmdbCrossreferencesComponent implements OnInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-properties/pdb-crossreferences/pdb-crossreferences.component.ts

@@ -4,7 +4,7 @@ import {CrossReference} from '../../../shared/model/complex-details/cross-refere
 @Component({
   selector: 'cp-pdb-crossreferences',
   templateUrl: './pdb-crossreferences.component.html',
-  styleUrls: ['./pdb-crossreferences.component.css']
+  styleUrls: ['./pdb-crossreferences.component.scss']
 })
 export class PdbCrossreferencesComponent implements OnInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-references/complex-references.component.ts

@@ -4,7 +4,7 @@ import {CrossReference} from '../../shared/model/complex-details/cross-reference
 @Component({
   selector: 'cp-complex-references',
   templateUrl: './complex-references.component.html',
-  styleUrls: ['./complex-references.component.css']
+  styleUrls: ['./complex-references.component.scss']
 })
 export class ComplexReferencesComponent implements OnInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-references/euro-pmc-crossreferences/euro-pmc-crossreferences.component.ts

@@ -17,7 +17,7 @@ interface Publication {
 @Component({
   selector: 'cp-euro-pmc-crossreferences',
   templateUrl: 'euro-pmc-crossreferences.component.html',
-  styleUrls: ['euro-pmc-crossreferences.component.css']
+  styleUrls: ['euro-pmc-crossreferences.component.scss']
 })
 
 export class EuroPmcCrossreferencesComponent implements OnInit {

src/app/complex/complex-details/complex-references/external-resources/external-resources.component.ts

@@ -5,7 +5,7 @@ import {humapUrl} from '../../../complex-portal-utils';
 @Component({
   selector: 'cp-external-resources',
   templateUrl: './external-resources.component.html',
-  styleUrls: ['./external-resources.component.css']
+  styleUrls: ['./external-resources.component.scss']
 })
 export class ExternalResourcesComponent implements OnInit {
   private _crossReferences: CrossReference[];

src/app/complex/complex-details/complex-references/synonyms/synonyms.component.ts

@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-synonyms',
   templateUrl: 'synonyms.component.html',
-  styleUrls: ['synonyms.component.css']
+  styleUrls: ['synonyms.component.scss']
 })
 export class SynonymsComponent implements OnInit {
   private _synonyms: string[];

src/app/complex/complex-details/complex-references/systematic-name/systematic-name.component.ts

@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-systematic-name',
   templateUrl: 'systematic-name.component.html',
-  styleUrls: ['systematic-name.component.css']
+  styleUrls: ['systematic-name.component.scss']
 })
 export class SystematicNameComponent implements OnInit {
   private _systematicName: string;

src/app/complex/complex-details/shared/go-to/go-to.component.ts

@@ -7,7 +7,7 @@ import {PageScrollService} from 'ngx-page-scroll-core';
 @Component({
   selector: 'cp-go-to',
   templateUrl: './go-to.component.html',
-  styleUrls: ['./go-to.component.css'],
+  styleUrls: ['./go-to.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GoToComponent implements OnInit, AfterViewInit {

src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.ts

@@ -5,7 +5,7 @@ import {SpeciesPipe} from '../../../../shared/pipe/species.pipe';
 @Component({
   selector: 'cp-gxa-heatmap',
   templateUrl: 'gxa-heatmap.component.html',
-  styleUrls: ['gxa-heatmap.component.css']
+  styleUrls: ['gxa-heatmap.component.scss']
 })
 export class GxaHeatmapComponent implements OnInit {
   private _gxa;

src/app/complex/complex-details/shared/visualisation/litmol-viewer/litmol-viewer.component.ts

@@ -9,7 +9,7 @@ const baseURL = environment.pdb_base_url;
 @Component({
   selector: 'cp-litmol-viewer',
   templateUrl: 'litmol-viewer.component.html',
-  styleUrls: ['litmol-viewer.component.css']
+  styleUrls: ['litmol-viewer.component.scss']
 })
 export class LitmolViewerComponent implements OnInit, OnChanges {
   private _plugin: any;

src/app/complex/complex-details/shared/visualisation/node-diagram/node-diagram.component.ts

@@ -3,7 +3,7 @@ import {AfterViewInit, Component, ElementRef, input, OnChanges, SimpleChanges, V
 @Component({
   selector: 'cp-node-diagram',
   templateUrl: './node-diagram.component.html',
-  styleUrls: ['./node-diagram.component.css']
+  styleUrls: ['./node-diagram.component.scss']
 })
 export class NodeDiagramComponent implements AfterViewInit, OnChanges {
   shape = input<NodeShape>(NodeShape.ELLIPSE);

src/app/complex/complex-details/shared/visualisation/reactome-diagram/reactome-diagram.component.ts

@@ -8,7 +8,7 @@ const baseURL = environment.reactome_base_url;
 @Component({
   selector: 'cp-reactome-diagram',
   templateUrl: 'reactome-diagram.component.html',
-  styleUrls: ['reactome-diagram.component.css']
+  styleUrls: ['reactome-diagram.component.scss']
 })
 export class ReactomeDiagramComponent implements OnInit, OnChanges {
   private diagramContext: any;

src/app/complex/complex-organisms/complex-organism/complex-organism.component.ts

@@ -9,7 +9,7 @@ import {APP_BASE_HREF} from '@angular/common';
 @Component({
   selector: 'cp-complex-organism',
   templateUrl: './complex-organism.component.html',
-  styleUrls: ['./complex-organism.component.css']
+  styleUrls: ['./complex-organism.component.scss']
 })
 export class ComplexOrganismComponent implements OnInit {
   private _organism: ComplexOrganisms;

src/app/complex/complex-organisms/complex-organisms.component.ts

@@ -8,7 +8,7 @@ import {Facet} from '../shared/model/complex-results/facet.model';
 @Component({
   selector: 'cp-complex-organisms',
   templateUrl: './complex-organisms.component.html',
-  styleUrls: ['./complex-organisms.component.css']
+  styleUrls: ['./complex-organisms.component.scss']
 })
 export class ComplexOrganismsComponent implements OnInit, AfterViewInit {
   private _organisms: ComplexOrganisms[];

src/app/complex/complex-results/complex-filter/complex-filter.component.ts

@@ -14,7 +14,7 @@ interface Confidence {
 @Component({
   selector: 'cp-complex-filter',
   templateUrl: './complex-filter.component.html',
-  styleUrls: ['./complex-filter.component.css']
+  styleUrls: ['./complex-filter.component.scss']
 })
 export class ComplexFilterComponent implements OnInit {
 

src/app/complex/complex-results/complex-list/complex-list.component.ts

@@ -6,7 +6,7 @@ import {Complex} from '../../shared/model/complex-results/complex.model';
 @Component({
   selector: 'cp-complex-list',
   templateUrl: './complex-list.component.html',
-  styleUrls: ['./complex-list.component.css']
+  styleUrls: ['./complex-list.component.scss']
 })
 export class ComplexListComponent implements OnInit {
   complexSearch = input<ComplexSearchResult>();

src/app/complex/complex-results/complex-navigator/complex-navigator-buttons/complex-navigator-buttons.component.ts

@@ -9,7 +9,7 @@ import {Action} from '../../../../shared/google-analytics/types/action.enum';
 @Component({
   selector: 'cp-complex-navigator-buttons',
   templateUrl: './complex-navigator-buttons.component.html',
-  styleUrls: ['./complex-navigator-buttons.component.css']
+  styleUrls: ['./complex-navigator-buttons.component.scss']
 })
 export class ComplexNavigatorButtonsComponent {
 

src/app/complex/complex-results/complex-navigator/complex-navigator-rating/complex-navigator-rating.component.ts

@@ -6,7 +6,7 @@ const COMPLEX_NAVIGATOR_RATING = 'already_rated';
 @Component({
   selector: 'cp-complex-navigator-rating',
   templateUrl: './complex-navigator-rating.component.html',
-  styleUrls: ['./complex-navigator-rating.component.css']
+  styleUrls: ['./complex-navigator-rating.component.scss']
 })
 export class ComplexNavigatorRatingComponent implements OnInit {
   selectedRating: number;