argos/dmp-frontend/src/styles.scss

470 lines
11 KiB
SCSS
Raw Normal View History

2024-03-20 17:06:05 +01:00
@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);
}
2019-09-19 12:00:00 +02:00
// @import "~@covalent/core/theming/all-theme";
2024-03-20 17:06:05 +01:00
// @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';
2018-11-27 18:33:17 +01:00
2023-10-05 21:42:47 +02:00
//Material-Bootstrap configuration
@import "assets/scss/bootstrap-material";
2018-06-27 17:37:26 +02:00
2020-08-04 17:27:13 +02:00
// Guided Tour style
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
2023-10-05 21:42:47 +02:00
//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;
2024-03-20 17:06:05 +01:00
}
/* high-performance display:none; helper */
.gu-hide {
left: -9999px !important;
2024-03-20 17:06:05 +01:00
}
/* 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;
2024-03-20 17:06:05 +01:00
}
/* 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);
2024-03-20 17:06:05 +01:00
}
2019-09-19 12:00:00 +02:00
// Custom Theme
// @import "./assets/scss/blue-theme.scss";
2017-12-18 12:24:12 +01:00
// Define a theme.
2019-09-19 12:00:00 +02:00
// $primary: mat-palette($app-blue-theme-primary-palette);
// $accent: mat-palette($mat-pink, A200, A100, A400);
// $theme: mat-light-theme($primary, $accent);
2017-12-18 12:24:12 +01:00
// Include all theme styles for the components.
2019-09-19 12:00:00 +02:00
// @include angular-material-theme($theme);
2019-01-18 18:03:45 +01:00
// @include covalent-theme($theme);
2018-11-27 18:33:17 +01:00
2023-02-10 14:08:23 +01:00
2023-02-10 17:05:11 +01:00
2024-03-20 17:06:05 +01:00
.cc-btn {
2023-02-10 17:05:11 +01:00
background-color: var(--primary-color-3) !important;
2024-03-20 17:06:05 +01:00
}
2018-06-27 17:37:26 +02:00
.snackbar-warning {
background-color: #f39010;
color: #f3efef;
2018-02-09 16:54:41 +01:00
}
2018-06-27 17:37:26 +02:00
.snackbar-success {
background-color: #109204;
color: #f3efef;
2018-02-09 16:54:41 +01:00
}
2018-06-27 17:37:26 +02:00
.snackbar-error {
background-color: #cf1407;
color: #111010;
}
.lightblue-btn {
2023-04-25 10:26:20 +02:00
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);
2023-04-25 10:26:20 +02:00
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;
}
2018-06-27 17:37:26 +02:00
}
.gray-container {
background: linear-gradient(180deg, #f6f6f6, #fff);
margin: 5px 0px;
}
.main-content {
background-color: #f5f5f5;
2020-10-30 16:56:24 +01:00
// padding-top: 5rem;
2020-06-30 18:40:01 +02:00
padding-bottom: 3rem;
// padding-left: 3.31rem;
padding-left: 1rem;
margin: 0;
display: flex;
flex-grow: 1;
}
2020-07-29 17:04:19 +02:00
2020-08-03 10:40:38 +02:00
::ng-deep .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
2020-07-29 17:04:19 +02:00
2020-08-03 10:40:38 +02:00
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}
2024-03-20 17:06:05 +01:00
.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;
}
2020-11-10 09:13:08 +01:00
@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;
}
}
2024-03-20 17:06:05 +01:00
.text-primary-blue {
2023-02-10 14:08:23 +01:00
color: var(--primary-color);
}
2024-03-20 17:06:05 +01:00
.translateY-3 {
transform: translateY(3px);
Description boxes in admin forms replaced with rich text editor <angular-editor>. 1. dataset-profile-editor-composite-field.component.ts & dataset-profile-editor-section.component.ts & dataset-profile-editor.component.ts: Initialize AngularEditorConfig. 2. dataset-profile-editor-composite-field.component.html & dataset-profile-editor-section.component.html & dataset-profile-editor.component.html: Use <angular-editor> in description. 3. multiple-auto-complete.component.html & dataset-profile-listing.component.html & form-section.component.html: Show description as html. 4. dataset-profile.module.ts: Imported HttpClientModule, AngularEditorModule (needed for <angular-editor>). 5. available-profiles.component.html: Show description as html, under the Dataset Template title, not as tooltip (matTooltip does not receive html). 6. available-profiles.component.ts: Added styleUrls: ['available-profiles.component.scss']. 7. available-profiles.component.scss: [NEW] Added css for class "list-option" to cut description if too long. 8. form-composite-title.component.html: Show description and extendedDescription as html | Add view more/less functionality to show/hide extendedDescription. 9. form-composite-title.component.ts: Added "public showExtendedDescription: boolean = false;" field. 10. form-composite-title.component.scss: Added css for "more" class, to make "view more/less" seem like link. 11. assets/i18n/: In language files added DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE (-LESS). 12. assets/styles.css: Added css for <angular-editor>, to be similar to the other text areas and forms.
2021-10-12 17:14:22 +02:00
}
// CSS for <angular-editor> (@kolkov/angular-editor)
.form-field-subscript-wrapper {
font-size: 75% !important;
//padding-left: 12px;
padding: 0 1em;
Description boxes in admin forms replaced with rich text editor <angular-editor>. 1. dataset-profile-editor-composite-field.component.ts & dataset-profile-editor-section.component.ts & dataset-profile-editor.component.ts: Initialize AngularEditorConfig. 2. dataset-profile-editor-composite-field.component.html & dataset-profile-editor-section.component.html & dataset-profile-editor.component.html: Use <angular-editor> in description. 3. multiple-auto-complete.component.html & dataset-profile-listing.component.html & form-section.component.html: Show description as html. 4. dataset-profile.module.ts: Imported HttpClientModule, AngularEditorModule (needed for <angular-editor>). 5. available-profiles.component.html: Show description as html, under the Dataset Template title, not as tooltip (matTooltip does not receive html). 6. available-profiles.component.ts: Added styleUrls: ['available-profiles.component.scss']. 7. available-profiles.component.scss: [NEW] Added css for class "list-option" to cut description if too long. 8. form-composite-title.component.html: Show description and extendedDescription as html | Add view more/less functionality to show/hide extendedDescription. 9. form-composite-title.component.ts: Added "public showExtendedDescription: boolean = false;" field. 10. form-composite-title.component.scss: Added css for "more" class, to make "view more/less" seem like link. 11. assets/i18n/: In language files added DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE (-LESS). 12. assets/styles.css: Added css for <angular-editor>, to be similar to the other text areas and forms.
2021-10-12 17:14:22 +02:00
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;
//}
Description boxes in admin forms replaced with rich text editor <angular-editor>. 1. dataset-profile-editor-composite-field.component.ts & dataset-profile-editor-section.component.ts & dataset-profile-editor.component.ts: Initialize AngularEditorConfig. 2. dataset-profile-editor-composite-field.component.html & dataset-profile-editor-section.component.html & dataset-profile-editor.component.html: Use <angular-editor> in description. 3. multiple-auto-complete.component.html & dataset-profile-listing.component.html & form-section.component.html: Show description as html. 4. dataset-profile.module.ts: Imported HttpClientModule, AngularEditorModule (needed for <angular-editor>). 5. available-profiles.component.html: Show description as html, under the Dataset Template title, not as tooltip (matTooltip does not receive html). 6. available-profiles.component.ts: Added styleUrls: ['available-profiles.component.scss']. 7. available-profiles.component.scss: [NEW] Added css for class "list-option" to cut description if too long. 8. form-composite-title.component.html: Show description and extendedDescription as html | Add view more/less functionality to show/hide extendedDescription. 9. form-composite-title.component.ts: Added "public showExtendedDescription: boolean = false;" field. 10. form-composite-title.component.scss: Added css for "more" class, to make "view more/less" seem like link. 11. assets/i18n/: In language files added DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE (-LESS). 12. assets/styles.css: Added css for <angular-editor>, to be similar to the other text areas and forms.
2021-10-12 17:14:22 +02:00
// end of CSS for <angular-editor> (@kolkov/angular-editor)
/* Transition Group */
.list-move {
transition: transform 1s;
}
2024-03-20 17:06:05 +01:00
.colums-gapped {
display: flex;
flex-direction: column;
gap: 1rem;
}
2024-03-20 17:06:05 +01:00
.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;
}
2024-03-20 17:06:05 +01:00
.dense-1 {
@include mat.all-component-densities(-1);
}
.dense-2 {
@include mat.all-component-densities(-2);
}
.dense-3 {
@include mat.all-component-densities(-3);
}