style changes
This commit is contained in:
parent
09351701ab
commit
8719b56920
|
|
@ -133,6 +133,21 @@ export class ConfigurationService extends BaseComponent {
|
|||
return this._inAppNotificationsCountInterval || 3200;
|
||||
}
|
||||
|
||||
private _newReleaseNotificationLink: number;
|
||||
get newReleaseNotificationLink(): number {
|
||||
return this._newReleaseNotificationLink;
|
||||
}
|
||||
|
||||
private _newReleaseNotificationExpires: number;
|
||||
get newReleaseNotificationExpires(): number {
|
||||
return this._newReleaseNotificationExpires;
|
||||
}
|
||||
|
||||
private _newReleaseNotificationVersionCode: number;
|
||||
get newReleaseNotificationVersionCode(): number {
|
||||
return this._newReleaseNotificationVersionCode;
|
||||
}
|
||||
|
||||
public loadConfiguration(): Promise<any> {
|
||||
return new Promise((r, e) => {
|
||||
// We need to exclude all interceptors here, for the initial configuration request.
|
||||
|
|
@ -198,6 +213,9 @@ export class ConfigurationService extends BaseComponent {
|
|||
this._annotationServiceAddress = config.annotation_service.address;
|
||||
}
|
||||
this._inAppNotificationsCountInterval = config.inAppNotificationsCountInterval;
|
||||
this._newReleaseNotificationExpires = config.newReleaseNotification?.expires;
|
||||
this._newReleaseNotificationLink = config.newReleaseNotification?.link;
|
||||
this._newReleaseNotificationVersionCode = config.newReleaseNotification?.versionCode;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -244,7 +244,7 @@ export class DmpService {
|
|||
const principalId: Guid = this.authService.userId();
|
||||
let dmpUserRoles: DmpUserRole[] = null;
|
||||
if (principalId) {
|
||||
dmpUserRoles = dmpUsers.filter(element => element?.user?.id === principalId).map(x => x.role);
|
||||
dmpUserRoles = dmpUsers.filter(element => element.isActive == IsActive.Active && element?.user?.id === principalId).map(x => x.role);
|
||||
}
|
||||
return dmpUserRoles;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="row multiple-auto-complete" ng-form>
|
||||
<mat-chip-grid #chipList ngDefaultControl class="chip-list">
|
||||
<ng-container *ngIf="value as values;">
|
||||
<mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)">
|
||||
<mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)" class="chip-row">
|
||||
<ng-container *ngIf="getSelectedItem(value) as selectedItem;">
|
||||
<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{
|
||||
item: selectedItem
|
||||
|
|
|
|||
|
|
@ -19,18 +19,24 @@
|
|||
|
||||
}
|
||||
|
||||
.chip-row {
|
||||
height: auto;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.chip-text {
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
||||
.chip-list {
|
||||
}
|
||||
|
||||
|
||||
.chip-list {
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
padding-left: 0.8em;
|
||||
}
|
||||
|
||||
.title-subtitle-fn {
|
||||
height: auto;
|
||||
|
|
@ -76,12 +82,13 @@
|
|||
.option {
|
||||
line-height: 1rem;
|
||||
// height: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
mat-icon {
|
||||
margin: 0px 5px 0px 10px;
|
||||
}
|
||||
|
||||
mat-icon:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
|
@ -95,24 +102,29 @@
|
|||
max-height: 4.8em !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
.hide-placeholder{
|
||||
|
||||
.hide-placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
/* WebKit browsers */
|
||||
color: transparent;
|
||||
/* WebKit browsers */
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: transparent;
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: transparent;
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
/* Internet Explorer 10+ */
|
||||
color: transparent;
|
||||
/* Internet Explorer 10+ */
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,36 +3,57 @@
|
|||
<div *ngIf="this.dashboardStatistics">
|
||||
<div class="main-content">
|
||||
<div class="col">
|
||||
<div class="card col-auto mt-0" [style.display]="isVisible ? 'block' : 'none'">
|
||||
<a *ngIf="this.hasDmps()" class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
|
||||
|
||||
<p *ngIf="!this.hasDmps()" class="card-title mb-0 pt-4">{{'DASHBOARD.DMP-QUESTION' | translate}}</p>
|
||||
<p *ngIf="!this.hasDmps()" class="card-content mb-0">{{'DASHBOARD.INFO-DMP-TEXT' | translate}}</p>
|
||||
|
||||
<p *ngIf="!this.hasDmps()" class="card-content pt-3 mb-0">
|
||||
{{'DASHBOARD.NEW-QUESTION' | translate}} <a href="https://www.openaire.eu/how-to-create-a-data-management-plan" target="_blank"><u>{{'DASHBOARD.OPEN-AIR-GUIDE' | translate}}</u></a> {{'DASHBOARD.LEARN-MORE' | translate}}
|
||||
</p>
|
||||
<p *ngIf="this.hasDmps()" class="card-content mb-0 pt-0">{{'DASHBOARD.DMP-ABOUT-BEG' | translate}}
|
||||
<b>{{'DASHBOARD.DATASET-DESCRIPTIONS-DASHBOARD-TEXT' | translate}}</b>
|
||||
{{'DASHBOARD.DMP-ABOUT-END' | translate}}
|
||||
</p>
|
||||
|
||||
<div class="row d-flex align-items-center">
|
||||
<div *ngIf="!this.hasDmps()" class="col-auto add-dataset-btn d-flex">
|
||||
<button type="button" class="col-auto align-self-center normal-btn" (click)="openNewDmpDialog()">{{'DASHBOARD.START-YOUR-FIRST-DMP' | translate}}</button>
|
||||
<div class="row">
|
||||
<div *ngIf="newReleaseNotificationVisible" class="new-releases-card col-auto mt-0 mr-4">
|
||||
<a class="col-auto d-flex" (click)="dismissNewReleaseNotification()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
|
||||
<div class="row new-releases-hint-container m-0">
|
||||
<p class="new-releases-chip mb-0 col-auto">{{'NEW-RELEASE-NOTIFICATION.HINT' | translate}}</p>
|
||||
</div>
|
||||
<div *ngIf="this.hasDmps()" class="new-dataset-tour add-dataset-btn col-auto d-flex">
|
||||
<button mat-raised-button type="button" class="col-auto align-self-center yellow-btn" (click)="addNewDataset()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
|
||||
<p class="new-releases-title mb-0 pt-4">{{'NEW-RELEASE-NOTIFICATION.TITLE' | translate}}</p>
|
||||
<p class="new-releases-content mb-0">{{'NEW-RELEASE-NOTIFICATION.BODY' | translate}}</p>
|
||||
|
||||
<div class="row d-flex align-items-center mt-4" *ngIf="this.configurationService.newReleaseNotificationLink">
|
||||
<div class="col-auto d-flex">
|
||||
<a class="notification-link" href="{{this.configurationService.newReleaseNotificationLink}}" target="_blank">
|
||||
<button mat-raised-button type="button" class="col-auto align-self-center new-releases-btn">{{'NEW-RELEASE-NOTIFICATION.ACTIONS.LEARN-MORE' | translate}}</button>
|
||||
</a>
|
||||
</div>
|
||||
<span class="new-releases-logo">
|
||||
<img src="../../../assets/images/new-releases-logo.png">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card col-auto mt-0" [style.display]="isIntroCardVisible ? 'block' : 'none'">
|
||||
<a *ngIf="this.hasDmps()" class="col-auto d-flex" (click)="dismissIntroCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
|
||||
|
||||
<p *ngIf="!this.hasDmps()" class="card-title mb-0 pt-4">{{'DASHBOARD.DMP-QUESTION' | translate}}</p>
|
||||
<p *ngIf="!this.hasDmps()" class="card-content mb-0">{{'DASHBOARD.INFO-DMP-TEXT' | translate}}</p>
|
||||
|
||||
<p *ngIf="!this.hasDmps()" class="card-content pt-3 mb-0">
|
||||
{{'DASHBOARD.NEW-QUESTION' | translate}} <a href="https://www.openaire.eu/how-to-create-a-data-management-plan" target="_blank"><u>{{'DASHBOARD.OPEN-AIR-GUIDE' | translate}}</u></a> {{'DASHBOARD.LEARN-MORE' | translate}}
|
||||
</p>
|
||||
<p *ngIf="this.hasDmps()" class="card-content mb-0 pt-0">{{'DASHBOARD.DMP-ABOUT-BEG' | translate}}
|
||||
<b>{{'DASHBOARD.DATASET-DESCRIPTIONS-DASHBOARD-TEXT' | translate}}</b>
|
||||
{{'DASHBOARD.DMP-ABOUT-END' | translate}}
|
||||
</p>
|
||||
|
||||
<div class="row d-flex align-items-center">
|
||||
<div *ngIf="!this.hasDmps()" class="col-auto add-dataset-btn d-flex">
|
||||
<button type="button" class="col-auto align-self-center normal-btn" (click)="openNewDmpDialog()">{{'DASHBOARD.START-YOUR-FIRST-DMP' | translate}}</button>
|
||||
</div>
|
||||
<div *ngIf="this.hasDmps()" class="new-dataset-tour add-dataset-btn col-auto d-flex">
|
||||
<button mat-raised-button type="button" class="col-auto align-self-center yellow-btn" (click)="addNewDataset()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
|
||||
</div>
|
||||
<span class="col-auto ml-auto">
|
||||
<img class="laptop-img\6" src="../../../assets/images/dashboard-popup.png">
|
||||
</span>
|
||||
</div>
|
||||
<span class="col-auto ml-auto">
|
||||
<img class="laptop-img\6" src="../../../assets/images/dashboard-popup.png">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="this.hasDmps()" class="col">
|
||||
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
|
||||
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
|
||||
<mat-tab-group color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
|
||||
<mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}}">
|
||||
<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)" [isActive]="currentType == 'recent'"></app-recent-edited-activity>
|
||||
<div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
|
||||
|
|
@ -104,8 +125,8 @@
|
|||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col d-flex flex-column">
|
||||
<div class="card non-auth-card" [style.display]="isVisible ? 'block' : 'none'">
|
||||
<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
|
||||
<div class="card non-auth-card" [style.display]="isIntroCardVisible ? 'block' : 'none'">
|
||||
<a class="col-auto d-flex" (click)="dismissIntroCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
|
||||
<div class="d-flex flex-column align-items-center non-auth-title-container">
|
||||
<h4 class="pt-4">{{'DASHBOARD.TITLE' | translate}}</h4>
|
||||
<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
|
||||
|
|
|
|||
|
|
@ -396,7 +396,11 @@ input[type="text"] {
|
|||
|
||||
.add-dataset-btn {
|
||||
height: 40px;
|
||||
margin-left: 40px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab-list .mat-mdc-tab-labels .mdc-tab__text-label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
|
||||
|
|
@ -423,4 +427,85 @@ input[type="text"] {
|
|||
|
||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
padding: 0.3rem 0rem 0.6rem 0rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.new-releases-hint-container {
|
||||
padding-left: 40px;
|
||||
/* padding-top: 40px; */
|
||||
padding-right: 55px;
|
||||
}
|
||||
|
||||
.new-releases-card {
|
||||
box-shadow: 0px 3px 6px #00000029;
|
||||
max-width: 712px;
|
||||
min-width: 17.5rem;
|
||||
margin-top: 0rem;
|
||||
margin-bottom: 3.75rem;
|
||||
|
||||
background: transparent linear-gradient(127deg, #EDAEB3 0%, #E1368A 100%) 0% 0% no-repeat padding-box;
|
||||
border-radius: 6px;
|
||||
opacity: 1;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.new-releases-btn {
|
||||
height: 40px;
|
||||
margin-left: 40px;
|
||||
|
||||
background: var(--primary-color) 0% 0% no-repeat padding-box;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
color: #FFFFFF;
|
||||
padding-right: 2em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.new-releases-chip {
|
||||
// margin-bottom: 1em;
|
||||
// margin-left: 2.5em;
|
||||
// margin-right: 2.5em;
|
||||
color: #fff;
|
||||
/* text-transform: uppercase; */
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
/* max-width: 160px; */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background: #EAEAEA 0% 0% no-repeat padding-box;
|
||||
border-radius: 30px;
|
||||
opacity: 0.7;
|
||||
/* font: normal normal bold 12px/21px Aileron; */
|
||||
letter-spacing: 0.12px;
|
||||
color: #6E6E6E;
|
||||
}
|
||||
|
||||
.new-releases-title {
|
||||
text-align: left;
|
||||
font: Bold 30px/34px Roboto;
|
||||
letter-spacing: 0px;
|
||||
color: #212121;
|
||||
padding-left: 40px;
|
||||
/* padding-top: 40px; */
|
||||
padding-right: 55px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.new-releases-content {
|
||||
text-align: left;
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0px;
|
||||
color: #212121;
|
||||
padding-left: 40px;
|
||||
font: normal normal normal 16px/24px Roboto;
|
||||
padding-top: 36px;
|
||||
padding-right: 55px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.new-releases-logo {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,29 @@
|
|||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { UntypedFormBuilder, Validators } from '@angular/forms';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { DashboardStatistics } from '@app/core/model/dashboard/dashboard-statistics';
|
||||
import { AuthService } from '@app/core/services/auth/auth.service';
|
||||
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
|
||||
import { DashboardService } from '@app/core/services/dashboard/dashboard.service';
|
||||
import { MatomoService } from '@app/core/services/matomo/matomo-service';
|
||||
import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
|
||||
import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
|
||||
import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
|
||||
import { BaseComponent } from '@common/base/base.component';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import * as moment from 'moment';
|
||||
import { CookieService } from 'ngx-cookie-service';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { StartNewDmpDialogComponent } from '../dmp/new/start-new-dmp-dialogue/start-new-dmp-dialog.component';
|
||||
import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
|
||||
import { StartNewDescriptionDialogComponent } from '../description/start-new-description-dialog/start-new-description-dialog.component';
|
||||
import { UntypedFormBuilder, Validators } from '@angular/forms';
|
||||
import { StartNewDmpDialogComponent } from '../dmp/new/start-new-dmp-dialogue/start-new-dmp-dialog.component';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss'],
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
export class DashboardComponent extends BaseComponent implements OnInit {
|
||||
|
||||
|
|
@ -28,6 +31,8 @@ export class DashboardComponent extends BaseComponent implements OnInit {
|
|||
public grantCount = 0;
|
||||
public organizationCount = 0;
|
||||
currentType: string = "recent";
|
||||
newReleaseNotificationVisible = false;
|
||||
isIntroCardVisible = true;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
|
|
@ -40,6 +45,8 @@ export class DashboardComponent extends BaseComponent implements OnInit {
|
|||
private matomoService: MatomoService,
|
||||
public referenceTypeService: ReferenceTypeService,
|
||||
private fb: UntypedFormBuilder,
|
||||
private cookieService: CookieService,
|
||||
public configurationService: ConfigurationService
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
|
@ -78,6 +85,8 @@ export class DashboardComponent extends BaseComponent implements OnInit {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.newReleaseNotificationVisible = this.isNewReleaseNotificationVisible();
|
||||
}
|
||||
|
||||
public get indexFromCurrentType() {
|
||||
|
|
@ -216,4 +225,30 @@ export class DashboardComponent extends BaseComponent implements OnInit {
|
|||
this.setDescriptionText();
|
||||
this.guidedTourService.startTour(this.dashboardTour);
|
||||
}
|
||||
|
||||
dismissIntroCard() {
|
||||
this.isIntroCardVisible = false;
|
||||
}
|
||||
|
||||
dismissNewReleaseNotification() {
|
||||
this.cookieService.set('new-release-dismiss-' + this.configurationService.newReleaseNotificationVersionCode, 'true', 5000, null, null, false, 'Lax');
|
||||
this.newReleaseNotificationVisible = false;
|
||||
}
|
||||
|
||||
isNewReleaseNotificationVisible() {
|
||||
if (this.configurationService.newReleaseNotificationVersionCode == null) {
|
||||
return false;
|
||||
}
|
||||
if (this.configurationService.newReleaseNotificationExpires == null && this.configurationService.newReleaseNotificationLink == null) {
|
||||
return false;
|
||||
}
|
||||
if (this.configurationService.newReleaseNotificationExpires != null && moment(this.configurationService.newReleaseNotificationExpires).tz('UTC') < moment.utc()) {
|
||||
return false;
|
||||
}
|
||||
if (this.cookieService.get('new-release-dismiss-' + this.configurationService.newReleaseNotificationVersionCode) === 'true') {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<mat-icon class="status-icon">lock_outline</mat-icon>
|
||||
{{'DMP-OVERVIEW.LOCKED' | translate}}
|
||||
</div>
|
||||
<mat-form-field appearance="outline" class="versions-select ml-3 mr-3">
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="dense-3 versions-select ml-3 mr-3">
|
||||
<mat-select placeholder="{{'DMP-OVERVIEW.VERSION' | translate}} {{dmp.version}}" [(ngModel)]="version" (ngModelChange)="versionChanged(version.id)">
|
||||
<mat-option *ngFor="let version of pastVersions" [value]="version">
|
||||
{{'DMP-OVERVIEW.VERSION' | translate}} {{version.version}}</mat-option>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use '@angular/material'as mat;
|
||||
|
||||
.container-fluid {
|
||||
margin: 2em 4em;
|
||||
padding: 2em;
|
||||
|
|
@ -33,7 +35,7 @@
|
|||
font-size: 2.5em;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// ********BUTTONS********
|
||||
|
||||
|
|
@ -63,6 +65,7 @@
|
|||
color: #212121;
|
||||
// opacity: 0.8;
|
||||
}
|
||||
|
||||
.show-more-btn {
|
||||
width: 31.6em;
|
||||
padding: 0 1em;
|
||||
|
|
@ -321,282 +324,10 @@
|
|||
color: #848484 !important;
|
||||
}
|
||||
|
||||
::ng-deep .versions-select .mat-form-field-wrapper {
|
||||
background-color: transparent !important;
|
||||
padding-bottom: 0 !important;
|
||||
width: 6.5rem;
|
||||
}
|
||||
|
||||
::ng-deep .versions-select .mat-form-field-wrapper .mat-form-field-flex {
|
||||
padding: 0 0.5rem 0 0.625rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
::ng-deep .versions-select mat-select .mat-select-arrow-wrapper {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
padding: 0rem 0rem 0.4rem 0rem !important;
|
||||
.versions-select {
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
.select-repo {
|
||||
border-bottom: 1px solid #212121;
|
||||
}
|
||||
|
||||
// .card-content {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
// .actions {
|
||||
// margin-left: auto;
|
||||
// }
|
||||
|
||||
// .more-horiz {
|
||||
// font-size: 28px;
|
||||
// color: #aaaaaa;
|
||||
// }
|
||||
|
||||
// .more-icon :hover {
|
||||
// color: var(--primary-color-3);
|
||||
// }
|
||||
|
||||
// .export-btn {
|
||||
// padding-right: 6px;
|
||||
// }
|
||||
|
||||
// .menu-item {
|
||||
// width: 248px;
|
||||
// }
|
||||
|
||||
// .dmp-info {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// // margin: 2em 2em;
|
||||
// padding: 1em 1em;
|
||||
// }
|
||||
|
||||
// .card-subtitle {
|
||||
// font-size: 14px;
|
||||
// font-weight: 700;
|
||||
// color: black;
|
||||
// text-transform: uppercase;
|
||||
// margin-top: 0;
|
||||
// margin-bottom: 1rem;
|
||||
// }
|
||||
|
||||
// .gray-container {
|
||||
// letter-spacing: 5px;
|
||||
// color: #aaaaaa;
|
||||
// }
|
||||
|
||||
// .grant-item,
|
||||
// .researchers {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// border: 2px solid #f2f2f2;
|
||||
// margin-right: 2em;
|
||||
// margin-top: 2em;
|
||||
// padding: 0.5em;
|
||||
// }
|
||||
|
||||
// .researchers-title {
|
||||
// width: 120px;
|
||||
// color: #089dbb;
|
||||
// background-color: white;
|
||||
// padding: 0px 10px;
|
||||
// margin-top: -16px;
|
||||
// cursor: default;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
|
||||
// .grant-title {
|
||||
// width: 68px;
|
||||
// color: #089dbb;
|
||||
// background-color: white;
|
||||
// padding: 0px 10px;
|
||||
// margin-top: -16px;
|
||||
// cursor: default;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
|
||||
// .collaborators {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// border: 2px solid #f2f2f2;
|
||||
// margin-right: 2em;
|
||||
// margin-top: 2em;
|
||||
// padding: 0.5em;
|
||||
// }
|
||||
|
||||
// .collaborators-title {
|
||||
// width: 138px;
|
||||
// color: #089dbb;
|
||||
// background-color: white;
|
||||
// padding: 0px 10px;
|
||||
// margin-top: -16px;
|
||||
// cursor: default;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
|
||||
// .container-header {
|
||||
// display: flex;
|
||||
// align-items: baseline;
|
||||
// margin-top: 0px;
|
||||
// text-transform: uppercase;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
// .container-header p {
|
||||
// letter-spacing: 5px;
|
||||
// color: #aaaaaa;
|
||||
// padding-top: 10px;
|
||||
// margin-bottom: 0px;
|
||||
// }
|
||||
|
||||
// .container-header :hover {
|
||||
// color: var(--primary-color-3);
|
||||
// }
|
||||
|
||||
// .description-card {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// min-width: 0;
|
||||
// word-wrap: break-word;
|
||||
// border-radius: 6px;
|
||||
// color: #333333;
|
||||
// background: #fff;
|
||||
// width: 100%;
|
||||
// min-height: 90%;
|
||||
// max-height: 90%;
|
||||
// margin-top: 1em;
|
||||
// margin-bottom: 1em;
|
||||
// cursor: pointer;
|
||||
// box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
|
||||
// }
|
||||
|
||||
// .description-card h4 {
|
||||
// padding-left: 1em;
|
||||
// margin: 1em 1.5em;
|
||||
// }
|
||||
|
||||
// .show-more {
|
||||
// background-color: #ffffff00;
|
||||
// color: var(--primary-color-3);
|
||||
// font-weight: 700;
|
||||
// justify-self: center;
|
||||
// }
|
||||
|
||||
// .visit-website {
|
||||
// background-color: var(--primary-color-3);
|
||||
// color: #ffffff;
|
||||
// }
|
||||
|
||||
// .draft-bookmark {
|
||||
// color: #e7e6e6;
|
||||
// display: inline;
|
||||
// position: absolute;
|
||||
// margin-top: 0.5em;
|
||||
// margin-left: 0.5em;
|
||||
// }
|
||||
|
||||
// .finalized-bookmark {
|
||||
// color: #08bd63;
|
||||
// // color: #92d050;
|
||||
// display: inline;
|
||||
// position: absolute;
|
||||
// margin-top: 0.5em;
|
||||
// margin-left: 0.5em;
|
||||
// }
|
||||
|
||||
// h4 span {
|
||||
// color: #089dbb;
|
||||
// font-weight: 600;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
|
||||
// .chip {
|
||||
// padding: 0.1em 1em;
|
||||
// margin-top: auto;
|
||||
// margin-bottom: 1em;
|
||||
// margin-left: 2.5em;
|
||||
// margin-right: 2.5em;
|
||||
// border-radius: 10em;
|
||||
// background-color: #0d7489;
|
||||
// // background-color: rgba(0, 112, 192, 1);
|
||||
// // background-color: rgb(70, 135, 230);
|
||||
// color: #fff;
|
||||
// text-transform: uppercase;
|
||||
// font-weight: 500;
|
||||
// max-width: 160px;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// }
|
||||
|
||||
// .avatar {
|
||||
// padding: 0.1em 1em;
|
||||
// margin: 0.5em;
|
||||
// border-radius: 10em;
|
||||
// background-color: #eeeeee;
|
||||
// color: black;
|
||||
// max-width: 160px;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// }
|
||||
|
||||
// .descriptions-counter {
|
||||
// display: flex;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
// .descriptions-counter :hover {
|
||||
// color: var(--primary-color-3) !important;
|
||||
// }
|
||||
|
||||
// .total-info {
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
|
||||
// .desc-container {
|
||||
// margin: 0px;
|
||||
// }
|
||||
|
||||
// .desc {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// height: 80px;
|
||||
// font-size: 14px;
|
||||
// padding-top: 15px;
|
||||
// margin-bottom: 30px;
|
||||
// cursor: default;
|
||||
// }
|
||||
|
||||
// .desc-expanded {
|
||||
// overflow: visible !important;
|
||||
// height: auto !important;
|
||||
// position: inherit;
|
||||
// }
|
||||
|
||||
// .desc:after {
|
||||
// content: "";
|
||||
// text-align: right;
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// right: 0;
|
||||
// width: 70%;
|
||||
// height: 1.4em;
|
||||
// background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
|
||||
// }
|
||||
|
||||
// .interact-icon {
|
||||
// cursor: pointer;
|
||||
// margin-left: 32px;
|
||||
// }
|
||||
|
||||
// .interact-icon :hover {
|
||||
// color: var(--primary-color-3) !important;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -3049,5 +3049,13 @@
|
|||
"DRAFT": "Draft",
|
||||
"FINALIZED": "Finalized",
|
||||
"DELETED": "Deleted"
|
||||
},
|
||||
"NEW-RELEASE-NOTIFICATION": {
|
||||
"TITLE": "New ARGOS Release!",
|
||||
"HINT": "Discover the all-new Argos version",
|
||||
"BODY": "Discover the latest enhancements and improvements with our brand-new Argos release! Use the Default Blueprint to create plans that include funders information. Contact us to create Blueprints for institutional plans that connect to local services or for training activities. Adopt the output management plan as an overarching plan that combines different templates, e.g. data and software. Don’t miss out – explore now!",
|
||||
"ACTIONS": {
|
||||
"LEARN-MORE": "Learn more"
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -1,158 +0,0 @@
|
|||
@use '@angular/material' as mat;
|
||||
@import "@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
|
||||
|
||||
$app-blue-theme-primary-palette: (
|
||||
50: #e2eef1,
|
||||
100: #b6d5dc,
|
||||
200: #86bac4,
|
||||
300: #559eac,
|
||||
400: #30899b,
|
||||
500: #0c7489,
|
||||
600: #0a6c81,
|
||||
700: #086176,
|
||||
800: #06576c,
|
||||
900: #034459,
|
||||
A100: #8bddff,
|
||||
A200: #58cfff,
|
||||
A400: #25c0ff,
|
||||
A700: #0bb9ff,
|
||||
contrast: (
|
||||
50: #000000,
|
||||
100: #000000,
|
||||
200: #000000,
|
||||
300: #000000,
|
||||
400: #ffffff,
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #ffffff,
|
||||
800: #ffffff,
|
||||
900: #ffffff,
|
||||
A100: #000000,
|
||||
A200: #000000,
|
||||
A400: #ffffff,
|
||||
A700: #ffffff
|
||||
)
|
||||
);
|
||||
|
||||
$app-blue-theme-accent-palette: (
|
||||
50: #e0f6f3,
|
||||
100: #b3e8e2,
|
||||
200: #80d9cf,
|
||||
300: #4dc9bc,
|
||||
400: #26bead,
|
||||
500: var(--primary-color-3),
|
||||
600: #00ab97,
|
||||
700: #00a28d,
|
||||
800: #009983,
|
||||
900: #008a72,
|
||||
A100: #b6fff0,
|
||||
A200: #83ffe6,
|
||||
A400: #50ffdc,
|
||||
A700: #36ffd7,
|
||||
contrast: (
|
||||
50: #000000,
|
||||
100: #000000,
|
||||
200: #000000,
|
||||
300: #000000,
|
||||
400: #000000,
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #000000,
|
||||
800: #000000,
|
||||
900: #000000,
|
||||
A100: #000000,
|
||||
A200: #ffffff,
|
||||
A400: #ffffff,
|
||||
A700: #ffffff
|
||||
)
|
||||
);
|
||||
|
||||
$app-blue-theme-primary: mat.define-palette($app-blue-theme-primary-palette);
|
||||
$app-blue-theme-accent: mat.define-palette($app-blue-theme-accent-palette, A200, A100, A400);
|
||||
$app-blue-theme-warn: mat.define-palette(mat.$red-palette);
|
||||
|
||||
$app-blue-theme-background: (
|
||||
status-bar: map_get(mat.$grey-palette, 300),
|
||||
app-bar: map_get(mat.$grey-palette, 100),
|
||||
background: map_get(mat.$grey-palette, 50),
|
||||
hover: rgba(black, 0.04),
|
||||
card: white,
|
||||
dialog: white,
|
||||
disabled-button: rgba(black, 0.12),
|
||||
raised-button: white,
|
||||
focused-button: $dark-focused,
|
||||
selected-button: map_get(mat.$grey-palette, 300),
|
||||
selected-disabled-button: map_get(mat.$grey-palette, 400),
|
||||
disabled-button-toggle: map_get(mat.$grey-palette, 200),
|
||||
unselected-chip: map_get(mat.$grey-palette, 300),
|
||||
disabled-list-option: map_get(mat.$grey-palette, 200)
|
||||
);
|
||||
|
||||
$app-blue-theme-foreground: (
|
||||
base: black,
|
||||
divider: $dark-dividers,
|
||||
dividers: $dark-dividers,
|
||||
disabled: $dark-disabled-text,
|
||||
disabled-button: rgba(black, 0.26),
|
||||
disabled-text: $dark-disabled-text,
|
||||
hint-text: $dark-disabled-text,
|
||||
secondary-text: $dark-secondary-text,
|
||||
icon: rgba(black, 0.54),
|
||||
icons: rgba(black, 0.54),
|
||||
text: rgba(black, 0.87),
|
||||
slider-min: rgba(black, 0.87),
|
||||
slider-off: rgba(black, 0.26),
|
||||
slider-off-active: rgba(black, 0.38)
|
||||
);
|
||||
|
||||
$custom-theme: (
|
||||
primary: $app-blue-theme-primary,
|
||||
accent: $app-blue-theme-accent,
|
||||
warn: $app-blue-theme-warn,
|
||||
is-dark: false,
|
||||
foreground: $app-blue-theme-foreground,
|
||||
background: $app-blue-theme-background
|
||||
);
|
||||
|
||||
$custom-typography: mat.define-legacy-typography-config(
|
||||
$font-family: "Lato, regular",
|
||||
$headline: mat.define-typography-level(32px, 48px, 700),
|
||||
$body-1: mat.define-typography-level(16px, 24px, 500)
|
||||
);
|
||||
|
||||
.blue-theme {
|
||||
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
|
||||
// The following line adds:
|
||||
// 1. Default typography styles for all components
|
||||
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
|
||||
// If you specify typography styles for the components you use elsewhere, you should delete this line.
|
||||
// If you don't need the default component typographies but still want the hierarchy styles,
|
||||
// you can delete this line and instead use:
|
||||
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
|
||||
@include mat.all-legacy-component-typographies();
|
||||
@include mat.legacy-core();
|
||||
|
||||
@include mat.all-legacy-component-themes($custom-theme);
|
||||
|
||||
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
|
||||
@include mat.legacy-typography-hierarchy($custom-typography);
|
||||
|
||||
// Override typography for a specific Angular Material components.
|
||||
@include mat.legacy-checkbox-typography($custom-typography);
|
||||
|
||||
// Override typography for all Angular Material, including mat-base-typography and all components.
|
||||
@include mat.all-legacy-component-typographies($custom-typography);
|
||||
//If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:
|
||||
|
||||
// Override the typography in the core CSS.
|
||||
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
|
||||
// The following line adds:
|
||||
// 1. Default typography styles for all components
|
||||
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
|
||||
// If you specify typography styles for the components you use elsewhere, you should delete this line.
|
||||
// If you don't need the default component typographies but still want the hierarchy styles,
|
||||
// you can delete this line and instead use:
|
||||
// `@include mat.legacy-typography-hierarchy($custom-typography);`
|
||||
@include mat.all-legacy-component-typographies($custom-typography);
|
||||
@include mat.legacy-core();
|
||||
}
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
@use '@angular/material' as mat;
|
||||
@import "@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
|
||||
|
||||
$app-green-theme-primary-palette: (
|
||||
50: #e3f3f3,
|
||||
100: #b8e2e0,
|
||||
200: #89cecc,
|
||||
300: #59bab8,
|
||||
400: #36aca8,
|
||||
500: var(--primary-color),
|
||||
600: #109591,
|
||||
700: #0d8b86,
|
||||
800: #0a817c,
|
||||
900: #056f6b,
|
||||
A100: #9ffffa,
|
||||
A200: #6cfff7,
|
||||
A400: #39fff5,
|
||||
A700: #20fff3,
|
||||
contrast: (
|
||||
50: #000000,
|
||||
100: #000000,
|
||||
200: #000000,
|
||||
300: #000000,
|
||||
400: #000000,
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #ffffff,
|
||||
800: #ffffff,
|
||||
900: #ffffff,
|
||||
A100: #000000,
|
||||
A200: #000000,
|
||||
A400: #000000,
|
||||
A700: #000000
|
||||
)
|
||||
);
|
||||
|
||||
$app-green-theme-accent-palette: (
|
||||
50: #fefbee,
|
||||
100: #fdf5d5,
|
||||
200: #fbeeb9,
|
||||
300: #f9e79c,
|
||||
400: #f8e287,
|
||||
500: var(--secondary-color),
|
||||
600: #f6d96a,
|
||||
700: #f5d45f,
|
||||
800: #f3cf55,
|
||||
900: #f1c742,
|
||||
A100: #ffffff,
|
||||
A200: #ffffff,
|
||||
A400: #fff6dc,
|
||||
A700: #fff0c3,
|
||||
contrast: (
|
||||
50: #000000,
|
||||
100: #000000,
|
||||
200: #000000,
|
||||
300: #000000,
|
||||
400: #000000,
|
||||
500: #000000,
|
||||
600: #000000,
|
||||
700: #000000,
|
||||
800: #000000,
|
||||
900: #000000,
|
||||
A100: #000000,
|
||||
A200: #000000,
|
||||
A400: #000000,
|
||||
A700: #000000
|
||||
)
|
||||
);
|
||||
|
||||
$app-green-theme-primary: mat.define-palette($app-green-theme-primary-palette);
|
||||
$app-green-theme-accent: mat.define-palette($app-green-theme-accent-palette, A200, A100, A400);
|
||||
$app-green-theme-warn: mat.define-palette(mat.$red-palette);
|
||||
|
||||
$app-green-theme-background: (
|
||||
status-bar: map_get(mat.$grey-palette, 300),
|
||||
app-bar: map_get(mat.$grey-palette, 100),
|
||||
background: map_get(mat.$grey-palette, 50),
|
||||
hover: rgba(black, 0.04),
|
||||
card: white,
|
||||
dialog: white,
|
||||
disabled-button: rgba(black, 0.12),
|
||||
raised-button: white,
|
||||
focused-button: $dark-focused,
|
||||
selected-button: map_get(mat.$grey-palette, 300),
|
||||
selected-disabled-button: map_get(mat.$grey-palette, 400),
|
||||
disabled-button-toggle: map_get(mat.$grey-palette, 200),
|
||||
unselected-chip: map_get(mat.$grey-palette, 300),
|
||||
disabled-list-option: map_get(mat.$grey-palette, 200)
|
||||
);
|
||||
|
||||
$app-green-theme-foreground: (
|
||||
base: white,
|
||||
divider: $dark-dividers,
|
||||
dividers: $dark-dividers,
|
||||
disabled: $dark-disabled-text,
|
||||
disabled-button: rgba(black, 0.26),
|
||||
disabled-text: $dark-disabled-text,
|
||||
hint-text: $dark-disabled-text,
|
||||
secondary-text: $dark-secondary-text,
|
||||
icon: rgba(white, 0.54),
|
||||
icons: rgba(white, 0.54),
|
||||
text: rgba(white, 0.87),
|
||||
slider-min: rgba(black, 0.87),
|
||||
slider-off: rgba(black, 0.26),
|
||||
slider-off-active: rgba(black, 0.38)
|
||||
);
|
||||
|
||||
$custom-theme: (
|
||||
primary: $app-green-theme-primary,
|
||||
accent: $app-green-theme-accent,
|
||||
warn: $app-green-theme-warn,
|
||||
is-dark: false,
|
||||
foreground: $app-green-theme-foreground,
|
||||
background: $app-green-theme-background
|
||||
);
|
||||
|
||||
$custom-typography: mat.define-legacy-typography-config(
|
||||
$font-family: "Lato, regular",
|
||||
$headline: mat.define-typography-level(32px, 48px, 700),
|
||||
$body-1: mat.define-typography-level(16px, 24px, 500)
|
||||
);
|
||||
|
||||
.green-theme {
|
||||
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
|
||||
// The following line adds:
|
||||
// 1. Default typography styles for all components
|
||||
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
|
||||
// If you specify typography styles for the components you use elsewhere, you should delete this line.
|
||||
// If you don't need the default component typographies but still want the hierarchy styles,
|
||||
// you can delete this line and instead use:
|
||||
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
|
||||
@include mat.all-legacy-component-typographies();
|
||||
@include mat.legacy-core();
|
||||
|
||||
@include mat.all-legacy-component-themes($custom-theme);
|
||||
|
||||
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
|
||||
@include mat.legacy-typography-hierarchy($custom-typography);
|
||||
|
||||
// Override typography for a specific Angular Material components.
|
||||
@include mat.legacy-checkbox-typography($custom-typography);
|
||||
|
||||
// Override typography for all Angular Material, including mat-base-typography and all components.
|
||||
@include mat.all-legacy-component-typographies($custom-typography);
|
||||
//If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:
|
||||
|
||||
// Override the typography in the core CSS.
|
||||
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
|
||||
// The following line adds:
|
||||
// 1. Default typography styles for all components
|
||||
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
|
||||
// If you specify typography styles for the components you use elsewhere, you should delete this line.
|
||||
// If you don't need the default component typographies but still want the hierarchy styles,
|
||||
// you can delete this line and instead use:
|
||||
// `@include mat.legacy-typography-hierarchy($custom-typography);`
|
||||
@include mat.all-legacy-component-typographies($custom-typography);
|
||||
@include mat.legacy-core();
|
||||
}
|
||||
|
|
@ -1,52 +1,8 @@
|
|||
/*!
|
||||
|
||||
=========================================================
|
||||
* Material Dashboard Angular - v2.2.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-angular2
|
||||
* Copyright 2018 Creative Tim (http://www.creative-tim.com)
|
||||
|
||||
* Designed by www.invisionapp.com Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
@use '@angular/material' as mat;
|
||||
@use 'sass:math';
|
||||
@import "@angular/material/prebuilt-themes/indigo-pink.css";
|
||||
@import "@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
|
||||
@import "./blue-theme.scss";
|
||||
// @import "./green-theme.scss";
|
||||
|
||||
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
|
||||
// The following line adds:
|
||||
// 1. Default typography styles for all components
|
||||
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
|
||||
// If you specify typography styles for the components you use elsewhere, you should delete this line.
|
||||
// If you don't need the default component typographies but still want the hierarchy styles,
|
||||
// you can delete this line and instead use:
|
||||
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
|
||||
@include mat.all-legacy-component-typographies();
|
||||
@include mat.legacy-core();
|
||||
|
||||
// // Define a blue theme.
|
||||
$custom-theme-primary: mat.define-palette($app-blue-theme-primary-palette, 900);
|
||||
$custom-theme-accent: mat.define-palette($app-blue-theme-accent-palette);
|
||||
|
||||
// Define a green theme.
|
||||
// $custom-theme-primary: mat-palette($app-green-theme-primary-palette, 500);
|
||||
// $custom-theme-accent: mat-palette($app-green-theme-accent-palette);
|
||||
|
||||
// $custom-theme-accent: mat-palette($mat-pink, A200, A100, A400);
|
||||
$custom-theme-warn: mat.define-palette(mat.$red-palette);
|
||||
$custom-theme: mat.define-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
|
||||
@include mat.all-legacy-component-themes($custom-theme);
|
||||
|
||||
@import "core/variables";
|
||||
@import "core/mixins";
|
||||
|
||||
//Material-Bootstrap configuration
|
||||
@import "assets/scss/bootstrap-material";
|
||||
@import "/node_modules/bootstrap/scss/bootstrap";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,104 @@
|
|||
@use '@angular/material'as mat;
|
||||
|
||||
// Be sure that you only ever include this mixin once!
|
||||
@include mat.core();
|
||||
|
||||
:root {
|
||||
--primary-color: #129d99;
|
||||
--primary-color-2: #23bcba;
|
||||
--primary-color-3: #00b29f;
|
||||
--secondary-color: #f7dd72;
|
||||
}
|
||||
|
||||
// Define your theme with color palettes, typography and density
|
||||
|
||||
$mat-theme-primary-palette: map-merge(mat.$cyan-palette, (501: var(--primary-color), contrast: (100: black, )));
|
||||
$mat-theme-primary: mat.define-palette($mat-theme-primary-palette,
|
||||
$default: 501,
|
||||
$lighter: 100,
|
||||
$darker: 700,
|
||||
$text: 500);
|
||||
|
||||
$mat-theme-accent-palette: map-merge(mat.$teal-palette, (501: var(--secondary-color), contrast: (A100: white, A200: white, )));
|
||||
$mat-theme-accent: mat.define-palette($mat-theme-accent-palette,
|
||||
$default: 501,
|
||||
$lighter: A100,
|
||||
$darker: A200,
|
||||
$text: 600);
|
||||
|
||||
$mat-theme-warn-palette: map-merge(mat.$pink-palette, ());
|
||||
$mat-theme-warn: mat.define-palette($mat-theme-warn-palette,
|
||||
$default: A200,
|
||||
$lighter: 500,
|
||||
$darker: 500,
|
||||
$text: A700);
|
||||
|
||||
$mat-dark-theme-primary-palette: map-merge(mat.$lime-palette, (contrast: (200: #030844, A100: rgba(0, 0, 0, 0.87), A700: rgba(0, 0, 0, 0.87), )));
|
||||
$mat-dark-theme-primary: mat.define-palette($mat-dark-theme-primary-palette,
|
||||
$default: 200,
|
||||
$lighter: A100,
|
||||
$darker: A700,
|
||||
$text: 700);
|
||||
|
||||
$mat-dark-theme-accent-palette: map-merge(mat.$green-palette, (contrast: (A200: black, 50: black, A400: black, )));
|
||||
$mat-dark-theme-accent: mat.define-palette($mat-dark-theme-accent-palette,
|
||||
$default: A200,
|
||||
$lighter: 50,
|
||||
$darker: A400,
|
||||
$text: A100);
|
||||
|
||||
$mat-dark-theme-warn-palette: map-merge(mat.$pink-palette, (contrast: (A100: black, 100: white, )));
|
||||
$mat-dark-theme-warn: mat.define-palette($mat-dark-theme-warn-palette,
|
||||
$default: A100,
|
||||
$lighter: 100,
|
||||
$darker: A700,
|
||||
$text: 100);
|
||||
|
||||
$mat-typography: mat.define-typography-config($font-family: 'Roboto, sans-serif;',
|
||||
// $display-4: mat.define-typography-level($font-size: 96px, $font-weight: 300, $font-family: 'Roboto, sans-serif;'),
|
||||
// $display-3: mat.define-typography-level($font-size: 60px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
|
||||
// $display-2: mat.define-typography-level($font-size: 48px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
|
||||
// $display-1: mat.define-typography-level($font-size: 34px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
|
||||
// $headline: mat.define-typography-level($font-size: 24px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
|
||||
// $title: mat.define-typography-level($font-size: 20px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
|
||||
// $subheading-2: mat.define-typography-level($font-size: 18px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
|
||||
// $subheading-1: mat.define-typography-level($font-size: 20px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
|
||||
$body-2: mat.define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
|
||||
$body-1: mat.define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
|
||||
$caption: mat.define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: 'Roboto, sans-serif;'),
|
||||
$button: mat.define-typography-level($font-size: 16px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
|
||||
// Line-height must be unit-less fraction of the font-size.
|
||||
// $input: mat.define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
|
||||
);
|
||||
|
||||
$mat-density: 0;
|
||||
// @include mat.elevation(
|
||||
// $zValue: 12,
|
||||
// $color: #000,
|
||||
// $opacity: 0.5
|
||||
// );
|
||||
|
||||
$mat-core-theme: mat.define-light-theme((color: (primary: $mat-theme-primary,
|
||||
accent: $mat-theme-accent,
|
||||
warn: $mat-theme-warn),
|
||||
typography: $mat-typography,
|
||||
density: $mat-density));
|
||||
|
||||
$mat-dark-theme: mat.define-dark-theme((color: (primary: $mat-dark-theme-primary,
|
||||
accent: $mat-dark-theme-accent,
|
||||
warn: $mat-dark-theme-warn,
|
||||
)));
|
||||
|
||||
@include mat.all-component-themes($mat-core-theme);
|
||||
|
||||
.dark-theme {
|
||||
@include mat.all-component-colors($mat-dark-theme);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// @import "~@covalent/core/theming/all-theme";
|
||||
@import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming';
|
||||
@import "@angular/material/prebuilt-themes/indigo-pink.css";
|
||||
// @import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming';
|
||||
@import '../node_modules/@swimlane/ngx-datatable/index.css';
|
||||
@import '../node_modules/@swimlane/ngx-datatable/themes/material.scss';
|
||||
@import '../node_modules/@swimlane/ngx-datatable/assets/icons.css';
|
||||
|
|
@ -21,25 +119,28 @@
|
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
||||
filter: alpha(opacity=80);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* high-performance display:none; helper */
|
||||
.gu-hide {
|
||||
}
|
||||
|
||||
/* high-performance display:none; helper */
|
||||
.gu-hide {
|
||||
left: -9999px !important;
|
||||
}
|
||||
/* added to mirrorContainer (default = body) while dragging */
|
||||
.gu-unselectable {
|
||||
}
|
||||
|
||||
/* added to mirrorContainer (default = body) while dragging */
|
||||
.gu-unselectable {
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
/* added to the source element while its mirror is dragged */
|
||||
.gu-transit {
|
||||
}
|
||||
|
||||
/* added to the source element while its mirror is dragged */
|
||||
.gu-transit {
|
||||
opacity: 0;
|
||||
border: 1px dashed red;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
||||
filter: alpha(opacity=20);
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Theme
|
||||
// @import "./assets/scss/blue-theme.scss";
|
||||
|
|
@ -54,17 +155,12 @@
|
|||
// @include covalent-theme($theme);
|
||||
|
||||
|
||||
:root {
|
||||
--primary-color: #129d99;
|
||||
--primary-color-2: #23bcba;
|
||||
--primary-color-3: #00b29f;
|
||||
--secondary-color: #f7dd72;
|
||||
}
|
||||
|
||||
.cc-btn {
|
||||
|
||||
.cc-btn {
|
||||
background-color: var(--primary-color-3) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.snackbar-warning {
|
||||
background-color: #f39010;
|
||||
color: #f3efef;
|
||||
|
|
@ -228,7 +324,17 @@
|
|||
padding: 0.3rem 0rem 0.6rem 0rem !important;
|
||||
}
|
||||
|
||||
.custom-userbox > mat-dialog-container {
|
||||
.mdc-text-field--outlined .mdc-notched-outline {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__trailing {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.custom-userbox>mat-dialog-container {
|
||||
background-color: transparent;
|
||||
padding: 0rem;
|
||||
overflow: initial;
|
||||
|
|
@ -257,13 +363,13 @@
|
|||
}
|
||||
|
||||
|
||||
.text-primary-blue{
|
||||
.text-primary-blue {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
||||
.translateY-3{
|
||||
transform:translateY(3px);
|
||||
.translateY-3 {
|
||||
transform: translateY(3px);
|
||||
}
|
||||
|
||||
// CSS for <angular-editor> (@kolkov/angular-editor)
|
||||
|
|
@ -316,28 +422,48 @@
|
|||
transition: transform 1s;
|
||||
}
|
||||
|
||||
.colums-gapped{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
.colums-gapped {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.info-grid{
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 1rem;
|
||||
.info-grid-label{
|
||||
padding-top: 1rem;
|
||||
min-width: 14rem;
|
||||
padding-left: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.info-grid-value{
|
||||
display: flex;
|
||||
&>*{
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 1rem;
|
||||
|
||||
.info-grid-label {
|
||||
padding-top: 1rem;
|
||||
min-width: 14rem;
|
||||
padding-left: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-grid-value {
|
||||
display: flex;
|
||||
|
||||
&>* {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datatable-body-cell { display: flex; margin: auto; }
|
||||
.datatable-body-cell {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dense-1 {
|
||||
@include mat.all-component-densities(-1);
|
||||
}
|
||||
|
||||
.dense-2 {
|
||||
@include mat.all-component-densities(-2);
|
||||
}
|
||||
|
||||
.dense-3 {
|
||||
@include mat.all-component-densities(-3);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue