argos/dmp-frontend/src/styles.scss

@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 '../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';

//Material-Bootstrap configuration
@import "assets/scss/bootstrap-material";

// Guided Tour style
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';

//TODO: angular update @import '../node_modules/dragula/dist/dragula.css';
/* in-flight clone */
.gu-mirror {
	position: fixed !important;
	margin: 0 !important;
	z-index: 9999 !important;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	pointer-events: none;
}

/* high-performance display:none; helper */
.gu-hide {
	left: -9999px !important;
}

/* 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 {
	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";

// Define a theme.
// $primary: mat-palette($app-blue-theme-primary-palette);
// $accent: mat-palette($mat-pink, A200, A100, A400);
// $theme: mat-light-theme($primary, $accent);

// Include all theme styles for the components.
// @include angular-material-theme($theme);
// @include covalent-theme($theme);




.cc-btn {
	background-color: var(--primary-color-3) !important;
}

.snackbar-warning {
	background-color: #f39010;
	color: #f3efef;
}

.snackbar-success {
	background-color: #109204;
	color: #f3efef;
}

.snackbar-error {
	background-color: #cf1407;
	color: #111010;
}

.lightblue-btn {
	background-color: var(--primary-color) !important;
	color: white !important;
	//   background-color: rgba(0, 112, 192, 1) !important;
}

.listing-item {
	margin-top: 0.5em;
	padding: 0.5em;
	cursor: pointer;
	border: 3px solid #f2f2f2;

	.title {
		color: black;
	}

	.grant-title {
		color: rgb(93, 125, 173);
	}

	.gray-icon {
		color: rgb(191, 191, 191);
	}

	.chip {
		padding: 0.1em 1em;
		border-radius: 10em;
		background-color: #0d7489;
		// background-color: rgba(0, 112, 192, 1);
		color: #fff;
		text-transform: uppercase;
		font-weight: 500;
		max-width: 160px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bordered-chip {
		padding: 0.1em 1em;
		border: 0.1em solid rgb(218, 227, 243);
		border-radius: 10em;
		background-color: rgb(236, 241, 249);
		color: var(--primary-color);
		// color: rgba(0, 112, 192, 1);
		// color: rgb(68, 114, 196);
		text-transform: uppercase;
		font-weight: 500;
		max-width: 160px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.squared-chip {
		padding: 0.1em 1em;
		border: 0.1em solid rgb(236, 241, 249);
		border-radius: 0.5em;
		background-color: rgb(246, 246, 246);
		color: rgb(127, 127, 127);
		max-width: 160px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	mat-icon {
		width: auto;
		height: auto;
	}

	.mr-5 {
		margin-right: 2rem !important;
	}

	.info {
		background-color: #f6f6f6;
		padding: 8px 15px;
		margin-bottom: 15px;
	}

	.info p {
		margin-bottom: 0px;
		color: rgb(37, 35, 140);
		font-weight: 600;
	}

	.chip p {
		margin-bottom: 0px;
	}

	//   .draft-bookmark {
	//     color: #e7e6e6;
	//     display: inline;
	//     position: absolute;
	//     padding-top: 3px;
	//   }

	//   .finalized-bookmark {
	//     color: #08bd63;
	//     // color: #92d050;
	//     display: inline;
	//     position: absolute;
	//     padding-top: 3px;
	//   }

	h4 span {
		color: #089dbb;
		font-weight: 600;
	}
}

.listing {
	.mat-card {
		margin: 1em 0;
	}

	.col-9 {
		display: flex;
		flex-direction: column;
	}
}

.gray-container {
	background: linear-gradient(180deg, #f6f6f6, #fff);
	margin: 5px 0px;
}

.main-content {
	background-color: #f5f5f5;
	// padding-top: 5rem;
	padding-bottom: 3rem;
	// padding-left: 3.31rem;
	padding-left: 1rem;
	margin: 0;
	display: flex;
	flex-grow: 1;
}

::ng-deep .mat-form-field-wrapper {
	background-color: white !important;
	padding-bottom: 0 !important;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
	padding: 0.3rem 0rem 0.6rem 0rem !important;
}

.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;
	box-shadow: none;
}

@keyframes slide {
	100% {
		right: 0;
	}
}

.dialog-side-panel {
	position: fixed !important;
	bottom: 0;
	top: 0;
	right: -100vw;
	width: 100vw;
	height: 100%;
	animation: slide .3s forwards;
	// animation-delay: .3s;

	.mat-dialog-container {
		border-radius: 0;
	}
}


.text-primary-blue {
	color: var(--primary-color);
}


.translateY-3 {
	transform: translateY(3px);
}

// CSS for <angular-editor> (@kolkov/angular-editor)
.form-field-subscript-wrapper {
	font-size: 75% !important;
	//padding-left: 12px;
	padding: 0 1em;
	margin-top: 8px;
}

//.angular-editor-textarea {
//	min-height: 150px !important;
//}
//
//.editor-wrapper {
//	border: 1px solid transparent !important;
//	border-radius: 5px;
//}
//
//.angular-editor-toolbar {
//	margin-left: 1px;
//	margin-right: 1px;
//}
//
//.angular-editor-textarea, .angular-editor-toolbar {
//	border: none !important;
//}
//
//.angular-editor {
//	border: 1px solid #ddd !important;
//	border-radius: 5px;
//	background-color: #fff;
//}
//
//.editor-wrapper:hover, .angular-editor:hover {
//	border: 1px solid #000 !important;
//}
//
//.editor-wrapper:focus-within, .angular-editor:focus-within {
//	border: 1px solid #034459 !important;
//}
//
//.required.editor-wrapper, .required .editor .angular-editor {
//	border: 1px solid #f44336 !important;
//}
// end of CSS for <angular-editor> (@kolkov/angular-editor)

/* Transition Group */
.list-move {
	transition: transform 1s;
}

.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;
		}
	}
}

.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);
}