diff --git a/AngularApp/.idea/csv-editor.xml b/AngularApp/.idea/csv-editor.xml
new file mode 100644
index 0000000000000000000000000000000000000000..64a13bb3921c19eed2d59ef0320f70c3a20c4840
--- /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 ffc5d65f9f0f0e825688177425e526131aa84631..b65b72f8c4b282721a26dcdcc6a5e1e6d5e8f6a2 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 605d3d4976c29e27e6611cf8507f271556b7b223..6354d998b652bc4b6056265ca862a694fce2985f 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 056b4e9b86333ca21061ee60a8034b7459f74f69..43d90b407ec77cca2178287b5630ad3d35e112a9 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 121600e0377521a0004ad2e34dea84291a6f14a0..076c07bbb6d33e31086d8398465097c9d2e19664 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 1c5e1e5a44ea4887043440f2c6cae3e7f797cb6d..f73ed9240b3e0356e85f649e3fb1ff6e6daa4763 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 79be59ce69afbb8c5d28961a7f3323c32858e54a..0680b43f9c6ae05df91c576141f20ed411d07c7d 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 c740bcd745ed906aff93b9a3d3bdda3a2a2272b5..c4481a592596a366f395cb60734a2ce7a6d320ab 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 e716445fee3b7a33363774a63b0ce308edf4d683..c365285fc2b210d2e7c8c1f4690c3a1600aae91b 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 03932ba451693c3f0911bad4cc4f36f7553cbf02..d3ebaec1e780f60ab00db6692bf6c9a9ce2fd9b8 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 f2f01ac74e29c6a1b22faf4de3621b3b193753a1..2956d6532ff56151bdb07b6f51420f91345f2fa6 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 5f0470915a8fa2b80eaddf794c20ad64dd12374d..cc8b46fda1454c861631eba75c9113963e5dc900 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 4eda89a0843a9cbac203078841122d2231c4b30b..4dac07f267e9b46504543f1b45ae3fb6f55812b8 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 2ca6c45431d529bbf993d17231e1c7604bb6a480..5a10d7619e49e1a968045fac5b7da84425ef7c4c 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 6c9228a8f823aae5a18384599d5785de77994cd2..3d0b29b35831f60afa9a6e4a282076a087119f50 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 a38a6c7255dc04a70309d81678d5a2b9c21cdf1d..8a213a3d4e23516a107e0abbe8e601fc816f5ca9 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 9032ad2ca805666294c02daa74544bd75bec5438..44b0f1bef6137512d2eef749c3f671be25d6e418 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 bccc8852cfd40e7b069ca8d903972e7905324283..df2af1b70993d7042ddf44f60a6100dbd3ad6c42 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 efeea8b517a883b5214d6379aa5f5e3c4ee2663b..3d4ed6e938d62ace40ee77056e0f20af40b19c3d 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 f29709fd1f42214cfdeca486b3d7e335f99ec858..51a75aee2aadc8fc4fb7a2d06988dcc714be50d7 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 d5df9ccdda1a13929478e0d90a3e03dcfa9853b8..5d3f34de6dfc1b866df2374ede551904cde19246 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 86c66272cd3ef1ec12897ad6a0d504af7a710f3c..1ba7ca65abca87a095668d04c6d7a22aac2fab6c 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 9c996c371f1abfaf6c906b6ee96c9ed9b8612c4f..052d72c906cb00d36d4a7d5c8100498f8da86144 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 36a0b02c4b28d824eb13796007714cdbccc6eb48..e40e8ab86d1aede3c040b7bd4e1d4d9424c0addc 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 b7f5a869afa6cf0ffb17dcd50e29924d1d71cfd5..77e80cf3e0df315cd093657de7a3d50ab6041205 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 670c49769453c61a45e36ba5bab28001198c6c5a..3460075e4e8df639bd4c917d2a09a04b7f6a6147 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 3521f66c87b2bf838e89a64c51e8f31f522ef3e6..bdf7d3956c6b4a9ba74e5843b3fe1be27474e2d4 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 f9db7a0eb3f3811cc19438bb9ca9a45b43b04a05..e1a8d8fc4a7117b1935815972806f1d80c435b60 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 0cd7034b52c8b3a42b344f2c22f8066e2bffe202..6edc393a4f807445d10924b1b37a5bc8e3758adc 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 c6a1e48eac735ae9fb0f8f42ca090d852d2379ad..083a36ed849ae4110e840476de555999b667faa5 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 142b569c5552972909abfeeaf730f9098daac1d5..d47668928e6935f30194607e6514a0c7b0b8f6aa 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 a880666d4a9f761d049f77050ccee24d915770c6..bd2f78536d37a23b294587d607cb34905e15b08d 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 41b46123346ca03e4dd250cc3ae245768d6e2483..1b51b104b95bed39ae98d7e68f77cbad31053a59 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 60eabd9afdabc126f981fcd80c4cf10d9b994e29..0576c5db33195b73933412ba0f8d32b7e257f385 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 a4f97e7f2b5d9f1d71dd78f8547848f8ef643791..562557fd392c4caecc1e111b7d0ca28a8f692b66 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 7de173173a3b7582ab4d2f35cb75599631b49709..7a01897f2cc97e20424dc7166f8051dfe73eae92 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 4bece740f56a7b1d76faf2992100ec64e0499a0a..42a7b0c1e0de9e84eda80486daf707356a17b9d8 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 a04a8f984dcfad54cd25d6d7c808b1cc63c2c15d..3a6c868b2e052dd8711527936d856c17d31afe90 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 0147b0d89fd9d108914d0882c5667308d9eec134..f73f15c466ebb6bad45e431e520e7c4768b7f44e 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 711cb9b5876d3f5afaf83288090217e9cab76ddb..92d64df745fc6c718ba4cc49df0520fc55264081 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 f0cef1a341cadd0b4a69926472b46c17f6755d5b..d1b16a5d9a1b7a43824b6127f847a9f210262725 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 6fba1493e5f205c7f14f22c19f655190f0bf7518..4109bb756822f139b8f8fbf4192086bcbfeacb49 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 699fb9f4fe97851fb1a98801489785391f685545..ce6c86aac18547f2991fa39c7dd0955881ef6173 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 8ddd543aef43fac54fb941902e2dcc7865218e73..8a0f391067e8b54d27653b71d560ab4ffae8d644 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 ac01d8be607b05199e300b98ac7a1d42b94b02f3..465f3c35e8a4a984937d70f260f92f6d9575de23 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 b2439d6629e06a4130d62e478555cc1793f656dd..26e3923fd23d0aa55827b350b904e8dd0ef07b16 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 0408dd70b051fba8ef3ed1fa681e397fade8c05d..17032738cbfd85949bfa0484c847623c1fca66e6 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 7e834f205a8b3db7e914f77abd7e5225e2644ef1..453f8e06300628a8dc22d130a9cc10df28bdeddf 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 661f4cba0a56902affb03c71371a0dcd64848cb3..e629a4276c13f9d22cddabfe3ddba66588ecae0c 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 647af69c0e4742e55f6b67e29e163c3f014ff354..e41473327a85ed87fb8f6c3589d4bd00217696fa 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 e683b969b7fd0e49f1caf5ac88501a33ced6b852..a725f1d1886f3c49cc97241016b38315722fe554 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 bdc2bb044a312c8c6f3fc70c8d0ffb253ad0045e..22ea1d91fdaae4b449015552230cc3734a018f50 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 974f26a8960fb4ee321d98f917a1d52198b5f588..b6a30c4e563de879600fc2e353957d629b9647fd 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 e6644f23b82750bec89d07966dee8dc917af09dc..2e5599b396f19e1b4590151e151f6dca34760077 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 6aae7064199ba0705403690118bf41773b406a72..6405c28d24eb4430b7f90128bf24b84c95e9e099 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 489a4d783cf99ccbb1d990f32b0df72374ac2425..b9e2a50f8f9adb1fffbad200272261f3bc60dfe2 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 7f49c8ce193d989c410dd5c3cc697c1a91d5716d..5768bfc6874ca0f0427ca12059b584ee4411fd48 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 d432d319f3c3f0d92f87e0f2c7ada0df865d8a09..19682dbc6286a8520b2a31f61b1039a114d7184c 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 3f289b499cb4a651fe5d61dba04937f7478d1eda..2338ee9858772dc9e2ecd9314ae35043d197c810 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 42575ae021e00e763eca2ec18623ce09252db7b4..f52da50b1f81c1ca60a2b2cbf546a4e2ecba8c29 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 219d42cfa1e9b4d35ee4b2a83ae6c8c7fc626853..d6dcc7a96a448642ff2b41e9080ee74e7de67aee 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 7224ac287249033a135224c9e95f05c09741fd86..f5165553206805e15b1ec23e94804043c4706be5 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 9eb7ddc3644bd3ec9e34371c63532351e68507a4..55a2616caf458964b4737834d43c87efd633be41 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 0d77d0ea56b4c437c37cf5c2b08f4d84bf4b61a1..1c06e9d8b4fff14c664271b34d3af954b8257d65 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 e4937f21c0f777974fac05ac868ee70f76b79e28..dd5ed7e75450b1d608898c79b658c6db380bdd2e 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 0bd4e2f1bc9979f5211768621ed6fe1ff92d1d8d..a1dcd629d51a69efacb3b80677f3794ddc98f76e 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 63761efd6f7cc8a50f96719cd185f895617b8365..3ab715e1d904b82e7336f4ca743ad5f824d2dff2 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 4a27e211582abf2ffba065dc25bb23bf96c4475a..6422061797f86107c0cbe3afb3f2ddd5f3df05c0 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 c660aa2455465cf9e1743a7f07c54a6ce1500d07..8142c09ad68462566f91e250bdd66edc0cddb2c2 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 4b41450ad68de2da23398247d4477329e1f180f4..4e5fb93941490b91960b0dd647242f4ca8b42feb 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 4f73cb3a505d59e22ae813deaf07041d49c3eab6..769b08af79ca4044c89aa368ac0671eb0a581740 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 05bb6e9d36c7d55d12229cb57821a15fd5c1a33a..efa1f1854aaf7605bf56f335846b457539761064 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 08a170beaca2b04b3fb170fa116d19af8e41bcea..f0fb8cb4282a62429166d1d26fbd71f23b2bee45 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 c30a87f9ce4d49e14dc8b7a4020b7d202a109c0e..17faa3c858f96d905823864fac56a279be69ef6d 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 2d3da29c3b3f155e7c4193f3a1cf925a35d29457..9ec1a19d0a2700368cd317cafdddc0a4c14b46ab 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 a0c44a135e94a1641aafde5aa293bd4963d5e573..fd31b5ef180c8580595687215a0d9620beec4888 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 f39dfb0bee3e3b640beeaa0caff807717b169a39..1b0f662342e0886ed0d9b40aafd53deb7158b583 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 d5e1607180b49eb4fc7394c1083f7ca761411941..2647b2751891e21fd1d96aca4f7803e4fffd4a8e 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 a46c698bea82412c30dd79c7209ed71c609870cd..f88d616b0581b2ac3309e5f8fe2ddf64c7fc31d7 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 5445fe38351ceab91e530f95c3598714ef3b1050..635196e452e50db8bb71a91ea9ed864471d11f1f 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 e150268c28dacf2ecc01000c37b8fdbc424ea43b..0c4f7d33ed5ceb852ea8547e0fffa7bf52f5c459 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 98a2285520881210a2e2dee1efefeba67c4629bc..9b0c795fded3fc24aa1a9d837d2d0dec93302791 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 6391cb423531fd16db06d9dd6a18240e2bc505b0..464a752b9c36a2c2a4841c1e2df208b32c416738 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 8c3a4187c712bba888a3ce3f09706e797c5acf84..bd0f3d2a87bd056a01b60f25b33b0cf315730e4e 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 3c38fcd7b839264b68726c794963e6990982fcc0..fd165bdb0573a8f19991957f245812bda34ee97c 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 9fc08ccd1f878327faf708cdde4d9068e352087d..8d2212a8e076f0134b578113d95d667aa49ac8d6 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 32968eb7d548423e93206e7a4adcaa9b7d2ac306..ef121bf164e2e062ed38d679341b9d140a6ad337 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 95a2b736f08e87cff8dd67aca4230098170af09a..5912d74d3ca2bd80caf7e83ed3245fb51531565c 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 416fc0b1b67b0896fbec03b37c6524654ce7cfe2..f7e5b1f73713bf195e7283982508eb1e00a86bb4 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 9154fd152ea4a66c3bedc6cc3b8fd88b19bad9c5..81f9b2bbfe15d42a34f4cfd7d47d571f731c7a05 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 23666e012dc4dd180e0a4436dc113496aebecd43..2969642238d21f6a3d643845c7b1e03dc8374dfa 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 b3bf2e1773254fc280c9d8d1f8b385f8c5319d44..ede56d98a5f1062bc1c4269cd40b1d3d3ce87af4 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 059a89bdd0415436bb4d1108154a36f91dd1ab3d..53605e4395bfa3ca8b559c5b544baf537f5895a4 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 3756faf7080d07cc85148f4679943a5e212a5f6b..d2add69dbd68352698fe7ff4f118264fcf86ce2c 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 e5e7ff5c16e8d689edccdfe2b75255f0dd55f5f6..f2ef5a89cb4f5b60269e852044fd35a7c58ef6fd 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 224902e2d4d14a93c0888ea01744e64fffdbfa58..97b100c147bf94cb13abac2ef8aedfc2137679f7 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 da32b745dce6e1fe55d96c89280ead9619da1c5d..8d8b32c9e9f4b11dd0355911c533600bc0ca5a3a 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 e81ca893802eceaa8b9c1f048bc002c8edfeb0b8..40b4af17ff84b053227124f2b33a6d79a09c7f9d 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 d4d744f9835c2d9d8ceaf70f0bfffc636cf4b1cf..247c26aaa4b4d41a355af9aea4fbbbee5432571a 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 e874d757e4b940c3549acac4e4a0894fec7744ce..442d8312348c32c9de01ecb370139ed124f25563 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 18ba5816a5097e6d4c187fd18993a4a913690c58..180ace9aff1d8bc593ef2ff8531912464d941753 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 f54d7d8ee0a97b965f82762b67de9331858f4311..c4e93a0a97886ec2b8d4f1b66a536f2a03530f0e 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 7693fb28bf3b0b68abc9535578c449c9bca22791..a765620417271b9e6f354b5fdfb23c4155eae3b6 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 dbae094635cd990337ac258f7f772ae894706718..89ba562af50e4ebc7f5f0ba7f6d6415a6c4d8221 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 5f1da1e5064216ec278e20cffceb252eb66f7ba2..d362f0f12d8f2c0b316e995548664c2a622603e5 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 d6d8bdc00c223c941f455158345414e8f74446f9..553243d6bc116cff96dfdd4e5d611e408da5d26e 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 58a626347531b5cba0faa6034317019638e77853..0fa0e895ceab77f0a6d6975100a378fc5b6b4d65 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 4a9a39cfebf417ae70b4c2c3a89e19d77b97dd8f..bc7b20586484cd674e18ef9893f0745f6b308a37 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 b917123e58410190ac3528caa34d5d077f6fb16d..6c9c39cc4d98e76f80185fc42f38bb7a5d695943 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 af8e1bc5d843dacb86c1015266ed22a818a58b9c..3db53f416db4276839a5b895304cc37f6face203 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 fc51fda66ecb0136d2a323b038baa2fc30d56383..69cafac563d1049b089cda8f7d21f1332fb77879 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 db0c1986a12e0863b93a35fd6597866816d7c1fe..5af6f4b0b3627ec57687c0b48f548626120c4c00 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 d6f364473d3413acc135c2436675a78221688f02..56bbd55a4cb48a316ec5b6538aa0b2537bd8e54f 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 d30b021f67ddbbe23ec75bca44a68e5ea1099ca2..114356c83da4633dadcc7cbb50c0bda27b475920 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 d9f1ed9987296a4c21d68bb644de494437a88a65..c8c4f45484f790f7c0690112ea3387101b868288 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 3cf5ca1bd7399291671a95d98fb1714fe6b6f959..a0ffd007d6a531b9028cc9c220da45bb49d04601 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 e0324c020ff2bd7c1fe19c0922dabf73769dcf60..b04b86e43b5d244f01d8a53cc0d14199b2471f6f 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 54da3c4a42b0309102f5fc6e00b3ce87071eba90..74dd6b2d2a6dda93817377c3bbfaf87a8b4e8f9d 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 2054a58f878344bbe438b36b7c60dd6847097eeb..31d15a291f7654382b4d09d16644f4ca077398a1 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 f02acf642cbb4ca7df72ac9bdc2715466a8f46a6..015a8bf94b0c67eebbe0da355a07f73b3b354563 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 e55ec27af86b02290a335ad3a42b66160a13ee30..4d1340635e594e1aebf4d164e429ace54d4f800b 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 ef1f786c8c40638bea8716bca74151a5a5dab3a1..f07fcedf80275e58427baa2db9e597d992b4a77f 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 a7b9212a58fd2ae361b19b77b894ec33d0512a02..a0cfadd6d79b8480cef3c99818bfe5ed0b71dc86 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 053c915a68bb3fdc6e5b9a27bb5bf905a9a10a74..37a45473c6e6b1151b335c21ac010201681e2491 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 07dad33be5d60ef5edb65a1c2b612ff5c87526a6..fe4260296f57bf847b0cb56b64d4b827fe85f96b 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 6a6aa39324b9cf6d57614e82a42dd33fdfca9911..edc8e662a210e218edaf0d887ebac09fc91bb99c 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 e94196df960aadcb3e031b701703af19df7ae94e..364f94f59470612a59fe4d7d1b956bd1fefcb5a0 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 3861d2ff0131a4a27b49068ae175f24af24e08e6..19d98a90161dd82d3a9e8bebf6cca607d6b44dc2 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 0faa22a4386e4b75dd6780b1c9e60d0b79612545..6d5ee8b83724f4e049c737cc3835614a4442f63c 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 3612073bc31cd4c1f5d6cbb00318521e9a61bd8a..5d0833162027e2147e99e72a1a94bb7d3cb62843 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 b7f639aecac5c903f5449c7d14846f92b0a9b342..6f30aa4455eb3d73152c3f6cfa38d67628ad6b62 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 79a9cf2ea24a9fe1ec0aa7516b7bb01aab4fa223..d33827f066fa9a2b73789b542ec0f90ce5983dd4 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 deb9e171ac74e1b8756fae9bddea088122fdd6ef..0c1edb47a8121eea7609c851c98b392c3a5c007a 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 7982882b96cd3bdff41a4e03d73d3bf36fd809ba..3d6a167fbe31378ca50c50f0b83af807d909454b 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 9bf72267e9b1ada4f46ff6a7729ef5f272f7c947..79a10fea06a42d45a11d05c812ecf4ee6d6b46ce 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 d2fc80608cd5e513812dc99321ff09e4fab885f3..4168005626ce6e71aeddfa3b41153c314ef65375 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 15458edbaa9ffd3cc0c263a079d0bc20cb2d1fc1..b49b726f54a997c22c7e2b0b3bcf9369d668097c 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 ef5c7bd620579296a1290b1a0b04c96d72e57bc6..769f8bf9b8049e26ad20e32b391987f7f8d40f8a 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 40955e8e1e61671dbb5c9d749f337193725bd288..cb7adba2aa7fac21933dbf046ff6edbf5f683172 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 bb84fcf3cb7a5b556d4fb48f4441496e5706c9c4..421b9735e5b815882a9a0de005e01e099330f3b7 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 cf2451d2ad82f8bd57a01f0ff9b415cd8db1a455..2ef52be52bc4d7e1dcf5793763698976cb42f544 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 01d958eab0ff421d587b8e5348be09f91b04f2f1..f088961447e6fc9787be62b22b95d3a1ea666588 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"
+ }
}