From 8a9e0c2d1f4714b9c3a6c7bdced12601897625a1 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Wed, 24 Apr 2019 12:26:53 +0300 Subject: [PATCH] dashboard redesign --- dmp-frontend/angular.json | 8 +- dmp-frontend/src/app/app.component.html | 16 +- dmp-frontend/src/app/app.module.ts | 7 +- .../dataset-profile-listing.component.scss | 18 +- .../dmp-profile-listing.component.scss | 11 +- .../app/ui/dashboard/dashboard.component.html | 84 +- .../app/ui/dashboard/dashboard.component.ts | 3 +- .../src/app/ui/dashboard/dashboard.module.ts | 13 +- .../ui/dashboard/drafts/drafts.component.css | 26 + .../ui/dashboard/drafts/drafts.component.html | 89 ++ .../dashboard/drafts/drafts.component.spec.ts | 25 + .../ui/dashboard/drafts/drafts.component.ts | 15 + .../info-counter/info-counter.component.css | 9 + .../info-counter/info-counter.component.html | 16 + .../info-counter.component.spec.ts | 25 + .../info-counter/info-counter.component.ts | 55 ++ .../recent-activity.component.html | 2 +- .../recent-edited-activity.component.css | 0 .../recent-edited-activity.component.html | 115 +++ .../recent-edited-activity.component.spec.ts | 25 + .../recent-edited-activity.component.ts | 15 + .../recent-visited-activity.component.css | 0 .../recent-visited-activity.component.html | 86 ++ .../recent-visited-activity.component.spec.ts | 25 + .../recent-visited-activity.component.ts | 62 ++ .../ui/dashboard/wizard/wizard.component.css | 10 + .../ui/dashboard/wizard/wizard.component.html | 10 + .../dashboard/wizard/wizard.component.spec.ts | 25 + .../ui/dashboard/wizard/wizard.component.ts | 30 + .../dataset-create-wizard.component.html | 78 +- .../dataset-wizard.component.html | 244 ++--- .../listing/dataset-listing.component.html | 162 ++-- .../listing/dataset-listing.component.scss | 11 +- .../ui/dmp/editor/dmp-editor.component.html | 362 ++++---- .../dynamic-fields-project.component.html | 4 +- .../ui/dmp/listing/dmp-listing.component.html | 192 ++-- .../ui/dmp/listing/dmp-listing.component.scss | 11 +- .../dmp-wizard-dataset-listing.component.scss | 15 +- .../explore-dataset-listing.component.html | 138 +-- .../misc/navigation/navigation.component.html | 28 +- .../ui/misc/navigation/navigation.module.ts | 3 +- .../app/ui/misc/search/search.component.css | 10 + .../app/ui/misc/search/search.component.html | 60 ++ .../ui/misc/search/search.component.spec.ts | 25 + .../app/ui/misc/search/search.component.ts | 53 ++ .../src/app/ui/navbar/navbar.component.css | 28 + .../src/app/ui/navbar/navbar.component.html | 66 ++ .../app/ui/navbar/navbar.component.spec.ts | 25 + .../src/app/ui/navbar/navbar.component.ts | 155 ++++ .../src/app/ui/navbar/navbar.module.ts | 21 + .../editor/project-editor.component.html | 192 ++-- .../criteria/project-criteria.component.html | 2 +- .../listing/project-listing.component.html | 116 +-- .../listing/project-listing.component.scss | 44 +- .../dataset-editor-wizard-model.ts | 5 +- .../dataset-editor-wizard.component.html | 4 +- .../quick-wizard-editor.component.html | 144 +-- .../src/app/ui/sidebar/sidebar.component.css | 23 + .../src/app/ui/sidebar/sidebar.component.html | 73 ++ .../app/ui/sidebar/sidebar.component.spec.ts | 25 + .../src/app/ui/sidebar/sidebar.component.ts | 89 ++ .../src/app/ui/sidebar/sidebar.module.ts | 19 + dmp-frontend/src/assets/css/demo.css | 347 ++++++++ dmp-frontend/src/assets/i18n/en.json | 18 +- .../src/{ => assets/scss}/blue-theme.scss | 0 .../src/assets/scss/core/_alerts.scss | 161 ++++ .../src/assets/scss/core/_buttons.scss | 257 ++++++ dmp-frontend/src/assets/scss/core/_cards.scss | 658 ++++++++++++++ .../src/assets/scss/core/_checkboxes.scss | 210 +++++ .../src/assets/scss/core/_dropdown.scss | 205 +++++ .../src/assets/scss/core/_example-pages.scss | 55 ++ .../src/assets/scss/core/_fixed-plugin.scss | 302 +++++++ .../src/assets/scss/core/_footers.scss | 102 +++ dmp-frontend/src/assets/scss/core/_forms.scss | 437 +++++++++ .../src/assets/scss/core/_images.scss | 10 + .../src/assets/scss/core/_input-group.scss | 36 + dmp-frontend/src/assets/scss/core/_misc.scss | 74 ++ .../src/assets/scss/core/_mixins.scss | 16 + .../src/assets/scss/core/_navbar.scss | 252 ++++++ .../src/assets/scss/core/_popover.scss | 53 ++ .../src/assets/scss/core/_popups.scss | 85 ++ .../src/assets/scss/core/_radios.scss | 98 +++ .../src/assets/scss/core/_responsive.scss | 830 ++++++++++++++++++ .../src/assets/scss/core/_ripples.scss | 41 + .../scss/core/_sidebar-and-main-panel.scss | 503 +++++++++++ .../src/assets/scss/core/_tables.scss | 185 ++++ dmp-frontend/src/assets/scss/core/_tabs.scss | 83 ++ .../src/assets/scss/core/_togglebutton.scss | 85 ++ .../src/assets/scss/core/_tooltip.scss | 53 ++ dmp-frontend/src/assets/scss/core/_type.scss | 92 ++ .../src/assets/scss/core/_variables.scss | 35 + .../assets/scss/core/cards/_card-plain.scss | 28 + .../assets/scss/core/cards/_card-profile.scss | 48 + .../assets/scss/core/cards/_card-stats.scss | 46 + .../src/assets/scss/core/mixins/_alert.scss | 130 +++ .../assets/scss/core/mixins/_animations.scss | 109 +++ .../assets/scss/core/mixins/_breakpoints.scss | 34 + .../src/assets/scss/core/mixins/_buttons.scss | 385 ++++++++ .../assets/scss/core/mixins/_chartist.scss | 92 ++ .../scss/core/mixins/_colored-shadows.scss | 138 +++ .../src/assets/scss/core/mixins/_drawer.scss | 253 ++++++ .../src/assets/scss/core/mixins/_forms.scss | 394 +++++++++ .../src/assets/scss/core/mixins/_hover.scss | 17 + .../src/assets/scss/core/mixins/_layout.scss | 16 + .../scss/core/mixins/_navbar-colors.scss | 18 + .../src/assets/scss/core/mixins/_navs.scss | 61 ++ .../scss/core/mixins/_sidebar-color.scss | 58 ++ .../scss/core/mixins/_transparency.scss | 20 + .../src/assets/scss/core/mixins/_type.scss | 15 + .../assets/scss/core/mixins/_utilities.scss | 109 +++ .../assets/scss/core/mixins/_variables.scss | 25 + .../scss/core/mixins/_vendor-prefixes.scss | 201 +++++ .../assets/scss/core/plugins/_animate.scss | 230 +++++ .../assets/scss/core/plugins/_chartist.scss | 328 +++++++ .../scss/core/plugins/_perfect-scrollbar.scss | 113 +++ .../src/assets/scss/core/variables/_body.scss | 6 + .../_bootstrap-material-design-base.scss | 33 + .../variables/_bootstrap-material-design.scss | 235 +++++ .../assets/scss/core/variables/_brand.scss | 12 + .../assets/scss/core/variables/_buttons.scss | 88 ++ .../src/assets/scss/core/variables/_card.scss | 20 + .../src/assets/scss/core/variables/_code.scss | 3 + .../scss/core/variables/_colors-map.scss | 311 +++++++ .../assets/scss/core/variables/_colors.scss | 322 +++++++ .../scss/core/variables/_custom-forms.scss | 5 + .../assets/scss/core/variables/_drawer.scss | 5 + .../assets/scss/core/variables/_dropdown.scss | 20 + .../assets/scss/core/variables/_forms.scss | 37 + .../assets/scss/core/variables/_layout.scss | 1 + .../scss/core/variables/_list-group.scss | 20 + .../src/assets/scss/core/variables/_menu.scss | 18 + .../assets/scss/core/variables/_modals.scss | 34 + .../src/assets/scss/core/variables/_nav.scss | 57 ++ .../scss/core/variables/_pagination.scss | 6 + .../assets/scss/core/variables/_shadow.scss | 35 + .../assets/scss/core/variables/_snackbar.scss | 6 + .../assets/scss/core/variables/_spacing.scss | 26 + .../assets/scss/core/variables/_state.scss | 16 + .../assets/scss/core/variables/_tables.scss | 6 + .../assets/scss/core/variables/_tooltip.scss | 1 + .../src/assets/scss/core/variables/_type.scss | 107 +++ .../src/assets/scss/material-dashboard.scss | 56 ++ .../src/environments/environment.staging.ts | 2 +- dmp-frontend/src/environments/environment.ts | 51 +- dmp-frontend/src/index.html | 7 +- 145 files changed, 12037 insertions(+), 912 deletions(-) create mode 100644 dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.css create mode 100644 dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html create mode 100644 dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.spec.ts create mode 100644 dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts create mode 100644 dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.css create mode 100644 dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.html create mode 100644 dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.spec.ts create mode 100644 dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.ts create mode 100644 dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css create mode 100644 dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html create mode 100644 dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.spec.ts create mode 100644 dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts create mode 100644 dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.css create mode 100644 dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.html create mode 100644 dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.spec.ts create mode 100644 dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.ts create mode 100644 dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.css create mode 100644 dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.html create mode 100644 dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.spec.ts create mode 100644 dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.ts create mode 100644 dmp-frontend/src/app/ui/misc/search/search.component.css create mode 100644 dmp-frontend/src/app/ui/misc/search/search.component.html create mode 100644 dmp-frontend/src/app/ui/misc/search/search.component.spec.ts create mode 100644 dmp-frontend/src/app/ui/misc/search/search.component.ts create mode 100644 dmp-frontend/src/app/ui/navbar/navbar.component.css create mode 100644 dmp-frontend/src/app/ui/navbar/navbar.component.html create mode 100644 dmp-frontend/src/app/ui/navbar/navbar.component.spec.ts create mode 100644 dmp-frontend/src/app/ui/navbar/navbar.component.ts create mode 100644 dmp-frontend/src/app/ui/navbar/navbar.module.ts create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar.component.css create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar.component.html create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar.component.spec.ts create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar.component.ts create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar.module.ts create mode 100644 dmp-frontend/src/assets/css/demo.css rename dmp-frontend/src/{ => assets/scss}/blue-theme.scss (100%) create mode 100644 dmp-frontend/src/assets/scss/core/_alerts.scss create mode 100644 dmp-frontend/src/assets/scss/core/_buttons.scss create mode 100644 dmp-frontend/src/assets/scss/core/_cards.scss create mode 100644 dmp-frontend/src/assets/scss/core/_checkboxes.scss create mode 100644 dmp-frontend/src/assets/scss/core/_dropdown.scss create mode 100644 dmp-frontend/src/assets/scss/core/_example-pages.scss create mode 100644 dmp-frontend/src/assets/scss/core/_fixed-plugin.scss create mode 100644 dmp-frontend/src/assets/scss/core/_footers.scss create mode 100644 dmp-frontend/src/assets/scss/core/_forms.scss create mode 100644 dmp-frontend/src/assets/scss/core/_images.scss create mode 100644 dmp-frontend/src/assets/scss/core/_input-group.scss create mode 100644 dmp-frontend/src/assets/scss/core/_misc.scss create mode 100644 dmp-frontend/src/assets/scss/core/_mixins.scss create mode 100644 dmp-frontend/src/assets/scss/core/_navbar.scss create mode 100644 dmp-frontend/src/assets/scss/core/_popover.scss create mode 100644 dmp-frontend/src/assets/scss/core/_popups.scss create mode 100644 dmp-frontend/src/assets/scss/core/_radios.scss create mode 100644 dmp-frontend/src/assets/scss/core/_responsive.scss create mode 100644 dmp-frontend/src/assets/scss/core/_ripples.scss create mode 100644 dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss create mode 100644 dmp-frontend/src/assets/scss/core/_tables.scss create mode 100644 dmp-frontend/src/assets/scss/core/_tabs.scss create mode 100644 dmp-frontend/src/assets/scss/core/_togglebutton.scss create mode 100644 dmp-frontend/src/assets/scss/core/_tooltip.scss create mode 100644 dmp-frontend/src/assets/scss/core/_type.scss create mode 100644 dmp-frontend/src/assets/scss/core/_variables.scss create mode 100644 dmp-frontend/src/assets/scss/core/cards/_card-plain.scss create mode 100644 dmp-frontend/src/assets/scss/core/cards/_card-profile.scss create mode 100644 dmp-frontend/src/assets/scss/core/cards/_card-stats.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_alert.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_animations.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_breakpoints.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_buttons.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_chartist.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_colored-shadows.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_drawer.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_forms.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_hover.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_layout.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_navbar-colors.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_navs.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_sidebar-color.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_transparency.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_type.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_utilities.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_variables.scss create mode 100644 dmp-frontend/src/assets/scss/core/mixins/_vendor-prefixes.scss create mode 100644 dmp-frontend/src/assets/scss/core/plugins/_animate.scss create mode 100644 dmp-frontend/src/assets/scss/core/plugins/_chartist.scss create mode 100644 dmp-frontend/src/assets/scss/core/plugins/_perfect-scrollbar.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_body.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_bootstrap-material-design-base.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_bootstrap-material-design.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_brand.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_buttons.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_card.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_code.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_colors-map.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_colors.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_custom-forms.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_drawer.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_dropdown.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_forms.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_layout.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_list-group.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_menu.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_modals.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_nav.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_pagination.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_shadow.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_snackbar.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_spacing.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_state.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_tables.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_tooltip.scss create mode 100644 dmp-frontend/src/assets/scss/core/variables/_type.scss create mode 100644 dmp-frontend/src/assets/scss/material-dashboard.scss diff --git a/dmp-frontend/angular.json b/dmp-frontend/angular.json index 4a86379e3..f389f1fa4 100644 --- a/dmp-frontend/angular.json +++ b/dmp-frontend/angular.json @@ -21,7 +21,9 @@ "src/favicon.ico" ], "styles": [ - "src/styles.scss" + "src/styles.scss", + "src/assets/scss/material-dashboard.scss", + "src/assets/css/demo.css" ], "scripts": [] }, @@ -88,7 +90,9 @@ "tsConfig": "src/tsconfig.spec.json", "scripts": [], "styles": [ - "src/styles.scss" + "src/styles.scss", + "src/assets/scss/material-dashboard.scss", + "src/assets/css/demo.css" ], "assets": [ "src/assets", diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html index 1fbd999b4..15a1c59fd 100644 --- a/dmp-frontend/src/app/app.component.html +++ b/dmp-frontend/src/app/app.component.html @@ -1,4 +1,16 @@ - +
+
+ +
+
+
+ + +
+
+ + + diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts index b3eff9887..0bf68a38d 100644 --- a/dmp-frontend/src/app/app.module.ts +++ b/dmp-frontend/src/app/app.module.ts @@ -21,6 +21,9 @@ import { NavigationModule } from './ui/misc/navigation/navigation.module'; import { LoginModule } from './ui/auth/login/login.module'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { DatasetCreateWizardModule } from './ui/dataset-create-wizard/dataset-create-wizard.module'; +import { NavbarModule } from './ui/navbar/navbar.module'; +import { SidebarModule } from './ui/sidebar/sidebar.module'; +import { SearchComponent } from './ui/misc/search/search.component'; // AoT requires an exported function for factories export function HttpLoaderFactory(http: HttpClient) { @@ -54,9 +57,11 @@ export function HttpLoaderFactory(http: HttpClient) { ReactiveFormsModule, FormsModule, DatasetCreateWizardModule, + NavbarModule, + SidebarModule ], declarations: [ - AppComponent, + AppComponent ], providers: [ { diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss index a43ee24a4..5b8961b21 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss @@ -3,12 +3,13 @@ } .mat-fab-bottom-right { - top: auto !important; - right: 20px !important; - bottom: 10px !important; - left: auto !important; - position: fixed !important; - z-index: 5; + // top: auto !important; + // right: 20px !important; + // bottom: 10px !important; + // left: auto !important; + // position: fixed !important; + float: right; + z-index: 5; } .full-width { @@ -23,7 +24,7 @@ cursor: pointer; } -mat-row:hover { +mat-row:hover { background-color: lightgray; } @@ -34,5 +35,4 @@ mat-row:hover { mat-row:nth-child(odd){ background-color:#eef0fb; } - - \ No newline at end of file + diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss b/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss index 83d69668b..9523bc62a 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss +++ b/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss @@ -17,11 +17,12 @@ } .mat-fab-bottom-right { - top: auto !important; - right: 20px !important; - bottom: 10px !important; - left: auto !important; - position: fixed !important; + // top: auto !important; + // right: 20px !important; + // bottom: 10px !important; + // left: auto !important; + // position: fixed !important; + float: right; z-index: 5; } } diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html index 69a222ec5..81de620ed 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html @@ -1,4 +1,84 @@ -
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+
+
+ + diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts b/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts index 1553b0ddf..d42ff27ca 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts @@ -3,7 +3,6 @@ import { FormControl } from '@angular/forms'; import { Router } from '@angular/router'; import { Observable } from 'rxjs/internal/Observable'; import { takeUntil } from 'rxjs/operators'; -import { JsonSerializer } from '../../common/types/json/json-serializer'; import { BaseComponent } from '../../core/common/base/base.component'; import { RecentActivityType } from '../../core/common/enum/recent-activity-type'; import { DashboardStatisticsModel } from '../../core/model/dashboard/dashboard-statistics-model'; @@ -28,6 +27,7 @@ export class DashboardComponent extends BaseComponent implements OnInit { datasetActivities: any[]; projectActivities: any[]; dmpActivities: any[]; + organisationActivities: any[]; public dashboardStatisticsData: DashboardStatisticsModel; public formControl = new FormControl(); projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration; @@ -61,6 +61,7 @@ export class DashboardComponent extends BaseComponent implements OnInit { this.datasetActivities = response['recentDatasetActivities']; this.dmpActivities = response['recentDmpActivities']; this.projectActivities = response['recentProjectActivities']; + this.organisationActivities = response['totalOrganisationCount']; }); } diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.module.ts b/dmp-frontend/src/app/ui/dashboard/dashboard.module.ts index 4fa99d50c..3eeeafdd0 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.module.ts +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.module.ts @@ -5,6 +5,12 @@ import { DashboardComponent } from './dashboard.component'; import { DashboardRoutingModule } from './dashboard.routing'; import { QuickWizardCreateAdd } from './quick-wizard-create-add/quick-wizard-create-add.component'; import { RecentActivityComponent } from './recent-activity/recent-activity.component'; +import { WizardComponent } from './wizard/wizard.component'; +import { InfoCounterComponent } from './info-counter/info-counter.component'; +import { RecentVisitedActivityComponent } from './recent-visited-activity/recent-visited-activity.component'; +import { RecentEditedActivityComponent } from './recent-edited-activity/recent-edited-activity.component'; +import { DraftsComponent } from './drafts/drafts.component'; + @NgModule({ imports: [ @@ -15,7 +21,12 @@ import { RecentActivityComponent } from './recent-activity/recent-activity.compo DashboardComponent, RecentActivityComponent, CardComponent, - QuickWizardCreateAdd + QuickWizardCreateAdd, + WizardComponent, + InfoCounterComponent, + RecentVisitedActivityComponent, + RecentEditedActivityComponent, + DraftsComponent ], entryComponents: [ QuickWizardCreateAdd diff --git a/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.css b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.css new file mode 100644 index 000000000..9c881118a --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.css @@ -0,0 +1,26 @@ +.grey { + color: rgb(162, 162, 162); +} + +.card-draft { + height: calc(100% - 60px); +} + +.draft-desc { + padding-top: 15px; + padding-bottom: 15px; +} + +.draft-subtitle { + font-weight: 400; + color: rgb(162, 162, 162); +} + +.draft-title { + font-weight: 500; + color: black; +} + +.drafts-more-btn { + text-align: right; +} diff --git a/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html new file mode 100644 index 000000000..3690b3eef --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html @@ -0,0 +1,89 @@ +
+
+
+

DRAFTS

+

Draft Registrations

+
+ VIEW ALL +
+
+ + + + + + + + + +
+
+
+ view_agenda +
+
+
+ more_horiz +
+
+ Dataset: Clarin-D For Dmp: Dmp for Project: Real time + application +
+
03.08.2019
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +
+ +
+
+
+
+
+ library_books +
+
+
+ more_horiz +
+
Title unavailable
+
03.08.2019
+
+ Description unavailable +
+ +
+
+
+
+
diff --git a/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.spec.ts b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.spec.ts new file mode 100644 index 000000000..cf1ef647c --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DraftsComponent } from './drafts.component'; + +describe('DraftsComponent', () => { + let component: DraftsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DraftsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DraftsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts new file mode 100644 index 000000000..432ca07a8 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-drafts', + templateUrl: './drafts.component.html', + styleUrls: ['./drafts.component.css'] +}) +export class DraftsComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.css b/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.css new file mode 100644 index 000000000..493c8b7b1 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.css @@ -0,0 +1,9 @@ +.view-all { + cursor: pointer; + color: rgb(106, 164, 217); + font-weight: 500; +} + +.view-all:hover { + color: rgb(46, 117, 182); +} diff --git a/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.html b/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.html new file mode 100644 index 000000000..f884a86a1 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.html @@ -0,0 +1,16 @@ +
+
+
+ {{ icon }} +
+

{{ title | translate }}

+

+ {{ subtitle }} +

+
+
+
+
VIEW ALL
+
+
+
diff --git a/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.spec.ts b/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.spec.ts new file mode 100644 index 000000000..323ef79b5 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InfoCounterComponent } from './info-counter.component'; + +describe('InfoCounterComponent', () => { + let component: InfoCounterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InfoCounterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InfoCounterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.ts b/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.ts new file mode 100644 index 000000000..c0f84ae45 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.ts @@ -0,0 +1,55 @@ +import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; +import { Router } from "@angular/router"; +import { AuthService } from "../../../core/services/auth/auth.service"; + +// declare interface RouteInfo { +// path: string; +// title: string; +// subtitle: string; +// icon: string; +// } +// export const INFO_COUNTER_ROUTES: RouteInfo[] = [ +// { path: '', title: 'DATA MANAGEMENT PLANS', subtitle: '4', icon: 'view_agenda' }, +// { path: '', title: 'RELATED DATA DESCRIPTIONS', subtitle: '20', icon: 'library_books' }, +// { path: '', title: 'RELATED PROJECTS', subtitle: '4', icon: 'work_outline' }, +// { path: '', title: 'ORGANIZATIONS', subtitle: '20', icon: 'scatter_plot' } +// ]; + +@Component({ + selector: "app-info-counter", + templateUrl: "./info-counter.component.html", + styleUrls: ["./info-counter.component.css"] +}) +export class InfoCounterComponent implements OnInit { + @Input() title: string; + @Input() subtitle: string; + @Input() icon: string; + @Input() routerLink: string; + @Input() buttonRedirectLink: string; + @Output() onClick: EventEmitter = new EventEmitter(); + + infoCounterItems: any[]; + + constructor(private router: Router, private authService: AuthService) {} + + ngOnInit() { + // this.infoCounterItems = INFO_COUNTER_ROUTES.filter(infoCounterItem => infoCounterItem); + } + + navigateToUrl() { + if (!this.isAuthenticated()) { return; } + this.router.navigate([this.routerLink]); + } + + createNew() { + this.router.navigate([this.buttonRedirectLink]); + } + + isAuthenticated() { + return this.authService.current() != null; + } + + viewAllClicked() { + this.onClick.emit(); + } +} diff --git a/dmp-frontend/src/app/ui/dashboard/recent-activity/recent-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-activity/recent-activity.component.html index 778456c42..489f31cbb 100644 --- a/dmp-frontend/src/app/ui/dashboard/recent-activity/recent-activity.component.html +++ b/dmp-frontend/src/app/ui/dashboard/recent-activity/recent-activity.component.html @@ -8,7 +8,7 @@ - +

{{activity.label}}

diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html new file mode 100644 index 000000000..560b9df4a --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html @@ -0,0 +1,115 @@ +
+
+
+

+ LAST EDITED DATA MANAGEMENT PLAN +

+

+ The DMPs below are public under the ## license of +

+
+ VIEW ALL +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NAMETEMPLATEPROJECTROLEORGANIZATIONSTATUSVISITED
DMP Name + + Project NameRole NameOrganization NamePRIVATE01.01.2019more_horiz
DMP Name + + Project NameRole NameOrganization Name + + 01.01.2019more_horiz
DMP Name + + Project NameRole NameOrganization NamePRIVATE01.01.2019more_horiz
+
+
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.spec.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.spec.ts new file mode 100644 index 000000000..d0c08de30 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecentEditedActivityComponent } from './recent-edited-activity.component'; + +describe('RecentEditedActivityComponent', () => { + let component: RecentEditedActivityComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RecentEditedActivityComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RecentEditedActivityComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts new file mode 100644 index 000000000..96139dc0c --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-recent-edited-activity', + templateUrl: './recent-edited-activity.component.html', + styleUrls: ['./recent-edited-activity.component.css'] +}) +export class RecentEditedActivityComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.css b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.html new file mode 100644 index 000000000..759d80d86 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.html @@ -0,0 +1,86 @@ +
+
+
+

+ LAST VISITED DATA MANAGEMENT PLAN +

+

+ The DMPs below are public under the ## license of +

+
+ VIEW ALL +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NAMETEMPLATEPROJECTROLEORGANIZATIONSTATUSVISITED
{{activity.label}} + + Project NameRole NameOrganization Name + + PRIVATE{{activity.timestamp | date:'shortDate'}}more_horiz
-- +
    +
  • + -- +
    • +
+ 		----------more_horiz
+
+
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.spec.ts b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.spec.ts new file mode 100644 index 000000000..965e32b34 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecentVisitedActivityComponent } from './recent-visited-activity.component'; + +describe('RecentActivityComponent', () => { + let component: RecentVisitedActivityComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RecentVisitedActivityComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RecentVisitedActivityComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.ts new file mode 100644 index 000000000..1112bf205 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit } from "@angular/core"; +import { RecentActivityType } from "../../../core/common/enum/recent-activity-type"; +import { BaseComponent } from '../../../core/common/base/base.component'; +import { Router } from "@angular/router"; +import { AuthService } from "../../../core/services/auth/auth.service"; +import { UserService } from "../../../core/services/user/user.service"; +import { takeUntil } from "rxjs/operators"; + +@Component({ + selector: "app-recent-visited-activity", + templateUrl: "./recent-visited-activity.component.html", + styleUrls: ["./recent-visited-activity.component.css"] +}) +export class RecentVisitedActivityComponent extends BaseComponent implements OnInit { + dmpActivities: any[]; + recentActivityItems: any[]; + datasetActivities: any[]; + projectActivities: any[]; + organisationActivities: any[]; + recentActivityTypeEnum = RecentActivityType; + public: boolean = false; + + constructor(private router: Router, private authentication: AuthService, private userService: UserService) { + super(); + } + + ngOnInit() { + if (this.isAuthenticated()) { + this.userService.getRecentActivity() + .pipe(takeUntil(this._destroyed)) + .subscribe(response => { + this.datasetActivities = response['recentDatasetActivities']; + this.dmpActivities = response['recentDmpActivities']; + this.projectActivities = response['recentProjectActivities']; + this.organisationActivities = response['totalOrganisationCount']; + }); + } + } + + redirect(id: string, type: RecentActivityType) { + switch (type) { + case RecentActivityType.Project: { + this.router.navigate(["projects/edit/" + id]); + return; + } + case RecentActivityType.Dataset: { + this.router.navigate(["datasets/edit/" + id]); + return; + } + case RecentActivityType.Dmp: { + this.router.navigate(["plans/edit/" + id]); + return; + } + default: + throw new Error("Unsupported Activity Type "); + } + } + + public isAuthenticated(): boolean { + return !(!this.authentication.current()); + } +} diff --git a/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.css b/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.css new file mode 100644 index 000000000..87ca6e700 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.css @@ -0,0 +1,10 @@ +.clickable { + cursor: pointer; +} + +.play_circle { + display: inline-block; + float: right; + margin: 0px 10px 0px 0px; + font-size: 40px; +} diff --git a/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.html b/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.html new file mode 100644 index 000000000..4de8ffdfe --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.html @@ -0,0 +1,10 @@ +
+
+
+

{{ title }}

+

{{ subtitle }}

+
+ {{ icon }} +
+
+
diff --git a/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.spec.ts b/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.spec.ts new file mode 100644 index 000000000..b5ec8b2c9 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WizardComponent } from './wizard.component'; + +describe('WizardComponent', () => { + let component: WizardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WizardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WizardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.ts b/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.ts new file mode 100644 index 000000000..b38486534 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.ts @@ -0,0 +1,30 @@ +import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; +import { Router } from "@angular/router"; + +@Component({ + selector: "app-wizard", + templateUrl: "./wizard.component.html", + styleUrls: ["./wizard.component.css"] +}) +export class WizardComponent { + @Input() title: string; + @Input() subtitle: string; + @Input() icon: string; + @Input() routerLink: string; + @Output() onClick: EventEmitter = new EventEmitter(); + + wizardItems: any[]; + + constructor(private router: Router) {} + + cardClicked() { + this.onClick.emit(); + } + navigateToCreate() { + this.router.navigate(["/quick-wizard"]); + } + + navigateToAdd() { + this.router.navigate(["/datasetcreatewizard"]); + } +} diff --git a/dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.html b/dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.html index b1a4c9f2a..e81e41e80 100644 --- a/dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.html +++ b/dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.html @@ -1,39 +1,43 @@ -
- - - {{'DATASET-CREATE-WIZARD.FIRST-STEP.TITLE'| translate}} -
- - -
-
-
-
-
- +
+
+
+ + + {{'DATASET-CREATE-WIZARD.FIRST-STEP.TITLE'| translate}} +
+ + +
+
+
+
+
+ +
+
-
-
- - - - {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}} - -
- - -
-
- - - -
- - + + + + {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}} + +
+ + +
+
+ + + +
+ + +
+
diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html index d131f7818..3d1387380 100644 --- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html +++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html @@ -1,123 +1,127 @@ -
-

{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}

-
-
-

{{datasetWizardModel?.label}} {{ 'GENERAL.NAMES.DATASET' | translate }} - - - {{ 'GENERAL.STATUSES.EDIT' | translate }} -

-

{{'GENERAL.STATUSES.FINALISED' | translate }}

+
+
+
+

{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}

+
+
+

{{datasetWizardModel?.label}} {{ 'GENERAL.NAMES.DATASET' | translate }} + + - {{ 'GENERAL.STATUSES.EDIT' | translate }} +

+

{{'GENERAL.STATUSES.FINALISED' | translate }}

+
+
+ + + + + + +
+
+ + + + + + + +
+ +
+
+ + + {{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}} +
+
+ + + + + + + + {{profile.label}} + + + {{formGroup.get('profile').getError('backendError').message}} + + +
+
+
+
+ +
+
+
+
+
+ + + {{'DATASET-WIZARD.SECOND-STEP.TITLE' | translate}} +
+
+ +
+
+
+
+ +
+
+
+
+
+ + + {{'DATASET-WIZARD.THIRD-STEP.TITLE' | translate}} +
+ +
+
+
+ +
+
+
+
+ + + +
-
- - - - - - -
-
- - - - - - - -
- -
-
- - - {{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}} -
-
- - - - - - - - {{profile.label}} - - - {{formGroup.get('profile').getError('backendError').message}} - - -
-
-
-
- -
-
-
-
-
- - - {{'DATASET-WIZARD.SECOND-STEP.TITLE' | translate}} -
-
- -
-
-
-
- -
-
-
-
-
- - - {{'DATASET-WIZARD.THIRD-STEP.TITLE' | translate}} -
- -
-
-
- -
-
-
-
- - -
diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html index f69c23264..65093361f 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html +++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html @@ -1,93 +1,97 @@ -
-

{{'DATASET-LISTING.TITLE' | translate}} {{titlePrefix}}

+
+
+
+

{{'DATASET-LISTING.TITLE' | translate}} {{titlePrefix}}

- - - + + + - - - {{'DATASET-LISTING.COLUMNS.NAME' | translate}} - {{row.label}} - + + + {{'DATASET-LISTING.COLUMNS.NAME' | translate}} + {{row.label}} + - - - {{'DATASET-LISTING.COLUMNS.PROJECT' | - translate}} - {{row.project}} - + + + {{'DATASET-LISTING.COLUMNS.PROJECT' | + translate}} + {{row.project}} + - - - {{'DATASET-LISTING.COLUMNS.DMP' | - translate}} - {{row.dmp}} - + + + {{'DATASET-LISTING.COLUMNS.DMP' | + translate}} + {{row.dmp}} + - - - {{'DATASET-LISTING.COLUMNS.PROFILE' | - translate}} - {{row.profile}} - + + + {{'DATASET-LISTING.COLUMNS.PROFILE' | + translate}} + {{row.profile}} + - - - {{'DATASET-LISTING.COLUMNS.STATUS' | translate}} - {{enumUtils.toDatasetStatusString(row.status)}} - + + + {{'DATASET-LISTING.COLUMNS.STATUS' | translate}} + {{enumUtils.toDatasetStatusString(row.status)}} + - - - - - - - - - - - + - - - {{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}} - {{row.description}} - + + - - - {{'DATASET-LISTING.COLUMNS.CREATED' | translate}} - {{row.created | date:'shortDate'}} - + + - - - + + - - - - + + + {{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}} + {{row.description}} + - - + + + {{'DATASET-LISTING.COLUMNS.CREATED' | translate}} + {{row.created | date:'shortDate'}} + + + + + + + + + + + + + +
+
diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss index 37b0e8c6a..9f62fd785 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss +++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss @@ -3,11 +3,12 @@ } .mat-fab-bottom-right { - top: auto !important; - right: 20px !important; - bottom: 10px !important; - left: auto !important; - position: fixed !important; + // top: auto !important; + // right: 20px !important; + // bottom: 10px !important; + // left: auto !important; + // position: fixed !important; + float: right; z-index: 5; } diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html index 2c0c41de9..dcd5272c3 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html +++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html @@ -1,183 +1,187 @@ -
-
- {{'DMP-EDITOR.TITLE.NEW' | translate}} - -

{{formGroup?.get('label')?.value}}

- -
-
- - -
-
-
-
-
- -
-
- -
-
- -
- - - - - - - - - -
-
-
- - -
- - - - {{formGroup.get('label').getError('backendError').message}} - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - - - - - - - - - {{formGroup.get('project').getError('backendError').message}} - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - - - - - - {{formGroup.get('profiles').getError('backendError').message}} - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - - - - - - - - - {{formGroup.get('organisations').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | - translate}} - - - - - - {{formGroup.get('researchers').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | - translate}} - - - - - - - - - - - - - - - - - - -
- -

Associated Users

- - person -
{{user.name}}
- - -
- -
-
-
+
+
+
+
+ {{'DMP-EDITOR.TITLE.NEW' | translate}} + +

{{formGroup?.get('label')?.value}}

+ +
+ + + +
-
-
-
+
+
+
+ +
+
+ +
+
+ +
+ + + + + + + + + +
-
-
- - - - + + +
+ + + + {{formGroup.get('label').getError('backendError').message}} + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + + + + + + + + + {{formGroup.get('project').getError('backendError').message}} + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + + + + + + {{formGroup.get('profiles').getError('backendError').message}} + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + + + + + + + + + {{formGroup.get('organisations').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | + translate}} + + + + + + {{formGroup.get('researchers').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | + translate}} + + + + + + + + + + + + + + + + + + +
+ +

Associated Users

+ + person +
{{user.name}}
+ + +
+ +
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dynamic-fields-project/dynamic-fields-project.component.html b/dmp-frontend/src/app/ui/dmp/editor/dynamic-fields-project/dynamic-fields-project.component.html index 26c6bec4b..8c4db1f67 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dynamic-fields-project/dynamic-fields-project.component.html +++ b/dmp-frontend/src/app/ui/dmp/editor/dynamic-fields-project/dynamic-fields-project.component.html @@ -1,7 +1,7 @@
-
+
-
\ No newline at end of file +
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html index 7df8f5706..bb3892e11 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html +++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html @@ -1,107 +1,111 @@ -
-

{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}

+
+
+
+

{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}

- - - + + + - - - {{'DMP-LISTING.COLUMNS.NAME' | translate}} - - {{row.label}} - + + + {{'DMP-LISTING.COLUMNS.NAME' | translate}} + + {{row.label}} + - - - {{'DMP-LISTING.COLUMNS.PROJECT' | - translate}} - {{row.project}} - + + + {{'DMP-LISTING.COLUMNS.PROJECT' | + translate}} + {{row.project}} + - - - {{'DMP-LISTING.COLUMNS.STATUS' | translate}} - {{enumUtils.toDmpStatusString(row.status)}} - + + + {{'DMP-LISTING.COLUMNS.STATUS' | translate}} + {{enumUtils.toDmpStatusString(row.status)}} + - - - - {{'DMP-LISTING.COLUMNS.CREATION-TIME' | translate}} - {{row.creationTime | date:'shortDate'}} - + + + + {{'DMP-LISTING.COLUMNS.CREATION-TIME' | translate}} + {{row.creationTime | date:'shortDate'}} + - - - {{'DMP-LISTING.COLUMNS.ORGANISATIONS' | translate}} - {{row.organisations}} - + + + {{'DMP-LISTING.COLUMNS.ORGANISATIONS' | translate}} + {{row.organisations}} + - - - - {{'DMP-LISTING.COLUMNS.LATEST_VERSION' | translate}} - - - - {{row.version}} - - - - + + + + {{'DMP-LISTING.COLUMNS.LATEST_VERSION' | translate}} + - - - - {{'DMP-LISTING.COLUMNS.DATASETS' | translate}} - - - - - - - {{'DMP-LISTING.COLUMNS.ACTIONS' | translate}} - - - - - - - - - - + {{row.version}} - - + + + - - - - + + + + {{'DMP-LISTING.COLUMNS.DATASETS' | translate}} + + + + + - - -
\ No newline at end of file + + {{'DMP-LISTING.COLUMNS.ACTIONS' | translate}} + + + + + + + + + + + + + + + + + + + + + +
+
+
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 7e03f8a2c..50da3a2b9 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 @@ -17,11 +17,12 @@ } .mat-fab-bottom-right { - top: auto !important; - right: 20px !important; - bottom: 10px !important; - left: auto !important; - position: fixed !important; + // top: auto !important; + // right: 20px !important; + // bottom: 10px !important; + // left: auto !important; + // position: fixed !important; + float: right; z-index: 5; } } diff --git a/dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.scss b/dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.scss index 2688cb118..9070df5a0 100644 --- a/dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.scss +++ b/dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.scss @@ -3,11 +3,12 @@ } .mat-fab-bottom-right { - top: auto !important; - right: 20px !important; - bottom: 10px !important; - left: auto !important; - position: fixed !important; + // top: auto !important; + // right: 20px !important; + // bottom: 10px !important; + // left: auto !important; + // position: fixed !important; + float: right; } .full-width { @@ -22,7 +23,7 @@ cursor: pointer; } -mat-row:hover { +mat-row:hover { background-color: lightgray; } @@ -32,4 +33,4 @@ mat-row:hover { mat-row:nth-child(odd){ background-color:#eef0fb; - } \ No newline at end of file + } diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html index 126c85869..53ccedf74 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html +++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html @@ -1,85 +1,89 @@ -
-

{{'DATASET-PUBLIC-LISTING.TITLE' | translate}} {{titlePrefix}}

-
-
- -
-
-
- - +
+
+
+

{{'DATASET-PUBLIC-LISTING.TITLE' | translate}} {{titlePrefix}}

+
+
+ +
+
+
+ + - - - {{'DATASET-LISTING.COLUMNS.NAME' | translate}} - {{row.label}} - + + + {{'DATASET-LISTING.COLUMNS.NAME' | translate}} + {{row.label}} + - - - {{'DATASET-LISTING.COLUMNS.PROJECT' | - translate}} - {{row.project}} - + + + {{'DATASET-LISTING.COLUMNS.PROJECT' | + translate}} + {{row.project}} + - - - {{'DATASET-LISTING.COLUMNS.PROFILE' - | translate}} - {{row.profile}} - + + + {{'DATASET-LISTING.COLUMNS.PROFILE' + | translate}} + {{row.profile}} + - - + + - - + + - - + + - - + + - - - {{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}} - {{row.description}} - + + + {{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}} + {{row.description}} + - - - {{'DATASET-LISTING.COLUMNS.CREATED' | - translate}} - {{row.created | date:'shortDate'}} - + + + {{'DATASET-LISTING.COLUMNS.CREATED' | + translate}} + {{row.created | date:'shortDate'}} + - - - + + + - - - - + + + + +
+ +
-
diff --git a/dmp-frontend/src/app/ui/misc/navigation/navigation.component.html b/dmp-frontend/src/app/ui/misc/navigation/navigation.component.html index 37a3fc8d8..17ceaf869 100644 --- a/dmp-frontend/src/app/ui/misc/navigation/navigation.component.html +++ b/dmp-frontend/src/app/ui/misc/navigation/navigation.component.html @@ -18,31 +18,8 @@
-
-
- - - - - {{option.label}} -
- {{transformType(option.type)}} - - - -
-
- -
+ -
- -
@@ -51,9 +28,8 @@ -
-
\ No newline at end of file +
diff --git a/dmp-frontend/src/app/ui/misc/navigation/navigation.module.ts b/dmp-frontend/src/app/ui/misc/navigation/navigation.module.ts index 796ee2ac9..3cfef3c81 100644 --- a/dmp-frontend/src/app/ui/misc/navigation/navigation.module.ts +++ b/dmp-frontend/src/app/ui/misc/navigation/navigation.module.ts @@ -4,12 +4,13 @@ import { CommonFormsModule } from '../../../common/forms/common-forms.module'; import { CommonUiModule } from '../../../common/ui/common-ui.module'; import { NavigationComponent } from './navigation.component'; import { UserDialogComponent } from './user-dialog/user-dialog.component'; +import { SearchComponent } from '../search/search.component'; @NgModule({ imports: [ CommonUiModule, CommonFormsModule, - RouterModule + RouterModule, ], declarations: [ NavigationComponent, diff --git a/dmp-frontend/src/app/ui/misc/search/search.component.css b/dmp-frontend/src/app/ui/misc/search/search.component.css new file mode 100644 index 000000000..7c88e9b6a --- /dev/null +++ b/dmp-frontend/src/app/ui/misc/search/search.component.css @@ -0,0 +1,10 @@ +.input-search { + width: 300px; + border: 1px solid rgb(218, 218, 218); + border-radius: 6px; + padding-left: 10px; +} + +.input-search input { + padding-top: 15px; +} diff --git a/dmp-frontend/src/app/ui/misc/search/search.component.html b/dmp-frontend/src/app/ui/misc/search/search.component.html new file mode 100644 index 000000000..c6b015165 --- /dev/null +++ b/dmp-frontend/src/app/ui/misc/search/search.component.html @@ -0,0 +1,60 @@ +
+
+ + +
+ + + {{ option.label }} +
+ {{ transformType(option.type) }} + + +
+ + diff --git a/dmp-frontend/src/app/ui/misc/search/search.component.spec.ts b/dmp-frontend/src/app/ui/misc/search/search.component.spec.ts new file mode 100644 index 000000000..43729199b --- /dev/null +++ b/dmp-frontend/src/app/ui/misc/search/search.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchComponent } from './search.component'; + +describe('SearchComponent', () => { + let component: SearchComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SearchComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/misc/search/search.component.ts b/dmp-frontend/src/app/ui/misc/search/search.component.ts new file mode 100644 index 000000000..d234171f8 --- /dev/null +++ b/dmp-frontend/src/app/ui/misc/search/search.component.ts @@ -0,0 +1,53 @@ +import { Component, OnInit } from "@angular/core"; +import { AuthService } from '../../../core/services/auth/auth.service'; +import { FormControl } from "@angular/forms"; +import { SearchBarService } from '../../../core/services/search-bar/search-bar.service'; +import { Router } from '@angular/router'; +import { Observable } from "rxjs"; +import { SearchBarItem } from "../../../core/model/dashboard/search-bar-item"; + +export enum SearchBarType { + Dataset = 0, + Dmp = 1, + Project = 2 +} + +@Component({ + selector: "app-search", + templateUrl: "./search.component.html", + styleUrls: ["./search.component.css"] +}) +export class SearchComponent implements OnInit { + public search = false; + public searchControl = new FormControl(); + filteredOptions: Observable; + + constructor(private authentication: AuthService, private router: Router, private searchBarService: SearchBarService) {} + + ngOnInit() { + this.filteredOptions = this.searchControl.valueChanges.debounceTime(500).distinctUntilChanged().flatMap(x => { + return this.searchBarService.search(x); + }); + } + + public isAuthenticated(): boolean { + return !!this.authentication.current(); + } + + onOptionSelected(event: any) { + this.search = false; + this.searchControl.patchValue(null); + const selectedSearchBarItem = event.option.value; + if (selectedSearchBarItem.type === SearchBarType.Dataset) { this.router.navigate(['datasets/edit/' + selectedSearchBarItem.id]); } + if (selectedSearchBarItem.type === SearchBarType.Project) { this.router.navigate(['projects/edit/' + selectedSearchBarItem.id]); } + if (selectedSearchBarItem.type === SearchBarType.Dmp) { this.router.navigate(['plans/edit/' + selectedSearchBarItem.id]); } + } + + transformType(type) { + switch (type) { + case SearchBarType.Dataset: return 'Dataset'; + case SearchBarType.Dmp: return 'DMP'; + case SearchBarType.Project: return 'Project'; + } + } +} diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.css b/dmp-frontend/src/app/ui/navbar/navbar.component.css new file mode 100644 index 000000000..38915b545 --- /dev/null +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.css @@ -0,0 +1,28 @@ +.navbar.navbar-transparent { + background-color: white !important; + -webkit-box-shadow: none; + box-shadow: none; +} + +.navbar .navbar-brand { + position: relative; + color: inherit; + height: 50px; + font-size: 1rem; + line-height: 30px; + padding: 0.625rem 0; + font-weight: 600; + margin-left: 1rem; + color: rgb(117, 117, 117); +} + +.navbar-wrapper i { + padding-bottom: 5px; + cursor: pointer; + color: rgb(117, 117, 117); +} + +.material-icons.md-32 { + font-size: 32px !important; + color: rgb(117, 117, 117); +} diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html new file mode 100644 index 000000000..ed112ec83 --- /dev/null +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html @@ -0,0 +1,66 @@ + diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.spec.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.spec.ts new file mode 100644 index 000000000..9032ad2ca --- /dev/null +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavbarComponent } from './navbar.component'; + +describe('NavbarComponent', () => { + let component: NavbarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NavbarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NavbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts new file mode 100644 index 000000000..ad9586a4c --- /dev/null +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts @@ -0,0 +1,155 @@ +import { Component, OnInit, ElementRef } from '@angular/core'; +import { GENERAL_ROUTES, DMP_ROUTES, PUBLIC_ROUTES } from '../sidebar/sidebar.component'; +// import { HISTORY_ROUTES } from '../sidebar/sidebar.component'; +import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common'; +import { Router } from '@angular/router'; +import { AuthService } from '../../core/services/auth/auth.service'; +import { MatDialog } from '@angular/material'; +import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component'; + +@Component({ + selector: 'app-navbar', + templateUrl: './navbar.component.html', + styleUrls: ['./navbar.component.css'] +}) +export class NavbarComponent implements OnInit { + private listTitles: any[]; + location: Location; + mobile_menu_visible: any = 0; + private toggleButton: any; + private sidebarVisible: boolean; + + constructor(location: Location, private element: ElementRef, private router: Router, private authentication: AuthService, private dialog: MatDialog) { + this.location = location; + this.sidebarVisible = false; + } + + ngOnInit(){ + this.listTitles = GENERAL_ROUTES.filter(listTitle => listTitle); + this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle)); + // this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle)); + this.listTitles.push(PUBLIC_ROUTES.filter(listTitle => listTitle)); + const navbar: HTMLElement = this.element.nativeElement; + this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0]; + this.router.events.subscribe((event) => { + this.sidebarClose(); + var $layer: any = document.getElementsByClassName('close-layer')[0]; + if ($layer) { + $layer.remove(); + this.mobile_menu_visible = 0; + } + }); + } + + public isAuthenticated(): boolean { + return !(!this.authentication.current()); + } + + sidebarOpen() { + const toggleButton = this.toggleButton; + const body = document.getElementsByTagName('body')[0]; + setTimeout(function(){ + toggleButton.classList.add('toggled'); + }, 500); + + body.classList.add('nav-open'); + + this.sidebarVisible = true; + }; + sidebarClose() { + const body = document.getElementsByTagName('body')[0]; + this.toggleButton.classList.remove('toggled'); + this.sidebarVisible = false; + body.classList.remove('nav-open'); + }; + sidebarToggle() { + // const toggleButton = this.toggleButton; + // const body = document.getElementsByTagName('body')[0]; + var $toggle = document.getElementsByClassName('navbar-toggler')[0]; + + if (this.sidebarVisible === false) { + this.sidebarOpen(); + } else { + this.sidebarClose(); + } + const body = document.getElementsByTagName('body')[0]; + + if (this.mobile_menu_visible == 1) { + // $('html').removeClass('nav-open'); + body.classList.remove('nav-open'); + if ($layer) { + $layer.remove(); + } + setTimeout(function() { + $toggle.classList.remove('toggled'); + }, 400); + + this.mobile_menu_visible = 0; + } else { + setTimeout(function() { + $toggle.classList.add('toggled'); + }, 430); + + var $layer = document.createElement('div'); + $layer.setAttribute('class', 'close-layer'); + + + if (body.querySelectorAll('.main-panel')) { + document.getElementsByClassName('main-panel')[0].appendChild($layer); + }else if (body.classList.contains('off-canvas-sidebar')) { + document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer); + } + + setTimeout(function() { + $layer.classList.add('visible'); + }, 100); + + $layer.onclick = function() { //asign a function + body.classList.remove('nav-open'); + this.mobile_menu_visible = 0; + $layer.classList.remove('visible'); + setTimeout(function() { + $layer.remove(); + $toggle.classList.remove('toggled'); + }, 400); + }.bind(this); + + body.classList.add('nav-open'); + this.mobile_menu_visible = 1; + + } + }; + + getTitle(){ + var titlee = this.location.prepareExternalUrl(this.location.path()); + if(titlee.charAt(0) === '#'){ + titlee = titlee.slice( 2 ); + } + titlee = titlee.split('/').pop(); + + for(var item = 0; item < this.listTitles.length; item++){ + if(this.listTitles[item].path === titlee){ + return this.listTitles[item].title; + } + } + return 'Dashboard'; + } + + public principalHasAvatar(): boolean { + return this.authentication.current().avatarUrl != null; + } + + public getPrincipalAvatar(): string { + return this.authentication.current().avatarUrl; + } + + openProfile() { + const dialogRef = this.dialog.open(UserDialogComponent, { + hasBackdrop: true, + autoFocus: false, + closeOnNavigation: true, + disableClose: false, + position: { top: '64px', right: '1em' } + }); + } +} diff --git a/dmp-frontend/src/app/ui/navbar/navbar.module.ts b/dmp-frontend/src/app/ui/navbar/navbar.module.ts new file mode 100644 index 000000000..11d89c3b2 --- /dev/null +++ b/dmp-frontend/src/app/ui/navbar/navbar.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { CommonFormsModule } from '../../common/forms/common-forms.module'; +import { CommonUiModule } from '../../common/ui/common-ui.module'; +import { NavbarComponent } from './navbar.component'; +import { SearchComponent } from '../misc/search/search.component'; + +@NgModule({ + imports: [ + CommonUiModule, + CommonFormsModule, + RouterModule + ], + declarations: [ + NavbarComponent, + SearchComponent + ], + entryComponents: [], + exports: [NavbarComponent] +}) +export class NavbarModule { } diff --git a/dmp-frontend/src/app/ui/project/editor/project-editor.component.html b/dmp-frontend/src/app/ui/project/editor/project-editor.component.html index 639c86f0e..08346b3ac 100644 --- a/dmp-frontend/src/app/ui/project/editor/project-editor.component.html +++ b/dmp-frontend/src/app/ui/project/editor/project-editor.component.html @@ -1,108 +1,112 @@ -
- {{'PROJECT-EDITOR.TITLE.NEW' | translate}} - {{formGroup?.get('label')?.value}} -
- - -
- - - - - -
- - - - -
- File is too big! +
+
+
+ {{'PROJECT-EDITOR.TITLE.NEW' | translate}} + {{formGroup?.get('label')?.value}} + + + +
+ + + + + +
+ + + + +
+ File is too big! +
+
+
+
+
+
+ +
+
+ +
+
+
-
-
-
-
-
- -
-
- -
-
-
-
- - -
- - - {{formGroup.get('label').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - + + +
+ + + {{formGroup.get('label').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + - - - {{formGroup.get('abbreviation').getError('backendError').message}} - + + + {{formGroup.get('abbreviation').getError('backendError').message}} + - - - {{formGroup.get('uri').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - + + + {{formGroup.get('uri').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + - - - - - {{formGroup.get('startDate').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - + + + + + {{formGroup.get('startDate').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + - - - - - {{formGroup.get('endDate').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - {{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}} + + + + + {{formGroup.get('endDate').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + {{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}} - - - {{formGroup.get('description').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - + + + {{formGroup.get('description').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + -
-
-
- -
-
-
- -
-
- +
+
+
+ +
+
+
+ +
+
+ +
-
- - - + + + +
+
diff --git a/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.html b/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.html index 5df5610c8..6d3548c02 100644 --- a/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.html +++ b/dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.html @@ -39,4 +39,4 @@
- \ No newline at end of file + diff --git a/dmp-frontend/src/app/ui/project/listing/project-listing.component.html b/dmp-frontend/src/app/ui/project/listing/project-listing.component.html index dc5140ef3..d3c8da717 100644 --- a/dmp-frontend/src/app/ui/project/listing/project-listing.component.html +++ b/dmp-frontend/src/app/ui/project/listing/project-listing.component.html @@ -1,68 +1,70 @@ -
-

{{languageResolverService.getBy('listingTitle') | translate}}

- - - -
- +
+
+

{{languageResolverService.getBy('listingTitle') | translate}}

+ + + +
+ - - {{'PROJECT-LISTING.COLUMNS.AVATAR' | translate}} - - - - - - - {{'PROJECT-LISTING.COLUMNS.NAME' | translate}} - {{row.label}} - + + {{'PROJECT-LISTING.COLUMNS.AVATAR' | translate}} + + + + + + + {{'PROJECT-LISTING.COLUMNS.NAME' | translate}} + {{row.label}} + - - - {{'PROJECT-LISTING.COLUMNS.ABBREVIATION' | - translate}} - {{row.abbreviation}} - + + + {{'PROJECT-LISTING.COLUMNS.ABBREVIATION' | + translate}} + {{row.abbreviation}} + - - - {{'PROJECT-LISTING.COLUMNS.START' | translate}} - {{row.startDate | date:'shortDate'}} - + + + {{'PROJECT-LISTING.COLUMNS.START' | translate}} + {{row.startDate | date:'shortDate'}} + - - - {{'PROJECT-LISTING.COLUMNS.END' | translate}} - {{row.endDate | date:'shortDate'}} - + + + {{'PROJECT-LISTING.COLUMNS.END' | translate}} + {{row.endDate | date:'shortDate'}} + - - - {{'PROJECT-LISTING.COLUMNS.DMPS' | translate}} - - - - + + + {{'PROJECT-LISTING.COLUMNS.DMPS' | translate}} + + + + - - + + - - + + - - - -
- - + + + +
+ + - + +
diff --git a/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss b/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss index a73697cf8..a1f09da3f 100644 --- a/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss +++ b/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss @@ -1,26 +1,30 @@ - .project-listing { - .mat-card { - margin: 1em 0; - } +.mat-card { + margin: 1em 0; +} - .mat-row { - cursor: pointer; - } +.project-listing { + .mat-card { + margin: 1em 0; + } - mat-row:hover { - background-color: lightgray; - } + .mat-row { + cursor: pointer; + } - mat-row:nth-child(odd) { - background-color: #eef0fb; - } + mat-row:hover { + background-color: lightgray; + } - .mat-fab-bottom-right { - top: auto !important; - right: 20px !important; - bottom: 10px !important; - left: auto !important; + mat-row:nth-child(odd) { + background-color: #eef0fb; + } + + .mat-fab-bottom { + top: auto !important; + right: 20px !important; + bottom: 10px !important; + left: auto !important; position: fixed !important; z-index: 5; - } - } + } +} diff --git a/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard-model.ts b/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard-model.ts index d31785025..84710c8a4 100644 --- a/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard-model.ts +++ b/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard-model.ts @@ -10,7 +10,8 @@ import { QuickWizardDatasetDescriptionModel } from "./quick-wizard-dataset-descr export class DatasetEditorWizardModel extends BaseFormModel { public datasetsList: Array = []; - public validationErrorModel: ValidationErrorModel = new ValidationErrorModel(); + public validationErrorModel: ValidationErrorModel = new ValidationErrorModel(); + public viewOnly: boolean; fromModel(item: DatasetWizardEditorModel[]): DatasetEditorWizardModel { @@ -37,4 +38,4 @@ export class DatasetEditorWizardModel extends BaseFormModel { -} \ No newline at end of file +} diff --git a/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.html b/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.html index 051d0962e..c40682feb 100644 --- a/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.html +++ b/dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.html @@ -22,12 +22,12 @@

{{dataset.get('datasetLabel').value}}

-
-
diff --git a/dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.html b/dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.html index fc90d5e80..e794a55a3 100644 --- a/dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.html +++ b/dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.html @@ -1,72 +1,76 @@ -
-
-

{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.TITLE' | translate }}

-
- - - - {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.TITLE' | translate}} - -
- - -
-
- -
- - - - {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.TITLE' | translate}} - - -
- - -
-
- - -
- - - - - {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}} - - - -
- - - - +
+
+
+ +

{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.TITLE' | translate }}

+
+ + + + {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.TITLE' | translate}} + +
+ + +
+
+ +
+ + + + {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.TITLE' | translate}} + + +
+ + +
+
+ + +
+ + + + + {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}} + + + +
+ + + + - -
-
- - - -
- - - -
- + +
+
+ + + +
+ + + +
+ +
+
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css new file mode 100644 index 000000000..2317af289 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css @@ -0,0 +1,23 @@ +.logo-img { + width: 60px; + display: block; + max-height: none; + margin-left: 100px; +} + +.logo-img img { + width: 60px; + top: 0px; + position: inherit; +} + +.sidebarSubtitle p { + margin-left: 20px; + color: rgb(166, 166, 166); +} + +.nav hr { + width: 230px; + border-top: 2px solid #fff; + border-bottom: 2px solid #e0e2e3; +} diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html new file mode 100644 index 000000000..6e9ed7100 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html @@ -0,0 +1,73 @@ + +
+ + + + + + + + +
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.spec.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.component.spec.ts new file mode 100644 index 000000000..f29709fd1 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidebarComponent } from './sidebar.component'; + +describe('SidebarComponent', () => { + let component: SidebarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SidebarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts new file mode 100644 index 000000000..7b1c95558 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts @@ -0,0 +1,89 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; +import { MatGridTileHeaderCssMatStyler } from '@angular/material'; + +declare interface RouteInfo { + path: string; + title: string; + icon: string; +} +declare interface GroupMenuItem { + title: string; + routes: RouteInfo[]; +} + +export const GENERAL_ROUTES: RouteInfo[] = [ + { path: '/home', title: '', icon: 'dashboard'} +]; +export const DMP_ROUTES: RouteInfo[] = [ + { path: '/plans', title: '', icon: 'view_agenda'}, + { path: '/datasets', title: '', icon: 'library_books'}, + { path: '/projects', title: '', icon: 'work_outline'} +]; +// export const HISTORY_ROUTES: RouteInfo[] = [ +// { path: '/typography', title: 'LAST VISITED', icon: 'visibility'}, +// { path: '/icons', title: 'LAST EDITED', icon: 'edit'} +// ]; +export const PUBLIC_ROUTES: RouteInfo[] = [ +// { path: '/maps', title: 'PUBLIC DMPs', icon: 'public'}, + { path: '/explore', title: 'PUBLIC DATASET DESCRIPTIONS', icon: 'public'} +]; + +@Component({ + selector: 'app-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.css'] +}) +export class SidebarComponent implements OnInit { + generalItems: GroupMenuItem; + dmpItems: GroupMenuItem; +// historyItems: GroupMenuItem; + publicItems: GroupMenuItem; + groupMenuItems: GroupMenuItem[] = []; + + constructor(public translate: TranslateService) { } + + ngOnInit() { + this.translate.get('SIDE-BAR.DASHBOARD').subscribe((res: string) => {GENERAL_ROUTES[0].title = res}); + this.translate.get('SIDE-BAR.MY-DMPS').subscribe((res: string) => {DMP_ROUTES[0].title = res}); + this.translate.get('SIDE-BAR.MY-DATASET-DESC').subscribe((res: string) => {DMP_ROUTES[1].title = res}); + this.translate.get('SIDE-BAR.MY-PROJECTS').subscribe((res: string) => {DMP_ROUTES[2].title = res}); + // this.translate.get('SIDE-BAR.HISTORY-VISITED').subscribe((res: string) => {HISTORY_ROUTES[0].title = res}); + // this.translate.get('SIDE-BAR.HISTORY-EDITED').subscribe((res: string) => {HISTORY_ROUTES[1].title = res}); + this.translate.get('SIDE-BAR.PUBLIC-DESC').subscribe((res: string) => {PUBLIC_ROUTES[0].title = res}); + this.generalItems = { + title: '', + routes: GENERAL_ROUTES.filter(menuItem => menuItem) + } + this.translate.get('SIDE-BAR.GENERAL').subscribe((res: string) => {this.generalItems.title = res}); + this.groupMenuItems.push(this.generalItems); + + this.dmpItems = { + title: '', + routes: DMP_ROUTES.filter(menuItem => menuItem) + } + this.translate.get('SIDE-BAR.DMP').subscribe((res: string) => {this.dmpItems.title = res}); + this.groupMenuItems.push(this.dmpItems); + + // this.historyItems = { + // title: '', + // routes: HISTORY_ROUTES.filter(menuItem => menuItem) + // } + // this.translate.get('SIDE-BAR.HISTORY').subscribe((res: string) => {this.historyItems.title = res}); + // this.groupMenuItems.push(this.historyItems); + + this.publicItems = { + title: '', + routes: PUBLIC_ROUTES.filter(menuItem => menuItem) + } + this.translate.get('SIDE-BAR.PUBLIC').subscribe((res: string) => {this.publicItems.title = res}); + this.groupMenuItems.push(this.publicItems); + } +// isMobileMenu() { +// if ($(window).width() > 991) { +// return false; +// } +// return true; +// }; + +} diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts new file mode 100644 index 000000000..581100b4f --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { CommonFormsModule } from '../../common/forms/common-forms.module'; +import { CommonUiModule } from '../../common/ui/common-ui.module'; +import { SidebarComponent } from './sidebar.component'; + +@NgModule({ + imports: [ + CommonUiModule, + CommonFormsModule, + RouterModule + ], + declarations: [ + SidebarComponent + ], + entryComponents: [], + exports: [SidebarComponent] +}) +export class SidebarModule { } diff --git a/dmp-frontend/src/assets/css/demo.css b/dmp-frontend/src/assets/css/demo.css new file mode 100644 index 000000000..acfd904c6 --- /dev/null +++ b/dmp-frontend/src/assets/css/demo.css @@ -0,0 +1,347 @@ +*:focus { + outline: none !important; +} + +a { + color: rgb(106, 164, 217); +} + +a:hover { + color: rgb(46, 117, 182); +} + +h4 { + font-size: 1rem; + line-height: 1em; + font-weight: 500; +} + +.max-width-136 { + max-width: 136px; +} + +.max-width-80 { + max-width: 80px; +} + +.more-icon { + color: rgb(209, 209, 209); + font-size: 28px; + cursor: pointer; + /* float: right; */ +} + +.sidebar .sidebar-background { + position: absolute; + z-index: 1; + height: 100%; + width: 100%; + display: block; + top: 0; + left: 0; + background-size: cover; + background-position: center center; + background-color: rgb(157, 157, 158); +} + +.sidebar .nav p { + margin: 0; + line-height: 20px; + font-size: 12px; + font-weight: 500; + position: relative; + display: block; + height: auto; + white-space: nowrap; + color: rgb(89, 89, 89); +} + +.sidebar .nav i { + font-size: 24px; + float: left; + margin-right: 7px; + line-height: 20px; + width: 30px; + text-align: center; + color: #a1a1a1; +} + +.sidebar[data-color="danger"] li.active > a { + background-color: #ffffff; + -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), + 0 7px 10px -5px rgba(255, 255, 255, 0.4); + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), + 0 7px 10px -5px rgba(255, 255, 255, 0.4); +} + +.sidebar .nav li.active > a i { + color: rgb(89, 89, 89); +} + +.sidebar .nav li a, +.sidebar .nav li .dropdown-menu a { + margin: 5px 15px 5px; + border-radius: 3px; + color: #3c4858; + padding-left: 10px; + padding-right: 10px; + text-transform: capitalize; + font-size: 13px; + padding: 10px 5px; +} + +.sidebar .logo:after { + content: none; + position: absolute; + bottom: 0; + right: 15px; + height: 1px; + width: calc(100% - 30px); + background-color: rgba(180, 180, 180, 0.3); +} + +.form-control, +.is-focused .form-control { + background-image: none; +} + +.navbar form .btn { + margin-bottom: 0; + padding-left: 5px; +} + +.navbar .notification { + position: absolute; + top: 5px; + border: 1px solid #fff; + right: 5px; + font-size: 9px; + background: rgb(192, 0, 0); + color: #ffffff; + min-width: 20px; + padding: 0px 5px; + height: 20px; + border-radius: 10px; + text-align: center; + line-height: 19px; + vertical-align: middle; + display: block; +} + +.card-icon { + cursor: pointer; +} + +.card .card-header-default .card-icon, +.card .card-header-default .card-text, +.card .card-header-default:not(.card-header-icon):not(.card-header-text), +.card.bg-warning, +.card.card-rotate.bg-warning .front, +.card.card-rotate.bg-warning .back { + background: linear-gradient(60deg, #fff, #fff); +} + +.card .card-header-default .card-icon, +.card .card-header-default:not(.card-header-icon):not(.card-header-text), +.card .card-header-default .card-text { + -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), + 0 7px 10px -5px rgba(0, 0, 0, 0.14); + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), + 0 7px 10px -5px rgba(0, 0, 0, 0.14); +} + +.card .card-header-plain .card-icon, +.card .card-header-plain .card-text, +.card .card-header-plain:not(.card-header-icon):not(.card-header-text), +.card.bg-warning, +.card.card-rotate.bg-warning .front, +.card.card-rotate.bg-warning .back { + background: linear-gradient(60deg, #fff, #fff); +} + +.card .card-header-plain .card-icon, +.card .card-header-plain:not(.card-header-icon):not(.card-header-text), +.card .card-header-plain .card-text { + -webkit-box-shadow: none; + box-shadow: none; +} + +.card .card-header-blue .card-icon, +.card .card-header-blue .card-text, +.card .card-header-blue:not(.card-header-icon):not(.card-header-text), +.card.bg-warning, +.card.card-rotate.bg-warning .front, +.card.card-rotate.bg-warning .back { + background: linear-gradient(60deg, rgb(46, 117, 182), rgb(46, 117, 182)); +} + +.card .card-header-blue .card-icon, +.card .card-header-blue:not(.card-header-icon):not(.card-header-text), +.card .card-header-blue .card-text { + -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), + 0 7px 10px -5px rgba(0, 0, 0, 0.14); + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), + 0 7px 10px -5px rgba(0, 0, 0, 0.14); +} + +.card-stats .card-header.card-header-icon i { + font-size: 36px; + line-height: 56px; + width: 56px; + height: 56px; + text-align: center; + color: rgb(138, 170, 195); +} + +.card [class*="card-header-"] .card-icon, +.card [class*="card-header-"] .card-text { + border-radius: 5px; + /* background-color: #999999; */ + padding: 15px; + margin-top: -20px; + margin-right: 15px; + float: left; +} + +.card [class*="card-header-"] .card-title + .card-category { + color: #fff; + font-size: 12px; +} + +.card .card-header .card-title { + margin-bottom: 0px; + margin-top: 5px; +} + +.card-footer .stats { + font-size: 12px; + line-height: 22px; + font-weight: 500; + margin-left: 10px; +} + +.card-stats .card-header .card-category:not([class*="text-"]) { + display: block; + color: #999999; + font-size: 13px; + /* font-size: 9px; */ + /* font-weight: 500; */ +} + +.card + [class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) { + border-radius: 5px; + margin-top: -20px; + padding: 15px; + /* border: 1px solid rgb(231, 230, 230); */ +} + +.card + [class*="card-header-plain"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) { + border-radius: 5px; + margin-top: -20px; + padding: 15px; + border: 1px solid rgb(231, 230, 230); +} + +.card-desc { + display: inline-block; +} + +.view-all { + display: inline-block; + float: right; + margin-top: 10px; + margin-right: 10px; + font-weight: 400; +} + +.card-header-plain h4 { + color: black !important; +} + +.card-header-plain p { + color: #999999 !important; +} + +.text-default { + color: rgb(120, 173, 220) !important; +} + +.table thead th { + font-size: 0.95rem; + font-weight: 400; + border-top-width: 0; + border-bottom-width: 1px; +} + +.card .card-body { + padding: 0.8rem 20px; + position: relative; +} + +table > thead > tr > th, +.table > tbody > tr > th, +.table > tfoot > tr > th, +.table > thead > tr > td, +.table > tbody > tr > td, +.table > tfoot > tr > td { + padding: 8px 8px; + vertical-align: middle; +} + +.nav-link { + display: block; + padding: 0; + font-weight: 400; +} + +.nav-item { + cursor: pointer; +} + +.pills-rounded .nav-item .nav-link { + border-radius: 10em; +} + +.pills-outline-green .nav-item .nav-link { + border: 1px solid rgb(197, 224, 180); + color: rgb(131, 184, 95); +} +.pills-outline-green .nav-item .nav-link.active { + border: 1px solid rgb(197, 224, 180); + color: #4caf50; + background-color: rgb(240, 247, 236); +} +.pills-outline-green .nav-item .nav-link.active:hover { + border: 1px solid rgb(197, 224, 180); + color: #4caf50; +} + +.pills-outline-blue .nav-item .nav-link { + border: 1px solid rgb(218, 227, 243); + color: rgb(43, 104, 209); +} +.pills-outline-blue .nav-item .nav-link.active { + border: 1px solid rgb(218, 227, 243); + color: rgb(43, 104, 209); + background-color: rgb(236, 241, 249); +} +.pills-outline-blue .nav-item .nav-link.active:hover { + border: 1px solid rgb(218, 227, 243); + color: rgb(43, 104, 209); +} + +.pills-outline-blue .nav-item .nav-link { + border: 1px solid rgb(231, 230, 230); + color: rgb(145, 145, 145); +} +.pills-outline-default .nav-item .nav-link.active { + border: 1px solid rgb(231, 230, 230); + color: rgb(145, 145, 145); + background-color: rgb(242, 242, 242); +} +.pills-outline-default .nav-item .nav-link.active:hover { + border: 1px solid rgb(231, 230, 230); + color: rgb(145, 145, 145); +} diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index 69d7870dd..008c61c77 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -51,6 +51,20 @@ "DMP-PROFILES": "DMP Profiles", "ABOUT": "About" }, + "SIDE-BAR": { + "GENERAL": "GENERAL", + "DASHBOARD": "DASHBOARD", + "DMP": "DATA MANAGEMENT PLANS", + "MY-DMPS": "MY DMPs", + "MY-DATASET-DESC": "MY DATASET DESCRIPTIONS", + "MY-PROJECTS": "MY PROJECTS", + "HISTORY": "HISTORY", + "HISTORY-VISITED": "LAST VISITED", + "HISTORY-EDITED": "LAST EDITED", + "PUBLIC": "PUBLIC", + "PUBLIC-DMPS": "PUBLIC DMPs", + "PUBLIC-DESC": "PUBLIC DATASET DESCRIPTIONS" + }, "DATASET-PROFILE-EDITOR": { "TITLE": { "NEW": "New API Client" @@ -630,9 +644,9 @@ "PROJECTS": "Projects", "MY-DMPS": "My DMPs", "DMPS": "DMPs", - "MY-DATASETS": "My Datasets", + "MY-DATASETS": "My Dataset Descriptions", "DATASETS": "Datasets", - "SEARCH": "Search" + "SEARCH": "SEARCH..." }, "USER-DIALOG": { "USER-PROFILE": "My Profile", diff --git a/dmp-frontend/src/blue-theme.scss b/dmp-frontend/src/assets/scss/blue-theme.scss similarity index 100% rename from dmp-frontend/src/blue-theme.scss rename to dmp-frontend/src/assets/scss/blue-theme.scss diff --git a/dmp-frontend/src/assets/scss/core/_alerts.scss b/dmp-frontend/src/assets/scss/core/_alerts.scss new file mode 100644 index 000000000..e6644f23b --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_alerts.scss @@ -0,0 +1,161 @@ +.alert { + border: 0; + border-radius: 3px; + position: relative; + padding: 20px 15px; + line-height: 20px; + + b{ + font-weight: $font-weight-bold; + text-transform: uppercase; + font-size: $font-size-small; + } + // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content + @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light); + + &-info, &-danger, &-warning, &-success, &-rose { + color: $mdb-text-color-light; + } + + &-default { + a, .alert-link { + color: $mdb-text-color-primary; + } + } + + span{ + display: block; + max-width: 89%; + } + + &.alert-danger{ + @include shadow-alert-color($brand-danger); + @include alert-icon-color($brand-danger); + } + &.alert-warning{ + @include shadow-alert-color($brand-warning); + @include alert-icon-color($brand-warning); + } + &.alert-success{ + @include shadow-alert-color($brand-success); + @include alert-icon-color($brand-success); + } + &.alert-info{ + @include shadow-alert-color($brand-info); + @include alert-icon-color($brand-info); + } + &.alert-primary{ + @include shadow-alert-color($brand-primary); + @include alert-icon-color($brand-primary); + } + &.alert-rose{ + @include shadow-alert-color($brand-rose); + @include alert-icon-color($brand-rose); + } + + &.alert-with-icon{ + padding-left: 66px; + + i[data-notify="icon"] { + font-size: 30px; + display: block; + left: 15px; + position: absolute; + top: 50%; + margin-top: -15px; + color: #fff; + } + } + + .mat-button.close{ + min-width: auto; + line-height: .5; + i{ + color: $white-color; + font-size: 11px; + } + } + + i[data-notify="icon"]{ + display: none; + } + + .alert-icon{ + display: block; + float: left; + margin-right: $margin-base; + + i{ + margin-top: -7px; + top: 5px; + position: relative; + } + } + + [data-notify="dismiss"]{ + margin-right: 5px; + } +} + +.places-buttons .btn { + margin-bottom: 30px; +} +// +// .alert { +// border: 0; +// border-radius: 3px; +// +// padding: 20px 15px; +// line-height: 20px; +// +// //@include shadow-z-2(); +// +// b{ +// font-weight: $font-weight-bold; +// text-transform: uppercase; +// font-size: $font-size-small; +// } +// // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content +// @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light); +// +// &-info, &-danger, &-warning, &-success { +// color: $mdb-text-color-light; +// } +// +// &-default { +// a, .alert-link { +// color: $mdb-text-color-primary; +// } +// } +// +// .alert-icon{ +// display: block; +// float: left; +// margin-right: $margin-base; +// +// i{ +// margin-top: -7px; +// top: 5px; +// position: relative; +// } +// } +// .mat-button.close, +// .close{ +// min-width: auto; +// color: $white-color; +// text-shadow: none; +// opacity: .9; +// +// i{ +// font-size: 11px; +// } +// +// &:hover, +// &:focus{ +// opacity: 1; +// } +// } +// } +// .alert .close { +// line-height: .5; +// } diff --git a/dmp-frontend/src/assets/scss/core/_buttons.scss b/dmp-frontend/src/assets/scss/core/_buttons.scss new file mode 100644 index 000000000..489a4d783 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_buttons.scss @@ -0,0 +1,257 @@ +.mat-button.btn,.mat-raised-button.btn,.mat-raised-button.btn:not([class*=mat-elevation-z]), +.btn{ + position: relative; + padding: 12px 30px; + margin: $bmd-btn-margin-bottom 1px; + min-width: auto; + font-size: .75rem; // 12px + font-weight: 400; + line-height: $bmd-line-height; + text-decoration: none; + text-transform: uppercase; + vertical-align: middle; + letter-spacing: 0; + cursor: pointer; + background-color: transparent; + border: 0; + border-radius: $border-radius-sm; + outline: 0; + transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: box-shadow, transform; + @include undo-bs-tab-focus(); + + //-- + // Colors + @include bmd-raised-button-color(); + &.btn-white { + &, + &:focus, + &:hover { + background-color: $white-color; + color: $gray-color; + } + &.btn-link { + color: $white-color; + background: transparent; + box-shadow: none; + } + } + &.btn-link:hover, + &.btn-link:focus, + &.btn-link:active { + text-decoration: none !important; + } + + @include hover-focus(); + + //--- + // btn-raised + &.btn-raised, + .btn-group-raised & { + // baseline shadow + // @include box-shadow($bmd-shadow-2dp); + + // reverse any of the above for links + &.btn-link { + box-shadow: none; + @include bmd-hover-focus-active() { + box-shadow: none; + } + } + + @include bmd-disabled() { + box-shadow: none; + } + } + + //--- + // btn-outline + @include bmd-outline-button-color(); + + // Size variations + &.btn-lg, + .btn-group-lg & { + @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $bmd-btn-font-size, $btn-lg-line-height, $border-radius-sm); + } + &.btn-sm, + .btn-group-sm & { + @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $bmd-btn-font-size-sm, $line-height-sm, $border-radius-sm); + } + + &.btn-round { + border-radius: $border-radius-extreme; + + > .mat-button-focus-overlay, .mat-button-ripple{ + border-radius: $border-radius-extreme; + } + } + + &.btn-fab, + &.btn-just-icon { + // see above for color variations + font-size: $mdb-btn-fab-font-size; + height: $mdb-btn-fab-size; + min-width: $mdb-btn-fab-size; + width: $mdb-btn-fab-size; + // margin: auto; + padding: 0; + overflow: hidden; + position: relative; + line-height: $mdb-btn-fab-size; + + &.btn-round{ + border-radius: 50%; + } + + .btn-group-sm &, + &.btn-sm, + &.btn-fab-mini{ + height: $mdb-btn-fab-size-mini + 1; + min-width: $mdb-btn-fab-size-mini + 1; + width: $mdb-btn-fab-size-mini + 1; + + .material-icons, + .fa{ + font-size: $mdb-btn-icon-size-mini; + line-height: $mdb-btn-fab-size-mini; + } + } + + .btn-group-lg &, + &.btn-lg{ + height: $mdb-btn-fab-size-lg + 1; + min-width: $mdb-btn-fab-size-lg + 1; + width: $mdb-btn-fab-size-lg + 1; + line-height: $mdb-btn-fab-size-lg; + + .material-icons, + .fa{ + font-size: $mdb-btn-icon-size; + line-height: $mdb-btn-fab-size-lg; + } + } + + .material-icons, + .fa { + margin-top: 0; + position: absolute; + width: 100%; + transform: none; + left: 0; + top: 0; + height: 100%; + + line-height: $mdb-btn-fab-size; + font-size: $mdb-btn-just-icon-font-size; + } + } +} + +.btn-just-icon{ + &.btn-lg{ + font-size: $mdb-btn-fab-font-size; + height: $mdb-btn-fab-size; + min-width: $mdb-btn-fab-size; + width: $mdb-btn-fab-size; + } +} + +.input-group-btn > .btn{ + border: 0; +} + + +// Align icons inside buttons with text +.btn .material-icons, +.btn:not(.btn-just-icon):not(.btn-fab) .fa{ + position: relative; + display: inline-block; + top: 0; + margin-top: -1em; + margin-bottom: -1em; + font-size: 1.1rem; + vertical-align: middle; + } + +// Disabled buttons and button groups +.mat-raised-button.btn, +.input-group-btn .mat-raised-button.btn, +.btn-group, +.btn-group-vertical { + // have to ratchet up the specificity to kill drop shadows on disabled raised buttons + @include bmd-disabled() { + .bg-inverse & { + color: $bmd-inverse-btn-disabled; + } + + // flat buttons shouldn't lose transparency on disabled hover/focus + } +} + +// btn-group variations +.btn-group, +.btn-group-vertical { + position: relative; + margin: 10px 1px; + + // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons + //&.open { + // .dropdown-toggle { + // } + // + // > .dropdown-toggle.btn { + // @include bmd-raised-button-color-bg(); + // } + //} + + .dropdown-menu { + border-radius: 0 0 $border-radius $border-radius; + } + + &.btn-group-raised { + @include box-shadow($bmd-shadow-2dp); + } + + .mat-raised-button.btn + .mat-raised-button.btn, + .mat-raised-button.btn, + .mat-raised-button.btn:active, + .btn-group { + margin: 0; + } + + // remove margin from nested btn-group(s) to properly align them with the outer buttons + > .btn-group { + margin: 0; + } + +} +.btn-group > .mat-raised-button.btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn, + +.btn-group > .mat-raised-button.btn:not(:first-child) .mat-button-ripple, .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn .mat-button-ripple, + +.btn-group > .mat-raised-button.btn:not(:first-child) .mat-button-focus-overlay, .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn .mat-button-focus-overlay{ + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn, +.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle) .mat-button-ripple, .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn .mat-button-ripple, +.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle) .mat-button-focus-overlay, .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn .mat-button-focus-overlay { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-no-ripple .mat-button-ripple{ + display: none; +} +.mat-button, .mat-icon-button { + background: transparent; +} +.mat-button:hover .mat-button-focus-overlay, .mat-stroked-button:hover .mat-button-focus-overlay{ + opacity: 0; + background-color: transparent!important; +} +button:focus { + outline: none; +} +.mat-button .mat-button-ripple{ + border-radius: inherit; +} diff --git a/dmp-frontend/src/assets/scss/core/_cards.scss b/dmp-frontend/src/assets/scss/core/_cards.scss new file mode 100644 index 000000000..7f49c8ce1 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_cards.scss @@ -0,0 +1,658 @@ +//https://www.google.com/design/spec/components/cards.html#cards-content-blocks +// Card resting elevation: 2dp +.card { + border: 0; + margin-bottom: 30px; + margin-top: 30px; + border-radius: $border-radius-large; + color: $gray-dark; + background: $white-color; + width: 100%; + + .card-category:not([class*="text-"]) { + color: $gray-color; + } + .card-category{ + margin-top: 10px; + + .material-icons{ + position: relative; + top: 8px; + line-height: 0; + } + } + + .form-check { + margin-top: 15px; + } + + .card-title{ + margin-top: 0.625rem; + + &:last-child{ + margin-bottom: 0; + } + } + + // Cards have a default elevation of 2dp. + @include box-shadow($bmd-shadow-2dp); + @extend %std-font; + + + &.no-shadow { + .card-header-image, + .card-header-image img { + box-shadow: none !important; + } + } + + .card-body, + .card-footer { + padding: $padding-card-body-y $padding-card-body-x; + } + + .card-body { + & + .card-footer{ + padding-top: 0rem; + border: 0; + border-radius: $border-radius-large; + } + } + + .card-footer { + display: flex; + align-items: center; + background-color: transparent; + border: 0; + + .author, + .stats { + display: inline-flex; + } + + .stats { + color: $gray-color; + + .material-icons { + position: relative; + top: -10px; + margin-right: 3px; + margin-left: 3px; + font-size: 18px; + } + } + } + + &.bmd-card-raised { + // Card raised elevation: 8dp + @include box-shadow($bmd-shadow-8dp); + } + + @include media-breakpoint-up(lg) { + // On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover. + &.bmd-card-flat { + box-shadow: none; + } + } + + .card-header { + border-bottom: none; + background: transparent; + .title{ + color: $white-color; + } + + &:not([class*="card-header-"]){ + // @include shadow-big(); + } + + .nav-tabs { + padding: 0; + } + + &.card-header-image { + position: relative; + padding: 0; + z-index: 1; + margin-left: 15px; + margin-right: 15px; + margin-top: -30px; + border-radius: $border-radius-large; + + img { + width: 100%; + border-radius: $border-radius-large; + pointer-events: none; + @include shadow-big-image(); + } + .card-title { + position: absolute; + bottom: 15px; + left: 15px; + color: $white-color; + font-size: $font-size-h4; + text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5); + } + + .colored-shadow{ + transform: scale(0.94); + top: 12px; + filter: blur(12px); + position: absolute; + width: 100%; + height: 100%; + background-size: cover; + z-index: -1; + transition: opacity .45s; + opacity: 0; + } + + &.no-shadow{ + box-shadow: none; + + &.shadow-normal{ + @include shadow-big(); + } + + .colored-shadow{ + display: none !important; + } + } + } + } + + .card-header-primary .card-icon, + .card-header-primary .card-text, + .card-header-primary:not(.card-header-icon):not(.card-header-text), + &.bg-primary, + &.card-rotate.bg-primary .front, + &.card-rotate.bg-primary .back{ + background: linear-gradient(60deg, $purple-400, $purple-600); + } + .card-header-info .card-icon, + .card-header-info .card-text, + .card-header-info:not(.card-header-icon):not(.card-header-text), + &.bg-info, + &.card-rotate.bg-info .front, + &.card-rotate.bg-info .back{ + background: linear-gradient(60deg, $cyan-400, $cyan-600); + } + .card-header-success .card-icon, + .card-header-success .card-text, + .card-header-success:not(.card-header-icon):not(.card-header-text), + &.bg-success, + &.card-rotate.bg-success .front, + &.card-rotate.bg-success .back{ + background: linear-gradient(60deg, $green-400, $green-600); + } + .card-header-warning .card-icon, + .card-header-warning .card-text, + .card-header-warning:not(.card-header-icon):not(.card-header-text), + &.bg-warning, + &.card-rotate.bg-warning .front, + &.card-rotate.bg-warning .back{ + background: linear-gradient(60deg, $orange-400, $orange-600); + } + .card-header-danger .card-icon, + .card-header-danger .card-text, + .card-header-danger:not(.card-header-icon):not(.card-header-text), + &.bg-danger, + &.card-rotate.bg-danger .front, + &.card-rotate.bg-danger .back{ + background: linear-gradient(60deg, $red-400, $red-600); + } + + .card-header-rose .card-icon, + .card-header-rose .card-text, + .card-header-rose:not(.card-header-icon):not(.card-header-text), + &.bg-rose, + &.card-rotate.bg-rose .front, + &.card-rotate.bg-rose .back{ + background: linear-gradient(60deg, $pink-400, $pink-600); + } + + .card-header-primary .card-icon, + .card-header-primary:not(.card-header-icon):not(.card-header-text), + .card-header-primary .card-text{ + @include shadow-big-color($brand-primary); + + //@include shadow-8dp-color($brand-primary); + //@include shadow-16dp-color($brand-primary); + } + .card-header-danger .card-icon, + .card-header-danger:not(.card-header-icon):not(.card-header-text), + .card-header-danger .card-text{ + @include shadow-big-color($brand-danger); + } + + .card-header-rose .card-icon, + .card-header-rose:not(.card-header-icon):not(.card-header-text), + .card-header-rose .card-text{ + @include shadow-big-color($brand-rose); + } + + .card-header-warning .card-icon, + .card-header-warning:not(.card-header-icon):not(.card-header-text), + .card-header-warning .card-text{ + @include shadow-big-color($brand-warning); + } + + .card-header-info .card-icon, + .card-header-info:not(.card-header-icon):not(.card-header-text), + .card-header-info .card-text{ + @include shadow-big-color($brand-info); + } + + .card-header-success .card-icon, + .card-header-success:not(.card-header-icon):not(.card-header-text), + .card-header-success .card-text{ + @include shadow-big-color($brand-success); + } + + [class*="card-header-"], + &[class*="bg-"]{ + color: $white-color; + + .card-title a, + .card-title, + .icon i{ + color: $white-color; + } + + .icon i{ + border-color: rgba(255, 255, 255, 0.25); + } + .author a, + .stats, + .card-category, + .card-description{ + color: $white-transparent; + } + + .author a{ + &:hover, + &:focus, + &:active{ + color: $white-color; + } + } + } + + .author{ + .avatar{ + width: 30px; + height: 30px; + overflow: hidden; + border-radius: 50%; + margin-right: 5px; + } + + a{ + color: $black-color; + text-decoration: none; + + .ripple-container{ + display: none; + } + } + } + + .card-category-social{ + .fa{ + font-size: 24px; + position: relative; + margin-top: -4px; + top: 2px; + margin-right: 5px; + } + + .material-icons{ + position: relative; + top: 5px; + } + } + + &[class*="bg-"], + &[class*="bg-"] .card-body{ + border-radius: $border-radius-large; + + h1, + h2, + h3{ + small{ + color: $white-transparent; + } + } + } + + .card-stats{ + background: transparent; + display: flex; + + .author, + .stats{ + display: inline-flex; + } + } +} + +.card { + box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14); + + .table tr:first-child td{ + border-top: none; + } + + .card-title{ + margin-top: 0; + margin-bottom: 15px; + } + + .card-body{ + padding: $padding-card-body-y 20px; + position: relative; + + } + + .card-header { + z-index: 3 !important; + + .card-title{ + margin-bottom: 3px; + } + + .card-category{ + margin: 0; + } + + &.card-header-text { + display: inline-block; + + &:after { + content: ""; + display: table; + } + } + + &.card-header-icon, + &.card-header-text { + i { + width: 33px; + height: 33px; + text-align: center; + line-height: 33px; + } + .card-title{ + margin-top: 15px; + color: $black-color; + } + h4{ + font-weight: 300; + } + } + + &.card-header-tabs { + .nav-tabs { + background: transparent; + padding: 0; + } + .nav-tabs-title { + float: left; + padding: 10px 10px 10px 0; + line-height: 24px; + } + } + } + + &.card-plain { + .card-header { + &.card-header-icon + .card-body .card-title, + &.card-header-icon + .card-body .card-category { + margin-top: -20px; + } + } + } + + .card-actions { + position: absolute; + z-index: 1; + top: -50px; + width: calc(100% - 30px); + left: 17px; + right: 17px; + text-align: center; + + .card-header{ + padding: 0; + min-height: 160px; + } + + .btn { + padding-left: 12px; + padding-right: 12px; + } + .fix-broken-card { + position: absolute; + top: -65px; + } + } + + &.card-chart { + .card-footer i:nth-child(1n+2){ + width: 18px; + text-align: center; + } + + .card-category{ + margin: 0; + } + } + + .card-body + .card-footer, + .card-footer{ + padding: 0; + padding-top: 10px; + margin: 0 15px 10px; + border-radius: 0; + justify-content: space-between; + align-items: center; + + h6 { + width: 100%; + } + + .stats{ + color: #999999; + font-size: 12px; + line-height: 22px; + + .card-category{ + padding-top: 7px; + padding-bottom: 7px; + margin: 0; + } + + .material-icons{ + position: relative; + top: 4px; + font-size: 16px; + } + } + } + [class*="card-header-"] { + margin: 0px 15px 0; + padding: 0; + + .card-title + .card-category{ + color: rgba(255, 255, 255, 0.62); + a { + color: $white-color; + } + } + + &:not(.card-header-icon):not(.card-header-text):not(.card-header-image){ + border-radius: $border-radius-base; + margin-top: -20px; + padding: 15px; + } + + .card-icon, + .card-text{ + border-radius: $border-radius-base; + background-color: $gray-color; + padding: 15px; + margin-top: -20px; + margin-right: 15px; + float: left; + } + + .card-text{ + float: none; + display: inline-block; + margin-right: 0; + + .card-title{ + color: $white-color; + margin-top: 0; + } + } + + position: relative; + + .ct-chart{ + .card-title{ + color: $white-color; + } + .card-category{ + margin-bottom: 0; + color: rgba($white-color, .62); + } + + .ct-label{ + color: rgba($white-color, .7); + } + .ct-grid{ + stroke: rgba(255, 255, 255, 0.2); + } + .ct-series-a .ct-point, + .ct-series-a .ct-line, + .ct-series-a .ct-bar, + .ct-series-a .ct-slice-donut{ + stroke: rgba(255,255,255,.8); + } + .ct-series-a .ct-slice-pie, + .ct-series-a .ct-area{ + fill: rgba(255,255,255,.4); + } + .ct-series-a .ct-bar{ + stroke-width: 10px; + } + .ct-point{ + stroke-width: 10px; + stroke-linecap: round; + } + .ct-line{ + fill: none; + stroke-width: 4px; + } + } + } + + [data-header-animation="true"] { + @include transform-translate-y(0); + -webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); + -moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); + -o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); + -ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); + } + + &:hover { + [data-header-animation="true"]{ + @include transform-translate-y(-50px); + } + } + + .map { + height: 280px; + border-radius: $border-radius-large; + margin-top: 15px; + + &.map-big{ + height: 420px; + } + } + + .card-body.table-full-width{ + padding: 0; + } + + .card-plain .card-header-icon { + margin-right: 15px !important; + } +} + +.table-sales{ + margin-top: 40px; +} + +.iframe-container { + width: 100%; + + iframe { + width: 100%; + height: 500px; + border: 0; + @include shadow-big(); + } +} + +.card-wizard { + .nav.nav-pills { + .nav-item { + margin: 0; + + .nav-link { + padding: 6px 15px !important; + } + } + } + .nav-pills:not(.flex-column) .nav-item + .nav-item:not(:first-child) { + margin-left: 0; + } + + .nav-item .nav-link.active, + .nav-item .nav-link:hover, + .nav-item .nav-link:focus { + background-color: inherit !important; + box-shadow: none !important; + } + + .input-group-text { + padding: 6px 15px 0px !important; + } + .card-footer { + border-top: none !important; + } +} + +.card-chart, +.card-product { + .card-body + .card-footer { + border-top: 1px solid #eee; + } +} + +.card-product{ + .price{ + color: inherit; + } +} + +.card-collapse { + margin-bottom: 15px; + + .card .card-header a[aria-expanded="true"]{ + color: #e91e63; + } +} diff --git a/dmp-frontend/src/assets/scss/core/_checkboxes.scss b/dmp-frontend/src/assets/scss/core/_checkboxes.scss new file mode 100644 index 000000000..d432d319f --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_checkboxes.scss @@ -0,0 +1,210 @@ +.form-check { + margin-bottom: .5rem; + padding-left: 0; + + .form-check-label { + cursor: pointer; + padding-left: 0; // Reset for Bootstrap rule + // color: $mdb-checkbox-label-color; + @include mdb-label-color-toggle-focus(); + } + + // Hide native checkbox + .form-check-input { + opacity: 0; + position: absolute; + margin: 0; + z-index: -1; + width: 0; + height: 0; + overflow: hidden; + left: 0; + pointer-events: none; + } + + .form-check-sign { + vertical-align: middle; + position: relative; + top: -2px; + float: left; + padding-right: 10px; + display: inline-block; + + &:before { + display: block; + position: absolute; + left: 0; + content: ""; + background-color: rgba(0,0,0,.84); + height: $mdb-checkbox-size; + width: $mdb-checkbox-size; + border-radius: 100%; + z-index: 1; + opacity: 0; + margin: 0; + top: 0; + @include transform-scale3d(unquote('2.3,2.3,1')); + } + + .check { + position: relative; + display: inline-block; + width: $mdb-checkbox-size; + height: $mdb-checkbox-size; + border: 1px solid $mdb-checkbox-border-color; + overflow: hidden; + z-index: 1; + border-radius: $border-radius-base; + + &:before { + position: absolute; + content: ""; + transform: rotate(45deg); + display: block; + margin-top: -3px; + margin-left: 7px; + width: 0; + color: $white-color; + height: 0; + box-shadow: + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0 inset; + @include animation(checkbox-off $mdb-checkbox-animation-check forwards); + } + } + + } + + .form-check-input{ + + &:focus + .form-check-sign .check:after { + opacity: 0.2; + } + + &:checked { + & + .form-check-sign .check { + background: $mdb-checkbox-checked-color; + } + + & + .form-check-sign .check:before { + color: #FFFFFF; + box-shadow: 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px; + @include animation(checkbox-on $mdb-checkbox-animation-check forwards); + } + + & + .form-check-sign:before { + @include animation(rippleOn $mdb-checkbox-animation-ripple); + } + + & + .form-check-sign .check:after { + //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed + @include animation(rippleOn $mdb-checkbox-animation-ripple forwards); + } + } + + &:not(:checked) { + & + .form-check-sign:before { + @include animation(rippleOff $mdb-checkbox-animation-ripple); + } + + & + .form-check-sign .check:after { + @include animation(rippleOff $mdb-checkbox-animation-ripple); // Ripple effect on uncheck + + } + } + } +.rtl { + .form-check { + .form-check-sign { + .check::before{ + margin-right: 10px; + } + } + } +} + + // Style for disabled inputs + fieldset[disabled] &, + fieldset[disabled] & .form-check-input, + .form-check-input[disabled] ~ .form-check-sign .check, + .form-check-input[disabled] + .circle { + opacity: 0.5; + } + + .form-check-input[disabled] ~ .form-check-sign .check{ + border-color: #000000; + opacity: .26; + } + + .form-check-input[disabled] + .form-check-sign .check:after { + background-color: $mdb-text-color-primary; + transform: rotate(-45deg); + } + + .form-check-input[disabled][checked] + .form-check-sign .check{ + background-color: $black; + } +} + +@keyframes checkbox-on { + 0% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 15px 2px 0 11px; + } + 50% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px 2px 0 11px; + } + 100% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px; + } +} + +@keyframes rippleOn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} +@keyframes rippleOff { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} diff --git a/dmp-frontend/src/assets/scss/core/_dropdown.scss b/dmp-frontend/src/assets/scss/core/_dropdown.scss new file mode 100644 index 000000000..cfe3cb561 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_dropdown.scss @@ -0,0 +1,205 @@ +// Menus https://www.google.com/design/spec/components/menus.html#menus-specs +// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons + +.dropdown-menu { + display: none; + padding: $bmd-dropdown-margin-y 0; + border: 0; + opacity: 0; + transform: scale(0); + transform-origin: 0 0; + will-change: transform, opacity; + transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default, + opacity $bmd-menu-fade-duration $bmd-animation-curve-default; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); + + &.showing { + animation-name: bmd-dropdown-animation; + animation-duration: $bmd-menu-expand-duration; + animation-fill-mode: forwards; + animation-timing-function: $bmd-animation-curve-default; + } + + .open > &, + &.show { + display: block; + opacity: 1; + transform: scale(1); + } + + &.hiding { + display: block; + opacity: 0; + transform: scale(0); + } + + &[x-placement="bottom-start"] { + transform-origin: 0 0; + } + + &[x-placement="bottom-end"] { + transform-origin: 100% 0; + } + + &[x-placement="top-start"] { + transform-origin: 0 100%; + } + + &[x-placement="top-end"] { + transform-origin: 100% 100%; + } + + .disabled > a{ + color: $bmd-dropdown-header-color; + + &:focus, + &:hover{ + text-decoration: none; + background-color: transparent; + background-image: none; + color: $bmd-dropdown-header-color; + } + } + + &.dropdown-with-icons .dropdown-item{ + padding: $dropdown-item-padding-y + 0.125 $dropdown-item-padding-x $dropdown-item-padding-y + 0.125 $dropdown-item-padding-y + 0.125; + + & .material-icons{ + vertical-align: middle; + font-size: 24px; + position: relative; + margin-top: -4px; + top: 1px; + margin-right: 12px; + opacity: .5; + } + } + + + // https://www.google.com/design/spec/components/menus.html#menus-specs + .dropdown-item, + li > a{ // used to properly size the ripple container + position: relative; + width: auto; + + display: flex; + flex-flow: nowrap; + align-items: center; + color: $bmd-dropdown-link-color; + font-weight: normal; + text-decoration: none; + + font-size: .8125rem; + border-radius: $border-radius / 2; + margin: 0 $bmd-dropdown-margin-y; + @include transitions($fast-transition-time, $transition-linear); + + min-width: $bmd-menu-item-min-width; + + padding: $dropdown-item-padding-y $dropdown-item-padding-x; + + overflow: hidden; + line-height: $bmd-line-height; + text-overflow: ellipsis; + word-wrap: break-word; + + @include media-breakpoint-up(md) { + padding-right: $bmd-menu-item-padding-right-md; + padding-left: $bmd-menu-item-padding-left-md; + } + } + + .dropdown-item:hover, + .dropdown-item:focus, + a:hover, + a:focus, + a:active { + @include shadow-small-color($brand-primary); + background-color: $brand-primary; + color: #FFFFFF; + } +} + +// this could be in a .btn-group or .dropdown +.dropdown-toggle { + &.bmd-btn-icon, + &.bmd-btn-fab { + // remove the dropdown icon + &::after { + display: none; + } + + ~ .dropdown-menu { + &.dropdown-menu-top-left, + &.dropdown-menu-top-right { + bottom: $bmd-btn-icon-size; // push up the bottom of the menu the height of the button + } + } + } + + &:after{ + will-change: transform; + transition: transform $bmd-animation-dropdown-caret linear; + } + + .show &:after{ + @include rotate-180(); + } + + &.bmd-btn-fab-sm { + ~ .dropdown-menu { + &.dropdown-menu-top-left, + &.dropdown-menu-top-right { + bottom: $bmd-btn-fab-size-sm; // push up the bottom of the menu the height of the button + } + } + } + + &.bmd-btn-icon { + ~ .dropdown-menu { + // collapse some spacing + margin: 0; + } + } +} + +.dropdown-header{ + font-size: 0.75rem; + padding-top: $dropdown-header-padding-y; + padding-bottom: $dropdown-header-padding-y; + text-transform: none; + color: $bmd-dropdown-header-color; + line-height: $bmd-line-height; + font-weight: inherit; +} + +@keyframes bmd-dropdown-animation { + from { + opacity: 0; + transform: scale(0); + } + to { + opacity: 1; + transform: scale(1); + } +} + +.dropdown-menu.bootstrap-datetimepicker-widget{ + opacity: 0; + transform: scale(0); + transition-duration: $bmd-menu-expand-duration; + transition-timing-function: $bmd-animation-curve-default; + transform-origin: 0 0; + will-change: transform, opacity; + top: 0; +} + +.dropdown-menu.bootstrap-datetimepicker-widget.top{ + transform-origin: 0 100%; +} + +.dropdown-menu.bootstrap-datetimepicker-widget.open{ + opacity: 1; + transform: scale(1); + top: 0; +} diff --git a/dmp-frontend/src/assets/scss/core/_example-pages.scss b/dmp-frontend/src/assets/scss/core/_example-pages.scss new file mode 100644 index 000000000..42575ae02 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_example-pages.scss @@ -0,0 +1,55 @@ +.card-signup { + .card-header { + .social-line { + .btn { + color: $white-color; + } + } + } + .text-divider { + margin-top: 30px; + margin-bottom: 0px; + text-align: center; + } +} + +.signup-page { + .page-header { + min-height: 100vh; + height: auto; + display: inherit; + + .container{ + padding-top: 20vh; + } + } + + .card-signup { + border-radius: $border-radius-base * 2; + @include shadow-16dp(); + margin-bottom: 100px; + padding: 40px 0px; + + } + .info-horizontal { + padding: 0px 0px 20px; + } + + .social { + .btn { + margin: 5px; + } + h4 { + margin-top: 20px; + } + } + .footer { + .container { + padding: 0; + } + .copyright, + a{ + color: $white-color; + } + } +} diff --git a/dmp-frontend/src/assets/scss/core/_fixed-plugin.scss b/dmp-frontend/src/assets/scss/core/_fixed-plugin.scss new file mode 100644 index 000000000..3ae25a0b6 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_fixed-plugin.scss @@ -0,0 +1,302 @@ +.fixed-plugin{ + position: fixed; + top: 180px; + right: 0; + width: 64px; + background: rgba(0,0,0,.3); + z-index: 1031; + border-radius: 8px 0 0 8px; + text-align: center; + top: 120px; + + li > a, + .badge{ + transition: all .34s; + -webkit-transition: all .34s; + -moz-transition: all .34s; + } + + .fa-cog{ + color: #FFFFFF; + padding: 10px; + border-radius: 0 0 6px 6px; + width: auto; + } + + .dropdown-menu{ + right: 80px; + left: auto; + width: 290px; + border-radius: 0.1875rem; + padding: 0 10px; + } + + .dropdown-menu:after, + .dropdown-menu:before{ + right: 10px; + margin-left: auto; + left: auto; + } + + .fa-circle-thin{ + color: #FFFFFF; + } + + .active .fa-circle-thin{ + color: #00bbff; + } + + .dropdown-menu > .active > a, + .dropdown-menu > .active > a:hover, + .dropdown-menu > .active > a:focus{ + color: #777777; + text-align: center; + } + + img{ + border-radius: 0; + width: 100%; + height: 100px; + margin: 0 auto; + } + + .dropdown-menu li > a:hover, + .dropdown-menu li > a:focus{ + box-shadow: none; + } + + .badge{ + border: 3px solid #FFFFFF; + border-radius: 50%; + cursor: pointer; + display: inline-block; + height: 23px; + margin-right: 5px; + position: relative; + width: 23px; + } + + .badge.active, + .badge:hover{ + border-color: #00bbff; + } + + .badge-blue{ + background-color: $brand-info; + } + .badge-green{ + background-color: $brand-success; + } + .badge-orange{ + background-color: $brand-primary; + } + .badge-yellow{ + background-color: $brand-warning; + } + .badge-red{ + background-color: $brand-danger; + } + + h5{ + font-size: 14px; + margin: 10px; + } + + .dropdown-menu li{ + display: block; + padding: 18px 2px; + width: 25%; + float: left; + } + + li.adjustments-line, + li.header-title, + li.button-container{ + width: 100%; + height: 50px; + min-height: inherit; + } + + li.button-container{ + height: auto; + + div{ + margin-bottom: 5px; + } + } + + #sharrreTitle{ + text-align: center; + padding: 10px 0; + height: 50px; + } + + li.header-title{ + height: 30px; + line-height: 25px; + font-size: 12px; + font-weight: 600; + text-align: center; + text-transform: uppercase; + } + + .adjustments-line{ + p{ + float: left; + display: inline-block; + margin-bottom: 0; + font-size: 1em; + color: #3C4858; + } + + a{ + color: transparent; + + .badge-colors{ + position: relative; + top: -2px; + } + + a:hover, + a:focus{ + color: transparent; + } + } + + .togglebutton{ + float: right; + + .toggle{ + margin-right: 0; + } + } + + .dropdown-menu > li.adjustments-line > a{ + padding-right: 0; + padding-left: 0; + border-bottom: 1px solid #ddd; + border-radius: 0; + margin: 0; + } + } + + + + .dropdown-menu{ + > li{ + & > a.img-holder{ + font-size: 16px; + text-align: center; + border-radius: 10px; + background-color: #FFF; + border: 3px solid #FFF; + padding-left: 0; + padding-right: 0; + opacity: 1; + cursor: pointer; + display: block; + max-height: 100px; + overflow: hidden; + padding: 0; + + img{ + margin-top: auto; + } + } + + a.switch-trigger:hover, + & > a.switch-trigger:focus{ + background-color: transparent; + } + + &:hover, + &:focus{ + > a.img-holder{ + border-color: rgba(0, 187, 255, 0.53);; + } + } + } + + > .active > a.img-holder, + > .active > a.img-holder{ + border-color: #00bbff; + background-color: #FFFFFF; + } + + } + + .btn-social{ + width: 50%; + display: block; + width: 48%; + float: left; + font-weight: 600; + } + + .btn-social{ + i{ + margin-right: 5px; + } + + &:first-child{ + margin-right: 2%; + } + } + + .dropdown{ + .dropdown-menu{ + -webkit-transform: translateY(-15%); + -moz-transform: translateY(-15%); + -o-transform: translateY(-15%); + -ms-transform: translateY(-15%); + transform: translateY(-15%); + top: 27px; + opacity: 0; + + transform-origin: 0 0; + + &:before{ + border-bottom: .4em solid rgba(0, 0, 0, 0); + border-left: .4em solid rgba(0,0,0,0.2); + border-top: .4em solid rgba(0,0,0,0); + right: -16px; + top: 46px; + } + + &:after{ + border-bottom: .4em solid rgba(0, 0, 0, 0); + border-left: .4em solid #FFFFFF; + border-top: .4em solid rgba(0,0,0,0); + right: -16px; + } + + &:before, + &:after{ + content: ""; + display: inline-block; + position: absolute; + top: 46px; + width: 16px; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + } + } + + &.show .dropdown-menu{ + opacity: 1; + + -webkit-transform: translateY(-13%); + -moz-transform: translateY(-13%); + -o-transform: translateY(-13%); + -ms-transform: translateY(-13%); + transform: translateY(-13%); + + transform-origin: 0 0; + } + } + + .bootstrap-switch{ + margin:0; + } +} diff --git a/dmp-frontend/src/assets/scss/core/_footers.scss b/dmp-frontend/src/assets/scss/core/_footers.scss new file mode 100644 index 000000000..7224ac287 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_footers.scss @@ -0,0 +1,102 @@ +.footer{ + padding: $padding-general-x 0; + text-align: center; + display: -webkit-flex; /* Safari */ /* Safari 6.1+ */ + display: flex; + + ul{ + margin-bottom: 0; + padding: 0; + list-style: none; + + li{ + display: inline-block; + + a{ + color: inherit; + padding: $padding-general-x; + font-weight: $font-weight-bold; + font-size: $mdb-btn-font-size-base; + text-transform: uppercase; + border-radius: $border-radius-base; + text-decoration: none; + position: relative; + display: block; + + &:hover{ + text-decoration: none; + } + } + + .btn{ + margin: 0; + } + } + + &.links-horizontal{ + &:first-child a{ + padding-left: 0; + } + + &:last-child a{ + padding-right: 0; + } + } + + &.links-vertical{ + li{ + display: block; + margin-left: -5px; + margin-right: -5px; + + a{ + padding: 5px; + } + } + } + } + + .social-buttons{ + a, + .btn{ + margin-top: 5px; + margin-bottom: 5px; + } + } + + .footer-brand{ + float: left; + height: 50px; + padding: 15px 15px; + font-size: 18px; + line-height: 20px; + margin-left: -15px; + + &:hover, + &:focus{ + color: $black-color; + } + } + .copyright{ + padding: 15px 0; + .material-icons{ + font-size: 18px; + position: relative; + top: 3px; + } + + } + + .pull-center{ + display: inline-block; + float: none; + } +} + +.off-canvas-sidebar { + .footer { + position: absolute; + bottom: 0; + width: 100%; + } +} diff --git a/dmp-frontend/src/assets/scss/core/_forms.scss b/dmp-frontend/src/assets/scss/core/_forms.scss new file mode 100644 index 000000000..9eb7ddc36 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_forms.scss @@ -0,0 +1,437 @@ +form { + // ensure enough room at the bottom of any form to display a one-line bmd-help + margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base; + + .card &{ + margin: 0; + } + // reverse the above for navbars (no help expected in a navbar form) + .navbar & { + margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works + + .bmd-form-group { + display: inline-block; + padding-top: 0; + } + + .btn { + margin-bottom: 0; + } + } +} + +// ----- +// Inputs +// +// Reference http://www.google.com/design/spec/components/text-fields.html +// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section +.form-control{ + background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position; + background-size: $bmd-form-control-bg-size; + border: 0; + height: 36px; + transition: background 0s ease-out; + padding-left: 0; + padding-right: 0; + border-radius: 0; + font-size: $mdb-input-font-size-base; + + // The border bottom should be static in all states, the decorator will be animated over this. + &:focus, + .bmd-form-group.mat-focused & { + background-size: $bmd-form-control-bg-size-active; + //border-bottom: $input-btn-border-width solid $input-border-color; + transition-duration: 0.3s; + } + + @include material-placeholder() { + color: $mdb-input-placeholder-color; + font-weight: 400; + font-size: $mdb-input-font-size-base; +} + + .has-white &{ + @include material-placeholder(){ + color: $white-color; + } + } +} + + + +// Help blocks (not in v4) +// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good. +// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions? +// +.bmd-help { + position: absolute; + display: none; + font-size: .8rem; + font-weight: normal; + @extend .text-muted; + + .bmd-form-group.mat-focused & { + display: block; + } + + //-------------------------------------- + // Multiple help blocks + // - absolute positioning is used above to prevent bouncing + // - when there is more than one, this will bounce but will at least show + &:nth-of-type(2) { + padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned + } + + + .bmd-help { + position: relative; + margin-bottom: 0; + } +} + +// ----- +// State coloring: default, success, info, warning, danger +// +@include bmd-selection-color(); +@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color, $input-border-color); + +.has-success { + @include bmd-form-color($brand-success, $brand-success, $brand-success, $input-border-color); +} + +.has-info { + @include bmd-form-color($brand-info, $brand-info, $brand-info, $input-border-color); +} + +.has-white{ + @include bmd-form-color($white-color, $white-color, $white-color, $input-border-color-white); + + .form-control{ + &:focus{ + color: $white-color; + } + } +} + +.has-warning { + @include bmd-form-color($brand-warning, $brand-warning, $brand-warning, $input-border-color); +} + +.has-danger { + @include bmd-form-color($brand-danger, $brand-danger, $brand-danger, $input-border-color); +} + +.has-rose { + @include bmd-form-color($brand-rose, $brand-rose, $brand-rose, $input-border-color); +} + +// Reference http://www.google.com/design/spec/components/text-fields.html +// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section +//.variations(unquote(" label"), color, $bmd-input-placeholder-color); // default label color variations + +// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose. +.bmd-form-group { + position: relative; + + // ----- + // Labels + // + // Reference http://www.google.com/design/spec/components/text-fields.html + // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section + + &:not(.has-success):not(.has-danger){ + [class^='bmd-label'], + [class*=' bmd-label']{ + &.bmd-label-floating{ + color: $mdb-input-placeholder-color; + } + } + } + [class^='bmd-label'], + [class*=' bmd-label'] { + position: absolute; + pointer-events: none; + transition: 0.3s ease all; + + // hint to browser for optimization + &.bmd-label-floating { + will-change: left, top, contents; + margin: 0; + line-height: 1.4; + font-weight: 400; + } + } + + // hide label-placeholders when the field is filled + &.is-filled .bmd-label-placeholder { + display: none; + } + + // Optional class to make the text field inline collapsible/expandable (collapsed by default) + // This uses the BS collapse js to make the width expand. + // `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline + // FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events + &.bmd-collapse-inline { + display: flex; + align-items: center; + padding: 0; // get rid of any padding as this is a width transition + min-height: 2.1em; + + // Expandable Holder. + .collapse { + flex: 1; + display: none; + &.show { + // This is an unfortunate hack. Animating between widths in percent (%) + // in many browsers (Chrome, Firefox) only animates the inner visual style + // of the input - the outer bounding box still 'jumps'. + // Thus assume a sensible maximum, and animate to/from that value. + max-width: 1200px; + } + } + + .collapsing, + .width:not(.collapse), + // collapsing is removed and momentarily only width is present + .collapse.show { + display: block; + } + + .collapsing { + @include material-animation-default(); + } + } + + // default floating size/location with an bmd-form-group + @include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default"); + + // sm floating size/location + &.bmd-form-group-sm { + @include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm"); + } + + // lg floating size/location + &.bmd-form-group-lg { + @include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg"); + } +} + +// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch +@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height); + +select { + &, + &.form-control{ + // Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this. + -moz-appearance: none; + -webkit-appearance: none; + } +} + +// Input files - hide actual input - requires specific markup in the sample. +//.bmd-form-group input[type=file] { +// opacity: 0; +// position: absolute; +// top: 0; +// right: 0; +// bottom: 0; +// left: 0; +// width: 100%; +// height: 100%; +// z-index: 100; +//} + +// +// +//.form-horizontal { +// +// // Consistent vertical alignment of radios and checkboxes +// .radio, +// .checkbox, +// .radio-inline, +// .checkbox-inline { +// padding-top: 0; +// } +// +// .radio { +// margin-bottom: 10px; +// } +// +// label { +// text-align: right; +// } +// +// label { +// margin: 0; +// } +//} + + +.form-inline { + @include media-breakpoint-up(sm) { + .input-group { + display: inline-flex; + align-items: center; + } + } +} + +.form-control-feedback{ + position: absolute; + top: 0; + right: 0; + z-index: 2; + display: block; + width: 34px; + height: 34px; + line-height: 34px; + text-align: center; + pointer-events: none; + opacity: 0; + + .has-success &{ + color: $green; + opacity: 1; + } + + .has-danger &{ + color: $red; + opacity: 1; + } +} + +.form-group{ + padding-bottom: 10px; + position: relative; + margin: 8px 0 0; +} + +textarea{ + height: auto !important; + resize: none; + line-height: $bmd-line-height !important; +} + +.form-group input[type=file] { + opacity: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +.form-newsletter{ + .input-group, + .form-group{ + float: left; + width: 78%; + margin-right: 2%; + margin-top: 9px; + padding-top: 5px; + } + + .btn{ + float: left; + width: 20%; + margin: 9px 0 0; + } +} + +.form-file-upload{ + .input-group-btn:last-child>.btn-round{ + border-radius: 30px; + } + + .input-group-btn .btn{ + margin: 0; + } + + .input-group{ + width: 100%; + } +} + +.input-group .input-group-btn{ + padding: 0 12px; +} + +.form-control[disabled], +fieldset[disabled] .form-control, +.form-group .form-control[disabled], +fieldset[disabled] .form-group .form-control{ + background-color: transparent; + cursor: not-allowed; + border-bottom: 1px dotted $input-border-color; + background-repeat: no-repeat; +} + + + + + +.mat-form-field{ + display: block !important; +} + +.has-success{ + .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, + .mat-form-field-empty.mat-form-field-label{ + color: #4caf50; + } + &.mat-focused{ + .mat-input-underline{ + .mat-input-ripple{ + background-color: #4caf50; + } + } + } +} + +.has-danger{ + .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, + .mat-form-field-empty.mat-form-field-label{ + color: #f44336; + } + &.mat-focused{ + .mat-input-underline{ + .mat-input-ripple{ + background-color: #f44336; + } + } + } +} +.ng-invalid{ + &.mat-focused .mat-form-field-label{ + color: #f44336; + } +} +form .ng-valid{ + &.mat-focused .mat-form-field-label, + .mat-focused .mat-form-field-label, + .mat-form-field-label{ + // color: #4caf50; + } + .mat-input-underline{ + // background-color: #4caf50; + height: 2px; + .mat-input-ripple{ + // background-color: #4caf50; + } + } + +} +.mat-input-placeholder { + color: rgba(0, 0, 0, 0.38); +} +.mat-input-underline { + background-color: rgba(0, 0, 0, 0.12); +} +.mat-focused .mat-input-placeholder { + color: $brand-primary; +} +.mat-input-ripple { + background-color: $brand-primary; +} diff --git a/dmp-frontend/src/assets/scss/core/_images.scss b/dmp-frontend/src/assets/scss/core/_images.scss new file mode 100644 index 000000000..0d77d0ea5 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_images.scss @@ -0,0 +1,10 @@ +.img-thumbnail{ + border-radius: 16px; +} +.img-raised{ + @include shadow-big-image(); +} + +.rounded{ + border-radius: $border-radius-large !important; +} diff --git a/dmp-frontend/src/assets/scss/core/_input-group.scss b/dmp-frontend/src/assets/scss/core/_input-group.scss new file mode 100644 index 000000000..e4937f21c --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_input-group.scss @@ -0,0 +1,36 @@ +// ----------------------------------------- +// input-group and input-group-addon styles +// note: form-groups are not required +// +@mixin input-group-button-variation($vertical-padding) { + .input-group-btn { + .btn { + //margin: 0 0 $vertical-padding 0; + } + } +} + +// default margin - no form-group required +@include input-group-button-variation(input-padding-y); + +.bmd-form-group-sm { + @include input-group-button-variation($input-padding-y-sm); +} + +.bmd-form-group-lg { + @include input-group-button-variation($input-padding-y-lg); +} + +.input-group { + // may be in or outside of form-group + + .input-group-text { + display: flex; + justify-content: center; + align-items: center; + padding: 0 15px 0 15px; + background-color: transparent; + border-color: transparent; + } + +} diff --git a/dmp-frontend/src/assets/scss/core/_misc.scss b/dmp-frontend/src/assets/scss/core/_misc.scss new file mode 100644 index 000000000..0bd4e2f1b --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_misc.scss @@ -0,0 +1,74 @@ +body{ + background-color: #eee; + color: $black-color; + font-weight: 300; +} + +legend { + border-bottom: 0; +} + +.serif-font{ + font-family: $font-family-serif; +} + +// Prevent highlight on mobile +* { + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-tap-highlight-color: transparent; + &:focus { + outline: 0; + } +} + +a{ + color: $link-color; + &:hover, + &:focus{ + color: darken($link-color, 5%); + text-decoration: none; + } + + &.text-info{ + &:hover, &:focus{ + color: darken($brand-info, 5%); + } + } + + & .material-icons { + vertical-align: middle; + } +} + +.form-check, +label{ + font-size: 14px; + line-height: 1.42857; + color: $checkboxes-text-color; + font-weight: 400; +} + +/* Animations */ +.animation-transition-general{ + @include transition-all($general-transition-time, $transition-linear); +} + +.animation-transition-slow{ + @include transition-all($slow-transition-time, $transition-linear); +} + +.animation-transition-fast{ + @include transition-all($fast-transition-time, $transition-ease); +} + +.caret, +.sidebar a{ + @include transition-all($fast-transition-time, $transition-ease-in); +} +#map { + position: relative; + z-index: 2; + width: 100%; + height: calc(100vh - 70px); + margin-top: 70px; +} diff --git a/dmp-frontend/src/assets/scss/core/_mixins.scss b/dmp-frontend/src/assets/scss/core/_mixins.scss new file mode 100644 index 000000000..63761efd6 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_mixins.scss @@ -0,0 +1,16 @@ +@import "mixins/utilities"; +@import "mixins/breakpoints"; +@import "mixins/animations"; +@import "mixins/type"; +@import "mixins/layout"; +@import "mixins/drawer"; +@import "mixins/forms"; +@import "mixins/buttons"; +@import "mixins/hover"; +@import "mixins/navs"; +@import "mixins/colored-shadows"; +@import "mixins/navbar-colors"; +@import "mixins/alert"; +@import "mixins/sidebar-color"; +@import "mixins/variables"; +@import "mixins/vendor-prefixes"; diff --git a/dmp-frontend/src/assets/scss/core/_navbar.scss b/dmp-frontend/src/assets/scss/core/_navbar.scss new file mode 100644 index 000000000..4a27e2115 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_navbar.scss @@ -0,0 +1,252 @@ +.navbar { + border: 0; + border-radius: $border-radius-base; + padding: 0.625rem 0; + margin-bottom: 20px; + @include navbar-colors($white-color, $navbar-color); + + &.fixed-top{ + border-radius: 0; + } + + .navbar-nav{ + .nav-item .nav-link{ + position: relative; + color: inherit; + padding: $padding-general-x; + font-weight: $font-weight-default; + font-size: $mdb-btn-font-size-base; + text-transform: uppercase; + border-radius: $border-radius-base; + line-height: 20px; + + &:not(.btn-just-icon) .fa{ + position: relative; + top: 2px; + margin-top: -4px; + margin-right: 4px; + } + + & .material-icons, + & .fa{ + font-size: $font-size-lg; + max-width: 24px; + margin-top: -1.1em; + } + + &:not(.btn) .material-icons{ + margin-top: -7px; + top: 3px; + position: relative; + margin-right: 3px; + } + + &.profile-photo{ + padding: 0; + margin: 0 3px; + + &:after{ + display: none; + } + + & .profile-photo-small{ + height: 40px; + width: 40px; + } + + .ripple-container{ + border-radius: 50%; + } + } + } + + .dropdown-menu-right{ + transform-origin: 100% 0; + } + + .nav-item.active .nav-link{ + &, + &:hover, + &:focus { + color: inherit; + background-color: rgba(255, 255, 255, 0.1); + } + } + } + + .btn, + .navbar-nav .nav-item .btn{ + margin-top: 0; + margin-bottom: 0; + } + + .navbar-toggler{ + cursor: pointer; + outline: 0; + + .navbar-toggler-icon{ + width: 22px; + height: 2px; + vertical-align: middle; + outline: 0; + display: block; + border-radius: 1px; + + & + .navbar-toggler-icon{ + margin-top: 4px; + } + } + } + + &.navbar-absolute{ + position: absolute; + width: 100%; + padding-top: 10px; + z-index: 1029; + } + + .navbar-wrapper{ + display: inline-flex; + align-items: center; + } + + // give correct size to ripple container + .navbar-brand { + position: relative; + color: inherit; + height: 50px; + font-size: $navbar-brand-font-size - 0.125; + line-height: 30px; + padding: $padding-general-y 0; + font-weight: 300; + margin-left: 1rem; + } + + > .container { + flex: 1; + } + + &.bg-primary{ + @include navbar-colors($bg-primary, $white-color); + } + &.bg-info{ + @include navbar-colors($bg-info, $white-color); + } + + &.bg-warning{ + @include navbar-colors($bg-warning, $white-color); + } + + &.bg-rose{ + @include navbar-colors($bg-rose, $white-color); + } + + &.bg-danger{ + @include navbar-colors($bg-danger, $white-color); + } + + &.bg-success{ + @include navbar-colors($bg-success, $white-color); + } + &.bg-dark{ + @include navbar-colors($grey-900, $white-color); + } + + &.navbar-transparent{ + background-color: transparent !important; + box-shadow: none; + padding-top: 25px; + + } + + .notification{ + position: absolute; + top: 5px; + border: 1px solid #FFF; + right: 10px; + font-size: 9px; + background: #f44336; + color: #FFFFFF; + min-width: 20px; + padding: 0px 5px; + height: 20px; + border-radius: 10px; + text-align: center; + line-height: 19px; + vertical-align: middle; + display: block; + } +} + +.navbar{ + .navbar-minimize{ + padding: 3px 0 0 15px; + } + + &.navbar-transparent{ + padding-top: 10px; + } + + .collapse{ + .navbar-nav{ + .nav-item .nav-link{ + position: relative; + padding: 10px 15px; + font-weight: $font-weight-default; + font-size: $mdb-btn-font-size-base; + text-transform: uppercase; + border-radius: $border-radius-base; + line-height: 20px; + margin-left: 5px; + color: inherit; + + &:not(.btn-just-icon) .fa{ + position: relative; + top: 2px; + margin-top: -4px; + margin-right: 4px; + } + + & .material-icons, + & .fa{ + font-size: $font-size-lg; + max-width: 24px; + margin-top: -1.1em; + } + + &:not(.btn) .material-icons{ + margin-top: -3px; + top: 0px; + position: relative; + margin-right: 3px; + } + .notification{ + top: 0px; + } + } + } + } +} + +.off-canvas-sidebar{ + .navbar{ + .navbar-collapse{ + .navbar-nav .nav-item{ + .nav-link{ + padding-top: 15px; + padding-bottom: 15px; + font-weight: 500; + font-size: 12px; + text-transform: uppercase; + border-radius: 3px; + color: $white-color; + margin: 0 15px; + + &:hover{ + background: rgba(200, 200, 200, 0.2); + } + } + } + } + } +} diff --git a/dmp-frontend/src/assets/scss/core/_popover.scss b/dmp-frontend/src/assets/scss/core/_popover.scss new file mode 100644 index 000000000..c660aa245 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_popover.scss @@ -0,0 +1,53 @@ +.popover, .tooltip-inner { + line-height: 1.5em; + background: $white-color; + border: none; + border-radius: $border-radius-base; + @include shadow-8dp(); + color: $popover-color; +} + + +.popover{ + padding: 0; + @include shadow-16dp(); + + &.left, + &.right, + &.top, + &.bottom{ + > .arrow{ + border: none; + } + } + + + &.bs-popover-top, + &.bs-popover-auto[x-placement^="top"], + &.bs-popover-bottom, + &.bs-popover-auto[x-placement^="bottom"], + &.bs-popover-right, + &.bs-popover-auto[x-placement^="right"], + &.bs-popover-left, + &.bs-popover-auto[x-placement^="left"]{ + & .arrow::before{ + border: 0; + } + } + +} + +.popover-header{ + background-color: $white-color; + border: none; + padding: 15px 15px 5px; + font-size: $font-size-h4; + margin: 0; + color: $popover-color; +} + +.popover-body{ + padding: 10px 15px 15px; + line-height: 1.4; + color: $popover-color; +} diff --git a/dmp-frontend/src/assets/scss/core/_popups.scss b/dmp-frontend/src/assets/scss/core/_popups.scss new file mode 100644 index 000000000..4b41450ad --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_popups.scss @@ -0,0 +1,85 @@ +.popover{ + font-size: $font-size-base; + box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); + border: none; + line-height: 1.7; + max-width: 240px; + + &.bs-popover-top .arrow:before, + &.bs-popover-left .arrow:before, + &.bs-popover-right .arrow:before, + &.bs-popover-bottom .arrow:before,{ + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + } + + .popover-header{ + color: $default-color-opacity; + font-size: $font-size-base; + text-transform: capitalize; + font-weight: $font-weight-semi; + margin: 0; + margin-top: 5px; + border: none; + background-color: transparent; + } + + &:before{ + display: none; + } + + &.bs-tether-element-attached-top:after{ + border-bottom-color:$white-color; + top: -9px; + } + + &.popover-primary{ + @include popover-color($primary-color, $white-color); + } + + &.popover-info{ + @include popover-color($info-color, $white-color); + } + + &.popover-warning{ + @include popover-color($warning-color, $white-color); + } + + &.popover-danger{ + @include popover-color($danger-color, $white-color); + } + + &.popover-success{ + @include popover-color($success-color, $white-color); + } +} + + +.tooltip{ + &.bs-tooltip-right .arrow:before{ + border-right-color:$white-color; + } + + &.bs-tooltip-top .arrow:before{ + border-top-color:$white-color; + } + + &.bs-tooltip-bottom .arrow:before{ + border-bottom-color:$white-color; + } + + &.bs-tooltip-left .arrow:before{ + border-left-color:$white-color; + } +} + +.tooltip-inner{ + padding: $padding-base-vertical $padding-base-horizontal; + min-width: 130px; + background-color: $white-color; + font-size: $font-size-base; + color: inherit; + box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); +} diff --git a/dmp-frontend/src/assets/scss/core/_radios.scss b/dmp-frontend/src/assets/scss/core/_radios.scss new file mode 100644 index 000000000..4f73cb3a5 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_radios.scss @@ -0,0 +1,98 @@ + +@mixin radio-color($color, $opacity){ + & ~ .check, + & ~ .circle { + opacity: $opacity; + } + + & ~ .check { + background-color: $color; + } + + & ~ .circle { + border-color: $color; + } +} + +.form-check{ + .form-check-label { + cursor: pointer; + padding-left: 25px; + position: relative; + @include mdb-label-color-toggle-focus(); + + span { + display: block; + position: absolute; + left: -1px; + top: -1px; + transition-duration: 0.2s; + } + .circle { + border: 1px solid $mdb-radio-color-off; + height: 15px; + width: 15px; + border-radius: 100%; + top: 1px; + + .check { + height: 15px; + width: 15px; + border-radius: 100%; + background-color: $mdb-radio-color-on; + @include transform-scale3d(unquote('0,0,0')); + + + } + } + + + .form-check-input:not(:checked) ~ .check:after { + @include animation(rippleOff 500ms); + } + + .form-check-input:checked ~ .check:after { + @include animation(rippleOff 500ms); + } + + } + + .form-check-input { + opacity: 0; + height: 0; + width: 0; + overflow: hidden; + + &:checked { + @include radio-color($mdb-radio-color-on, 1); + } + &:checked ~ .circle .check { + @include transform-scale3d(unquote('0.65, 0.65, 1')); + } + } + + .form-check-input[disabled] { + + // light theme spec: Disabled: #000000, Opacity 26% + @include radio-color($black, 0.26); + + & + .circle .check{ + background-color: $black; + } + } + + + .form-check-sign{ + vertical-align: middle; + position: relative; + top: -2px; + float: left; + padding-right: 10px; + display: inline-block; + + } +} + +.form-check + .form-check { + margin-top: 0; +} diff --git a/dmp-frontend/src/assets/scss/core/_responsive.scss b/dmp-frontend/src/assets/scss/core/_responsive.scss new file mode 100644 index 000000000..05bb6e9d3 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_responsive.scss @@ -0,0 +1,830 @@ +@media all and (max-width: 991px) { + [class*="navbar-expand-"] > .container, + [class*="navbar-expand-"] > .container-fluid{ + padding-left: 15px; + padding-right: 15px; + } + + .navbar .navbar-collapse .navbar-nav > li.button-container{ + padding: 15px; + } + + .carousel .card .card-body{ + max-width: 340px; + margin: 0 auto; + min-height: 400px; + } + + .navbar-collapse{ + position: fixed; + display: block; + top: 0px; + height: 100vh; + width: 230px; + right: 0; + margin-right: 0 !important; + z-index: 1032; + visibility: visible; + background-color: #999; + overflow-y: visible; + border-top: none; + text-align: left; + padding-right: 0; + padding-left: 0; + + max-height: none !important; + + @include transform-translate-x(230px); + @include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + + &::after{ + top: 0; + left: 0; + height: 100%; + width: 100%; + position: absolute; + background-color: $white-color; + display: block; + content: ""; + z-index: 1; + } + + .dropdown-toggle:after{ + position: absolute; + right: 16px; + margin-top: 8px; + } + + .navbar-nav{ + position: relative; + z-index: 3; + + .nav-item{ + .nav-link{ + color: $black-color; + margin: 5px 15px; + } + + &.button-container .nav-link{ + margin: 15px; + } + + &:after{ + width: calc(100% - 30px); + content: ""; + display: block; + height: 1px; + margin-left: 15px; + // background-color: #e5e5e5; + } + + &:last-child { + &:after{ + display: none; + } + } + } + } + + .nav-open &{ + @include transform-translate-x(0px); + } + } + + .nav-open{ + .navbar-translate{ + @include transform-translate-x(-230px); + } + } + + .navbar{ + .navbar-translate{ + width: 100%; + position: relative; + display: flex; + -ms-flex-pack: justify !important; + justify-content: space-between !important; + -ms-flex-align: center; + align-items: center; + @include transitions-property (transform, 0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + } + + .dropdown.show .dropdown-menu{ + display: block; + } + + .dropdown .dropdown-menu{ + display: none; + } + + .dropdown-menu{ + .dropdown-item{ + margin-left: 1.5rem; + margin-right: 1.5rem; + } + } + + .dropdown.show .dropdown-menu, + .dropdown .dropdown-menu{ + background-color: transparent; + border: 0; + padding-bottom: 15px; + transition: none; + -webkit-box-shadow: none; + box-shadow: none; + transform: none !important; + width: auto; + margin-bottom: 15px; + padding-top: 0; + height: 300px; + animation: none; + opacity: 1; + overflow-y: scroll; + } + } + + .navbar.navbar-transparent{ + .navbar-toggler{ + .navbar-toggler-icon{ + background-color: $white-color; + } + } + } + + #bodyClick { + height: 100%; + width: 100%; + position: fixed; + opacity: 0; + top: 0; + left: auto; + right: 230px; + content: ""; + z-index: 1029; + overflow-x: hidden; + } + + // for demo + #navbar .navbar-collapse, + #navigation .navbar-collapse{ + display: none !important; + } + +} + +@media all and (min-width: 991px) { + .navbar .navbar-nav{ + align-items: center; + + .button-container{ + margin-left: 0.1875px; + } + } +} + +@media screen and (max-width: 991px) { + .presentation-page { + .section-components { + .components-macbook { + max-width: 850px !important; + max-height: 480px !important; + margin-top: 12vh; + left: -12px; + } + .coloured-card-img, + .table-img { + display: none; + } + .social-img { + left: 47%; + top: 37%; + } + .pin-btn-img { + top: 54%; + } + .share-btn-img { + top: 12%; + } + .coloured-card-btn-img { + top: -2%; + left: 65%; + } + } + .section-content { + .area-img { + max-width: 130px; + max-height: 170px; + } + .info-img { + max-width: 170px; + max-height: 120px; + } + } + } +} + +@media screen and (max-width: 767px) { + .presentation-page { + .section-components { + .components-macbook { + max-width: 350px !important; + max-height: 250px !important; + margin-top: 12vh; + left: -12px; + } + .coloured-card-img, + .table-img { + display: none; + } + .social-img { + left: -7%; + top: 37%; + } + .pin-btn-img { + top: 54%; + } + .share-btn-img { + top: 7%; + } + .coloured-card-btn-img { + top: -2%; + } + } + } + + .presentation-page, + .index-page, + .section-page{ + #cd-vertical-nav{ + display: none; + } + } + + .index-page{ + .cd-section{ + .tim-typo .tim-note{ + width: 60px; + } + } + } +} + +@media screen and (max-width: 400px){ + .pro-badge{ + top: 90px !important; + right: 30px !important; + } + .cd-vertical-nav{ + display: none !important; + } +} + +/* Changes for small display */ + +@media (max-width: 991px){ + + .form-group{ + textarea{ + padding-top: 15px; + } + } + + .nav-open .menu-on-left .main-panel{ + position: initial; + } + + html, + body{ + overflow-x: hidden; + } + + .menu-on-left{ + .nav-open &{ + .main-panel, + .wrapper-full-page, + .navbar-fixed > div{ + @include transform-translate-x(260px); + } + } + + .sidebar, + .off-canvas-sidebar{ + left: 0; + right: auto; + @include transform-translate-x(-260px); + } + + .close-layer{ + left: auto; + right: 0; + } + } + + .timeline{ + &:before{ + left: 5%; + } + + > li > .timeline-badge{ + left: 5%; + } + + > li > .timeline-panel{ + float: right; + width: 86%; + + &:before{ + border-left-width: 0; + border-right-width: 15px; + left: -15px; + right: auto; + } + + &:after{ + border-left-width: 0; + border-right-width: 14px; + left: -14px; + right: auto; + } + } + } + + .nav-mobile-menu{ + .dropdown .dropdown-menu{ + display: none; + position: static !important; + background-color: transparent; + width: auto; + float: none; + box-shadow: none; + + &.showing{ + animation: initial; + animation-duration: 0s; + } + + &.hiding{ + transform: none; + opacity: 1; + } + } + + .dropdown.show .dropdown-menu{ + display: block; + } + + li.active > a{ + background-color: rgba(255, 255, 255, 0.1); + } + } + + + .navbar-minimize { + display: none; + } + + .card .form-horizontal { + .label-on-left, + .label-on-right{ + padding-left:15px; + padding-top: 8px; + } + + .form-group{ + margin-top: 0px; + } + + .checkbox-radios{ + padding-bottom: 15px; + + .checkbox:first-child, + .radio:first-child{ + margin-top: 0; + } + } + + .checkbox-inline{ + margin-top: 0; + } + } + .sidebar{ + display: none; + box-shadow: none; + + .sidebar-wrapper{ + padding-bottom: 60px; + } + + .nav-mobile-menu{ + margin-top: 0; + + .notification{ + float: left; + line-height: 30px; + margin-right: 8px; + } + + .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + } + } + + .main-panel{ + width: 100%; + } + .navbar-transparent{ + padding-top: 15px; + background-color: rgba(0, 0, 0, 0.45); + } + body { + position: relative; + } + + .nav-open{ + .main-panel, + .wrapper-full-page, + .navbar .container .navbar-toggler, + .navbar .container .navbar-wrapper, + .navbar .container{ + left: 0; + @include transform-translate-x(-260px); + } + + .sidebar{ + @include shadow-big(); + } + + .off-canvas-sidebar .navbar-collapse, + .sidebar{ + @include transform-translate-x(0); + } + } + + .wrapper-full-page, + .navbar .container .navbar-toggler, + .navbar .container .navbar-wrapper, + .navbar .container{ + @include transform-translate-x(0px); + @include transitions (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + left: 0; + } + + .off-canvas-sidebar .navbar .container{ + transform: none; + } + + + .main-panel, + .navbar-collapse{ + @include transitions (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + } + + .navbar .navbar-collapse.collapse, + .navbar .navbar-collapse.collapse.in, + .navbar .navbar-collapse.collapsing{ + display: none !important; + } + + .off-canvas-sidebar .navbar .navbar-collapse.collapse, + .off-canvas-sidebar .navbar .navbar-collapse.collapse.in, + .off-canvas-sidebar .navbar .navbar-collapse.collapsing{ + display: block !important; + } + + .navbar-nav > li{ + float: none; + position: relative; + display: block; + } + + .off-canvas-sidebar nav .navbar-collapse{ + margin: 0; + + > ul { + margin-top: 19px; + } + } + + .sidebar, + .off-canvas-sidebar nav .navbar-collapse{ + position: fixed; + display: block; + top: 0; + height: 100vh; + width: 260px; + right: 0; + left: auto; + z-index: 1032; + visibility: visible; + background-color: #9A9A9A; + overflow-y: visible; + border-top: none; + text-align: left; + padding-right: 0px; + padding-left: 0; + + @include transform-translate-x(260px); + @include transitions (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + > ul { + position: relative; + z-index: 4; + width: 100%; + } + &::before{ + top: 0; + left: 0; + height: 100%; + width: 100%; + position: absolute; + background-color: #282828; + display: block; + content: ""; + z-index: 1; + } + + .logo{ + position: relative; + z-index: 4; + } + + .navbar-form{ + margin: 10px 0px; + float: none !important; + padding-top: 1px; + padding-bottom: 1px; + position: relative; + } + + .table-responsive { + width: 100%; + margin-bottom: 15px; + overflow-x: scroll; + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + -webkit-overflow-scrolling: touch; + } + } + + .form-group{ + + &.form-search{ + .form-control{ + font-size: 1.7em; + height: 37px; + width: 78%; + } + } + } + + .navbar-form{ + .btn{ + position: absolute; + top: -5px; + right: -50px; + } + } + + .close-layer{ + height: 100%; + width: 100%; + position: absolute; + opacity: 0; + top: 0; + left: auto; + background: rgba(0, 0, 0, 0.35); + content: ""; + z-index: 9999; + overflow-x: hidden; + + @include transitions($slow-transition-time, $transition-ease-in); + + &.visible{ + opacity: 1; + } + } + + .navbar-toggler .icon-bar { + display: block; + position: relative; + background: #555 !important; + width: 24px; + height: 2px; + border-radius: 1px; + margin: 0 auto; + } + + .navbar-header .navbar-toggler { + padding: 15px; + margin-top: 4px; + width: 40px; + height: 40px; + } + .bar1, + .bar2, + .bar3 { + outline: 1px solid transparent; + } + + @include topbar-x-rotation(); + @include topbar-back-rotation(); + @include bottombar-x-rotation(); + @include bottombar-back-rotation(); + + .navbar-toggler{ + .icon-bar:nth-child(2){ + top: 0px; + @include bar-animation($topbar-back); + } + .icon-bar:nth-child(3){ + opacity: 1; + } + .icon-bar:nth-child(4){ + bottom: 0px; + @include bar-animation($bottombar-back); + } + + &.toggled{ + .icon-bar:nth-child(2){ + top: 6px; + @include bar-animation($topbar-x); + } + .icon-bar:nth-child(3){ + opacity: 0; + } + .icon-bar:nth-child(4){ + bottom: 6px; + @include bar-animation($bottombar-x); + } + } + } + + @-webkit-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} + } + @-moz-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} + } + @keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} + } + + .dropdown-menu .divider{ + background-color: rgba(229, 229, 229, 0.15); + } + + .navbar-nav { + margin: 1px 0; + + .open .dropdown-menu > li { + & > a{ + padding: 15px 15px 5px 50px; + } + + &:first-child > a{ + padding: 5px 15px 5px 50px; + } + + &:last-child > a { + padding: 15px 15px 25px 50px; + } + } + } + + [class*="navbar-"] .navbar-nav { + & > li > a, + > li > a:hover, + > li > a:focus, + .active > a, + .active > a:hover, + .active > a:focus, + .open .dropdown-menu > li > a, + .open .dropdown-menu > li > a:hover, + .open .dropdown-menu > li > a:focus, + .navbar-nav .open .dropdown-menu > li > a:active { + color: white; + } + + & > li > a, + > li > a:hover, + > li > a:focus, + .open .dropdown-menu > li > a, + .open .dropdown-menu > li > a:hover, + .open .dropdown-menu > li > a:focus{ + opacity: .7; + background: transparent; + } + + &.navbar-nav .open .dropdown-menu > li > a:active { + opacity: 1; + } + + & .dropdown > a{ + &:hover .caret { + border-bottom-color: #777; + border-top-color: #777; + } + &:active .caret { + border-bottom-color: white; + border-top-color: white; + } + } + + } + + .dropdown-menu { + display: none; + } + .navbar-fixed-top { + -webkit-backface-visibility: hidden; + } + #bodyClick { + height: 100%; + width: 100%; + position: fixed; + opacity: 0; + top: 0; + left: auto; + right: 260px; + content: ""; + z-index: 9999; + overflow-x: hidden; + } + + .social-line .btn{ + margin: $margin-bottom; + } + .subscribe-line .form-control{ + margin: $margin-bottom; + } + .social-line.pull-right{ + float: none; + } + .footer:not(.footer-big) nav > ul li{ + float: none; + } + .social-area.pull-right{ + float: none !important; + } + .form-control + .form-control-feedback{ + margin-top: -8px; + } + .navbar-toggle:hover,.navbar-toggle:focus { + background-color: transparent !important; + } + + .media-post .author{ + width: 20%; + float: none !important; + display: block; + margin: 0 auto 10px; + } + .media-post .media-body{ + width: 100%; + } + + .navbar-collapse.collapse{ + height: 100% !important; + } + .navbar-collapse.collapse.in { + display: block; + } + .navbar-header .collapse, .navbar-toggle { + display:block !important; + } + .navbar-header { + float:none; + } + .navbar-collapse{ + .nav p{ + font-size: $font-size-base; + margin: 0; + } + } +} + + +@media (min-width: 992px) { + .main-panel { + .navbar .navbar-collapse { + .navbar-nav .nav-item .nav-link p { + display: none; + } + } + } + + .nav-mobile-menu, + .sidebar .navbar-form{ + display: none !important; + } +} diff --git a/dmp-frontend/src/assets/scss/core/_ripples.scss b/dmp-frontend/src/assets/scss/core/_ripples.scss new file mode 100644 index 000000000..08a170bea --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_ripples.scss @@ -0,0 +1,41 @@ +// marker class (used as a selector for one-off elements to decorate) +.ripple { + position: relative; +} + +.ripple-container { + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + border-radius: inherit; + + .ripple-decorator { + position: absolute; + width: 20px; + height: 20px; + margin-top: -10px; + margin-left: -10px; + pointer-events: none; + background-color: rgba($black, 0.05); + border-radius: 100%; + opacity: 0; + transform: scale(1); + transform-origin: 50%; + + &.ripple-on { + opacity: 0.1; + transition: opacity 0.15s ease-in 0s, + transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; + } + + &.ripple-out { + opacity: 0; + transition: opacity 0.1s linear 0s !important; + } + } +} diff --git a/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss b/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss new file mode 100644 index 000000000..c30a87f9c --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss @@ -0,0 +1,503 @@ +.wrapper{ + position: relative; + top: 0; + height: 100vh; +} + +.sidebar { + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 2; + width: 260px; + background: $white-color; + @include shadow-big(); + + .caret{ + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px dashed; + border-top: 4px solid\9; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + } + + &[data-background-color="black"]{ + background-color: #191919; + } + .logo-img{ + width: 35px; + display: block; + max-height: 30px; + margin-left: 13px; + margin-right: 15px; + + img{ + width: 35px; + top: 16px; + position: absolute; + } + } + .sidebar-wrapper{ + position: relative; + height: calc(100vh - 75px); + overflow: auto; + width: 260px; + z-index: 4; + + padding-bottom: 30px; + + .dropdown .dropdown-backdrop{ + display: none !important; + } + + .navbar-form{ + border: none; + box-shadow: none; + + .input-group { + font-size: 1.7em; + height: 36px; + width: 78%; + padding-left: 17px; + } + } + + > .nav, + .user .user-info{ + [data-toggle="collapse"] ~ div > ul > li > a{ + span{ + display: inline-block; + @extend .animation-transition-general; + } + + .sidebar-normal{ + margin: 0; + position: relative; + transform: translateX(0px); + opacity: 1; + white-space: nowrap; + display: block; + + } + + .sidebar-mini{ + text-transform: uppercase; + width: 30px; + margin-right: 15px; + text-align: center; + letter-spacing: 1px; + position: relative; + float: left; + display: inherit; + } + + i{ + font-size: 17px; + line-height: 20px; + width: 26px; + } + } + } + } + + .logo-tim{ + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; + + img{ + width: 60px; + height: 60px; + } + } + + .nav{ + margin-top: 20px; + display: block; + + .caret{ + margin-top: 13px; + position: absolute; + right: 6px; + } + + li{ + > a{ + &:hover, + &:focus{ + background-color: transparent; + outline: none; + } + } + + &:first-child > a{ + margin: 0 15px; + } + + &:hover > a, + & .dropdown-menu a:hover, + & .dropdown-menu a:focus, + &.active > [data-toggle="collapse"]{ + background-color: rgba(200, 200, 200, 0.2); + color: $black-color; + box-shadow: none; + } + + &.active > [data-toggle="collapse"]{ + i{ + color: #a9afbb; + } + } + + &.active > a, + &.active > a i{ + color: $white-color; + } + + &.separator{ + margin: 15px 0; + + &:after{ + width: calc(100% - 30px); + content: ""; + position: absolute; + height: 1px; + left: 15px; + background-color: rgba(180,180,180, .3); + } + + & + li { + margin-top: 31px; + } + } + } + + p{ + margin: 0; + line-height: 30px; + font-size: 14px; + position: relative; + display: block; + height: auto; + white-space: nowrap; + } + + i{ + font-size: 24px; + float: left; + margin-right: 15px; + line-height: 30px; + width: 30px; + text-align: center; + color: #a9afbb; + } + } + + .nav li a, + .nav li .dropdown-menu a{ + margin: 10px 15px 0; + border-radius: $border-radius-base; + color: $black-color; + padding-left: 10px; + padding-right: 10px; + text-transform: capitalize; + font-size: $font-paragraph - 1; + padding: 10px 15px; + } + + + .sidebar-background{ + position: absolute; + z-index: 1; + height: 100%; + width: 100%; + display: block; + top: 0; + left: 0; + background-size: cover; + background-position: center center; + + &:after{ + position: absolute; + z-index: 3; + width: 100%; + height: 100%; + content: ""; + display: block; + background: #FFFFFF; + opacity: .93; + } + } + + .logo{ + padding: 15px 0px; + margin: 0; + display: block; + position: relative; + z-index: 4; + + &:after{ + content: ''; + position: absolute; + bottom: 0; + right: 15px; + height: 1px; + width: calc(100% - 30px); + background-color: rgba(180,180,180, .3); + + } + + p{ + float: left; + font-size: 20px; + margin: 10px 10px; + color: $white-color; + line-height: 20px; + } + + .simple-text{ + text-transform: uppercase; + padding: $padding-small-vertical $padding-zero; + display: inline-block; + font-size: 18px; + color: $black-color; + white-space: nowrap; + font-weight: $font-weight-default; + line-height: 30px; + overflow: hidden; + text-align: center; + display: block; + } + } + + .logo-tim{ + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; + + img{ + width: 60px; + height: 60px; + } + } + + + &[data-background-color="black"]{ + @include sidebar-background-color($gray-base, $white-color); + + .nav li .dropdown-menu .dropdown-item{ + color: $white-color; + } + } + + &[data-color="purple"]{ + @include set-background-color-button($brand-primary); + } + &[data-color="azure"]{ + @include set-background-color-button($brand-info); + } + &[data-color="green"]{ + @include set-background-color-button($brand-success); + } + &[data-color="orange"]{ + @include set-background-color-button($brand-warning); + } + &[data-color="danger"]{ + @include set-background-color-button($brand-danger); + } + &[data-color="rose"]{ + @include set-background-color-button($brand-rose); + } + + &[data-color="white"]{ + @include set-background-color-button($white-color); + @include sidebar-active-color($black-color); + } + + &[data-background-color="red"]{ + @include sidebar-background-color($brand-danger, $white-color); + + .user, + .logo, + .nav li.separator{ + &:after{ + background-color: rgba(255,255,255, .3); + } + } + + .nav{ + li:hover:not(.active) > a, + li.active > [data-toggle="collapse"]{ + background-color: rgba(255, 255, 255, 0.1); + } + } + } + + &[data-image]:after, + &.has-image:after{ + opacity: .77; + } +} + +.off-canvas-sidebar .navbar-collapse{ + .nav { + > li > a, + > li > a:hover{ + color: $white-color; + margin: 0 15px; + } + + > li > a:focus, + > li > a:hover{ + background: rgba(200, 200, 200, 0.2); + } + } +} + + +.main-panel{ + position: relative; + float: right; + width: $sidebar-width; + @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + + .main-content{ + margin-top: 70px; + padding: 30px 15px; + min-height: calc(100vh - 123px); + } + + .footer{ + border-top: 1px solid #e7e7e7; + } + + .navbar{ + margin-bottom: 0; + } + + .header{ + margin-bottom: 30px; + + .title{ + margin-top: 10px; + margin-bottom: 10px; + } + } +} + +.perfect-scrollbar-on{ + .sidebar, + .main-panel{ + height: 100%; + max-height: 100%; + } +} + + +.sidebar, +.main-panel, +.sidebar-wrapper{ + -webkit-transition-property: top,bottom,width; + transition-property: top,bottom, width; + -webkit-transition-duration: .2s,.2s, .35s; + transition-duration: .2s,.2s, .35s; + -webkit-transition-timing-function: linear,linear,ease; + transition-timing-function: linear,linear,ease; + -webkit-overflow-scrolling: touch; +} + +.visible-on-sidebar-regular{ + display: inline-block !important; +} +.visible-on-sidebar-mini{ + display: none !important; +} + +@media (min-width: 991px) { + .sidebar-mini{ + .visible-on-sidebar-regular{ + display: none !important; + } + .visible-on-sidebar-mini{ + display: inline-block !important; + } + + .sidebar, + .sidebar .sidebar-wrapper{ + width: 80px; + } + + .main-panel{ + width: $sidebar-mini-width; + } + + .sidebar{ + display: block; + font-weight: 200; + z-index: 9999; + + .logo{ + a.logo-normal{ + opacity: 0; + @include transform-translate-x(-25px); + } + } + + .sidebar-wrapper{ + > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .user .user-info > a > span, + > .nav li > a p{ + @include transform-translate-x(-25px); + opacity: 0; + } + } + } + + .sidebar:hover{ + width: 260px; + + .logo{ + a.logo-normal{ + opacity: 1; + @include transform-translate-x(0px); + } + } + + .sidebar-wrapper{ + width: 260px; + + > .nav li > a p, + > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .user .user-info > a > span{ + @include transform-translate-x(0px); + opacity: 1; + } + } + } + } + + .sidebar { + .nav .nav-item { + &.active-pro { + position: absolute; + width: 100%; + bottom: 13px; + } + } + } +} diff --git a/dmp-frontend/src/assets/scss/core/_tables.scss b/dmp-frontend/src/assets/scss/core/_tables.scss new file mode 100644 index 000000000..2d3da29c3 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_tables.scss @@ -0,0 +1,185 @@ +.table{ + > thead > tr > th{ + border-bottom-width: 1px; + font-size: $font-size-h5; + font-weight: $font-weight-light; + } + + .form-check{ + margin-top: 0; + + .form-check-sign{ + top: -13px; + left: 0; + padding-right: 0; + } + } + + .radio, + .checkbox{ + margin-top: 0; + margin-bottom: 0; + padding: 0; + width: 15px; + + .icons{ + position: relative; + } + } + > thead > tr > th, + > tbody > tr > th, + > tfoot > tr > th, + > thead > tr > td, + > tbody > tr > td, + > tfoot > tr > td{ + padding: 12px 8px; + vertical-align: middle; + } + + thead{ + tr{ + th{ + font-size: 1.063rem; + } + } + } + + .th-description{ + max-width: 150px; + } + .td-price{ + font-size: 26px; + font-weight: $font-weight-light; + margin-top: 5px; + text-align: right; + } + .td-total{ + font-weight: $font-weight-bold; + font-size: $font-size-h5; + padding-top: 20px; + text-align: right; + } + + .td-actions .btn{ + margin: 0px; + padding: 5px; + } + + > tbody > tr{ + position: relative; + } +} + +.table-shopping{ + > thead > tr > th{ + font-size: $font-size-h6; + text-transform: uppercase; + } + > tbody > tr > td{ + font-size: $font-paragraph; + + b{ + display: block; + margin-bottom: 5px; + } + } + .td-name{ + font-weight: $font-weight-default; + font-size: 1.5em; + line-height: 1.42857143; + + small{ + color: $gray-light; + font-size: 0.75em; + font-weight: $font-weight-light; + } + } + .td-number{ + font-weight: $font-weight-light; + font-size: $font-size-h4; + } + .td-name{ + min-width: 200px; + } + .td-number{ + text-align: right; + min-width: 150px; + + small{ + margin-right: 3px; + } + } + + .img-container{ + width: 120px; + max-height: 160px; + overflow: hidden; + display: block; + + img{ + width: 100%; + } + } +} + + + + +// BS4 has not yet converted the following to variables - keep an eye on it and move to variables when possible. +.thead-inverse { + th { + //color: $bmd-inverse; // #fff; + //background-color: $gray-dark; + } +} +.thead-default { + th { + //color: $gray; + //background-color: $bmd-inverse-lighter; //$gray-lighter; + } +} + +.table-inverse { + color: $bmd-inverse-light; //$gray-lighter; + //background-color: $gray-dark; + + //th, + //td, + //thead th { + // border-color: $gray; + //} +} + +.table { + thead th { + font-size: $bmd-table-header-font-size; + font-weight: 500; + + border-top-width: 0; + border-bottom-width: $table-border-width; + } +} + +thead.thead-inverse, +// needs specificity +.table-inverse thead { + th { + color: $bmd-inverse-lighter; + } +} + +.table-inverse { + th, + td, + thead th { + border-color: $bmd-table-border-color-inverse; + } +} + +.table-striped>tbody>tr:nth-of-type(odd){ + background-color: #f9f9f9; +} + +.table.table-hover tbody tr:hover{ + background-color: #f5f5f5; +} diff --git a/dmp-frontend/src/assets/scss/core/_tabs.scss b/dmp-frontend/src/assets/scss/core/_tabs.scss new file mode 100644 index 000000000..a0c44a135 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_tabs.scss @@ -0,0 +1,83 @@ + +.nav-tabs { + border: 0; + border-radius: $border-radius-base; + padding: 0 15px; + + .nav-item { + .nav-link { + color: $white-color; + border: 0; + margin: 0; + border-radius: $border-radius-base; + line-height: $mdb-btn-font-size-base * 2; + text-transform: uppercase; + font-size: $mdb-btn-font-size-base; + padding: 10px 15px; + background-color: transparent; + transition: 0.3s background-color 0s; + + &:hover { + border: 0; + } + } + .nav-link, + .nav-link:hover, + .nav-link:focus { + border: 0 !important; + color: $white-color !important; + font-weight: $font-weight-bold; + } + &.disabled .nav-link, + &.disabled .nav-link:hover { + color: rgba(255,255,255,0.5); + } + + .material-icons{ + margin: -1px 5px 0 0; + } + + .nav-link.active{ + background-color: rgba(255,255,255, .2); + transition: 0.3s background-color 0.2s; + } + } +} + + +.nav-tabs { + .nav-link { + border-bottom: $bmd-nav-tabs-border-size solid transparent; + } + + // colors + @include bmd-tabs-color($bmd-nav-tabs-color, $bmd-nav-tabs-active-color, $bmd-nav-tabs-active-border-color, $bmd-nav-tabs-disabled-link-color, $bmd-nav-tabs-disabled-link-color-hover); + + &.header-primary { + @include bmd-tabs-color($bmd-nav-tabs-primary-color, $bmd-nav-tabs-primary-active-color, $bmd-nav-tabs-primary-active-border-color, $bmd-nav-tabs-primary-disabled-link-color, $bmd-nav-tabs-primary-disabled-link-color-hover); + } + + &.bg-inverse { + @include bmd-tabs-color($bmd-nav-tabs-inverse-color, $bmd-nav-tabs-inverse-active-color, $bmd-nav-tabs-inverse-active-border-color, $bmd-nav-tabs-inverse-disabled-link-color, $bmd-nav-tabs-inverse-disabled-link-color-hover); + } +} + + + +.card-nav-tabs{ + margin-top: 45px; + + .card-header{ + margin-top: -30px !important; + } +} + +.tab-content .tab-pane .td-actions{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.card .tab-content .form-check{ + margin-top: 6px; +} diff --git a/dmp-frontend/src/assets/scss/core/_togglebutton.scss b/dmp-frontend/src/assets/scss/core/_togglebutton.scss new file mode 100644 index 000000000..555b7c466 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_togglebutton.scss @@ -0,0 +1,85 @@ +.togglebutton { + vertical-align: middle; + &, label, input, .toggle { + user-select: none; + } + label { + cursor: pointer; + color: $mdb-toggle-label-color; + @include mdb-label-color-toggle-focus(); + + // Hide original checkbox + input[type=checkbox] { + opacity: 0; + width: 0; + height: 0; + } + + .toggle { + text-align: left; // Issue #737 horizontal form + margin-left: 5px; + } + // Switch bg off and disabled + .toggle, + input[type=checkbox][disabled] + .toggle { + content: ""; + display: inline-block; + width: 30px; + height: 15px; + background-color: rgba(80, 80, 80, 0.7); + border-radius: 15px; + margin-right: 15px; + transition: background 0.3s ease; + vertical-align: middle; + } + // Handle off + .toggle:after { + content: ""; + display: inline-block; + width: 20px; + height: 20px; + background-color: #FFFFFF; + border-radius: 20px; + position: relative; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4); + left: -5px; + top: -2.5px; + border: 1px solid $mdb-checkbox-border-color; + transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease; + } + input[type=checkbox] { + // Handle disabled + &[disabled] { + & + .toggle:after, + &:checked + .toggle:after { + background-color: #BDBDBD; + } + } + + & + .toggle:active:after, + &[disabled] + .toggle:active:after { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1); + } + + // Ripple off and disabled + &:checked + .toggle:after { + left: 15px; + } + } + + // set bg when checked + input[type=checkbox]:checked { + + .toggle { + background-color: rgba($brand-primary, (70/100)); // Switch bg on + } + + + .toggle:after { + border-color: $brand-primary; // Handle on + } + + + .toggle:active:after { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on + } + } + } +} diff --git a/dmp-frontend/src/assets/scss/core/_tooltip.scss b/dmp-frontend/src/assets/scss/core/_tooltip.scss new file mode 100644 index 000000000..d5e160718 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_tooltip.scss @@ -0,0 +1,53 @@ +// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. + + .tooltip-inner, .mat-tooltip { + color: $gray !important; + line-height: 1.5em; + background: $white-color; + border: none; + border-radius: $border-radius-base !important; + @include shadow-8dp(); +} + +.tooltip, .tooltip.in { + //opacity: 1; +} +.tooltip.in{ + opacity: 1; + @include transform-translate-y(0px); +} +.tooltip{ + opacity: 0; + transition: opacity, transform .2s ease; + @include transform-translate-y(5px); + + &.left{ + .tooltip-arrow{ + border-left-color: $white-color; + } + } + &.right{ + .tooltip-arrow{ + border-right-color: $white-color; + } + } + &.top{ + .tooltip-arrow{ + border-top-color: $white-color; + } + } + &.bottom{ + .tooltip-arrow{ + border-bottom-color: $white-color; + } + } +} + +.tooltip-inner, .mat-tooltip{ + padding: 10px 15px; + min-width: 130px; +} + +.mat-tooltip{ + text-align: center; +} diff --git a/dmp-frontend/src/assets/scss/core/_type.scss b/dmp-frontend/src/assets/scss/core/_type.scss new file mode 100644 index 000000000..a46c698be --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_type.scss @@ -0,0 +1,92 @@ +html * { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { + font-family: $font-family-sans-serif; + font-weight: 300; + line-height: 1.5em; +} + + +h1, .h1 { + font-size: $font-size-h1; + line-height: 1.15em; +} +h2, .h2{ + font-size: $font-size-h2; +} +h3, .h3{ + font-size: $font-size-h3; + line-height: 1.4em; + margin: 20px 0 10px; +} +h4, .h4{ + font-size: $font-size-h4; + line-height: 1.4em; + font-weight: 300; +} +h5, .h5 { + font-size: $font-size-h5; + line-height: 1.4em; + margin-bottom: 15px; +} +h6, .h6{ + font-size: $font-size-h6; + text-transform: uppercase; + font-weight: $font-weight-bold; +} + +.title, +.card-title, +.info-title, +.footer-brand, +.footer-big h5, +.footer-big h4, +.media .media-heading{ + //font-weight: $font-weight-extra-bold; + // font-family: $font-family-serif; + + &, + a{ + color: $black-color; + text-decoration: none; + } +} + +.card-blog .card-title{ + font-weight: $font-weight-extra-bold; +} + +h2.title{ + margin-bottom: $margin-base * 2; +} + +.description, +.card-description, +.footer-big p{ + color: $gray-light; +} + +.text-warning { + color: $brand-warning !important; +} +.text-primary { + color: $brand-primary !important; +} +.text-danger { + color: $brand-danger !important; +} +.text-success { + color: $brand-success !important; +} +.text-info { + color: $brand-info !important; +} +.text-rose{ + color: $brand-rose !important; +} +.text-gray{ + color: $gray-color !important; +} diff --git a/dmp-frontend/src/assets/scss/core/_variables.scss b/dmp-frontend/src/assets/scss/core/_variables.scss new file mode 100644 index 000000000..5445fe383 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/_variables.scss @@ -0,0 +1,35 @@ +@import "variables/colors"; +@import "variables/shadow"; + +@import "variables/bootstrap-material-design-base"; + +// Customized BS variables +@import "variables/custom-forms"; +@import "variables/spacing"; +@import "variables/body"; +@import "variables/brand"; +@import "variables/buttons"; +@import "variables/card"; +@import "variables/code"; +@import "variables/dropdown"; +@import "variables/forms"; +@import "variables/list-group"; +@import "variables/nav"; +@import "variables/pagination"; +@import "variables/state"; +@import "variables/tables"; +@import "variables/tooltip"; +@import "variables/type"; +@import "variables/modals"; + +// import their vars after customization for use below +$enable-flex: true; // fully adopt flexbox layouts +$enable-shadows: true; // enable shadows, set to false to turn off shadows + + +@import "variables/layout"; +@import "variables/menu"; +@import "variables/drawer"; +@import "variables/snackbar"; + +@import "variables/bootstrap-material-design"; diff --git a/dmp-frontend/src/assets/scss/core/cards/_card-plain.scss b/dmp-frontend/src/assets/scss/core/cards/_card-plain.scss new file mode 100644 index 000000000..e150268c2 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/cards/_card-plain.scss @@ -0,0 +1,28 @@ +.card-plain { + background: transparent; + box-shadow: none; + + .card-header:not(.card-avatar) { + margin-left: 0; + margin-right: 0; + } + + .card-body { + padding-left: 5px; + padding-right: 5px; + } + + .card-header-image { + margin: 0 !important; + border-radius: $border-radius-large; + + img { + border-radius: $border-radius-large; + } + } + .card-footer { + padding-left: 5px; + padding-right: 5px; + background-color: transparent; + } +} diff --git a/dmp-frontend/src/assets/scss/core/cards/_card-profile.scss b/dmp-frontend/src/assets/scss/core/cards/_card-profile.scss new file mode 100644 index 000000000..98a228552 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/cards/_card-profile.scss @@ -0,0 +1,48 @@ +.card-profile{ + margin-top: 30px; + text-align: center; + + + .card-avatar { + margin: -50px auto 0; + border-radius: 50%; + overflow: hidden; + padding: 0; + + @include shadow-big(); + + & + .card-body { + margin-top: 15px; + } + img { + width: 100%; + height: auto; + } + } + + .card-body + .card-footer { + margin-top: -15px; + } + + .card-footer { + .btn.btn-just-icon { + font-size: 20px; + padding: 12px 12px; + line-height: 1em; + } + } + + &.card-plain { + .card-avatar { + margin-top: 0; + } + } + + .card-header:not([class*="card-header-"]){ + background: transparent; + } + .card-avatar { + max-width: 130px; + max-height: 130px; + } +} diff --git a/dmp-frontend/src/assets/scss/core/cards/_card-stats.scss b/dmp-frontend/src/assets/scss/core/cards/_card-stats.scss new file mode 100644 index 000000000..6391cb423 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/cards/_card-stats.scss @@ -0,0 +1,46 @@ +.card-stats{ + .card-header{ + &.card-header-icon, + &.card-header-text{ + text-align: right; + } + + .card-icon + .card-title, + .card-icon + .card-category{ + padding-top: 10px; + } + + &.card-header-icon .card-title, + &.card-header-text .card-title, + &.card-header-icon .card-category, + &.card-header-text .card-category { + margin: 0; + } + .card-category { + margin-bottom: 0; + margin-top: 0; + + &:not([class*="text-"]){ + color: $gray-color; + font-size: $font-paragraph; + } + } + + & + .card-footer{ + border-top: 1px solid #eee; + margin-top: 14px; + } + + &.card-header-icon i { + font-size: 36px; + line-height: 56px; + width: 56px; + height: 56px; + text-align: center; + } + } + + .card-body { + text-align: right; + } +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_alert.scss b/dmp-frontend/src/assets/scss/core/mixins/_alert.scss new file mode 100644 index 000000000..8c3a4187c --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_alert.scss @@ -0,0 +1,130 @@ +// alert-variations("", $brand-primary) +@mixin alert-variations($component, $selector-suffix, $brand-default) { + @include generic-variations($component, $selector-suffix, $brand-default, "alert-variations-content", null); +} + +@mixin alert-variations-content($args){ + $variation-color: map-get($args, variation-color); + $variation-color-text: map-get($args, variation-color-text); + + background-color: lighten($variation-color,3%); + color: $variation-color-text; + + a, .alert-link { + color: $variation-color-text; + } +} +// interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given +@mixin call-variations-content-mixin($args) { + $mixin-name: map-get($args, mixin-name); + @if $mixin-name == variations-content { + @include variations-content($args); + } @else if $mixin-name == background-variations-content { + @include background-variations-content($args); + } @else if $mixin-name == text-variations-content { + @include text-variations-content($args); + } @else if $mixin-name == button-variations-content { + @include button-variations-content($args); + } @else if $mixin-name == bg-color-variations-content { + @include bg-color-variations-content($args); + } @else if $mixin-name == bg-box-shadow-variations-content { + @include bg-box-shadow-variations-content($args); + } @else if $mixin-name == bg-img-variations-content { + @include bg-img-variations-content($args); + } @else if $mixin-name == navbar-variations-content { + @include navbar-variations-content($args); + }@else if $mixin-name == alert-variations-content { + @include alert-variations-content($args); + } @else { + @error "Unknown mixin: #{$mixin-name}" + } +} + +// +// To use this mixin you should pass a function as final parameter to define +// the style. In that definition you can use the following variables to define it. +// +// $variation-color-name ---> "red", "green", "indigo" ... +// $variation-color-full-name ---> "red", "green-50", "indigo-400" ... +// $variation-color ---> #f44336, #e8f5e9, #5c6bc0 ... +// $variation-color-text ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ... +// + +@mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $mdb-param-1) { + + //setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include) + $args: ( + //extra: $selector-suffix, + //default: $color-default, + mixin-name: $mixin-name, + material-param-1: $mdb-param-1 + ); + + // bootstrap styles + &#{$selector-suffix}, + &#{$component}-default#{$selector-suffix} { + + $args-extra: map-merge($args, ( + variation-color: $white-color, + variation-color-text: $gray + )); + @include call-variations-content-mixin($args-extra); + } + &#{$component}-inverse#{$selector-suffix} { + $args-inverse: map-merge($args, ( + variation-color: #212121, + variation-color-text: #fff + )); + @include call-variations-content-mixin($args-inverse); + } + &#{$component}-primary#{$selector-suffix} { + $args-primary: map-merge($args, ( + variation-color: $brand-primary, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-primary); + } + &#{$component}-success#{$selector-suffix} { + $args-success: map-merge($args, ( + variation-color: $brand-success, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-success); + } + &#{$component}-info#{$selector-suffix} { + $args-info: map-merge($args, ( + variation-color: $brand-info, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-info); + } + &#{$component}-warning#{$selector-suffix} { + $args-warning: map-merge($args, ( + variation-color: $brand-warning, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-warning); + } + &#{$component}-danger#{$selector-suffix} { + $args-danger: map-merge($args, ( + variation-color: $brand-danger, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-danger); + } + + &#{$component}-rose#{$selector-suffix} { + $args-rose: map-merge($args, ( + variation-color: $brand-rose, + variation-color-text: $mdb-text-color-light + )); + @include call-variations-content-mixin($args-rose); + } + +} + +@mixin alert-icon-color($color) { + i{ + color: $color; + } +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_animations.scss b/dmp-frontend/src/assets/scss/core/mixins/_animations.scss new file mode 100644 index 000000000..3c38fcd7b --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_animations.scss @@ -0,0 +1,109 @@ +// Animations (from mdl http://www.getmdl.io/) + +@mixin material-animation-fast-out-slow-in($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $bmd-animation-curve-fast-out-slow-in; +} + +@mixin material-animation-linear-out-slow-in($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $bmd-animation-curve-linear-out-slow-in; +} + +@mixin material-animation-fast-out-linear-in($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $bmd-animation-curve-fast-out-linear-in; +} + +@mixin material-animation-default($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $bmd-animation-curve-default; +} + +@mixin rotate-180() { + -webkit-transform: rotate( 180deg ); + -moz-transform: rotate( 180deg ); + -o-transform: rotate( 180deg ); + -ms-transform: rotate(180deg); + transform: rotate( 180deg ); +} + +@mixin transform-scale($value){ + -webkit-transform: scale($value); + -moz-transform: scale($value); + -o-transform: scale($value); + -ms-transform: scale($value); + transform: scale($value); +} + +@mixin rotateY-180() { + -webkit-transform: rotateY( 180deg ); + -moz-transform: rotateY( 180deg ); + -o-transform: rotateY( 180deg ); + -ms-transform: rotateY(180deg); + transform: rotateY( 180deg ); +} + +@mixin transitions($time, $type){ + -webkit-transition: all $time $type; + -moz-transition: all $time $type; + -o-transition: all $time $type; + -ms-transition: all $time $type; + transition: all $time $type; +} + +@mixin transitions-property($property, $time, $type){ + -webkit-transition: $property $time $type; + -moz-transition: $property $time $type; + -o-transition: $property $time $type; + -ms-transition: $property $time $type; + transition: $property $time $type; +} + +@mixin transform-translate-x($value){ + -webkit-transform: translate3d($value, 0, 0); + -moz-transform: translate3d($value, 0, 0); + -o-transform: translate3d($value, 0, 0); + -ms-transform: translate3d($value, 0, 0); + transform: translate3d($value, 0, 0); +} + +@mixin transform-translate-y($value){ + -webkit-transform: translate3d(0,$value, 0); + -moz-transform: translate3d(0, $value, 0); + -o-transform: translate3d(0, $value, 0); + -ms-transform: translate3d(0, $value, 0); + transform: translate3d(0, $value, 0); +} + +@mixin perspective($value){ + -webkit-perspective: $value; + -moz-perspective: $value; + -o-perspective: $value; + -ms-perspective: $value; + perspective: $value; +} + +@mixin transform-style($type){ + -webkit-transform-style: $type; + -moz-transform-style: $type; + -o-transform-style: $type; + -ms-transform-style: $type; + transform-style: $type; +} + +@mixin backface-visibility($type){ + -webkit-backface-visibility: $type; + -moz-backface-visibility: $type; + -o-backface-visibility: $type; + -ms-backface-visibility: $type; + backface-visibility: $type; +} + +@mixin transform-translate-y-dropdown($value){ + -webkit-transform: translate3d(0, $value, 0) !important; + -moz-transform: translate3d(0, $value, 0) !important; + -o-transform: translate3d(0, $value, 0) !important; + -ms-transform: translate3d(0, $value, 0) !important; + transform: translate3d(0, $value, 0) !important; +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_breakpoints.scss b/dmp-frontend/src/assets/scss/core/mixins/_breakpoints.scss new file mode 100644 index 000000000..9fc08ccd1 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_breakpoints.scss @@ -0,0 +1,34 @@ +// case where behavior is responsive, or with a marker class +@mixin media-breakpoint-down-or($breakpoint, $name) { + #{unquote($name)} { + @content; + } + + @include media-breakpoint-down($breakpoint) { + @content; + } +} + +// case where behavior is responsive, or with a marker class +@mixin media-breakpoint-up-or($breakpoint, $name) { + #{unquote($name)} { + @content; + } + + @include media-breakpoint-up($breakpoint) { + @content; + } +} + +// Name of the previous breakpoint, or null +// +// >> breakpoint-next(sm) +// xs +// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px)) +// xs +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) +// xs +@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n > 1, nth($breakpoint-names, $n - 1), null); +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_buttons.scss b/dmp-frontend/src/assets/scss/core/mixins/_buttons.scss new file mode 100644 index 000000000..32968eb7d --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_buttons.scss @@ -0,0 +1,385 @@ +// from bs mixins/buttons button-variant +@mixin bmd-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) { + color: $color; + background-color: $background; + border-color: $border; + + @include hover { + color: $color; + background-color: $focus-background; + border-color: $focus-border; + } + + &:focus, + &.focus, + &:hover{ + color: $color; + background-color: $focus-background; + border-color: $focus-border; + } + + &:active, + &.active, + .open > &.dropdown-toggle, + .show > &.dropdown-toggle { + color: $color; + background-color: $focus-background; + border-color: $focus-border; + @include shadow-2dp-color($background); + + &:hover, + &:focus, + &.focus { + color: $color; + background-color: $active-background; + border-color: $active-border; + } + } + + // when it is an icon, kill the active bg on open dropdown, but stabilize on hover + .open > &.dropdown-toggle.bmd-btn-icon { + color: inherit; + background-color: $background; + + // leave hover on with the lighter focus color + &:hover { + background-color: $focus-background; + } + } + + &.disabled, + &:disabled { + &:focus, + &.focus { + background-color: $background; + border-color: $border; + } + @include hover { + background-color: $background; + border-color: $border; + } + } +} + +@mixin bmd-flat-button-variant( + $color, + $border: $bmd-btn-border, + $focus-border: $bmd-btn-focus-bg, + $active-border: $bmd-btn-active-bg +) { + $background: $bmd-btn-bg; + $focus-background: $bmd-btn-focus-bg; + $active-background: $bmd-btn-active-bg; + + @include bmd-button-variant($color, + $background, + $focus-background, + $active-background, + $border, + $focus-border, + $active-border); + + // inverse color scheme + .bg-inverse & { + $focus-background: $bmd-inverse-btn-focus-bg; + $focus-border: $bmd-inverse-btn-focus-bg; + + $active-background: $bmd-inverse-btn-active-bg; + $active-border: $bmd-inverse-btn-active-bg; + + @include bmd-button-variant($color, + $background, + $focus-background, + $active-background, + $border, + $focus-border, + $active-border); + } + + // reverse the above for links + &.btn-link { + background-color: transparent; + } +} + +@mixin bmd-flat-button-color() { + @include bmd-flat-button-variant($bmd-btn-color); + + // flat bg with text color variations + &.btn-primary { + @include bmd-flat-button-variant($btn-primary-bg); + } + &.btn-secondary { + @include bmd-flat-button-variant($btn-secondary-color); + } + &.btn-info { + @include bmd-flat-button-variant($btn-info-bg); + } + &.btn-success { + @include bmd-flat-button-variant($btn-success-bg); + } + &.btn-warning { + @include bmd-flat-button-variant($btn-warning-bg); + } + &.btn-danger { + @include bmd-flat-button-variant($btn-danger-bg); + } +} + +@mixin bmd-outline-button-color() { + &.btn-outline, + &.btn-outline-primary, + &.btn-outline-secondary, + &.btn-outline-info, + &.btn-outline-success, + &.btn-outline-warning, + &.btn-outline-danger { + border-color: currentColor; + border-style: solid; + border-width: 1px; + } + + // flat bg with text and border color variations + &.btn-outline { + @include bmd-flat-button-variant($bmd-btn-color, $bmd-btn-color, $bmd-btn-color, $bmd-btn-color); + } + &.btn-outline-primary { + @include bmd-flat-button-variant($btn-primary-bg, $btn-primary-bg, $btn-primary-bg, $btn-primary-bg); + } + &.btn-outline-secondary { + @include bmd-flat-button-variant($btn-secondary-color, $btn-secondary-color, $btn-secondary-color, $btn-secondary-color); + } + &.btn-outline-info { + @include bmd-flat-button-variant($btn-info-bg, $btn-info-bg, $btn-info-bg, $btn-info-bg); + } + &.btn-outline-success { + @include bmd-flat-button-variant($btn-success-bg, $btn-success-bg, $btn-success-bg, $btn-success-bg); + } + &.btn-outline-warning { + @include bmd-flat-button-variant($btn-warning-bg, $btn-warning-bg, $btn-warning-bg, $btn-warning-bg); + } + &.btn-outline-danger { + @include bmd-flat-button-variant($btn-danger-bg, $btn-danger-bg, $btn-danger-bg, $btn-danger-bg); + } +} + +@mixin bmd-raised-button-variant($color, $background, $border) { + // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only? + $focus-background: contrast-color( + $background, + darken($background, 3%), + lighten($background, 3%) + ); + //$focus-background: darken($background, 10%); // default bootstrap + $focus-border: darken($border, 12%); + + $active-background: $focus-background; + //$active-background: darken($background, 17%); + $active-border: darken($border, 25%); + + @include bmd-button-variant($color, + $background, + $focus-background, + $active-background, + $border, + $focus-border, + $active-border); + + @include shadow-2dp-color($background); + + &:focus, + &:active, + &:hover{ + // remove this line if you want black shadows + @include button-shadow-color($background); + } + + &.btn-link{ + background-color: transparent; + color: $background; + box-shadow: none; + + &:hover, + &:focus, + &:active{ + background-color: transparent; + color: $background; + } + } + +} + +@mixin bmd-raised-button-color() { + &.btn-primary { + @include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color); + } + &.btn-secondary { + @include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color); + } + &.btn-info { + @include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color); + } + &.btn-success { + @include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color); + } + &.btn-warning { + @include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color); + } + &.btn-danger { + @include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color); + } + &.btn-rose { + @include bmd-raised-button-variant($btn-rose-color, $btn-rose-bg, $btn-rose-border-color); + } + &, + &.btn-default{ + @include bmd-raised-button-variant($btn-default-color, $btn-default-bg, $btn-default-border-color); + } +} + +@mixin bmd-social-buttons(){ + &.btn-facebook { + @include bmd-raised-button-variant($white, $social-facebook, $social-facebook); + } + &.btn-twitter { + @include bmd-raised-button-variant($white, $social-twitter, $social-twitter); + } + &.btn-pinterest { + @include bmd-raised-button-variant($white, $social-pinterest, $social-pinterest); + } + &.btn-google { + @include bmd-raised-button-variant($white, $social-google, $social-google); + } + &.btn-linkedin { + @include bmd-raised-button-variant($white, $social-linkedin, $social-linkedin); + } + &.btn-dribbble { + @include bmd-raised-button-variant($white, $social-dribbble, $social-dribbble); + } + &.btn-github { + @include bmd-raised-button-variant($white, $social-github, $social-github); + } + &.btn-youtube { + @include bmd-raised-button-variant($white, $social-youtube, $social-youtube); + } + &.btn-instagram { + @include bmd-raised-button-variant($white, $social-instagram, $social-instagram); + } + &.btn-reddit { + @include bmd-raised-button-variant($white, $social-reddit, $social-reddit); + } + &.btn-tumblr { + @include bmd-raised-button-variant($white, $social-tumblr, $social-tumblr); + } + &.btn-behance { + @include bmd-raised-button-variant($white, $social-behance, $social-behance); + } +} + +@mixin undo-bs-tab-focus() { + // clear out the tab-focus() from BS + &, + &:active, + &.active { + &:focus, + &.focus { + //@include tab-focus(); + outline: 0; + } + } +} + +$opacity-gray-3: rgba(222,222,222, .3) !default; +$opacity-gray-5: rgba(222,222,222, .5) !default; +$opacity-gray-8: rgba(222,222,222, .8) !default; + + +$opacity-5: rgba(255,255,255, .5) !default; +$opacity-8: rgba(255,255,255, .8) !default; + +$datepicker-color-days: rgba(255,255,255, .8) !default; +$datepicker-color-old-new-days: rgba(255,255,255, .4) !default; + + +$opacity-1: rgba(255,255,255, .1) !default; +$opacity-2: rgba(255,255,255, .2) !default; + +@mixin shadow-big-dash(){ + box-shadow: 0 10px 30px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 3), + 0 4px 25px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-big-navbar(){ + box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3), + 0 3px 20px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity); +} + +@mixin shadow-big-color($color){ + // new box shadow optimized for Tablets and Phones + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14), + 0 7px 10px -5px rgba($color, 0.4) +} + +@mixin shadow-alert-color($color){ + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), + 0 7px 10px -5px rgba($color, 0.4) +} + +@mixin btn-styles($btn-color) { + + // remove this line if you want black shadows + @include shadow-2dp-color($btn-color); + + &, + &:hover, + &:focus, + &:active, + &.active, + &:active:focus, + &:active:hover, + &.active:focus, + &.active:hover, + .open > &.dropdown-toggle, + .open > &.dropdown-toggle:focus, + .open > &.dropdown-toggle:hover { + background-color: $btn-color; + color: $white-color; + } + + &:focus, + &:active, + &:hover{ + // remove this line if you want black shadows + @include button-shadow-color($btn-color); + } + + &.disabled, + &:disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + box-shadow: none; + } + } + + &.btn-simple{ + background-color: transparent; + color: $btn-color; + box-shadow: none; + + &:hover, + &:focus, + &:active{ + background-color: transparent; + color: $btn-color; + } + } + +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_chartist.scss b/dmp-frontend/src/assets/scss/core/mixins/_chartist.scss new file mode 100644 index 000000000..95a2b736f --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_chartist.scss @@ -0,0 +1,92 @@ +// Scales for responsive SVG containers +$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default; +$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default; + +$ct-class-chart: ct-chart !default; +$ct-class-chart-line: ct-chart-line !default; +$ct-class-chart-bar: ct-chart-bar !default; +$ct-class-horizontal-bars: ct-horizontal-bars !default; +$ct-class-chart-pie: ct-chart-pie !default; +$ct-class-chart-donut: ct-chart-donut !default; +$ct-class-label: ct-label !default; +$ct-class-series: ct-series !default; +$ct-class-line: ct-line !default; +$ct-class-point: ct-point !default; +$ct-class-area: ct-area !default; +$ct-class-bar: ct-bar !default; +$ct-class-slice-pie: ct-slice-pie !default; +$ct-class-slice-donut: ct-slice-donut !default; +$ct-class-grid: ct-grid !default; +$ct-class-slice-donut-solid: ct-slice-donut-solid !default; +$ct-class-grid-background: ct-grid-background !default; +$ct-class-vertical: ct-vertical !default; +$ct-class-horizontal: ct-horizontal !default; +$ct-class-start: ct-start !default; +$ct-class-end: ct-end !default; + +// Class names to be used when generating CSS + + + +// Container ratio +$ct-container-ratio: (1/1.618) !default; + +// Text styles for labels +$ct-text-color: rgba(0, 0, 0, 0.4) !default; +$ct-text-size: 1.3rem !default; +$ct-text-align: flex-start !default; +$ct-text-justify: flex-start !default; +$ct-text-line-height: 1; + +// Grid styles +$ct-grid-color: rgba(0, 0, 0, 0.2) !default; +$ct-grid-dasharray: 2px !default; +$ct-grid-width: 1px !default; +$ct-grid-background-fill: none !default; + +// Line chart properties +$ct-line-width: 4px !default; +$ct-line-dasharray: false !default; +$ct-point-size: 10px !default; + +// Line chart point, can be either round or square +$ct-point-shape: round !default; +// Area fill transparency between 0 and 1 +$ct-area-opacity: 0.1 !default; + +// Bar chart bar width +$ct-bar-width: 10px !default; + +// Donut width (If donut width is to big it can cause issues where the shape gets distorted) +$ct-donut-width: 60px !default; + +// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you +// should set this property to false +$ct-include-classes: true !default; + +// If this is set to true the CSS will contain colored series. You can extend or change the color with the +// properties below +$ct-include-colored-series: $ct-include-classes !default; + +// If set to true this will include all responsive container variations using the scales defined at the top of the script +$ct-include-alternative-responsive-containers: $ct-include-classes !default; + +// Series names and colors. This can be extended or customized as desired. Just add more series and colors. +$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default; +$ct-series-colors: ( + $brand-info, + $brand-danger, + $brand-warning, + $brand-primary, + $brand-success, + $font-background-light-grey, + $gray-color, + $social-google, + $social-tumblr, + $social-youtube, + $social-twitter, + $social-pinterest, + $social-behance, + #6188e2, + #a748ca +) !default; diff --git a/dmp-frontend/src/assets/scss/core/mixins/_colored-shadows.scss b/dmp-frontend/src/assets/scss/core/mixins/_colored-shadows.scss new file mode 100644 index 000000000..416fc0b1b --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_colored-shadows.scss @@ -0,0 +1,138 @@ +@mixin shadow-big(){ + box-shadow: 0 16px 38px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 4), + 0 4px 25px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-big-image(){ + // new box shadow optimized for Tables and Phones + box-shadow: 0 5px 15px -8px rgba(0, 0, 0, $bmd-shadow-ambient-opacity * 2), + 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-big-navbar(){ + box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 3), + 0 3px 20px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +// @mixin shadow-big-color($color){ +// // new box shadow optimized for Tables and Phones +// box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2), +// 0 13px 24px -11px rgba($color, 0.60); +// } + +@mixin shadow-small-color($color){ + // new box shadow optimized for Tablets and Phones + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14), + 0 7px 10px -5px rgba($color, 0.4) +} + +@mixin shadow-navbar-color($color){ + // new box shadow optimized for Tablets and Phones + + @if($color == $white-color) { + box-shadow: 0 4px 18px 0px rgba(0, 0, 0, .12), + 0 7px 10px -5px rgba(0,0,0, 0.15); + }@else{ + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14), + 0 7px 12px -5px rgba($color, 0.46); + } +} + +@mixin shadow-2dp(){ + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), + 0 3px 1px -2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 1px 5px 0 rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-4dp(){ + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), + 0 1px 10px 0 rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 2px 4px -1px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-6dp(){ + box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), + 0 1px 18px 0 rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 3px 5px -1px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-8dp(){ + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), + 0 3px 14px 2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 5px 5px -3px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + + +@mixin shadow-16dp(){ + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), + 0 6px 30px 5px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-2dp-color($color){ + box-shadow: 0 2px 2px 0 rgba($color, $bmd-shadow-penumbra-opacity), + 0 3px 1px -2px rgba($color, $bmd-shadow-umbra-opacity), + 0 1px 5px 0 rgba($color, $bmd-shadow-ambient-opacity); +} + +@mixin shadow-4dp-color($color){ + box-shadow: 0 4px 5px 0 rgba($color, $bmd-shadow-penumbra-opacity), + 0 1px 10px 0 rgba($color, $bmd-shadow-ambient-opacity), + 0 2px 4px -1px rgba($color, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-8dp-color($color){ + box-shadow: 0 8px 10px 1px rgba($color, $bmd-shadow-penumbra-opacity), + 0 3px 14px 2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 5px 5px -3px rgba($color, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-16dp-color($color){ + box-shadow: 0 16px 24px 2px rgba($color, $bmd-shadow-penumbra-opacity), + 0 6px 30px 5px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba($color, $bmd-shadow-umbra-opacity); +} + +@mixin button-shadow-color($color){ + box-shadow: 0 14px 26px -12px rgba($color, $bmd-shadow-penumbra-opacity * 3), + 0 4px 23px 0px rgba(0,0,0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba($color, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-z-1(){ + box-shadow: + 0 1px 6px 0 rgba(0, 0, 0, 0.12), + 0 1px 6px 0 rgba(0, 0, 0, 0.12); +} + +@mixin shadow-z-1-hover(){ + box-shadow: + 0 5px 11px 0 rgba(0, 0, 0, 0.18), + 0 4px 15px 0 rgba(0, 0, 0, 0.15); +} + +@mixin shadow-z-2(){ + box-shadow: + 0 8px 17px 0 rgba(0, 0, 0, 0.2), + 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +@mixin shadow-z-3(){ + box-shadow: + 0 12px 15px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); +} + +@mixin shadow-z-4(){ + box-shadow: + 0 16px 28px 0 rgba(0, 0, 0, 0.22), + 0 25px 55px 0 rgba(0, 0, 0, 0.21); +} + +@mixin shadow-z-5(){ + box-shadow: + 0 27px 24px 0 rgba(0, 0, 0, 0.2), + 0 40px 77px 0 rgba(0, 0, 0, 0.22); +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_drawer.scss b/dmp-frontend/src/assets/scss/core/mixins/_drawer.scss new file mode 100644 index 000000000..9154fd152 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_drawer.scss @@ -0,0 +1,253 @@ +// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time + +@mixin bmd-drawer-x-out($size) { + @each $side, $abbrev in (left: l, right: r) { + .bmd-drawer-f-#{$abbrev} { + > .bmd-layout-drawer { + // position + top: 0; + #{$side}: 0; + + width: $size; + height: 100%; + + @if $side == left { + transform: translateX( + -$size - 10px + ); // initial position of drawer (closed), way off screen + } @else { + transform: translateX( + $size + 10px + ); // initial position of drawer (closed), way off screen + } + } + + > .bmd-layout-header, + > .bmd-layout-content { + margin-#{$side}: 0; + } + } + } +} + +@mixin bmd-drawer-y-out($size) { + @each $side, $abbrev in (top: t, bottom: b) { + .bmd-drawer-f-#{$abbrev} { + > .bmd-layout-drawer { + // position + #{$side}: 0; + left: 0; + + width: 100%; + height: $size; + + @if $side == top { + transform: translateY( + -$size - 10px + ); // initial position of drawer (closed), way off screen + } @else { + transform: translateY( + $size + 10px + ); // initial position of drawer (closed), way off screen + } + } + + > .bmd-layout-content { + margin-#{$side}: 0; + } + } + } +} + +@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") { + // e.g. &, &-sm, &-md, &-lg + $name: "&-#{$breakpoint}#{$suffix}"; + @if $breakpoint == xs { + $name: "&"; + } + @return $name; +} + +@mixin bmd-drawer-x-in($size) { + @each $side, $abbrev in (left: l, right: r) { + .bmd-drawer-f-#{$abbrev} { + // Push - drawer will push the header and content (default behavior) + > .bmd-layout-header { + width: calc(100% - #{$size}); + margin-#{$side}: $size; + } + + > .bmd-layout-drawer { + transform: translateX(0); + } + + > .bmd-layout-content { + margin-#{$side}: $size; + } + } + } +} + +@mixin bmd-drawer-y-in($size) { + @each $side, $abbrev in (top: t, bottom: b) { + .bmd-drawer-f-#{$abbrev} { + // 1. Push - drawer will push the header or content + > .bmd-layout-header { + @if $side == top { + // only add margin-top on a header when the drawer is at the top + margin-#{$side}: $size; + } + } + + > .bmd-layout-drawer { + transform: translateY(0); + } + + > .bmd-layout-content { + @if $side == bottom { + // only add margin-bottom on content when the drawer is at the bottom + margin-#{$side}: $size; + } + } + } + } +} + +// breakpoint based open to a particular size +@mixin bmd-drawer-x-in-up($size, $breakpoint) { + // e.g. &, &-sm, &-md, &-lg + $name: bmd-drawer-breakpoint-name($breakpoint, "-up"); + + .bmd-drawer-in { + #{unquote($name)} { + // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg + + @if $breakpoint == xs { + // bmd-drawer-in marker class (non-responsive) + @include bmd-drawer-x-in($size); + } @else { + // responsive class + @include media-breakpoint-up($breakpoint) { + // bmd-drawer-f-(left and right) styles + @include bmd-drawer-x-in($size); + } + } + } + } +} + +// breakpoint based open to a particular size +@mixin bmd-drawer-y-in-up($size, $breakpoint) { + // e.g. &, &-sm, &-md, &-lg + $name: bmd-drawer-breakpoint-name($breakpoint, "-up"); + + .bmd-drawer-in { + #{unquote($name)} { + // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg + + @if $breakpoint == xs { + // bmd-drawer-in marker class (non-responsive) + @include bmd-drawer-y-in($size); + } @else { + // responsive class + @include media-breakpoint-up($breakpoint) { + // bmd-drawer-f-(left and right) styles + @include bmd-drawer-y-in($size); + } + } + } + } +} + +@mixin bmd-drawer-x-overlay() { + @include bmd-layout-backdrop-in(); + + @each $side, $abbrev in (left: l, right: r) { + .bmd-drawer-f-#{$abbrev} { + > .bmd-layout-header, + > .bmd-layout-content { + width: 100%; + margin-#{$side}: 0; + } + } + } +} + +@mixin bmd-drawer-y-overlay() { + @include bmd-layout-backdrop-in(); + + @each $side, $abbrev in (top: t, bottom: b) { + .bmd-drawer-f-#{$abbrev} { + > .bmd-layout-header { + @if $side == top { + // only add margin-top on a header when the drawer is at the top + margin-#{$side}: 0; + } + } + + > .bmd-layout-content { + @if $side == bottom { + // only add margin-bottom on content when the drawer is at the bottom + margin-#{$side}: 0; + } + } + } + } +} + +// Overlay - left/right responsive overlay classes and marker class +@mixin bmd-drawer-x-overlay-down($breakpoint) { + // e.g. &, &-sm, &-md, &-lg + $name: bmd-drawer-breakpoint-name($breakpoint, "-down"); + + .bmd-drawer-overlay { + #{unquote($name)} { + // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg + + // x - left/right + + @if $breakpoint == xs { + // overlay marker class (non-responsive) + + // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the + // responsive bmd-drawer-in-* media queries above win (and overlay is ignored) + &.bmd-drawer-overlay { + @include bmd-drawer-x-overlay(); + } + } @else { + @include media-breakpoint-down($breakpoint) { + // overlay responsive class + @include bmd-drawer-x-overlay(); + } + } + } + } +} + +// Overlay - top/bottom responsive overlay classes and marker class +@mixin bmd-drawer-y-overlay-down($breakpoint) { + // e.g. &, &-sm, &-md, &-lg + $name: bmd-drawer-breakpoint-name($breakpoint, "-down"); + + .bmd-drawer-overlay { + #{unquote($name)} { + // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg + //// y - top/bottom + + @if $breakpoint == xs { + // overlay marker class (non-responsive) + + // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the + // responsive bmd-drawer-in-* media queries above win (and overlay is ignored) + &.bmd-drawer-overlay { + @include bmd-drawer-y-overlay(); + } + } @else { + @include media-breakpoint-down($breakpoint) { + // overlay responsive class + @include bmd-drawer-y-overlay(); + } + } + } + } +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_forms.scss b/dmp-frontend/src/assets/scss/core/mixins/_forms.scss new file mode 100644 index 000000000..412d31a90 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_forms.scss @@ -0,0 +1,394 @@ +@mixin bmd-disabled() { + fieldset[disabled][disabled] &, + &.disabled, + &:disabled, + &[disabled] { + @content; + } +} + +// Placeholder text +@mixin material-placeholder() { + &::-moz-placeholder {@content; } // Firefox + &:-ms-input-placeholder {@content; } // Internet Explorer 10+ + &::-webkit-input-placeholder {@content; } // Safari and Chrome +} + +@mixin bmd-selection-color() { + .radio label, + .radio-inline, + .checkbox label, + .checkbox-inline, + .switch label { + // override bootstrap focus and keep all the standard color (could be multiple radios in the form group) + //color: $bmd-label-color; + + &, + .is-focused & { + // form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused + color: $bmd-label-color; + + // correct the above focus color for disabled items + label:has(input[type=radio][disabled]), + // css 4 which is unlikely to work for a while, but no other pure css way. + label:has(input[type=checkbox][disabled]), + // css 4 + fieldset[disabled] & { + &, + &:hover, + &:focus { + color: $bmd-label-color; + } + } + } + } + + // Style for disabled inputs OLD, use color approach with opacity built in, see radios + //fieldset[disabled] &, + //fieldset[disabled] & input[type=checkbox], + //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before, + //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check, + //input[type=checkbox][disabled] + .bmd-radio-outer-circle { + // opacity: 0.5; + //} +} + +@mixin bmd-radio-color($color) { + &::after { + border-color: $color; + } + &::before { + background-color: $color; + } +} + + +@mixin bmd-form-color($label-color, $label-color-focus, $border-color, $line-color) { + [class^='bmd-label'], + [class*=' bmd-label'] { + color: $label-color; + } + + // override BS and keep the border-color normal/grey so that overlaid focus animation draws attention + .form-control { + // underline animation color on focus + $underline-background-image: linear-gradient( + to top, + $label-color-focus 2px, + fade-out($label-color-focus, 1) 2px + ), + linear-gradient( + to top, + $line-color 1px, + fade-out($line-color, 1) 1px + ); + $underline-background-image-invalid: linear-gradient( + to top, + $bmd-invalid-underline 2px, + fade-out($bmd-invalid-underline, 1) 2px + ), + linear-gradient( + to top, + $line-color 1px, + fade-out($line-color, 1) 1px + ); + $underline-background-image-readonly: linear-gradient( + to top, + $bmd-readonly-underline 1px, + fade-out($bmd-readonly-underline, 1) 1px + ), + linear-gradient( + to top, + $line-color 1px, + fade-out($line-color, 1) 1px + ); + $underline-background-image-disabled: linear-gradient( + to right, + $line-color 0%, + $line-color 30%, + transparent 30%, + transparent 100% + ); + + // bg image is always there, we just need to reveal it + &, + .is-focused & { + background-image: $underline-background-image; + } + + &:invalid { + background-image: $underline-background-image-invalid; + } + + &:read-only { + background-image: $underline-background-image-readonly; + } + + @include bmd-disabled() { + background-image: $underline-background-image-disabled; + background-repeat: repeat-x; + background-size: 3px 1px; + } + + // allow underline focus image and validation images to coexist + &.form-control-success { + &, + .is-focused & { + background-image: $underline-background-image, $form-icon-success; + } + } + &.form-control-warning { + &, + .is-focused & { + background-image: $underline-background-image, $form-icon-warning; + } + } + &.form-control-danger { + &, + .is-focused & { + background-image: $underline-background-image, $form-icon-danger; + } + } + } + + // may or may not be a form-group or bmd-form-group + .is-focused { + // on focus set borders and labels to the validation color + + // Use the BS provided mixin for the bulk of the color + @include form-validation-state("valid", $label-color); + + [class^='bmd-label'], + [class*=' bmd-label'] { + color: $label-color-focus; + } + + .bmd-label-placeholder { + color: $label-color; // keep the placeholder color + } + + // Set the border and box shadow on specific inputs to match + .form-control { + border-color: $border-color; + } + + // Set validation states also for addons + //.input-group-addon { + // border-color: $border-color; + //} + + .bmd-help { + color: $bmd-label-color-inner-focus; + } + } +} + +// must be broken out for reuse - webkit selector breaks firefox +@mixin bmd-label-static($label-top, $static-font-size) { + top: $label-top; + left: 0; + // must repeat because the previous (more generic) selectors + font-size: $static-font-size; +} + +@mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) { + $variant-input-height: ( + ($font-size * $variant-line-height) + ($variant-padding-y * 2) + ); + // $static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size); + $floating-font-size: 0.6875rem; + $static-font-size: 0.875rem; + $help-font-size: ($bmd-help-size-ratio * $font-size); + + $label-static-top: $label-top-margin; + $label-placeholder-top: $label-top-margin + $static-font-size + + $variant-padding-y; + + //@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} "; + + //Label height: 72dp + //Padding above label text: 16dp + //Padding between label and input text: 8dp + //Padding below input text (including divider): 16dp + //Padding below text divider: 8dp + + // @if $form-group-context { + // // Create a space at the top of the bmd-form-group for the label. + // // The label is absolutely positioned, so we use top padding to make space. This padding extends over the label down to the top of the input (padding). + // padding-top: ($label-top-margin + $static-font-size); + // // note: bottom-margin of this is determined by $spacer. @see _spacer.scss + // //margin-bottom: (1.5 * $help-font-size); + // } + + // TODO: remove this when known stable. https://github.com/FezVrasta/bootstrap-material-design/issues/849 + //@else { + // + // // for radios and checkboxes without a form-group, add some extra vertical spacing to pad down so that + // // any help text above is not encroached upon, or so that it appears more evenly spaced vs form-groups + // .radio, + // label.radio-inline, + // .checkbox, + // label.checkbox-inline, + // .switch { + // padding-top: $spacer-y; + // } + //} + + // Set all line-heights preferably to 1 so that we can space out everything manually without additional added space + // from the default line-height of 1.5 + .form-control, + label, + input::placeholder { + line-height: $variant-line-height + 0.1; + } + + label{ + color: $mdb-input-placeholder-color; + } + + .radio label, + label.radio-inline, + .checkbox label, + label.checkbox-inline, + .switch label { + line-height: $line-height-base; // keep the same line height for radios and checkboxes + } + + // Note: this may be inside or outside a form-group, may be .bmd-form-group.bmd-form-group-sm or .bmd-form-group.bmd-form-group-lg + // input::placeholder { + // font-size: $font-size; + // } + + // generic labels used anywhere in the form + .checkbox label, + .radio label, + label { + font-size: $font-size-sm; + } + + // floating/placeholder default (no focus) + .bmd-label-floating, + .bmd-label-placeholder { + //@debug "top: #{$label-as-placeholder-top}"; + top: $label-placeholder-top - 1.7; // place the floating label to look like a placeholder with input padding + } + + // floating focused/filled will look like static + .is-focused, + .is-filled { + .bmd-label-floating { + @include bmd-label-static($label-static-top - 2, $floating-font-size); + } + } + + // static + .bmd-label-static { + @include bmd-label-static($label-static-top - 0.65, $static-font-size); + } + // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 + //input:-webkit-autofill ~ .bmd-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary + // @include bmd-label-static($label-top, $static-font-size, $static-line-height); + //} + + .bmd-help { + margin-top: 0; // allow the input margin to set-off the top of the help-block + font-size: $help-font-size; + } + + // validation icon placement + .form-control { + &.form-control-success, + &.form-control-warning, + &.form-control-danger { + $icon-bg-size: ($variant-input-height * .5) ($variant-input-height * .5); + background-size: $bmd-form-control-bg-size, $icon-bg-size; + + &, + &:focus, + .bmd-form-group.is-focused & { + padding-right: ($input-padding-x * 3); + background-repeat: $bmd-form-control-bg-repeat-y, no-repeat; + background-position: $bmd-form-control-bg-position, + center right ($variant-input-height * .25); + } + + &:focus, + .bmd-form-group.is-focused & { + background-size: $bmd-form-control-bg-size-active, $icon-bg-size; + } + } + } +} + +@mixin mdb-label-color-toggle-focus(){ + // override bootstrap focus and keep all the standard color (could be multiple radios in the form group) + .form-group.is-focused & { + color: $mdb-label-color; + + // on focus just darken the specific labels, do not turn them to the brand-primary + &:hover, + &:focus { + color: $mdb-label-color-toggle-focus; + } + + // correct the above focus color for disabled items + fieldset[disabled] & { + color: $mdb-label-color; + } + } +} + +@mixin animation($value){ + -webkit-animation: $value; + -moz-animation: $value; + -o-animation: $value; + -ms-animation: $value; + animation: $value; +} + +@mixin transform-scale3d($value){ + -webkit-transform: scale3d($value); + -moz-transform: scale3d($value); + -o-transform: scale3d($value); + -ms-transform: scale3d($value); + transform: scale3d($value); +} + +@mixin create-colored-tags(){ + &.tag-primary{ + @include tag-color($brand-primary); + } + &.tag-info { + @include tag-color($brand-info); + } + &.tag-success{ + @include tag-color($brand-success); + } + &.tag-warning{ + @include tag-color($brand-warning); + } + &.tag-danger{ + @include tag-color($brand-danger); + } + &.tag-rose{ + @include tag-color($brand-rose); + } +} +@mixin tag-color ($color){ + .tag{ + background-color: $color; + color: $white-color; + .tagsinput-remove-link{ + color: $white-color; + } + } + .tagsinput-add{ + color: $color; + } +} + + +// variations(unquote(""), background-color, #FFF); +@mixin variations($component, $selector-suffix, $mdb-param-1, $color-default) { + // @include generic-variations($component, $selector-suffix, $color-default, "variations-content", $mdb-param-1); +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_hover.scss b/dmp-frontend/src/assets/scss/core/mixins/_hover.scss new file mode 100644 index 000000000..b3bf2e177 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_hover.scss @@ -0,0 +1,17 @@ +@mixin bmd-hover-focus-active { + // add the .active to the whole mix of hover-focus-active + &.active { + @content; + } + @include hover-focus-active() { + @content; + } +} + +@mixin transform-translate-y($value){ + -webkit-transform: translate3d(0,$value, 0); + -moz-transform: translate3d(0, $value, 0); + -o-transform: translate3d(0, $value, 0); + -ms-transform: translate3d(0, $value, 0); + transform: translate3d(0, $value, 0); +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_layout.scss b/dmp-frontend/src/assets/scss/core/mixins/_layout.scss new file mode 100644 index 000000000..059a89bdd --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_layout.scss @@ -0,0 +1,16 @@ +// Generates the `.in` style for the generic backdrop used components such as the drawer in overlay mode +@mixin bmd-layout-backdrop-in() { + > .bmd-layout-backdrop { + .in { + visibility: visible; + background-color: rgba(0, 0, 0, 0.5); + } + + @supports (pointer-events: auto) { + &.in { + pointer-events: auto; + opacity: 1; + } + } + } +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_navbar-colors.scss b/dmp-frontend/src/assets/scss/core/mixins/_navbar-colors.scss new file mode 100644 index 000000000..3756faf70 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_navbar-colors.scss @@ -0,0 +1,18 @@ +@mixin navbar-colors($color, $link-color) { + color: $link-color; + background-color: $color !important; + @include shadow-navbar-color($color); + + .dropdown-item:hover, + .dropdown-item:focus{ + @include shadow-small-color($color); + background-color: $color; + color: $link-color; + } + + .navbar-toggler{ + .navbar-toggler-icon{ + background-color: $link-color; + } + } +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_navs.scss b/dmp-frontend/src/assets/scss/core/mixins/_navs.scss new file mode 100644 index 000000000..e5e7ff5c1 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_navs.scss @@ -0,0 +1,61 @@ +@mixin bmd-tabs-color($color, $active-color, $active-border, $disabled-link-color, $disabled-link-hover-color) { + .nav-link { + color: $color; + + &.active { + color: $active-color; + border-color: $active-border; + @include hover-focus { + border-color: $active-border; + } + } + + // Disabled state lightens text and removes hover/tab effects + &.disabled { + color: $disabled-link-color; + + @include plain-hover-focus { + color: $disabled-link-hover-color; + } + } + } +} + +@mixin set-wizard-color($color) { + + .moving-tab{ + background-color: $color; + @include shadow-big-color($color); + } + + .picture{ + &:hover{ + border-color: $color; + } + } + + .choice{ + &:hover, + &.active{ + .icon{ + border-color: $color; + color: $color; + } + } + } + + + .checkbox input[type=checkbox]:checked + .checkbox-material{ + .check{ + background-color: $color; + } + } + + .radio input[type=radio]:checked ~ .check { + background-color: $color; + } + + .radio input[type=radio]:checked ~ .circle { + border-color: $color; + } +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_sidebar-color.scss b/dmp-frontend/src/assets/scss/core/mixins/_sidebar-color.scss new file mode 100644 index 000000000..224902e2d --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_sidebar-color.scss @@ -0,0 +1,58 @@ +@mixin sidebar-background-color($background-color, $font-color){ + .nav{ + .nav-item{ + .nav-link{ + color: $font-color; + } + i{ + color: rgba($font-color, .8); + } + + &.active, + &:hover{ + [data-toggle="collapse"]{ + color: $font-color; + i{ + color: rgba($font-color, .8); + } + } + } + } + } + .user{ + a{ + color: $font-color; + } + } + .simple-text{ + color: $font-color; + } + .sidebar-background:after{ + background: $background-color; + opacity: .8; + } +} + +@mixin sidebar-active-color($font-color){ + .nav{ + .nav-item{ + &.active > a:not([data-toggle="collapse"]){ + color: $font-color; + opacity: 1; + @include shadow-big-color($font-color); + + i{ + color: rgba($font-color, .8); + } + } + } + } +} + +@mixin set-background-color-button($color){ + + li.active > a{ + background-color: $color; + @include shadow-big-color($color); + } +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_transparency.scss b/dmp-frontend/src/assets/scss/core/mixins/_transparency.scss new file mode 100644 index 000000000..da32b745d --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_transparency.scss @@ -0,0 +1,20 @@ +// Opacity + +@mixin opacity($opacity) { + opacity: $opacity; + // IE8 filter + $opacity-ie: ($opacity * 100); + filter: #{alpha(opacity=$opacity-ie)}; +} + +@mixin black-filter($opacity){ + top: 0; + left: 0; + height: 100%; + width: 100%; + position: absolute; + background-color: rgba(17,17,17,$opacity); + display: block; + content: ""; + z-index: 1; +} \ No newline at end of file diff --git a/dmp-frontend/src/assets/scss/core/mixins/_type.scss b/dmp-frontend/src/assets/scss/core/mixins/_type.scss new file mode 100644 index 000000000..e81ca8938 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_type.scss @@ -0,0 +1,15 @@ +@mixin headings() { + h1, + h2, + h3, + h4, + h5, + h6 { + @content; + } +} + +// 14sp font +%std-font { + font-size: .875rem; +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_utilities.scss b/dmp-frontend/src/assets/scss/core/mixins/_utilities.scss new file mode 100644 index 000000000..f598748dc --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_utilities.scss @@ -0,0 +1,109 @@ +@function calc-top($line-height-base, $font-size, $component-height) { + @return (($line-height-base * $font-size) - $component-height) / 2; // vertical center of line-height +} + +// Emulate the less #contrast function +// TODO: this may be useful for the inverse theme, but if not, remove (it is unused after the removal of fullpalette) +// contrast-color and brightness borrowed from compass +// Copyright (c) 2009-2014 Christopher M. Eppstein +// Complies with license: https://github.com/Compass/compass/blob/stable/LICENSE.markdown +@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) { + @if $threshold { + // Deprecated in Compass 0.13 + @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release."; + } + + @if $color == null { + @return null; + } @else { + $color-brightness: brightness($color); + $dark-text-brightness: brightness($dark); + $light-text-brightness: brightness($light); + @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark); + } +} + +@function brightness($color) { + @if type-of($color) == color { + @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%; + } @else { + @return unquote("brightness(#{$color})"); + } +} + +@mixin linear-gradient($color1, $color2){ + background: $color1; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient(60deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(60deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(60deg, $color1, $color2); /* For Firefox 3.6 to 15 */ + background: linear-gradient(60deg, $color1 , $color2); /* Standard syntax */ +} + +@mixin radial-gradient($extern-color, $center-color){ + background: $extern-color; + background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */ + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */ + background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */ + background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */ + background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */ + background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */ + background-size: 550% 450%; +} +@mixin badges-color($color){ + .tag{ + background-color: $color; + color: $white-color; + + .tagsinput-remove-link{ + color: $white-color; + } + } + // .tagsinput-add{ + // color: $color; + // } +} +@mixin create-colored-badges(){ + + &.primary-badge{ + @include badges-color($brand-primary); + } + &.info-badge { + @include badges-color($brand-info); + } + &.success-badge{ + @include badges-color($brand-success); + } + &.warning-badge{ + @include badges-color($brand-warning); + } + &.danger-badge{ + @include badges-color($brand-danger); + } + &.rose-badge{ + @include badges-color($brand-rose); + } +} + +@mixin badge-color() { + &.badge-primary{ + background-color: $brand-primary; + } + &.badge-info { + background-color: $brand-info; + } + &.badge-success{ + background-color: $brand-success; + } + &.badge-warning{ + background-color: $brand-warning; + } + &.badge-danger{ + background-color: $brand-danger; + } + &.badge-rose{ + background-color: $brand-rose; + } + &.badge-default{ + background-color: $gray-light; + } +} diff --git a/dmp-frontend/src/assets/scss/core/mixins/_variables.scss b/dmp-frontend/src/assets/scss/core/mixins/_variables.scss new file mode 100644 index 000000000..e874d757e --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_variables.scss @@ -0,0 +1,25 @@ +//== Buttons +// +//## For each of Bootstrap's buttons, define text, background and border color. + +$opacity-gray-3: rgba(222,222,222, .3) !default; +$opacity-gray-5: rgba(222,222,222, .5) !default; +$opacity-gray-8: rgba(222,222,222, .8) !default; + +$opacity-5: rgba(255,255,255, .5) !default; +$opacity-8: rgba(255,255,255, .8) !default; + +$opacity-1: rgba(255,255,255, .1) !default; +$opacity-2: rgba(255,255,255, .2) !default; + +//== Components +// + +$topbar-x: topbar-x !default; +$topbar-back: topbar-back !default; +$bottombar-x: bottombar-x !default; +$bottombar-back: bottombar-back !default; + +// Sidebar variables +$sidebar-width: calc(100% - 260px) !default; +$sidebar-mini-width: calc(100% - 80px) !default; diff --git a/dmp-frontend/src/assets/scss/core/mixins/_vendor-prefixes.scss b/dmp-frontend/src/assets/scss/core/mixins/_vendor-prefixes.scss new file mode 100644 index 000000000..18ba5816a --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/mixins/_vendor-prefixes.scss @@ -0,0 +1,201 @@ +// User select +// For selecting text on the page + +@mixin user-select($select) { + -webkit-user-select: $select; + -moz-user-select: $select; + -ms-user-select: $select; // IE10+ + user-select: $select; +} + +@mixin box-shadow($shadow...) { + -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 + box-shadow: $shadow; +} + +// Box sizing +@mixin box-sizing($boxmodel) { + -webkit-box-sizing: $boxmodel; + -moz-box-sizing: $boxmodel; + box-sizing: $boxmodel; +} + + +@mixin transition-all($time, $type){ + -webkit-transition: all $time $type; + -moz-transition: all $time $type; + -o-transition: all $time $type; + -ms-transition: all $time $type; + transition: all $time $type; +} + +@mixin transform-scale($value){ + -webkit-transform: scale($value); + -moz-transform: scale($value); + -o-transform: scale($value); + -ms-transform: scale($value); + transform: scale($value); +} + +@mixin transform-translate-x($value){ + -webkit-transform: translate3d($value, 0, 0); + -moz-transform: translate3d($value, 0, 0); + -o-transform: translate3d($value, 0, 0); + -ms-transform: translate3d($value, 0, 0); + transform: translate3d($value, 0, 0); +} + +@mixin transform-translate-y($value){ + -webkit-transform: translate3d(0,$value,0); + -moz-transform: translate3d(0,$value,0); + -o-transform: translate3d(0,$value,0); + -ms-transform: translate3d(0,$value,0); + transform: translate3d(0,$value,0); +} + +@mixin transform-origin($coordinates){ + -webkit-transform-origin: $coordinates; + -moz-transform-origin: $coordinates; + -o-transform-origin: $coordinates; + -ms-transform-origin: $coordinates; + transform-origin: $coordinates; +} + +@mixin radial-gradient($extern-color, $center-color){ + background: $extern-color; + background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */ + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */ + background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */ + background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */ + background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */ + background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */ + background-size: 550% 450%; +} + +@mixin vertical-align { + position: relative; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +@mixin rotate-180(){ + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +@mixin bar-animation($type){ + -webkit-animation: $type 500ms linear 0s; + -moz-animation: $type 500ms linear 0s; + animation: $type 500ms 0s; + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +@mixin topbar-x-rotation(){ + @keyframes topbar-x { + 0% {top: 0px; transform: rotate(0deg); } + 45% {top: 6px; transform: rotate(145deg); } + 75% {transform: rotate(130deg); } + 100% {transform: rotate(135deg); } + } + @-webkit-keyframes topbar-x { + 0% {top: 0px; -webkit-transform: rotate(0deg); } + 45% {top: 6px; -webkit-transform: rotate(145deg); } + 75% {-webkit-transform: rotate(130deg); } + 100% { -webkit-transform: rotate(135deg); } + } + @-moz-keyframes topbar-x { + 0% {top: 0px; -moz-transform: rotate(0deg); } + 45% {top: 6px; -moz-transform: rotate(145deg); } + 75% {-moz-transform: rotate(130deg); } + 100% { -moz-transform: rotate(135deg); } + } +} + +@mixin topbar-back-rotation(){ + @keyframes topbar-back { + 0% { top: 6px; transform: rotate(135deg); } + 45% { transform: rotate(-10deg); } + 75% { transform: rotate(5deg); } + 100% { top: 0px; transform: rotate(0); } + } + + @-webkit-keyframes topbar-back { + 0% { top: 6px; -webkit-transform: rotate(135deg); } + 45% { -webkit-transform: rotate(-10deg); } + 75% { -webkit-transform: rotate(5deg); } + 100% { top: 0px; -webkit-transform: rotate(0); } + } + + @-moz-keyframes topbar-back { + 0% { top: 6px; -moz-transform: rotate(135deg); } + 45% { -moz-transform: rotate(-10deg); } + 75% { -moz-transform: rotate(5deg); } + 100% { top: 0px; -moz-transform: rotate(0); } + } +} + +@mixin bottombar-x-rotation(){ + @keyframes bottombar-x { + 0% {bottom: 0px; transform: rotate(0deg);} + 45% {bottom: 6px; transform: rotate(-145deg);} + 75% {transform: rotate(-130deg);} + 100% {transform: rotate(-135deg);} + } + @-webkit-keyframes bottombar-x { + 0% {bottom: 0px; -webkit-transform: rotate(0deg);} + 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} + 75% {-webkit-transform: rotate(-130deg);} + 100% {-webkit-transform: rotate(-135deg);} + } + @-moz-keyframes bottombar-x { + 0% {bottom: 0px; -moz-transform: rotate(0deg);} + 45% {bottom: 6px; -moz-transform: rotate(-145deg);} + 75% {-moz-transform: rotate(-130deg);} + 100% {-moz-transform: rotate(-135deg);} + } +} + +@mixin bottombar-back-rotation{ + @keyframes bottombar-back { + 0% { bottom: 6px;transform: rotate(-135deg);} + 45% { transform: rotate(10deg);} + 75% { transform: rotate(-5deg);} + 100% { bottom: 0px;transform: rotate(0);} + } + @-webkit-keyframes bottombar-back { + 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} + 45% {-webkit-transform: rotate(10deg);} + 75% {-webkit-transform: rotate(-5deg);} + 100% {bottom: 0px;-webkit-transform: rotate(0);} + } + @-moz-keyframes bottombar-back { + 0% {bottom: 6px;-moz-transform: rotate(-135deg);} + 45% {-moz-transform: rotate(10deg);} + 75% {-moz-transform: rotate(-5deg);} + 100% {bottom: 0px;-moz-transform: rotate(0);} + } + +} + +@mixin timeline-badge-color($color) { + background-color: $color; + @include shadow-big-color($color); +} + + +@mixin lock-page-input-color($color) { + &.lock-page{ + .form-group{ + .form-control{ + background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); + } + } + + } +} diff --git a/dmp-frontend/src/assets/scss/core/plugins/_animate.scss b/dmp-frontend/src/assets/scss/core/plugins/_animate.scss new file mode 100644 index 000000000..f54d7d8ee --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/plugins/_animate.scss @@ -0,0 +1,230 @@ + + + + + + + + + + + + + + + + + + + +// This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify + + + + + + + + + + + + + + + +@charset "UTF-8"; + +/* +Animate.css - http://daneden.me/animate +Licensed under the MIT license - http://opensource.org/licenses/MIT + +Copyright (c) 2015 Daniel Eden +*/ + +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +.animated.hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +.animated.bounceIn, +.animated.bounceOut { + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +.animated.flipOutX, +.animated.flipOutY { + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +@-webkit-keyframes shake { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +@keyframes shake { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +.shake { + -webkit-animation-name: shake; + animation-name: shake; +} + + + +@-webkit-keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} + + +@-webkit-keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +@-webkit-keyframes fadeOutDown { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +@keyframes fadeOutDown { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} + +@-webkit-keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +@keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} diff --git a/dmp-frontend/src/assets/scss/core/plugins/_chartist.scss b/dmp-frontend/src/assets/scss/core/plugins/_chartist.scss new file mode 100644 index 000000000..7693fb28b --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/plugins/_chartist.scss @@ -0,0 +1,328 @@ +@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) { + display: block; + position: relative; + width: $width; + + &:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: $ratio * 100%; + } + + &:after { + content: ""; + display: table; + clear: both; + } + + > svg { + display: block; + position: absolute; + top: 0; + left: 0; + } +} + +@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) { + -webkit-box-align: $ct-text-align; + -webkit-align-items: $ct-text-align; + -ms-flex-align: $ct-text-align; + align-items: $ct-text-align; + -webkit-box-pack: $ct-text-justify; + -webkit-justify-content: $ct-text-justify; + -ms-flex-pack: $ct-text-justify; + justify-content: $ct-text-justify; + // Fallback to text-align for non-flex browsers + @if($ct-text-justify == 'flex-start') { + text-align: left; + } @else if ($ct-text-justify == 'flex-end') { + text-align: right; + } @else { + text-align: center; + } +} + +@mixin ct-flex() { + // Fallback to block + display: block; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + +@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) { + fill: $ct-text-color; + color: $ct-text-color; + font-size: $ct-text-size; + line-height: $ct-text-line-height; +} + +@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) { + stroke: $ct-grid-color; + stroke-width: $ct-grid-width; + + @if ($ct-grid-dasharray) { + stroke-dasharray: $ct-grid-dasharray; + } +} + +@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) { + stroke-width: $ct-point-size; + stroke-linecap: $ct-point-shape; +} + +@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) { + fill: none; + stroke-width: $ct-line-width; + + @if ($ct-line-dasharray) { + stroke-dasharray: $ct-line-dasharray; + } +} + +@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) { + stroke: none; + fill-opacity: $ct-area-opacity; +} + +@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) { + fill: none; + stroke-width: $ct-bar-width; +} + +@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) { + fill: none; + stroke-width: $ct-donut-width; +} + +@mixin ct-chart-series-color($color) { + .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} { + stroke: $color; + } + + .#{$ct-class-slice-pie}, .#{$ct-class-slice-donut-solid}, .#{$ct-class-area} { + fill: $color; + } +} + +@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) { + + .#{$ct-class-label} { + @include ct-chart-label($ct-text-color, $ct-text-size); + } + + .#{$ct-class-chart-line} .#{$ct-class-label}, + .#{$ct-class-chart-bar} .#{$ct-class-label} { + @include ct-flex(); + } + + .#{$ct-class-chart-pie} .#{$ct-class-label}, + .#{$ct-class-chart-donut} .#{$ct-class-label} { + dominant-baseline: central; + } + + .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { + @include ct-align-justify(flex-end, flex-start); + // Fallback for browsers that don't support foreignObjects + text-anchor: start; + } + + .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { + @include ct-align-justify(flex-start, flex-start); + // Fallback for browsers that don't support foreignObjects + text-anchor: start; + } + + .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { + @include ct-align-justify(flex-end, flex-end); + // Fallback for browsers that don't support foreignObjects + text-anchor: end; + } + + .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { + @include ct-align-justify(flex-end, flex-start); + // Fallback for browsers that don't support foreignObjects + text-anchor: start; + } + + .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { + @include ct-align-justify(flex-end, center); + // Fallback for browsers that don't support foreignObjects + text-anchor: start; + } + + .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { + @include ct-align-justify(flex-start, center); + // Fallback for browsers that don't support foreignObjects + text-anchor: start; + } + + .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { + @include ct-align-justify(flex-end, flex-start); + // Fallback for browsers that don't support foreignObjects + text-anchor: start; + } + + .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { + @include ct-align-justify(flex-start, flex-start); + // Fallback for browsers that don't support foreignObjects + text-anchor: start; + } + + .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { + //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify); + @include ct-align-justify(center, flex-end); + // Fallback for browsers that don't support foreignObjects + text-anchor: end; + } + + .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { + @include ct-align-justify(center, flex-start); + // Fallback for browsers that don't support foreignObjects + text-anchor: end; + } + + .#{$ct-class-grid} { + @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray); + } + + .#{$ct-class-grid-background} { + fill: $ct-grid-background-fill; + } + + .#{$ct-class-point} { + @include ct-chart-point($ct-point-size, $ct-point-shape); + } + + .#{$ct-class-line} { + @include ct-chart-line($ct-line-width); + } + + .#{$ct-class-area} { + @include ct-chart-area(); + } + + .#{$ct-class-bar} { + @include ct-chart-bar($ct-bar-width); + } + + .#{$ct-class-slice-donut} { + @include ct-chart-donut($ct-donut-width); + } + + @if $ct-include-colored-series { + @for $i from 0 to length($ct-series-names) { + .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} { + $color: nth($ct-series-colors, $i + 1); + + @include ct-chart-series-color($color); + } + } + } +} +// +// @if $ct-include-classes { +// @include ct-chart(); +// +// @if $ct-include-alternative-responsive-containers { +// @for $i from 0 to length($ct-scales-names) { +// .#{nth($ct-scales-names, $i + 1)} { +// @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1)); +// } +// } +// } +// } + + +.ct-chart{ + .ct-series-a .ct-point, + .ct-series-a .ct-line, + .ct-series-a .ct-bar, + .ct-series-a .ct-slice-donut, + .ct-series-a .ct-slice-pie, + .ct-series-a .ct-slice-donut-solid, + .ct-series-a .ct-area { + stroke: #00bcd4; + } + .ct-series-b .ct-point, + .ct-series-b .ct-line, + .ct-series-b .ct-bar, + .ct-series-b .ct-slice-donut, + .ct-series-b .ct-slice-pie, + .ct-series-b .ct-slice-donut-solid, + .ct-series-b .ct-area { + stroke: #f44336; + } + + .ct-series-c .ct-point, + .ct-series-c .ct-line, + .ct-series-c .ct-bar, + .ct-series-c .ct-slice-donut, + .ct-series-c .ct-slice-pie, + .ct-series-c .ct-slice-donut-solid, + .ct-series-c .ct-area { + stroke: #ff9800; + } + + .ct-bar { + fill: none; + stroke-width: 10px; + } + + .ct-line { + fill: none; + stroke-width: 4px; + } + + .ct-point { + stroke-width: 10px; + stroke-linecap: round; + } + + .ct-grid { + stroke: rgba(0, 0, 0, 0.2); + stroke-width: 1px; + stroke-dasharray: 2px; + } + .ct-label { + fill: rgba(0, 0, 0, 0.4); + color: rgba(0, 0, 0, 0.4); + display: -webkit-flex; + display: flex; + } + + .ct-label.ct-vertical.ct-start { + -webkit-box-align: flex-end; + -webkit-align-items: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; + -webkit-box-pack: flex-end; + -webkit-justify-content: flex-end; + -ms-flex-pack: flex-end; + justify-content: flex-end; + text-align: right; + text-anchor: end; + } + + .ct-series-a .ct-slice-pie, + .ct-series-a .ct-slice-donut-solid, + .ct-series-a .ct-area{ + fill: #00bcd4; + } + .ct-series-b .ct-slice-pie, + .ct-series-b .ct-slice-donut-solid, + .ct-series-b .ct-area{ + fill: #f44336; + } + + .ct-series-c .ct-slice-pie, + .ct-series-c .ct-slice-donut-solid, + .ct-series-c .ct-area{ + fill: #ff9800; + } +} diff --git a/dmp-frontend/src/assets/scss/core/plugins/_perfect-scrollbar.scss b/dmp-frontend/src/assets/scss/core/plugins/_perfect-scrollbar.scss new file mode 100644 index 000000000..dbae09463 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/plugins/_perfect-scrollbar.scss @@ -0,0 +1,113 @@ +/* perfect-scrollbar v0.6.13 */ +.ps-container { + -ms-touch-action: auto; + touch-action: auto; + overflow: hidden !important; + -ms-overflow-style: none; } + @supports (-ms-overflow-style: none) { + .ps-container { + overflow: auto !important; } } + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .ps-container { + overflow: auto !important; } } + .ps-container.ps-active-x > .ps-scrollbar-x-rail, + .ps-container.ps-active-y > .ps-scrollbar-y-rail { + display: block; + background-color: transparent; } + .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { + background-color: #eee; + opacity: 0.9; } + .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { + background-color: #999; + height: 11px; } + .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { + background-color: #eee; + opacity: 0.9; } + .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { + background-color: #999; + width: 11px; } + .ps-container > .ps-scrollbar-x-rail { + display: none; + position: absolute; + /* please don't change 'position' */ + opacity: 0; + -webkit-transition: background-color .2s linear, opacity .2s linear; + -o-transition: background-color .2s linear, opacity .2s linear; + -moz-transition: background-color .2s linear, opacity .2s linear; + transition: background-color .2s linear, opacity .2s linear; + bottom: 0px; + /* there must be 'bottom' for ps-scrollbar-x-rail */ + height: 15px; } + .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { + position: absolute; + /* please don't change 'position' */ + background-color: #aaa; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; + -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; + -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; + bottom: 2px; + /* there must be 'bottom' for ps-scrollbar-x */ + height: 6px; } + .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x { + height: 11px; } + .ps-container > .ps-scrollbar-y-rail { + display: none; + position: absolute; + /* please don't change 'position' */ + opacity: 0; + -webkit-transition: background-color .2s linear, opacity .2s linear; + -o-transition: background-color .2s linear, opacity .2s linear; + -moz-transition: background-color .2s linear, opacity .2s linear; + transition: background-color .2s linear, opacity .2s linear; + right: 0; + /* there must be 'right' for ps-scrollbar-y-rail */ + width: 15px; } + .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { + position: absolute; + /* please don't change 'position' */ + background-color: #aaa; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out; + -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; + -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out; + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out; + right: 2px; + /* there must be 'right' for ps-scrollbar-y */ + width: 6px; } + .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y { + width: 11px; } + .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { + background-color: #eee; + opacity: 0.9; } + .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { + background-color: #999; + height: 11px; } + .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { + background-color: #eee; + opacity: 0.9; } + .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { + background-color: #999; + width: 11px; } + .ps-container:hover > .ps-scrollbar-x-rail, + .ps-container:hover > .ps-scrollbar-y-rail { + opacity: 0.6; } + .ps-container:hover > .ps-scrollbar-x-rail:hover { + background-color: #eee; + opacity: 0.9; } + .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { + background-color: #999; } + .ps-container:hover > .ps-scrollbar-y-rail:hover { + background-color: #eee; + opacity: 0.9; } + .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { + background-color: #999; } diff --git a/dmp-frontend/src/assets/scss/core/variables/_body.scss b/dmp-frontend/src/assets/scss/core/variables/_body.scss new file mode 100644 index 000000000..5f1da1e50 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_body.scss @@ -0,0 +1,6 @@ +// Body +// +// Settings for the `` element. + +$body-bg: #fafafa !default; +//$body-color: $gray-dark !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_bootstrap-material-design-base.scss b/dmp-frontend/src/assets/scss/core/variables/_bootstrap-material-design-base.scss new file mode 100644 index 000000000..d6d8bdc00 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_bootstrap-material-design-base.scss @@ -0,0 +1,33 @@ +$gray-lighter: rgba($black, 0.12) !default; +$gray-light: #999 !default; +$gray-alpha: .54 !default; +$gray: #555 !default; // spec color +$gray-dark: rgba($black, 0.87) !default; // used for text color - others use grey-600 which is considerably lighter + +$bmd-font-weight-base: 400; + +// wondering if any of these could still be refactored out, but are definitely in use. +$bmd-inverse: rgba($white, 1) !default; +$bmd-inverse-light: rgba($white, 0.84) !default; +$bmd-inverse-lighter: rgba($white, 0.54) !default; + +$bmd-label-color: $gray-color !default; +$bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary + +$border-radius-base: 3px !default; +$border-radius-small: 2px !default; +$border-radius-large: 6px !default; +$border-radius-huge: 10px !default; +$border-radius-label: 12px !default; +$border-radius-extreme: 30px !default; + +// Typography elements +$mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; +$mdb-text-color-light: $white !default; +$mdb-text-color-light-hex: $white !default; // for contrast function in inverse +$mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default; +$mdb-text-color-primary-hex: $black !default; // for contrast function in inverse +$icon-color: rgba(0,0,0,0.5) !default; + +$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default; +$mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_bootstrap-material-design.scss b/dmp-frontend/src/assets/scss/core/variables/_bootstrap-material-design.scss new file mode 100644 index 000000000..f9a2a0943 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_bootstrap-material-design.scss @@ -0,0 +1,235 @@ +$bmd-label-color-focus: $brand-primary !default; +$bmd-invalid-underline: $brand-danger !default; +$bmd-readonly-underline: $input-border-color !default; + +//--- +// verified in use with refactoring to v4 + +//--- +//-- unverified below here +$bmd-brand-inverse: $indigo !default; +// Typography elements FIXME: review to see if we actually need these +$icon-color: rgba($black, 0.5) !default; + +// -------------------- +// inputs +$mdb-input-placeholder-color: #AAAAAA !default; +$mdb-input-underline-color: #D2D2D2 !default; + +$mdb-input-font-size-base: 14px !default; +$mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px +$mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px + +$bmd-bmd-label-static-size-ratio: 75 / 100 !default; +$bmd-help-size-ratio: 75 / 100 !default; + +$bmd-form-control-bg-repeat-y: no-repeat !default; +$bmd-form-control-bg-position: center bottom, center calc(100% - 1px) !default; +$bmd-form-control-bg-size: 0 100%, 100% 100% !default; +$bmd-form-control-bg-size-active: 100% 100%, 100% 100% !default; + +// expandable +$input-text-button-size: 32px !default; + +// sizing +$bmd-form-line-height: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec. +$bmd-label-top-margin-base: 1rem !default; + +$bmd-form-line-height-lg: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec. +$bmd-label-top-margin-lg: 1rem !default; // 16px + +$bmd-form-line-height-sm: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec. +$bmd-label-top-margin-sm: .75rem !default; // 12px + +$text-disabled: #a8a8a8 !default; +$background-disabled: #eaeaea !default; + +$margin-base: 1.071rem !default; + + +// Checkboxes +$bmd-checkbox-size: 1.25rem !default; +$bmd-checkbox-animation-ripple: 500ms !default; +$bmd-checkbox-animation-check: 0.3s !default; +$bmd-checkbox-checked-color: $white !default; +$bmd-checkbox-label-padding: .3125rem !default; // 5px +$checkboxes-text-color: $mdb-input-placeholder-color !default; + +$bmd-checkbox-border-size: .0625rem !default; +$bmd-checkbox-border-color: $bmd-label-color-inner-focus !default; +$bmd-checkbox-border-color-disabled: $gray-lighter !default; //#bdbdbd !default; + +// Toggle +$mdb-toggle-label-color: $mdb-label-color !default; + +// Variables for datetimepicker // +$padding-default-vertical: 10px !default; +$medium-pale-bg: #F1EAE0 !default; +$pale-bg: #F9F7F3 !default; + + +$font-color: #66615b !default; + +// $brand-default: #cecece !default; +// $brand-primary: $purple !default; +// $brand-success: $green !default; +// $brand-danger: $red !default; +// $brand-warning: $orange !default; +// $brand-info: $cyan !default; +// $brand-rose: $pink !default; + +$black-color: #3C4858 !default; + +// Dropdowns + +$dropdown-item-padding-y: .625rem; +$dropdown-item-padding-x: 1.25rem; +$dropdown-header-padding-y: 0.1875rem; +$bmd-dropdown-margin-y: .3125rem !default; +$bmd-dropdown-header-color: #777 !default; +$bmd-dropdown-link-color: #333 !default; + +// Switches +$bmd-switch-label-padding: .3125rem !default; // 5px +$bmd-switch-width: 2.125rem !default; // 34px +$bmd-switch-height: .875rem !default; // 14px +$bmd-switch-handle-size: 1.25rem !default; // 20px (was 18px) + +$bmd-switch-handle-checked-bg: $brand-primary !default; +$bmd-switch-handle-unchecked-bg: #f1f1f1 !default; +$bmd-switch-handle-disabled-bg: #bdbdbd !default; +$bmd-switch-unchecked-bg: $gray-lighter !default; +$bmd-switch-checked-bg: desaturate( + lighten($bmd-switch-handle-checked-bg, 28%), + 32% +); // kind of magic recipe +$bmd-switch-disabled-bg: $gray-lighter !default; + +// Popovers and Popups +$bmd-popover-background: rgba(101, 101, 101, 0.9) !default; +$bmd-popover-color: #ececec !default; + +// Radio: +$bmd-radio-border: .0625rem !default; // 1px +$bmd-radio-size: 1rem !default; +$bmd-radio-ripple-offset: 1em !default; +$bmd-radio-label-padding: .3125rem !default; // 5px + +$bmd-radio-color-off: $bmd-label-color-inner-focus !default; +$bmd-radio-color-on: $brand-primary !default; +$bmd-radio-color-disabled: $gray-lighter; // +$bmd-radio-color-disabled-inverse: rgba( + $white, + 0.30 +); // dark theme spec: Disabled: #FFFFFF, Opacity 30% + +$white-color: #fff !default; +$navbar-color: #555 !default; +$pills-color: $navbar-color !default; +$black-color: #3C4858 !default; +$link-color: $brand-primary; +$white-transparent: rgba($white-color, .8); +$transparent: transparent; + +//Popovers +$popover-color: $navbar-color !default; + +//Tooltips +$tooltip-font-size: 0.75rem !default; + +// Background colors +$bg-primary: $brand-primary; +$bg-danger: $brand-danger; +$bg-warning: $brand-warning; +$bg-info: $brand-info; +$bg-rose: $brand-rose; +$bg-success: $brand-success; +$bg-dark: $grey-900; + +//Paddings +$padding-general-y: 0.625rem !default; +$padding-general-x: 0.9375rem !default; +$padding-card-body-y: 0.9375rem !default; +$padding-card-body-x: 1.875rem !default; + +// Buttons: +$mdb-btn-font-size-base: 12px !default; +$mdb-btn-font-size-lg: 14px !default; +$mdb-btn-font-size-sm: 11px !default; +$mdb-btn-font-size-xs: 10px !default; + +$mdb-btn-fab-size: 41px !default; +$mdb-btn-fab-size-lg: 56px !default; +$mdb-btn-fab-size-mini: 29px !default; +$mdb-btn-fab-font-size: 24px !default; +$mdb-btn-just-icon-font-size: 20px !default; + +$mdb-btn-icon-size: 32px !default; +$mdb-btn-icon-size-mini: 17px !default; + +$bmd-line-height: 1.42857143 !default; +$btn-lg-line-height: 1.3333333 !default; + +//Font-weight +$font-weight-light: 300 !default; +$font-weight-default: 400 !default; +$font-weight-bold: 500 !default; +$font-weight-extra-bold: 700 !default; +$font-weight-ultra-bold: 900 !default; + +//Border-radius +$border-radius-base: 3px !default; +$border-radius-small: 2px !default; +$border-radius-large: 6px !default; +$border-radius-huge: 10px !default; +$border-radius-label: 12px !default; +$border-radius-extreme: 30px !default; + +// Animations +$bmd-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default; +$bmd-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default; +$bmd-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default; +$bmd-animation-curve-default: $bmd-animation-curve-fast-out-slow-in !default; +$bmd-animation-dropdown-caret: 150ms !default; +$general-transition-time: 300ms !default; + +$slow-transition-time: 370ms !default; +$fast-transition-time: 150ms !default; + +$transition-linear: linear !default; +$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; +$transition-bezier-rotating-card: cubic-bezier(0.34, 1.45, 0.7, 1) !default; +$transition-ease: ease 0s; + +//variables for social +$social-facebook: #3b5998; +$social-twitter: #55acee; +$social-pinterest: #cc2127; +$social-google: #dd4b39; +$social-linkedin: #0976b4; +$social-dribbble: #ea4c89; +$social-github: #333333; +$social-youtube: #e52d27; +$social-instagram: #125688; +$social-reddit: #ff4500; +$social-tumblr: #35465c; +$social-behance: #1769ff; + + +// Variables for checkboxes + +$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default; +$mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default; + +$mdb-checkbox-size: 20px !default; +$mdb-checkbox-animation-ripple: 500ms !default; +$mdb-checkbox-animation-check: 0.3s !default; +$mdb-checkbox-checked-color: $brand-primary !default; + +$mdb-checkbox-label-color: $mdb-label-color !default; +$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default; + +// Radio: +$mdb-radio-label-color: $mdb-label-color !default; +$mdb-radio-color-off: $mdb-label-color-toggle-focus !default; +$mdb-radio-color-on: $brand-primary !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_brand.scss b/dmp-frontend/src/assets/scss/core/variables/_brand.scss new file mode 100644 index 000000000..4a9a39cfe --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_brand.scss @@ -0,0 +1,12 @@ +// Bootstrap brand color customization + + +/* brand Colors */ + +$brand-primary: $purple-500 !default; +$brand-info: $cyan-500 !default; +$brand-success: $green-500 !default; +$brand-warning: $orange-500 !default; +$brand-danger: $red-500 !default; +$brand-rose: $pink-500 !default; +$brand-inverse: $black-color !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_buttons.scss b/dmp-frontend/src/assets/scss/core/variables/_buttons.scss new file mode 100644 index 000000000..b917123e5 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_buttons.scss @@ -0,0 +1,88 @@ +// Buttons: +$bmd-btn-font-size: .875rem !default; // 14px +$bmd-btn-font-size-lg: 1.25rem !default; +$bmd-btn-font-size-sm: .6875rem !default; // 11px +$bmd-btn-margin-bottom: .3125rem !default; // 5px + +// default btn with no specific type designation +$bmd-btn-color: $gray-dark !default; +$bmd-btn-bg: transparent !default; //$body-bg !default; // #fff +$bmd-btn-border: #ccc !default; + +$bmd-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999 +$bmd-btn-active-bg: rgba(#999, .40) !default; // spec: bg Pressed: 40% #999999 +$bmd-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black + +$bmd-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC +$bmd-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC +$bmd-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white + +$bmd-btn-fab-size: 3.5rem !default; // 56px +$bmd-btn-fab-size-sm: 2.5rem !default; // 40px +$bmd-btn-fab-font-size: 1.5rem !default; // 24px + +// icons +$bmd-btn-icon-size: 2rem !default; // 32px +$bmd-btn-icon-size-sm: (.75 * $bmd-btn-icon-size) !default; // ~24px +$bmd-btn-icon-font-size-sm: (.75 * $bmd-btn-fab-font-size) !default; + +// Buttons +// +// For each of Bootstrap's buttons, define text, background and border color. +$input-btn-padding-x: 1rem !default; // 1rem +$input-btn-padding-y: .46875rem !default; // .5rem achieve a 36dp height +//$input-btn-line-height: 1 !default; //1.25 +$btn-font-weight: 400 !default; // normal +$btn-box-shadow: none !default; +$btn-active-box-shadow: none !default; // inset 0 3px 5px rgba(0,0,0,.125) + +// +$btn-primary-color: #fff !default; +$btn-primary-bg: $brand-primary !default; +$btn-primary-border-color: $btn-primary-bg !default; +// +$btn-secondary-color: $gray-dark !default; +$btn-secondary-bg: $body-bg !default; // #fff +$btn-secondary-border-color: #ccc !default; +// +$btn-info-color: #fff !default; +$btn-info-bg: $brand-info !default; +$btn-info-border-color: $btn-info-bg !default; +// +$btn-success-color: #fff !default; +$btn-success-bg: $brand-success !default; +$btn-success-border-color: $btn-success-bg !default; +// +$btn-warning-color: #fff !default; +$btn-warning-bg: $brand-warning !default; +$btn-warning-border-color: $btn-warning-bg !default; +// +$btn-danger-color: #fff !default; +$btn-danger-bg: $brand-danger !default; +$btn-danger-border-color: $btn-danger-bg !default; + +$btn-rose-color: #fff !default; +$btn-rose-bg: $brand-rose !default; +$btn-rose-border-color: $btn-rose-bg !default; + +$btn-default-color: #fff !default; +$btn-default-bg: $gray-color !default; +$btn-default-border-color: $btn-default-bg !default; +// +$btn-link-disabled-color: $gray-light !default; +// +$input-btn-padding-x-sm: 1.25rem !default; +$input-btn-padding-y-sm: .40625rem !default; // achieve a 32dp height was .25rem + +$input-btn-padding-y-lg: 1.125rem !default; +$input-btn-padding-x-lg: 2.25rem !default; + +// +//$input-btn-padding-x-lg: 1.5rem !default; +//$input-btn-padding-y-lg: .75rem !default; +// +//// Allows for customizing button radius independently from global border radius +//$btn-border-radius: $border-radius !default; +//$btn-border-radius-lg: $border-radius-lg !default; +$btn-border-radius-sm: .1875rem !default; +$border-radius-extreme: 2rem !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_card.scss b/dmp-frontend/src/assets/scss/core/variables/_card.scss new file mode 100644 index 000000000..af8e1bc5d --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_card.scss @@ -0,0 +1,20 @@ +// Cards +//$card-spacer-x: 1.25rem !default; +//$card-spacer-y: .75rem !default; +//$card-border-width: 1px !default; +//$card-border-radius: $border-radius !default; +$card-border-color: $gray-lighter !default; // #e5e5e5 +//$card-border-radius-inner: $card-border-radius !default; +$card-bg: #fff !default; +$card-cap-bg: $card-bg !default; // #f5f5f5 +// +//$card-link-hover-color: #fff !default; +// +//$card-deck-margin: .625rem !default; +// Card +$mdb-card-body-text: $mdb-text-color-primary !default; +$mdb-card-body-background: #fff !default; +$mdb-card-image-headline: #fff !default; + +$text-disabled: #a8a8a8 !default; +$background-disabled: #eaeaea !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_code.scss b/dmp-frontend/src/assets/scss/core/variables/_code.scss new file mode 100644 index 000000000..fc51fda66 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_code.scss @@ -0,0 +1,3 @@ +// Code + +$code-bg: $grey-200 !default; // #f7f7f9 !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_colors-map.scss b/dmp-frontend/src/assets/scss/core/variables/_colors-map.scss new file mode 100644 index 000000000..b20e34adf --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_colors-map.scss @@ -0,0 +1,311 @@ +// these might be useful in a switch to sass...at some point. + +//$bmd-colors: ( +// "red": $red, +// "pink": $pink, +// "purple": $purple, +// "deep-purple": $deep-purple, +// "indigo": $indigo, +// "blue": $blue, +// "light-blue": $light-blue, +// "cyan": $cyan, +// "teal": $teal, +// "green": $green, +// "light-green": $light-green, +// "lime": $lime, +// "yellow": $yellow, +// "amber": $amber, +// "orange": $orange, +// "deep-orange": $deep-orange, +// "brown": $brown, +// "grey": $grey, +// "blue-grey": $blue-grey +//); +// +//$bmd-colors-map: ( +// "red-50": (name: "red", color: $red-50, number: "-50"), +// "red-100": (name: "red", color: $red-100, number: "-100"), +// "red-200": (name: "red", color: $red-200, number: "-200"), +// "red-300": (name: "red", color: $red-300, number: "-300"), +// "red-400": (name: "red", color: $red-400, number: "-400"), +// "red-500": (name: "red", color: $red-500, number: "-500"), +// "red-600": (name: "red", color: $red-600, number: "-600"), +// "red-700": (name: "red", color: $red-700, number: "-700"), +// "red-800": (name: "red", color: $red-800, number: "-800"), +// "red-900": (name: "red", color: $red-900, number: "-900"), +// "red-a100": (name: "red", color: $red-a100, number: "-a100"), +// "red-a200": (name: "red", color: $red-a200, number: "-a200"), +// "red-a400": (name: "red", color: $red-a400, number: "-a400"), +// "red-a700": (name: "red", color: $red-a700, number: "-a700"), +// "red": (name: "red", color: $red, number: ""), +// "pink-50": (name: "pink", color: $pink-50, number: "-50"), +// "pink-100": (name: "pink", color: $pink-100, number: "-100"), +// "pink-200": (name: "pink", color: $pink-200, number: "-200"), +// "pink-300": (name: "pink", color: $pink-300, number: "-300"), +// "pink-400": (name: "pink", color: $pink-400, number: "-400"), +// "pink-500": (name: "pink", color: $pink-500, number: "-500"), +// "pink-600": (name: "pink", color: $pink-600, number: "-600"), +// "pink-700": (name: "pink", color: $pink-700, number: "-700"), +// "pink-800": (name: "pink", color: $pink-800, number: "-800"), +// "pink-900": (name: "pink", color: $pink-900, number: "-900"), +// "pink-a100": (name: "pink", color: $pink-a100, number: "-a100"), +// "pink-a200": (name: "pink", color: $pink-a200, number: "-a200"), +// "pink-a400": (name: "pink", color: $pink-a400, number: "-a400"), +// "pink-a700": (name: "pink", color: $pink-a700, number: "-a700"), +// "pink": (name: "pink", color: $pink, number: ""), +// "purple-50": (name: "purple", color: $purple-50, number: "-50"), +// "purple-100": (name: "purple", color: $purple-100, number: "-100"), +// "purple-200": (name: "purple", color: $purple-200, number: "-200"), +// "purple-300": (name: "purple", color: $purple-300, number: "-300"), +// "purple-400": (name: "purple", color: $purple-400, number: "-400"), +// "purple-500": (name: "purple", color: $purple-500, number: "-500"), +// "purple-600": (name: "purple", color: $purple-600, number: "-600"), +// "purple-700": (name: "purple", color: $purple-700, number: "-700"), +// "purple-800": (name: "purple", color: $purple-800, number: "-800"), +// "purple-900": (name: "purple", color: $purple-900, number: "-900"), +// "purple-a100": (name: "purple", color: $purple-a100, number: "-a100"), +// "purple-a200": (name: "purple", color: $purple-a200, number: "-a200"), +// "purple-a400": (name: "purple", color: $purple-a400, number: "-a400"), +// "purple-a700": (name: "purple", color: $purple-a700, number: "-a700"), +// "purple": (name: "purple", color: $purple, number: ""), +// "deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"), +// "deep-purple-100": (name: "deep-purple", color: $deep-purple-100, number: "-100"), +// "deep-purple-200": (name: "deep-purple", color: $deep-purple-200, number: "-200"), +// "deep-purple-300": (name: "deep-purple", color: $deep-purple-300, number: "-300"), +// "deep-purple-400": (name: "deep-purple", color: $deep-purple-400, number: "-400"), +// "deep-purple-500": (name: "deep-purple", color: $deep-purple-500, number: "-500"), +// "deep-purple-600": (name: "deep-purple", color: $deep-purple-600, number: "-600"), +// "deep-purple-700": (name: "deep-purple", color: $deep-purple-700, number: "-700"), +// "deep-purple-800": (name: "deep-purple", color: $deep-purple-800, number: "-800"), +// "deep-purple-900": (name: "deep-purple", color: $deep-purple-900, number: "-900"), +// "deep-purple-a100": (name: "deep-purple", color: $deep-purple-a100, number: "-a100"), +// "deep-purple-a200": (name: "deep-purple", color: $deep-purple-a200, number: "-a200"), +// "deep-purple-a400": (name: "deep-purple", color: $deep-purple-a400, number: "-a400"), +// "deep-purple-a700": (name: "deep-purple", color: $deep-purple-a700, number: "-a700"), +// "deep-purple": (name: "deep-purple", color: $deep-purple, number: ""), +// "indigo-50": (name: "indigo", color: $indigo-50, number: "-50"), +// "indigo-100": (name: "indigo", color: $indigo-100, number: "-100"), +// "indigo-200": (name: "indigo", color: $indigo-200, number: "-200"), +// "indigo-300": (name: "indigo", color: $indigo-300, number: "-300"), +// "indigo-400": (name: "indigo", color: $indigo-400, number: "-400"), +// "indigo-500": (name: "indigo", color: $indigo-500, number: "-500"), +// "indigo-600": (name: "indigo", color: $indigo-600, number: "-600"), +// "indigo-700": (name: "indigo", color: $indigo-700, number: "-700"), +// "indigo-800": (name: "indigo", color: $indigo-800, number: "-800"), +// "indigo-900": (name: "indigo", color: $indigo-900, number: "-900"), +// "indigo-a100": (name: "indigo", color: $indigo-a100, number: "-a100"), +// "indigo-a200": (name: "indigo", color: $indigo-a200, number: "-a200"), +// "indigo-a400": (name: "indigo", color: $indigo-a400, number: "-a400"), +// "indigo-a700": (name: "indigo", color: $indigo-a700, number: "-a700"), +// "indigo": (name: "indigo", color: $indigo, number: ""), +// "blue-50": (name: "blue", color: $blue-50, number: "-50"), +// "blue-100": (name: "blue", color: $blue-100, number: "-100"), +// "blue-200": (name: "blue", color: $blue-200, number: "-200"), +// "blue-300": (name: "blue", color: $blue-300, number: "-300"), +// "blue-400": (name: "blue", color: $blue-400, number: "-400"), +// "blue-500": (name: "blue", color: $blue-500, number: "-500"), +// "blue-600": (name: "blue", color: $blue-600, number: "-600"), +// "blue-700": (name: "blue", color: $blue-700, number: "-700"), +// "blue-800": (name: "blue", color: $blue-800, number: "-800"), +// "blue-900": (name: "blue", color: $blue-900, number: "-900"), +// "blue-a100": (name: "blue", color: $blue-a100, number: "-a100"), +// "blue-a200": (name: "blue", color: $blue-a200, number: "-a200"), +// "blue-a400": (name: "blue", color: $blue-a400, number: "-a400"), +// "blue-a700": (name: "blue", color: $blue-a700, number: "-a700"), +// "blue": (name: "blue", color: $blue, number: ""), +// "light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"), +// "light-blue-100": (name: "light-blue", color: $light-blue-100, number: "-100"), +// "light-blue-200": (name: "light-blue", color: $light-blue-200, number: "-200"), +// "light-blue-300": (name: "light-blue", color: $light-blue-300, number: "-300"), +// "light-blue-400": (name: "light-blue", color: $light-blue-400, number: "-400"), +// "light-blue-500": (name: "light-blue", color: $light-blue-500, number: "-500"), +// "light-blue-600": (name: "light-blue", color: $light-blue-600, number: "-600"), +// "light-blue-700": (name: "light-blue", color: $light-blue-700, number: "-700"), +// "light-blue-800": (name: "light-blue", color: $light-blue-800, number: "-800"), +// "light-blue-900": (name: "light-blue", color: $light-blue-900, number: "-900"), +// "light-blue-a100": (name: "light-blue", color: $light-blue-a100, number: "-a100"), +// "light-blue-a200": (name: "light-blue", color: $light-blue-a200, number: "-a200"), +// "light-blue-a400": (name: "light-blue", color: $light-blue-a400, number: "-a400"), +// "light-blue-a700": (name: "light-blue", color: $light-blue-a700, number: "-a700"), +// "light-blue": (name: "light-blue", color: $light-blue, number: ""), +// "cyan-50": (name: "cyan", color: $cyan-50, number: "-50"), +// "cyan-100": (name: "cyan", color: $cyan-100, number: "-100"), +// "cyan-200": (name: "cyan", color: $cyan-200, number: "-200"), +// "cyan-300": (name: "cyan", color: $cyan-300, number: "-300"), +// "cyan-400": (name: "cyan", color: $cyan-400, number: "-400"), +// "cyan-500": (name: "cyan", color: $cyan-500, number: "-500"), +// "cyan-600": (name: "cyan", color: $cyan-600, number: "-600"), +// "cyan-700": (name: "cyan", color: $cyan-700, number: "-700"), +// "cyan-800": (name: "cyan", color: $cyan-800, number: "-800"), +// "cyan-900": (name: "cyan", color: $cyan-900, number: "-900"), +// "cyan-a100": (name: "cyan", color: $cyan-a100, number: "-a100"), +// "cyan-a200": (name: "cyan", color: $cyan-a200, number: "-a200"), +// "cyan-a400": (name: "cyan", color: $cyan-a400, number: "-a400"), +// "cyan-a700": (name: "cyan", color: $cyan-a700, number: "-a700"), +// "cyan": (name: "cyan", color: $cyan, number: ""), +// "teal-50": (name: "teal", color: $teal-50, number: "-50"), +// "teal-100": (name: "teal", color: $teal-100, number: "-100"), +// "teal-200": (name: "teal", color: $teal-200, number: "-200"), +// "teal-300": (name: "teal", color: $teal-300, number: "-300"), +// "teal-400": (name: "teal", color: $teal-400, number: "-400"), +// "teal-500": (name: "teal", color: $teal-500, number: "-500"), +// "teal-600": (name: "teal", color: $teal-600, number: "-600"), +// "teal-700": (name: "teal", color: $teal-700, number: "-700"), +// "teal-800": (name: "teal", color: $teal-800, number: "-800"), +// "teal-900": (name: "teal", color: $teal-900, number: "-900"), +// "teal-a100": (name: "teal", color: $teal-a100, number: "-a100"), +// "teal-a200": (name: "teal", color: $teal-a200, number: "-a200"), +// "teal-a400": (name: "teal", color: $teal-a400, number: "-a400"), +// "teal-a700": (name: "teal", color: $teal-a700, number: "-a700"), +// "teal": (name: "teal", color: $teal, number: ""), +// "green-50": (name: "green", color: $green-50, number: "-50"), +// "green-100": (name: "green", color: $green-100, number: "-100"), +// "green-200": (name: "green", color: $green-200, number: "-200"), +// "green-300": (name: "green", color: $green-300, number: "-300"), +// "green-400": (name: "green", color: $green-400, number: "-400"), +// "green-500": (name: "green", color: $green-500, number: "-500"), +// "green-600": (name: "green", color: $green-600, number: "-600"), +// "green-700": (name: "green", color: $green-700, number: "-700"), +// "green-800": (name: "green", color: $green-800, number: "-800"), +// "green-900": (name: "green", color: $green-900, number: "-900"), +// "green-a100": (name: "green", color: $green-a100, number: "-a100"), +// "green-a200": (name: "green", color: $green-a200, number: "-a200"), +// "green-a400": (name: "green", color: $green-a400, number: "-a400"), +// "green-a700": (name: "green", color: $green-a700, number: "-a700"), +// "green": (name: "green", color: $green, number: ""), +// "light-green-50": (name: "light-green", color: $light-green-50, number: "-50"), +// "light-green-100": (name: "light-green", color: $light-green-100, number: "-100"), +// "light-green-200": (name: "light-green", color: $light-green-200, number: "-200"), +// "light-green-300": (name: "light-green", color: $light-green-300, number: "-300"), +// "light-green-400": (name: "light-green", color: $light-green-400, number: "-400"), +// "light-green-500": (name: "light-green", color: $light-green-500, number: "-500"), +// "light-green-600": (name: "light-green", color: $light-green-600, number: "-600"), +// "light-green-700": (name: "light-green", color: $light-green-700, number: "-700"), +// "light-green-800": (name: "light-green", color: $light-green-800, number: "-800"), +// "light-green-900": (name: "light-green", color: $light-green-900, number: "-900"), +// "light-green-a100": (name: "light-green", color: $light-green-a100, number: "-a100"), +// "light-green-a200": (name: "light-green", color: $light-green-a200, number: "-a200"), +// "light-green-a400": (name: "light-green", color: $light-green-a400, number: "-a400"), +// "light-green-a700": (name: "light-green", color: $light-green-a700, number: "-a700"), +// "light-green": (name: "light-green", color: $light-green, number: ""), +// "lime-50": (name: "lime", color: $lime-50, number: "-50"), +// "lime-100": (name: "lime", color: $lime-100, number: "-100"), +// "lime-200": (name: "lime", color: $lime-200, number: "-200"), +// "lime-300": (name: "lime", color: $lime-300, number: "-300"), +// "lime-400": (name: "lime", color: $lime-400, number: "-400"), +// "lime-500": (name: "lime", color: $lime-500, number: "-500"), +// "lime-600": (name: "lime", color: $lime-600, number: "-600"), +// "lime-700": (name: "lime", color: $lime-700, number: "-700"), +// "lime-800": (name: "lime", color: $lime-800, number: "-800"), +// "lime-900": (name: "lime", color: $lime-900, number: "-900"), +// "lime-a100": (name: "lime", color: $lime-a100, number: "-a100"), +// "lime-a200": (name: "lime", color: $lime-a200, number: "-a200"), +// "lime-a400": (name: "lime", color: $lime-a400, number: "-a400"), +// "lime-a700": (name: "lime", color: $lime-a700, number: "-a700"), +// "lime": (name: "lime", color: $lime, number: ""), +// "yellow-50": (name: "yellow", color: $yellow-50, number: "-50"), +// "yellow-100": (name: "yellow", color: $yellow-100, number: "-100"), +// "yellow-200": (name: "yellow", color: $yellow-200, number: "-200"), +// "yellow-300": (name: "yellow", color: $yellow-300, number: "-300"), +// "yellow-400": (name: "yellow", color: $yellow-400, number: "-400"), +// "yellow-500": (name: "yellow", color: $yellow-500, number: "-500"), +// "yellow-600": (name: "yellow", color: $yellow-600, number: "-600"), +// "yellow-700": (name: "yellow", color: $yellow-700, number: "-700"), +// "yellow-800": (name: "yellow", color: $yellow-800, number: "-800"), +// "yellow-900": (name: "yellow", color: $yellow-900, number: "-900"), +// "yellow-a100": (name: "yellow", color: $yellow-a100, number: "-a100"), +// "yellow-a200": (name: "yellow", color: $yellow-a200, number: "-a200"), +// "yellow-a400": (name: "yellow", color: $yellow-a400, number: "-a400"), +// "yellow-a700": (name: "yellow", color: $yellow-a700, number: "-a700"), +// "yellow": (name: "yellow", color: $yellow, number: ""), +// "amber-50": (name: "amber", color: $amber-50, number: "-50"), +// "amber-100": (name: "amber", color: $amber-100, number: "-100"), +// "amber-200": (name: "amber", color: $amber-200, number: "-200"), +// "amber-300": (name: "amber", color: $amber-300, number: "-300"), +// "amber-400": (name: "amber", color: $amber-400, number: "-400"), +// "amber-500": (name: "amber", color: $amber-500, number: "-500"), +// "amber-600": (name: "amber", color: $amber-600, number: "-600"), +// "amber-700": (name: "amber", color: $amber-700, number: "-700"), +// "amber-800": (name: "amber", color: $amber-800, number: "-800"), +// "amber-900": (name: "amber", color: $amber-900, number: "-900"), +// "amber-a100": (name: "amber", color: $amber-a100, number: "-a100"), +// "amber-a200": (name: "amber", color: $amber-a200, number: "-a200"), +// "amber-a400": (name: "amber", color: $amber-a400, number: "-a400"), +// "amber-a700": (name: "amber", color: $amber-a700, number: "-a700"), +// "amber": (name: "amber", color: $amber, number: ""), +// "orange-50": (name: "orange", color: $orange-50, number: "-50"), +// "orange-100": (name: "orange", color: $orange-100, number: "-100"), +// "orange-200": (name: "orange", color: $orange-200, number: "-200"), +// "orange-300": (name: "orange", color: $orange-300, number: "-300"), +// "orange-400": (name: "orange", color: $orange-400, number: "-400"), +// "orange-500": (name: "orange", color: $orange-500, number: "-500"), +// "orange-600": (name: "orange", color: $orange-600, number: "-600"), +// "orange-700": (name: "orange", color: $orange-700, number: "-700"), +// "orange-800": (name: "orange", color: $orange-800, number: "-800"), +// "orange-900": (name: "orange", color: $orange-900, number: "-900"), +// "orange-a100": (name: "orange", color: $orange-a100, number: "-a100"), +// "orange-a200": (name: "orange", color: $orange-a200, number: "-a200"), +// "orange-a400": (name: "orange", color: $orange-a400, number: "-a400"), +// "orange-a700": (name: "orange", color: $orange-a700, number: "-a700"), +// "orange": (name: "orange", color: $orange, number: ""), +// "deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"), +// "deep-orange-100": (name: "deep-orange", color: $deep-orange-100, number: "-100"), +// "deep-orange-200": (name: "deep-orange", color: $deep-orange-200, number: "-200"), +// "deep-orange-300": (name: "deep-orange", color: $deep-orange-300, number: "-300"), +// "deep-orange-400": (name: "deep-orange", color: $deep-orange-400, number: "-400"), +// "deep-orange-500": (name: "deep-orange", color: $deep-orange-500, number: "-500"), +// "deep-orange-600": (name: "deep-orange", color: $deep-orange-600, number: "-600"), +// "deep-orange-700": (name: "deep-orange", color: $deep-orange-700, number: "-700"), +// "deep-orange-800": (name: "deep-orange", color: $deep-orange-800, number: "-800"), +// "deep-orange-900": (name: "deep-orange", color: $deep-orange-900, number: "-900"), +// "deep-orange-a100": (name: "deep-orange", color: $deep-orange-a100, number: "-a100"), +// "deep-orange-a200": (name: "deep-orange", color: $deep-orange-a200, number: "-a200"), +// "deep-orange-a400": (name: "deep-orange", color: $deep-orange-a400, number: "-a400"), +// "deep-orange-a700": (name: "deep-orange", color: $deep-orange-a700, number: "-a700"), +// "deep-orange": (name: "deep-orange", color: $deep-orange, number: ""), +// "brown-50": (name: "brown", color: $brown-50, number: "-50"), +// "brown-100": (name: "brown", color: $brown-100, number: "-100"), +// "brown-200": (name: "brown", color: $brown-200, number: "-200"), +// "brown-300": (name: "brown", color: $brown-300, number: "-300"), +// "brown-400": (name: "brown", color: $brown-400, number: "-400"), +// "brown-500": (name: "brown", color: $brown-500, number: "-500"), +// "brown-600": (name: "brown", color: $brown-600, number: "-600"), +// "brown-700": (name: "brown", color: $brown-700, number: "-700"), +// "brown-800": (name: "brown", color: $brown-800, number: "-800"), +// "brown-900": (name: "brown", color: $brown-900, number: "-900"), +// "brown-a100": (name: "brown", color: $brown-a100, number: "-a100"), +// "brown-a200": (name: "brown", color: $brown-a200, number: "-a200"), +// "brown-a400": (name: "brown", color: $brown-a400, number: "-a400"), +// "brown-a700": (name: "brown", color: $brown-a700, number: "-a700"), +// "brown": (name: "brown", color: $brown, number: ""), +// "grey-50": (name: "grey", color: $grey-50, number: "-50"), +// "grey-100": (name: "grey", color: $grey-100, number: "-100"), +// "grey-200": (name: "grey", color: $grey-200, number: "-200"), +// "grey-300": (name: "grey", color: $grey-300, number: "-300"), +// "grey-400": (name: "grey", color: $grey-400, number: "-400"), +// "grey-500": (name: "grey", color: $grey-500, number: "-500"), +// "grey-600": (name: "grey", color: $grey-600, number: "-600"), +// "grey-700": (name: "grey", color: $grey-700, number: "-700"), +// "grey-800": (name: "grey", color: $grey-800, number: "-800"), +// "grey-900": (name: "grey", color: $grey-900, number: "-900"), +// "grey-a100": (name: "grey", color: $grey-a100, number: "-a100"), +// "grey-a200": (name: "grey", color: $grey-a200, number: "-a200"), +// "grey-a400": (name: "grey", color: $grey-a400, number: "-a400"), +// "grey-a700": (name: "grey", color: $grey-a700, number: "-a700"), +// "grey": (name: "grey", color: $grey, number: ""), +// "blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"), +// "blue-grey-100": (name: "blue-grey", color: $blue-grey-100, number: "-100"), +// "blue-grey-200": (name: "blue-grey", color: $blue-grey-200, number: "-200"), +// "blue-grey-300": (name: "blue-grey", color: $blue-grey-300, number: "-300"), +// "blue-grey-400": (name: "blue-grey", color: $blue-grey-400, number: "-400"), +// "blue-grey-500": (name: "blue-grey", color: $blue-grey-500, number: "-500"), +// "blue-grey-600": (name: "blue-grey", color: $blue-grey-600, number: "-600"), +// "blue-grey-700": (name: "blue-grey", color: $blue-grey-700, number: "-700"), +// "blue-grey-800": (name: "blue-grey", color: $blue-grey-800, number: "-800"), +// "blue-grey-900": (name: "blue-grey", color: $blue-grey-900, number: "-900"), +// "blue-grey-a100": (name: "blue-grey", color: $blue-grey-a100, number: "-a100"), +// "blue-grey-a200": (name: "blue-grey", color: $blue-grey-a200, number: "-a200"), +// "blue-grey-a400": (name: "blue-grey", color: $blue-grey-a400, number: "-a400"), +// "blue-grey-a700": (name: "blue-grey", color: $blue-grey-a700, number: "-a700"), +// "blue-grey": (name: "blue-grey", color: $blue-grey, number: "") +//); diff --git a/dmp-frontend/src/assets/scss/core/variables/_colors.scss b/dmp-frontend/src/assets/scss/core/variables/_colors.scss new file mode 100644 index 000000000..db0c1986a --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_colors.scss @@ -0,0 +1,322 @@ +$red-50: #ffebee !default; +$red-100: #ffcdd2 !default; +$red-200: #ef9a9a !default; +$red-300: #e57373 !default; +$red-400: #ef5350 !default; +$red-500: #f44336 !default; +$red-600: #e53935 !default; +$red-700: #d32f2f !default; +$red-800: #c62828 !default; +$red-900: #b71c1c !default; +$red-a100: #ff8a80 !default; +$red-a200: #ff5252 !default; +$red-a400: #ff1744 !default; +$red-a700: #d50000 !default; +$red: $red-500 !default; + +$pink-50: #fce4ec !default; +$pink-100: #f8bbd0 !default; +$pink-200: #f48fb1 !default; +$pink-300: #f06292 !default; +$pink-400: #ec407a !default; +$pink-500: #e91e63 !default; +$pink-600: #d81b60 !default; +$pink-700: #c2185b !default; +$pink-800: #ad1457 !default; +$pink-900: #880e4f !default; +$pink-a100: #ff80ab !default; +$pink-a200: #ff4081 !default; +$pink-a400: #f50057 !default; +$pink-a700: #c51162 !default; +$pink: $pink-500 !default; + +$purple-50: #f3e5f5 !default; +$purple-100: #e1bee7 !default; +$purple-200: #ce93d8 !default; +$purple-300: #ba68c8 !default; +$purple-400: #ab47bc !default; +$purple-500: #9c27b0 !default; +$purple-600: #8e24aa !default; +$purple-700: #7b1fa2 !default; +$purple-800: #6a1b9a !default; +$purple-900: #4a148c !default; +$purple-a100: #ea80fc !default; +$purple-a200: #e040fb !default; +$purple-a400: #d500f9 !default; +$purple-a700: #a0f !default; +$purple: $purple-500 !default; + +$deep-purple-50: #ede7f6 !default; +$deep-purple-100: #d1c4e9 !default; +$deep-purple-200: #b39ddb !default; +$deep-purple-300: #9575cd !default; +$deep-purple-400: #7e57c2 !default; +$deep-purple-500: #673ab7 !default; +$deep-purple-600: #5e35b1 !default; +$deep-purple-700: #512da8 !default; +$deep-purple-800: #4527a0 !default; +$deep-purple-900: #311b92 !default; +$deep-purple-a100: #b388ff !default; +$deep-purple-a200: #7c4dff !default; +$deep-purple-a400: #651fff !default; +$deep-purple-a700: #6200ea !default; +$deep-purple: $deep-purple-500 !default; + +$indigo-50: #e8eaf6 !default; +$indigo-100: #c5cae9 !default; +$indigo-200: #9fa8da !default; +$indigo-300: #7986cb !default; +$indigo-400: #5c6bc0 !default; +$indigo-500: #3f51b5 !default; +$indigo-600: #3949ab !default; +$indigo-700: #303f9f !default; +$indigo-800: #283593 !default; +$indigo-900: #1a237e !default; +$indigo-a100: #8c9eff !default; +$indigo-a200: #536dfe !default; +$indigo-a400: #3d5afe !default; +$indigo-a700: #304ffe !default; +$indigo: $indigo-500 !default; + +$blue-50: #e3f2fd !default; +$blue-100: #bbdefb !default; +$blue-200: #90caf9 !default; +$blue-300: #64b5f6 !default; +$blue-400: #42a5f5 !default; +$blue-500: #2196f3 !default; +$blue-600: #1e88e5 !default; +$blue-700: #1976d2 !default; +$blue-800: #1565c0 !default; +$blue-900: #0d47a1 !default; +$blue-a100: #82b1ff !default; +$blue-a200: #448aff !default; +$blue-a400: #2979ff !default; +$blue-a700: #2962ff !default; +$blue: $blue-500 !default; + +$light-blue-50: #e1f5fe !default; +$light-blue-100: #b3e5fc !default; +$light-blue-200: #81d4fa !default; +$light-blue-300: #4fc3f7 !default; +$light-blue-400: #29b6f6 !default; +$light-blue-500: #03a9f4 !default; +$light-blue-600: #039be5 !default; +$light-blue-700: #0288d1 !default; +$light-blue-800: #0277bd !default; +$light-blue-900: #01579b !default; +$light-blue-a100: #80d8ff !default; +$light-blue-a200: #40c4ff !default; +$light-blue-a400: #00b0ff !default; +$light-blue-a700: #0091ea !default; +$light-blue: $light-blue-500 !default; + +$cyan-50: #e0f7fa !default; +$cyan-100: #b2ebf2 !default; +$cyan-200: #80deea !default; +$cyan-300: #4dd0e1 !default; +$cyan-400: #26c6da !default; +$cyan-500: #00bcd4 !default; +$cyan-600: #00acc1 !default; +$cyan-700: #0097a7 !default; +$cyan-800: #00838f !default; +$cyan-900: #006064 !default; +$cyan-a100: #84ffff !default; +$cyan-a200: #18ffff !default; +$cyan-a400: #00e5ff !default; +$cyan-a700: #00b8d4 !default; +$cyan: $cyan-500 !default; + +$teal-50: #e0f2f1 !default; +$teal-100: #b2dfdb !default; +$teal-200: #80cbc4 !default; +$teal-300: #4db6ac !default; +$teal-400: #26a69a !default; +$teal-500: #009688 !default; +$teal-600: #00897b !default; +$teal-700: #00796b !default; +$teal-800: #00695c !default; +$teal-900: #004d40 !default; +$teal-a100: #a7ffeb !default; +$teal-a200: #64ffda !default; +$teal-a400: #1de9b6 !default; +$teal-a700: #00bfa5 !default; +$teal: $teal-500 !default; + +$green-50: #e8f5e9 !default; +$green-100: #c8e6c9 !default; +$green-200: #a5d6a7 !default; +$green-300: #81c784 !default; +$green-400: #66bb6a !default; +$green-500: #4caf50 !default; +$green-600: #43a047 !default; +$green-700: #388e3c !default; +$green-800: #2e7d32 !default; +$green-900: #1b5e20 !default; +$green-a100: #b9f6ca !default; +$green-a200: #69f0ae !default; +$green-a400: #00e676 !default; +$green-a700: #00c853 !default; +$green: $green-500 !default; + +$light-green-50: #f1f8e9 !default; +$light-green-100: #dcedc8 !default; +$light-green-200: #c5e1a5 !default; +$light-green-300: #aed581 !default; +$light-green-400: #9ccc65 !default; +$light-green-500: #8bc34a !default; +$light-green-600: #7cb342 !default; +$light-green-700: #689f38 !default; +$light-green-800: #558b2f !default; +$light-green-900: #33691e !default; +$light-green-a100: #ccff90 !default; +$light-green-a200: #b2ff59 !default; +$light-green-a400: #76ff03 !default; +$light-green-a700: #64dd17 !default; +$light-green: $light-green-500 !default; + +$lime-50: #f9fbe7 !default; +$lime-100: #f0f4c3 !default; +$lime-200: #e6ee9c !default; +$lime-300: #dce775 !default; +$lime-400: #d4e157 !default; +$lime-500: #cddc39 !default; +$lime-600: #c0ca33 !default; +$lime-700: #afb42b !default; +$lime-800: #9e9d24 !default; +$lime-900: #827717 !default; +$lime-a100: #f4ff81 !default; +$lime-a200: #eeff41 !default; +$lime-a400: #c6ff00 !default; +$lime-a700: #aeea00 !default; +$lime: $lime-500 !default; + +$yellow-50: #fffde7 !default; +$yellow-100: #fff9c4 !default; +$yellow-200: #fff59d !default; +$yellow-300: #fff176 !default; +$yellow-400: #ffee58 !default; +$yellow-500: #ffeb3b !default; +$yellow-600: #fdd835 !default; +$yellow-700: #fbc02d !default; +$yellow-800: #f9a825 !default; +$yellow-900: #f57f17 !default; +$yellow-a100: #ffff8d !default; +$yellow-a200: #ff0 !default; +$yellow-a400: #ffea00 !default; +$yellow-a700: #ffd600 !default; +$yellow: $yellow-500 !default; + +$amber-50: #fff8e1 !default; +$amber-100: #ffecb3 !default; +$amber-200: #ffe082 !default; +$amber-300: #ffd54f !default; +$amber-400: #ffca28 !default; +$amber-500: #ffc107 !default; +$amber-600: #ffb300 !default; +$amber-700: #ffa000 !default; +$amber-800: #ff8f00 !default; +$amber-900: #ff6f00 !default; +$amber-a100: #ffe57f !default; +$amber-a200: #ffd740 !default; +$amber-a400: #ffc400 !default; +$amber-a700: #ffab00 !default; +$amber: $amber-500 !default; + +$orange-50: #fff3e0 !default; +$orange-100: #ffe0b2 !default; +$orange-200: #ffcc80 !default; +$orange-300: #ffb74d !default; +$orange-400: #ffa726 !default; +$orange-500: #ff9800 !default; +$orange-600: #fb8c00 !default; +$orange-700: #f57c00 !default; +$orange-800: #ef6c00 !default; +$orange-900: #e65100 !default; +$orange-a100: #ffd180 !default; +$orange-a200: #ffab40 !default; +$orange-a400: #ff9100 !default; +$orange-a700: #ff6d00 !default; +$orange: $orange-500 !default; + +$deep-orange-50: #fbe9e7 !default; +$deep-orange-100: #ffccbc !default; +$deep-orange-200: #ffab91 !default; +$deep-orange-300: #ff8a65 !default; +$deep-orange-400: #ff7043 !default; +$deep-orange-500: #ff5722 !default; +$deep-orange-600: #f4511e !default; +$deep-orange-700: #e64a19 !default; +$deep-orange-800: #d84315 !default; +$deep-orange-900: #bf360c !default; +$deep-orange-a100: #ff9e80 !default; +$deep-orange-a200: #ff6e40 !default; +$deep-orange-a400: #ff3d00 !default; +$deep-orange-a700: #dd2c00 !default; +$deep-orange: $deep-orange-500 !default; + +$brown-50: #efebe9 !default; +$brown-100: #d7ccc8 !default; +$brown-200: #bcaaa4 !default; +$brown-300: #a1887f !default; +$brown-400: #8d6e63 !default; +$brown-500: #795548 !default; +$brown-600: #6d4c41 !default; +$brown-700: #5d4037 !default; +$brown-800: #4e342e !default; +$brown-900: #3e2723 !default; +$brown-a100: #d7ccc8 !default; +$brown-a200: #bcaaa4 !default; +$brown-a400: #8d6e63 !default; +$brown-a700: #5d4037 !default; +$brown: $brown-500 !default; + +$grey-50: #fafafa !default; +$grey-100: #f5f5f5 !default; +$grey-200: #eee !default; +$grey-300: #e0e0e0 !default; +$grey-400: #bdbdbd !default; +$grey-500: #9e9e9e; +$grey-600: #757575 !default; +$grey-700: #616161 !default; +$grey-800: #424242 !default; +$grey-900: #212121 !default; +$grey-a100: #f5f5f5 !default; +$grey-a200: #eee !default; +$grey-a400: #bdbdbd !default; +$grey-a700: #616161 !default; +$grey: $grey-500 !default; + +$blue-grey-50: #eceff1 !default; +$blue-grey-100: #cfd8dc !default; +$blue-grey-200: #b0bec5 !default; +$blue-grey-300: #90a4ae !default; +$blue-grey-400: #78909c !default; +$blue-grey-500: #607d8b !default; +$blue-grey-600: #546e7a !default; +$blue-grey-700: #455a64 !default; +$blue-grey-800: #37474f !default; +$blue-grey-900: #263238 !default; +$blue-grey-a100: #cfd8dc !default; +$blue-grey-a200: #b0bec5 !default; +$blue-grey-a400: #78909c !default; +$blue-grey-a700: #455a64 !default; +$blue-grey: $blue-grey-500 !default; + +$black: #000; +$white: #fff; + +// New colors +$gray-color: #999999 !default; +$black-color: #3C4858 !default; + +$black: #000000; $rgb-black: "0,0,0" !default; +$white: #ffffff; $rgb-white: "255,255,255" !default; + +//## Gray and brand colors for use across Bootstrap. + +$gray-base: #000 !default; +$gray-darker: lighten($gray-base, 13.5%) !default; // #222 +$gray-dark: lighten($gray-base, 20%) !default; // #333 +$gray: lighten($gray-base, 33.5%) !default; // #555 +$gray-light: #999999 !default; // #999999 +$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee diff --git a/dmp-frontend/src/assets/scss/core/variables/_custom-forms.scss b/dmp-frontend/src/assets/scss/core/variables/_custom-forms.scss new file mode 100644 index 000000000..d6f364473 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_custom-forms.scss @@ -0,0 +1,5 @@ +$custom-file-bg: transparent !default; +$custom-file-border-width: 0 !default; +$custom-file-box-shadow: none !default; +$custom-file-border-radius: 0 !default; +$custom-file-line-height: 1.3 !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_drawer.scss b/dmp-frontend/src/assets/scss/core/variables/_drawer.scss new file mode 100644 index 000000000..d30b021f6 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_drawer.scss @@ -0,0 +1,5 @@ +// Drawer + +// Sizing +$bmd-drawer-x-size: 240px !default; +$bmd-drawer-y-size: 100px !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_dropdown.scss b/dmp-frontend/src/assets/scss/core/variables/_dropdown.scss new file mode 100644 index 000000000..d9f1ed998 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_dropdown.scss @@ -0,0 +1,20 @@ +// Dropdowns +// +// Dropdown menu container and contents. + +//$dropdown-bg: #fff !default; +//$dropdown-border-color: rgba(0,0,0,.15) !default; +//$dropdown-border-width: $border-width !default; +//$dropdown-divider-bg: #e5e5e5 !default; +$dropdown-box-shadow: $bmd-shadow-2dp !default; //0 6px 12px rgba(0,0,0,.175) !default; +// +//$dropdown-link-color: $gray-dark !default; +//$dropdown-link-hover-color: darken($gray-dark, 5%) !default; +//$dropdown-link-hover-bg: #f5f5f5 !default; +// +//$dropdown-link-active-color: $component-active-color !default; +//$dropdown-link-active-bg: $component-active-bg !default; +// +//$dropdown-link-disabled-color: $gray-light !default; +// +//$dropdown-header-color: $gray-light !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_forms.scss b/dmp-frontend/src/assets/scss/core/variables/_forms.scss new file mode 100644 index 000000000..3cf5ca1bd --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_forms.scss @@ -0,0 +1,37 @@ +// Forms + +// +$input-bg: rgba($black, 0) !default; // #fff !default; +$input-bg-disabled: rgba($black, 0) !default; // $gray-lighter !default; +// +//$input-color: $gray !default; +$input-border-color: #d2d2d2 !default; // #ccc !default; +$input-border-color-white: #FFFFFF !default; + +//$input-btn-border-width: $border-width !default; // For form controls and buttons +$input-box-shadow: none !default; //inset 0 1px 1px rgba(0,0,0,.075) !default; +// +$input-border-radius: 0 !default; // $border-radius !default; +$input-box-shadow-focus: none !default; // rgba(102,175,233,.6) !default; +// +$input-color-placeholder: $bmd-label-color !default; // #999 !default; + +$input-padding-x: 0 !default; // .75rem !default; +$input-padding-y: .4375rem !default; // spec 8px // .375rem !default; + +$input-padding-x-sm: 0 !default; // .75rem !default; +$input-padding-y-sm: .25rem !default; // spec 4px //.275rem !default; + +$input-padding-x-lg: 0 !default; // 1.25rem !default; +$input-padding-y-lg: .5625rem !default; // no-spec 9px // .75rem !default; + +// +$input-group-addon-bg: transparent !default; //$gray-lighter !default; +$input-group-addon-border-color: transparent !default; //$input-border-color !default; +// +//$cursor-disabled: not-allowed !default; +// +//// Form validation icons +$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg=="; +$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+"; +$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4="; diff --git a/dmp-frontend/src/assets/scss/core/variables/_layout.scss b/dmp-frontend/src/assets/scss/core/variables/_layout.scss new file mode 100644 index 000000000..7cbf784ab --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_layout.scss @@ -0,0 +1 @@ +// Layout variables - evidently nothing to see here...remove now? diff --git a/dmp-frontend/src/assets/scss/core/variables/_list-group.scss b/dmp-frontend/src/assets/scss/core/variables/_list-group.scss new file mode 100644 index 000000000..e0324c020 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_list-group.scss @@ -0,0 +1,20 @@ +// List group + +$list-group-bg: inherit !default; // #fff +//$list-group-border-color: #ddd !default; +$list-group-border-width: 0 !default; // $border-width +$list-group-border-radius: 0 !default; // $border-radius +// +//$list-group-hover-bg: #f5f5f5 !default; +//$list-group-active-color: $component-active-color !default; +//$list-group-active-bg: $component-active-bg !default; +//$list-group-active-border: $list-group-active-bg !default; +//$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; +// +//$list-group-disabled-color: $gray-light !default; +//$list-group-disabled-bg: $gray-lighter !default; +//$list-group-disabled-text-color: $list-group-disabled-color !default; +// +//$list-group-link-color: #555 !default; +//$list-group-link-hover-color: $list-group-link-color !default; +//$list-group-link-heading-color: #333 !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_menu.scss b/dmp-frontend/src/assets/scss/core/variables/_menu.scss new file mode 100644 index 000000000..54da3c4a4 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_menu.scss @@ -0,0 +1,18 @@ +$bmd-menu-line-height: 1 !default; // makes it easier to use sizes to match spec + +$bmd-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp +$bmd-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp +$bmd-menu-item-min-height: 3rem !default; // 48px + +$bmd-menu-item-padding-right: 1rem !default; +$bmd-menu-item-padding-bottom: .8rem !default; +$bmd-menu-item-padding-left: 1rem !default; +$bmd-menu-item-padding-top: .8rem !default; + +// md and up +$bmd-menu-item-padding-right-md: 1.5rem !default; +$bmd-menu-item-padding-left-md: 1.5rem !default; + +// Menu +$bmd-menu-expand-duration: 0.3s !default; +$bmd-menu-fade-duration: 0.2s !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_modals.scss b/dmp-frontend/src/assets/scss/core/variables/_modals.scss new file mode 100644 index 000000000..2054a58f8 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_modals.scss @@ -0,0 +1,34 @@ +// Modals +$modal-content-xs-box-shadow: $bmd-shadow-24dp !default; + +// Padding applied to the modal body +//$modal-inner-padding: 15px !default; +// +//$modal-title-padding: 15px !default; +//$modal-title-line-height: $line-height-base !default; +// +//$modal-content-bg: #fff !default; +//$modal-content-border-color: rgba(0,0,0,.2) !default; +// +//$modal-backdrop-bg: #000 !default; +$modal-backdrop-opacity: .26 !default; // .5 +//$modal-header-border-color: #e5e5e5 !default; +//$modal-footer-border-color: $modal-header-border-color !default; +// +//$modal-lg: 900px !default; +//$modal-md: 600px !default; +//$modal-sm: 300px !default; + +$transition-ease-in: ease-in !default; +$transition-ease-out: ease-out !default; +$ultra-fast-transition-time: 60ms !default; +$navbar-padding-a: 10px 15px; +$padding-zero: 0px !default; +$sidebar-width: calc(100% - 260px) !default; +$sidebar-mini-width: calc(100% - 80px) !default; +$topbar-back: topbar-back !default; +$bottombar-back: bottombar-back !default; +$topbar-x: topbar-x !default; +$bottombar-x: bottombar-x !default; +$margin-bottom: 0 0 10px 0 !default; +$margin-base-vertical: 15px !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_nav.scss b/dmp-frontend/src/assets/scss/core/variables/_nav.scss new file mode 100644 index 000000000..f02acf642 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_nav.scss @@ -0,0 +1,57 @@ +// Navs https://www.google.com/design/spec/components/tabs.html#tabs-specs + +$nav-disabled-link-color: $gray-light !default; +$nav-disabled-link-hover-color: $gray-light !default; + +$bmd-navbar-link-font-weight: $bmd-font-weight-base !default; // +$bmd-navbar-link-font-size: .875rem !default; // 14 +$bmd-navbar-link-padding: .5321rem; // 7 + +// tabs & pills +$bmd-nav-tabs-pills-font-weight: 500 !default; // +$bmd-nav-tabs-pills-font-size: .875rem !default; // 14 +$bmd-nav-tabs-pills-link-padding: 1.4286em .8575em !default; // spec // was .5em 1em // relative em based on 14 + +// tabs only +$bmd-nav-tabs-border-size: .214rem !default; // 3px + +$bmd-nav-tabs-color: $gray !default; +$bmd-nav-tabs-active-color: $gray-dark !default; +$bmd-nav-tabs-active-border-color: $brand-primary !default; +$bmd-nav-tabs-disabled-link-color: $nav-disabled-link-color !default; +$bmd-nav-tabs-disabled-link-color-hover: $nav-disabled-link-hover-color !default; + +$bmd-nav-tabs-primary-color: $bmd-inverse !default; +$bmd-nav-tabs-primary-active-color: #fff !default; +$bmd-nav-tabs-primary-active-border-color: #fff !default; +$bmd-nav-tabs-primary-disabled-link-color: $bmd-inverse-light !default; +$bmd-nav-tabs-primary-disabled-link-color-hover: $bmd-inverse-light !default; + +$bmd-nav-tabs-inverse-color: $bmd-inverse !default; +$bmd-nav-tabs-inverse-active-color: #fff !default; +$bmd-nav-tabs-inverse-active-border-color: #fff !default; +$bmd-nav-tabs-inverse-disabled-link-color: $bmd-inverse-light !default; +$bmd-nav-tabs-inverse-disabled-link-color-hover: $bmd-inverse-light !default; + +//$nav-item-margin: .2rem !default; + +//$bmd-nav-link-line-height: 1 !default; // makes it easier to line up with the spec +//$nav-link-padding: .5em 1em !default; // changing this for tabs alters generic navbars, so do it elsewhere with higher specificity +//$nav-link-hover-bg: $gray-lighter !default; + +// +//$nav-tabs-border-color: #ddd !default; +// +//$nav-tabs-link-border-width: $border-width !default; +//$nav-tabs-link-hover-border-color: $gray-lighter !default; +// +$nav-tabs-active-link-hover-bg: transparent !default; // $body-bg +//$nav-tabs-active-link-hover-color: $gray !default; +//$nav-tabs-active-link-hover-border-color: #ddd !default; +// +//$nav-tabs-justified-link-border-color: #ddd !default; +//$nav-tabs-justified-active-link-border-color: $body-bg !default; +// +//$nav-pills-border-radius: $border-radius !default; +//$nav-pills-active-link-hover-bg: $component-active-bg !default; +//$nav-pills-active-link-hover-color: $component-active-color !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_pagination.scss b/dmp-frontend/src/assets/scss/core/variables/_pagination.scss new file mode 100644 index 000000000..e55ec27af --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_pagination.scss @@ -0,0 +1,6 @@ +$pagination-border-width: 0; +$pagination-bg: transparent; +$pagination-disabled-bg: transparent; + +$pagination-padding-x-lg: 0; +$pagination-padding-x-sm: 0; diff --git a/dmp-frontend/src/assets/scss/core/variables/_shadow.scss b/dmp-frontend/src/assets/scss/core/variables/_shadow.scss new file mode 100644 index 000000000..ef1f786c8 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_shadow.scss @@ -0,0 +1,35 @@ +// Shadows (originally from mdl http://www.getmdl.io/) +$bmd-shadow-umbra-opacity: 0.2 !default; +$bmd-shadow-penumbra-opacity: 0.14 !default; +$bmd-shadow-ambient-opacity: 0.12 !default; + +// Declare the following for reuse with both mixins and the bootstrap variables +$bmd-shadow-focus: 0 0 8px rgba($black, .18), 0 8px 16px rgba($black, .36); + +$bmd-shadow-2dp: 0 2px 2px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 3px 1px -2px rgba($black, $bmd-shadow-umbra-opacity), + 0 1px 5px 0 rgba($black, $bmd-shadow-ambient-opacity); + +$bmd-shadow-3dp: 0 3px 4px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 3px 3px -2px rgba($black, $bmd-shadow-umbra-opacity), + 0 1px 8px 0 rgba($black, $bmd-shadow-ambient-opacity); + +$bmd-shadow-4dp: 0 4px 5px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 1px 10px 0 rgba($black, $bmd-shadow-ambient-opacity), + 0 2px 4px -1px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-6dp: 0 6px 10px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 1px 18px 0 rgba($black, $bmd-shadow-ambient-opacity), + 0 3px 5px -1px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-8dp: 0 8px 10px 1px rgba($black, $bmd-shadow-penumbra-opacity), + 0 3px 14px 2px rgba($black, $bmd-shadow-ambient-opacity), + 0 5px 5px -3px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-16dp: 0 16px 24px 2px rgba($black, $bmd-shadow-penumbra-opacity), + 0 6px 30px 5px rgba($black, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-24dp: 0 9px 46px 8px rgba($black, $bmd-shadow-penumbra-opacity), + 0 11px 15px -7px rgba($black, $bmd-shadow-ambient-opacity), + 0 24px 38px 3px rgba($black, $bmd-shadow-umbra-opacity); diff --git a/dmp-frontend/src/assets/scss/core/variables/_snackbar.scss b/dmp-frontend/src/assets/scss/core/variables/_snackbar.scss new file mode 100644 index 000000000..a7b9212a5 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_snackbar.scss @@ -0,0 +1,6 @@ +$bmd-snackbar-bg: #323232 !default; +$bmd-snackbar-color: #fff !default; +$bmd-snackbar-min-width: 280px !default; +$bmd-snackbar-padding: .8rem 1.5rem !default; + +$bmd-snackbar-min-width-sm: 100% !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_spacing.scss b/dmp-frontend/src/assets/scss/core/variables/_spacing.scss new file mode 100644 index 000000000..053c915a6 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_spacing.scss @@ -0,0 +1,26 @@ +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. + +$spacer: 1rem !default; // $form-group-margin-bottom uses $spacer-y. Decided to try this globally and see how it works out. +//$spacer-x: $spacer !default; +//$spacer-y: $spacer !default; +//$spacers: ( +// 0: ( +// x: 0, +// y: 0 +// ), +// 1: ( +// x: $spacer-x, +// y: $spacer-y +// ), +// 2: ( +// x: ($spacer-x * 1.5), +// y: ($spacer-y * 1.5) +// ), +// 3: ( +// x: ($spacer-x * 3), +// y: ($spacer-y * 3) +// ) +//) !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_state.scss b/dmp-frontend/src/assets/scss/core/variables/_state.scss new file mode 100644 index 000000000..07dad33be --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_state.scss @@ -0,0 +1,16 @@ +// Form states and alerts +// +// Define colors for form feedback states and, by default, alerts. +$state-success-text: $bmd-inverse !default; +$state-success-bg: $brand-success !default; + +$state-info-text: $bmd-inverse !default; +$state-info-bg: $brand-info !default; + +$state-warning-text: $bmd-inverse !default; +$state-warning-bg: $brand-warning !default; + +$state-danger-text: $bmd-inverse !default; +$state-danger-bg: $brand-danger !default; + +$state-rose-bg: $brand-rose !default; diff --git a/dmp-frontend/src/assets/scss/core/variables/_tables.scss b/dmp-frontend/src/assets/scss/core/variables/_tables.scss new file mode 100644 index 000000000..6a6aa3932 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_tables.scss @@ -0,0 +1,6 @@ +$table-bg-accent: rgba(#000, .03); +$table-border-color: rgba(#000, .06); +$table-bg-hover: rgba(#000, .02); // Grey 100 (on white background) + +$bmd-table-header-font-size: .95rem; +$bmd-table-border-color-inverse: rgba(#fff, .06); diff --git a/dmp-frontend/src/assets/scss/core/variables/_tooltip.scss b/dmp-frontend/src/assets/scss/core/variables/_tooltip.scss new file mode 100644 index 000000000..e94196df9 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_tooltip.scss @@ -0,0 +1 @@ +$tooltip-bg: rgba($grey-700, .9); diff --git a/dmp-frontend/src/assets/scss/core/variables/_type.scss b/dmp-frontend/src/assets/scss/core/variables/_type.scss new file mode 100644 index 000000000..427c29769 --- /dev/null +++ b/dmp-frontend/src/assets/scss/core/variables/_type.scss @@ -0,0 +1,107 @@ +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +// https://www.google.com/design/spec/style/typography.html#typography-styles +// http://www.getmdl.io/styles/index.html + +$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; +$font-family-serif: 'Roboto Slab', 'Times New Roman', serif !default; +//$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; +//$font-family-base: $font-family-sans-serif !default; + +// Pixel value used to responsively scale all typography. Applied to the `` element. +//$font-size-root: 16px !default; +// +$font-size-base: 1rem !default; +//$font-size-lg: 1.25rem !default; +//$font-size-sm: .875rem !default; +//$font-size-xs: .75rem !default; +// + +$font-size-h1: 3.3125rem; +$font-size-h2: 2.25rem !default; +$font-size-h3: 1.5625rem; +$font-size-h4: 1.125rem !default; +$font-size-h5: 1.0625rem !default; +$font-size-h6: 0.75rem !default; +$font-paragraph: 14px !default; +$font-size-navbar: 16px !default; +$font-size-small: 12px !default; + + +// +$display1-size: 7rem !default; // md display-4 112px was 6rem; +$display2-size: 3.5rem !default; // md display-3 56px was 5.5rem +$display3-size: 2.8125rem !default; // md display-2 45px was 4.5rem +$display4-size: 2.125rem !default; // md display-1 34px was 3.5rem +// +//$display1-weight: 300 !default; +//$display2-weight: 300 !default; +//$display3-weight: 300 !default; +//$display4-weight: 300 !default; +// +//$line-height-base: 1.5 !default; +// +$headings-margin-bottom: ($spacer / 2) !default; +//$headings-font-family: inherit !default; +$headings-font-weight: 400 !default; // was 500 + +$font-weight-light: 300 !default; +$font-weight-default: 400 !default; +$font-weight-bold: 500 !default; +$font-weight-extra-bold: 700 !default; + +$font-size-large: 1em !default; +$font-size-large-navbar: 20px !default; + +//$headings-line-height: 1.1 !default; +//$headings-color: inherit !default; +// +//$lead-font-size: 1.25rem !default; +//$lead-font-weight: 300 !default; +// +//$text-muted: $gray-light !default; +// +//$abbr-border-color: $gray-light !default; +// +//$blockquote-small-color: $gray-light !default; +//$blockquote-font-size: ($font-size-base * 1.25) !default; +//$blockquote-border-color: $gray-lighter !default; +// +//$hr-border-color: rgba(0,0,0,.1) !default; +//$hr-border-width: $border-width !default; +// +//$list-inline-padding: 5px !default; +// +//$dt-font-weight: bold !default; +// +//$nested-kbd-font-weight: bold !default; + +$padding-input-vertical: 11px !default; +$padding-input-horizontal: 19px !default; + +$padding-btn-vertical: 11px !default; +$padding-btn-horizontal: 22px !default; + +$padding-base-vertical: .5rem !default; +$padding-base-horizontal: .7rem !default; + +$padding-round-horizontal: 23px !default; + +$padding-simple-vertical: 10px !default; +$padding-simple-horizontal: 17px !default; + +$padding-large-vertical: 15px !default; +$padding-large-horizontal: 48px !default; + +$padding-small-vertical: 5px !default; +$padding-small-horizontal: 15px !default; + +$padding-label-vertical: 2px !default; +$padding-label-horizontal: 12px !default; + +$margin-large-vertical: 30px !default; +$margin-base-vertical: 15px !default; + +$margin-base-horizontal: 15px !default; diff --git a/dmp-frontend/src/assets/scss/material-dashboard.scss b/dmp-frontend/src/assets/scss/material-dashboard.scss new file mode 100644 index 000000000..94856c0dd --- /dev/null +++ b/dmp-frontend/src/assets/scss/material-dashboard.scss @@ -0,0 +1,56 @@ +/*! + + ========================================================= + * 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. + + */ + @import "~@angular/material/prebuilt-themes/indigo-pink.css"; + + @import "core/variables"; + @import "core/mixins"; + @import "~bootstrap/scss/bootstrap"; + + + // Core Components + @import "core/buttons"; + @import "core/checkboxes"; + @import "core/radios"; + @import "core/forms"; + @import "core/input-group"; + @import "core/images"; + @import "core/navbar"; + @import "core/alerts"; + @import "core/type"; + @import "core/tabs"; + @import "core/tooltip"; + @import "core/popover"; + @import "core/dropdown"; + @import "core/togglebutton"; + @import "core/ripples"; + @import "core/footers"; + @import "core/sidebar-and-main-panel"; + @import "core/fixed-plugin"; + @import "core/tables"; + @import "core/misc"; + +@import "core/cards"; +@import "core/cards/card-stats"; +@import "core/cards/card-profile"; +@import "core/cards/card-plain"; + + //plugin scss + @import "core/plugins/animate"; + @import "core/plugins/chartist"; + @import "core/plugins/perfect-scrollbar"; + + @import "core/responsive"; diff --git a/dmp-frontend/src/environments/environment.staging.ts b/dmp-frontend/src/environments/environment.staging.ts index ef77b449e..4347d4c37 100644 --- a/dmp-frontend/src/environments/environment.staging.ts +++ b/dmp-frontend/src/environments/environment.staging.ts @@ -10,7 +10,7 @@ export const environment = { loginProviders: { enabled: [1, 2, 3, 4, 5], facebookConfiguration: { clientId: '' }, - googleConfiguration: { clientId: '' }, + googleConfiguration: { clientId: '596924546661-83nhl986pnrpug5h624i5kptuao03dcd.apps.googleusercontent.com' }, linkedInConfiguration: { clientId: '', oauthUrl: 'https://www.linkedin.com/oauth/v2/authorization', diff --git a/dmp-frontend/src/environments/environment.ts b/dmp-frontend/src/environments/environment.ts index 76c1156eb..aa481010b 100644 --- a/dmp-frontend/src/environments/environment.ts +++ b/dmp-frontend/src/environments/environment.ts @@ -1,33 +1,54 @@ export const environment = { production: false, - Server: 'http://localhost:8080/api/', - App: 'http://localhost:4200/', + Server: "http://devel-23.local.cite.gr:8080/api/", + + App: "http://localhost:4200/", + HelpService: { Enabled: false, - Url: 'localhost:5000/', + + Url: "localhost:5000/" }, - defaultCulture: 'en-US', + + defaultCulture: "en-US", + loginProviders: { enabled: [1, 2, 3, 4, 5, 6], - facebookConfiguration: { clientId: '' }, - googleConfiguration: { clientId: '' }, + + facebookConfiguration: { clientId: "613977555670785" }, + + googleConfiguration: { + clientId: + "524432312250-sc9qsmtmbvlv05r44onl6l93ia3k9deo.apps.googleusercontent.com" + }, + linkedInConfiguration: { - clientId: '', - oauthUrl: 'https://www.linkedin.com/oauth/v2/authorization', - redirectUri: 'http://localhost:4200/login/linkedin' + clientId: "86bl8vfk77clh9", + + oauthUrl: "https://www.linkedin.com/oauth/v2/authorization", + + redirectUri: "http://localhost:4200/login/linkedin" }, + twitterConfiguration: { - clientId: '', - oauthUrl: 'https://api.twitter.com/oauth/authenticate' + clientId: "HiR4hQH9HNubKC5iKQy0l4mAZ", + + oauthUrl: "https://api.twitter.com/oauth/authenticate" }, + b2accessConfiguration: { - clientId: '', - oauthUrl: 'https://b2access-integration.fz-juelich.de:443/oauth2-as/oauth2-authz', - redirectUri: 'http://opendmp.eu/api/oauth/authorized/b2access' + clientId: "eudatdmptool", + + oauthUrl: + "https://b2access-integration.fz-juelich.de:443/oauth2-as/oauth2-authz", + + redirectUri: "http://opendmp.eu/api/oauth/authorized/b2access" } }, + logging: { enabled: true, + logLevels: ["debug", "info", "warning", "error"] - }, + } }; diff --git a/dmp-frontend/src/index.html b/dmp-frontend/src/index.html index 029b3db77..0b2d05b55 100644 --- a/dmp-frontend/src/index.html +++ b/dmp-frontend/src/index.html @@ -14,8 +14,11 @@ - - + + + + +