-
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
index 2b06d6aac..f03235e1a 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
@@ -1,45 +1,45 @@
-.dmp-listing {
- .mat-card {
- margin: 1em 0;
- }
+// .listing {
+// .mat-card {
+// margin: 1em 0;
+// }
- .col-9 {
- display: flex;
- flex-direction: column;
- }
-}
+// .col-9 {
+// display: flex;
+// flex-direction: column;
+// }
+// }
-::ng-deep .mat-paginator {
- margin-top: auto;
-}
+// ::ng-deep .mat-paginator {
+// margin-top: auto;
+// }
-::ng-deep .mat-paginator-container {
- flex-direction: row-reverse !important;
- justify-content: space-between !important;
- background-color: #f6f6f6;
- height: 30px;
- min-height: 30px !important;
-}
+// ::ng-deep .mat-paginator-container {
+// flex-direction: row-reverse !important;
+// justify-content: space-between !important;
+// background-color: #f6f6f6;
+// height: 30px;
+// min-height: 30px !important;
+// }
-::ng-deep .mat-paginator-page-size {
- height: 43px;
-}
+// ::ng-deep .mat-paginator-page-size {
+// height: 43px;
+// }
-::ng-deep .mat-icon-button {
- height: 30px !important;
- font-size: 12px !important;
-}
+// ::ng-deep .mat-icon-button {
+// height: 30px !important;
+// font-size: 12px !important;
+// }
-::ng-deep .mat-paginator-range-label {
- margin: 15px 32px 0 24px !important;
-}
+// ::ng-deep .mat-paginator-range-label {
+// margin: 15px 32px 0 24px !important;
+// }
-::ng-deep .mat-paginator-range-actions {
- width: 55% !important;
- min-height: 43px !important;
- justify-content: space-between;
-}
+// ::ng-deep .mat-paginator-range-actions {
+// width: 55% !important;
+// min-height: 43px !important;
+// justify-content: space-between;
+// }
-::ng-deep .mat-paginator-navigation-previous {
- margin-left: auto !important;
-}
+// ::ng-deep .mat-paginator-navigation-previous {
+// margin-left: auto !important;
+// }
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
index e4910718e..f8aabc150 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
@@ -1,4 +1,4 @@
-
+
lock
@@ -11,7 +11,7 @@
storage
{{dmp.associatedProfiles.length}}
-
{{profile.label}}
+
{{profile.label}}
@@ -20,12 +20,12 @@
group
-
JOHN DOE
-
JOHN DOE
-
JOHN DOE
-
JOHN DOE
-
JOHN DOE
-
JOHN DOE
+
JOHN DOE
+
JOHN DOE
+
JOHN DOE
+
JOHN DOE
+
JOHN DOE
+
JOHN DOE
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
index 3982eaa82..e69de29bb 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
@@ -1,42 +0,0 @@
-.dmp-listing-item {
- margin-top: 2em;
- margin-bottom: 2em;
- cursor: pointer;
-
- .title {
- color: black;
- }
-
- .project-title {
- color: rgb(93, 125, 173);
- }
-
- .type-icon {
- color: rgb(191, 191, 191);
- }
-
- .dmp-chip {
- padding: 0.1em 1em;
- border: 0.1em solid rgb(236, 241, 249);
- border-radius: 10em;
- background-color: rgb(236, 241, 249);
- color: rgb(68, 114, 196);
- }
-
- .dmp-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);
- }
-
- mat-icon {
- width: auto;
- height: auto;
- }
-
- .mr-5 {
- margin-right: 2rem !important;
- }
-}
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index 042d4af51..93b5a3bb8 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -4,28 +4,164 @@
//Material-Bootstrap configuration
@import "assets/scss/bootstrap-material";
-@import '~@angular/material/theming';
-@import '~@covalent/core/theming/all-theme';
+@import "~@angular/material/theming";
+@import "~@covalent/core/theming/all-theme";
@include mat-core();
// Define a theme.
$primary: mat-palette($mat-indigo);
-$accent : mat-palette($mat-pink, A200, A100, A400);
+$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);
.snackbar-warning {
- background-color: #F39010;
- color: #F3EFEF;
+ background-color: #f39010;
+ color: #f3efef;
}
.snackbar-success {
- background-color: #109204;
- color: #F3EFEF;
+ background-color: #109204;
+ color: #f3efef;
}
.snackbar-error {
- background-color: #CF1407;
- color: #111010;
+ background-color: #cf1407;
+ color: #111010;
+}
+
+.listing-item {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ cursor: pointer;
+
+ .title {
+ color: black;
+ }
+
+ .project-title {
+ color: rgb(93, 125, 173);
+ }
+
+ .type-icon {
+ color: rgb(191, 191, 191);
+ }
+
+ .chip {
+ padding: 0.1em 1em;
+ border: 0.1em solid rgb(218, 227, 243);
+ border-radius: 10em;
+ background-color: rgb(236, 241, 249);
+ color: rgb(68, 114, 196);
+ text-transform: uppercase;
+ font-weight: 500;
+ }
+
+ .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);
+ }
+
+ 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;
+ }
+
+// .template-name {
+// padding-left: 0px;
+// border: 1px solid rgb(218, 227, 243);
+// color: rgb(43, 104, 209);
+// background-color: rgb(236, 241, 249);
+// border-radius: 10em;
+// justify-content: center;
+// text-transform: uppercase;
+// display: flex;
+// width: 25em;
+// height: 1.8em;
+// margin-top: 15px;
+// font-size: 13px;
+// font-weight: 500;
+// }
+
+ .draft-bookmark {
+ color: #e7e6e6;
+ }
+
+ .finalized-bookmark {
+ color: #92d050;
+ }
+
+ h4 span {
+ color: #0070c0;
+ font-weight: 600;
+ }
+}
+
+.listing {
+ .mat-card {
+ margin: 1em 0;
+ }
+
+ .col-9 {
+ display: flex;
+ flex-direction: column;
+ }
+
+ ::ng-deep .mat-paginator {
+ margin-top: auto;
+ }
+
+ ::ng-deep .mat-paginator-container {
+ flex-direction: row-reverse !important;
+ justify-content: space-between !important;
+ background-color: #f6f6f6;
+ height: 30px;
+ min-height: 30px !important;
+ }
+
+ ::ng-deep .mat-paginator-page-size {
+ height: 43px;
+ }
+
+ ::ng-deep .mat-icon-button {
+ height: 30px !important;
+ font-size: 12px !important;
+ }
+
+ ::ng-deep .mat-paginator-range-label {
+ margin: 15px 32px 0 24px !important;
+ }
+
+ ::ng-deep .mat-paginator-range-actions {
+ width: 55% !important;
+ min-height: 43px !important;
+ justify-content: space-between;
+ }
+
+ ::ng-deep .mat-paginator-navigation-previous {
+ margin-left: auto !important;
+ }
}