From 4c9c4cac5f8452436d46cfe920ef0cd81537997a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20Minelli?= <michael@minelli.me>
Date: Tue, 19 Dec 2023 20:54:45 +0100
Subject: [PATCH] CodeStyle => Apply to all code
---
AngularApp/.idea/csv-editor.xml | 16 +
AngularApp/.idea/jetbrainsConfiguration | 2 +-
AngularApp/angular.json | 340 ++---
AngularApp/karma.conf.js | 50 +-
AngularApp/package.json | 152 +--
AngularApp/protractor.conf.js | 34 +-
AngularApp/src/app/app.component.html | 1 -
AngularApp/src/app/app.component.spec.ts | 47 +-
AngularApp/src/app/app.component.ts | 10 +-
AngularApp/src/app/app.module.ts | 41 +-
AngularApp/src/app/app.routing.ts | 49 +-
.../src/app/components/components.module.ts | 28 +-
.../components/footer/footer.component.html | 3 +-
.../footer/footer.component.spec.ts | 33 +-
.../app/components/footer/footer.component.ts | 19 +-
.../components/navbar/navbar.component.html | 2 +-
.../navbar/navbar.component.spec.ts | 33 +-
.../app/components/navbar/navbar.component.ts | 109 +-
.../components/sidebar/sidebar.component.html | 82 +-
.../sidebar/sidebar.component.spec.ts | 33 +-
.../components/sidebar/sidebar.component.ts | 92 +-
.../app/dashboard/dashboard.component.html | 791 +++++------
.../app/dashboard/dashboard.component.spec.ts | 33 +-
.../src/app/dashboard/dashboard.component.ts | 295 +++--
.../exercise-page.component.html | 7 +-
.../exercise-page.component.spec.ts | 29 +-
.../exercise-page/exercise-page.component.ts | 53 +-
AngularApp/src/app/icons/icons.component.html | 53 +-
.../src/app/icons/icons.component.spec.ts | 33 +-
AngularApp/src/app/icons/icons.component.ts | 15 +-
.../admin-layout/admin-layout.component.html | 105 +-
.../admin-layout.component.spec.ts | 33 +-
.../admin-layout/admin-layout.component.ts | 307 ++---
.../admin-layout/admin-layout.module.ts | 66 +-
.../admin-layout/admin-layout.routing.ts | 64 +-
.../src/app/maps/maps.component.spec.ts | 33 +-
AngularApp/src/app/maps/maps.component.ts | 210 +--
.../notifications.component.html | 232 ++--
.../notifications.component.spec.ts | 33 +-
.../notifications/notifications.component.ts | 67 +-
.../app/table-list/table-list.component.html | 12 +-
.../table-list/table-list.component.spec.ts | 33 +-
.../app/table-list/table-list.component.ts | 59 +-
.../app/typography/typography.component.html | 180 +--
.../typography/typography.component.spec.ts | 33 +-
.../app/typography/typography.component.ts | 15 +-
.../src/app/upgrade/upgrade.component.html | 32 +-
.../src/app/upgrade/upgrade.component.spec.ts | 33 +-
.../src/app/upgrade/upgrade.component.ts | 15 +-
.../user-profile/user-profile.component.html | 134 +-
.../user-profile.component.spec.ts | 33 +-
.../user-profile/user-profile.component.ts | 15 +-
AngularApp/src/assets/css/demo.css | 33 +-
AngularApp/src/assets/scss/core/_alerts.scss | 114 +-
.../src/assets/scss/core/_angular-modal.scss | 162 +--
AngularApp/src/assets/scss/core/_buttons.scss | 435 ++++---
AngularApp/src/assets/scss/core/_cards.scss | 914 ++++++-------
.../src/assets/scss/core/_checkboxes.scss | 288 ++--
.../src/assets/scss/core/_dropdown.scss | 322 ++---
.../src/assets/scss/core/_example-pages.scss | 55 +-
.../src/assets/scss/core/_fixed-plugin.scss | 477 +++----
AngularApp/src/assets/scss/core/_footers.scss | 141 +-
AngularApp/src/assets/scss/core/_forms.scss | 537 ++++----
AngularApp/src/assets/scss/core/_images.scss | 11 +-
.../src/assets/scss/core/_input-group.scss | 30 +-
AngularApp/src/assets/scss/core/_misc.scss | 85 +-
AngularApp/src/assets/scss/core/_mixins.scss | 32 +-
AngularApp/src/assets/scss/core/_navbar.scss | 355 ++---
AngularApp/src/assets/scss/core/_popover.scss | 54 +-
AngularApp/src/assets/scss/core/_popups.scss | 92 +-
AngularApp/src/assets/scss/core/_radios.scss | 115 +-
.../src/assets/scss/core/_responsive.scss | 1061 +++++++--------
AngularApp/src/assets/scss/core/_ripples.scss | 62 +-
.../scss/core/_sidebar-and-main-panel.scss | 632 ++++-----
AngularApp/src/assets/scss/core/_tables.scss | 289 +++--
AngularApp/src/assets/scss/core/_tabs.scss | 91 +-
.../src/assets/scss/core/_togglebutton.scss | 153 +--
AngularApp/src/assets/scss/core/_tooltip.scss | 63 +-
AngularApp/src/assets/scss/core/_type.scss | 97 +-
.../src/assets/scss/core/_variables.scss | 54 +-
.../assets/scss/core/cards/_card-plain.scss | 25 +-
.../assets/scss/core/cards/_card-profile.scss | 96 +-
.../assets/scss/core/cards/_card-stats.scss | 77 +-
.../src/assets/scss/core/mixins/_alert.scss | 197 +--
.../assets/scss/core/mixins/_animations.scss | 144 +-
.../assets/scss/core/mixins/_breakpoints.scss | 28 +-
.../src/assets/scss/core/mixins/_buttons.scss | 521 ++++----
.../assets/scss/core/mixins/_chartist.scss | 121 +-
.../scss/core/mixins/_colored-shadows.scss | 148 +--
.../src/assets/scss/core/mixins/_drawer.scss | 396 +++---
.../src/assets/scss/core/mixins/_forms.scss | 655 +++++-----
.../src/assets/scss/core/mixins/_hover.scss | 26 +-
.../src/assets/scss/core/mixins/_layout.scss | 22 +-
.../scss/core/mixins/_navbar-colors.scss | 18 +-
.../src/assets/scss/core/mixins/_navs.scss | 64 +-
.../scss/core/mixins/_sidebar-color.scss | 64 +-
.../scss/core/mixins/_transparency.scss | 28 +-
.../src/assets/scss/core/mixins/_type.scss | 18 +-
.../assets/scss/core/mixins/_utilities.scss | 122 +-
.../assets/scss/core/mixins/_variables.scss | 26 +-
.../scss/core/mixins/_vendor-prefixes.scss | 364 ++++--
.../assets/scss/core/plugins/_animate.scss | 253 ++--
.../assets/scss/core/plugins/_chartist.scss | 552 ++++----
.../scss/core/plugins/_perfect-scrollbar.scss | 257 ++--
.../src/assets/scss/core/variables/_body.scss | 2 +-
.../_bootstrap-material-design-base.scss | 50 +-
.../variables/_bootstrap-material-design.scss | 306 ++---
.../assets/scss/core/variables/_brand.scss | 14 +-
.../assets/scss/core/variables/_buttons.scss | 110 +-
.../src/assets/scss/core/variables/_card.scss | 16 +-
.../src/assets/scss/core/variables/_code.scss | 2 +-
.../assets/scss/core/variables/_colors.scss | 596 ++++-----
.../scss/core/variables/_custom-forms.scss | 10 +-
.../assets/scss/core/variables/_drawer.scss | 4 +-
.../assets/scss/core/variables/_dropdown.scss | 2 +-
.../assets/scss/core/variables/_forms.scss | 38 +-
.../scss/core/variables/_list-group.scss | 6 +-
.../src/assets/scss/core/variables/_menu.scss | 24 +-
.../assets/scss/core/variables/_modals.scss | 30 +-
.../src/assets/scss/core/variables/_nav.scss | 56 +-
.../scss/core/variables/_pagination.scss | 10 +-
.../assets/scss/core/variables/_shadow.scss | 50 +-
.../assets/scss/core/variables/_snackbar.scss | 10 +-
.../assets/scss/core/variables/_spacing.scss | 2 +-
.../assets/scss/core/variables/_state.scss | 18 +-
.../assets/scss/core/variables/_tables.scss | 10 +-
.../assets/scss/core/variables/_tooltip.scss | 2 +-
.../src/assets/scss/core/variables/_type.scss | 86 +-
.../src/assets/scss/material-dashboard.scss | 83 +-
.../src/environments/environment.prod.ts | 2 +-
AngularApp/src/environments/environment.ts | 2 +-
AngularApp/src/index.html | 56 +-
AngularApp/src/main.ts | 29 +-
AngularApp/src/polyfills.ts | 2 -
AngularApp/src/test.ts | 10 +-
AngularApp/src/tsconfig.app.json | 22 +-
AngularApp/src/tsconfig.spec.json | 36 +-
AngularApp/src/typings.d.ts | 4 +-
AngularApp/tsconfig.json | 38 +-
AngularApp/tslint.json | 240 ++--
.../typings/modules/chartist/index.d.ts | 1154 +++++++++--------
.../typings/modules/chartist/typings.json | 12 +-
142 files changed, 9386 insertions(+), 8963 deletions(-)
create mode 100644 AngularApp/.idea/csv-editor.xml
diff --git a/AngularApp/.idea/csv-editor.xml b/AngularApp/.idea/csv-editor.xml
new file mode 100644
index 0000000..64a13bb
--- /dev/null
+++ b/AngularApp/.idea/csv-editor.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="CsvFileAttributes">
+ <option name="attributeMap">
+ <map>
+ <entry key="/a.csv">
+ <value>
+ <Attribute>
+ <option name="separator" value="," />
+ </Attribute>
+ </value>
+ </entry>
+ </map>
+ </option>
+ </component>
+</project>
\ No newline at end of file
diff --git a/AngularApp/.idea/jetbrainsConfiguration b/AngularApp/.idea/jetbrainsConfiguration
index ffc5d65..b65b72f 160000
--- a/AngularApp/.idea/jetbrainsConfiguration
+++ b/AngularApp/.idea/jetbrainsConfiguration
@@ -1 +1 @@
-Subproject commit ffc5d65f9f0f0e825688177425e526131aa84631
+Subproject commit b65b72f8c4b282721a26dcdcc6a5e1e6d5e8f6a2
diff --git a/AngularApp/angular.json b/AngularApp/angular.json
index 605d3d4..6354d99 100644
--- a/AngularApp/angular.json
+++ b/AngularApp/angular.json
@@ -1,183 +1,183 @@
{
- "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
- "version": 1,
- "newProjectRoot": "projects",
- "projects": {
- "material-dashboard-angular": {
- "root": "",
- "sourceRoot": "src",
- "projectType": "application",
- "architect": {
- "build": {
- "builder": "@angular-devkit/build-angular:browser",
- "options": {
- "outputPath": "dist",
- "index": "src/index.html",
- "main": "src/main.ts",
- "tsConfig": "src/tsconfig.app.json",
- "polyfills": "src/polyfills.ts",
- "assets": [
- "src/assets",
- "src/favicon.ico"
- ],
- "styles": [
- "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
- "src/assets/scss/material-dashboard.scss",
- "src/assets/css/demo.css"
- ],
- "scripts": [
- "node_modules/jquery/dist/jquery.js",
- "node_modules/popper.js/dist/umd/popper.js",
- "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
- "node_modules/arrive/src/arrive.js",
- "node_modules/moment/moment.js",
- "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
- "node_modules/bootstrap-notify/bootstrap-notify.js",
- "node_modules/chartist/dist/chartist.js"
- ],
- "allowedCommonJsDependencies": [
- "rxjs/add/operator/filter",
- "jquery",
- "chartist"
- ]
- },
- "configurations": {
- "production": {
- "optimization": {
- "scripts": true,
- "styles": {
- "minify": false,
- "inlineCritical": false
+ "$schema" : "./node_modules/@angular/cli/lib/config/schema.json",
+ "version" : 1,
+ "newProjectRoot": "projects",
+ "projects" : {
+ "material-dashboard-angular" : {
+ "root" : "",
+ "sourceRoot" : "src",
+ "projectType": "application",
+ "architect" : {
+ "build" : {
+ "builder" : "@angular-devkit/build-angular:browser",
+ "options" : {
+ "outputPath" : "dist",
+ "index" : "src/index.html",
+ "main" : "src/main.ts",
+ "tsConfig" : "src/tsconfig.app.json",
+ "polyfills" : "src/polyfills.ts",
+ "assets" : [
+ "src/assets",
+ "src/favicon.ico"
+ ],
+ "styles" : [
+ "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
+ "src/assets/scss/material-dashboard.scss",
+ "src/assets/css/demo.css"
+ ],
+ "scripts" : [
+ "node_modules/jquery/dist/jquery.js",
+ "node_modules/popper.js/dist/umd/popper.js",
+ "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
+ "node_modules/arrive/src/arrive.js",
+ "node_modules/moment/moment.js",
+ "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
+ "node_modules/bootstrap-notify/bootstrap-notify.js",
+ "node_modules/chartist/dist/chartist.js"
+ ],
+ "allowedCommonJsDependencies": [
+ "rxjs/add/operator/filter",
+ "jquery",
+ "chartist"
+ ]
+ },
+ "configurations": {
+ "production" : {
+ "optimization" : {
+ "scripts": true,
+ "styles" : {
+ "minify" : false,
+ "inlineCritical": false
+ },
+ "fonts" : true
+ },
+ "outputHashing" : "all",
+ "sourceMap" : false,
+ "namedChunks" : false,
+ "extractLicenses" : true,
+ "vendorChunk" : false,
+ "buildOptimizer" : true,
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with" : "src/environments/environment.prod.ts"
+ }
+ ]
+ },
+ "development": {
+ "vendorChunk" : true,
+ "extractLicenses": false,
+ "namedChunks" : true,
+ "buildOptimizer" : false,
+ "sourceMap" : true,
+ "optimization" : {
+ "scripts": true,
+ "styles" : {
+ "minify" : false,
+ "inlineCritical": true
+ },
+ "fonts" : true
+ },
+ "outputHashing" : "all"
+ }
+ }
},
- "fonts": true
- },
- "outputHashing": "all",
- "sourceMap": false,
- "namedChunks": false,
- "extractLicenses": true,
- "vendorChunk": false,
- "buildOptimizer": true,
- "fileReplacements": [
- {
- "replace": "src/environments/environment.ts",
- "with": "src/environments/environment.prod.ts"
- }
- ]
- },
- "development": {
- "vendorChunk": true,
- "extractLicenses": false,
- "namedChunks": true,
- "buildOptimizer": false,
- "sourceMap": true,
- "optimization": {
- "scripts": true,
- "styles": {
- "minify": false,
- "inlineCritical": true
+ "serve" : {
+ "builder" : "@angular-devkit/build-angular:dev-server",
+ "options" : {
+ "browserTarget": "material-dashboard-angular:build"
+ },
+ "configurations" : {
+ "production" : {
+ "browserTarget": "material-dashboard-angular:build:production"
+ },
+ "development": {
+ "browserTarget": "material-dashboard-angular:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "material-dashboard-angular:build"
+ }
+ },
+ "test" : {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "main" : "src/test.ts",
+ "karmaConfig": "./karma.conf.js",
+ "polyfills" : "src/polyfills.ts",
+ "tsConfig" : "src/tsconfig.spec.json",
+ "scripts" : [
+ "node_modules/jquery/dist/jquery.js",
+ "node_modules/popper.js/dist/umd/popper.js",
+ "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
+ "node_modules/arrive/src/arrive.js",
+ "node_modules/moment/moment.js",
+ "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
+ "node_modules/bootstrap-notify/bootstrap-notify.js",
+ "node_modules/chartist/dist/chartist.js"
+ ],
+ "styles" : [
+ "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
+ "src/assets/scss/material-dashboard.scss",
+ "src/assets/css/demo.css"
+ ],
+ "assets" : [
+ "src/assets",
+ "src/favicon.ico"
+ ]
+ }
},
- "fonts": true
- },
- "outputHashing": "all"
+ "lint" : {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": [
+ "src/tsconfig.app.json",
+ "src/tsconfig.spec.json"
+ ],
+ "exclude" : []
+ }
+ }
}
- }
},
- "serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
- "options": {
- "browserTarget": "material-dashboard-angular:build"
- },
- "configurations": {
- "production": {
- "browserTarget": "material-dashboard-angular:build:production"
- },
- "development": {
- "browserTarget": "material-dashboard-angular:build:development"
+ "material-dashboard-angular-e2e": {
+ "root" : "",
+ "sourceRoot" : "",
+ "projectType": "application",
+ "architect" : {
+ "e2e" : {
+ "builder": "@angular-devkit/build-angular:protractor",
+ "options": {
+ "protractorConfig": "./protractor.conf.js",
+ "devServerTarget" : "material-dashboard-angular:serve"
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": [
+ "e2e/tsconfig.e2e.json"
+ ],
+ "exclude" : []
+ }
+ }
}
- },
- "defaultConfiguration": "development"
- },
- "extract-i18n": {
- "builder": "@angular-devkit/build-angular:extract-i18n",
- "options": {
- "browserTarget": "material-dashboard-angular:build"
- }
- },
- "test": {
- "builder": "@angular-devkit/build-angular:karma",
- "options": {
- "main": "src/test.ts",
- "karmaConfig": "./karma.conf.js",
- "polyfills": "src/polyfills.ts",
- "tsConfig": "src/tsconfig.spec.json",
- "scripts": [
- "node_modules/jquery/dist/jquery.js",
- "node_modules/popper.js/dist/umd/popper.js",
- "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
- "node_modules/arrive/src/arrive.js",
- "node_modules/moment/moment.js",
- "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
- "node_modules/bootstrap-notify/bootstrap-notify.js",
- "node_modules/chartist/dist/chartist.js"
- ],
- "styles": [
- "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
- "src/assets/scss/material-dashboard.scss",
- "src/assets/css/demo.css"
- ],
- "assets": [
- "src/assets",
- "src/favicon.ico"
- ]
- }
- },
- "lint": {
- "builder": "@angular-devkit/build-angular:tslint",
- "options": {
- "tsConfig": [
- "src/tsconfig.app.json",
- "src/tsconfig.spec.json"
- ],
- "exclude": []
- }
}
- }
},
- "material-dashboard-angular-e2e": {
- "root": "",
- "sourceRoot": "",
- "projectType": "application",
- "architect": {
- "e2e": {
- "builder": "@angular-devkit/build-angular:protractor",
- "options": {
- "protractorConfig": "./protractor.conf.js",
- "devServerTarget": "material-dashboard-angular:serve"
- }
+ "defaultProject": "material-dashboard-angular",
+ "schematics" : {
+ "@schematics/angular:component": {
+ "prefix": "app",
+ "style" : "scss"
},
- "lint": {
- "builder": "@angular-devkit/build-angular:tslint",
- "options": {
- "tsConfig": [
- "e2e/tsconfig.e2e.json"
- ],
- "exclude": []
- }
+ "@schematics/angular:directive": {
+ "prefix": "app"
}
- }
- }
- },
- "defaultProject": "material-dashboard-angular",
- "schematics": {
- "@schematics/angular:component": {
- "prefix": "app",
- "style": "scss"
},
- "@schematics/angular:directive": {
- "prefix": "app"
+ "cli" : {
+ "analytics": false
}
- },
- "cli": {
- "analytics": false
- }
}
\ No newline at end of file
diff --git a/AngularApp/karma.conf.js b/AngularApp/karma.conf.js
index 056b4e9..43d90b4 100644
--- a/AngularApp/karma.conf.js
+++ b/AngularApp/karma.conf.js
@@ -2,43 +2,15 @@
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
- config.set({
- basePath: '',
- frameworks: ['jasmine', '@angular-devkit/build-angular'],
- plugins: [
- require('karma-jasmine'),
- require('karma-chrome-launcher'),
- require('karma-jasmine-html-reporter'),
- require('karma-coverage-istanbul-reporter'),
- require('@angular-devkit/build-angular/plugins/karma')
- ],
- client:{
- clearContext: false // leave Jasmine Spec Runner output visible in browser
- },
- files: [
-
- ],
- preprocessors: {
-
- },
- mime: {
- 'text/x-typescript': ['ts','tsx']
- },
- coverageIstanbulReporter: {
- dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
- fixWebpackSourcePaths: true
- },
- angularCli: {
- environment: 'dev'
- },
- reporters: config.angularCli && config.angularCli.codeCoverage
- ? ['progress', 'coverage-istanbul']
- : ['progress', 'kjhtml'],
- port: 9876,
- colors: true,
- logLevel: config.LOG_INFO,
- autoWatch: true,
- browsers: ['Chrome'],
- singleRun: false
- });
+ config.set({
+ basePath: '', frameworks: [ 'jasmine', '@angular-devkit/build-angular' ], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular-devkit/build-angular/plugins/karma') ], client: {
+ clearContext: false // leave Jasmine Spec Runner output visible in browser
+ }, files: [], preprocessors: {}, mime: {
+ 'text/x-typescript': [ 'ts', 'tsx' ]
+ }, coverageIstanbulReporter: {
+ dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ], fixWebpackSourcePaths: true
+ }, angularCli: {
+ environment: 'dev'
+ }, reporters: config.angularCli && config.angularCli.codeCoverage ? [ 'progress', 'coverage-istanbul' ] : [ 'progress', 'kjhtml' ], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: [ 'Chrome' ], singleRun: false
+ });
};
diff --git a/AngularApp/package.json b/AngularApp/package.json
index 121600e..076c07b 100644
--- a/AngularApp/package.json
+++ b/AngularApp/package.json
@@ -1,78 +1,78 @@
{
- "name": "material-dashboard-angular",
- "version": "2.8.0",
- "license": "MIT",
- "scripts": {
- "ng": "ng",
- "start": "ng serve",
- "build": "ng build",
- "test": "ng test",
- "lint": "ng lint",
- "e2e": "ng e2e",
- "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && ng serve -o"
- },
- "engines": {
- "node": "6.11.1",
- "npm": "3.10.9"
- },
- "private": true,
- "dependencies": {
- "@angular/animations": "^14.2.0",
- "@angular/cdk": "^14.2.0",
- "@angular/common": "^14.2.0",
- "@angular/compiler": "^14.2.0",
- "@angular/core": "^14.2.0",
- "@angular/elements": "^14.2.0",
- "@angular/forms": "^14.2.0",
- "@angular/localize": "^14.2.0",
- "@angular/material": "^14.2.0",
- "@angular/platform-browser": "^14.2.0",
- "@angular/platform-browser-dynamic": "^14.2.0",
- "@angular/router": "^14.2.0",
- "ajv": "8.11.0",
- "arrive": "2.4.1",
- "bootstrap": "4.6.1",
- "bootstrap-material-design": "4.1.3",
- "bootstrap-notify": "3.1.3",
- "chartist": "0.11.4",
- "classlist.js": "1.1.20150312",
- "eslint": "^8.11.0",
- "express": "4.17.3",
- "googleapis": "99.0.0",
- "hammerjs": "2.0.8",
- "jquery": "3.6.0",
- "moment": "2.29.1",
- "perfect-scrollbar": "1.5.5",
- "popper.js": "1.16.1",
- "rxjs": "~7.5.0",
- "tslib": "^2.3.0",
- "zone.js": "~0.11.4",
- "web-animations-js": "2.3.2"
- },
- "devDependencies": {
- "@angular-devkit/build-angular": "^14.2.7",
- "@angular/cli": "~14.2.7",
- "@angular/compiler-cli": "^14.2.0",
- "@angular/language-service": "14.2.0",
- "@types/jasmine": "~4.0.0",
- "@types/jasminewd2": "~2.0.10",
- "@types/node": "^17.0.21",
- "@types/bootstrap": "4.5.0",
- "@types/chartist": "0.11.1",
- "@types/google.maps": "3.47.4",
- "@types/jquery": "3.5.6",
- "sass": "1.32.13",
- "codelyzer": "6.0.2",
- "jasmine-core": "~4.4.0",
- "jasmine-spec-reporter": "~7.0.0",
- "karma": "~6.4.0",
- "karma-chrome-launcher": "~3.1.0",
- "karma-coverage": "~2.2.0",
- "karma-coverage-istanbul-reporter": "~3.0.3",
- "karma-jasmine": "~5.1.0",
- "karma-jasmine-html-reporter": "~2.0.0",
- "protractor": "7.0.0",
- "ts-node": "~10.9.1",
- "typescript": "~4.7.2"
- }
+ "name" : "material-dashboard-angular",
+ "version" : "2.8.0",
+ "license" : "MIT",
+ "scripts" : {
+ "ng" : "ng",
+ "start" : "ng serve",
+ "build" : "ng build",
+ "test" : "ng test",
+ "lint" : "ng lint",
+ "e2e" : "ng e2e",
+ "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && ng serve -o"
+ },
+ "engines" : {
+ "node": "6.11.1",
+ "npm" : "3.10.9"
+ },
+ "private" : true,
+ "dependencies" : {
+ "@angular/animations" : "^14.2.0",
+ "@angular/cdk" : "^14.2.0",
+ "@angular/common" : "^14.2.0",
+ "@angular/compiler" : "^14.2.0",
+ "@angular/core" : "^14.2.0",
+ "@angular/elements" : "^14.2.0",
+ "@angular/forms" : "^14.2.0",
+ "@angular/localize" : "^14.2.0",
+ "@angular/material" : "^14.2.0",
+ "@angular/platform-browser" : "^14.2.0",
+ "@angular/platform-browser-dynamic": "^14.2.0",
+ "@angular/router" : "^14.2.0",
+ "ajv" : "8.11.0",
+ "arrive" : "2.4.1",
+ "bootstrap" : "4.6.1",
+ "bootstrap-material-design" : "4.1.3",
+ "bootstrap-notify" : "3.1.3",
+ "chartist" : "0.11.4",
+ "classlist.js" : "1.1.20150312",
+ "eslint" : "^8.11.0",
+ "express" : "4.17.3",
+ "googleapis" : "99.0.0",
+ "hammerjs" : "2.0.8",
+ "jquery" : "3.6.0",
+ "moment" : "2.29.1",
+ "perfect-scrollbar" : "1.5.5",
+ "popper.js" : "1.16.1",
+ "rxjs" : "~7.5.0",
+ "tslib" : "^2.3.0",
+ "zone.js" : "~0.11.4",
+ "web-animations-js" : "2.3.2"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular" : "^14.2.7",
+ "@angular/cli" : "~14.2.7",
+ "@angular/compiler-cli" : "^14.2.0",
+ "@angular/language-service" : "14.2.0",
+ "@types/jasmine" : "~4.0.0",
+ "@types/jasminewd2" : "~2.0.10",
+ "@types/node" : "^17.0.21",
+ "@types/bootstrap" : "4.5.0",
+ "@types/chartist" : "0.11.1",
+ "@types/google.maps" : "3.47.4",
+ "@types/jquery" : "3.5.6",
+ "sass" : "1.32.13",
+ "codelyzer" : "6.0.2",
+ "jasmine-core" : "~4.4.0",
+ "jasmine-spec-reporter" : "~7.0.0",
+ "karma" : "~6.4.0",
+ "karma-chrome-launcher" : "~3.1.0",
+ "karma-coverage" : "~2.2.0",
+ "karma-coverage-istanbul-reporter": "~3.0.3",
+ "karma-jasmine" : "~5.1.0",
+ "karma-jasmine-html-reporter" : "~2.0.0",
+ "protractor" : "7.0.0",
+ "ts-node" : "~10.9.1",
+ "typescript" : "~4.7.2"
+ }
}
diff --git a/AngularApp/protractor.conf.js b/AngularApp/protractor.conf.js
index 1c5e1e5..f73ed92 100644
--- a/AngularApp/protractor.conf.js
+++ b/AngularApp/protractor.conf.js
@@ -4,27 +4,15 @@
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
- allScriptsTimeout: 11000,
- specs: [
- './e2e/**/*.e2e-spec.ts'
- ],
- capabilities: {
- 'browserName': 'chrome'
- },
- directConnect: true,
- baseUrl: 'http://localhost:4200/',
- framework: 'jasmine',
- jasmineNodeOpts: {
- showColors: true,
- defaultTimeoutInterval: 30000,
- print: function() {}
- },
- beforeLaunch: function() {
- require('ts-node').register({
- project: 'e2e/tsconfig.e2e.json'
- });
- },
- onPrepare() {
- jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
- }
+ allScriptsTimeout: 11000, specs: [ './e2e/**/*.e2e-spec.ts' ], capabilities: {
+ 'browserName': 'chrome'
+ }, directConnect: true, baseUrl: 'http://localhost:4200/', framework: 'jasmine', jasmineNodeOpts: {
+ showColors: true, defaultTimeoutInterval: 30000, print: function () {}
+ }, beforeLaunch: function () {
+ require('ts-node').register({
+ project: 'e2e/tsconfig.e2e.json'
+ });
+ }, onPrepare() {
+ jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+ }
};
diff --git a/AngularApp/src/app/app.component.html b/AngularApp/src/app/app.component.html
index 79be59c..0680b43 100644
--- a/AngularApp/src/app/app.component.html
+++ b/AngularApp/src/app/app.component.html
@@ -1,2 +1 @@
-
<router-outlet></router-outlet>
diff --git a/AngularApp/src/app/app.component.spec.ts b/AngularApp/src/app/app.component.spec.ts
index c740bcd..c4481a5 100644
--- a/AngularApp/src/app/app.component.spec.ts
+++ b/AngularApp/src/app/app.component.spec.ts
@@ -1,32 +1,31 @@
-import { TestBed, async } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
+
describe('AppComponent', () => {
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [
- AppComponent
- ],
- }).compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ AppComponent ]
+ }).compileComponents();
+ }));
- it('should create the app', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app).toBeTruthy();
- }));
+ it('should create the app', async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
- it(`should have as title 'app works!'`, async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app.title).toEqual('app works!');
- }));
+ it(`should have as title 'app works!'`, async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app.title).toEqual('app works!');
+ }));
- it('should render title in a h1 tag', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.debugElement.nativeElement;
- expect(compiled.querySelector('h1').textContent).toContain('app works!');
- }));
+ it('should render title in a h1 tag', async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ fixture.detectChanges();
+ const compiled = fixture.debugElement.nativeElement;
+ expect(compiled.querySelector('h1').textContent).toContain('app works!');
+ }));
});
diff --git a/AngularApp/src/app/app.component.ts b/AngularApp/src/app/app.component.ts
index e716445..c365285 100644
--- a/AngularApp/src/app/app.component.ts
+++ b/AngularApp/src/app/app.component.ts
@@ -1,11 +1,11 @@
-import { Component} from '@angular/core';
+import { Component } from '@angular/core';
@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
+ selector : 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls : [ './app.component.css' ]
+ })
export class AppComponent {
}
diff --git a/AngularApp/src/app/app.module.ts b/AngularApp/src/app/app.module.ts
index 03932ba..d3ebaec 100644
--- a/AngularApp/src/app/app.module.ts
+++ b/AngularApp/src/app/app.module.ts
@@ -1,29 +1,20 @@
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
-import { RouterModule } from '@angular/router';
-import { AppRoutingModule } from './app.routing';
-import { ComponentsModule } from './components/components.module';
-import { AppComponent } from './app.component';
-import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+import { AppRoutingModule } from './app.routing';
+import { ComponentsModule } from './components/components.module';
+import { AppComponent } from './app.component';
+import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
+
+
// import { ExercisePageComponent } from './exercise-page/exercise-page.component';
@NgModule({
- imports: [
- BrowserAnimationsModule,
- FormsModule,
- ReactiveFormsModule,
- HttpClientModule,
- ComponentsModule,
- RouterModule,
- AppRoutingModule,
- ],
- declarations: [
- AppComponent,
- AdminLayoutComponent,
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
+ imports : [ BrowserAnimationsModule, FormsModule, ReactiveFormsModule, HttpClientModule, ComponentsModule, RouterModule, AppRoutingModule ],
+ declarations: [ AppComponent, AdminLayoutComponent ],
+ providers : [],
+ bootstrap : [ AppComponent ]
+ })
+export class AppModule {}
diff --git a/AngularApp/src/app/app.routing.ts b/AngularApp/src/app/app.routing.ts
index f2f01ac..2956d65 100644
--- a/AngularApp/src/app/app.routing.ts
+++ b/AngularApp/src/app/app.routing.ts
@@ -1,34 +1,29 @@
-import { NgModule } from '@angular/core';
-import { CommonModule, } from '@angular/common';
-import { BrowserModule } from '@angular/platform-browser';
-import { Routes, RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule, Routes } from '@angular/router';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
-const routes: Routes =[
- {
- path: '',
+
+const routes: Routes = [ {
+ path : '',
redirectTo: 'dashboard',
- pathMatch: 'full',
- }, {
- path: '',
+ pathMatch : 'full'
+}, {
+ path : '',
component: AdminLayoutComponent,
- children: [{
- path: '',
- loadChildren: () => import('./layouts/admin-layout/admin-layout.module').then(m => m.AdminLayoutModule)
- }]
- }
-];
+ children : [ {
+ path : '',
+ loadChildren: () => import('./layouts/admin-layout/admin-layout.module').then(m => m.AdminLayoutModule)
+ } ]
+} ];
+
@NgModule({
- imports: [
- CommonModule,
- BrowserModule,
- RouterModule.forRoot(routes,{
- useHash: true
- })
- ],
- exports: [
- ],
-})
-export class AppRoutingModule { }
+ imports: [ CommonModule, BrowserModule, RouterModule.forRoot(routes, {
+ useHash: true
+ }) ],
+ exports: []
+ })
+export class AppRoutingModule {}
diff --git a/AngularApp/src/app/components/components.module.ts b/AngularApp/src/app/components/components.module.ts
index 5f04709..cc8b46f 100644
--- a/AngularApp/src/app/components/components.module.ts
+++ b/AngularApp/src/app/components/components.module.ts
@@ -1,25 +1,15 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
-import { FooterComponent } from './footer/footer.component';
-import { NavbarComponent } from './navbar/navbar.component';
+import { FooterComponent } from './footer/footer.component';
+import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
+
@NgModule({
- imports: [
- CommonModule,
- RouterModule,
- ],
- declarations: [
- FooterComponent,
- NavbarComponent,
- SidebarComponent
- ],
- exports: [
- FooterComponent,
- NavbarComponent,
- SidebarComponent
- ]
-})
-export class ComponentsModule { }
+ imports : [ CommonModule, RouterModule ],
+ declarations: [ FooterComponent, NavbarComponent, SidebarComponent ],
+ exports : [ FooterComponent, NavbarComponent, SidebarComponent ]
+ })
+export class ComponentsModule {}
diff --git a/AngularApp/src/app/components/footer/footer.component.html b/AngularApp/src/app/components/footer/footer.component.html
index 4eda89a..4dac07f 100644
--- a/AngularApp/src/app/components/footer/footer.component.html
+++ b/AngularApp/src/app/components/footer/footer.component.html
@@ -25,8 +25,7 @@
</ul>
</nav>
<div class="copyright pull-right">
- ©
- {{test | date: 'yyyy'}}, made with love by
+ © {{ test | date: 'yyyy' }}, made with love by
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
</div>
</div>
diff --git a/AngularApp/src/app/components/footer/footer.component.spec.ts b/AngularApp/src/app/components/footer/footer.component.spec.ts
index 2ca6c45..5a10d76 100644
--- a/AngularApp/src/app/components/footer/footer.component.spec.ts
+++ b/AngularApp/src/app/components/footer/footer.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
+
describe('FooterComponent', () => {
- let component: FooterComponent;
- let fixture: ComponentFixture<FooterComponent>;
+ let component: FooterComponent;
+ let fixture: ComponentFixture<FooterComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ FooterComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FooterComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(FooterComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/components/footer/footer.component.ts b/AngularApp/src/app/components/footer/footer.component.ts
index 6c9228a..3d0b29b 100644
--- a/AngularApp/src/app/components/footer/footer.component.ts
+++ b/AngularApp/src/app/components/footer/footer.component.ts
@@ -1,16 +1,17 @@
import { Component, OnInit } from '@angular/core';
+
@Component({
- selector: 'app-footer',
- templateUrl: './footer.component.html',
- styleUrls: ['./footer.component.css']
-})
+ selector : 'app-footer',
+ templateUrl: './footer.component.html',
+ styleUrls : [ './footer.component.css' ]
+ })
export class FooterComponent implements OnInit {
- test : Date = new Date();
-
- constructor() { }
+ test: Date = new Date();
+
+ constructor() { }
- ngOnInit() {
- }
+ ngOnInit() {
+ }
}
diff --git a/AngularApp/src/app/components/navbar/navbar.component.html b/AngularApp/src/app/components/navbar/navbar.component.html
index a38a6c7..8a213a3 100644
--- a/AngularApp/src/app/components/navbar/navbar.component.html
+++ b/AngularApp/src/app/components/navbar/navbar.component.html
@@ -1,7 +1,7 @@
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
<div class="container-fluid">
<div class="navbar-wrapper">
- <a class="navbar-brand" href="javascript:void(0)">{{getTitle()}}</a>
+ <a class="navbar-brand" href="javascript:void(0)">{{ getTitle() }}</a>
</div>
<button mat-raised-button class="navbar-toggler" type="button" (click)="sidebarToggle()">
<span class="sr-only">Toggle navigation</span>
diff --git a/AngularApp/src/app/components/navbar/navbar.component.spec.ts b/AngularApp/src/app/components/navbar/navbar.component.spec.ts
index 9032ad2..44b0f1b 100644
--- a/AngularApp/src/app/components/navbar/navbar.component.spec.ts
+++ b/AngularApp/src/app/components/navbar/navbar.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NavbarComponent } from './navbar.component';
+
describe('NavbarComponent', () => {
- let component: NavbarComponent;
- let fixture: ComponentFixture<NavbarComponent>;
+ let component: NavbarComponent;
+ let fixture: ComponentFixture<NavbarComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ NavbarComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ NavbarComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(NavbarComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NavbarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/components/navbar/navbar.component.ts b/AngularApp/src/app/components/navbar/navbar.component.ts
index bccc885..df2af1b 100644
--- a/AngularApp/src/app/components/navbar/navbar.component.ts
+++ b/AngularApp/src/app/components/navbar/navbar.component.ts
@@ -1,43 +1,44 @@
-import { Component, OnInit, ElementRef } from '@angular/core';
-import { ROUTES } from '../sidebar/sidebar.component';
-import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
-import { Router } from '@angular/router';
+import { Component, ElementRef, OnInit } from '@angular/core';
+import { ROUTES } from '../sidebar/sidebar.component';
+import { Location } from '@angular/common';
+import { Router } from '@angular/router';
+
@Component({
- selector: 'app-navbar',
- templateUrl: './navbar.component.html',
- styleUrls: ['./navbar.component.css']
-})
+ 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;
+ mobile_menu_visible: any = 0;
private toggleButton: any;
private sidebarVisible: boolean;
- constructor(location: Location, private element: ElementRef, private router: Router) {
- this.location = location;
- this.sidebarVisible = false;
+ constructor(location: Location, private element: ElementRef, private router: Router) {
+ this.location = location;
+ this.sidebarVisible = false;
}
- ngOnInit(){
- this.listTitles = 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;
- }
- });
+ ngOnInit() {
+ this.listTitles = 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;
+ }
+ });
}
sidebarOpen() {
const toggleButton = this.toggleButton;
const body = document.getElementsByTagName('body')[0];
- setTimeout(function(){
+ setTimeout(function () {
toggleButton.classList.add('toggled');
}, 500);
@@ -45,37 +46,39 @@ export class NavbarComponent implements OnInit {
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) {
+ if ( this.sidebarVisible === false ) {
this.sidebarOpen();
} else {
this.sidebarClose();
}
const body = document.getElementsByTagName('body')[0];
- if (this.mobile_menu_visible == 1) {
+ if ( this.mobile_menu_visible == 1 ) {
// $('html').removeClass('nav-open');
body.classList.remove('nav-open');
- if ($layer) {
+ if ( $layer ) {
$layer.remove();
}
- setTimeout(function() {
+ setTimeout(function () {
$toggle.classList.remove('toggled');
}, 400);
this.mobile_menu_visible = 0;
} else {
- setTimeout(function() {
+ setTimeout(function () {
$toggle.classList.add('toggled');
}, 430);
@@ -83,24 +86,24 @@ export class NavbarComponent implements OnInit {
$layer.setAttribute('class', 'close-layer');
- if (body.querySelectorAll('.main-panel')) {
+ if ( body.querySelectorAll('.main-panel') ) {
document.getElementsByClassName('main-panel')[0].appendChild($layer);
- }else if (body.classList.contains('off-canvas-sidebar')) {
+ } else if ( body.classList.contains('off-canvas-sidebar') ) {
document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer);
}
- setTimeout(function() {
+ 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);
+ $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');
@@ -109,17 +112,17 @@ export class NavbarComponent implements OnInit {
}
};
- getTitle(){
- var titlee = this.location.prepareExternalUrl(this.location.path());
- if(titlee.charAt(0) === '#'){
- titlee = titlee.slice( 1 );
- }
-
- for(var item = 0; item < this.listTitles.length; item++){
- if(this.listTitles[item].path === titlee){
- return this.listTitles[item].title;
- }
- }
- return 'Dashboard';
+ getTitle() {
+ var titlee = this.location.prepareExternalUrl(this.location.path());
+ if ( titlee.charAt(0) === '#' ) {
+ titlee = titlee.slice(1);
+ }
+
+ for ( var item = 0 ; item < this.listTitles.length ; item++ ) {
+ if ( this.listTitles[item].path === titlee ) {
+ return this.listTitles[item].title;
+ }
+ }
+ return 'Dashboard';
}
}
diff --git a/AngularApp/src/app/components/sidebar/sidebar.component.html b/AngularApp/src/app/components/sidebar/sidebar.component.html
index efeea8b..3d4ed6e 100644
--- a/AngularApp/src/app/components/sidebar/sidebar.component.html
+++ b/AngularApp/src/app/components/sidebar/sidebar.component.html
@@ -1,14 +1,14 @@
<div class="logo">
<a href="https://www.creative-tim.com" class="simple-text">
<div class="logo-img">
- <img src="/assets/img/angular2-logo-red.png"/>
+ <img src="/assets/img/angular2-logo-red.png" />
</div>
Creative Tim
</a>
</div>
<div class="sidebar-wrapper">
- <div *ngIf="isMobileMenu()">
- <form class="navbar-form">
+ <div *ngIf="isMobileMenu()">
+ <form class="navbar-form">
<span class="bmd-form-group">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
@@ -18,47 +18,47 @@
</button>
</div>
</span>
- </form>
- <ul class="nav navbar-nav nav-mobile-menu">
- <li class="nav-item">
- <a class="nav-link" href="javascript:void(0)">
- <i class="material-icons">dashboard</i>
- <p>
- <span class="d-lg-none d-md-block">Stats</span>
- </p>
- </a>
- </li>
- <li class="nav-item dropdown">
- <a class="nav-link" href="javascript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <i class="material-icons">notifications</i>
- <span class="notification">5</span>
- <p>
- <span class="d-lg-none d-md-block">Some Actions</span>
- </p>
- </a>
- <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
- <a class="dropdown-item" href="#">Mike John responded to your email</a>
- <a class="dropdown-item" href="#">You have 5 new tasks</a>
- <a class="dropdown-item" href="#">You're now friend with Andrew</a>
- <a class="dropdown-item" href="#">Another Notification</a>
- <a class="dropdown-item" href="#">Another One</a>
- </div>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="javascript:void(0)">
- <i class="material-icons">person</i>
- <p>
- <span class="d-lg-none d-md-block">Account</span>
- </p>
- </a>
- </li>
- </ul>
- </div>
+ </form>
+ <ul class="nav navbar-nav nav-mobile-menu">
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0)">
+ <i class="material-icons">dashboard</i>
+ <p>
+ <span class="d-lg-none d-md-block">Stats</span>
+ </p>
+ </a>
+ </li>
+ <li class="nav-item dropdown">
+ <a class="nav-link" href="javascript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <i class="material-icons">notifications</i>
+ <span class="notification">5</span>
+ <p>
+ <span class="d-lg-none d-md-block">Some Actions</span>
+ </p>
+ </a>
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+ <a class="dropdown-item" href="#">Mike John responded to your email</a>
+ <a class="dropdown-item" href="#">You have 5 new tasks</a>
+ <a class="dropdown-item" href="#">You're now friend with Andrew</a>
+ <a class="dropdown-item" href="#">Another Notification</a>
+ <a class="dropdown-item" href="#">Another One</a>
+ </div>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0)">
+ <i class="material-icons">person</i>
+ <p>
+ <span class="d-lg-none d-md-block">Account</span>
+ </p>
+ </a>
+ </li>
+ </ul>
+ </div>
<ul class="nav">
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
<a class="nav-link" [routerLink]="[menuItem.path]">
- <i class="material-icons">{{menuItem.icon}}</i>
- <p>{{menuItem.title}}</p>
+ <i class="material-icons">{{ menuItem.icon }}</i>
+ <p>{{ menuItem.title }}</p>
</a>
</li>
</ul>
diff --git a/AngularApp/src/app/components/sidebar/sidebar.component.spec.ts b/AngularApp/src/app/components/sidebar/sidebar.component.spec.ts
index f29709f..51a75ae 100644
--- a/AngularApp/src/app/components/sidebar/sidebar.component.spec.ts
+++ b/AngularApp/src/app/components/sidebar/sidebar.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SidebarComponent } from './sidebar.component';
+
describe('SidebarComponent', () => {
- let component: SidebarComponent;
- let fixture: ComponentFixture<SidebarComponent>;
+ let component: SidebarComponent;
+ let fixture: ComponentFixture<SidebarComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ SidebarComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SidebarComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(SidebarComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SidebarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/components/sidebar/sidebar.component.ts b/AngularApp/src/app/components/sidebar/sidebar.component.ts
index d5df9cc..5d3f34d 100644
--- a/AngularApp/src/app/components/sidebar/sidebar.component.ts
+++ b/AngularApp/src/app/components/sidebar/sidebar.component.ts
@@ -1,41 +1,81 @@
import { Component, OnInit } from '@angular/core';
+
declare const $: any;
+
+
declare interface RouteInfo {
path: string;
title: string;
icon: string;
class: string;
}
-export const ROUTES: RouteInfo[] = [
- { path: '/dashboard', title: 'Dashboard', icon: 'dashboard', class: '' },
- { path: '/user-profile', title: 'Create assignment', icon:'assignment_add', class: '' },
- { path: '/table-list', title: 'Assignment', icon:'content_paste', class: '' },
- { path: '/exercise-page', title: 'Exercise Page', icon:'description', class: '' },
- { path: '/typography', title: 'Typography', icon:'library_books', class: '' },
+
+
+export const ROUTES: RouteInfo[] = [ {
+ path : '/dashboard',
+ title: 'Dashboard',
+ icon : 'dashboard',
+ class: ''
+},
+ {
+ path : '/user-profile',
+ title: 'Create assignment',
+ icon : 'assignment_add',
+ class: ''
+ },
+ {
+ path : '/table-list',
+ title: 'Assignment',
+ icon : 'content_paste',
+ class: ''
+ },
+ {
+ path : '/exercise-page',
+ title: 'Exercise Page',
+ icon : 'description',
+ class: ''
+ },
+ {
+ path : '/typography',
+ title: 'Typography',
+ icon : 'library_books',
+ class: ''
+ },
// { path: '/icons', title: 'Icons', icon:'bubble_chart', class: '' },
// { path: '/maps', title: 'Maps', icon:'location_on', class: '' },
- { path: '/notifications', title: 'Notifications', icon:'notifications', class: '' },
- { path: '/upgrade', title: 'Upgrade to PRO', icon:'unarchive', class: 'active-pro' },
-];
+ {
+ path : '/notifications',
+ title: 'Notifications',
+ icon : 'notifications',
+ class: ''
+ },
+ {
+ path : '/upgrade',
+ title: 'Upgrade to PRO',
+ icon : 'unarchive',
+ class: 'active-pro'
+ } ];
+
@Component({
- selector: 'app-sidebar',
- templateUrl: './sidebar.component.html',
- styleUrls: ['./sidebar.component.css']
-})
+ selector : 'app-sidebar',
+ templateUrl: './sidebar.component.html',
+ styleUrls : [ './sidebar.component.css' ]
+ })
export class SidebarComponent implements OnInit {
- menuItems: any[];
-
- constructor() { }
-
- ngOnInit() {
- this.menuItems = ROUTES.filter(menuItem => menuItem);
- }
- isMobileMenu() {
- if ($(window).width() > 991) {
- return false;
- }
- return true;
- };
+ menuItems: any[];
+
+ constructor() { }
+
+ ngOnInit() {
+ this.menuItems = ROUTES.filter(menuItem => menuItem);
+ }
+
+ isMobileMenu() {
+ if ( $(window).width() > 991 ) {
+ return false;
+ }
+ return true;
+ };
}
diff --git a/AngularApp/src/app/dashboard/dashboard.component.html b/AngularApp/src/app/dashboard/dashboard.component.html
index 86c6627..1ba7ca6 100644
--- a/AngularApp/src/app/dashboard/dashboard.component.html
+++ b/AngularApp/src/app/dashboard/dashboard.component.html
@@ -1,415 +1,416 @@
<div class="main-content">
- <div class="container-fluid">
- <div class="row">
- <div class="col-lg-3 col-md-6 col-sm-6">
- <div class="card card-stats">
- <div class="card-header card-header-warning card-header-icon">
- <div class="card-icon">
- <i class="material-icons">content_copy</i>
- </div>
- <p class="card-category">Used Space</p>
- <h3 class="card-title">49/50
- <small>GB</small>
- </h3>
- </div>
- <div class="card-footer">
- <div class="stats">
- <i class="material-icons text-danger">warning</i>
- <a href="javascript:void(0)">Get More Space...</a>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3 col-md-6 col-sm-6">
- <div class="card card-stats">
- <div class="card-header card-header-success card-header-icon">
- <div class="card-icon">
- <i class="material-icons">store</i>
- </div>
- <p class="card-category">Revenue</p>
- <h3 class="card-title">$34,245</h3>
- </div>
- <div class="card-footer">
- <div class="stats">
- <i class="material-icons">date_range</i> Last 24 Hours
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3 col-md-6 col-sm-6">
- <div class="card card-stats">
- <div class="card-header card-header-danger card-header-icon">
- <div class="card-icon">
- <i class="material-icons">info_outline</i>
- </div>
- <p class="card-category">Fixed Issues</p>
- <h3 class="card-title">75</h3>
- </div>
- <div class="card-footer">
- <div class="stats">
- <i class="material-icons">local_offer</i> Tracked from Github
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3 col-md-6 col-sm-6">
- <div class="card card-stats">
- <div class="card-header card-header-info card-header-icon">
- <div class="card-icon">
- <i class="fa fa-twitter"></i>
- </div>
- <p class="card-category">Followers</p>
- <h3 class="card-title">+245</h3>
- </div>
- <div class="card-footer">
- <div class="stats">
- <i class="material-icons">update</i> Just Updated
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <div class="card card-chart">
- <div class="card-header card-header-success">
- <div class="ct-chart" id="dailySalesChart"></div>
- </div>
- <div class="card-body">
- <h4 class="card-title">Daily Sales</h4>
- <p class="card-category">
- <span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
- </div>
- <div class="card-footer">
- <div class="stats">
- <i class="material-icons">access_time</i> updated 4 minutes ago
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-4">
- <div class="card card-chart">
- <div class="card-header card-header-warning">
- <div class="ct-chart" id="websiteViewsChart"></div>
- </div>
- <div class="card-body">
- <h4 class="card-title">Email Subscriptions</h4>
- <p class="card-category">Last Campaign Performance</p>
- </div>
- <div class="card-footer">
- <div class="stats">
- <i class="material-icons">access_time</i> campaign sent 2 days ago
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-4">
- <div class="card card-chart">
- <div class="card-header card-header-danger">
- <div class="ct-chart" id="completedTasksChart"></div>
- </div>
- <div class="card-body">
- <h4 class="card-title">Completed Tasks</h4>
- <p class="card-category">Last Campaign Performance</p>
- </div>
- <div class="card-footer">
- <div class="stats">
- <i class="material-icons">access_time</i> campaign sent 2 days ago
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-lg-6 col-md-12">
- <div class="card">
- <div class="card-header card-header-tabs card-header-primary">
- <div class="nav-tabs-navigation">
- <div class="nav-tabs-wrapper">
- <span class="nav-tabs-title">Tasks:</span>
- <ul class="nav nav-tabs" data-tabs="tabs">
- <li class="nav-item">
- <a mat-button class="nav-link active" href="#profile" data-toggle="tab">
- <i class="material-icons">bug_report</i> Bugs
- <div class="ripple-container"></div>
- </a>
- </li>
- <li class="nav-item">
- <a mat-button class="nav-link" href="#messages" data-toggle="tab">
- <i class="material-icons">code</i> Website
- <div class="ripple-container"></div>
- </a>
- </li>
- <li class="nav-item">
- <a mat-button class="nav-link" href="#settings" data-toggle="tab">
- <i class="material-icons">cloud</i> Server
- <div class="ripple-container"></div>
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="card-body">
- <div class="tab-content">
- <div class="tab-pane active" id="profile">
- <table class="table">
- <tbody>
- <tr>
- <td>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="checkbox" value="" checked>
- <span class="form-check-sign">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-lg-3 col-md-6 col-sm-6">
+ <div class="card card-stats">
+ <div class="card-header card-header-warning card-header-icon">
+ <div class="card-icon">
+ <i class="material-icons">content_copy</i>
+ </div>
+ <p class="card-category">Used Space</p>
+ <h3 class="card-title">49/50
+ <small>GB</small>
+ </h3>
+ </div>
+ <div class="card-footer">
+ <div class="stats">
+ <i class="material-icons text-danger">warning</i>
+ <a href="javascript:void(0)">Get More Space...</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-lg-3 col-md-6 col-sm-6">
+ <div class="card card-stats">
+ <div class="card-header card-header-success card-header-icon">
+ <div class="card-icon">
+ <i class="material-icons">store</i>
+ </div>
+ <p class="card-category">Revenue</p>
+ <h3 class="card-title">$34,245</h3>
+ </div>
+ <div class="card-footer">
+ <div class="stats">
+ <i class="material-icons">date_range</i> Last 24 Hours
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-lg-3 col-md-6 col-sm-6">
+ <div class="card card-stats">
+ <div class="card-header card-header-danger card-header-icon">
+ <div class="card-icon">
+ <i class="material-icons">info_outline</i>
+ </div>
+ <p class="card-category">Fixed Issues</p>
+ <h3 class="card-title">75</h3>
+ </div>
+ <div class="card-footer">
+ <div class="stats">
+ <i class="material-icons">local_offer</i> Tracked from Github
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-lg-3 col-md-6 col-sm-6">
+ <div class="card card-stats">
+ <div class="card-header card-header-info card-header-icon">
+ <div class="card-icon">
+ <i class="fa fa-twitter"></i>
+ </div>
+ <p class="card-category">Followers</p>
+ <h3 class="card-title">+245</h3>
+ </div>
+ <div class="card-footer">
+ <div class="stats">
+ <i class="material-icons">update</i> Just Updated
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-4">
+ <div class="card card-chart">
+ <div class="card-header card-header-success">
+ <div class="ct-chart" id="dailySalesChart"></div>
+ </div>
+ <div class="card-body">
+ <h4 class="card-title">Daily Sales</h4>
+ <p class="card-category">
+ <span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.
+ </p>
+ </div>
+ <div class="card-footer">
+ <div class="stats">
+ <i class="material-icons">access_time</i> updated 4 minutes ago
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card card-chart">
+ <div class="card-header card-header-warning">
+ <div class="ct-chart" id="websiteViewsChart"></div>
+ </div>
+ <div class="card-body">
+ <h4 class="card-title">Email Subscriptions</h4>
+ <p class="card-category">Last Campaign Performance</p>
+ </div>
+ <div class="card-footer">
+ <div class="stats">
+ <i class="material-icons">access_time</i> campaign sent 2 days ago
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card card-chart">
+ <div class="card-header card-header-danger">
+ <div class="ct-chart" id="completedTasksChart"></div>
+ </div>
+ <div class="card-body">
+ <h4 class="card-title">Completed Tasks</h4>
+ <p class="card-category">Last Campaign Performance</p>
+ </div>
+ <div class="card-footer">
+ <div class="stats">
+ <i class="material-icons">access_time</i> campaign sent 2 days ago
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-lg-6 col-md-12">
+ <div class="card">
+ <div class="card-header card-header-tabs card-header-primary">
+ <div class="nav-tabs-navigation">
+ <div class="nav-tabs-wrapper">
+ <span class="nav-tabs-title">Tasks:</span>
+ <ul class="nav nav-tabs" data-tabs="tabs">
+ <li class="nav-item">
+ <a mat-button class="nav-link active" href="#profile" data-toggle="tab">
+ <i class="material-icons">bug_report</i> Bugs
+ <div class="ripple-container"></div>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a mat-button class="nav-link" href="#messages" data-toggle="tab">
+ <i class="material-icons">code</i> Website
+ <div class="ripple-container"></div>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a mat-button class="nav-link" href="#settings" data-toggle="tab">
+ <i class="material-icons">cloud</i> Server
+ <div class="ripple-container"></div>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="card-body">
+ <div class="tab-content">
+ <div class="tab-pane active" id="profile">
+ <table class="table">
+ <tbody>
+ <tr>
+ <td>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="" checked>
+ <span class="form-check-sign">
<span class="check"></span>
</span>
- </label>
- </div>
- </td>
- <td>Sign contract for "What are conference organizers afraid of?"</td>
- <td class="td-actions text-right">
- <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
- <i class="material-icons">edit</i>
- </button>
- <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
- <i class="material-icons">close</i>
- </button>
- </td>
- </tr>
- <tr>
- <td>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="checkbox" value="">
- <span class="form-check-sign">
+ </label>
+ </div>
+ </td>
+ <td>Sign contract for "What are conference organizers afraid of?"</td>
+ <td class="td-actions text-right">
+ <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
+ <i class="material-icons">edit</i>
+ </button>
+ <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
+ <i class="material-icons">close</i>
+ </button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="">
+ <span class="form-check-sign">
<span class="check"></span>
</span>
- </label>
- </div>
- </td>
- <td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
- <td class="td-actions text-right">
- <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
- <i class="material-icons">edit</i>
- </button>
- <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
- <i class="material-icons">close</i>
- </button>
- </td>
- </tr>
- <tr>
- <td>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="checkbox" value="">
- <span class="form-check-sign">
+ </label>
+ </div>
+ </td>
+ <td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
+ <td class="td-actions text-right">
+ <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
+ <i class="material-icons">edit</i>
+ </button>
+ <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
+ <i class="material-icons">close</i>
+ </button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="">
+ <span class="form-check-sign">
<span class="check"></span>
</span>
- </label>
- </div>
- </td>
- <td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
- </td>
- <td class="td-actions text-right">
- <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
- <i class="material-icons">edit</i>
- </button>
- <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
- <i class="material-icons">close</i>
- </button>
- </td>
- </tr>
- <tr>
- <td>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="checkbox" value="" checked>
- <span class="form-check-sign">
+ </label>
+ </div>
+ </td>
+ <td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
+ </td>
+ <td class="td-actions text-right">
+ <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
+ <i class="material-icons">edit</i>
+ </button>
+ <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
+ <i class="material-icons">close</i>
+ </button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="" checked>
+ <span class="form-check-sign">
<span class="check"></span>
</span>
- </label>
- </div>
- </td>
- <td>Create 4 Invisible User Experiences you Never Knew About</td>
- <td class="td-actions text-right">
- <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
- <i class="material-icons">edit</i>
- </button>
- <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
- <i class="material-icons">close</i>
- </button>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="tab-pane" id="messages">
- <table class="table">
- <tbody>
- <tr>
- <td>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="checkbox" value="" checked>
- <span class="form-check-sign">
+ </label>
+ </div>
+ </td>
+ <td>Create 4 Invisible User Experiences you Never Knew About</td>
+ <td class="td-actions text-right">
+ <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
+ <i class="material-icons">edit</i>
+ </button>
+ <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
+ <i class="material-icons">close</i>
+ </button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="tab-pane" id="messages">
+ <table class="table">
+ <tbody>
+ <tr>
+ <td>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="" checked>
+ <span class="form-check-sign">
<span class="check"></span>
</span>
- </label>
- </div>
- </td>
- <td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
- </td>
- <td class="td-actions text-right">
- <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
- <i class="material-icons">edit</i>
- </button>
- <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
- <i class="material-icons">close</i>
- </button>
- </td>
- </tr>
- <tr>
- <td>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="checkbox" value="">
- <span class="form-check-sign">
+ </label>
+ </div>
+ </td>
+ <td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
+ </td>
+ <td class="td-actions text-right">
+ <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
+ <i class="material-icons">edit</i>
+ </button>
+ <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
+ <i class="material-icons">close</i>
+ </button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="">
+ <span class="form-check-sign">
<span class="check"></span>
</span>
- </label>
- </div>
- </td>
- <td>Sign contract for "What are conference organizers afraid of?"</td>
- <td class="td-actions text-right">
- <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
- <i class="material-icons">edit</i>
- </button>
- <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
- <i class="material-icons">close</i>
- </button>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="tab-pane" id="settings">
- <table class="table">
- <tbody>
- <tr>
- <td>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="checkbox" value="">
- <span class="form-check-sign">
+ </label>
+ </div>
+ </td>
+ <td>Sign contract for "What are conference organizers afraid of?"</td>
+ <td class="td-actions text-right">
+ <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
+ <i class="material-icons">edit</i>
+ </button>
+ <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
+ <i class="material-icons">close</i>
+ </button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="tab-pane" id="settings">
+ <table class="table">
+ <tbody>
+ <tr>
+ <td>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="">
+ <span class="form-check-sign">
<span class="check"></span>
</span>
- </label>
- </div>
- </td>
- <td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
- <td class="td-actions text-right">
- <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
- <i class="material-icons">edit</i>
- </button>
- <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
- <i class="material-icons">close</i>
- </button>
- </td>
- </tr>
- <tr>
- <td>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="checkbox" value="" checked>
- <span class="form-check-sign">
+ </label>
+ </div>
+ </td>
+ <td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
+ <td class="td-actions text-right">
+ <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
+ <i class="material-icons">edit</i>
+ </button>
+ <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
+ <i class="material-icons">close</i>
+ </button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="" checked>
+ <span class="form-check-sign">
<span class="check"></span>
</span>
- </label>
- </div>
- </td>
- <td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
- </td>
- <td class="td-actions text-right">
- <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
- <i class="material-icons">edit</i>
- </button>
- <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
- <i class="material-icons">close</i>
- </button>
- </td>
- </tr>
- <tr>
- <td>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="checkbox" value="" checked>
- <span class="form-check-sign">
+ </label>
+ </div>
+ </td>
+ <td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
+ </td>
+ <td class="td-actions text-right">
+ <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
+ <i class="material-icons">edit</i>
+ </button>
+ <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
+ <i class="material-icons">close</i>
+ </button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="" checked>
+ <span class="form-check-sign">
<span class="check"></span>
</span>
- </label>
- </div>
- </td>
- <td>Sign contract for "What are conference organizers afraid of?"</td>
- <td class="td-actions text-right">
- <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
- <i class="material-icons">edit</i>
- </button>
- <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
- <i class="material-icons">close</i>
- </button>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-6 col-md-12">
- <div class="card">
- <div class="card-header card-header-warning">
- <h4 class="card-title">Employees Stats</h4>
- <p class="card-category">New employees on 15th September, 2016</p>
- </div>
- <div class="card-body table-responsive">
- <table class="table table-hover">
- <thead class="text-warning">
- <th>ID</th>
- <th>Name</th>
- <th>Salary</th>
- <th>Country</th>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Dakota Rice</td>
- <td>$36,738</td>
- <td>Niger</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Minerva Hooper</td>
- <td>$23,789</td>
- <td>Curaçao</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Sage Rodriguez</td>
- <td>$56,142</td>
- <td>Netherlands</td>
- </tr>
- <tr>
- <td>4</td>
- <td>Philip Chaney</td>
- <td>$38,735</td>
- <td>Korea, South</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
+ </label>
+ </div>
+ </td>
+ <td>Sign contract for "What are conference organizers afraid of?"</td>
+ <td class="td-actions text-right">
+ <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
+ <i class="material-icons">edit</i>
+ </button>
+ <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
+ <i class="material-icons">close</i>
+ </button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-lg-6 col-md-12">
+ <div class="card">
+ <div class="card-header card-header-warning">
+ <h4 class="card-title">Employees Stats</h4>
+ <p class="card-category">New employees on 15th September, 2016</p>
+ </div>
+ <div class="card-body table-responsive">
+ <table class="table table-hover">
+ <thead class="text-warning">
+ <th>ID</th>
+ <th>Name</th>
+ <th>Salary</th>
+ <th>Country</th>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Dakota Rice</td>
+ <td>$36,738</td>
+ <td>Niger</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Minerva Hooper</td>
+ <td>$23,789</td>
+ <td>Curaçao</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Sage Rodriguez</td>
+ <td>$56,142</td>
+ <td>Netherlands</td>
+ </tr>
+ <tr>
+ <td>4</td>
+ <td>Philip Chaney</td>
+ <td>$38,735</td>
+ <td>Korea, South</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
diff --git a/AngularApp/src/app/dashboard/dashboard.component.spec.ts b/AngularApp/src/app/dashboard/dashboard.component.spec.ts
index 9c996c3..052d72c 100644
--- a/AngularApp/src/app/dashboard/dashboard.component.spec.ts
+++ b/AngularApp/src/app/dashboard/dashboard.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component';
+
describe('DashboardComponent', () => {
- let component: DashboardComponent;
- let fixture: ComponentFixture<DashboardComponent>;
+ let component: DashboardComponent;
+ let fixture: ComponentFixture<DashboardComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ DashboardComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DashboardComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(DashboardComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DashboardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/dashboard/dashboard.component.ts b/AngularApp/src/app/dashboard/dashboard.component.ts
index 36a0b02..e40e8ab 100644
--- a/AngularApp/src/app/dashboard/dashboard.component.ts
+++ b/AngularApp/src/app/dashboard/dashboard.component.ts
@@ -1,150 +1,165 @@
import { Component, OnInit } from '@angular/core';
-import * as Chartist from 'chartist';
+import * as Chartist from 'chartist';
+
@Component({
- selector: 'app-dashboard',
- templateUrl: './dashboard.component.html',
- styleUrls: ['./dashboard.component.css']
-})
+ selector : 'app-dashboard',
+ templateUrl: './dashboard.component.html',
+ styleUrls : [ './dashboard.component.css' ]
+ })
export class DashboardComponent implements OnInit {
- constructor() { }
- startAnimationForLineChart(chart){
- let seq: any, delays: any, durations: any;
- seq = 0;
- delays = 80;
- durations = 500;
-
- chart.on('draw', function(data) {
- if(data.type === 'line' || data.type === 'area') {
- data.element.animate({
- d: {
- begin: 600,
- dur: 700,
- from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
- to: data.path.clone().stringify(),
- easing: Chartist.Svg.Easing.easeOutQuint
+ constructor() { }
+
+ startAnimationForLineChart(chart) {
+ let seq: any,
+ delays: any,
+ durations: any;
+ seq = 0;
+ delays = 80;
+ durations = 500;
+
+ chart.on('draw', function (data) {
+ if ( data.type === 'line' || data.type === 'area' ) {
+ data.element.animate({
+ d: {
+ begin : 600,
+ dur : 700,
+ from : data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
+ to : data.path.clone().stringify(),
+ easing: Chartist.Svg.Easing.easeOutQuint
+ }
+ });
+ } else if ( data.type === 'point' ) {
+ seq++;
+ data.element.animate({
+ opacity: {
+ begin : seq * delays,
+ dur : durations,
+ from : 0,
+ to : 1,
+ easing: 'ease'
+ }
+ });
+ }
+ });
+
+ seq = 0;
+ };
+
+ startAnimationForBarChart(chart) {
+ let seq2: any,
+ delays2: any,
+ durations2: any;
+
+ seq2 = 0;
+ delays2 = 80;
+ durations2 = 500;
+ chart.on('draw', function (data) {
+ if ( data.type === 'bar' ) {
+ seq2++;
+ data.element.animate({
+ opacity: {
+ begin : seq2 * delays2,
+ dur : durations2,
+ from : 0,
+ to : 1,
+ easing: 'ease'
+ }
+ });
+ }
+ });
+
+ seq2 = 0;
+ };
+
+ ngOnInit() {
+ /* ----------========== Daily Sales Chart initialization For Documentation ==========---------- */
+
+ const dataDailySalesChart: any = {
+ labels: [ 'M', 'T', 'W', 'T', 'F', 'S', 'S' ],
+ series: [ [ 12, 17, 7, 17, 23, 18, 38 ] ]
+ };
+
+ const optionsDailySalesChart: any = {
+ lineSmooth : Chartist.Interpolation.cardinal({
+ tension: 0
+ }),
+ low : 0,
+ high : 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+ chartPadding: {
+ top : 0,
+ right : 0,
+ bottom: 0,
+ left : 0
+ }
+ };
+
+ var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
+
+ this.startAnimationForLineChart(dailySalesChart);
+
+
+ /* ----------========== Completed Tasks Chart initialization ==========---------- */
+
+ const dataCompletedTasksChart: any = {
+ labels: [ '12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a' ],
+ series: [ [ 230, 750, 450, 300, 280, 240, 200, 190 ] ]
+ };
+
+ const optionsCompletedTasksChart: any = {
+ lineSmooth : Chartist.Interpolation.cardinal({
+ tension: 0
+ }),
+ low : 0,
+ high : 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+ chartPadding: {
+ top : 0,
+ right : 0,
+ bottom: 0,
+ left : 0
}
- });
- } else if(data.type === 'point') {
- seq++;
- data.element.animate({
- opacity: {
- begin: seq * delays,
- dur: durations,
- from: 0,
- to: 1,
- easing: 'ease'
+ };
+
+ var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
+
+ // start animation for the Completed Tasks Chart - Line Chart
+ this.startAnimationForLineChart(completedTasksChart);
+
+
+ /* ----------========== Emails Subscription Chart initialization ==========---------- */
+
+ var datawebsiteViewsChart = {
+ labels: [ 'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D' ],
+ series: [ [ 542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895 ]
+
+ ]
+ };
+ var optionswebsiteViewsChart = {
+ axisX : {
+ showGrid: false
+ },
+ low : 0,
+ high : 1000,
+ chartPadding: {
+ top : 0,
+ right : 5,
+ bottom: 0,
+ left : 0
+ }
+ };
+ var responsiveOptions: any[] = [ [ 'screen and (max-width: 640px)', {
+ seriesBarDistance: 5,
+ axisX : {
+ labelInterpolationFnc: function (value) {
+ return value[0];
}
- });
- }
- });
-
- seq = 0;
- };
- startAnimationForBarChart(chart){
- let seq2: any, delays2: any, durations2: any;
-
- seq2 = 0;
- delays2 = 80;
- durations2 = 500;
- chart.on('draw', function(data) {
- if(data.type === 'bar'){
- seq2++;
- data.element.animate({
- opacity: {
- begin: seq2 * delays2,
- dur: durations2,
- from: 0,
- to: 1,
- easing: 'ease'
- }
- });
- }
- });
-
- seq2 = 0;
- };
- ngOnInit() {
- /* ----------========== Daily Sales Chart initialization For Documentation ==========---------- */
-
- const dataDailySalesChart: any = {
- labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
- series: [
- [12, 17, 7, 17, 23, 18, 38]
- ]
- };
-
- const optionsDailySalesChart: any = {
- lineSmooth: Chartist.Interpolation.cardinal({
- tension: 0
- }),
- low: 0,
- high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
- chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
- }
-
- var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
-
- this.startAnimationForLineChart(dailySalesChart);
-
-
- /* ----------========== Completed Tasks Chart initialization ==========---------- */
-
- const dataCompletedTasksChart: any = {
- labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'],
- series: [
- [230, 750, 450, 300, 280, 240, 200, 190]
- ]
- };
-
- const optionsCompletedTasksChart: any = {
- lineSmooth: Chartist.Interpolation.cardinal({
- tension: 0
- }),
- low: 0,
- high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
- chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
- }
-
- var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
-
- // start animation for the Completed Tasks Chart - Line Chart
- this.startAnimationForLineChart(completedTasksChart);
-
-
-
- /* ----------========== Emails Subscription Chart initialization ==========---------- */
-
- var datawebsiteViewsChart = {
- labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
- series: [
- [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
-
- ]
- };
- var optionswebsiteViewsChart = {
- axisX: {
- showGrid: false
- },
- low: 0,
- high: 1000,
- chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
- };
- var responsiveOptions: any[] = [
- ['screen and (max-width: 640px)', {
- seriesBarDistance: 5,
- axisX: {
- labelInterpolationFnc: function (value) {
- return value[0];
}
- }
- }]
- ];
- var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);
-
- //start animation for the Emails Subscription Chart
- this.startAnimationForBarChart(websiteViewsChart);
- }
+ } ] ];
+ var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);
+
+ //start animation for the Emails Subscription Chart
+ this.startAnimationForBarChart(websiteViewsChart);
+ }
}
diff --git a/AngularApp/src/app/exercise-page/exercise-page.component.html b/AngularApp/src/app/exercise-page/exercise-page.component.html
index b7f5a86..77e80cf 100644
--- a/AngularApp/src/app/exercise-page/exercise-page.component.html
+++ b/AngularApp/src/app/exercise-page/exercise-page.component.html
@@ -12,14 +12,13 @@
<table class="table">
<thead>
<th *ngFor="let h of headers">
- {{h}}
+ {{ h }}
</th>
</thead>
<tbody>
<tr *ngFor="let row of rows">
- <td *ngFor="let h of headers"
- [ngClass]="{'text-danger': row[h] == 'Unfinished', 'text-success': row[h] == 'Finished'}">
- {{row[h]}}
+ <td *ngFor="let h of headers" [ngClass]="{'text-danger': row[h] == 'Unfinished', 'text-success': row[h] == 'Finished'}">
+ {{ row[h] }}
</td>
</tr>
</tbody>
diff --git a/AngularApp/src/app/exercise-page/exercise-page.component.spec.ts b/AngularApp/src/app/exercise-page/exercise-page.component.spec.ts
index 670c497..3460075 100644
--- a/AngularApp/src/app/exercise-page/exercise-page.component.spec.ts
+++ b/AngularApp/src/app/exercise-page/exercise-page.component.spec.ts
@@ -2,22 +2,23 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ExercisePageComponent } from './exercise-page.component';
+
describe('ExercisePageComponent', () => {
- let component: ExercisePageComponent;
- let fixture: ComponentFixture<ExercisePageComponent>;
+ let component: ExercisePageComponent;
+ let fixture: ComponentFixture<ExercisePageComponent>;
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ ExercisePageComponent ]
- })
- .compileComponents();
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ExercisePageComponent ]
+ })
+ .compileComponents();
- fixture = TestBed.createComponent(ExercisePageComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ fixture = TestBed.createComponent(ExercisePageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/exercise-page/exercise-page.component.ts b/AngularApp/src/app/exercise-page/exercise-page.component.ts
index 3521f66..bdf7d39 100644
--- a/AngularApp/src/app/exercise-page/exercise-page.component.ts
+++ b/AngularApp/src/app/exercise-page/exercise-page.component.ts
@@ -1,37 +1,34 @@
import { Component, OnInit } from '@angular/core';
+
@Component({
- selector: 'app-exercise-page',
- templateUrl: './exercise-page.component.html',
- styleUrls: ['./exercise-page.component.scss']
-})
+ selector : 'app-exercise-page',
+ templateUrl: './exercise-page.component.html',
+ styleUrls : [ './exercise-page.component.scss' ]
+ })
export class ExercisePageComponent implements OnInit {
- constructor() { }
+ constructor() { }
- headers : string[] = ['Students', 'Status', 'Number of success', 'Attempts'];
- rows = [
- {
- 'Students' : 'Student1',
- 'Status' : 'Finished',
- 'Number of success' : '10 / 10 pass',
- 'Attempts' : '1'
- },
- {
- 'Students' : 'Student1',
- 'Status' : 'Finished',
- 'Number of success' : '10 / 10 pass',
- 'Attempts' : '4'
- },
- {
- 'Students' : 'Student1',
- 'Status' : 'Unfinished',
- 'Number of success' : ' 1 / 10 pass',
- 'Attempts' : '8'
- },
- ];
+ headers: string[] = [ 'Students', 'Status', 'Number of success', 'Attempts' ];
+ rows = [ {
+ 'Students' : 'Student1',
+ 'Status' : 'Finished',
+ 'Number of success': '10 / 10 pass',
+ 'Attempts' : '1'
+ }, {
+ 'Students' : 'Student1',
+ 'Status' : 'Finished',
+ 'Number of success': '10 / 10 pass',
+ 'Attempts' : '4'
+ }, {
+ 'Students' : 'Student1',
+ 'Status' : 'Unfinished',
+ 'Number of success': ' 1 / 10 pass',
+ 'Attempts' : '8'
+ } ];
- ngOnInit(): void {
- }
+ ngOnInit(): void {
+ }
}
diff --git a/AngularApp/src/app/icons/icons.component.html b/AngularApp/src/app/icons/icons.component.html
index f9db7a0..e1a8d8f 100644
--- a/AngularApp/src/app/icons/icons.component.html
+++ b/AngularApp/src/app/icons/icons.component.html
@@ -1,29 +1,28 @@
-
<div class="main-content">
- <div class="container-fluid">
- <div class="card card-plain">
- <div class="card-header card-header-danger">
- <h4 class="card-title">Material Design Icons</h4>
- <p class="card-category">Handcrafted by our friends from
- <a target="_blank" href="https://fonts.google.com/icons">Google</a>
- </p>
- </div>
- <div class="row">
- <div class="col-md-12">
- <div class="card-body">
- <div class="iframe-container d-none d-lg-block">
- <iframe src="https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes">
- <p>Your browser does not support iframes.</p>
- </iframe>
- </div>
- <div class="col-md-12 d-none d-sm-block d-md-block d-lg-none d-block d-sm-none text-center ml-auto mr-auto">
- <h5>The icons are visible on Desktop mode inside an iframe. Since the iframe is not working on Mobile and Tablets please visit the icons on their original page on Google. Check the
- <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
- </h5>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div class="container-fluid">
+ <div class="card card-plain">
+ <div class="card-header card-header-danger">
+ <h4 class="card-title">Material Design Icons</h4>
+ <p class="card-category">Handcrafted by our friends from
+ <a target="_blank" href="https://fonts.google.com/icons">Google</a>
+ </p>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="card-body">
+ <div class="iframe-container d-none d-lg-block">
+ <iframe src="https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes">
+ <p>Your browser does not support iframes.</p>
+ </iframe>
+ </div>
+ <div class="col-md-12 d-none d-sm-block d-md-block d-lg-none d-block d-sm-none text-center ml-auto mr-auto">
+ <h5>The icons are visible on Desktop mode inside an iframe. Since the iframe is not working on Mobile and Tablets please visit the icons on their original page on Google. Check the
+ <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
+ </h5>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
diff --git a/AngularApp/src/app/icons/icons.component.spec.ts b/AngularApp/src/app/icons/icons.component.spec.ts
index 0cd7034..6edc393 100644
--- a/AngularApp/src/app/icons/icons.component.spec.ts
+++ b/AngularApp/src/app/icons/icons.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IconsComponent } from './icons.component';
+
describe('IconsComponent', () => {
- let component: IconsComponent;
- let fixture: ComponentFixture<IconsComponent>;
+ let component: IconsComponent;
+ let fixture: ComponentFixture<IconsComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ IconsComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ IconsComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(IconsComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(IconsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/icons/icons.component.ts b/AngularApp/src/app/icons/icons.component.ts
index c6a1e48..083a36e 100644
--- a/AngularApp/src/app/icons/icons.component.ts
+++ b/AngularApp/src/app/icons/icons.component.ts
@@ -1,15 +1,16 @@
import { Component, OnInit } from '@angular/core';
+
@Component({
- selector: 'app-icons',
- templateUrl: './icons.component.html',
- styleUrls: ['./icons.component.css']
-})
+ selector : 'app-icons',
+ templateUrl: './icons.component.html',
+ styleUrls : [ './icons.component.css' ]
+ })
export class IconsComponent implements OnInit {
- constructor() { }
+ constructor() { }
- ngOnInit() {
- }
+ ngOnInit() {
+ }
}
diff --git a/AngularApp/src/app/layouts/admin-layout/admin-layout.component.html b/AngularApp/src/app/layouts/admin-layout/admin-layout.component.html
index 142b569..d476689 100644
--- a/AngularApp/src/app/layouts/admin-layout/admin-layout.component.html
+++ b/AngularApp/src/app/layouts/admin-layout/admin-layout.component.html
@@ -74,75 +74,74 @@
</ul>
</div>
</div> -->
-</div>
-<!-- Buy-Modal-angular -->
+</div><!-- Buy-Modal-angular -->
<div class="modal modal-angular fade" id="buy" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-<div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-body text-center">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
- <h4 class="margin-top">
- Free Version
- </h4>
- <div class="separator"></div>
- <a href="https://www.creative-tim.com/product/material-dashboard" class="modal-button" target="_blank">
- <div class="wrapper-card">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-body text-center">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <h4 class="margin-top">
+ Free Version </h4>
+ <div class="separator"></div>
+ <a href="https://www.creative-tim.com/product/material-dashboard" class="modal-button" target="_blank">
+ <div class="wrapper-card">
+ <div class="image-container">
+ <img src="./assets/img/html.png" alt="unloaded">
+ </div>
+ Html5
+ <div class="separator"></div>
+ <div class="product-type">
+ FREE
+ </div>
+ </div>
+ </a>
+ <a href="https://www.creative-tim.com/product/material-dashboard-angular2" class="modal-button" target="_blank">
+ <div class="wrapper-card">
+ <div class="image-container image-angular-cli">
+ <img src="./assets/img/angular.png" alt="unloaded">
+ </div>
+ Angular
+ <div class="separator"></div>
+ <div class="product-type">
+ FREE
+ </div>
+ </div>
+ </a>
+ <h4>
+ PRO Version </h4>
+ <div class="separator"></div>
+ <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="modal-button" target="_blank">
<div class="image-container">
<img src="./assets/img/html.png" alt="unloaded">
</div>
Html5
<div class="separator"></div>
- <div class="product-type">
- FREE
+ <div class="price">
+ from
+ <span>
+ 49
+ <i class="fa fa-usd" aria-hidden="true"></i>
+ </span>
</div>
- </div>
- </a>
- <a href="https://www.creative-tim.com/product/material-dashboard-angular2" class="modal-button" target="_blank">
- <div class="wrapper-card">
+ </a>
+ <a href="https://www.creative-tim.com/product/material-dashboard-pro-angular2" class="modal-button" target="_blank">
<div class="image-container image-angular-cli">
<img src="./assets/img/angular.png" alt="unloaded">
</div>
Angular
<div class="separator"></div>
- <div class="product-type">
- FREE
- </div>
- </div>
- </a>
- <h4>
- PRO Version
- </h4>
- <div class="separator"></div>
- <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="modal-button" target="_blank">
- <div class="image-container">
- <img src="./assets/img/html.png" alt="unloaded">
- </div>
- Html5
- <div class="separator"></div>
- <div class="price">
- from
- <span>
- 49
- <i class="fa fa-usd" aria-hidden="true"></i>
- </span>
- </div>
- </a>
- <a href="https://www.creative-tim.com/product/material-dashboard-pro-angular2" class="modal-button" target="_blank">
- <div class="image-container image-angular-cli">
- <img src="./assets/img/angular.png" alt="unloaded">
- </div>
- Angular
- <div class="separator"></div>
- <div class="price">
- from
- <span>
+ <div class="price">
+ from
+ <span>
59
<i class="fa fa-usd" aria-hidden="true"></i>
</span>
- </div>
- </a>
+ </div>
+ </a>
+ </div>
</div>
</div>
-</div>
</div>
diff --git a/AngularApp/src/app/layouts/admin-layout/admin-layout.component.spec.ts b/AngularApp/src/app/layouts/admin-layout/admin-layout.component.spec.ts
index a880666..bd2f785 100644
--- a/AngularApp/src/app/layouts/admin-layout/admin-layout.component.spec.ts
+++ b/AngularApp/src/app/layouts/admin-layout/admin-layout.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AdminLayoutComponent } from './admin-layout.component';
+
describe('AdminLayoutComponent', () => {
- let component: AdminLayoutComponent;
- let fixture: ComponentFixture<AdminLayoutComponent>;
+ let component: AdminLayoutComponent;
+ let fixture: ComponentFixture<AdminLayoutComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ AdminLayoutComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ AdminLayoutComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(AdminLayoutComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AdminLayoutComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/layouts/admin-layout/admin-layout.component.ts b/AngularApp/src/app/layouts/admin-layout/admin-layout.component.ts
index 41b4612..1b51b10 100644
--- a/AngularApp/src/app/layouts/admin-layout/admin-layout.component.ts
+++ b/AngularApp/src/app/layouts/admin-layout/admin-layout.component.ts
@@ -1,157 +1,162 @@
-import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
-import { Location, LocationStrategy, PathLocationStrategy, PopStateEvent } from '@angular/common';
-import { Router, NavigationEnd, NavigationStart } from '@angular/router';
-import PerfectScrollbar from 'perfect-scrollbar';
-import * as $ from "jquery";
-import { filter, Subscription } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { Location, PopStateEvent } from '@angular/common';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import PerfectScrollbar from 'perfect-scrollbar';
+import * as $ from 'jquery';
+import { filter, Subscription } from 'rxjs';
+
@Component({
- selector: 'app-admin-layout',
- templateUrl: './admin-layout.component.html',
- styleUrls: ['./admin-layout.component.scss']
-})
+ selector : 'app-admin-layout',
+ templateUrl: './admin-layout.component.html',
+ styleUrls : [ './admin-layout.component.scss' ]
+ })
export class AdminLayoutComponent implements OnInit {
- private _router: Subscription;
- private lastPoppedUrl: string;
- private yScrollStack: number[] = [];
-
- constructor( public location: Location, private router: Router) {}
-
- ngOnInit() {
- const isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
-
- if (isWindows && !document.getElementsByTagName('body')[0].classList.contains('sidebar-mini')) {
- // if we are on windows OS we activate the perfectScrollbar function
-
- document.getElementsByTagName('body')[0].classList.add('perfect-scrollbar-on');
- } else {
- document.getElementsByTagName('body')[0].classList.remove('perfect-scrollbar-off');
- }
- const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
- const elemSidebar = <HTMLElement>document.querySelector('.sidebar .sidebar-wrapper');
-
- this.location.subscribe((ev:PopStateEvent) => {
- this.lastPoppedUrl = ev.url;
- });
- this.router.events.subscribe((event:any) => {
- if (event instanceof NavigationStart) {
- if (event.url != this.lastPoppedUrl)
- this.yScrollStack.push(window.scrollY);
- } else if (event instanceof NavigationEnd) {
- if (event.url == this.lastPoppedUrl) {
- this.lastPoppedUrl = undefined;
- window.scrollTo(0, this.yScrollStack.pop());
- } else
- window.scrollTo(0, 0);
- }
- });
- this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
- elemMainPanel.scrollTop = 0;
- elemSidebar.scrollTop = 0;
- });
- if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac()) {
- let ps = new PerfectScrollbar(elemMainPanel);
- ps = new PerfectScrollbar(elemSidebar);
- }
-
- const window_width = $(window).width();
- let $sidebar = $('.sidebar');
- let $sidebar_responsive = $('body > .navbar-collapse');
- let $sidebar_img_container = $sidebar.find('.sidebar-background');
-
-
- if(window_width > 767){
- if($('.fixed-plugin .dropdown').hasClass('show-dropdown')){
- $('.fixed-plugin .dropdown').addClass('open');
- }
-
- }
-
- $('.fixed-plugin a').click(function(event){
- // Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
- if($(this).hasClass('switch-trigger')){
- if(event.stopPropagation){
- event.stopPropagation();
- }
- else if(window.event){
- window.event.cancelBubble = true;
- }
- }
- });
-
- $('.fixed-plugin .badge').click(function(){
- let $full_page_background = $('.full-page-background');
-
-
- $(this).siblings().removeClass('active');
- $(this).addClass('active');
-
- var new_color = $(this).data('color');
-
- if($sidebar.length !== 0){
- $sidebar.attr('data-color', new_color);
- }
-
- if($sidebar_responsive.length != 0){
- $sidebar_responsive.attr('data-color',new_color);
- }
- });
-
- $('.fixed-plugin .img-holder').click(function(){
- let $full_page_background = $('.full-page-background');
-
- $(this).parent('li').siblings().removeClass('active');
- $(this).parent('li').addClass('active');
-
-
- var new_image = $(this).find("img").attr('src');
-
- if($sidebar_img_container.length !=0 ){
- $sidebar_img_container.fadeOut('fast', function(){
- $sidebar_img_container.css('background-image','url("' + new_image + '")');
- $sidebar_img_container.fadeIn('fast');
- });
- }
-
- if($full_page_background.length != 0){
-
- $full_page_background.fadeOut('fast', function(){
- $full_page_background.css('background-image','url("' + new_image + '")');
- $full_page_background.fadeIn('fast');
- });
- }
-
- if($sidebar_responsive.length != 0){
- $sidebar_responsive.css('background-image','url("' + new_image + '")');
- }
- });
- }
- ngAfterViewInit() {
- this.runOnRouteChange();
- }
- isMaps(path){
- var titlee = this.location.prepareExternalUrl(this.location.path());
- titlee = titlee.slice( 1 );
- if(path == titlee){
- return false;
- }
- else {
- return true;
- }
- }
- runOnRouteChange(): void {
- if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac()) {
- const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
- const ps = new PerfectScrollbar(elemMainPanel);
- ps.update();
+ private _router: Subscription;
+ private lastPoppedUrl: string;
+ private yScrollStack: number[] = [];
+
+ constructor(public location: Location, private router: Router) {}
+
+ ngOnInit() {
+ const isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
+
+ if ( isWindows && !document.getElementsByTagName('body')[0].classList.contains('sidebar-mini') ) {
+ // if we are on windows OS we activate the perfectScrollbar function
+
+ document.getElementsByTagName('body')[0].classList.add('perfect-scrollbar-on');
+ } else {
+ document.getElementsByTagName('body')[0].classList.remove('perfect-scrollbar-off');
+ }
+ const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
+ const elemSidebar = <HTMLElement>document.querySelector('.sidebar .sidebar-wrapper');
+
+ this.location.subscribe((ev: PopStateEvent) => {
+ this.lastPoppedUrl = ev.url;
+ });
+ this.router.events.subscribe((event: any) => {
+ if ( event instanceof NavigationStart ) {
+ if ( event.url != this.lastPoppedUrl ) {
+ this.yScrollStack.push(window.scrollY);
+ }
+ } else if ( event instanceof NavigationEnd ) {
+ if ( event.url == this.lastPoppedUrl ) {
+ this.lastPoppedUrl = undefined;
+ window.scrollTo(0, this.yScrollStack.pop());
+ } else {
+ window.scrollTo(0, 0);
+ }
+ }
+ });
+ this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
+ elemMainPanel.scrollTop = 0;
+ elemSidebar.scrollTop = 0;
+ });
+ if ( window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() ) {
+ let ps = new PerfectScrollbar(elemMainPanel);
+ ps = new PerfectScrollbar(elemSidebar);
+ }
+
+ const window_width = $(window).width();
+ let $sidebar = $('.sidebar');
+ let $sidebar_responsive = $('body > .navbar-collapse');
+ let $sidebar_img_container = $sidebar.find('.sidebar-background');
+
+
+ if ( window_width > 767 ) {
+ if ( $('.fixed-plugin .dropdown').hasClass('show-dropdown') ) {
+ $('.fixed-plugin .dropdown').addClass('open');
+ }
+
+ }
+
+ $('.fixed-plugin a').click(function (event) {
+ // Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
+ if ( $(this).hasClass('switch-trigger') ) {
+ if ( event.stopPropagation ) {
+ event.stopPropagation();
+ } else if ( window.event ) {
+ window.event.cancelBubble = true;
+ }
+ }
+ });
+
+ $('.fixed-plugin .badge').click(function () {
+ let $full_page_background = $('.full-page-background');
+
+
+ $(this).siblings().removeClass('active');
+ $(this).addClass('active');
+
+ var new_color = $(this).data('color');
+
+ if ( $sidebar.length !== 0 ) {
+ $sidebar.attr('data-color', new_color);
+ }
+
+ if ( $sidebar_responsive.length != 0 ) {
+ $sidebar_responsive.attr('data-color', new_color);
+ }
+ });
+
+ $('.fixed-plugin .img-holder').click(function () {
+ let $full_page_background = $('.full-page-background');
+
+ $(this).parent('li').siblings().removeClass('active');
+ $(this).parent('li').addClass('active');
+
+
+ var new_image = $(this).find('img').attr('src');
+
+ if ( $sidebar_img_container.length != 0 ) {
+ $sidebar_img_container.fadeOut('fast', function () {
+ $sidebar_img_container.css('background-image', 'url("' + new_image + '")');
+ $sidebar_img_container.fadeIn('fast');
+ });
+ }
+
+ if ( $full_page_background.length != 0 ) {
+
+ $full_page_background.fadeOut('fast', function () {
+ $full_page_background.css('background-image', 'url("' + new_image + '")');
+ $full_page_background.fadeIn('fast');
+ });
+ }
+
+ if ( $sidebar_responsive.length != 0 ) {
+ $sidebar_responsive.css('background-image', 'url("' + new_image + '")');
+ }
+ });
+ }
+
+ ngAfterViewInit() {
+ this.runOnRouteChange();
+ }
+
+ isMaps(path) {
+ var titlee = this.location.prepareExternalUrl(this.location.path());
+ titlee = titlee.slice(1);
+ if ( path == titlee ) {
+ return false;
+ } else {
+ return true;
+ }
+ }
+
+ runOnRouteChange(): void {
+ if ( window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() ) {
+ const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
+ const ps = new PerfectScrollbar(elemMainPanel);
+ ps.update();
+ }
+ }
+
+ isMac(): boolean {
+ let bool = false;
+ if ( navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0 ) {
+ bool = true;
+ }
+ return bool;
}
- }
- isMac(): boolean {
- let bool = false;
- if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
- bool = true;
- }
- return bool;
- }
}
diff --git a/AngularApp/src/app/layouts/admin-layout/admin-layout.module.ts b/AngularApp/src/app/layouts/admin-layout/admin-layout.module.ts
index 60eabd9..0576c5d 100644
--- a/AngularApp/src/app/layouts/admin-layout/admin-layout.module.ts
+++ b/AngularApp/src/app/layouts/admin-layout/admin-layout.module.ts
@@ -1,48 +1,28 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { AdminLayoutRoutes } from './admin-layout.routing';
-import { DashboardComponent } from '../../dashboard/dashboard.component';
-import { UserProfileComponent } from '../../user-profile/user-profile.component';
-import { TableListComponent } from '../../table-list/table-list.component';
-import { TypographyComponent } from '../../typography/typography.component';
-import { IconsComponent } from '../../icons/icons.component';
-import { MapsComponent } from '../../maps/maps.component';
-import { NotificationsComponent } from '../../notifications/notifications.component';
-import { UpgradeComponent } from '../../upgrade/upgrade.component';
-import { ExercisePageComponent } from '../../exercise-page/exercise-page.component'
-import {MatButtonModule} from '@angular/material/button';
-import {MatInputModule} from '@angular/material/input';
-import {MatRippleModule} from '@angular/material/core';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {MatSelectModule} from '@angular/material/select';
+import { AdminLayoutRoutes } from './admin-layout.routing';
+import { DashboardComponent } from '../../dashboard/dashboard.component';
+import { UserProfileComponent } from '../../user-profile/user-profile.component';
+import { TableListComponent } from '../../table-list/table-list.component';
+import { TypographyComponent } from '../../typography/typography.component';
+import { IconsComponent } from '../../icons/icons.component';
+import { MapsComponent } from '../../maps/maps.component';
+import { NotificationsComponent } from '../../notifications/notifications.component';
+import { UpgradeComponent } from '../../upgrade/upgrade.component';
+import { ExercisePageComponent } from '../../exercise-page/exercise-page.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatRippleModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatSelectModule } from '@angular/material/select';
+
@NgModule({
- imports: [
- CommonModule,
- RouterModule.forChild(AdminLayoutRoutes),
- FormsModule,
- ReactiveFormsModule,
- MatButtonModule,
- MatRippleModule,
- MatFormFieldModule,
- MatInputModule,
- MatSelectModule,
- MatTooltipModule,
- ],
- declarations: [
- DashboardComponent,
- UserProfileComponent,
- TableListComponent,
- TypographyComponent,
- IconsComponent,
- MapsComponent,
- NotificationsComponent,
- UpgradeComponent,
- ExercisePageComponent
- ]
-})
+ imports : [ CommonModule, RouterModule.forChild(AdminLayoutRoutes), FormsModule, ReactiveFormsModule, MatButtonModule, MatRippleModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatTooltipModule ],
+ declarations: [ DashboardComponent, UserProfileComponent, TableListComponent, TypographyComponent, IconsComponent, MapsComponent, NotificationsComponent, UpgradeComponent, ExercisePageComponent ]
+ })
export class AdminLayoutModule {}
diff --git a/AngularApp/src/app/layouts/admin-layout/admin-layout.routing.ts b/AngularApp/src/app/layouts/admin-layout/admin-layout.routing.ts
index a4f97e7..562557f 100644
--- a/AngularApp/src/app/layouts/admin-layout/admin-layout.routing.ts
+++ b/AngularApp/src/app/layouts/admin-layout/admin-layout.routing.ts
@@ -1,23 +1,49 @@
import { Routes } from '@angular/router';
-import { DashboardComponent } from '../../dashboard/dashboard.component';
-import { UserProfileComponent } from '../../user-profile/user-profile.component';
-import { TableListComponent } from '../../table-list/table-list.component';
-import { TypographyComponent } from '../../typography/typography.component';
-import { IconsComponent } from '../../icons/icons.component';
-import { MapsComponent } from '../../maps/maps.component';
+import { DashboardComponent } from '../../dashboard/dashboard.component';
+import { UserProfileComponent } from '../../user-profile/user-profile.component';
+import { TableListComponent } from '../../table-list/table-list.component';
+import { TypographyComponent } from '../../typography/typography.component';
+import { IconsComponent } from '../../icons/icons.component';
+import { MapsComponent } from '../../maps/maps.component';
import { NotificationsComponent } from '../../notifications/notifications.component';
-import { UpgradeComponent } from '../../upgrade/upgrade.component';
-import { ExercisePageComponent } from '../../exercise-page/exercise-page.component';
+import { UpgradeComponent } from '../../upgrade/upgrade.component';
+import { ExercisePageComponent } from '../../exercise-page/exercise-page.component';
-export const AdminLayoutRoutes: Routes = [
- { path: 'dashboard', component: DashboardComponent },
- { path: 'user-profile', component: UserProfileComponent },
- { path: 'table-list', component: TableListComponent },
- { path: 'typography', component: TypographyComponent },
- { path: 'icons', component: IconsComponent },
- { path: 'maps', component: MapsComponent },
- { path: 'notifications', component: NotificationsComponent },
- { path: 'exercise-page', component: ExercisePageComponent },
- { path: 'upgrade', component: UpgradeComponent },
-];
+
+export const AdminLayoutRoutes: Routes = [ {
+ path : 'dashboard',
+ component: DashboardComponent
+},
+ {
+ path : 'user-profile',
+ component: UserProfileComponent
+ },
+ {
+ path : 'table-list',
+ component: TableListComponent
+ },
+ {
+ path : 'typography',
+ component: TypographyComponent
+ },
+ {
+ path : 'icons',
+ component: IconsComponent
+ },
+ {
+ path : 'maps',
+ component: MapsComponent
+ },
+ {
+ path : 'notifications',
+ component: NotificationsComponent
+ },
+ {
+ path : 'exercise-page',
+ component: ExercisePageComponent
+ },
+ {
+ path : 'upgrade',
+ component: UpgradeComponent
+ } ];
diff --git a/AngularApp/src/app/maps/maps.component.spec.ts b/AngularApp/src/app/maps/maps.component.spec.ts
index 7de1731..7a01897 100644
--- a/AngularApp/src/app/maps/maps.component.spec.ts
+++ b/AngularApp/src/app/maps/maps.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MapsComponent } from './maps.component';
+
describe('MapsComponent', () => {
- let component: MapsComponent;
- let fixture: ComponentFixture<MapsComponent>;
+ let component: MapsComponent;
+ let fixture: ComponentFixture<MapsComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ MapsComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MapsComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(MapsComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MapsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/maps/maps.component.ts b/AngularApp/src/app/maps/maps.component.ts
index 4bece74..42a7b0c 100644
--- a/AngularApp/src/app/maps/maps.component.ts
+++ b/AngularApp/src/app/maps/maps.component.ts
@@ -1,125 +1,129 @@
import { Component, OnInit } from '@angular/core';
+
declare const google: any;
+
interface Marker {
-lat: number;
-lng: number;
-label?: string;
-draggable?: boolean;
+ lat: number;
+ lng: number;
+ label?: string;
+ draggable?: boolean;
}
+
+
@Component({
- selector: 'app-maps',
- templateUrl: './maps.component.html',
- styleUrls: ['./maps.component.css']
-})
+ selector : 'app-maps',
+ templateUrl: './maps.component.html',
+ styleUrls : [ './maps.component.css' ]
+ })
export class MapsComponent implements OnInit {
- constructor() { }
+ constructor() { }
- ngOnInit() {
+ ngOnInit() {
- var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
- var mapOptions = {
- zoom: 13,
- center: myLatlng,
- scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
- styles: [{
- "featureType": "water",
- "stylers": [{
- "saturation": 43
+ var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
+ var mapOptions = {
+ zoom : 13,
+ center : myLatlng,
+ scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
+ styles : [ {
+ 'featureType': 'water',
+ 'stylers' : [ {
+ 'saturation': 43
+ }, {
+ 'lightness': -11
+ }, {
+ 'hue': '#0088ff'
+ } ]
+ }, {
+ 'featureType': 'road',
+ 'elementType': 'geometry.fill',
+ 'stylers' : [ {
+ 'hue': '#ff0000'
+ }, {
+ 'saturation': -100
+ }, {
+ 'lightness': 99
+ } ]
+ }, {
+ 'featureType': 'road',
+ 'elementType': 'geometry.stroke',
+ 'stylers' : [ {
+ 'color': '#808080'
+ }, {
+ 'lightness': 54
+ } ]
+ }, {
+ 'featureType': 'landscape.man_made',
+ 'elementType': 'geometry.fill',
+ 'stylers' : [ {
+ 'color': '#ece2d9'
+ } ]
+ }, {
+ 'featureType': 'poi.park',
+ 'elementType': 'geometry.fill',
+ 'stylers' : [ {
+ 'color': '#ccdca1'
+ } ]
+ }, {
+ 'featureType': 'road',
+ 'elementType': 'labels.text.fill',
+ 'stylers' : [ {
+ 'color': '#767676'
+ } ]
+ }, {
+ 'featureType': 'road',
+ 'elementType': 'labels.text.stroke',
+ 'stylers' : [ {
+ 'color': '#ffffff'
+ } ]
}, {
- "lightness": -11
+ 'featureType': 'poi',
+ 'stylers' : [ {
+ 'visibility': 'off'
+ } ]
}, {
- "hue": "#0088ff"
- }]
- }, {
- "featureType": "road",
- "elementType": "geometry.fill",
- "stylers": [{
- "hue": "#ff0000"
+ 'featureType': 'landscape.natural',
+ 'elementType': 'geometry.fill',
+ 'stylers' : [ {
+ 'visibility': 'on'
+ }, {
+ 'color': '#b8cb93'
+ } ]
}, {
- "saturation": -100
+ 'featureType': 'poi.park',
+ 'stylers' : [ {
+ 'visibility': 'on'
+ } ]
}, {
- "lightness": 99
- }]
- }, {
- "featureType": "road",
- "elementType": "geometry.stroke",
- "stylers": [{
- "color": "#808080"
+ 'featureType': 'poi.sports_complex',
+ 'stylers' : [ {
+ 'visibility': 'on'
+ } ]
}, {
- "lightness": 54
- }]
- }, {
- "featureType": "landscape.man_made",
- "elementType": "geometry.fill",
- "stylers": [{
- "color": "#ece2d9"
- }]
- }, {
- "featureType": "poi.park",
- "elementType": "geometry.fill",
- "stylers": [{
- "color": "#ccdca1"
- }]
- }, {
- "featureType": "road",
- "elementType": "labels.text.fill",
- "stylers": [{
- "color": "#767676"
- }]
- }, {
- "featureType": "road",
- "elementType": "labels.text.stroke",
- "stylers": [{
- "color": "#ffffff"
- }]
- }, {
- "featureType": "poi",
- "stylers": [{
- "visibility": "off"
- }]
- }, {
- "featureType": "landscape.natural",
- "elementType": "geometry.fill",
- "stylers": [{
- "visibility": "on"
+ 'featureType': 'poi.medical',
+ 'stylers' : [ {
+ 'visibility': 'on'
+ } ]
}, {
- "color": "#b8cb93"
- }]
- }, {
- "featureType": "poi.park",
- "stylers": [{
- "visibility": "on"
- }]
- }, {
- "featureType": "poi.sports_complex",
- "stylers": [{
- "visibility": "on"
- }]
- }, {
- "featureType": "poi.medical",
- "stylers": [{
- "visibility": "on"
- }]
- }, {
- "featureType": "poi.business",
- "stylers": [{
- "visibility": "simplified"
- }]
- }]
+ 'featureType': 'poi.business',
+ 'stylers' : [ {
+ 'visibility': 'simplified'
+ } ]
+ } ]
- };
- var map = new google.maps.Map(document.getElementById("map"), mapOptions);
+ };
+ var map = new google.maps.Map(document.getElementById('map'), mapOptions);
- var marker = new google.maps.Marker({
- position: myLatlng,
- title: "Hello World!"
- });
+ var marker = new google.maps.Marker({
+ position: myLatlng,
+ title : 'Hello World!'
+ });
- // To add the marker to the map, call setMap();
- marker.setMap(map);
- }
+ // To add the marker to the map, call setMap();
+ marker.setMap(map);
+ }
}
diff --git a/AngularApp/src/app/notifications/notifications.component.html b/AngularApp/src/app/notifications/notifications.component.html
index a04a8f9..3a6c868 100644
--- a/AngularApp/src/app/notifications/notifications.component.html
+++ b/AngularApp/src/app/notifications/notifications.component.html
@@ -1,123 +1,123 @@
<div class="main-content">
- <div class="container-fluid">
- <div class="card">
- <div class="card-header card-header-danger">
- <h3 class="card-title">Notifications</h3>
- <p class="card-category">Handcrafted by our friend
- <a target="_blank" href="https://github.com/mouse0270">Robert McIntosh</a>. Please checkout the
- <a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">full documentation.</a>
- </p>
- </div>
- <div class="card-body">
- <div class="row">
- <div class="col-md-6">
- <h4 class="card-title">Notifications Style</h4>
- <div class="alert alert-info">
- <span>This is a plain notification</span>
- </div>
- <div class="alert alert-info">
- <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <i class="material-icons">close</i>
- </button>
- <span>This is a notification with close button.</span>
- </div>
- <div class="alert alert-info alert-with-icon" data-notify="container">
- <i class="material-icons" data-notify="icon">add_alert</i>
- <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <i class="material-icons">close</i>
- </button>
- <span data-notify="message">This is a notification with close button and icon.</span>
- </div>
- <div class="alert alert-info alert-with-icon" data-notify="container">
- <i class="material-icons" data-notify="icon">add_alert</i>
- <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <i class="material-icons">close</i>
- </button>
- <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
- </div>
- </div>
- <div class="col-md-6">
- <h4 class="card-title">Notification states</h4>
- <div class="alert alert-info">
- <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <i class="material-icons">close</i>
- </button>
- <span>
+ <div class="container-fluid">
+ <div class="card">
+ <div class="card-header card-header-danger">
+ <h3 class="card-title">Notifications</h3>
+ <p class="card-category">Handcrafted by our friend
+ <a target="_blank" href="https://github.com/mouse0270">Robert McIntosh</a>. Please checkout the
+ <a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">full documentation.</a>
+ </p>
+ </div>
+ <div class="card-body">
+ <div class="row">
+ <div class="col-md-6">
+ <h4 class="card-title">Notifications Style</h4>
+ <div class="alert alert-info">
+ <span>This is a plain notification</span>
+ </div>
+ <div class="alert alert-info">
+ <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <i class="material-icons">close</i>
+ </button>
+ <span>This is a notification with close button.</span>
+ </div>
+ <div class="alert alert-info alert-with-icon" data-notify="container">
+ <i class="material-icons" data-notify="icon">add_alert</i>
+ <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <i class="material-icons">close</i>
+ </button>
+ <span data-notify="message">This is a notification with close button and icon.</span>
+ </div>
+ <div class="alert alert-info alert-with-icon" data-notify="container">
+ <i class="material-icons" data-notify="icon">add_alert</i>
+ <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <i class="material-icons">close</i>
+ </button>
+ <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <h4 class="card-title">Notification states</h4>
+ <div class="alert alert-info">
+ <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <i class="material-icons">close</i>
+ </button>
+ <span>
<b> Info - </b> This is a regular notification made with ".alert-info"</span>
- </div>
- <div class="alert alert-success">
- <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <i class="material-icons">close</i>
- </button>
- <span>
+ </div>
+ <div class="alert alert-success">
+ <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <i class="material-icons">close</i>
+ </button>
+ <span>
<b> Success - </b> This is a regular notification made with ".alert-success"</span>
- </div>
- <div class="alert alert-warning">
- <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <i class="material-icons">close</i>
- </button>
- <span>
+ </div>
+ <div class="alert alert-warning">
+ <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <i class="material-icons">close</i>
+ </button>
+ <span>
<b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
- </div>
- <div class="alert alert-danger">
- <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <i class="material-icons">close</i>
- </button>
- <span>
+ </div>
+ <div class="alert alert-danger">
+ <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <i class="material-icons">close</i>
+ </button>
+ <span>
<b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
- </div>
- <div class="alert alert-primary">
- <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <i class="material-icons">close</i>
- </button>
- <span>
+ </div>
+ <div class="alert alert-primary">
+ <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <i class="material-icons">close</i>
+ </button>
+ <span>
<b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-12">
- <div class="places-buttons">
- <div class="row">
- <div class="col-md-6 ml-auto mr-auto text-center">
- <h4 class="card-title">
- Notifications Places
- <p class="category">Click to view notifications</p>
- </h4>
- </div>
- </div>
- <div class="row">
- <div class="col-lg-8 col-md-10 ml-auto mr-auto">
- <div class="row">
- <div class="col-md-4">
- <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','left')">Top Left</button>
- </div>
- <div class="col-md-4">
- <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','center')">Top Center</button>
- </div>
- <div class="col-md-4">
- <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','right')">Top Right</button>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-lg-8 col-md-10 ml-auto mr-auto">
- <div class="row">
- <div class="col-md-4">
- <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','left')">Bottom Left</button>
- </div>
- <div class="col-md-4">
- <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','center')">Bottom Center</button>
- </div>
- <div class="col-md-4">
- <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','right')">Bottom Right</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-12">
+ <div class="places-buttons">
+ <div class="row">
+ <div class="col-md-6 ml-auto mr-auto text-center">
+ <h4 class="card-title">
+ Notifications Places
+ <p class="category">Click to view notifications</p>
+ </h4>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-lg-8 col-md-10 ml-auto mr-auto">
+ <div class="row">
+ <div class="col-md-4">
+ <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','left')">Top Left</button>
+ </div>
+ <div class="col-md-4">
+ <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','center')">Top Center</button>
+ </div>
+ <div class="col-md-4">
+ <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','right')">Top Right</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-lg-8 col-md-10 ml-auto mr-auto">
+ <div class="row">
+ <div class="col-md-4">
+ <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','left')">Bottom Left</button>
+ </div>
+ <div class="col-md-4">
+ <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','center')">Bottom Center</button>
+ </div>
+ <div class="col-md-4">
+ <button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','right')">Bottom Right</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
diff --git a/AngularApp/src/app/notifications/notifications.component.spec.ts b/AngularApp/src/app/notifications/notifications.component.spec.ts
index 0147b0d..f73f15c 100644
--- a/AngularApp/src/app/notifications/notifications.component.spec.ts
+++ b/AngularApp/src/app/notifications/notifications.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NotificationsComponent } from './notifications.component';
+
describe('NotificationsComponent', () => {
- let component: NotificationsComponent;
- let fixture: ComponentFixture<NotificationsComponent>;
+ let component: NotificationsComponent;
+ let fixture: ComponentFixture<NotificationsComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ NotificationsComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ NotificationsComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(NotificationsComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NotificationsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/notifications/notifications.component.ts b/AngularApp/src/app/notifications/notifications.component.ts
index 711cb9b..92d64df 100644
--- a/AngularApp/src/app/notifications/notifications.component.ts
+++ b/AngularApp/src/app/notifications/notifications.component.ts
@@ -1,42 +1,39 @@
import { Component, OnInit } from '@angular/core';
+
+
declare var $: any;
+
+
@Component({
- selector: 'app-notifications',
- templateUrl: './notifications.component.html',
- styleUrls: ['./notifications.component.css']
-})
+ selector : 'app-notifications',
+ templateUrl: './notifications.component.html',
+ styleUrls : [ './notifications.component.css' ]
+ })
export class NotificationsComponent implements OnInit {
- constructor() { }
- showNotification(from, align){
- const type = ['','info','success','warning','danger'];
-
- const color = Math.floor((Math.random() * 4) + 1);
-
- $.notify({
- icon: "notifications",
- message: "Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer."
-
- },{
- type: type[color],
- timer: 4000,
- placement: {
- from: from,
- align: align
- },
- template: '<div data-notify="container" class="col-xl-4 col-lg-4 col-11 col-sm-4 col-md-4 alert alert-{0} alert-with-icon" role="alert">' +
- '<button mat-button type="button" aria-hidden="true" class="close mat-button" data-notify="dismiss"> <i class="material-icons">close</i></button>' +
- '<i class="material-icons" data-notify="icon">notifications</i> ' +
- '<span data-notify="title">{1}</span> ' +
- '<span data-notify="message">{2}</span>' +
- '<div class="progress" data-notify="progressbar">' +
- '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
- '</div>' +
- '<a href="{3}" target="{4}" data-notify="url"></a>' +
- '</div>'
- });
- }
- ngOnInit() {
- }
+ constructor() { }
+
+ showNotification(from, align) {
+ const type = [ '', 'info', 'success', 'warning', 'danger' ];
+
+ const color = Math.floor((Math.random() * 4) + 1);
+
+ $.notify({
+ icon : 'notifications',
+ message: 'Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer.'
+
+ }, {
+ type : type[color],
+ timer : 4000,
+ placement: {
+ from : from,
+ align: align
+ },
+ template : '<div data-notify="container" class="col-xl-4 col-lg-4 col-11 col-sm-4 col-md-4 alert alert-{0} alert-with-icon" role="alert">' + '<button mat-button type="button" aria-hidden="true" class="close mat-button" data-notify="dismiss"> <i class="material-icons">close</i></button>' + '<i class="material-icons" data-notify="icon">notifications</i> ' + '<span data-notify="title">{1}</span> ' + '<span data-notify="message">{2}</span>' + '<div class="progress" data-notify="progressbar">' + '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' + '</div>' + '<a href="{3}" target="{4}" data-notify="url"></a>' + '</div>'
+ });
+ }
+
+ ngOnInit() {
+ }
}
diff --git a/AngularApp/src/app/table-list/table-list.component.html b/AngularApp/src/app/table-list/table-list.component.html
index f0cef1a..d1b16a5 100644
--- a/AngularApp/src/app/table-list/table-list.component.html
+++ b/AngularApp/src/app/table-list/table-list.component.html
@@ -12,15 +12,15 @@
<table class="table">
<thead class=" text-primary">
<th *ngFor="let h of headers">
- {{h}}
+ {{ h }}
</th>
</thead>
<tbody>
- <tr *ngFor="let row of rows">
- <td *ngFor="let h of headers">
- <a ng-href="#/{{row['link']}}">{{row[h]}}</a>
- </td>
- </tr>
+ <tr *ngFor="let row of rows">
+ <td *ngFor="let h of headers">
+ <a ng-href="#/{{row['link']}}">{{ row[h] }}</a>
+ </td>
+ </tr>
</tbody>
</table>
</div>
diff --git a/AngularApp/src/app/table-list/table-list.component.spec.ts b/AngularApp/src/app/table-list/table-list.component.spec.ts
index 6fba149..4109bb7 100644
--- a/AngularApp/src/app/table-list/table-list.component.spec.ts
+++ b/AngularApp/src/app/table-list/table-list.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TableListComponent } from './table-list.component';
+
describe('TableListComponent', () => {
- let component: TableListComponent;
- let fixture: ComponentFixture<TableListComponent>;
+ let component: TableListComponent;
+ let fixture: ComponentFixture<TableListComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ TableListComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TableListComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(TableListComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TableListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/table-list/table-list.component.ts b/AngularApp/src/app/table-list/table-list.component.ts
index 699fb9f..ce6c86a 100644
--- a/AngularApp/src/app/table-list/table-list.component.ts
+++ b/AngularApp/src/app/table-list/table-list.component.ts
@@ -1,40 +1,37 @@
import { Component, OnInit } from '@angular/core';
+
@Component({
- selector: 'app-table-list',
- templateUrl: './table-list.component.html',
- styleUrls: ['./table-list.component.css']
-})
+ selector : 'app-table-list',
+ templateUrl: './table-list.component.html',
+ styleUrls : [ './table-list.component.css' ]
+ })
export class TableListComponent implements OnInit {
- constructor() { }
+ constructor() { }
- headers : string[] = ['Assignment', 'Description', 'Number of success', 'Exercises created'];
- rows = [
- {
- 'Assignment' : 'TCP',
- 'Description' : 'Technique de compilation',
- 'Number of success' : '2',
- 'Exercises created' : '4',
- 'Link' : 'exercise-page'
- },
- {
- 'Assignment' : 'Optimisation',
- 'Description' : 'Do some optimisation',
- 'Number of success' : '2',
- 'Exercises created' : '4',
- 'Link' : ''
- },
- {
- 'Assignment' : 'Advanced Programmation',
- 'Description' : 'Some programmation',
- 'Number of success' : '0',
- 'Exercises created' : '10',
- 'Link' : ''
- },
- ];
+ headers: string[] = [ 'Assignment', 'Description', 'Number of success', 'Exercises created' ];
+ rows = [ {
+ 'Assignment' : 'TCP',
+ 'Description' : 'Technique de compilation',
+ 'Number of success': '2',
+ 'Exercises created': '4',
+ 'Link' : 'exercise-page'
+ }, {
+ 'Assignment' : 'Optimisation',
+ 'Description' : 'Do some optimisation',
+ 'Number of success': '2',
+ 'Exercises created': '4',
+ 'Link' : ''
+ }, {
+ 'Assignment' : 'Advanced Programmation',
+ 'Description' : 'Some programmation',
+ 'Number of success': '0',
+ 'Exercises created': '10',
+ 'Link' : ''
+ } ];
- ngOnInit() {
- }
+ ngOnInit() {
+ }
}
diff --git a/AngularApp/src/app/typography/typography.component.html b/AngularApp/src/app/typography/typography.component.html
index 8ddd543..8a0f391 100644
--- a/AngularApp/src/app/typography/typography.component.html
+++ b/AngularApp/src/app/typography/typography.component.html
@@ -1,98 +1,102 @@
<div class="main-content">
- <div class="container-fluid">
- <div class="card">
- <div class="card-header card-header-danger">
- <h4 class="card-title">Material Dashboard Heading</h4>
- <p class="card-category">Created using Roboto Font Family</p>
- </div>
- <div class="card-body">
- <div id="typography">
- <div class="card-title">
- <h2>Typography</h2>
- </div>
- <div class="row">
- <div class="tim-typo">
- <h1>
- <span class="tim-note">Header 1</span>The Life of Material Dashboard </h1>
- </div>
- <div class="tim-typo">
- <h2>
- <span class="tim-note">Header 2</span>The Life of Material Dashboard</h2>
- </div>
- <div class="tim-typo">
- <h3>
- <span class="tim-note">Header 3</span>The Life of Material Dashboard</h3>
- </div>
- <div class="tim-typo">
- <h4>
- <span class="tim-note">Header 4</span>The Life of Material Dashboard</h4>
- </div>
- <div class="tim-typo">
- <h5>
- <span class="tim-note">Header 5</span>The Life of Material Dashboard</h5>
- </div>
- <div class="tim-typo">
- <h6>
- <span class="tim-note">Header 6</span>The Life of Material Dashboard</h6>
- </div>
- <div class="tim-typo">
- <p>
- <span class="tim-note">Paragraph</span>
- I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
+ <div class="container-fluid">
+ <div class="card">
+ <div class="card-header card-header-danger">
+ <h4 class="card-title">Material Dashboard Heading</h4>
+ <p class="card-category">Created using Roboto Font Family</p>
+ </div>
+ <div class="card-body">
+ <div id="typography">
+ <div class="card-title">
+ <h2>Typography</h2>
</div>
- <div class="tim-typo">
- <span class="tim-note">Quote</span>
- <blockquote class="blockquote">
+ <div class="row">
+ <div class="tim-typo">
+ <h1>
+ <span class="tim-note">Header 1</span>The Life of Material Dashboard
+ </h1>
+ </div>
+ <div class="tim-typo">
+ <h2>
+ <span class="tim-note">Header 2</span>The Life of Material Dashboard
+ </h2>
+ </div>
+ <div class="tim-typo">
+ <h3>
+ <span class="tim-note">Header 3</span>The Life of Material Dashboard
+ </h3>
+ </div>
+ <div class="tim-typo">
+ <h4>
+ <span class="tim-note">Header 4</span>The Life of Material Dashboard
+ </h4>
+ </div>
+ <div class="tim-typo">
+ <h5>
+ <span class="tim-note">Header 5</span>The Life of Material Dashboard
+ </h5>
+ </div>
+ <div class="tim-typo">
+ <h6>
+ <span class="tim-note">Header 6</span>The Life of Material Dashboard
+ </h6>
+ </div>
+ <div class="tim-typo">
<p>
+ <span class="tim-note">Paragraph</span>
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
</p>
- <small>
- Kanye West, Musician
- </small>
- </blockquote>
- </div>
- <div class="tim-typo">
- <span class="tim-note">Muted Text</span>
- <p class="text-muted">
- I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
- </p>
- </div>
- <div class="tim-typo">
- <span class="tim-note">Primary Text</span>
- <p class="text-primary">
- I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
- </div>
- <div class="tim-typo">
- <span class="tim-note">Info Text</span>
- <p class="text-info">
- I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
- </div>
- <div class="tim-typo">
- <span class="tim-note">Success Text</span>
- <p class="text-success">
- I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
- </div>
- <div class="tim-typo">
- <span class="tim-note">Warning Text</span>
- <p class="text-warning">
- I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
- </p>
- </div>
- <div class="tim-typo">
- <span class="tim-note">Danger Text</span>
- <p class="text-danger">
- I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
- </div>
- <div class="tim-typo">
- <h2>
- <span class="tim-note">Small Tag</span>
- Header with small subtitle
- <br>
- <small>Use "small" tag for the headers</small>
- </h2>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Quote</span>
+ <blockquote class="blockquote">
+ <p>
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p>
+ <small>
+ Kanye West, Musician
+ </small>
+ </blockquote>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Muted Text</span>
+ <p class="text-muted">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Primary Text</span>
+ <p class="text-primary">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Info Text</span>
+ <p class="text-info">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Success Text</span>
+ <p class="text-success">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Warning Text</span>
+ <p class="text-warning">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Danger Text</span>
+ <p class="text-danger">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+ </div>
+ <div class="tim-typo">
+ <h2>
+ <span class="tim-note">Small Tag</span>
+ Header with small subtitle
+ <br>
+ <small>Use "small" tag for the headers</small>
+ </h2>
+ </div>
</div>
</div>
</div>
</div>
</div>
-</div>
diff --git a/AngularApp/src/app/typography/typography.component.spec.ts b/AngularApp/src/app/typography/typography.component.spec.ts
index ac01d8b..465f3c3 100644
--- a/AngularApp/src/app/typography/typography.component.spec.ts
+++ b/AngularApp/src/app/typography/typography.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TypographyComponent } from './typography.component';
+
describe('TypographyComponent', () => {
- let component: TypographyComponent;
- let fixture: ComponentFixture<TypographyComponent>;
+ let component: TypographyComponent;
+ let fixture: ComponentFixture<TypographyComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ TypographyComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TypographyComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(TypographyComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TypographyComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/typography/typography.component.ts b/AngularApp/src/app/typography/typography.component.ts
index b2439d6..26e3923 100644
--- a/AngularApp/src/app/typography/typography.component.ts
+++ b/AngularApp/src/app/typography/typography.component.ts
@@ -1,15 +1,16 @@
import { Component, OnInit } from '@angular/core';
+
@Component({
- selector: 'app-typography',
- templateUrl: './typography.component.html',
- styleUrls: ['./typography.component.css']
-})
+ selector : 'app-typography',
+ templateUrl: './typography.component.html',
+ styleUrls : [ './typography.component.css' ]
+ })
export class TypographyComponent implements OnInit {
- constructor() { }
+ constructor() { }
- ngOnInit() {
- }
+ ngOnInit() {
+ }
}
diff --git a/AngularApp/src/app/upgrade/upgrade.component.html b/AngularApp/src/app/upgrade/upgrade.component.html
index 0408dd7..1703273 100644
--- a/AngularApp/src/app/upgrade/upgrade.component.html
+++ b/AngularApp/src/app/upgrade/upgrade.component.html
@@ -35,23 +35,39 @@
</tr>
<tr>
<td>Login, Register, Pricing, Lock Pages</td>
- <td class="text-center"><i class="fa fa-times text-danger"></i></td>
- <td class="text-center"><i class="fa fa-check text-success"></i></td>
+ <td class="text-center">
+ <i class="fa fa-times text-danger"></i>
+ </td>
+ <td class="text-center">
+ <i class="fa fa-check text-success"></i>
+ </td>
</tr>
<tr>
<td>DataTables, VectorMap, SweetAlert, Wizard, jQueryValidation, FullCalendar etc...</td>
- <td class="text-center"><i class="fa fa-times text-danger"></i></td>
- <td class="text-center"><i class="fa fa-check text-success"></i></td>
+ <td class="text-center">
+ <i class="fa fa-times text-danger"></i>
+ </td>
+ <td class="text-center">
+ <i class="fa fa-check text-success"></i>
+ </td>
</tr>
<tr>
<td>Mini Sidebar</td>
- <td class="text-center"><i class="fa fa-times text-danger"></i></td>
- <td class="text-center"><i class="fa fa-check text-success"></i></td>
+ <td class="text-center">
+ <i class="fa fa-times text-danger"></i>
+ </td>
+ <td class="text-center">
+ <i class="fa fa-check text-success"></i>
+ </td>
</tr>
<tr>
<td>Premium Support</td>
- <td class="text-center"><i class="fa fa-times text-danger"></i></td>
- <td class="text-center"><i class="fa fa-check text-success"></i></td>
+ <td class="text-center">
+ <i class="fa fa-times text-danger"></i>
+ </td>
+ <td class="text-center">
+ <i class="fa fa-check text-success"></i>
+ </td>
</tr>
<tr>
<td></td>
diff --git a/AngularApp/src/app/upgrade/upgrade.component.spec.ts b/AngularApp/src/app/upgrade/upgrade.component.spec.ts
index 7e834f2..453f8e0 100644
--- a/AngularApp/src/app/upgrade/upgrade.component.spec.ts
+++ b/AngularApp/src/app/upgrade/upgrade.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UpgradeComponent } from './upgrade.component';
+
describe('UpgradeComponent', () => {
- let component: UpgradeComponent;
- let fixture: ComponentFixture<UpgradeComponent>;
+ let component: UpgradeComponent;
+ let fixture: ComponentFixture<UpgradeComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ UpgradeComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ UpgradeComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(UpgradeComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(UpgradeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/upgrade/upgrade.component.ts b/AngularApp/src/app/upgrade/upgrade.component.ts
index 661f4cb..e629a42 100644
--- a/AngularApp/src/app/upgrade/upgrade.component.ts
+++ b/AngularApp/src/app/upgrade/upgrade.component.ts
@@ -1,15 +1,16 @@
import { Component, OnInit } from '@angular/core';
+
@Component({
- selector: 'app-upgrade',
- templateUrl: './upgrade.component.html',
- styleUrls: ['./upgrade.component.css']
-})
+ selector : 'app-upgrade',
+ templateUrl: './upgrade.component.html',
+ styleUrls : [ './upgrade.component.css' ]
+ })
export class UpgradeComponent implements OnInit {
- constructor() { }
+ constructor() { }
- ngOnInit() {
- }
+ ngOnInit() {
+ }
}
diff --git a/AngularApp/src/app/user-profile/user-profile.component.html b/AngularApp/src/app/user-profile/user-profile.component.html
index 647af69..e414733 100644
--- a/AngularApp/src/app/user-profile/user-profile.component.html
+++ b/AngularApp/src/app/user-profile/user-profile.component.html
@@ -1,70 +1,70 @@
<div class="main-content">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12">
- <div class="card">
- <div class="card-header card-header-danger">
- <h4 class="card-title">Create Assignment</h4>
- </div>
- <div class="card-body">
- <form>
- <div class="row">
- <div class="col-md-6">
- <mat-form-field class="example-full-width">
- <input matInput placeholder="Assignment Name" type="text">
- </mat-form-field>
- </div>
- <div class="col-md-6">
- <mat-form-field class="example-full-width">
- <input matInput placeholder="Last Name" type="text">
- </mat-form-field>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <mat-form-field class="example-full-width">
- <input matInput placeholder="Adress" type="text">
- </mat-form-field>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <mat-form-field class="example-full-width">
- <input matInput placeholder="City" type="text">
- </mat-form-field>
- </div>
- <div class="col-md-4">
- <mat-form-field class="example-full-width">
- <input matInput placeholder="Country" type="text">
- </mat-form-field>
- </div>
- <div class="col-md-4">
- <mat-form-field class="example-full-width">
- <input matInput placeholder="Postal Code" type="text">
- </mat-form-field>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <label>About Me</label>
- <mat-form-field class="example-full-width">
- <textarea matInput placeholder="Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo."></textarea>
- </mat-form-field>
- <!-- <div class="form-group">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-12">
+ <div class="card">
+ <div class="card-header card-header-danger">
+ <h4 class="card-title">Create Assignment</h4>
+ </div>
+ <div class="card-body">
+ <form>
+ <div class="row">
+ <div class="col-md-6">
+ <mat-form-field class="example-full-width">
+ <input matInput placeholder="Assignment Name" type="text">
+ </mat-form-field>
+ </div>
+ <div class="col-md-6">
+ <mat-form-field class="example-full-width">
+ <input matInput placeholder="Last Name" type="text">
+ </mat-form-field>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <mat-form-field class="example-full-width">
+ <input matInput placeholder="Adress" type="text">
+ </mat-form-field>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-4">
+ <mat-form-field class="example-full-width">
+ <input matInput placeholder="City" type="text">
+ </mat-form-field>
+ </div>
+ <div class="col-md-4">
+ <mat-form-field class="example-full-width">
+ <input matInput placeholder="Country" type="text">
+ </mat-form-field>
+ </div>
+ <div class="col-md-4">
+ <mat-form-field class="example-full-width">
+ <input matInput placeholder="Postal Code" type="text">
+ </mat-form-field>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <label>About Me</label>
+ <mat-form-field class="example-full-width">
+ <textarea matInput placeholder="Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo."></textarea>
+ </mat-form-field>
+ <!-- <div class="form-group">
- <div class="form-group">
- <label class="bmd-label-floating"> Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</label>
- <textarea class="form-control" rows="5"></textarea>
- </div>
- </div> -->
- </div>
- </div>
- <button mat-raised-button type="submit" class="btn btn-danger pull-right">Create</button>
- <div class="clearfix"></div>
- </form>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div class="form-group">
+ <label class="bmd-label-floating"> Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</label>
+ <textarea class="form-control" rows="5"></textarea>
+ </div>
+ </div> -->
+ </div>
+ </div>
+ <button mat-raised-button type="submit" class="btn btn-danger pull-right">Create</button>
+ <div class="clearfix"></div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
diff --git a/AngularApp/src/app/user-profile/user-profile.component.spec.ts b/AngularApp/src/app/user-profile/user-profile.component.spec.ts
index e683b96..a725f1d 100644
--- a/AngularApp/src/app/user-profile/user-profile.component.spec.ts
+++ b/AngularApp/src/app/user-profile/user-profile.component.spec.ts
@@ -2,24 +2,25 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UserProfileComponent } from './user-profile.component';
+
describe('UserProfileComponent', () => {
- let component: UserProfileComponent;
- let fixture: ComponentFixture<UserProfileComponent>;
+ let component: UserProfileComponent;
+ let fixture: ComponentFixture<UserProfileComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ UserProfileComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ UserProfileComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(UserProfileComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(UserProfileComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/AngularApp/src/app/user-profile/user-profile.component.ts b/AngularApp/src/app/user-profile/user-profile.component.ts
index bdc2bb0..22ea1d9 100644
--- a/AngularApp/src/app/user-profile/user-profile.component.ts
+++ b/AngularApp/src/app/user-profile/user-profile.component.ts
@@ -1,15 +1,16 @@
import { Component, OnInit } from '@angular/core';
+
@Component({
- selector: 'app-user-profile',
- templateUrl: './user-profile.component.html',
- styleUrls: ['./user-profile.component.css']
-})
+ selector : 'app-user-profile',
+ templateUrl: './user-profile.component.html',
+ styleUrls : [ './user-profile.component.css' ]
+ })
export class UserProfileComponent implements OnInit {
- constructor() { }
+ constructor() { }
- ngOnInit() {
- }
+ ngOnInit() {
+ }
}
diff --git a/AngularApp/src/assets/css/demo.css b/AngularApp/src/assets/css/demo.css
index 974f26a..b6a30c4 100644
--- a/AngularApp/src/assets/css/demo.css
+++ b/AngularApp/src/assets/css/demo.css
@@ -15,21 +15,22 @@
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
-.tim-typo{
- padding-left: 25%;
- margin-bottom: 40px;
- position: relative;
- width: 100%;
+.tim-typo {
+ padding-left : 25%;
+ margin-bottom : 40px;
+ position : relative;
+ width : 100%;
}
-.tim-typo .tim-note{
- bottom: 5px;
- color: #c0c1c2;
- display: block;
- font-weight: 400;
- font-size: 13px;
- line-height: 15px;
- left: 0;
- margin-left: 20px;
- position: absolute;
- width: 260px;
+
+.tim-typo .tim-note {
+ bottom : 5px;
+ color : #C0C1C2;
+ display : block;
+ font-weight : 400;
+ font-size : 13px;
+ line-height : 15px;
+ left : 0;
+ margin-left : 20px;
+ position : absolute;
+ width : 260px;
}
diff --git a/AngularApp/src/assets/scss/core/_alerts.scss b/AngularApp/src/assets/scss/core/_alerts.scss
index e6644f2..2e5599b 100644
--- a/AngularApp/src/assets/scss/core/_alerts.scss
+++ b/AngularApp/src/assets/scss/core/_alerts.scss
@@ -1,105 +1,113 @@
.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;
+ 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);
+ @include alert-variations(unquote('.alert'), unquote(''), $mdb-text-color-light);
&-info, &-danger, &-warning, &-success, &-rose {
- color: $mdb-text-color-light;
+ color : $mdb-text-color-light;
}
&-default {
a, .alert-link {
- color: $mdb-text-color-primary;
+ color : $mdb-text-color-primary;
}
}
- span{
- display: block;
- max-width: 89%;
+ span {
+ display : block;
+ max-width : 89%;
}
- &.alert-danger{
+ &.alert-danger {
@include shadow-alert-color($brand-danger);
@include alert-icon-color($brand-danger);
}
- &.alert-warning{
+
+ &.alert-warning {
@include shadow-alert-color($brand-warning);
@include alert-icon-color($brand-warning);
}
- &.alert-success{
+
+ &.alert-success {
@include shadow-alert-color($brand-success);
@include alert-icon-color($brand-success);
}
- &.alert-info{
+
+ &.alert-info {
@include shadow-alert-color($brand-info);
@include alert-icon-color($brand-info);
}
- &.alert-primary{
+
+ &.alert-primary {
@include shadow-alert-color($brand-primary);
@include alert-icon-color($brand-primary);
}
- &.alert-rose{
+
+ &.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;
- }
+ &.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 : #FFFFFF;
+ }
}
- .mat-button.close{
- min-width: auto;
- line-height: .5;
- i{
- color: $white-color;
- font-size: 11px;
+ .mat-button.close {
+ min-width : auto;
+ line-height : .5;
+
+ i {
+ color : $white-color;
+ font-size : 11px;
}
}
- i[data-notify="icon"]{
- display: none;
+ i[data-notify='icon'] {
+ display : none;
}
- .alert-icon{
- display: block;
- float: left;
- margin-right: $margin-base;
+ .alert-icon {
+ display : block;
+ float : left;
+ margin-right : $margin-base;
- i{
- margin-top: -7px;
- top: 5px;
- position: relative;
+ i {
+ margin-top : -7px;
+ top : 5px;
+ position : relative;
}
}
- [data-notify="dismiss"]{
- margin-right: 5px;
+ [data-notify='dismiss'] {
+ margin-right : 5px;
}
}
.places-buttons .btn {
- margin-bottom: 30px;
+ margin-bottom : 30px;
}
+
//
// .alert {
// border: 0;
diff --git a/AngularApp/src/assets/scss/core/_angular-modal.scss b/AngularApp/src/assets/scss/core/_angular-modal.scss
index 6aae706..6405c28 100644
--- a/AngularApp/src/assets/scss/core/_angular-modal.scss
+++ b/AngularApp/src/assets/scss/core/_angular-modal.scss
@@ -1,120 +1,120 @@
-.modal.modal-angular{
- .modal-header{
- border-bottom: none;
- position: relative;
+.modal.modal-angular {
+ .modal-header {
+ border-bottom : none;
+ position : relative;
}
- .modal-footer{
- border-top: none;
+ .modal-footer {
+ border-top : none;
}
- .modal-body{
- .separator{
- border-bottom: 1px solid rgba(220,220,220, .2);
- width: 100%;
- display: block;
- margin: 11px 0;
+ .modal-body {
+ .separator {
+ border-bottom : 1px solid rgba(220, 220, 220, .2);
+ width : 100%;
+ display : block;
+ margin : 11px 0;
}
- .image-container{
- width: 35px;
- overflow: hidden;
- margin: 0px auto;
- margin-bottom: 17px;
+ .image-container {
+ width : 35px;
+ overflow : hidden;
+ margin : 0px auto;
+ margin-bottom : 17px;
- img{
- width: 100%;
- vertical-align: top;
+ img {
+ width : 100%;
+ vertical-align : top;
}
- &.image-angular-cli{
- width: 44px;
- position: relative;
- top: 4px;
- margin-top: -9px;
+ &.image-angular-cli {
+ width : 44px;
+ position : relative;
+ top : 4px;
+ margin-top : -9px;
}
}
- h4{
- padding-left: 0px;
- font-size: 16px;
- font-weight: 400;
+ h4 {
+ padding-left : 0px;
+ font-size : 16px;
+ font-weight : 400;
- &.margin-top{
- margin-top: 15px;
+ &.margin-top {
+ margin-top : 15px;
}
- i{
- color: #c5a47e;
+ i {
+ color : #C5A47E;
}
}
- a.modal-button{
- display: inline-block;
- padding: 20px 15px;
- background-color: #fdfdfd;
- font-size: 14px;
- text-align: center;
- color: inherit;
- border-radius: 6px;
- transition: box-shadow 150ms ease-in;
- width: 130px;
- max-width: 130px;
- margin-bottom: 10px;
- font-weight: 100;
- border: 1px solid rgba(220,220,220, .4);
-
- &:nth-child(2n+1){
- margin-left: 10px;
- margin-right: 10px;
+ a.modal-button {
+ display : inline-block;
+ padding : 20px 15px;
+ background-color : #FDFDFD;
+ font-size : 14px;
+ text-align : center;
+ color : inherit;
+ border-radius : 6px;
+ transition : box-shadow 150ms ease-in;
+ width : 130px;
+ max-width : 130px;
+ margin-bottom : 10px;
+ font-weight : 100;
+ border : 1px solid rgba(220, 220, 220, .4);
+
+ &:nth-child(2n+1) {
+ margin-left : 10px;
+ margin-right : 10px;
}
- &.disabled{
- opacity: .5;
- pointer-events: none;
+ &.disabled {
+ opacity : .5;
+ pointer-events : none;
}
&:hover,
- &:focus{
- box-shadow: 0px 3px 25px 0px rgba(0, 0, 0, 0.2);
+ &:focus {
+ box-shadow : 0px 3px 25px 0px rgba(0, 0, 0, 0.2);
}
- .product-type{
- font-size: 12px;
- font-weight: 600;
+ .product-type {
+ font-size : 12px;
+ font-weight : 600;
}
- .price{
- font-size: 11px;
- font-weight: 100;
-
- span{
- display: block;
- font-size: 27px;
- position: relative;
- font-weight: 500;
- margin-top: 3px;
-
- i{
- font-size: 10px;
- position: absolute;
- width: 8px;
- top: 4px;
+ .price {
+ font-size : 11px;
+ font-weight : 100;
+
+ span {
+ display : block;
+ font-size : 27px;
+ position : relative;
+ font-weight : 500;
+ margin-top : 3px;
+
+ i {
+ font-size : 10px;
+ position : absolute;
+ width : 8px;
+ top : 4px;
}
}
}
- .wrapper-card{
- position: relative;
+ .wrapper-card {
+ position : relative;
}
}
}
}
-@media (min-width: 768px){
- .modal.modal-angular{
- .modal-dialog{
- width: 570px;
+@media (min-width : 768px) {
+ .modal.modal-angular {
+ .modal-dialog {
+ width : 570px;
}
}
}
diff --git a/AngularApp/src/assets/scss/core/_buttons.scss b/AngularApp/src/assets/scss/core/_buttons.scss
index 489a4d7..b9e2a50 100644
--- a/AngularApp/src/assets/scss/core/_buttons.scss
+++ b/AngularApp/src/assets/scss/core/_buttons.scss
@@ -1,257 +1,266 @@
-.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;
- }
+.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;
+ }
}
- @include bmd-disabled() {
- 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-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-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-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-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;
+.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;
+.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;
- }
+.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;
- }
+ // 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
- }
+ // 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;
- }
+ 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), .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(: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;
+ border-top-right-radius : 0;
+ border-bottom-right-radius : 0;
}
-.btn-no-ripple .mat-button-ripple{
- display: none;
+
+.btn-no-ripple .mat-button-ripple {
+ display : none;
}
+
.mat-button, .mat-icon-button {
- background: transparent;
+ background : transparent;
}
-.mat-button:hover .mat-button-focus-overlay, .mat-stroked-button:hover .mat-button-focus-overlay{
- opacity: 0;
- background-color: transparent!important;
+
+.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;
+ outline : none;
}
-.mat-button .mat-button-ripple{
- border-radius: inherit;
+
+.mat-button .mat-button-ripple {
+ border-radius : inherit;
}
diff --git a/AngularApp/src/assets/scss/core/_cards.scss b/AngularApp/src/assets/scss/core/_cards.scss
index 7f49c8c..5768bfc 100644
--- a/AngularApp/src/assets/scss/core/_cards.scss
+++ b/AngularApp/src/assets/scss/core/_cards.scss
@@ -1,161 +1,164 @@
//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%;
+ 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:not([class*='text-']) {
+ color : $gray-color;
}
- .card-category{
- margin-top: 10px;
- .material-icons{
- position: relative;
- top: 8px;
- line-height: 0;
- }
- }
+ .card-category {
+ margin-top : 10px;
- .form-check {
- margin-top: 15px;
- }
+ .material-icons {
+ position : relative;
+ top : 8px;
+ line-height : 0;
+ }
+ }
+
+ .form-check {
+ margin-top : 15px;
+ }
- .card-title{
- margin-top: 0.625rem;
+ .card-title {
+ margin-top : 0.625rem;
- &:last-child{
- margin-bottom: 0;
+ &:last-child {
+ margin-bottom : 0;
}
}
- // Cards have a default elevation of 2dp.
- @include box-shadow($bmd-shadow-2dp);
- @extend %std-font;
+ // 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;
- }
- }
+ &.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 : $padding-card-body-y $padding-card-body-x;
+ }
- .card-body {
- & + .card-footer{
- padding-top: 0rem;
- border: 0;
- border-radius: $border-radius-large;
- }
- }
+ .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;
+ .card-footer {
+ display : flex;
+ align-items : center;
+ background-color : transparent;
+ border : 0;
- .author,
- .stats {
- display: inline-flex;
- }
+ .author,
+ .stats {
+ display : inline-flex;
+ }
- .stats {
- color: $gray-color;
+ .stats {
+ color : $gray-color;
- .material-icons {
- position: relative;
- top: -10px;
- margin-right: 3px;
- margin-left: 3px;
- font-size: 18px;
+ .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);
- }
+ &.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;
+ @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;
+ border-bottom : none;
+ background : transparent;
+
+ .title {
+ color : $white-color;
}
- &:not([class*="card-header-"]){
+ &:not([class*='card-header-']) {
// @include shadow-big();
}
.nav-tabs {
- padding: 0;
+ 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;
+ 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;
+ 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);
+ 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;
+ .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;
+ &.no-shadow {
+ box-shadow : none;
- &.shadow-normal{
+ &.shadow-normal {
@include shadow-big();
}
- .colored-shadow{
- display: none !important;
+ .colored-shadow {
+ display : none !important;
}
}
}
@@ -166,40 +169,44 @@
.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-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-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-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-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-rotate.bg-danger .back {
+ background : linear-gradient(60deg, $red-400, $red-600);
}
.card-header-rose .card-icon,
@@ -207,452 +214,469 @@
.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-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{
+ .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{
+ .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{
+ .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{
+ .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{
+ .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{
+ .card-header-success .card-text {
@include shadow-big-color($brand-success);
}
- [class*="card-header-"],
- &[class*="bg-"]{
- color: $white-color;
+ [class*='card-header-'],
+ &[class*='bg-'] {
+ color : $white-color;
.card-title a,
.card-title,
- .icon i{
- color: $white-color;
+ .icon i {
+ color : $white-color;
}
- .icon i{
- border-color: rgba(255, 255, 255, 0.25);
+ .icon i {
+ border-color : rgba(255, 255, 255, 0.25);
}
+
.author a,
.stats,
.card-category,
- .card-description{
- color: $white-transparent;
+ .card-description {
+ color : $white-transparent;
}
- .author a{
+ .author a {
&:hover,
&:focus,
- &:active{
- color: $white-color;
+ &:active {
+ color : $white-color;
}
}
}
- .author{
- .avatar{
- width: 30px;
- height: 30px;
- overflow: hidden;
- border-radius: 50%;
- margin-right: 5px;
+ .author {
+ .avatar {
+ width : 30px;
+ height : 30px;
+ overflow : hidden;
+ border-radius : 50%;
+ margin-right : 5px;
}
- a{
- color: $black-color;
- text-decoration: none;
+ a {
+ color : $black-color;
+ text-decoration : none;
- .ripple-container{
- display: none;
+ .ripple-container {
+ display : none;
}
}
}
- .card-category-social{
- .fa{
- font-size: 24px;
- position: relative;
- margin-top: -4px;
- top: 2px;
- margin-right: 5px;
+ .card-category-social {
+ .fa {
+ font-size : 24px;
+ position : relative;
+ margin-top : -4px;
+ top : 2px;
+ margin-right : 5px;
}
- .material-icons{
- position: relative;
- top: 5px;
+ .material-icons {
+ position : relative;
+ top : 5px;
}
}
- &[class*="bg-"],
- &[class*="bg-"] .card-body{
- border-radius: $border-radius-large;
+ &[class*='bg-'],
+ &[class*='bg-'] .card-body {
+ border-radius : $border-radius-large;
h1,
h2,
- h3{
- small{
- color: $white-transparent;
- }
+ h3 {
+ small {
+ color : $white-transparent;
+ }
}
}
- .card-stats{
- background: transparent;
- display: flex;
+ .card-stats {
+ background : transparent;
+ display : flex;
.author,
- .stats{
- display: inline-flex;
+ .stats {
+ display : inline-flex;
}
}
}
.card {
- box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
+ box-shadow : 0 1px 4px 0 rgba(0, 0, 0, 0.14);
- .table tr:first-child td{
- border-top: none;
- }
+ .table tr:first-child td {
+ border-top : none;
+ }
- .card-title{
- margin-top: 0;
- margin-bottom: 15px;
- }
+ .card-title {
+ margin-top : 0;
+ margin-bottom : 15px;
+ }
- .card-body{
- padding: $padding-card-body-y 20px;
- position: relative;
+ .card-body {
+ padding : $padding-card-body-y 20px;
+ position : relative;
- }
+ }
- .card-header {
- z-index: 3 !important;
+ .card-header {
+ z-index : 3 !important;
- .card-title{
- margin-bottom: 3px;
+ .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-category{
- margin: 0;
+ &.card-plain {
+ .card-header {
+ &.card-header-icon + .card-body .card-title,
+ &.card-header-icon + .card-body .card-category {
+ margin-top : -20px;
+ }
+ }
}
- &.card-header-text {
- display: inline-block;
+ .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;
+ }
- &:after {
- content: "";
- display: table;
+ .fix-broken-card {
+ position : absolute;
+ top : -65px;
}
}
- &.card-header-icon,
- &.card-header-text {
- i {
- width: 33px;
- height: 33px;
- text-align: center;
- line-height: 33px;
+ &.card-chart {
+ .card-footer i:nth-child(1n+2) {
+ width : 18px;
+ text-align : center;
+ }
+
+ .card-category {
+ margin : 0;
}
- .card-title{
- margin-top: 15px;
- color: $black-color;
+ }
+
+ .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%;
}
- h4{
- font-weight: 300;
+
+ .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;
+ }
}
}
- &.card-header-tabs {
- .nav-tabs {
- background: transparent;
- padding: 0;
+ [class*='card-header-'] {
+ margin : 0px 15px 0;
+ padding : 0;
+
+ .card-title + .card-category {
+ color : rgba(255, 255, 255, 0.62);
+
+ a {
+ color : $white-color;
+ }
}
- .nav-tabs-title {
- float: left;
- padding: 10px 10px 10px 0;
- line-height: 24px;
+
+ &: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;
+ }
}
}
- }
- &.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;
+ [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;
}
- }
-
- &: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;
- }
+ }
+
+ .card-body.table-full-width {
+ padding : 0;
+ }
+
+ .card-plain .card-header-icon {
+ margin-right : 15px !important;
+ }
}
-.table-sales{
- margin-top: 40px;
+.table-sales {
+ margin-top : 40px;
}
.iframe-container {
- width: 100%;
+ width : 100%;
iframe {
- width: 100%;
- height: 500px;
- border: 0;
+ 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;
- }
+ .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-body + .card-footer {
+ border-top : 1px solid #EEEEEE;
+ }
}
-.card-product{
- .price{
- color: inherit;
- }
+.card-product {
+ .price {
+ color : inherit;
+ }
}
.card-collapse {
- margin-bottom: 15px;
+ margin-bottom : 15px;
- .card .card-header a[aria-expanded="true"]{
- color: #e91e63;
- }
+ .card .card-header a[aria-expanded='true'] {
+ color : #E91E63;
+ }
}
diff --git a/AngularApp/src/assets/scss/core/_checkboxes.scss b/AngularApp/src/assets/scss/core/_checkboxes.scss
index d432d31..19682db 100644
--- a/AngularApp/src/assets/scss/core/_checkboxes.scss
+++ b/AngularApp/src/assets/scss/core/_checkboxes.scss
@@ -1,73 +1,72 @@
.form-check {
- margin-bottom: .5rem;
- padding-left: 0;
+ margin-bottom : .5rem;
+ padding-left : 0;
.form-check-label {
- cursor: pointer;
- padding-left: 0; // Reset for Bootstrap rule
+ cursor : pointer;
+ padding-left : 0; // Reset for Bootstrap rule
// color: $mdb-checkbox-label-color;
@include mdb-label-color-toggle-focus();
}
- // Hide native checkbox
+ // 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;
+ 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;
+ 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;
+ 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;
+ 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,
+ 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,
@@ -80,131 +79,130 @@
}
- .form-check-input{
+ .form-check-input {
&:focus + .form-check-sign .check:after {
- opacity: 0.2;
+ opacity : 0.2;
}
&:checked {
& + .form-check-sign .check {
- background: $mdb-checkbox-checked-color;
+ 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;
+ 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);
+ @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);
+ //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:before {
+ @include animation(rippleOff $mdb-checkbox-animation-ripple);
+ }
- & + .form-check-sign .check:after {
- @include animation(rippleOff $mdb-checkbox-animation-ripple); // Ripple effect on uncheck
+ & + .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;
- }
+ .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;
- }
+ 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;
- }
+ 0% {
+ opacity : 0;
+ }
+ 50% {
+ opacity : 0.2;
+ }
+ 100% {
+ opacity : 0;
+ }
}
+
@keyframes rippleOff {
- 0% {
- opacity: 0;
- }
- 50% {
- opacity: 0.2;
- }
- 100% {
- opacity: 0;
- }
+ 0% {
+ opacity : 0;
+ }
+ 50% {
+ opacity : 0.2;
+ }
+ 100% {
+ opacity : 0;
+ }
}
diff --git a/AngularApp/src/assets/scss/core/_dropdown.scss b/AngularApp/src/assets/scss/core/_dropdown.scss
index 3f289b4..2338ee9 100644
--- a/AngularApp/src/assets/scss/core/_dropdown.scss
+++ b/AngularApp/src/assets/scss/core/_dropdown.scss
@@ -1,207 +1,207 @@
-@use "sass:math";
+@use 'sass:math';
// 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;
+ 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;
+ &: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;
+ &.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;
+ // 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;
+ display : flex;
+ flex-flow : nowrap;
+ align-items : center;
+ color : $bmd-dropdown-link-color;
+ font-weight : normal;
+ text-decoration : none;
- font-size: .8125rem;
- border-radius: math.div($border-radius, 2);
- margin: 0 $bmd-dropdown-margin-y;
- @include transitions($fast-transition-time, $transition-linear);
+ font-size : .8125rem;
+ border-radius : math.div($border-radius, 2);
+ margin : 0 $bmd-dropdown-margin-y;
+ @include transitions($fast-transition-time, $transition-linear);
- min-width: $bmd-menu-item-min-width;
+ min-width : $bmd-menu-item-min-width;
- padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+ padding : $dropdown-item-padding-y $dropdown-item-padding-x;
- overflow: hidden;
- line-height: $bmd-line-height;
- text-overflow: ellipsis;
- word-wrap: break-word;
+ 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;
+ @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;
- }
+ .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;
- }
+ &.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
- }
+ ~ .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;
- }
+ &:after {
+ will-change : transform;
+ transition : transform $bmd-animation-dropdown-caret linear;
+ }
- .show &:after{
- @include rotate-180();
- }
+ .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-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;
+ &.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;
+.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);
- }
+ 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 {
+ 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.top {
+ transform-origin : 0 100%;
}
-.dropdown-menu.bootstrap-datetimepicker-widget.open{
- opacity: 1;
- transform: scale(1);
- top: 0;
+.dropdown-menu.bootstrap-datetimepicker-widget.open {
+ opacity : 1;
+ transform : scale(1);
+ top : 0;
}
diff --git a/AngularApp/src/assets/scss/core/_example-pages.scss b/AngularApp/src/assets/scss/core/_example-pages.scss
index 42575ae..f52da50 100644
--- a/AngularApp/src/assets/scss/core/_example-pages.scss
+++ b/AngularApp/src/assets/scss/core/_example-pages.scss
@@ -1,55 +1,60 @@
.card-signup {
- .card-header {
- .social-line {
- .btn {
- color: $white-color;
- }
+ .card-header {
+ .social-line {
+ .btn {
+ color : $white-color;
+ }
+ }
+ }
+
+ .text-divider {
+ margin-top : 30px;
+ margin-bottom : 0px;
+ text-align : center;
}
- }
- .text-divider {
- margin-top: 30px;
- margin-bottom: 0px;
- text-align: center;
- }
}
.signup-page {
.page-header {
- min-height: 100vh;
- height: auto;
- display: inherit;
+ min-height : 100vh;
+ height : auto;
+ display : inherit;
- .container{
- padding-top: 20vh;
+ .container {
+ padding-top : 20vh;
}
}
.card-signup {
- border-radius: $border-radius-base * 2;
+ border-radius : $border-radius-base * 2;
@include shadow-16dp();
- margin-bottom: 100px;
- padding: 40px 0px;
+ margin-bottom : 100px;
+ padding : 40px 0px;
}
+
.info-horizontal {
- padding: 0px 0px 20px;
+ padding : 0px 0px 20px;
}
.social {
.btn {
- margin: 5px;
+ margin : 5px;
}
+
h4 {
- margin-top: 20px;
+ margin-top : 20px;
}
}
+
.footer {
.container {
- padding: 0;
+ padding : 0;
}
+
.copyright,
- a{
- color: $white-color;
+ a {
+ color : $white-color;
}
}
}
diff --git a/AngularApp/src/assets/scss/core/_fixed-plugin.scss b/AngularApp/src/assets/scss/core/_fixed-plugin.scss
index 219d42c..d6dcc7a 100644
--- a/AngularApp/src/assets/scss/core/_fixed-plugin.scss
+++ b/AngularApp/src/assets/scss/core/_fixed-plugin.scss
@@ -1,20 +1,24 @@
-.fixed-plugin{
- .dropdown{
- .dropdown-menu{
- border-radius: 10px;
- li.adjustments-line{
- border-bottom: 1px solid #ddd;
+.fixed-plugin {
+ .dropdown {
+ .dropdown-menu {
+ border-radius : 10px;
+
+ li.adjustments-line {
+ border-bottom : 1px solid #DDDDDD;
}
- li{
- padding: 5px 2px !important;
+
+ li {
+ padding : 5px 2px !important;
}
- .adjustments-line{
- .bootstrap-switch{
- position: absolute;
- right: 10px !important;
+
+ .adjustments-line {
+ .bootstrap-switch {
+ position : absolute;
+ right : 10px !important;
}
- label{
- margin-bottom: .1rem !important;
+
+ label {
+ margin-bottom : .1rem !important;
}
}
}
@@ -22,286 +26,309 @@
}
.fixed-plugin li > a,
-.fixed-plugin .badge{
- transition: all .34s;
- -webkit-transition: all .34s;
- -moz-transition: all .34s;
-}
-
-.fixed-plugin{
- position: fixed;
- top: 115px;
- right: 0;
- width: 64px;
- background: rgba(0,0,0,.3);
- z-index: 1031;
- border-radius: 8px 0 0 8px;
- text-align: center;
-}
-.fixed-plugin .fa-cog{
- color: #FFFFFF;
- padding: 10px;
- border-radius: 0 0 6px 6px;
- width: auto;
-}
-.fixed-plugin .dropdown-menu{
- right: 80px;
- left: auto;
- width: 290px;
- border-radius: 0.1875rem;
- padding: 0 10px;
-}
-.fixed-plugin .dropdown-menu:after, .fixed-plugin .dropdown-menu:before{
- right: 10px;
- margin-left: auto;
- left: auto;
-}
-.fixed-plugin .fa-circle-thin{
- color: #FFFFFF;
-}
-.fixed-plugin .active .fa-circle-thin{
- color: #00bbff;
+.fixed-plugin .badge {
+ transition : all .34s;
+ -webkit-transition : all .34s;
+ -moz-transition : all .34s;
+}
+
+.fixed-plugin {
+ position : fixed;
+ top : 115px;
+ right : 0;
+ width : 64px;
+ background : rgba(0, 0, 0, .3);
+ z-index : 1031;
+ border-radius : 8px 0 0 8px;
+ text-align : center;
+}
+
+.fixed-plugin .fa-cog {
+ color : #FFFFFF;
+ padding : 10px;
+ border-radius : 0 0 6px 6px;
+ width : auto;
+}
+
+.fixed-plugin .dropdown-menu {
+ right : 80px;
+ left : auto;
+ width : 290px;
+ border-radius : 0.1875rem;
+ padding : 0 10px;
+}
+
+.fixed-plugin .dropdown-menu:after, .fixed-plugin .dropdown-menu:before {
+ right : 10px;
+ margin-left : auto;
+ left : auto;
+}
+
+.fixed-plugin .fa-circle-thin {
+ color : #FFFFFF;
+}
+
+.fixed-plugin .active .fa-circle-thin {
+ color : #00BBFF;
}
.fixed-plugin .dropdown-menu > .active > a,
.fixed-plugin .dropdown-menu > .active > a:hover,
-.fixed-plugin .dropdown-menu > .active > a:focus{
- color: #777777;
- text-align: center;
+.fixed-plugin .dropdown-menu > .active > a:focus {
+ color : #777777;
+ text-align : center;
}
-.fixed-plugin img{
- border-radius: 0;
- width: 100%;
- height: 100px;
- margin: 0 auto;
+.fixed-plugin img {
+ border-radius : 0;
+ width : 100%;
+ height : 100px;
+ margin : 0 auto;
}
.fixed-plugin .dropdown-menu li > a:hover,
-.fixed-plugin .dropdown-menu li > a:focus{
- box-shadow: none;
+.fixed-plugin .dropdown-menu li > a:focus {
+ box-shadow : none;
}
-.fixed-plugin .badge{
- border: 3px solid #FFFFFF;
- border-radius: 50%;
- cursor: pointer;
- display: inline-block;
- height: 23px;
- margin-right: 5px;
- position: relative;
- width: 23px;
- padding: 8px;
+.fixed-plugin .badge {
+ border : 3px solid #FFFFFF;
+ border-radius : 50%;
+ cursor : pointer;
+ display : inline-block;
+ height : 23px;
+ margin-right : 5px;
+ position : relative;
+ width : 23px;
+ padding : 8px;
}
+
.fixed-plugin .badge.active,
-.fixed-plugin .badge:hover{
- border-color: #00bbff;
+.fixed-plugin .badge:hover {
+ border-color : #00BBFF;
}
-.fixed-plugin .badge-black{
- background-color: #000;
+.fixed-plugin .badge-black {
+ background-color : #000000;
}
-.fixed-plugin .badge-azure{
- background-color: #2CA8FF;
+
+.fixed-plugin .badge-azure {
+ background-color : #2CA8FF;
}
-.fixed-plugin .badge-green{
- background-color: #18ce0f;
+
+.fixed-plugin .badge-green {
+ background-color : #18CE0F;
}
-.fixed-plugin .badge-orange{
- background-color: #f96332;
+
+.fixed-plugin .badge-orange {
+ background-color : #F96332;
}
-.fixed-plugin .badge-yellow{
- background-color: #FFB236;
+
+.fixed-plugin .badge-yellow {
+ background-color : #FFB236;
}
-.fixed-plugin .badge-danger{
- background-color: #f44336;
+
+.fixed-plugin .badge-danger {
+ background-color : #F44336;
}
-.fixed-plugin .badge-purple{
- background-color: #9368E9;
+
+.fixed-plugin .badge-purple {
+ background-color : #9368E9;
}
-.fixed-plugin .badge-white{
- background-color: rgba(200, 200, 200, 0.2);
+
+.fixed-plugin .badge-white {
+ background-color : rgba(200, 200, 200, 0.2);
}
-.fixed-plugin .badge-rose{
- background-color: #e91e63;
+
+.fixed-plugin .badge-rose {
+ background-color : #E91E63;
}
-.fixed-plugin h5{
- font-size: 14px;
- margin: 10px;
+.fixed-plugin h5 {
+ font-size : 14px;
+ margin : 10px;
}
-.fixed-plugin .dropdown-menu li{
- display: block;
- padding: 18px 2px;
- width: 25%;
- float: left;
+
+.fixed-plugin .dropdown-menu li {
+ display : block;
+ padding : 18px 2px;
+ width : 25%;
+ float : left;
}
.fixed-plugin li.adjustments-line,
.fixed-plugin li.header-title,
-.fixed-plugin li.button-container{
- width: 100%;
- height: 50px;
- min-height: inherit;
+.fixed-plugin li.button-container {
+ width : 100%;
+ height : 50px;
+ min-height : inherit;
}
-.fixed-plugin li.button-container{
- height: auto;
+.fixed-plugin li.button-container {
+ height : auto;
}
-.fixed-plugin li.button-container div{
- margin-bottom: 5px;
+
+.fixed-plugin li.button-container div {
+ margin-bottom : 5px;
}
-.fixed-plugin #sharrreTitle{
- text-align: center;
- padding: 10px 0;
- height: 50px;
+.fixed-plugin #sharrreTitle {
+ text-align : center;
+ padding : 10px 0;
+ height : 50px;
}
-.fixed-plugin li.header-title{
- height: 30px;
- line-height: 25px;
- font-size: 12px;
- font-weight: 600;
- text-transform: uppercase;
- text-align: center;
+.fixed-plugin li.header-title {
+ height : 30px;
+ line-height : 25px;
+ font-size : 12px;
+ font-weight : 600;
+ text-transform : uppercase;
+ text-align : center;
}
-.fixed-plugin .adjustments-line p{
- float: left;
- display: inline-block;
- margin-bottom: 0;
- font-size: 1em;
- color: #3C4858;
- padding-top: 0px;
+.fixed-plugin .adjustments-line p {
+ float : left;
+ display : inline-block;
+ margin-bottom : 0;
+ font-size : 1em;
+ color : #3C4858;
+ padding-top : 0px;
}
-.fixed-plugin .adjustments-line a .badge-colors{
- position: relative;
- top: -2px;
+.fixed-plugin .adjustments-line a .badge-colors {
+ position : relative;
+ top : -2px;
}
-.fixed-plugin .adjustments-line .togglebutton{
- padding-right: 7px;
+.fixed-plugin .adjustments-line .togglebutton {
+ padding-right : 7px;
}
-.fixed-plugin .adjustments-line .togglebutton .toggle{
- margin-right: 0;
+.fixed-plugin .adjustments-line .togglebutton .toggle {
+ margin-right : 0;
}
-.fixed-plugin .dropdown-menu > li.adjustments-line > a{
- padding-right: 0;
- padding-left: 0;
- /*border-bottom: 1px solid #ddd;*/
- border-radius: 0;
- margin: 0;
+.fixed-plugin .dropdown-menu > li.adjustments-line > a {
+ padding-right : 0;
+ padding-left : 0;
+ /*border-bottom: 1px solid #ddd;*/
+ border-radius : 0;
+ margin : 0;
}
-.fixed-plugin .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;
- min-width: 25%;
+
+.fixed-plugin .dropdown-menu > li > a.img-holder {
+ font-size : 16px;
+ text-align : center;
+ border-radius : 10px;
+ background-color : #FFFFFF;
+ border : 3px solid #FFFFFF;
+ padding-left : 0;
+ padding-right : 0;
+ opacity : 1;
+ cursor : pointer;
+ display : block;
+ max-height : 100px;
+ overflow : hidden;
+ padding : 0;
+ min-width : 25%;
}
.fixed-plugin .dropdown-menu > li > a.switch-trigger:hover,
-.fixed-plugin .dropdown-menu > li > a.switch-trigger:focus{
- background-color: transparent;
+.fixed-plugin .dropdown-menu > li > a.switch-trigger:focus {
+ background-color : transparent;
}
+
.fixed-plugin .dropdown-menu > li:hover > a.img-holder,
-.fixed-plugin .dropdown-menu > li:focus > a.img-holder{
- border-color: rgba(0, 187, 255, 0.53);;
+.fixed-plugin .dropdown-menu > li:focus > a.img-holder {
+ border-color : rgba(0, 187, 255, 0.53);;
}
+
.fixed-plugin .dropdown-menu > .active > a.img-holder,
-.fixed-plugin .dropdown-menu > .active > a.img-holder{
- border-color: #00bbff;
- background-color: #FFFFFF;
+.fixed-plugin .dropdown-menu > .active > a.img-holder {
+ border-color : #00BBFF;
+ background-color : #FFFFFF;
}
-.fixed-plugin .dropdown-menu > li > a img{
- margin-top: auto;
+.fixed-plugin .dropdown-menu > li > a img {
+ margin-top : auto;
}
-.fixed-plugin .btn-social{
- width: 50%;
- display: block;
- width: 48%;
- float: left;
- font-weight: 600;
+.fixed-plugin .btn-social {
+ width : 50%;
+ display : block;
+ width : 48%;
+ float : left;
+ font-weight : 600;
}
-.fixed-plugin .btn-social i{
- margin-right: 5px;
+
+.fixed-plugin .btn-social i {
+ margin-right : 5px;
}
-.fixed-plugin .btn-social:first-child{
- margin-right: 2%;
+
+.fixed-plugin .btn-social:first-child {
+ margin-right : 2%;
}
.fixed-plugin .adjustments-line a:hover,
.fixed-plugin .adjustments-line a:focus,
-.fixed-plugin .adjustments-line a{
- color: transparent;
+.fixed-plugin .adjustments-line a {
+ color : transparent;
}
-.fixed-plugin .dropdown .dropdown-menu{
- top: -40px !important;
- opacity: 0;
- visibility: hidden;
- left: -303px !important;
- transform-origin: 100% 0;
+.fixed-plugin .dropdown .dropdown-menu {
+ top : -40px !important;
+ opacity : 0;
+ visibility : hidden;
+ left : -303px !important;
+ transform-origin : 100% 0;
}
-.fixed-plugin .dropdown.show .dropdown-menu{
- opacity: 1;
- visibility: visible;
- transform: scale(1);
+
+.fixed-plugin .dropdown.show .dropdown-menu {
+ opacity : 1;
+ visibility : visible;
+ transform : scale(1);
}
.fixed-plugin .dropdown-menu:before,
-.fixed-plugin .dropdown-menu:after{
- content: "";
- display: inline-block;
- position: absolute;
- top: 65px;
- width: 16px;
- transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
-
-}
-.fixed-plugin .dropdown-menu:before{
- border-bottom: 16px solid rgba(0, 0, 0, 0);
- border-left: 16px solid rgba(0,0,0,0.2);
- border-top: 16px solid rgba(0,0,0,0);
- right: -16px;
-}
-
-.fixed-plugin .dropdown-menu:after{
- border-bottom: 16px solid rgba(0, 0, 0, 0);
- border-left: 16px solid #fff;
- border-top: 16px solid rgba(0,0,0,0);
- right: -15px;
-}
-
-.wrapper-full-page ~ .fixed-plugin .dropdown.open .dropdown-menu{
- -webkit-transform: translateY(-17%);
- -moz-transform: translateY(-17%);
- -o-transform: translateY(-17%);
- -ms-transform: translateY(-17%);
- transform: translateY(-17%);
-}
-
-.wrapper-full-page ~ .fixed-plugin .dropdown .dropdown-menu{
- -webkit-transform: translateY(-19%);
- -moz-transform: translateY(-19%);
- -o-transform: translateY(-19%);
- -ms-transform: translateY(-19%);
- transform: translateY(-19%);
+.fixed-plugin .dropdown-menu:after {
+ content : '';
+ display : inline-block;
+ position : absolute;
+ top : 65px;
+ width : 16px;
+ transform : translateY(-50%);
+ -webkit-transform : translateY(-50%);
+ -moz-transform : translateY(-50%);
+
+}
+
+.fixed-plugin .dropdown-menu:before {
+ border-bottom : 16px solid rgba(0, 0, 0, 0);
+ border-left : 16px solid rgba(0, 0, 0, 0.2);
+ border-top : 16px solid rgba(0, 0, 0, 0);
+ right : -16px;
+}
+
+.fixed-plugin .dropdown-menu:after {
+ border-bottom : 16px solid rgba(0, 0, 0, 0);
+ border-left : 16px solid #FFFFFF;
+ border-top : 16px solid rgba(0, 0, 0, 0);
+ right : -15px;
+}
+
+.wrapper-full-page ~ .fixed-plugin .dropdown.open .dropdown-menu {
+ -webkit-transform : translateY(-17%);
+ -moz-transform : translateY(-17%);
+ -o-transform : translateY(-17%);
+ -ms-transform : translateY(-17%);
+ transform : translateY(-17%);
+}
+
+.wrapper-full-page ~ .fixed-plugin .dropdown .dropdown-menu {
+ -webkit-transform : translateY(-19%);
+ -moz-transform : translateY(-19%);
+ -o-transform : translateY(-19%);
+ -ms-transform : translateY(-19%);
+ transform : translateY(-19%);
}
diff --git a/AngularApp/src/assets/scss/core/_footers.scss b/AngularApp/src/assets/scss/core/_footers.scss
index 7224ac2..f516555 100644
--- a/AngularApp/src/assets/scss/core/_footers.scss
+++ b/AngularApp/src/assets/scss/core/_footers.scss
@@ -1,102 +1,105 @@
-.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;
+.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;
+ .btn {
+ margin : 0;
}
}
- &.links-horizontal{
- &:first-child a{
- padding-left: 0;
+ &.links-horizontal {
+ &:first-child a {
+ padding-left : 0;
}
- &:last-child a{
- padding-right: 0;
+ &:last-child a {
+ padding-right : 0;
}
}
- &.links-vertical{
- li{
- display: block;
- margin-left: -5px;
- margin-right: -5px;
+ &.links-vertical {
+ li {
+ display : block;
+ margin-left : -5px;
+ margin-right : -5px;
- a{
- padding: 5px;
+ a {
+ padding : 5px;
}
}
}
}
- .social-buttons{
+ .social-buttons {
a,
- .btn{
- margin-top: 5px;
- margin-bottom: 5px;
+ .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;
+ .footer-brand {
+ float : left;
+ height : 50px;
+ padding : 15px 15px;
+ font-size : 18px;
+ line-height : 20px;
+ margin-left : -15px;
&:hover,
- &:focus{
- color: $black-color;
+ &:focus {
+ color : $black-color;
}
}
- .copyright{
- padding: 15px 0;
- .material-icons{
- font-size: 18px;
- position: relative;
- top: 3px;
+
+ .copyright {
+ padding : 15px 0;
+
+ .material-icons {
+ font-size : 18px;
+ position : relative;
+ top : 3px;
}
-
+
}
- .pull-center{
- display: inline-block;
- float: none;
+ .pull-center {
+ display : inline-block;
+ float : none;
}
}
.off-canvas-sidebar {
- .footer {
- position: absolute;
- bottom: 0;
- width: 100%;
- }
+ .footer {
+ position : absolute;
+ bottom : 0;
+ width : 100%;
+ }
}
diff --git a/AngularApp/src/assets/scss/core/_forms.scss b/AngularApp/src/assets/scss/core/_forms.scss
index 9eb7ddc..55a2616 100644
--- a/AngularApp/src/assets/scss/core/_forms.scss
+++ b/AngularApp/src/assets/scss/core/_forms.scss
@@ -1,23 +1,24 @@
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;
+ // 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;
}
- .btn {
- margin-bottom: 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;
+ }
}
- }
}
// -----
@@ -25,38 +26,37 @@ form {
//
// 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;
-}
+.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;
+ }
- .has-white &{
- @include material-placeholder(){
- color: $white-color;
- }
- }
-}
+ @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)
@@ -64,28 +64,28 @@ form {
// 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;
- }
+ 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;
+ }
}
// -----
@@ -95,33 +95,33 @@ form {
@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);
+ @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);
+ @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);
+.has-white {
+ @include bmd-form-color($white-color, $white-color, $white-color, $input-border-color-white);
- .form-control{
- &:focus{
- color: $white-color;
+ .form-control {
+ &:focus {
+ color : $white-color;
}
}
}
.has-warning {
- @include bmd-form-color($brand-warning, $brand-warning, $brand-warning, $input-border-color);
+ @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);
+ @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);
+ @include bmd-form-color($brand-rose, $brand-rose, $brand-rose, $input-border-color);
}
// Reference http://www.google.com/design/spec/components/text-fields.html
@@ -130,101 +130,103 @@ form {
// 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;
+ 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
+ // -----
+ // 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){
+ &:not(.has-success):not(.has-danger) {
[class^='bmd-label'],
- [class*=' bmd-label']{
- &.bmd-label-floating{
- color: $mdb-input-placeholder-color;
+ [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;
- }
+
+ [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;
+ }
}
- .collapsing,
- .width:not(.collapse),
- // collapsing is removed and momentarily only width is present
- .collapse.show {
- display: block;
+ // hide label-placeholders when the field is filled
+ &.is-filled .bmd-label-placeholder {
+ display : none;
}
- .collapsing {
- @include material-animation-default();
+ // 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");
+ // 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");
- }
+ // 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");
- }
+ // 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;
- }
+ &,
+ &.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.
@@ -267,171 +269,178 @@ select {
.form-inline {
- @include media-breakpoint-up(sm) {
- .input-group {
- display: inline-flex;
- align-items: center;
+ @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;
+.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;
+ .has-danger & {
+ color : $red;
+ opacity : 1;
}
}
-.form-group{
- padding-bottom: 10px;
- position: relative;
- margin: 8px 0 0;
+.form-group {
+ padding-bottom : 10px;
+ position : relative;
+ margin : 8px 0 0;
}
-textarea{
- height: auto !important;
- resize: none;
- line-height: $bmd-line-height !important;
+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;
+ opacity : 0;
+ position : absolute;
+ top : 0;
+ right : 0;
+ bottom : 0;
+ left : 0;
+ width : 100%;
+ height : 100%;
+ z-index : -1;
}
-.form-newsletter{
+.form-newsletter {
.input-group,
- .form-group{
- float: left;
- width: 78%;
- margin-right: 2%;
- margin-top: 9px;
- padding-top: 5px;
+ .form-group {
+ float : left;
+ width : 78%;
+ margin-right : 2%;
+ margin-top : 9px;
+ padding-top : 5px;
}
- .btn{
- float: left;
- width: 20%;
- margin: 9px 0 0;
+ .btn {
+ float : left;
+ width : 20%;
+ margin : 9px 0 0;
}
}
-.form-file-upload{
- .input-group-btn:last-child>.btn-round{
- border-radius: 30px;
+.form-file-upload {
+ .input-group-btn:last-child > .btn-round {
+ border-radius : 30px;
}
- .input-group-btn .btn{
- margin: 0;
+ .input-group-btn .btn {
+ margin : 0;
}
- .input-group{
- width: 100%;
+ .input-group {
+ width : 100%;
}
}
-.input-group .input-group-btn{
- padding: 0 12px;
+.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;
+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-form-field{
- display: block !important;
+ &.mat-focused {
+ .mat-input-underline {
+ .mat-input-ripple {
+ background-color : #4CAF50;
+ }
+ }
+ }
}
-.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;
+ }
+ }
}
- }
}
-.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;
}
- }
}
-.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{
+
+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);
+ color : rgba(0, 0, 0, 0.38);
}
+
.mat-input-underline {
- background-color: rgba(0, 0, 0, 0.12);
+ background-color : rgba(0, 0, 0, 0.12);
}
+
.mat-focused .mat-input-placeholder {
- color: $brand-primary;
+ color : $brand-primary;
}
+
.mat-input-ripple {
- background-color: $brand-primary;
+ background-color : $brand-primary;
}
diff --git a/AngularApp/src/assets/scss/core/_images.scss b/AngularApp/src/assets/scss/core/_images.scss
index 0d77d0e..1c06e9d 100644
--- a/AngularApp/src/assets/scss/core/_images.scss
+++ b/AngularApp/src/assets/scss/core/_images.scss
@@ -1,10 +1,11 @@
-.img-thumbnail{
- border-radius: 16px;
+.img-thumbnail {
+ border-radius : 16px;
}
-.img-raised{
+
+.img-raised {
@include shadow-big-image();
}
-.rounded{
- border-radius: $border-radius-large !important;
+.rounded {
+ border-radius : $border-radius-large !important;
}
diff --git a/AngularApp/src/assets/scss/core/_input-group.scss b/AngularApp/src/assets/scss/core/_input-group.scss
index e4937f2..dd5ed7e 100644
--- a/AngularApp/src/assets/scss/core/_input-group.scss
+++ b/AngularApp/src/assets/scss/core/_input-group.scss
@@ -3,34 +3,34 @@
// note: form-groups are not required
//
@mixin input-group-button-variation($vertical-padding) {
- .input-group-btn {
- .btn {
- //margin: 0 0 $vertical-padding 0;
+ .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);
+ @include input-group-button-variation($input-padding-y-sm);
}
.bmd-form-group-lg {
- @include input-group-button-variation($input-padding-y-lg);
+ @include input-group-button-variation($input-padding-y-lg);
}
.input-group {
- // may be in or outside of form-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;
- }
+ .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/AngularApp/src/assets/scss/core/_misc.scss b/AngularApp/src/assets/scss/core/_misc.scss
index 0bd4e2f..a1dcd62 100644
--- a/AngularApp/src/assets/scss/core/_misc.scss
+++ b/AngularApp/src/assets/scss/core/_misc.scss
@@ -1,74 +1,77 @@
-body{
- background-color: #eee;
- color: $black-color;
- font-weight: 300;
+body {
+ background-color : #EEEEEE;
+ color : $black-color;
+ font-weight : 300;
}
legend {
- border-bottom: 0;
+ border-bottom : 0;
}
-.serif-font{
- font-family: $font-family-serif;
+.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;
- }
+ -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;
- }
+a {
+ color : $link-color;
+
+ &:hover,
+ &:focus {
+ color : darken($link-color, 5%);
+ text-decoration : none;
+ }
- &.text-info{
- &:hover, &:focus{
- color: darken($brand-info, 5%);
- }
- }
+ &.text-info {
+ &:hover, &:focus {
+ color : darken($brand-info, 5%);
+ }
+ }
- & .material-icons {
- vertical-align: middle;
- }
+ & .material-icons {
+ vertical-align : middle;
+ }
}
.form-check,
-label{
- font-size: 14px;
- line-height: 1.42857;
- color: $checkboxes-text-color;
- font-weight: 400;
+label {
+ font-size : 14px;
+ line-height : 1.42857;
+ color : $checkboxes-text-color;
+ font-weight : 400;
}
/* Animations */
-.animation-transition-general{
+.animation-transition-general {
@include transition-all($general-transition-time, $transition-linear);
}
-.animation-transition-slow{
+.animation-transition-slow {
@include transition-all($slow-transition-time, $transition-linear);
}
-.animation-transition-fast{
+.animation-transition-fast {
@include transition-all($fast-transition-time, $transition-ease);
}
.caret,
-.sidebar a{
+.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;
+ position : relative;
+ z-index : 2;
+ width : 100%;
+ height : calc(100vh - 70px);
+ margin-top : 70px;
}
diff --git a/AngularApp/src/assets/scss/core/_mixins.scss b/AngularApp/src/assets/scss/core/_mixins.scss
index 63761ef..3ab715e 100644
--- a/AngularApp/src/assets/scss/core/_mixins.scss
+++ b/AngularApp/src/assets/scss/core/_mixins.scss
@@ -1,16 +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";
+@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/AngularApp/src/assets/scss/core/_navbar.scss b/AngularApp/src/assets/scss/core/_navbar.scss
index 4a27e21..6422061 100644
--- a/AngularApp/src/assets/scss/core/_navbar.scss
+++ b/AngularApp/src/assets/scss/core/_navbar.scss
@@ -1,252 +1,255 @@
.navbar {
- border: 0;
- border-radius: $border-radius-base;
- padding: 0.625rem 0;
- margin-bottom: 20px;
+ 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;
+ &.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;
+ & .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;
+ &:not(.btn) .material-icons {
+ margin-top : -7px;
+ top : 3px;
+ position : relative;
+ margin-right : 3px;
}
- &.profile-photo{
- padding: 0;
- margin: 0 3px;
+ &.profile-photo {
+ padding : 0;
+ margin : 0 3px;
- &:after{
- display: none;
+ &:after {
+ display : none;
}
- & .profile-photo-small{
- height: 40px;
- width: 40px;
+ & .profile-photo-small {
+ height : 40px;
+ width : 40px;
}
- .ripple-container{
- border-radius: 50%;
+ .ripple-container {
+ border-radius : 50%;
}
}
}
- .dropdown-menu-right{
- transform-origin: 100% 0;
+ .dropdown-menu-right {
+ transform-origin : 100% 0;
}
- .nav-item.active .nav-link{
+ .nav-item.active .nav-link {
&,
&:hover,
&:focus {
- color: inherit;
- background-color: rgba(255, 255, 255, 0.1);
+ color : inherit;
+ background-color : rgba(255, 255, 255, 0.1);
}
}
}
.btn,
- .navbar-nav .nav-item .btn{
- margin-top: 0;
- margin-bottom: 0;
+ .navbar-nav .nav-item .btn {
+ margin-top : 0;
+ margin-bottom : 0;
}
- .navbar-toggler{
- cursor: pointer;
- outline: 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 {
+ width : 22px;
+ height : 2px;
+ vertical-align : middle;
+ outline : 0;
+ display : block;
+ border-radius : 1px;
- & + .navbar-toggler-icon{
- margin-top: 4px;
+ & + .navbar-toggler-icon {
+ margin-top : 4px;
}
}
}
- &.navbar-absolute{
- position: absolute;
- width: 100%;
- padding-top: 10px;
- z-index: 1029;
+ &.navbar-absolute {
+ position : absolute;
+ width : 100%;
+ padding-top : 10px;
+ z-index : 1029;
}
- .navbar-wrapper{
- display: inline-flex;
- align-items: center;
+ .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;
+ 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;
+ flex : 1;
}
- &.bg-primary{
+ &.bg-primary {
@include navbar-colors($bg-primary, $white-color);
}
- &.bg-info{
+
+ &.bg-info {
@include navbar-colors($bg-info, $white-color);
}
- &.bg-warning{
+ &.bg-warning {
@include navbar-colors($bg-warning, $white-color);
}
- &.bg-rose{
+ &.bg-rose {
@include navbar-colors($bg-rose, $white-color);
}
- &.bg-danger{
+ &.bg-danger {
@include navbar-colors($bg-danger, $white-color);
}
- &.bg-success{
+ &.bg-success {
@include navbar-colors($bg-success, $white-color);
}
- &.bg-dark{
+
+ &.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-transparent {
+ background-color : transparent !important;
+ box-shadow : none;
+ padding-top : 25px;
+
+ }
+
+ .notification {
+ position : absolute;
+ top : 5px;
+ border : 1px solid #FFFFFF;
+ 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;
- }
+.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);
- }
+.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/AngularApp/src/assets/scss/core/_popover.scss b/AngularApp/src/assets/scss/core/_popover.scss
index c660aa2..8142c09 100644
--- a/AngularApp/src/assets/scss/core/_popover.scss
+++ b/AngularApp/src/assets/scss/core/_popover.scss
@@ -1,53 +1,53 @@
.popover, .tooltip-inner {
- line-height: 1.5em;
- background: $white-color;
- border: none;
- border-radius: $border-radius-base;
+ line-height : 1.5em;
+ background : $white-color;
+ border : none;
+ border-radius : $border-radius-base;
@include shadow-8dp();
- color: $popover-color;
+ color : $popover-color;
}
-.popover{
- padding: 0;
+.popover {
+ padding : 0;
@include shadow-16dp();
&.left,
&.right,
&.top,
- &.bottom{
- > .arrow{
- border: none;
+ &.bottom {
+ > .arrow {
+ border : none;
}
}
&.bs-popover-top,
- &.bs-popover-auto[x-placement^="top"],
+ &.bs-popover-auto[x-placement^='top'],
&.bs-popover-bottom,
- &.bs-popover-auto[x-placement^="bottom"],
+ &.bs-popover-auto[x-placement^='bottom'],
&.bs-popover-right,
- &.bs-popover-auto[x-placement^="right"],
+ &.bs-popover-auto[x-placement^='right'],
&.bs-popover-left,
- &.bs-popover-auto[x-placement^="left"]{
- & .arrow::before{
- border: 0;
+ &.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-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;
+.popover-body {
+ padding : 10px 15px 15px;
+ line-height : 1.4;
+ color : $popover-color;
}
diff --git a/AngularApp/src/assets/scss/core/_popups.scss b/AngularApp/src/assets/scss/core/_popups.scss
index 4b41450..4e5fb93 100644
--- a/AngularApp/src/assets/scss/core/_popups.scss
+++ b/AngularApp/src/assets/scss/core/_popups.scss
@@ -1,85 +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;
+.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;
+ &.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;
+ .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;
+ &:before {
+ display : none;
}
- &.bs-tether-element-attached-top:after{
- border-bottom-color:$white-color;
- top: -9px;
+ &.bs-tether-element-attached-top:after {
+ border-bottom-color : $white-color;
+ top : -9px;
}
- &.popover-primary{
+ &.popover-primary {
@include popover-color($primary-color, $white-color);
}
- &.popover-info{
+ &.popover-info {
@include popover-color($info-color, $white-color);
}
- &.popover-warning{
+ &.popover-warning {
@include popover-color($warning-color, $white-color);
}
- &.popover-danger{
+ &.popover-danger {
@include popover-color($danger-color, $white-color);
}
- &.popover-success{
+ &.popover-success {
@include popover-color($success-color, $white-color);
}
}
-.tooltip{
- &.bs-tooltip-right .arrow:before{
- border-right-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-top .arrow:before {
+ border-top-color : $white-color;
}
- &.bs-tooltip-bottom .arrow:before{
- border-bottom-color:$white-color;
+ &.bs-tooltip-bottom .arrow:before {
+ border-bottom-color : $white-color;
}
- &.bs-tooltip-left .arrow:before{
- border-left-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);
+.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/AngularApp/src/assets/scss/core/_radios.scss b/AngularApp/src/assets/scss/core/_radios.scss
index 4f73cb3..769b08a 100644
--- a/AngularApp/src/assets/scss/core/_radios.scss
+++ b/AngularApp/src/assets/scss/core/_radios.scss
@@ -1,71 +1,72 @@
+@mixin radio-color($color, $opacity) {
+ & ~ .check,
+ & ~ .circle {
+ opacity : $opacity;
+ }
-@mixin radio-color($color, $opacity){
- & ~ .check,
- & ~ .circle {
- opacity: $opacity;
- }
-
- & ~ .check {
- background-color: $color;
- }
+ & ~ .check {
+ background-color : $color;
+ }
- & ~ .circle {
- border-color: $color;
- }
+ & ~ .circle {
+ border-color : $color;
+ }
}
-.form-check{
+.form-check {
.form-check-label {
- cursor: pointer;
- padding-left: 25px;
- position: relative;
+ 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;
+ 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'));
+ .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:not(:checked) ~ .check:after {
+ @include animation(rippleOff 500ms);
+ }
- .form-check-input: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;
+ 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'));
}
@@ -76,23 +77,23 @@
// light theme spec: Disabled: #000000, Opacity 26%
@include radio-color($black, 0.26);
- & + .circle .check{
- background-color: $black;
+ & + .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-sign {
+ vertical-align : middle;
+ position : relative;
+ top : -2px;
+ float : left;
+ padding-right : 10px;
+ display : inline-block;
}
}
.form-check + .form-check {
- margin-top: 0;
+ margin-top : 0;
}
diff --git a/AngularApp/src/assets/scss/core/_responsive.scss b/AngularApp/src/assets/scss/core/_responsive.scss
index 05bb6e9..efa1f18 100644
--- a/AngularApp/src/assets/scss/core/_responsive.scss
+++ b/AngularApp/src/assets/scss/core/_responsive.scss
@@ -1,469 +1,481 @@
-@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;
+@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 : #999999;
+ 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;
+ @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;
+ &.button-container .nav-link {
+ margin : 15px;
}
- &:after{
- width: calc(100% - 30px);
- content: "";
- display: block;
- height: 1px;
- margin-left: 15px;
+ &:after {
+ width : calc(100% - 30px);
+ content : '';
+ display : block;
+ height : 1px;
+ margin-left : 15px;
// background-color: #e5e5e5;
}
&:last-child {
- &:after{
- display: none;
+ &:after {
+ display : none;
}
}
}
}
- .nav-open &{
+ .nav-open & {
@include transform-translate-x(0px);
}
}
- .nav-open{
- .navbar-translate{
+ .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));
+ .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.show .dropdown-menu {
+ display : block;
}
- .dropdown .dropdown-menu{
- display: none;
+ .dropdown .dropdown-menu {
+ display : none;
}
- .dropdown-menu{
- .dropdown-item{
- margin-left: 1.5rem;
- margin-right: 1.5rem;
+ .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;
+ .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;
+ 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;
+ #navigation .navbar-collapse {
+ display : none !important;
}
}
-@media all and (min-width: 991px) {
- .navbar .navbar-nav{
- align-items: center;
+@media all and (min-width : 991px) {
+ .navbar .navbar-nav {
+ align-items : center;
- .button-container{
- margin-left: 0.1875px;
+ .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 : 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 : 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;
- }
+@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){
+@media (max-width : 991px) {
- .form-group{
- textarea{
- padding-top: 15px;
+ .form-group {
+ textarea {
+ padding-top : 15px;
}
}
- .nav-open .menu-on-left .main-panel{
- position: initial;
+ .nav-open .menu-on-left .main-panel {
+ position : initial;
}
html,
- body{
- overflow-x: hidden;
+ body {
+ overflow-x : hidden;
}
- .menu-on-left{
- .nav-open &{
+ .menu-on-left {
+ .nav-open & {
.main-panel,
.wrapper-full-page,
- .navbar-fixed > div{
+ .navbar-fixed > div {
@include transform-translate-x(260px);
}
}
.sidebar,
- .off-canvas-sidebar{
- left: 0;
- right: auto;
+ .off-canvas-sidebar {
+ left : 0;
+ right : auto;
@include transform-translate-x(-260px);
}
- .close-layer{
- left: auto;
- right: 0;
+ .close-layer {
+ left : auto;
+ right : 0;
}
}
- .timeline{
- &:before{
- left: 5%;
+ .timeline {
+ &:before {
+ left : 5%;
}
- > li > .timeline-badge{
- left: 5%;
+ > li > .timeline-badge {
+ left : 5%;
}
- > li > .timeline-panel{
- float: right;
- width: 86%;
+ > li > .timeline-panel {
+ float : right;
+ width : 86%;
- &:before{
- border-left-width: 0;
- border-right-width: 15px;
- left: -15px;
- right: auto;
+ &: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;
+ &: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;
+ .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;
+ &.showing {
+ animation : initial;
+ animation-duration : 0s;
}
- &.hiding{
- transform: none;
- opacity: 1;
+ &.hiding {
+ transform : none;
+ opacity : 1;
}
}
- .dropdown.show .dropdown-menu{
- display: block;
+ .dropdown.show .dropdown-menu {
+ display : block;
}
- li.active > a{
- background-color: rgba(255, 255, 255, 0.1);
+ li.active > a {
+ background-color : rgba(255, 255, 255, 0.1);
}
}
.navbar-minimize {
- display: none;
+ display : none;
}
.card .form-horizontal {
.label-on-left,
- .label-on-right{
- padding-left:15px;
- padding-top: 8px;
+ .label-on-right {
+ padding-left : 15px;
+ padding-top : 8px;
}
- .form-group{
- margin-top: 0px;
+ .form-group {
+ margin-top : 0px;
}
- .checkbox-radios{
- padding-bottom: 15px;
+ .checkbox-radios {
+ padding-bottom : 15px;
.checkbox:first-child,
- .radio:first-child{
- margin-top: 0;
+ .radio:first-child {
+ margin-top : 0;
}
}
- .checkbox-inline{
- margin-top: 0;
+ .checkbox-inline {
+ margin-top : 0;
}
}
- .sidebar{
- display: none;
- box-shadow: none;
+ .sidebar {
+ display : none;
+ box-shadow : none;
- .sidebar-wrapper{
- padding-bottom: 60px;
+ .sidebar-wrapper {
+ padding-bottom : 60px;
}
- .nav-mobile-menu{
- margin-top: 0;
+ .nav-mobile-menu {
+ margin-top : 0;
- .notification{
- float: left;
- line-height: 30px;
- margin-right: 8px;
+ .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;
+ 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%;
+ .main-panel {
+ width : 100%;
}
- .navbar-transparent{
- padding-top: 15px;
- background-color: rgba(0, 0, 0, 0.45);
+ .navbar-transparent {
+ padding-top : 15px;
+ background-color : rgba(0, 0, 0, 0.45);
}
body {
- position: relative;
+ position : relative;
}
- .nav-open{
+ .nav-open {
.main-panel,
.wrapper-full-page,
.navbar .container .navbar-toggler,
.navbar .container .navbar-wrapper,
- .navbar .container{
- left: 0;
+ .navbar .container {
+ left : 0;
@include transform-translate-x(-260px);
}
- .sidebar{
+ .sidebar {
@include shadow-big();
}
.off-canvas-sidebar .navbar-collapse,
- .sidebar{
+ .sidebar {
@include transform-translate-x(0);
}
}
@@ -471,166 +483,168 @@
.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;
+ .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;
+ .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-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;
+ .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;
+ .off-canvas-sidebar .navbar .navbar-collapse.collapsing {
+ display : block !important;
}
- .navbar-nav > li{
- float: none;
- position: relative;
- display: block;
+ .navbar-nav > li {
+ float : none;
+ position : relative;
+ display : block;
}
- .off-canvas-sidebar nav .navbar-collapse{
- margin: 0;
+ .off-canvas-sidebar nav .navbar-collapse {
+ margin : 0;
> ul {
- margin-top: 19px;
+ 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;
+ .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));
+ @include transitions(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
> ul {
- position: relative;
- z-index: 4;
- width: 100%;
+ 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;
+
+ &::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;
+ .logo {
+ position : relative;
+ z-index : 4;
}
- .navbar-form{
- margin: 10px 0px;
- float: none !important;
- padding-top: 1px;
- padding-bottom: 1px;
- position: relative;
+ .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;
+ width : 100%;
+ margin-bottom : 15px;
+ overflow-x : scroll;
+ overflow-y : hidden;
+ -ms-overflow-style : -ms-autohiding-scrollbar;
+ -webkit-overflow-scrolling : touch;
}
}
- .form-group{
+ .form-group {
- &.form-search{
- .form-control{
- font-size: 1.7em;
- height: 37px;
- width: 78%;
+ &.form-search {
+ .form-control {
+ font-size : 1.7em;
+ height : 37px;
+ width : 78%;
}
}
}
- .navbar-form{
- .btn{
- position: absolute;
- top: -5px;
- right: -50px;
+ .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;
+ .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;
+ &.visible {
+ opacity : 1;
}
}
.navbar-toggler .icon-bar {
- display: block;
- position: relative;
- background: #555 !important;
- width: 24px;
- height: 2px;
- border-radius: 1px;
- margin: 0 auto;
+ display : block;
+ position : relative;
+ background : #555555 !important;
+ width : 24px;
+ height : 2px;
+ border-radius : 1px;
+ margin : 0 auto;
}
.navbar-header .navbar-toggler {
- padding: 15px;
- margin-top: 4px;
- width: 40px;
- height: 40px;
+ padding : 15px;
+ margin-top : 4px;
+ width : 40px;
+ height : 40px;
}
.bar1,
.bar2,
.bar3 {
- outline: 1px solid transparent;
+ outline : 1px solid transparent;
}
@include topbar-x-rotation();
@@ -638,70 +652,86 @@
@include bottombar-x-rotation();
@include bottombar-back-rotation();
- .navbar-toggler{
- .icon-bar:nth-child(2){
- top: 0px;
- @include bar-animation($topbar-back);
+ .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(3) {
+ opacity : 1;
}
- .icon-bar:nth-child(4){
- bottom: 0px;
- @include bar-animation($bottombar-back);
+
+ .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);
+ &.toggled {
+ .icon-bar:nth-child(2) {
+ top : 6px;
+ @include bar-animation($topbar-x);
}
- .icon-bar:nth-child(3){
- opacity: 0;
+
+ .icon-bar:nth-child(3) {
+ opacity : 0;
}
- .icon-bar:nth-child(4){
- bottom: 6px;
- @include bar-animation($bottombar-x);
+
+ .icon-bar:nth-child(4) {
+ bottom : 6px;
+ @include bar-animation($bottombar-x);
}
}
}
@-webkit-keyframes fadeIn {
- 0% {opacity: 0;}
- 100% {opacity: 1;}
+ 0% {
+ opacity : 0;
+ }
+ 100% {
+ opacity : 1;
+ }
}
@-moz-keyframes fadeIn {
- 0% {opacity: 0;}
- 100% {opacity: 1;}
+ 0% {
+ opacity : 0;
+ }
+ 100% {
+ opacity : 1;
+ }
}
@keyframes fadeIn {
- 0% {opacity: 0;}
- 100% {opacity: 1;}
+ 0% {
+ opacity : 0;
+ }
+ 100% {
+ opacity : 1;
+ }
}
- .dropdown-menu .divider{
- background-color: rgba(229, 229, 229, 0.15);
+ .dropdown-menu .divider {
+ background-color : rgba(229, 229, 229, 0.15);
}
.navbar-nav {
- margin: 1px 0;
+ margin : 1px 0;
.open .dropdown-menu > li {
- & > a{
- padding: 15px 15px 5px 50px;
+ & > a {
+ padding : 15px 15px 5px 50px;
}
- &:first-child > a{
- padding: 5px 15px 5px 50px;
+ &:first-child > a {
+ padding : 5px 15px 5px 50px;
}
&:last-child > a {
- padding: 15px 15px 25px 50px;
+ padding : 15px 15px 25px 50px;
}
}
}
- [class*="navbar-"] .navbar-nav {
+ [class*='navbar-'] .navbar-nav {
& > li > a,
> li > a:hover,
> li > a:focus,
@@ -712,7 +742,7 @@
.open .dropdown-menu > li > a:hover,
.open .dropdown-menu > li > a:focus,
.navbar-nav .open .dropdown-menu > li > a:active {
- color: white;
+ color : white;
}
& > li > a,
@@ -720,111 +750,112 @@
> li > a:focus,
.open .dropdown-menu > li > a,
.open .dropdown-menu > li > a:hover,
- .open .dropdown-menu > li > a:focus{
- opacity: .7;
- background: transparent;
+ .open .dropdown-menu > li > a:focus {
+ opacity : .7;
+ background : transparent;
}
&.navbar-nav .open .dropdown-menu > li > a:active {
- opacity: 1;
+ opacity : 1;
}
- & .dropdown > a{
+ & .dropdown > a {
&:hover .caret {
- border-bottom-color: #777;
- border-top-color: #777;
+ border-bottom-color : #777777;
+ border-top-color : #777777;
}
+
&:active .caret {
- border-bottom-color: white;
- border-top-color: white;
+ border-bottom-color : white;
+ border-top-color : white;
}
}
}
.dropdown-menu {
- display: none;
+ display : none;
}
.navbar-fixed-top {
- -webkit-backface-visibility: hidden;
+ -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;
+ 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;
+ .social-line .btn {
+ margin : $margin-bottom;
}
- .subscribe-line .form-control{
- margin: $margin-bottom;
+ .subscribe-line .form-control {
+ margin : $margin-bottom;
}
- .social-line.pull-right{
- float: none;
+ .social-line.pull-right {
+ float : none;
}
- .footer:not(.footer-big) nav > ul li{
- float: none;
+ .footer:not(.footer-big) nav > ul li {
+ float : none;
}
- .social-area.pull-right{
- float: none !important;
+ .social-area.pull-right {
+ float : none !important;
}
- .form-control + .form-control-feedback{
- margin-top: -8px;
+ .form-control + .form-control-feedback {
+ margin-top : -8px;
}
- .navbar-toggle:hover,.navbar-toggle:focus {
- background-color: transparent !important;
+ .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 .author {
+ width : 20%;
+ float : none !important;
+ display : block;
+ margin : 0 auto 10px;
}
- .media-post .media-body{
- width: 100%;
+ .media-post .media-body {
+ width : 100%;
}
- .navbar-collapse.collapse{
- height: 100% !important;
+ .navbar-collapse.collapse {
+ height : 100% !important;
}
.navbar-collapse.collapse.in {
- display: block;
+ display : block;
}
.navbar-header .collapse, .navbar-toggle {
- display:block !important;
+ display : block !important;
}
.navbar-header {
- float:none;
+ float : none;
}
- .navbar-collapse{
- .nav p{
- font-size: $font-size-base;
- margin: 0;
+ .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;
- }
+@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;
- }
+ .nav-mobile-menu,
+ .sidebar .navbar-form {
+ display : none !important;
+ }
}
diff --git a/AngularApp/src/assets/scss/core/_ripples.scss b/AngularApp/src/assets/scss/core/_ripples.scss
index 08a170b..f0fb8cb 100644
--- a/AngularApp/src/assets/scss/core/_ripples.scss
+++ b/AngularApp/src/assets/scss/core/_ripples.scss
@@ -1,41 +1,41 @@
// marker class (used as a selector for one-off elements to decorate)
.ripple {
- position: relative;
+ 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;
+ 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-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-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;
+ &.ripple-out {
+ opacity : 0;
+ transition : opacity 0.1s linear 0s !important;
+ }
}
- }
}
diff --git a/AngularApp/src/assets/scss/core/_sidebar-and-main-panel.scss b/AngularApp/src/assets/scss/core/_sidebar-and-main-panel.scss
index c30a87f..17faa3c 100644
--- a/AngularApp/src/assets/scss/core/_sidebar-and-main-panel.scss
+++ b/AngularApp/src/assets/scss/core/_sidebar-and-main-panel.scss
@@ -1,503 +1,513 @@
-.wrapper{
- position: relative;
- top: 0;
- height: 100vh;
+.wrapper {
+ position : relative;
+ top : 0;
+ height : 100vh;
}
.sidebar {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- z-index: 2;
- width: 260px;
- background: $white-color;
+ 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;
+ .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;
+ &[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;
+
+ .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;
+ .sidebar-wrapper {
+ position : relative;
+ height : calc(100vh - 75px);
+ overflow : auto;
+ width : 260px;
+ z-index : 4;
+
+ padding-bottom : 30px;
- .dropdown .dropdown-backdrop{
- display: none !important;
+ .dropdown .dropdown-backdrop {
+ display : none !important;
}
- .navbar-form{
- border: none;
- box-shadow: none;
+ .navbar-form {
+ border : none;
+ box-shadow : none;
- .input-group {
- font-size: 1.7em;
- height: 36px;
- width: 78%;
- padding-left: 17px;
- }
+ .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;
+ .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-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;
+ .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;
+ 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;
+ .logo-tim {
+ border-radius : 50%;
+ border : 1px solid #333333;
+ display : block;
+ height : 61px;
+ width : 61px;
+ float : left;
+ overflow : hidden;
+
+ img {
+ width : 60px;
+ height : 60px;
}
}
- .nav{
- margin-top: 20px;
- display: block;
+ .nav {
+ margin-top : 20px;
+ display : block;
- .caret{
- margin-top: 13px;
- position: absolute;
- right: 6px;
+ .caret {
+ margin-top : 13px;
+ position : absolute;
+ right : 6px;
}
- li{
- > a{
- &:hover,
- &:focus{
- background-color: transparent;
- outline: none;
- }
+ li {
+ > a {
+ &:hover,
+ &:focus {
+ background-color : transparent;
+ outline : none;
+ }
}
- &:first-child > a{
- margin: 0 15px;
+ &: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'] {
+ background-color : rgba(200, 200, 200, 0.2);
+ color : $black-color;
+ box-shadow : none;
}
- &.active > [data-toggle="collapse"]{
- i{
- color: #a9afbb;
+ &.active > [data-toggle='collapse'] {
+ i {
+ color : #A9AFBB;
}
}
&.active > a,
- &.active > a i{
- color: $white-color;
+ &.active > a i {
+ color : $white-color;
}
- &.separator{
- margin: 15px 0;
+ &.separator {
+ margin : 15px 0;
- &:after{
- width: calc(100% - 30px);
- content: "";
- position: absolute;
- height: 1px;
- left: 15px;
- background-color: rgba(180,180,180, .3);
+ &:after {
+ width : calc(100% - 30px);
+ content : '';
+ position : absolute;
+ height : 1px;
+ left : 15px;
+ background-color : rgba(180, 180, 180, .3);
}
& + li {
- margin-top: 31px;
+ margin-top : 31px;
}
}
}
- p{
- margin: 0;
- line-height: 30px;
- font-size: 14px;
- position: relative;
- display: block;
- height: auto;
- white-space: nowrap;
+ 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;
+ 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;
+ .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;
+ .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);
+ .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;
+ 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;
+ .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;
+ .logo-tim {
+ border-radius : 50%;
+ border : 1px solid #333333;
+ display : block;
+ height : 61px;
+ width : 61px;
+ float : left;
+ overflow : hidden;
+
+ img {
+ width : 60px;
+ height : 60px;
}
}
- &[data-background-color="black"]{
+ &[data-background-color='black'] {
@include sidebar-background-color($gray-base, $white-color);
- .nav li .dropdown-menu .dropdown-item{
- color: $white-color;
+ .nav li .dropdown-menu .dropdown-item {
+ color : $white-color;
}
}
- &[data-color="purple"]{
+ &[data-color='purple'] {
@include set-background-color-button($brand-primary);
}
- &[data-color="azure"]{
+
+ &[data-color='azure'] {
@include set-background-color-button($brand-info);
}
- &[data-color="green"]{
+
+ &[data-color='green'] {
@include set-background-color-button($brand-success);
}
- &[data-color="orange"]{
+
+ &[data-color='orange'] {
@include set-background-color-button($brand-warning);
}
- &[data-color="danger"]{
+
+ &[data-color='danger'] {
@include set-background-color-button($brand-danger);
}
- &[data-color="rose"]{
+
+ &[data-color='rose'] {
@include set-background-color-button($brand-rose);
}
- &[data-color="white"]{
+ &[data-color='white'] {
@include set-background-color-button($white-color);
@include sidebar-active-color($black-color);
}
- &[data-background-color="red"]{
+ &[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.separator {
+ &:after {
+ background-color : rgba(255, 255, 255, .3);
}
}
- .nav{
+ .nav {
li:hover:not(.active) > a,
- li.active > [data-toggle="collapse"]{
- background-color: rgba(255, 255, 255, 0.1);
+ li.active > [data-toggle='collapse'] {
+ background-color : rgba(255, 255, 255, 0.1);
}
}
}
&[data-image]:after,
- &.has-image:after{
- opacity: .77;
+ &.has-image:after {
+ opacity : .77;
}
}
-.off-canvas-sidebar .navbar-collapse{
+.off-canvas-sidebar .navbar-collapse {
.nav {
> li > a,
- > li > a:hover{
- color: $white-color;
- margin: 0 15px;
+ > li > a:hover {
+ color : $white-color;
+ margin : 0 15px;
}
> li > a:focus,
- > li > a:hover{
- background: rgba(200, 200, 200, 0.2);
+ > 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-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);
+ .main-content {
+ margin-top : 70px;
+ padding : 30px 15px;
+ min-height : calc(100vh - 123px);
}
- .footer{
- border-top: 1px solid #e7e7e7;
+ .footer {
+ border-top : 1px solid #E7E7E7;
}
- .navbar{
- margin-bottom: 0;
+ .navbar {
+ margin-bottom : 0;
}
- .header{
- margin-bottom: 30px;
+ .header {
+ margin-bottom : 30px;
- .title{
- margin-top: 10px;
- margin-bottom: 10px;
+ .title {
+ margin-top : 10px;
+ margin-bottom : 10px;
}
}
}
-.perfect-scrollbar-on{
+.perfect-scrollbar-on {
.sidebar,
- .main-panel{
- height: 100%;
- max-height: 100%;
+ .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;
+.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-regular {
+ display : inline-block !important;
}
-.visible-on-sidebar-mini{
- display: none !important;
+
+.visible-on-sidebar-mini {
+ display : none !important;
}
-@media (min-width: 991px) {
- .sidebar-mini{
- .visible-on-sidebar-regular{
- display: none !important;
+@media (min-width : 991px) {
+ .sidebar-mini {
+ .visible-on-sidebar-regular {
+ display : none !important;
}
- .visible-on-sidebar-mini{
- display: inline-block !important;
+
+ .visible-on-sidebar-mini {
+ display : inline-block !important;
}
.sidebar,
- .sidebar .sidebar-wrapper{
- width: 80px;
+ .sidebar .sidebar-wrapper {
+ width : 80px;
}
- .main-panel{
- width: $sidebar-mini-width;
+ .main-panel {
+ width : $sidebar-mini-width;
}
- .sidebar{
- display: block;
- font-weight: 200;
- z-index: 9999;
+ .sidebar {
+ display : block;
+ font-weight : 200;
+ z-index : 9999;
- .logo{
- a.logo-normal{
- opacity: 0;
+ .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,
+ .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{
+ > .nav li > a p {
@include transform-translate-x(-25px);
- opacity: 0;
+ opacity : 0;
}
}
}
- .sidebar:hover{
- width: 260px;
+ .sidebar:hover {
+ width : 260px;
- .logo{
- a.logo-normal{
- opacity: 1;
+ .logo {
+ a.logo-normal {
+ opacity : 1;
@include transform-translate-x(0px);
}
}
- .sidebar-wrapper{
- width: 260px;
+ .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{
+ > .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;
+ opacity : 1;
}
}
}
}
.sidebar {
- .nav .nav-item {
- &.active-pro {
- position: absolute;
- width: 100%;
- bottom: 13px;
+ .nav .nav-item {
+ &.active-pro {
+ position : absolute;
+ width : 100%;
+ bottom : 13px;
+ }
}
- }
}
}
diff --git a/AngularApp/src/assets/scss/core/_tables.scss b/AngularApp/src/assets/scss/core/_tables.scss
index 2d3da29..9ec1a19 100644
--- a/AngularApp/src/assets/scss/core/_tables.scss
+++ b/AngularApp/src/assets/scss/core/_tables.scss
@@ -1,185 +1,192 @@
-.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 {
+ > thead > tr > th {
+ border-bottom-width : 1px;
+ font-size : $font-size-h5;
+ font-weight : $font-weight-light;
}
-}
-.table-shopping{
- > thead > tr > th{
- font-size: $font-size-h6;
- text-transform: uppercase;
+ .form-check {
+ margin-top : 0;
+
+ .form-check-sign {
+ top : -13px;
+ left : 0;
+ padding-right : 0;
+ }
}
- > tbody > tr > td{
- font-size: $font-paragraph;
- b{
- display: block;
- margin-bottom: 5px;
+ .radio,
+ .checkbox {
+ margin-top : 0;
+ margin-bottom : 0;
+ padding : 0;
+ width : 15px;
+
+ .icons {
+ position : relative;
}
}
- .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;
+ > 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;
+ }
}
}
- .td-number{
- font-weight: $font-weight-light;
- font-size: $font-size-h4;
- }
- .td-name{
- min-width: 200px;
+
+ .th-description {
+ max-width : 150px;
}
- .td-number{
- text-align: right;
- min-width: 150px;
- small{
- margin-right: 3px;
+ .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;
}
}
- .img-container{
- width: 120px;
- max-height: 160px;
- overflow: hidden;
- display: block;
+ .td-name {
+ font-weight : $font-weight-default;
+ font-size : 1.5em;
+ line-height : 1.42857143;
- img{
- width: 100%;
+ 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;
- }
+ th {
+ //color: $bmd-inverse; // #fff;
+ //background-color: $gray-dark;
+ }
}
+
.thead-default {
- th {
- //color: $gray;
- //background-color: $bmd-inverse-lighter; //$gray-lighter;
- }
+ 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;
- //}
+ 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;
+ thead th {
+ font-size : $bmd-table-header-font-size;
+ font-weight : 500;
- border-top-width: 0;
- border-bottom-width: $table-border-width;
- }
+ border-top-width : 0;
+ border-bottom-width : $table-border-width;
+ }
}
thead.thead-inverse,
-// needs specificity
+ // needs specificity
.table-inverse thead {
- th {
- color: $bmd-inverse-lighter;
- }
+ th {
+ color : $bmd-inverse-lighter;
+ }
}
.table-inverse {
- th,
- td,
- thead th {
- border-color: $bmd-table-border-color-inverse;
- }
+ th,
+ td,
+ thead th {
+ border-color : $bmd-table-border-color-inverse;
+ }
}
-.table-striped>tbody>tr:nth-of-type(odd){
- background-color: #f9f9f9;
+.table-striped > tbody > tr:nth-of-type(odd) {
+ background-color : #F9F9F9;
}
-.table.table-hover tbody tr:hover{
- background-color: #f5f5f5;
+.table.table-hover tbody tr:hover {
+ background-color : #F5F5F5;
}
diff --git a/AngularApp/src/assets/scss/core/_tabs.scss b/AngularApp/src/assets/scss/core/_tabs.scss
index a0c44a1..fd31b5e 100644
--- a/AngularApp/src/assets/scss/core/_tabs.scss
+++ b/AngularApp/src/assets/scss/core/_tabs.scss
@@ -1,83 +1,84 @@
.nav-tabs {
- border: 0;
- border-radius: $border-radius-base;
- padding: 0 15px;
+ 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;
+ 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;
+ border : 0;
}
}
+
.nav-link,
.nav-link:hover,
.nav-link:focus {
- border: 0 !important;
- color: $white-color !important;
- font-weight: $font-weight-bold;
+ 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);
+ color : rgba(255, 255, 255, 0.5);
}
- .material-icons{
- margin: -1px 5px 0 0;
+ .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-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;
- }
+ .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);
+ // 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);
- }
+ &.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);
- }
+ &.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-nav-tabs{
- margin-top: 45px;
-
- .card-header{
- margin-top: -30px !important;
+ .card-header {
+ margin-top : -30px !important;
}
}
-.tab-content .tab-pane .td-actions{
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
+.tab-content .tab-pane .td-actions {
+ display : -webkit-box;
+ display : -ms-flexbox;
+ display : flex;
}
-.card .tab-content .form-check{
- margin-top: 6px;
+.card .tab-content .form-check {
+ margin-top : 6px;
}
diff --git a/AngularApp/src/assets/scss/core/_togglebutton.scss b/AngularApp/src/assets/scss/core/_togglebutton.scss
index f39dfb0..1b0f662 100644
--- a/AngularApp/src/assets/scss/core/_togglebutton.scss
+++ b/AngularApp/src/assets/scss/core/_togglebutton.scss
@@ -1,87 +1,92 @@
-@use "sass:math";
+@use 'sass:math';
.togglebutton {
- vertical-align: middle;
- &, label, input, .toggle {
- user-select: none;
- }
- label {
- cursor: pointer;
- color: $mdb-toggle-label-color;
- @include mdb-label-color-toggle-focus();
+ vertical-align : middle;
- // Hide original checkbox
- input[type=checkbox] {
- opacity: 0;
- width: 0;
- height: 0;
+ &, label, input, .toggle {
+ user-select : none;
}
- .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;
+ 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: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);
- }
+ .toggle {
+ text-align : left; // Issue #737 horizontal form
+ margin-left : 5px;
+ }
- // Ripple off and disabled
- &:checked + .toggle:after {
- left: 15px;
- }
- }
+ // 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;
+ }
- // set bg when checked
- input[type=checkbox]:checked {
- + .toggle {
- background-color: rgba($brand-primary, (math.div(70,100))); // Switch bg on
- }
+ // 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:after {
- border-color: $brand-primary; // Handle on
- }
+ & + .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;
+ }
+ }
- + .toggle:active:after {
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (math.div(10,100))); // Ripple on
- }
+ // set bg when checked
+ input[type=checkbox]:checked {
+ + .toggle {
+ background-color : rgba($brand-primary, (math.div(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, (math.div(10, 100))); // Ripple on
+ }
+ }
}
- }
}
diff --git a/AngularApp/src/assets/scss/core/_tooltip.scss b/AngularApp/src/assets/scss/core/_tooltip.scss
index d5e1607..2647b27 100644
--- a/AngularApp/src/assets/scss/core/_tooltip.scss
+++ b/AngularApp/src/assets/scss/core/_tooltip.scss
@@ -1,53 +1,58 @@
// 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;
+.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;
+ //opacity: 1;
}
-.tooltip.in{
- opacity: 1;
+
+.tooltip.in {
+ opacity : 1;
@include transform-translate-y(0px);
}
-.tooltip{
- opacity: 0;
- transition: opacity, transform .2s ease;
+
+.tooltip {
+ opacity : 0;
+ transition : opacity, transform .2s ease;
@include transform-translate-y(5px);
- &.left{
- .tooltip-arrow{
- border-left-color: $white-color;
+ &.left {
+ .tooltip-arrow {
+ border-left-color : $white-color;
}
}
- &.right{
- .tooltip-arrow{
- border-right-color: $white-color;
+
+ &.right {
+ .tooltip-arrow {
+ border-right-color : $white-color;
}
}
- &.top{
- .tooltip-arrow{
- border-top-color: $white-color;
+
+ &.top {
+ .tooltip-arrow {
+ border-top-color : $white-color;
}
}
- &.bottom{
- .tooltip-arrow{
- border-bottom-color: $white-color;
+
+ &.bottom {
+ .tooltip-arrow {
+ border-bottom-color : $white-color;
}
}
}
-.tooltip-inner, .mat-tooltip{
- padding: 10px 15px;
- min-width: 130px;
+.tooltip-inner, .mat-tooltip {
+ padding : 10px 15px;
+ min-width : 130px;
}
-.mat-tooltip{
- text-align: center;
+.mat-tooltip {
+ text-align : center;
}
diff --git a/AngularApp/src/assets/scss/core/_type.scss b/AngularApp/src/assets/scss/core/_type.scss
index a46c698..f88d616 100644
--- a/AngularApp/src/assets/scss/core/_type.scss
+++ b/AngularApp/src/assets/scss/core/_type.scss
@@ -1,41 +1,46 @@
html * {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ -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;
+ font-family : $font-family-sans-serif;
+ font-weight : 300;
+ line-height : 1.5em;
}
h1, .h1 {
- font-size: $font-size-h1;
- line-height: 1.15em;
+ font-size : $font-size-h1;
+ line-height : 1.15em;
}
-h2, .h2{
- font-size: $font-size-h2;
+
+h2, .h2 {
+ font-size : $font-size-h2;
}
-h3, .h3{
- font-size: $font-size-h3;
- line-height: 1.4em;
- margin: 20px 0 10px;
+
+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;
+
+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;
+ 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;
+
+h6, .h6 {
+ font-size : $font-size-h6;
+ text-transform : uppercase;
+ font-weight : $font-weight-bold;
}
.title,
@@ -44,49 +49,55 @@ h6, .h6{
.footer-brand,
.footer-big h5,
.footer-big h4,
-.media .media-heading{
+.media .media-heading {
//font-weight: $font-weight-extra-bold;
// font-family: $font-family-serif;
&,
- a{
- color: $black-color;
- text-decoration: none;
+ a {
+ color : $black-color;
+ text-decoration : none;
}
}
-.card-blog .card-title{
- font-weight: $font-weight-extra-bold;
+.card-blog .card-title {
+ font-weight : $font-weight-extra-bold;
}
-h2.title{
- margin-bottom: $margin-base * 2;
+h2.title {
+ margin-bottom : $margin-base * 2;
}
.description,
.card-description,
-.footer-big p{
- color: $gray-light;
+.footer-big p {
+ color : $gray-light;
}
.text-warning {
- color: $brand-warning !important;
+ color : $brand-warning !important;
}
+
.text-primary {
- color: $brand-primary !important;
+ color : $brand-primary !important;
}
+
.text-danger {
- color: $brand-danger !important;
+ color : $brand-danger !important;
}
+
.text-success {
- color: $brand-success !important;
+ color : $brand-success !important;
}
+
.text-info {
- color: $brand-info !important;
+ color : $brand-info !important;
}
-.text-rose{
- color: $brand-rose !important;
+
+.text-rose {
+ color : $brand-rose !important;
}
-.text-gray{
- color: $gray-color !important;
+
+.text-gray {
+ color : $gray-color !important;
}
diff --git a/AngularApp/src/assets/scss/core/_variables.scss b/AngularApp/src/assets/scss/core/_variables.scss
index 5445fe3..635196e 100644
--- a/AngularApp/src/assets/scss/core/_variables.scss
+++ b/AngularApp/src/assets/scss/core/_variables.scss
@@ -1,35 +1,35 @@
-@import "variables/colors";
-@import "variables/shadow";
+@import 'variables/colors';
+@import 'variables/shadow';
-@import "variables/bootstrap-material-design-base";
+@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 '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
+$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/layout';
+@import 'variables/menu';
+@import 'variables/drawer';
+@import 'variables/snackbar';
-@import "variables/bootstrap-material-design";
+@import 'variables/bootstrap-material-design';
diff --git a/AngularApp/src/assets/scss/core/cards/_card-plain.scss b/AngularApp/src/assets/scss/core/cards/_card-plain.scss
index e150268..0c4f7d3 100644
--- a/AngularApp/src/assets/scss/core/cards/_card-plain.scss
+++ b/AngularApp/src/assets/scss/core/cards/_card-plain.scss
@@ -1,28 +1,29 @@
.card-plain {
- background: transparent;
- box-shadow: none;
+ background : transparent;
+ box-shadow : none;
.card-header:not(.card-avatar) {
- margin-left: 0;
- margin-right: 0;
+ margin-left : 0;
+ margin-right : 0;
}
.card-body {
- padding-left: 5px;
- padding-right: 5px;
+ padding-left : 5px;
+ padding-right : 5px;
}
.card-header-image {
- margin: 0 !important;
- border-radius: $border-radius-large;
+ margin : 0 !important;
+ border-radius : $border-radius-large;
img {
- border-radius: $border-radius-large;
+ border-radius : $border-radius-large;
}
}
+
.card-footer {
- padding-left: 5px;
- padding-right: 5px;
- background-color: transparent;
+ padding-left : 5px;
+ padding-right : 5px;
+ background-color : transparent;
}
}
diff --git a/AngularApp/src/assets/scss/core/cards/_card-profile.scss b/AngularApp/src/assets/scss/core/cards/_card-profile.scss
index 98a2285..9b0c795 100644
--- a/AngularApp/src/assets/scss/core/cards/_card-profile.scss
+++ b/AngularApp/src/assets/scss/core/cards/_card-profile.scss
@@ -1,48 +1,50 @@
-.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;
- }
+.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/AngularApp/src/assets/scss/core/cards/_card-stats.scss b/AngularApp/src/assets/scss/core/cards/_card-stats.scss
index 6391cb4..464a752 100644
--- a/AngularApp/src/assets/scss/core/cards/_card-stats.scss
+++ b/AngularApp/src/assets/scss/core/cards/_card-stats.scss
@@ -1,46 +1,47 @@
-.card-stats{
- .card-header{
- &.card-header-icon,
- &.card-header-text{
- text-align: right;
- }
+.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-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;
+ &.card-header-icon .card-title,
+ &.card-header-text .card-title,
+ &.card-header-icon .card-category,
+ &.card-header-text .card-category {
+ margin : 0;
+ }
- &:not([class*="text-"]){
- color: $gray-color;
- font-size: $font-paragraph;
- }
- }
+ .card-category {
+ margin-bottom : 0;
+ margin-top : 0;
- & + .card-footer{
- border-top: 1px solid #eee;
- margin-top: 14px;
- }
+ &:not([class*='text-']) {
+ color : $gray-color;
+ font-size : $font-paragraph;
+ }
+ }
+
+ & + .card-footer {
+ border-top : 1px solid #EEEEEE;
+ margin-top : 14px;
+ }
- &.card-header-icon i {
- font-size: 36px;
- line-height: 56px;
- width: 56px;
- height: 56px;
- text-align: center;
+ &.card-header-icon i {
+ font-size : 36px;
+ line-height : 56px;
+ width : 56px;
+ height : 56px;
+ text-align : center;
+ }
}
- }
- .card-body {
- text-align: right;
- }
+ .card-body {
+ text-align : right;
+ }
}
diff --git a/AngularApp/src/assets/scss/core/mixins/_alert.scss b/AngularApp/src/assets/scss/core/mixins/_alert.scss
index 8c3a418..bd0f3d2 100644
--- a/AngularApp/src/assets/scss/core/mixins/_alert.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_alert.scss
@@ -1,43 +1,44 @@
// alert-variations("", $brand-primary)
@mixin alert-variations($component, $selector-suffix, $brand-default) {
- @include generic-variations($component, $selector-suffix, $brand-default, "alert-variations-content", null);
+ @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);
+@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;
+ background-color : lighten($variation-color, 3%);
+ color : $variation-color-text;
- a, .alert-link {
- 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}"
- }
+ $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}'
+ }
}
//
@@ -52,79 +53,79 @@
@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
- );
+ //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} {
+ // 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);
- }
+ $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: #FFFFFF
+ ));
+ @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);
- }
+ &#{$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;
+ i {
+ color : $color;
}
}
diff --git a/AngularApp/src/assets/scss/core/mixins/_animations.scss b/AngularApp/src/assets/scss/core/mixins/_animations.scss
index 3c38fcd..fd165bd 100644
--- a/AngularApp/src/assets/scss/core/mixins/_animations.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_animations.scss
@@ -1,109 +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;
+ 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;
+ 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;
+ 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;
+ 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 );
+ -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 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 );
+ -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($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 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-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-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 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 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 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;
+@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/AngularApp/src/assets/scss/core/mixins/_breakpoints.scss b/AngularApp/src/assets/scss/core/mixins/_breakpoints.scss
index 9fc08cc..8d2212a 100644
--- a/AngularApp/src/assets/scss/core/mixins/_breakpoints.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_breakpoints.scss
@@ -1,23 +1,23 @@
// case where behavior is responsive, or with a marker class
@mixin media-breakpoint-down-or($breakpoint, $name) {
- #{unquote($name)} {
- @content;
- }
+ #{unquote($name)} {
+ @content;
+ }
- @include media-breakpoint-down($breakpoint) {
- @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;
- }
+ #{unquote($name)} {
+ @content;
+ }
- @include media-breakpoint-up($breakpoint) {
- @content;
- }
+ @include media-breakpoint-up($breakpoint) {
+ @content;
+ }
}
// Name of the previous breakpoint, or null
@@ -29,6 +29,6 @@
// >> 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);
+ $n : index($breakpoint-names, $name);
+ @return if($n > 1, nth($breakpoint-names, $n - 1), null);
}
diff --git a/AngularApp/src/assets/scss/core/mixins/_buttons.scss b/AngularApp/src/assets/scss/core/mixins/_buttons.scss
index 32968eb..ef121bf 100644
--- a/AngularApp/src/assets/scss/core/mixins/_buttons.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_buttons.scss
@@ -1,245 +1,246 @@
// 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);
+ color : $color;
+ background-color : $background;
+ border-color : $border;
+
+ @include hover {
+ color : $color;
+ background-color : $focus-background;
+ border-color : $focus-border;
+ }
- &:hover,
&:focus,
- &.focus {
- color: $color;
- background-color: $active-background;
- border-color: $active-border;
+ &.focus,
+ &:hover {
+ color : $color;
+ background-color : $focus-background;
+ border-color : $focus-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;
+ &:active,
+ &.active,
+ .open > &.dropdown-toggle,
+ .show > &.dropdown-toggle {
+ color : $color;
+ background-color : $focus-background;
+ border-color : $focus-border;
+ @include shadow-2dp-color($background);
- // leave hover on with the lighter focus color
- &:hover {
- background-color: $focus-background;
+ &:hover,
+ &:focus,
+ &.focus {
+ color : $color;
+ background-color : $active-background;
+ border-color : $active-border;
+ }
}
- }
- &.disabled,
- &:disabled {
- &:focus,
- &.focus {
- background-color: $background;
- border-color: $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;
+ }
}
- @include hover {
- background-color: $background;
- border-color: $border;
+
+ &.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
+ $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;
+ $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);
- }
-
- // reverse the above for links
- &.btn-link {
- background-color: transparent;
- }
+ $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);
- }
+ @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);
- }
+ &.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);
+ // 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);
+ &:hover {
+ // remove this line if you want black shadows
+ @include button-shadow-color($background);
}
- &.btn-link{
- background-color: transparent;
- color: $background;
- box-shadow: none;
+ &.btn-link {
+ background-color : transparent;
+ color : $background;
+ box-shadow : none;
&:hover,
&:focus,
- &:active{
- background-color: transparent;
- color: $background;
+ &: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);
- }
+ &.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(){
+@mixin bmd-social-buttons() {
&.btn-facebook {
- @include bmd-raised-button-variant($white, $social-facebook, $social-facebook);
+ @include bmd-raised-button-variant($white, $social-facebook, $social-facebook);
}
&.btn-twitter {
@include bmd-raised-button-variant($white, $social-twitter, $social-twitter);
@@ -277,54 +278,54 @@
}
@mixin undo-bs-tab-focus() {
- // clear out the tab-focus() from BS
- &,
- &:active,
- &.active {
- &:focus,
- &.focus {
- //@include tab-focus();
- outline: 0;
+ // 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-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-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;
+$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;
+$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-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-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){
+@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)
+ 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 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) {
@@ -344,42 +345,42 @@ $opacity-2: rgba(255,255,255, .2) !default;
.open > &.dropdown-toggle,
.open > &.dropdown-toggle:focus,
.open > &.dropdown-toggle:hover {
- background-color: $btn-color;
- color: $white-color;
+ background-color : $btn-color;
+ color : $white-color;
}
&:focus,
&:active,
- &:hover{
- // remove this line if you want black shadows
- @include button-shadow-color($btn-color);
+ &: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;
- }
- }
+ &.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/AngularApp/src/assets/scss/core/mixins/_chartist.scss b/AngularApp/src/assets/scss/core/mixins/_chartist.scss
index 95a2b73..5912d74 100644
--- a/AngularApp/src/assets/scss/core/mixins/_chartist.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_chartist.scss
@@ -1,92 +1,91 @@
// 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-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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$ct-point-shape : round !default;
// Area fill transparency between 0 and 1
-$ct-area-opacity: 0.1 !default;
+$ct-area-opacity : 0.1 !default;
// Bar chart bar width
-$ct-bar-width: 10px !default;
+$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;
+$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;
+$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;
+$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;
+$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
+$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/AngularApp/src/assets/scss/core/mixins/_colored-shadows.scss b/AngularApp/src/assets/scss/core/mixins/_colored-shadows.scss
index 416fc0b..f7e5b1f 100644
--- a/AngularApp/src/assets/scss/core/mixins/_colored-shadows.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_colored-shadows.scss
@@ -1,19 +1,19 @@
-@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() {
+ 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(){
+@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);
+ 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-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){
@@ -22,117 +22,111 @@
// 0 13px 24px -11px rgba($color, 0.60);
// }
-@mixin shadow-small-color($color){
+@mixin shadow-small-color($color) {
// new box shadow optimized for Tablets and Phones
- box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
+ box-shadow : 0 4px 20px 0px rgba(0, 0, 0, .14),
0 7px 10px -5px rgba($color, 0.4)
}
-@mixin shadow-navbar-color($color){
+@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);
+ @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-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-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-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-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-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),
+@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-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-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 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 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() {
+ 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),
+@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),
+@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),
+@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),
+@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),
+@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/AngularApp/src/assets/scss/core/mixins/_drawer.scss b/AngularApp/src/assets/scss/core/mixins/_drawer.scss
index 9154fd1..81f9b2b 100644
--- a/AngularApp/src/assets/scss/core/mixins/_drawer.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_drawer.scss
@@ -1,253 +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
+ @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;
+ }
}
- }
-
- > .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
+ @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;
+ }
}
- }
-
- > .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;
+@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;
- }
+ @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;
+ @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);
+ // 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);
+ // 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;
- }
+ @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;
+ @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();
+ // 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();
+ // 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/AngularApp/src/assets/scss/core/mixins/_forms.scss b/AngularApp/src/assets/scss/core/mixins/_forms.scss
index 23666e0..2969642 100644
--- a/AngularApp/src/assets/scss/core/mixins/_forms.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_forms.scss
@@ -1,394 +1,407 @@
@mixin bmd-disabled() {
- fieldset[disabled][disabled] &,
- &.disabled,
- &:disabled,
- &[disabled] {
- @content;
- }
+ 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
+ &::-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] & {
+ .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;
+
&,
- &:hover,
- &:focus {
- 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;
- //}
+
+ // 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;
- }
+ &::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;
+ [class^='bmd-label'],
+ [class*=' bmd-label'] {
+ color : $label-color;
}
- &:invalid {
- background-image: $underline-background-image-invalid;
- }
+ // 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;
+ }
- &:read-only {
- background-image: $underline-background-image-readonly;
+ &: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;
+ }
+ }
}
- @include bmd-disabled() {
- background-image: $underline-background-image-disabled;
- background-repeat: repeat-x;
- background-size: 3px 1px;
+ // 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, $form-feedback-icon-valid);
+
+ [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;
+}
- // allow underline focus image and validation images to coexist
- &.form-control-success {
- &,
- .is-focused & {
- background-image: $underline-background-image, $form-icon-success;
- }
+@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;
}
- &.form-control-warning {
- &,
- .is-focused & {
- background-image: $underline-background-image, $form-icon-warning;
- }
+
+ label {
+ color : $mdb-input-placeholder-color;
}
- &.form-control-danger {
- &,
- .is-focused & {
- background-image: $underline-background-image, $form-icon-danger;
- }
+
+ .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
}
- }
- // may or may not be a form-group or bmd-form-group
- .is-focused {
- // on focus set borders and labels to the validation color
+ // 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;
+ // }
- // Use the BS provided mixin for the bulk of the color
- @include form-validation-state("valid", $label-color, $form-feedback-icon-valid);
-
- [class^='bmd-label'],
- [class*=' bmd-label'] {
- color: $label-color-focus;
+ // 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 {
- color: $label-color; // keep the placeholder color
+ //@debug "top: #{$label-as-placeholder-top}";
+ top : $label-placeholder-top - 1.7; // place the floating label to look like a placeholder with input padding
}
- // Set the border and box shadow on specific inputs to match
- .form-control {
- border-color: $border-color;
+ // 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);
+ }
}
- // Set validation states also for addons
- //.input-group-addon {
- // border-color: $border-color;
+ // 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 {
- color: $bmd-label-color-inner-focus;
+ margin-top : 0; // allow the input margin to set-off the top of the help-block
+ font-size : $help-font-size;
}
- }
-}
-// 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;
- }
+ // 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;
+@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;
- }
+ // 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;
+ // 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 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 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{
+@mixin create-colored-tags() {
+ &.tag-primary {
@include tag-color($brand-primary);
}
&.tag-info {
@include tag-color($brand-info);
}
- &.tag-success{
+ &.tag-success {
@include tag-color($brand-success);
}
- &.tag-warning{
+ &.tag-warning {
@include tag-color($brand-warning);
}
- &.tag-danger{
+ &.tag-danger {
@include tag-color($brand-danger);
}
- &.tag-rose{
- @include tag-color($brand-rose);
+ &.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;
- }
+
+@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);
+ // @include generic-variations($component, $selector-suffix, $color-default, "variations-content", $mdb-param-1);
}
diff --git a/AngularApp/src/assets/scss/core/mixins/_hover.scss b/AngularApp/src/assets/scss/core/mixins/_hover.scss
index b3bf2e1..ede56d9 100644
--- a/AngularApp/src/assets/scss/core/mixins/_hover.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_hover.scss
@@ -1,17 +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;
- }
+ // 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);
+@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/AngularApp/src/assets/scss/core/mixins/_layout.scss b/AngularApp/src/assets/scss/core/mixins/_layout.scss
index 059a89b..53605e4 100644
--- a/AngularApp/src/assets/scss/core/mixins/_layout.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_layout.scss
@@ -1,16 +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);
- }
+ > .bmd-layout-backdrop {
+ .in {
+ visibility : visible;
+ background-color : rgba(0, 0, 0, 0.5);
+ }
- @supports (pointer-events: auto) {
- &.in {
- pointer-events: auto;
- opacity: 1;
- }
+ @supports (pointer-events: auto) {
+ &.in {
+ pointer-events : auto;
+ opacity : 1;
+ }
+ }
}
- }
}
diff --git a/AngularApp/src/assets/scss/core/mixins/_navbar-colors.scss b/AngularApp/src/assets/scss/core/mixins/_navbar-colors.scss
index 3756faf..d2add69 100644
--- a/AngularApp/src/assets/scss/core/mixins/_navbar-colors.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_navbar-colors.scss
@@ -1,18 +1,18 @@
@mixin navbar-colors($color, $link-color) {
- color: $link-color;
- background-color: $color !important;
+ 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;
+ .dropdown-item:focus {
+ @include shadow-small-color($color);
+ background-color : $color;
+ color : $link-color;
}
- .navbar-toggler{
- .navbar-toggler-icon{
- background-color: $link-color;
+ .navbar-toggler {
+ .navbar-toggler-icon {
+ background-color : $link-color;
}
}
}
diff --git a/AngularApp/src/assets/scss/core/mixins/_navs.scss b/AngularApp/src/assets/scss/core/mixins/_navs.scss
index e5e7ff5..f2ef5a8 100644
--- a/AngularApp/src/assets/scss/core/mixins/_navs.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_navs.scss
@@ -1,61 +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;
- }
- }
+ .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;
+ // Disabled state lightens text and removes hover/tab effects
+ &.disabled {
+ color : $disabled-link-color;
- @include plain-hover-focus {
- color: $disabled-link-hover-color;
- }
+ @include plain-hover-focus {
+ color : $disabled-link-hover-color;
+ }
+ }
}
- }
}
@mixin set-wizard-color($color) {
- .moving-tab{
- background-color: $color;
+ .moving-tab {
+ background-color : $color;
@include shadow-big-color($color);
}
- .picture{
- &:hover{
- border-color: $color;
+ .picture {
+ &:hover {
+ border-color : $color;
}
}
- .choice{
+ .choice {
&:hover,
- &.active{
- .icon{
- border-color: $color;
- color: $color;
+ &.active {
+ .icon {
+ border-color : $color;
+ color : $color;
}
}
}
- .checkbox input[type=checkbox]:checked + .checkbox-material{
- .check{
- background-color: $color;
+ .checkbox input[type=checkbox]:checked + .checkbox-material {
+ .check {
+ background-color : $color;
}
}
.radio input[type=radio]:checked ~ .check {
- background-color: $color;
+ background-color : $color;
}
.radio input[type=radio]:checked ~ .circle {
- border-color: $color;
+ border-color : $color;
}
}
diff --git a/AngularApp/src/assets/scss/core/mixins/_sidebar-color.scss b/AngularApp/src/assets/scss/core/mixins/_sidebar-color.scss
index 224902e..97b100c 100644
--- a/AngularApp/src/assets/scss/core/mixins/_sidebar-color.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_sidebar-color.scss
@@ -1,58 +1,60 @@
-@mixin sidebar-background-color($background-color, $font-color){
- .nav{
- .nav-item{
- .nav-link{
- color: $font-color;
+@mixin sidebar-background-color($background-color, $font-color) {
+ .nav {
+ .nav-item {
+ .nav-link {
+ color : $font-color;
}
- i{
- color: rgba($font-color, .8);
+
+ i {
+ color : rgba($font-color, .8);
}
&.active,
- &:hover{
- [data-toggle="collapse"]{
- color: $font-color;
- i{
- color: rgba($font-color, .8);
+ &:hover {
+ [data-toggle='collapse'] {
+ color : $font-color;
+
+ i {
+ color : rgba($font-color, .8);
}
}
}
}
}
- .user{
- a{
- color: $font-color;
+ .user {
+ a {
+ color : $font-color;
}
}
- .simple-text{
- color: $font-color;
+ .simple-text {
+ color : $font-color;
}
- .sidebar-background:after{
- background: $background-color;
- opacity: .8;
+ .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;
+@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);
+ i {
+ color : rgba($font-color, .8);
}
}
}
}
}
-@mixin set-background-color-button($color){
+@mixin set-background-color-button($color) {
- li.active > a{
- background-color: $color;
+ li.active > a {
+ background-color : $color;
@include shadow-big-color($color);
}
}
diff --git a/AngularApp/src/assets/scss/core/mixins/_transparency.scss b/AngularApp/src/assets/scss/core/mixins/_transparency.scss
index da32b74..8d8b32c 100644
--- a/AngularApp/src/assets/scss/core/mixins/_transparency.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_transparency.scss
@@ -1,20 +1,20 @@
// Opacity
@mixin opacity($opacity) {
- opacity: $opacity;
- // IE8 filter
- $opacity-ie: ($opacity * 100);
- filter: #{alpha(opacity=$opacity-ie)};
+ 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;
+@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/AngularApp/src/assets/scss/core/mixins/_type.scss b/AngularApp/src/assets/scss/core/mixins/_type.scss
index e81ca89..40b4af1 100644
--- a/AngularApp/src/assets/scss/core/mixins/_type.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_type.scss
@@ -1,15 +1,15 @@
@mixin headings() {
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- @content;
- }
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ @content;
+ }
}
// 14sp font
%std-font {
- font-size: .875rem;
+ font-size : .875rem;
}
diff --git a/AngularApp/src/assets/scss/core/mixins/_utilities.scss b/AngularApp/src/assets/scss/core/mixins/_utilities.scss
index d4d744f..247c26a 100644
--- a/AngularApp/src/assets/scss/core/mixins/_utilities.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_utilities.scss
@@ -1,7 +1,7 @@
-@use "sass:math";
+@use 'sass:math';
@function calc-top($line-height-base, $font-size, $component-height) {
- @return (($line-height-base * $font-size) - $component-height) / 2; // vertical center of line-height
+ @return (($line-height-base * $font-size) - $component-height) / 2; // vertical center of line-height
}
// Emulate the less #contrast function
@@ -10,102 +10,104 @@
// 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 $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);
- }
+ @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 math.div(red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114, 255) * 100%;
- } @else {
- @return unquote("brightness(#{$color})");
- }
+ @if type-of($color) == color {
+ @return math.div(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 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 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;
+@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{
+@mixin create-colored-badges() {
+
+ &.primary-badge {
@include badges-color($brand-primary);
}
&.info-badge {
@include badges-color($brand-info);
}
- &.success-badge{
+ &.success-badge {
@include badges-color($brand-success);
}
- &.warning-badge{
+ &.warning-badge {
@include badges-color($brand-warning);
}
- &.danger-badge{
+ &.danger-badge {
@include badges-color($brand-danger);
}
- &.rose-badge{
- @include badges-color($brand-rose);
+ &.rose-badge {
+ @include badges-color($brand-rose);
}
}
@mixin badge-color() {
- &.badge-primary{
- background-color: $brand-primary;
+ &.badge-primary {
+ background-color : $brand-primary;
}
&.badge-info {
- background-color: $brand-info;
+ background-color : $brand-info;
}
- &.badge-success{
- background-color: $brand-success;
+ &.badge-success {
+ background-color : $brand-success;
}
- &.badge-warning{
- background-color: $brand-warning;
+ &.badge-warning {
+ background-color : $brand-warning;
}
- &.badge-danger{
- background-color: $brand-danger;
+ &.badge-danger {
+ background-color : $brand-danger;
}
- &.badge-rose{
- background-color: $brand-rose;
+ &.badge-rose {
+ background-color : $brand-rose;
}
- &.badge-default{
- background-color: $gray-light;
+ &.badge-default {
+ background-color : $gray-light;
}
}
diff --git a/AngularApp/src/assets/scss/core/mixins/_variables.scss b/AngularApp/src/assets/scss/core/mixins/_variables.scss
index e874d75..442d831 100644
--- a/AngularApp/src/assets/scss/core/mixins/_variables.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_variables.scss
@@ -2,24 +2,24 @@
//
//## 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-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-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;
+$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;
+$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;
+$sidebar-width : calc(100% - 260px) !default;
+$sidebar-mini-width : calc(100% - 80px) !default;
diff --git a/AngularApp/src/assets/scss/core/mixins/_vendor-prefixes.scss b/AngularApp/src/assets/scss/core/mixins/_vendor-prefixes.scss
index 18ba581..180ace9 100644
--- a/AngularApp/src/assets/scss/core/mixins/_vendor-prefixes.scss
+++ b/AngularApp/src/assets/scss/core/mixins/_vendor-prefixes.scss
@@ -2,198 +2,318 @@
// 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;
+ -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;
+ -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;
+ -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 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-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-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-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 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 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%);
+ 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 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 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(){
+@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); }
+ 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); }
+ 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); }
+ 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(){
+@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); }
+ 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); }
+ 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); }
+ 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(){
+@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);}
+ 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);}
+ 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);}
+ 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{
+@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);}
+ 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);}
+ 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);}
+ 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;
+ 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);
+ &.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/AngularApp/src/assets/scss/core/plugins/_animate.scss b/AngularApp/src/assets/scss/core/plugins/_animate.scss
index f54d7d8..c4e93a0 100644
--- a/AngularApp/src/assets/scss/core/plugins/_animate.scss
+++ b/AngularApp/src/assets/scss/core/plugins/_animate.scss
@@ -1,38 +1,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
// This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify
-
-
-
-
-
-
-
-
-
-
-
-
-
@charset "UTF-8";
/*
@@ -43,188 +11,187 @@ Copyright (c) 2015 Daniel Eden
*/
.animated {
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
+ -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;
+ -webkit-animation-iteration-count : infinite;
+ animation-iteration-count : infinite;
}
.animated.hinge {
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
+ -webkit-animation-duration : 2s;
+ animation-duration : 2s;
}
.animated.bounceIn,
.animated.bounceOut {
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
+ -webkit-animation-duration : .75s;
+ animation-duration : .75s;
}
.animated.flipOutX,
.animated.flipOutY {
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
+ -webkit-animation-duration : .75s;
+ animation-duration : .75s;
}
@-webkit-keyframes shake {
- from, to {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
+ 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);
- }
+ 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);
- }
+ 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);
- }
+ 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);
- }
+ 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);
- }
+ 20%, 40%, 60%, 80% {
+ -webkit-transform : translate3d(10px, 0, 0);
+ transform : translate3d(10px, 0, 0);
+ }
}
.shake {
- -webkit-animation-name: shake;
- animation-name: 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);
- }
+ from {
+ opacity : 0;
+ -webkit-transform : translate3d(0, -100%, 0);
+ transform : translate3d(0, -100%, 0);
+ }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
+ to {
+ opacity : 1;
+ -webkit-transform : none;
+ transform : none;
+ }
}
@keyframes fadeInDown {
- from {
- opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
- }
+ from {
+ opacity : 0;
+ -webkit-transform : translate3d(0, -100%, 0);
+ transform : translate3d(0, -100%, 0);
+ }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
+ to {
+ opacity : 1;
+ -webkit-transform : none;
+ transform : none;
+ }
}
.fadeInDown {
- -webkit-animation-name: fadeInDown;
- animation-name: fadeInDown;
+ -webkit-animation-name : fadeInDown;
+ animation-name : fadeInDown;
}
@-webkit-keyframes fadeOut {
- from {
- opacity: 1;
- }
+ from {
+ opacity : 1;
+ }
- to {
- opacity: 0;
- }
+ to {
+ opacity : 0;
+ }
}
@keyframes fadeOut {
- from {
- opacity: 1;
- }
+ from {
+ opacity : 1;
+ }
- to {
- opacity: 0;
- }
+ to {
+ opacity : 0;
+ }
}
.fadeOut {
- -webkit-animation-name: fadeOut;
- animation-name: fadeOut;
+ -webkit-animation-name : fadeOut;
+ animation-name : fadeOut;
}
@-webkit-keyframes fadeOutDown {
- from {
- opacity: 1;
- }
+ from {
+ opacity : 1;
+ }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
- }
+ to {
+ opacity : 0;
+ -webkit-transform : translate3d(0, 100%, 0);
+ transform : translate3d(0, 100%, 0);
+ }
}
@keyframes fadeOutDown {
- from {
- opacity: 1;
- }
+ from {
+ opacity : 1;
+ }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
- }
+ to {
+ opacity : 0;
+ -webkit-transform : translate3d(0, 100%, 0);
+ transform : translate3d(0, 100%, 0);
+ }
}
.fadeOutDown {
- -webkit-animation-name: fadeOutDown;
- animation-name: fadeOutDown;
+ -webkit-animation-name : fadeOutDown;
+ animation-name : fadeOutDown;
}
@-webkit-keyframes fadeOutUp {
- from {
- opacity: 1;
- }
+ from {
+ opacity : 1;
+ }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
- }
+ to {
+ opacity : 0;
+ -webkit-transform : translate3d(0, -100%, 0);
+ transform : translate3d(0, -100%, 0);
+ }
}
@keyframes fadeOutUp {
- from {
- opacity: 1;
- }
+ from {
+ opacity : 1;
+ }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
- }
+ to {
+ opacity : 0;
+ -webkit-transform : translate3d(0, -100%, 0);
+ transform : translate3d(0, -100%, 0);
+ }
}
.fadeOutUp {
- -webkit-animation-name: fadeOutUp;
- animation-name: fadeOutUp;
+ -webkit-animation-name : fadeOutUp;
+ animation-name : fadeOutUp;
}
diff --git a/AngularApp/src/assets/scss/core/plugins/_chartist.scss b/AngularApp/src/assets/scss/core/plugins/_chartist.scss
index 7693fb2..a765620 100644
--- a/AngularApp/src/assets/scss/core/plugins/_chartist.scss
+++ b/AngularApp/src/assets/scss/core/plugins/_chartist.scss
@@ -1,230 +1,231 @@
@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;
- }
+ 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;
- }
+ -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;
+ // 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;
+ 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;
+ stroke : $ct-grid-color;
+ stroke-width : $ct-grid-width;
- @if ($ct-grid-dasharray) {
- stroke-dasharray: $ct-grid-dasharray;
- }
+ @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;
+ 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;
+ fill : none;
+ stroke-width : $ct-line-width;
- @if ($ct-line-dasharray) {
- stroke-dasharray: $ct-line-dasharray;
- }
+ @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;
+ stroke : none;
+ fill-opacity : $ct-area-opacity;
}
@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
- fill: none;
- stroke-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;
+ 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-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;
- }
+ .#{$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);
- }
- }
- }
+ .#{$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();
@@ -239,90 +240,93 @@
// }
-.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;
- }
+.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/AngularApp/src/assets/scss/core/plugins/_perfect-scrollbar.scss b/AngularApp/src/assets/scss/core/plugins/_perfect-scrollbar.scss
index dbae094..89ba562 100644
--- a/AngularApp/src/assets/scss/core/plugins/_perfect-scrollbar.scss
+++ b/AngularApp/src/assets/scss/core/plugins/_perfect-scrollbar.scss
@@ -1,113 +1,160 @@
/* 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) {
+ -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) {
+ 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;
+ 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 : #EEEEEE;
+ opacity : 0.9;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+ background-color : #999999;
+ height : 11px;
+}
+
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+ background-color : #EEEEEE;
+ opacity : 0.9;
+}
+
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+ background-color : #999999;
+ 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;
+ 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;
+ height : 15px;
+}
+
+.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+ 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;
+ background-color : #AAAAAA;
+ -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; }
+ width : 15px;
+}
+
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+ position : absolute;
+ /* please don't change 'position' */
+ background-color : #AAAAAA;
+ -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 : #EEEEEE;
+ opacity : 0.9;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+ background-color : #999999;
+ height : 11px;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+ background-color : #EEEEEE;
+ opacity : 0.9;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+ background-color : #999999;
+ 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 : #EEEEEE;
+ opacity : 0.9;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+ background-color : #999999;
+}
+
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
+ background-color : #EEEEEE;
+ opacity : 0.9;
+}
+
+.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+ background-color : #999999;
+}
diff --git a/AngularApp/src/assets/scss/core/variables/_body.scss b/AngularApp/src/assets/scss/core/variables/_body.scss
index 5f1da1e..d362f0f 100644
--- a/AngularApp/src/assets/scss/core/variables/_body.scss
+++ b/AngularApp/src/assets/scss/core/variables/_body.scss
@@ -2,5 +2,5 @@
//
// Settings for the `<body>` element.
-$body-bg: #fafafa !default;
+$body-bg : #FAFAFA !default;
//$body-color: $gray-dark !default;
diff --git a/AngularApp/src/assets/scss/core/variables/_bootstrap-material-design-base.scss b/AngularApp/src/assets/scss/core/variables/_bootstrap-material-design-base.scss
index d6d8bdc..553243d 100644
--- a/AngularApp/src/assets/scss/core/variables/_bootstrap-material-design-base.scss
+++ b/AngularApp/src/assets/scss/core/variables/_bootstrap-material-design-base.scss
@@ -1,33 +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
+$gray-lighter : rgba($black, 0.12) !default;
+$gray-light : #999999 !default;
+$gray-alpha : .54 !default;
+$gray : #555555 !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;
+$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-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
+$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;
+$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-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;
+$mdb-label-color : unquote('rgba(#{$rgb-black}, 0.26)') !default;
+$mdb-label-color-toggle-focus : unquote('rgba(#{$rgb-black}, .54)') !default;
diff --git a/AngularApp/src/assets/scss/core/variables/_bootstrap-material-design.scss b/AngularApp/src/assets/scss/core/variables/_bootstrap-material-design.scss
index 58a6263..0fa0e89 100644
--- a/AngularApp/src/assets/scss/core/variables/_bootstrap-material-design.scss
+++ b/AngularApp/src/assets/scss/core/variables/_bootstrap-material-design.scss
@@ -1,76 +1,76 @@
-@use "sass:math";
+@use 'sass:math';
-$bmd-label-color-focus: $brand-primary !default;
-$bmd-invalid-underline: $brand-danger !default;
-$bmd-readonly-underline: $input-border-color !default;
+$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;
+$bmd-brand-inverse : $indigo !default;
// Typography elements FIXME: review to see if we actually need these
-$icon-color: rgba($black, 0.5) !default;
+$icon-color : rgba($black, 0.5) !default;
// --------------------
// inputs
-$mdb-input-placeholder-color: #AAAAAA !default;
-$mdb-input-underline-color: #D2D2D2 !default;
+$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
+$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: math.div(75, 100) !default;
-$bmd-help-size-ratio: math.div(75, 100) !default;
+$bmd-bmd-label-static-size-ratio : math.div(75, 100) !default;
+$bmd-help-size-ratio : math.div(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;
+$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;
+$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 : 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-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
+$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;
+$text-disabled : #A8A8A8 !default;
+$background-disabled : #EAEAEA !default;
-$margin-base: 1.071rem !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-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;
+$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;
+$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;
+$padding-default-vertical : 10px !default;
+$medium-pale-bg : #F1EAE0 !default;
+$pale-bg : #F9F7F3 !default;
-$font-color: #66615b !default;
+$font-color : #66615B !default;
// $brand-default: #cecece !default;
// $brand-primary: $purple !default;
@@ -80,158 +80,158 @@ $font-color: #66615b !default;
// $brand-info: $cyan !default;
// $brand-rose: $pink !default;
-$black-color: #3C4858 !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;
+$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 : #777777 !default;
+$bmd-dropdown-link-color : #333333 !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%
+$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;
+$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;
+$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
+$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;
+$white-color : #FFFFFF !default;
+$navbar-color : #555555 !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;
+$popover-color : $navbar-color !default;
//Tooltips
-$tooltip-font-size: 0.75rem !default;
+$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;
+$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;
+$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-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-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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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-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-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;
+$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;
+$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/AngularApp/src/assets/scss/core/variables/_brand.scss b/AngularApp/src/assets/scss/core/variables/_brand.scss
index 4a9a39c..bc7b205 100644
--- a/AngularApp/src/assets/scss/core/variables/_brand.scss
+++ b/AngularApp/src/assets/scss/core/variables/_brand.scss
@@ -3,10 +3,10 @@
/* 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;
+$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/AngularApp/src/assets/scss/core/variables/_buttons.scss b/AngularApp/src/assets/scss/core/variables/_buttons.scss
index b917123..6c9c39c 100644
--- a/AngularApp/src/assets/scss/core/variables/_buttons.scss
+++ b/AngularApp/src/assets/scss/core/variables/_buttons.scss
@@ -1,81 +1,81 @@
// 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
+$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-color : $gray-dark !default;
+$bmd-btn-bg : transparent !default; //$body-bg !default; // #fff
+$bmd-btn-border : #CCCCCC !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-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-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
+$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;
+$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-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-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-primary-color : #FFFFFF !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-secondary-color : $gray-dark !default;
+$btn-secondary-bg : $body-bg !default; // #fff
+$btn-secondary-border-color : #CCCCCC !default;
//
-$btn-info-color: #fff !default;
-$btn-info-bg: $brand-info !default;
-$btn-info-border-color: $btn-info-bg !default;
+$btn-info-color : #FFFFFF !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-success-color : #FFFFFF !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-warning-color : #FFFFFF !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-danger-color : #FFFFFF !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-rose-color : #FFFFFF !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-default-color : #FFFFFF !default;
+$btn-default-bg : $gray-color !default;
+$btn-default-border-color : $btn-default-bg !default;
//
-$btn-link-disabled-color: $gray-light !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-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-y-lg : 1.125rem !default;
+$input-btn-padding-x-lg : 2.25rem !default;
//
//$input-btn-padding-x-lg: 1.5rem !default;
@@ -84,5 +84,5 @@ $input-btn-padding-x-lg: 2.25rem !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;
+$btn-border-radius-sm : .1875rem !default;
+$border-radius-extreme : 2rem !default;
diff --git a/AngularApp/src/assets/scss/core/variables/_card.scss b/AngularApp/src/assets/scss/core/variables/_card.scss
index af8e1bc..3db53f4 100644
--- a/AngularApp/src/assets/scss/core/variables/_card.scss
+++ b/AngularApp/src/assets/scss/core/variables/_card.scss
@@ -3,18 +3,18 @@
//$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-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-bg : #FFFFFF !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;
+$mdb-card-body-text : $mdb-text-color-primary !default;
+$mdb-card-body-background : #FFFFFF !default;
+$mdb-card-image-headline : #FFFFFF !default;
-$text-disabled: #a8a8a8 !default;
-$background-disabled: #eaeaea !default;
+$text-disabled : #A8A8A8 !default;
+$background-disabled : #EAEAEA !default;
diff --git a/AngularApp/src/assets/scss/core/variables/_code.scss b/AngularApp/src/assets/scss/core/variables/_code.scss
index fc51fda..69cafac 100644
--- a/AngularApp/src/assets/scss/core/variables/_code.scss
+++ b/AngularApp/src/assets/scss/core/variables/_code.scss
@@ -1,3 +1,3 @@
// Code
-$code-bg: $grey-200 !default; // #f7f7f9 !default;
+$code-bg : $grey-200 !default; // #f7f7f9 !default;
diff --git a/AngularApp/src/assets/scss/core/variables/_colors.scss b/AngularApp/src/assets/scss/core/variables/_colors.scss
index db0c198..5af6f4b 100644
--- a/AngularApp/src/assets/scss/core/variables/_colors.scss
+++ b/AngularApp/src/assets/scss/core/variables/_colors.scss
@@ -1,322 +1,324 @@
-$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;
+$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;
+$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;
+$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 : #AA00FF !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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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 : #FFFF00 !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;
+$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;
+$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;
+$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;
+$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;
+$grey-50 : #FAFAFA !default;
+$grey-100 : #F5F5F5 !default;
+$grey-200 : #EEEEEE !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 : #EEEEEE !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;
+$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;
+$black : #000000;
+$white : #FFFFFF;
// New colors
-$gray-color: #999999 !default;
-$black-color: #3C4858 !default;
+$gray-color : #999999 !default;
+$black-color : #3C4858 !default;
-$black: #000000; $rgb-black: "0,0,0" !default;
-$white: #ffffff; $rgb-white: "255,255,255" !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
+$gray-base : #000000 !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/AngularApp/src/assets/scss/core/variables/_custom-forms.scss b/AngularApp/src/assets/scss/core/variables/_custom-forms.scss
index d6f3644..56bbd55 100644
--- a/AngularApp/src/assets/scss/core/variables/_custom-forms.scss
+++ b/AngularApp/src/assets/scss/core/variables/_custom-forms.scss
@@ -1,5 +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;
+$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/AngularApp/src/assets/scss/core/variables/_drawer.scss b/AngularApp/src/assets/scss/core/variables/_drawer.scss
index d30b021..114356c 100644
--- a/AngularApp/src/assets/scss/core/variables/_drawer.scss
+++ b/AngularApp/src/assets/scss/core/variables/_drawer.scss
@@ -1,5 +1,5 @@
// Drawer
// Sizing
-$bmd-drawer-x-size: 240px !default;
-$bmd-drawer-y-size: 100px !default;
+$bmd-drawer-x-size : 240px !default;
+$bmd-drawer-y-size : 100px !default;
diff --git a/AngularApp/src/assets/scss/core/variables/_dropdown.scss b/AngularApp/src/assets/scss/core/variables/_dropdown.scss
index d9f1ed9..c8c4f45 100644
--- a/AngularApp/src/assets/scss/core/variables/_dropdown.scss
+++ b/AngularApp/src/assets/scss/core/variables/_dropdown.scss
@@ -6,7 +6,7 @@
//$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-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;
diff --git a/AngularApp/src/assets/scss/core/variables/_forms.scss b/AngularApp/src/assets/scss/core/variables/_forms.scss
index 3cf5ca1..a0ffd00 100644
--- a/AngularApp/src/assets/scss/core/variables/_forms.scss
+++ b/AngularApp/src/assets/scss/core/variables/_forms.scss
@@ -1,37 +1,37 @@
// Forms
//
-$input-bg: rgba($black, 0) !default; // #fff !default;
-$input-bg-disabled: rgba($black, 0) !default; // $gray-lighter !default;
+$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-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-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-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-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 : 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-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-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;
+$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=";
+$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/AngularApp/src/assets/scss/core/variables/_list-group.scss b/AngularApp/src/assets/scss/core/variables/_list-group.scss
index e0324c0..b04b86e 100644
--- a/AngularApp/src/assets/scss/core/variables/_list-group.scss
+++ b/AngularApp/src/assets/scss/core/variables/_list-group.scss
@@ -1,9 +1,9 @@
// List group
-$list-group-bg: inherit !default; // #fff
+$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-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;
diff --git a/AngularApp/src/assets/scss/core/variables/_menu.scss b/AngularApp/src/assets/scss/core/variables/_menu.scss
index 54da3c4..74dd6b2 100644
--- a/AngularApp/src/assets/scss/core/variables/_menu.scss
+++ b/AngularApp/src/assets/scss/core/variables/_menu.scss
@@ -1,18 +1,18 @@
-$bmd-menu-line-height: 1 !default; // makes it easier to use sizes to match spec
+$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-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;
+$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;
+$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;
+$bmd-menu-expand-duration : 0.3s !default;
+$bmd-menu-fade-duration : 0.2s !default;
diff --git a/AngularApp/src/assets/scss/core/variables/_modals.scss b/AngularApp/src/assets/scss/core/variables/_modals.scss
index 2054a58..31d15a2 100644
--- a/AngularApp/src/assets/scss/core/variables/_modals.scss
+++ b/AngularApp/src/assets/scss/core/variables/_modals.scss
@@ -1,5 +1,5 @@
// Modals
-$modal-content-xs-box-shadow: $bmd-shadow-24dp !default;
+$modal-content-xs-box-shadow : $bmd-shadow-24dp !default;
// Padding applied to the modal body
//$modal-inner-padding: 15px !default;
@@ -11,7 +11,7 @@ $modal-content-xs-box-shadow: $bmd-shadow-24dp !default;
//$modal-content-border-color: rgba(0,0,0,.2) !default;
//
//$modal-backdrop-bg: #000 !default;
-$modal-backdrop-opacity: .26 !default; // .5
+$modal-backdrop-opacity : .26 !default; // .5
//$modal-header-border-color: #e5e5e5 !default;
//$modal-footer-border-color: $modal-header-border-color !default;
//
@@ -19,16 +19,16 @@ $modal-backdrop-opacity: .26 !default; // .5
//$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;
+$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/AngularApp/src/assets/scss/core/variables/_nav.scss b/AngularApp/src/assets/scss/core/variables/_nav.scss
index f02acf6..015a8bf 100644
--- a/AngularApp/src/assets/scss/core/variables/_nav.scss
+++ b/AngularApp/src/assets/scss/core/variables/_nav.scss
@@ -1,37 +1,37 @@
// 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;
+$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
+$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
+$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;
+$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 : #FFFFFF !default;
+$bmd-nav-tabs-primary-active-border-color : #FFFFFF !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 : #FFFFFF !default;
+$bmd-nav-tabs-inverse-active-border-color : #FFFFFF !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;
@@ -45,7 +45,7 @@ $bmd-nav-tabs-inverse-disabled-link-color-hover: $bmd-inverse-light !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-bg : transparent !default; // $body-bg
//$nav-tabs-active-link-hover-color: $gray !default;
//$nav-tabs-active-link-hover-border-color: #ddd !default;
//
diff --git a/AngularApp/src/assets/scss/core/variables/_pagination.scss b/AngularApp/src/assets/scss/core/variables/_pagination.scss
index e55ec27..4d13406 100644
--- a/AngularApp/src/assets/scss/core/variables/_pagination.scss
+++ b/AngularApp/src/assets/scss/core/variables/_pagination.scss
@@ -1,6 +1,6 @@
-$pagination-border-width: 0;
-$pagination-bg: transparent;
-$pagination-disabled-bg: transparent;
+$pagination-border-width : 0;
+$pagination-bg : transparent;
+$pagination-disabled-bg : transparent;
-$pagination-padding-x-lg: 0;
-$pagination-padding-x-sm: 0;
+$pagination-padding-x-lg : 0;
+$pagination-padding-x-sm : 0;
diff --git a/AngularApp/src/assets/scss/core/variables/_shadow.scss b/AngularApp/src/assets/scss/core/variables/_shadow.scss
index ef1f786..f07fced 100644
--- a/AngularApp/src/assets/scss/core/variables/_shadow.scss
+++ b/AngularApp/src/assets/scss/core/variables/_shadow.scss
@@ -1,35 +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;
+$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-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-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-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-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-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-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-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);
+$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/AngularApp/src/assets/scss/core/variables/_snackbar.scss b/AngularApp/src/assets/scss/core/variables/_snackbar.scss
index a7b9212..a0cfadd 100644
--- a/AngularApp/src/assets/scss/core/variables/_snackbar.scss
+++ b/AngularApp/src/assets/scss/core/variables/_snackbar.scss
@@ -1,6 +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-bg : #323232 !default;
+$bmd-snackbar-color : #FFFFFF !default;
+$bmd-snackbar-min-width : 280px !default;
+$bmd-snackbar-padding : .8rem 1.5rem !default;
-$bmd-snackbar-min-width-sm: 100% !default;
+$bmd-snackbar-min-width-sm : 100% !default;
diff --git a/AngularApp/src/assets/scss/core/variables/_spacing.scss b/AngularApp/src/assets/scss/core/variables/_spacing.scss
index 053c915..37a4547 100644
--- a/AngularApp/src/assets/scss/core/variables/_spacing.scss
+++ b/AngularApp/src/assets/scss/core/variables/_spacing.scss
@@ -3,7 +3,7 @@
// 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 : 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: (
diff --git a/AngularApp/src/assets/scss/core/variables/_state.scss b/AngularApp/src/assets/scss/core/variables/_state.scss
index 07dad33..fe42602 100644
--- a/AngularApp/src/assets/scss/core/variables/_state.scss
+++ b/AngularApp/src/assets/scss/core/variables/_state.scss
@@ -1,16 +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-success-text : $bmd-inverse !default;
+$state-success-bg : $brand-success !default;
-$state-info-text: $bmd-inverse !default;
-$state-info-bg: $brand-info !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-warning-text : $bmd-inverse !default;
+$state-warning-bg : $brand-warning !default;
-$state-danger-text: $bmd-inverse !default;
-$state-danger-bg: $brand-danger !default;
+$state-danger-text : $bmd-inverse !default;
+$state-danger-bg : $brand-danger !default;
-$state-rose-bg: $brand-rose !default;
+$state-rose-bg : $brand-rose !default;
diff --git a/AngularApp/src/assets/scss/core/variables/_tables.scss b/AngularApp/src/assets/scss/core/variables/_tables.scss
index 6a6aa39..edc8e66 100644
--- a/AngularApp/src/assets/scss/core/variables/_tables.scss
+++ b/AngularApp/src/assets/scss/core/variables/_tables.scss
@@ -1,6 +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)
+$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);
+$bmd-table-header-font-size : .95rem;
+$bmd-table-border-color-inverse : rgba(#fff, .06);
diff --git a/AngularApp/src/assets/scss/core/variables/_tooltip.scss b/AngularApp/src/assets/scss/core/variables/_tooltip.scss
index e94196d..364f94f 100644
--- a/AngularApp/src/assets/scss/core/variables/_tooltip.scss
+++ b/AngularApp/src/assets/scss/core/variables/_tooltip.scss
@@ -1 +1 @@
-$tooltip-bg: rgba($grey-700, .9);
+$tooltip-bg : rgba($grey-700, .9);
diff --git a/AngularApp/src/assets/scss/core/variables/_type.scss b/AngularApp/src/assets/scss/core/variables/_type.scss
index 3861d2f..19d98a9 100644
--- a/AngularApp/src/assets/scss/core/variables/_type.scss
+++ b/AngularApp/src/assets/scss/core/variables/_type.scss
@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
// Typography
//
@@ -7,36 +7,36 @@
// 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-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 `<html>` element.
//$font-size-root: 16px !default;
//
-$font-size-base: 1rem !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;
+$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-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;
@@ -45,17 +45,17 @@ $display4-size: 2.125rem !default; // md display-1 34px was 3.5rem
//
//$line-height-base: 1.5 !default;
//
-$headings-margin-bottom: math.div($spacer, 2) !default;
+$headings-margin-bottom : math.div($spacer, 2) !default;
//$headings-font-family: inherit !default;
-$headings-font-weight: 400 !default; // was 500
+$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-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;
+$font-size-large : 1em !default;
+$font-size-large-navbar : 20px !default;
//$headings-line-height: 1.1 !default;
//$headings-color: inherit !default;
@@ -80,30 +80,30 @@ $font-size-large-navbar: 20px !default;
//
//$nested-kbd-font-weight: bold !default;
-$padding-input-vertical: 11px !default;
-$padding-input-horizontal: 19px !default;
+$padding-input-vertical : 11px !default;
+$padding-input-horizontal : 19px !default;
-$padding-btn-vertical: 11px !default;
-$padding-btn-horizontal: 22px !default;
+$padding-btn-vertical : 11px !default;
+$padding-btn-horizontal : 22px !default;
-$padding-base-vertical: .5rem !default;
-$padding-base-horizontal: .7rem !default;
+$padding-base-vertical : .5rem !default;
+$padding-base-horizontal : .7rem !default;
-$padding-round-horizontal: 23px !default;
+$padding-round-horizontal : 23px !default;
-$padding-simple-vertical: 10px !default;
-$padding-simple-horizontal: 17px !default;
+$padding-simple-vertical : 10px !default;
+$padding-simple-horizontal : 17px !default;
-$padding-large-vertical: 15px !default;
-$padding-large-horizontal: 48px !default;
+$padding-large-vertical : 15px !default;
+$padding-large-horizontal : 48px !default;
-$padding-small-vertical: 5px !default;
-$padding-small-horizontal: 15px !default;
+$padding-small-vertical : 5px !default;
+$padding-small-horizontal : 15px !default;
-$padding-label-vertical: 2px !default;
-$padding-label-horizontal: 12px !default;
+$padding-label-vertical : 2px !default;
+$padding-label-horizontal : 12px !default;
-$margin-large-vertical: 30px !default;
-$margin-base-vertical: 15px !default;
+$margin-large-vertical : 30px !default;
+$margin-base-vertical : 15px !default;
-$margin-base-horizontal: 15px !default;
+$margin-base-horizontal : 15px !default;
diff --git a/AngularApp/src/assets/scss/material-dashboard.scss b/AngularApp/src/assets/scss/material-dashboard.scss
index 0faa22a..6d5ee8b 100644
--- a/AngularApp/src/assets/scss/material-dashboard.scss
+++ b/AngularApp/src/assets/scss/material-dashboard.scss
@@ -15,45 +15,44 @@
* 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";
-
-@import "core/angular-modal.scss";
+@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';
+
+@import 'core/angular-modal.scss';
diff --git a/AngularApp/src/environments/environment.prod.ts b/AngularApp/src/environments/environment.prod.ts
index 3612073..5d08331 100644
--- a/AngularApp/src/environments/environment.prod.ts
+++ b/AngularApp/src/environments/environment.prod.ts
@@ -1,3 +1,3 @@
export const environment = {
- production: true
+ production: true
};
diff --git a/AngularApp/src/environments/environment.ts b/AngularApp/src/environments/environment.ts
index b7f639a..6f30aa4 100644
--- a/AngularApp/src/environments/environment.ts
+++ b/AngularApp/src/environments/environment.ts
@@ -4,5 +4,5 @@
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
- production: false
+ production: false
};
diff --git a/AngularApp/src/index.html b/AngularApp/src/index.html
index 79a9cf2..d33827f 100644
--- a/AngularApp/src/index.html
+++ b/AngularApp/src/index.html
@@ -17,34 +17,34 @@
-->
<!doctype html>
<html>
-<head>
- <base href='/'>
- <meta charset="utf-8" />
- <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/apple-icon.png" />
- <link rel="icon" type="image/png" href="./assets/img/favicon.png" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-
- <title>Material Dashboard Angular by Creative Tim</title>
-
- <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
- <meta name="viewport" content="width=device-width" />
-
- <!-- Fonts and icons -->
- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
- <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>
- <script>window.global = window;</script>
-
-</head>
-<body>
- <app-root>
- <div class="loader">
- <svg class="circular" viewBox="25 25 50 50">
- <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
- </svg>
- </div>
- </app-root>
-</body>
+ <head>
+ <base href="/">
+ <meta charset="utf-8" />
+ <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/apple-icon.png" />
+ <link rel="icon" type="image/png" href="./assets/img/favicon.png" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+ <title>Material Dashboard Angular by Creative Tim</title>
+
+ <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+ <meta name="viewport" content="width=device-width" />
+
+ <!-- Fonts and icons -->
+ <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons" rel="stylesheet" type="text/css">
+ <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>
+ <script>window.global = window;</script>
+
+ </head>
+ <body>
+ <app-root>
+ <div class="loader">
+ <svg class="circular" viewBox="25 25 50 50">
+ <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
+ </svg>
+ </div>
+ </app-root>
+ </body>
</html>
diff --git a/AngularApp/src/main.ts b/AngularApp/src/main.ts
index deb9e17..0c1edb4 100644
--- a/AngularApp/src/main.ts
+++ b/AngularApp/src/main.ts
@@ -1,29 +1,30 @@
/*!
-=========================================================
-* Material Dashboard Angular - v2.8.0
-=========================================================
+ =========================================================
+ * Material Dashboard Angular - v2.8.0
+ =========================================================
-* Product Page: https://www.creative-tim.com/product/material-dashboard-angular2
-* Copyright 2021 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular2/blob/master/LICENSE.md)
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2
+ * Copyright 2021 Creative Tim (https://www.creative-tim.com)
+ * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular2/blob/master/LICENSE.md)
-* Coded by Creative Tim
+ * Coded by Creative Tim
-=========================================================
+ =========================================================
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-import { enableProdMode } from '@angular/core';
+ */
+import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';
-if (environment.production) {
- enableProdMode();
+
+if ( environment.production ) {
+ enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/AngularApp/src/polyfills.ts b/AngularApp/src/polyfills.ts
index 7982882..3d6a167 100644
--- a/AngularApp/src/polyfills.ts
+++ b/AngularApp/src/polyfills.ts
@@ -29,14 +29,12 @@ import 'web-animations-js'; // Run `npm install --save webå-animations-js`.
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
-
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
-
/***************************************************************************************************
* APPLICATION IMPORTS
*/
diff --git a/AngularApp/src/test.ts b/AngularApp/src/test.ts
index 9bf7226..79a10fe 100644
--- a/AngularApp/src/test.ts
+++ b/AngularApp/src/test.ts
@@ -8,9 +8,8 @@ import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+ BrowserDynamicTestingModule, platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
@@ -20,10 +19,7 @@ declare var require: any;
__karma__.loaded = function () {};
// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting()
-);
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
diff --git a/AngularApp/src/tsconfig.app.json b/AngularApp/src/tsconfig.app.json
index d2fc806..4168005 100644
--- a/AngularApp/src/tsconfig.app.json
+++ b/AngularApp/src/tsconfig.app.json
@@ -1,13 +1,13 @@
{
- "extends": "../tsconfig.json",
- "compilerOptions": {
- "outDir": "../out-tsc/app",
- "module": "es2020",
- "baseUrl": "",
- "types": []
- },
- "exclude": [
- "test.ts",
- "**/*.spec.ts"
- ]
+ "extends" : "../tsconfig.json",
+ "compilerOptions": {
+ "outDir" : "../out-tsc/app",
+ "module" : "es2020",
+ "baseUrl": "",
+ "types" : []
+ },
+ "exclude" : [
+ "test.ts",
+ "**/*.spec.ts"
+ ]
}
diff --git a/AngularApp/src/tsconfig.spec.json b/AngularApp/src/tsconfig.spec.json
index 15458ed..b49b726 100644
--- a/AngularApp/src/tsconfig.spec.json
+++ b/AngularApp/src/tsconfig.spec.json
@@ -1,21 +1,21 @@
{
- "extends": "../tsconfig.json",
- "compilerOptions": {
- "outDir": "../out-tsc/spec",
- "module": "commonjs",
- "target": "es5",
- "baseUrl": "",
- "types": [
- "jasmine",
- "node"
+ "extends" : "../tsconfig.json",
+ "compilerOptions": {
+ "outDir" : "../out-tsc/spec",
+ "module" : "commonjs",
+ "target" : "es5",
+ "baseUrl": "",
+ "types" : [
+ "jasmine",
+ "node"
+ ]
+ },
+ "files" : [
+ "test.ts",
+ "polyfills.ts"
+ ],
+ "include" : [
+ "**/*.spec.ts",
+ "**/*.d.ts"
]
- },
- "files": [
- "test.ts",
- "polyfills.ts"
- ],
- "include": [
- "**/*.spec.ts",
- "**/*.d.ts"
- ]
}
diff --git a/AngularApp/src/typings.d.ts b/AngularApp/src/typings.d.ts
index ef5c7bd..769f8bf 100644
--- a/AngularApp/src/typings.d.ts
+++ b/AngularApp/src/typings.d.ts
@@ -1,5 +1,7 @@
/* SystemJS module definition */
declare var module: NodeModule;
+
+
interface NodeModule {
- id: string;
+ id: string;
}
diff --git a/AngularApp/tsconfig.json b/AngularApp/tsconfig.json
index 40955e8..cb7adba 100644
--- a/AngularApp/tsconfig.json
+++ b/AngularApp/tsconfig.json
@@ -1,21 +1,21 @@
{
- "compileOnSave": false,
- "compilerOptions": {
- "outDir": "./dist/out-tsc",
- "baseUrl": "src",
- "sourceMap": true,
- "declaration": false,
- "module": "es2020",
- "moduleResolution": "node",
- "emitDecoratorMetadata": true,
- "experimentalDecorators": true,
- "target": "es2020",
- "lib": [
- "es2020",
- "dom"
- ],
- "typeRoots": [
- "node_modules/@types"
- ],
- }
+ "compileOnSave" : false,
+ "compilerOptions": {
+ "outDir" : "./dist/out-tsc",
+ "baseUrl" : "src",
+ "sourceMap" : true,
+ "declaration" : false,
+ "module" : "es2020",
+ "moduleResolution" : "node",
+ "emitDecoratorMetadata" : true,
+ "experimentalDecorators": true,
+ "target" : "es2020",
+ "lib" : [
+ "es2020",
+ "dom"
+ ],
+ "typeRoots" : [
+ "node_modules/@types"
+ ]
+ }
}
diff --git a/AngularApp/tslint.json b/AngularApp/tslint.json
index bb84fcf..421b973 100644
--- a/AngularApp/tslint.json
+++ b/AngularApp/tslint.json
@@ -1,116 +1,130 @@
{
- "rulesDirectory": [
- "node_modules/codelyzer"
- ],
- "rules": {
- "callable-types": true,
- "class-name": true,
- "comment-format": [
- true,
- "check-space"
+ "rulesDirectory": [
+ "node_modules/codelyzer"
],
- "curly": true,
- "eofline": true,
- "forin": true,
- "import-blacklist": [true],
- "import-spacing": true,
- "indent": [
- true,
- "spaces"
- ],
- "interface-over-type-literal": true,
- "label-position": true,
- "max-line-length": [
- true,
- 140
- ],
- "member-access": false,
- "member-ordering": [
- true,
- "static-before-instance",
- "variables-before-functions"
- ],
- "no-arg": true,
- "no-bitwise": true,
- "no-console": [
- true,
- "debug",
- "info",
- "time",
- "timeEnd",
- "trace"
- ],
- "no-construct": true,
- "no-debugger": true,
- "no-duplicate-variable": true,
- "no-empty": false,
- "no-empty-interface": true,
- "no-eval": true,
- "no-inferrable-types": [true, "ignore-params"],
- "no-shadowed-variable": true,
- "no-string-literal": false,
- "no-string-throw": true,
- "no-switch-case-fall-through": true,
- "no-trailing-whitespace": true,
- "no-unused-expression": true,
- "no-use-before-declare": true,
- "no-var-keyword": true,
- "object-literal-sort-keys": false,
- "one-line": [
- true,
- "check-open-brace",
- "check-catch",
- "check-else",
- "check-whitespace"
- ],
- "prefer-const": true,
- "quotemark": [
- true,
- "single"
- ],
- "radix": true,
- "semicolon": [
- "always"
- ],
- "triple-equals": [
- true,
- "allow-null-check"
- ],
- "typedef-whitespace": [
- true,
- {
- "call-signature": "nospace",
- "index-signature": "nospace",
- "parameter": "nospace",
- "property-declaration": "nospace",
- "variable-declaration": "nospace"
- }
- ],
- "typeof-compare": true,
- "unified-signatures": true,
- "variable-name": false,
- "whitespace": [
- true,
- "check-branch",
- "check-decl",
- "check-operator",
- "check-separator",
- "check-type"
- ],
-
- "directive-selector": [true, "attribute", "app", "camelCase"],
- "component-selector": [true, "element", "app", "kebab-case"],
- "use-input-property-decorator": true,
- "use-output-property-decorator": true,
- "use-host-property-decorator": true,
- "no-input-rename": true,
- "no-output-rename": true,
- "use-life-cycle-interface": true,
- "use-pipe-transform-interface": true,
- "component-class-suffix": true,
- "directive-class-suffix": true,
- "no-access-missing-member": true,
- "templates-use-public": true,
- "invoke-injectable": true
- }
+ "rules" : {
+ "callable-types" : true,
+ "class-name" : true,
+ "comment-format" : [
+ true,
+ "check-space"
+ ],
+ "curly" : true,
+ "eofline" : true,
+ "forin" : true,
+ "import-blacklist" : [
+ true
+ ],
+ "import-spacing" : true,
+ "indent" : [
+ true,
+ "spaces"
+ ],
+ "interface-over-type-literal" : true,
+ "label-position" : true,
+ "max-line-length" : [
+ true,
+ 140
+ ],
+ "member-access" : false,
+ "member-ordering" : [
+ true,
+ "static-before-instance",
+ "variables-before-functions"
+ ],
+ "no-arg" : true,
+ "no-bitwise" : true,
+ "no-console" : [
+ true,
+ "debug",
+ "info",
+ "time",
+ "timeEnd",
+ "trace"
+ ],
+ "no-construct" : true,
+ "no-debugger" : true,
+ "no-duplicate-variable" : true,
+ "no-empty" : false,
+ "no-empty-interface" : true,
+ "no-eval" : true,
+ "no-inferrable-types" : [
+ true,
+ "ignore-params"
+ ],
+ "no-shadowed-variable" : true,
+ "no-string-literal" : false,
+ "no-string-throw" : true,
+ "no-switch-case-fall-through" : true,
+ "no-trailing-whitespace" : true,
+ "no-unused-expression" : true,
+ "no-use-before-declare" : true,
+ "no-var-keyword" : true,
+ "object-literal-sort-keys" : false,
+ "one-line" : [
+ true,
+ "check-open-brace",
+ "check-catch",
+ "check-else",
+ "check-whitespace"
+ ],
+ "prefer-const" : true,
+ "quotemark" : [
+ true,
+ "single"
+ ],
+ "radix" : true,
+ "semicolon" : [
+ "always"
+ ],
+ "triple-equals" : [
+ true,
+ "allow-null-check"
+ ],
+ "typedef-whitespace" : [
+ true,
+ {
+ "call-signature" : "nospace",
+ "index-signature" : "nospace",
+ "parameter" : "nospace",
+ "property-declaration": "nospace",
+ "variable-declaration": "nospace"
+ }
+ ],
+ "typeof-compare" : true,
+ "unified-signatures" : true,
+ "variable-name" : false,
+ "whitespace" : [
+ true,
+ "check-branch",
+ "check-decl",
+ "check-operator",
+ "check-separator",
+ "check-type"
+ ],
+ "directive-selector" : [
+ true,
+ "attribute",
+ "app",
+ "camelCase"
+ ],
+ "component-selector" : [
+ true,
+ "element",
+ "app",
+ "kebab-case"
+ ],
+ "use-input-property-decorator" : true,
+ "use-output-property-decorator": true,
+ "use-host-property-decorator" : true,
+ "no-input-rename" : true,
+ "no-output-rename" : true,
+ "use-life-cycle-interface" : true,
+ "use-pipe-transform-interface" : true,
+ "component-class-suffix" : true,
+ "directive-class-suffix" : true,
+ "no-access-missing-member" : true,
+ "templates-use-public" : true,
+ "invoke-injectable" : true
+ }
}
diff --git a/AngularApp/typings/modules/chartist/index.d.ts b/AngularApp/typings/modules/chartist/index.d.ts
index cf2451d..2ef52be 100644
--- a/AngularApp/typings/modules/chartist/index.d.ts
+++ b/AngularApp/typings/modules/chartist/index.d.ts
@@ -6,561 +6,607 @@ declare module 'chartist' {
// Definitions by: Matt Gibbs <https://github.com/mtgibbs>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-namespace Chartist {
-
- interface ChartistStatic {
-
- /**
- * Precision level used internally in Chartist for rounding. If you require more decimal places you can increase this number.
- */
- precision: number;
-
- /**
- * A map with characters to escape for strings to be safely used as attribute values.
- */
- escapingMap: IChartistEscapeMap;
-
- Pie: IChartistPieChart;
- Bar: IChartistBarChart;
- Line: IChartistLineChart;
-
- FixedScaleAxis: IFixedScaleAxisStatic;
- AutoScaleAxis: IAutoScaleAxisStatic;
- StepAxis: IStepAxisStatic;
-
- Svg: ChartistSvgStatic;
- Interpolation: ChartistInterpolationStatic;
-
- noop: Function;
-
- alphaNumerate(n: number): string;
- extend(target: Object, ...sources: Object[]): Object;
-
- replaceAll(str: string, subStr: string, newSubStr: string): string;
- ensureUnit(value: number, unit: string): string;
- quantity(input: string | number): Object;
-
- query(query: Node | string): Node;
- times(length: number): Array<any>;
- sum(previous: number, current: number): number;
- mapMultiply(factor: number): (num: number) => number;
- mapAdd(addend: number): (num: number) => number;
- serialMap(arr: Array<any>, cb: Function): Array<any>;
- roundWithPrecision(value: number, digits?: number): number;
-
- getMultiValue(value: any, dimension?: any): number; // this method is not documented, but it is used in the examples
-
- serialize(data: Object | string | number): string;
- deserialize(data: string): Object | string | number;
-
- createSvg(container: Node, width: string, height: string, className: string): Object; // TODO: Figure out if this is returning a ChartistSVGWrapper or an actual SVGElement
-
- plugins: any;
- }
-
- interface IChartistEscapeMap {
- [Key: string]: string;
- }
-
- interface IResponsiveOptionTuple<T extends IChartOptions> extends Array<string | T> {
- 0: string;
- 1: T;
- }
-
- // these have no other purpose than to help define the types that can be placed on
- // a line chart axisX
- // in the actual chartist library these are classes that project their options onto
- // the parent class
- interface IFixedScaleAxisStatic { }
- interface IAutoScaleAxisStatic { }
- interface IStepAxisStatic { }
-
- // data formats are not well documented on all the ways they can be passed to the constructors
- // this definition gives some intellisense, but does not protect the user from misuse
- // TODO: come in and tidy this up and make it fit better
- interface IChartistData {
- labels?: Array<string> | Array<number> | Array<Date>;
- series: Array<IChartistSeriesData> | Array<number> | Array<Array<number>>;
- }
-
- interface IChartistSeriesData {
- name?: string;
- value?: number;
- data?: Array<number>;
- className?: string;
- meta?: string; // I assume this could probably be a number as well?
- }
-
- interface IChartistBase<T extends IChartOptions> {
- container: any;
- data: IChartistData;
- defaultOptions: T;
- options: T;
- responsiveOptions: Array<IResponsiveOptionTuple<T>>;
-
- // this most likely doesn't need to be exposed to the user
- eventEmitter: any;
-
- supportsForeignObject: boolean;
- supportsAnimations: boolean;
- resizeListener: any;
-
- plugins?: Array<any>; // all of these plugins seem to be functions with options, but keeping type any for now
-
- update(data: Object, options?: T, override?: boolean): void;
- detach(): void;
-
- /**
- * Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop.
- *
- * @method on
- * @param event {string} Name of the event. Check the examples for supported events.
- * @param handler {Function} The handler function that will be called when an event with the given name was emitted. This function will receive a data argument which contains event data. See the example for more details.
- */
- on(event: string, handler: Function): IChartistBase<T>;
-
- /**
- * Use this function to un-register event handlers. If the handler function parameter is omitted all handlers for the given event will be un-registered.
- *
- * @method off
- * @param event {string} Name of the event for which a handler should be removed
- * @param handler {Function} The handler function that that was previously used to register a new event handler. This handler will be removed from the event handler list. If this parameter is omitted then all event handlers for the given event are removed from the list.
- */
- off(event: string, handler?: Function): IChartistBase<T>;
- }
-
- interface IChartistPieChart extends IChartistBase<IPieChartOptions> {
- new (target: any, data: IChartistData, options?: IPieChartOptions, responsiveOptions?: Array<IResponsiveOptionTuple<IPieChartOptions>>): IChartistPieChart;
- }
-
- interface IChartistLineChart extends IChartistBase<ILineChartOptions> {
- new (target: any, data: IChartistData, options?: ILineChartOptions, responsiveOptions?: Array<IResponsiveOptionTuple<ILineChartOptions>>): IChartistLineChart;
- }
-
- interface IChartistBarChart extends IChartistBase<IBarChartOptions> {
- new (target: any, data: IChartistData, options?: IBarChartOptions, responsiveOptions?: Array<IResponsiveOptionTuple<IBarChartOptions>>): IChartistBarChart;
- }
-
- interface IChartOptions {
- /**
- * If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
- */
- reverseData?: boolean;
-
- plugins?: Array<any>;
- }
-
- interface IPieChartOptions extends IChartOptions {
- /**
- * Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
- */
- width?: number | string;
-
- /**
- * Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
- */
- height?: number | string;
-
- /**
- * Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
- */
- chartPadding?: IChartPadding | number;
-
- /**
- * Override the class names that are used to generate the SVG structure of the chart
- */
- classNames?: IPieChartClasses;
-
- /**
- * The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise.
- */
- startAngle?: number;
-
- /**
- * An optional total you can specify. By specifying a total value, the sum of the values in the series must be this total in order to draw a full pie. You can use this parameter to draw only parts of a pie or gauge charts.
- */
- total?: number;
-
- /**
- * If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices.
- */
- donut?: boolean;
-
- /**
- * Specify the donut stroke width, currently done in javascript for convenience.
- */
- donutWidth?: number;
-
- /**
- * Specify if a label should be shown or not
- */
- showLabel?: boolean;
-
- /**
- * Label position offset from the standard position which is half distance of the radius. This value can be either positive or negative. Positive values will position the label away from the center.
- */
- labelOffset?: number;
-
- /**
- * This option can be set to 'inside', 'outside' or 'center'. Positioned with 'inside' the labels will be placed on half the distance of the radius to the border of the Pie by respecting the 'labelOffset'. The 'outside' option will place the labels at the border of the pie and 'center' will place the labels in the absolute center point of the chart. The 'center' option only makes sense in conjunction with the 'labelOffset' option.
- */
- labelPosition?: string;
-
- /**
- * An interpolation function for the label value
- */
- labelInterpolationFnc?: Function;
-
- /**
- * Label direction can be 'neutral', 'explode' or 'implode'. Default is 'neutral'. The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center.
- */
- labelDirection?: string;
- }
-
- interface IChartPadding {
- top?: number;
- right?: number;
- bottom?: number;
- left?: number;
- }
-
- interface IPieChartClasses {
- chartPie?: string;
- chartDonut?: string;
- series?: string;
- slicePie?: string;
- sliceDonut?: string;
- label?: string;
- }
-
- interface IBarChartOptions extends IChartOptions {
- axisX?: IBarChartAxis;
- axisY?: IBarChartAxis;
- width?: number | string;
- height?: number | string;
- high?: number;
- low?: number;
- ticks?: Array<string | number>;
- onlyInteger?: boolean;
- chartPadding?: IChartPadding;
- seriesBarDistance?: number;
-
- /**
- * If set to true this property will cause the series bars to be stacked and form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
- */
- stackBars?: boolean;
-
- horizontalBars?: boolean;
- distributeSeries?: boolean;
- }
-
- interface IBarChartAxis {
- offset?: number;
- position?: string;
- labelOffset?: {
- x?: number;
- y?: number;
- };
- showLabel?: boolean;
- showGrid?: boolean;
- labelInterpolationFnc?: Function;
- scaleMinSpace?: number;
- onlyInteger?: boolean;
- }
-
- interface IBarChartClasses {
- chart?: string;
- horizontalBars?: string;
- label?: string;
- labelGroup?: string;
- series?: string;
- bar?: string;
- grid?: string;
- gridGroup?: string;
- vertical?: string;
- horizontal?: string;
- start?: string;
- end?: string;
- }
-
- interface ILineChartOptions extends IChartOptions {
- axisX?: IChartistStepAxis | IChartistFixedScaleAxis | IChartistAutoScaleAxis;
- axisY?: IChartistStepAxis | IChartistFixedScaleAxis | IChartistAutoScaleAxis;
- width?: number | string;
- height?: number | string;
- showLine?: boolean;
- showPoint?: boolean;
- showArea?: boolean;
- areaBase?: number;
- lineSmooth?: Function | boolean;
- low?: number;
- high?: number;
- ticks?: Array<string | number>;
- chartPadding?: IChartPadding;
- fullWidth?: boolean;
- classNames?: ILineChartClasses;
- }
-
- interface ILineChartAxis {
- offset?: number;
- position?: string;
- labelOffset?: {
- x?: number;
- y?: number;
- };
- showLabel?: boolean;
- showGrid?: boolean;
- labelInterpolationFnc?: Function;
- }
-
- interface IChartistStepAxis extends ILineChartAxis {
- type?: IStepAxisStatic;
- ticks?: Array<string> | Array<number>;
- stretch?: boolean;
- }
-
- interface IChartistFixedScaleAxis extends ILineChartAxis {
- type?: IFixedScaleAxisStatic;
- high?: number;
- low?: number;
- divisor?: number;
- ticks?: Array<string> | Array<number>;
- }
-
- interface IChartistAutoScaleAxis extends ILineChartAxis {
- high?: number;
- low?: number;
- scaleMinSpace?: number;
- onlyInteger?: boolean;
- referenceValue?: number;
- type?: IAutoScaleAxisStatic;
- }
-
- interface ILineChartClasses {
- /**
- * Default is 'ct-chart-line'
- */
- chart?: string;
- label?: string;
- labelGroup?: string;
- series?: string;
- line?: string;
- point?: string;
- area?: string;
- grid?: string;
- gridGroup?: string;
- vertical?: string;
- horizontal?: string;
- start?: string;
- end?: string;
- }
-
- interface ChartistSvgStatic {
- new (name: HTMLElement | string, attributes: Object, className?: string, parent?: Object, insertFirst?: boolean): IChartistSvg;
-
- Easing: ChartistEasingStatic;
-
- /**
- * This method checks for support of a given SVG feature like Extensibility, SVG-animation or the like. Check http://www.w3.org/TR/SVG11/feature for a detailed list.
- */
- isSupported(feature: string): boolean;
- }
-
- interface IChartistSvg {
-
- /**
- * Set attributes on the current SVG element of the wrapper you're currently working on.
- */
- attr(attributes: Object | string, ns: string): Object | string;
-
- /**
- * Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily.
- */
- elem(name: string, attributes?: Object, className?: string, insertFirst?: boolean): IChartistSvg;
-
- /**
- * Returns the parent Chartist.SVG wrapper object
- */
- parent(): IChartistSvg;
-
- /**
- * This method returns a Chartist.Svg wrapper around the root SVG element of the current tree.
- */
- root(): IChartistSvg;
-
- /**
- * Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Chartist.Svg wrapper.
- */
- querySelector(selector: string): IChartistSvg;
-
- /**
- * Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Chartist.Svg.List wrapper.
- */
- querySelectorAll(selector: string): any; // this returns an svg wrapper list in the docs, need to see if that's just an array or a special list
-
- /**
- * This method creates a foreignObject (see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) that allows to embed HTML content into a SVG graphic. With the help of foreignObjects you can enable the usage of regular HTML elements inside of SVG where they are subject for SVG positioning and transformation but the Browser will use the HTML rendering capabilities for the containing DOM.
- */
- foreignObject(content: any, attributes?: Object, className?: string, insertFirst?: boolean): IChartistSvg;
-
- /**
- * This method adds a new text element to the current Chartist.Svg wrapper.
- */
- text(t: string): IChartistSvg;
-
- /**
- * This method will clear all child nodes of the current wrapper object.
- */
- empty(): IChartistSvg;
-
- /**
- * This method will cause the current wrapper to remove itself from its parent wrapper. Use this method if you'd like to get rid of an element in a given DOM structure.
- */
- remove(): IChartistSvg;
-
- /**
- * This method will replace the element with a new element that can be created outside of the current DOM.
- */
- replace(): IChartistSvg;
-
- /**
- * This method will append an element to the current element as a child.
- */
- append(element: IChartistSvg, insertFirst?: boolean): IChartistSvg;
-
- /**
- * Returns an array of class names that are attached to the current wrapper element. This method can not be chained further.
- */
- classes(): Array<string>;
-
- /**
- * Adds one or a space separated list of classes to the current element and ensures the classes are only existing once.
- *
- * @method addClass
- * @param names {string} A white space separated list of class names
- */
- addClass(names: string): IChartistSvg;
-
- /**
- * Removes one or a space separated list of classes from the current element.
- *
- * @method removeClass
- * @param names {string} A white space separated list of class names
- */
- removeClass(names: string): IChartistSvg;
-
- /**
- * Removes all classes from the current element.
- */
- removeAllClasses(): IChartistSvg;
-
- /**
- * Get element height with fallback to svg BoundingBox or parent container dimensions
- */
- height(): number;
-
- /**
- * The animate function lets you animate the current element with SMIL animations. You can add animations for multiple attributes at the same time by using an animation definition object. This object should contain SMIL animation attributes.
- */
- animate(animations: IChartistAnimations, guided: boolean, eventEmitter: Object): IChartistSvg;
-
- /**
- * "Safe" way to get property value from svg BoundingBox. This is a workaround. Firefox throws an NS_ERROR_FAILURE error if getBBox() is called on an invisible node.
- * THIS IS A WORKAROUND
- */
- getBBoxProperty(node: SVGElement, prop: string): string; // TODO: find a good example of this and add it to the tests, it might belong to static
- }
-
- interface IChartistAnimations {
- [Key: string]: IChartistAnimationOptions;
- }
-
- interface IChartistAnimationOptions {
- id?: string;
- dur: string | number;
- from: string | number;
- to: string | number;
- easing?: IChartistEasingDefinition | string;
- fill?: string;
- begin?: string;
- }
-
- interface IChartistEasingDefinition {
- 0: number;
- 1: number;
- 2: number;
- 3: number;
- }
-
- interface ChartistEasingStatic {
- easeInSine: IChartistEasingDefinition;
- easeOutSine: IChartistEasingDefinition;
- easeInOutSine: IChartistEasingDefinition;
- easeInQuad: IChartistEasingDefinition;
- easeOutQuad: IChartistEasingDefinition;
- easeInOutQuad: IChartistEasingDefinition;
- easeInCubic: IChartistEasingDefinition;
- easeOutCubic: IChartistEasingDefinition;
- easeInOutCubic: IChartistEasingDefinition;
- easeInQuart: IChartistEasingDefinition;
- easeOutQuart: IChartistEasingDefinition;
- easeInOutQuart: IChartistEasingDefinition;
- easeInQuint: IChartistEasingDefinition;
- easeOutQuint: IChartistEasingDefinition;
- easeInOutQuint: IChartistEasingDefinition;
- easeInExpo: IChartistEasingDefinition;
- easeOutExpo: IChartistEasingDefinition;
- easeInOutExpo: IChartistEasingDefinition;
- easeInCirc: IChartistEasingDefinition;
- easeOutCirc: IChartistEasingDefinition;
- easeInOutCirc: IChartistEasingDefinition;
- easeInBack: IChartistEasingDefinition;
- easeOutBack: IChartistEasingDefinition;
- easeInOutBack: IChartistEasingDefinition;
- }
-
- interface ChartistInterpolationStatic {
-
- /**
- * This interpolation function does not smooth the path and the result is only containing lines and no curves.
- */
- none(options?: IChartistInterpolationOptions): Function;
-
- /**
- * Simple smoothing creates horizontal handles that are positioned with a fraction of the length between two data points. You can use the divisor option to specify the amount of smoothing.
- */
- simple(options?: IChartistSimpleInterpolationOptions): Function;
-
- /**
- * Cardinal / Catmull-Rome spline interpolation is the default smoothing function in Chartist. It produces nice results where the splines will always meet the points. It produces some artifacts though when data values are increased or decreased rapidly. The line may not follow a very accurate path and if the line should be accurate this smoothing function does not produce the best results.
- */
- cardinal(options?: IChartistCardinalInterpolationOptions): Function;
-
- /**
- * Step interpolation will cause the line chart to move in steps rather than diagonal or smoothed lines. This interpolation will create additional points that will also be drawn when the showPoint option is enabled.
- */
- step(options?: IChartistStepInterpolationOptions): Function;
- }
-
- interface IChartistInterpolationOptions {
- fillHoles?: boolean;
- }
-
- interface IChartistSimpleInterpolationOptions extends IChartistInterpolationOptions {
- divisor?: number;
- }
-
- interface IChartistCardinalInterpolationOptions extends IChartistInterpolationOptions {
- tension?: number;
- }
-
- interface IChartistStepInterpolationOptions extends IChartistInterpolationOptions {
- postpone?: boolean;
- }
-}
+ namespace Chartist {
+
+ interface ChartistStatic {
+
+ /**
+ * Precision level used internally in Chartist for rounding. If you require more decimal places you can increase this number.
+ */
+ precision: number;
+
+ /**
+ * A map with characters to escape for strings to be safely used as attribute values.
+ */
+ escapingMap: IChartistEscapeMap;
+
+ Pie: IChartistPieChart;
+ Bar: IChartistBarChart;
+ Line: IChartistLineChart;
+
+ FixedScaleAxis: IFixedScaleAxisStatic;
+ AutoScaleAxis: IAutoScaleAxisStatic;
+ StepAxis: IStepAxisStatic;
+
+ Svg: ChartistSvgStatic;
+ Interpolation: ChartistInterpolationStatic;
+
+ noop: Function;
+
+ alphaNumerate(n: number): string;
+
+ extend(target: Object, ...sources: Object[]): Object;
+
+ replaceAll(str: string, subStr: string, newSubStr: string): string;
+
+ ensureUnit(value: number, unit: string): string;
+
+ quantity(input: string | number): Object;
+
+ query(query: Node | string): Node;
+
+ times(length: number): Array<any>;
+
+ sum(previous: number, current: number): number;
+
+ mapMultiply(factor: number): (num: number) => number;
+
+ mapAdd(addend: number): (num: number) => number;
+
+ serialMap(arr: Array<any>, cb: Function): Array<any>;
+
+ roundWithPrecision(value: number, digits?: number): number;
+
+ getMultiValue(value: any, dimension?: any): number; // this method is not documented, but it is used in the examples
+
+ serialize(data: Object | string | number): string;
+
+ deserialize(data: string): Object | string | number;
+
+ createSvg(container: Node, width: string, height: string, className: string): Object; // TODO: Figure out if this is returning a ChartistSVGWrapper or an actual SVGElement
+
+ plugins: any;
+ }
+
+
+ interface IChartistEscapeMap {
+ [Key: string]: string;
+ }
+
+
+ interface IResponsiveOptionTuple<T extends IChartOptions> extends Array<string | T> {
+ 0: string;
+ 1: T;
+ }
+
+
+ // these have no other purpose than to help define the types that can be placed on
+ // a line chart axisX
+ // in the actual chartist library these are classes that project their options onto
+ // the parent class
+ interface IFixedScaleAxisStatic {}
+
+
+ interface IAutoScaleAxisStatic {}
+
+
+ interface IStepAxisStatic {}
+
+
+ // data formats are not well documented on all the ways they can be passed to the constructors
+ // this definition gives some intellisense, but does not protect the user from misuse
+ // TODO: come in and tidy this up and make it fit better
+ interface IChartistData {
+ labels?: Array<string> | Array<number> | Array<Date>;
+ series: Array<IChartistSeriesData> | Array<number> | Array<Array<number>>;
+ }
+
+
+ interface IChartistSeriesData {
+ name?: string;
+ value?: number;
+ data?: Array<number>;
+ className?: string;
+ meta?: string; // I assume this could probably be a number as well?
+ }
+
+
+ interface IChartistBase<T extends IChartOptions> {
+ container: any;
+ data: IChartistData;
+ defaultOptions: T;
+ options: T;
+ responsiveOptions: Array<IResponsiveOptionTuple<T>>;
+
+ // this most likely doesn't need to be exposed to the user
+ eventEmitter: any;
+
+ supportsForeignObject: boolean;
+ supportsAnimations: boolean;
+ resizeListener: any;
+
+ plugins?: Array<any>; // all of these plugins seem to be functions with options, but keeping type any for now
+
+ update(data: Object, options?: T, override?: boolean): void;
+
+ detach(): void;
+
+ /**
+ * Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop.
+ *
+ * @method on
+ * @param event {string} Name of the event. Check the examples for supported events.
+ * @param handler {Function} The handler function that will be called when an event with the given name was emitted. This function will receive a data argument which contains event data. See the example for more details.
+ */
+ on(event: string, handler: Function): IChartistBase<T>;
+
+ /**
+ * Use this function to un-register event handlers. If the handler function parameter is omitted all handlers for the given event will be un-registered.
+ *
+ * @method off
+ * @param event {string} Name of the event for which a handler should be removed
+ * @param handler {Function} The handler function that that was previously used to register a new event handler. This handler will be removed from the event handler list. If this parameter is omitted then all event handlers for the given event are removed from the list.
+ */
+ off(event: string, handler?: Function): IChartistBase<T>;
+ }
+
+
+ interface IChartistPieChart extends IChartistBase<IPieChartOptions> {
+ new(target: any, data: IChartistData, options?: IPieChartOptions, responsiveOptions?: Array<IResponsiveOptionTuple<IPieChartOptions>>): IChartistPieChart;
+ }
+
+
+ interface IChartistLineChart extends IChartistBase<ILineChartOptions> {
+ new(target: any, data: IChartistData, options?: ILineChartOptions, responsiveOptions?: Array<IResponsiveOptionTuple<ILineChartOptions>>): IChartistLineChart;
+ }
+
+
+ interface IChartistBarChart extends IChartistBase<IBarChartOptions> {
+ new(target: any, data: IChartistData, options?: IBarChartOptions, responsiveOptions?: Array<IResponsiveOptionTuple<IBarChartOptions>>): IChartistBarChart;
+ }
+
-var Chartist: Chartist.ChartistStatic;
+ interface IChartOptions {
+ /**
+ * If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
+ */
+ reverseData?: boolean;
-export = Chartist;
+ plugins?: Array<any>;
+ }
+
+
+ interface IPieChartOptions extends IChartOptions {
+ /**
+ * Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
+ */
+ width?: number | string;
+
+ /**
+ * Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
+ */
+ height?: number | string;
+
+ /**
+ * Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
+ */
+ chartPadding?: IChartPadding | number;
+
+ /**
+ * Override the class names that are used to generate the SVG structure of the chart
+ */
+ classNames?: IPieChartClasses;
+
+ /**
+ * The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise.
+ */
+ startAngle?: number;
+
+ /**
+ * An optional total you can specify. By specifying a total value, the sum of the values in the series must be this total in order to draw a full pie. You can use this parameter to draw only parts of a pie or gauge charts.
+ */
+ total?: number;
+
+ /**
+ * If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices.
+ */
+ donut?: boolean;
+
+ /**
+ * Specify the donut stroke width, currently done in javascript for convenience.
+ */
+ donutWidth?: number;
+
+ /**
+ * Specify if a label should be shown or not
+ */
+ showLabel?: boolean;
+
+ /**
+ * Label position offset from the standard position which is half distance of the radius. This value can be either positive or negative. Positive values will position the label away from the center.
+ */
+ labelOffset?: number;
+
+ /**
+ * This option can be set to 'inside', 'outside' or 'center'. Positioned with 'inside' the labels will be placed on half the distance of the radius to the border of the Pie by respecting the 'labelOffset'. The 'outside' option will place the labels at the border of the pie and 'center' will place the labels in the absolute center point of the chart. The 'center' option only makes sense in conjunction with the 'labelOffset' option.
+ */
+ labelPosition?: string;
+
+ /**
+ * An interpolation function for the label value
+ */
+ labelInterpolationFnc?: Function;
+
+ /**
+ * Label direction can be 'neutral', 'explode' or 'implode'. Default is 'neutral'. The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center.
+ */
+ labelDirection?: string;
+ }
+
+
+ interface IChartPadding {
+ top?: number;
+ right?: number;
+ bottom?: number;
+ left?: number;
+ }
+
+
+ interface IPieChartClasses {
+ chartPie?: string;
+ chartDonut?: string;
+ series?: string;
+ slicePie?: string;
+ sliceDonut?: string;
+ label?: string;
+ }
+
+
+ interface IBarChartOptions extends IChartOptions {
+ axisX?: IBarChartAxis;
+ axisY?: IBarChartAxis;
+ width?: number | string;
+ height?: number | string;
+ high?: number;
+ low?: number;
+ ticks?: Array<string | number>;
+ onlyInteger?: boolean;
+ chartPadding?: IChartPadding;
+ seriesBarDistance?: number;
+
+ /**
+ * If set to true this property will cause the series bars to be stacked and form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
+ */
+ stackBars?: boolean;
+
+ horizontalBars?: boolean;
+ distributeSeries?: boolean;
+ }
+
+
+ interface IBarChartAxis {
+ offset?: number;
+ position?: string;
+ labelOffset?: {
+ x?: number; y?: number;
+ };
+ showLabel?: boolean;
+ showGrid?: boolean;
+ labelInterpolationFnc?: Function;
+ scaleMinSpace?: number;
+ onlyInteger?: boolean;
+ }
+
+
+ interface IBarChartClasses {
+ chart?: string;
+ horizontalBars?: string;
+ label?: string;
+ labelGroup?: string;
+ series?: string;
+ bar?: string;
+ grid?: string;
+ gridGroup?: string;
+ vertical?: string;
+ horizontal?: string;
+ start?: string;
+ end?: string;
+ }
+
+
+ interface ILineChartOptions extends IChartOptions {
+ axisX?: IChartistStepAxis | IChartistFixedScaleAxis | IChartistAutoScaleAxis;
+ axisY?: IChartistStepAxis | IChartistFixedScaleAxis | IChartistAutoScaleAxis;
+ width?: number | string;
+ height?: number | string;
+ showLine?: boolean;
+ showPoint?: boolean;
+ showArea?: boolean;
+ areaBase?: number;
+ lineSmooth?: Function | boolean;
+ low?: number;
+ high?: number;
+ ticks?: Array<string | number>;
+ chartPadding?: IChartPadding;
+ fullWidth?: boolean;
+ classNames?: ILineChartClasses;
+ }
+
+
+ interface ILineChartAxis {
+ offset?: number;
+ position?: string;
+ labelOffset?: {
+ x?: number; y?: number;
+ };
+ showLabel?: boolean;
+ showGrid?: boolean;
+ labelInterpolationFnc?: Function;
+ }
+
+
+ interface IChartistStepAxis extends ILineChartAxis {
+ type?: IStepAxisStatic;
+ ticks?: Array<string> | Array<number>;
+ stretch?: boolean;
+ }
+
+
+ interface IChartistFixedScaleAxis extends ILineChartAxis {
+ type?: IFixedScaleAxisStatic;
+ high?: number;
+ low?: number;
+ divisor?: number;
+ ticks?: Array<string> | Array<number>;
+ }
+
+
+ interface IChartistAutoScaleAxis extends ILineChartAxis {
+ high?: number;
+ low?: number;
+ scaleMinSpace?: number;
+ onlyInteger?: boolean;
+ referenceValue?: number;
+ type?: IAutoScaleAxisStatic;
+ }
+
+
+ interface ILineChartClasses {
+ /**
+ * Default is 'ct-chart-line'
+ */
+ chart?: string;
+ label?: string;
+ labelGroup?: string;
+ series?: string;
+ line?: string;
+ point?: string;
+ area?: string;
+ grid?: string;
+ gridGroup?: string;
+ vertical?: string;
+ horizontal?: string;
+ start?: string;
+ end?: string;
+ }
+
+
+ interface ChartistSvgStatic {
+ new(name: HTMLElement | string, attributes: Object, className?: string, parent?: Object, insertFirst?: boolean): IChartistSvg;
+
+ Easing: ChartistEasingStatic;
+
+ /**
+ * This method checks for support of a given SVG feature like Extensibility, SVG-animation or the like. Check http://www.w3.org/TR/SVG11/feature for a detailed list.
+ */
+ isSupported(feature: string): boolean;
+ }
+
+
+ interface IChartistSvg {
+
+ /**
+ * Set attributes on the current SVG element of the wrapper you're currently working on.
+ */
+ attr(attributes: Object | string, ns: string): Object | string;
+
+ /**
+ * Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily.
+ */
+ elem(name: string, attributes?: Object, className?: string, insertFirst?: boolean): IChartistSvg;
+
+ /**
+ * Returns the parent Chartist.SVG wrapper object
+ */
+ parent(): IChartistSvg;
+
+ /**
+ * This method returns a Chartist.Svg wrapper around the root SVG element of the current tree.
+ */
+ root(): IChartistSvg;
+
+ /**
+ * Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Chartist.Svg wrapper.
+ */
+ querySelector(selector: string): IChartistSvg;
+
+ /**
+ * Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Chartist.Svg.List wrapper.
+ */
+ querySelectorAll(selector: string): any; // this returns an svg wrapper list in the docs, need to see if that's just an array or a special list
+
+ /**
+ * This method creates a foreignObject (see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) that allows to embed HTML content into a SVG graphic. With the help of foreignObjects you can enable the usage of regular HTML elements inside of SVG where they are subject for SVG positioning and transformation but the Browser will use the HTML rendering capabilities for the containing DOM.
+ */
+ foreignObject(content: any, attributes?: Object, className?: string, insertFirst?: boolean): IChartistSvg;
+
+ /**
+ * This method adds a new text element to the current Chartist.Svg wrapper.
+ */
+ text(t: string): IChartistSvg;
+
+ /**
+ * This method will clear all child nodes of the current wrapper object.
+ */
+ empty(): IChartistSvg;
+
+ /**
+ * This method will cause the current wrapper to remove itself from its parent wrapper. Use this method if you'd like to get rid of an element in a given DOM structure.
+ */
+ remove(): IChartistSvg;
+
+ /**
+ * This method will replace the element with a new element that can be created outside of the current DOM.
+ */
+ replace(): IChartistSvg;
+
+ /**
+ * This method will append an element to the current element as a child.
+ */
+ append(element: IChartistSvg, insertFirst?: boolean): IChartistSvg;
+
+ /**
+ * Returns an array of class names that are attached to the current wrapper element. This method can not be chained further.
+ */
+ classes(): Array<string>;
+
+ /**
+ * Adds one or a space separated list of classes to the current element and ensures the classes are only existing once.
+ *
+ * @method addClass
+ * @param names {string} A white space separated list of class names
+ */
+ addClass(names: string): IChartistSvg;
+
+ /**
+ * Removes one or a space separated list of classes from the current element.
+ *
+ * @method removeClass
+ * @param names {string} A white space separated list of class names
+ */
+ removeClass(names: string): IChartistSvg;
+
+ /**
+ * Removes all classes from the current element.
+ */
+ removeAllClasses(): IChartistSvg;
+
+ /**
+ * Get element height with fallback to svg BoundingBox or parent container dimensions
+ */
+ height(): number;
+
+ /**
+ * The animate function lets you animate the current element with SMIL animations. You can add animations for multiple attributes at the same time by using an animation definition object. This object should contain SMIL animation attributes.
+ */
+ animate(animations: IChartistAnimations, guided: boolean, eventEmitter: Object): IChartistSvg;
+
+ /**
+ * "Safe" way to get property value from svg BoundingBox. This is a workaround. Firefox throws an NS_ERROR_FAILURE error if getBBox() is called on an invisible node.
+ * THIS IS A WORKAROUND
+ */
+ getBBoxProperty(node: SVGElement, prop: string): string; // TODO: find a good example of this and add it to the tests, it might belong to static
+ }
+
+
+ interface IChartistAnimations {
+ [Key: string]: IChartistAnimationOptions;
+ }
+
+
+ interface IChartistAnimationOptions {
+ id?: string;
+ dur: string | number;
+ from: string | number;
+ to: string | number;
+ easing?: IChartistEasingDefinition | string;
+ fill?: string;
+ begin?: string;
+ }
+
+
+ interface IChartistEasingDefinition {
+ 0: number;
+ 1: number;
+ 2: number;
+ 3: number;
+ }
+
+
+ interface ChartistEasingStatic {
+ easeInSine: IChartistEasingDefinition;
+ easeOutSine: IChartistEasingDefinition;
+ easeInOutSine: IChartistEasingDefinition;
+ easeInQuad: IChartistEasingDefinition;
+ easeOutQuad: IChartistEasingDefinition;
+ easeInOutQuad: IChartistEasingDefinition;
+ easeInCubic: IChartistEasingDefinition;
+ easeOutCubic: IChartistEasingDefinition;
+ easeInOutCubic: IChartistEasingDefinition;
+ easeInQuart: IChartistEasingDefinition;
+ easeOutQuart: IChartistEasingDefinition;
+ easeInOutQuart: IChartistEasingDefinition;
+ easeInQuint: IChartistEasingDefinition;
+ easeOutQuint: IChartistEasingDefinition;
+ easeInOutQuint: IChartistEasingDefinition;
+ easeInExpo: IChartistEasingDefinition;
+ easeOutExpo: IChartistEasingDefinition;
+ easeInOutExpo: IChartistEasingDefinition;
+ easeInCirc: IChartistEasingDefinition;
+ easeOutCirc: IChartistEasingDefinition;
+ easeInOutCirc: IChartistEasingDefinition;
+ easeInBack: IChartistEasingDefinition;
+ easeOutBack: IChartistEasingDefinition;
+ easeInOutBack: IChartistEasingDefinition;
+ }
+
+
+ interface ChartistInterpolationStatic {
+
+ /**
+ * This interpolation function does not smooth the path and the result is only containing lines and no curves.
+ */
+ none(options?: IChartistInterpolationOptions): Function;
+
+ /**
+ * Simple smoothing creates horizontal handles that are positioned with a fraction of the length between two data points. You can use the divisor option to specify the amount of smoothing.
+ */
+ simple(options?: IChartistSimpleInterpolationOptions): Function;
+
+ /**
+ * Cardinal / Catmull-Rome spline interpolation is the default smoothing function in Chartist. It produces nice results where the splines will always meet the points. It produces some artifacts though when data values are increased or decreased rapidly. The line may not follow a very accurate path and if the line should be accurate this smoothing function does not produce the best results.
+ */
+ cardinal(options?: IChartistCardinalInterpolationOptions): Function;
+
+ /**
+ * Step interpolation will cause the line chart to move in steps rather than diagonal or smoothed lines. This interpolation will create additional points that will also be drawn when the showPoint option is enabled.
+ */
+ step(options?: IChartistStepInterpolationOptions): Function;
+ }
+
+
+ interface IChartistInterpolationOptions {
+ fillHoles?: boolean;
+ }
+
+
+ interface IChartistSimpleInterpolationOptions extends IChartistInterpolationOptions {
+ divisor?: number;
+ }
+
+
+ interface IChartistCardinalInterpolationOptions extends IChartistInterpolationOptions {
+ tension?: number;
+ }
+
+
+ interface IChartistStepInterpolationOptions extends IChartistInterpolationOptions {
+ postpone?: boolean;
+ }
+ }
+
+ var Chartist: Chartist.ChartistStatic;
+
+ export = Chartist;
export as namespace Chartist;
}
diff --git a/AngularApp/typings/modules/chartist/typings.json b/AngularApp/typings/modules/chartist/typings.json
index 01d958e..f088961 100644
--- a/AngularApp/typings/modules/chartist/typings.json
+++ b/AngularApp/typings/modules/chartist/typings.json
@@ -1,8 +1,8 @@
{
- "resolution": "main",
- "tree": {
- "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/c968762595456c86498fc38c340d2b94acec00fd/chartist/index.d.ts",
- "raw": "registry:dt/chartist#0.9.5+20161212190028",
- "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/c968762595456c86498fc38c340d2b94acec00fd/chartist/index.d.ts"
- }
+ "resolution": "main",
+ "tree" : {
+ "src" : "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/c968762595456c86498fc38c340d2b94acec00fd/chartist/index.d.ts",
+ "raw" : "registry:dt/chartist#0.9.5+20161212190028",
+ "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/c968762595456c86498fc38c340d2b94acec00fd/chartist/index.d.ts"
+ }
}
--
GitLab