Id: {{id}}
5 |ShowDetails: {{showDetails}}
6 | 7 |
8 |
9 |
12 |
4 |
21 |
--------------------------------------------------------------------------------
/projects/external-dashboard-tile/src/app/external-dashboard-tile/external-dashboard-tile.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
19 |
20 |
7 |
9 |
10 | Cancelling your Flight
8 |
11 |
17 |
18 | 12 | This is a dummy dialog to cancel your flight # {{id}}. But dummy or not, this will become very expensive. 13 |
14 | 15 | 16 |
2 |
--------------------------------------------------------------------------------
/src/app/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
1 | import { LazyFlightCancellingService } from './../flight-cancelling/lazy-flight-cancelling.service';
2 | import { Component, OnInit, SystemJsNgModuleLoader, Compiler, NgModuleFactoryLoader, Injector } from '@angular/core';
3 | import { FlightCancellingService } from '../flight-cancelling/flight-cancelling.service';
4 |
5 | @Component({
6 | selector: 'sidebar-cmp',
7 | templateUrl: 'sidebar.component.html'
8 | })
9 | export class SidebarComponent {
10 | constructor(private service: FlightCancellingService) {
11 | }
12 |
13 | showDialog(): void {
14 | this.service.show(4712);
15 | }
16 |
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/flight-booking/flight-edit/flight-edit.component.ts:
--------------------------------------------------------------------------------
1 | import { ActivatedRoute } from '@angular/router';
2 | import { Component, OnInit } from '@angular/core';
3 |
4 | @Component({
5 | selector: 'app-flight-edit',
6 | templateUrl: './flight-edit.component.html',
7 | styleUrls: ['./flight-edit.component.css']
8 | })
9 | export class FlightEditComponent implements OnInit {
10 |
11 | id: string;
12 | showDetails: string;
13 |
14 | constructor(private route: ActivatedRoute) { }
15 |
16 | ngOnInit() {
17 | this.route.params.subscribe(p => {
18 | this.id = p['id'];
19 | this.showDetails = p['showDetails'];
20 | })
21 | }
22 |
23 | }
24 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_labels.scss:
--------------------------------------------------------------------------------
1 | @mixin label-style(){
2 | padding: $padding-label-vertical $padding-label-horizontal;
3 | border: 1px solid $default-color;
4 | border-radius: $border-radius-small;
5 | color: $default-color;
6 | font-weight: $font-weight-semi;
7 | font-size: $font-size-small;
8 | text-transform: uppercase;
9 | display: inline-block;
10 | vertical-align: middle;
11 | }
12 |
13 | @mixin label-color($color){
14 | border-color: $color;
15 | color: $color;
16 | }
17 | @mixin label-color-fill($color){
18 | border-color: $color;
19 | color: $white-color;
20 | background-color: $color;
21 | }
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | import { ɵrenderComponent as renderComponent } from '@angular/core';
8 | import { AppComponent } from './app/app.component';
9 |
10 |
11 | if (environment.production) {
12 | enableProdMode();
13 | }
14 |
15 |
16 |
17 | platformBrowserDynamic().bootstrapModule(AppModule);
18 |
19 | // renderComponent(AppComponent)
20 | /*
21 | // "angularCompilerOptions": {
22 | // "enableIvy": true
23 | // }
24 |
25 | */
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 |
8 | # dependencies
9 | /node_modules
10 |
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 |
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 |
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 |
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 |
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 | "cSpell.enabledLanguageIds": [
4 | "asciidoc",
5 | "c",
6 | "cpp",
7 | "csharp",
8 | "css",
9 | "go",
10 | "handlebars",
11 | "html",
12 | "jade",
13 | "javascript",
14 | "javascriptreact",
15 | "json",
16 | "latex",
17 | "less",
18 | "markdown",
19 | "php",
20 | "plaintext",
21 | "pub",
22 | "python",
23 | "restructuredtext",
24 | "rust",
25 | "scss",
26 | "text",
27 | "typescriptreact",
28 | "yml"
29 | ]
30 | }
--------------------------------------------------------------------------------
/projects/external-dashboard-tile/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * In development mode, to ignore zone related error stack frames such as
11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 | * import the following file, but please comment it out in production mode
13 | * because it will have performance impact when throw error
14 | */
15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
16 |
--------------------------------------------------------------------------------
/src/app/flight-booking/flight-booking.routes.ts:
--------------------------------------------------------------------------------
1 | import { FlightEditComponent } from './flight-edit/flight-edit.component';
2 | import { PassengerSearchComponent } from './passenger-search/passenger-search.component';
3 | import { FlightSearchComponent } from './flight-search/flight-search.component';
4 | import { Routes } from '@angular/router';
5 |
6 | export const FLIGHT_BOOKING_ROUTES: Routes = [
7 | {
8 | // flight-booking/flight-search
9 | path: 'flight-search',
10 | component: FlightSearchComponent
11 | },
12 | {
13 | path: 'passenger-search',
14 | component: PassengerSearchComponent
15 | },
16 | {
17 | path: 'flight-edit/:id',
18 | component: FlightEditComponent
19 | }
20 | ];
--------------------------------------------------------------------------------
/projects/external-dashboard-tile/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/src/app/dashboard/dashboard-tile/dashboard-tile.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 |
3 | @Component({
4 | // selector: 'app-dashboard-tile',
5 | templateUrl: './dashboard-tile.component.html',
6 | styleUrls: ['./dashboard-tile.component.css']
7 | })
8 | export class DashboardTileComponent implements OnInit {
9 | @Input() a: number;
10 | @Input() b: number;
11 | @Input() c: number;
12 |
13 | data: object = {};
14 |
15 | ngOnInit() {
16 | this.data = [
17 | {
18 | name: 'a',
19 | value: this.a
20 | },
21 | {
22 | name: 'b',
23 | value: this.b
24 | },
25 | {
26 | name: 'c',
27 | value: this.c
28 | }
29 | ];
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/app/flight-cancelling/flight-cancelling.token.ts:
--------------------------------------------------------------------------------
1 | import { FlightCancellingService } from './flight-cancelling.service';
2 | import { FlightService } from './../flight-booking/flight.service';
3 | import { InjectionToken, NgModuleFactoryLoader, inject, Injector } from "@angular/core";
4 | import { SimpleFlightCancellingService } from "./simple-flight-cancelling.service";
5 | import { LazyFlightCancellingService } from "./lazy-flight-cancelling.service";
6 |
7 | export const FLIGHT_CANCELLING_SERVICE =
8 | new InjectionToken('FLIGHT_CANCELLING_SERVICE', {
9 | providedIn: 'root',
10 | factory: () => new LazyFlightCancellingService(null, null)
11 | });
12 |
13 | let x = inject(FlightCancellingService);
14 |
15 | inject
--------------------------------------------------------------------------------
/src/app/flight-booking/flight-card/flight-card.component.ts:
--------------------------------------------------------------------------------
1 | import { Flight } from './../../entities/flight';
2 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
3 |
4 | @Component({
5 | selector: 'flight-card',
6 | templateUrl: './flight-card.component.html',
7 | styleUrls: ['./flight-card.component.css']
8 | })
9 | export class FlightCardComponent implements OnInit {
10 |
11 | @Input() item: Flight;
12 | @Input() selected: boolean;
13 | @Output() selectedChange = new EventEmitter
3 |
5 | External
4 |
6 |
24 |
7 |
8 |
9 |
22 |
23 | 8 |
| A | 11 |{{a}} | 12 |
| B | 15 |{{b}} | 16 |
| C | 19 |{{c}} | 20 |
24 |
25 |
26 |
4 |
5 |
30 |
--------------------------------------------------------------------------------
/projects/external-dashboard-tile/src/app/external-dashboard-tile/external-dashboard-tile.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 | import { By } from '@angular/platform-browser';
4 | import { DebugElement } from '@angular/core';
5 |
6 | import { ExternalDashboardTileComponent } from './external-dashboard-tile.component';
7 |
8 | describe('ExternalDashboardTileComponent', () => {
9 | let component: ExternalDashboardTileComponent;
10 | let fixture: ComponentFixture
6 |
8 | {{item.from}} - {{item.to}}
7 |
9 |
29 | Flight-No.: #{{item.id}}
10 |Date: {{item.date | date:'dd.MM.yyyy HH:mm'}}
11 | 12 |13 | 18 | 23 | 24 | Edit 25 | 26 |
27 | 28 |
3 |
56 |
--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ExternalDashboardTileService } from './external-dashboard-tile.service';
3 | import { LazyDashboardTileService } from './lazy-dashboard-tile.service';
4 |
5 | @Component({
6 | selector: 'app-dashboard',
7 | templateUrl: './dashboard.component.html',
8 | styleUrls: ['./dashboard.component.css']
9 | })
10 | export class DashboardComponent implements OnInit {
11 |
12 | constructor(
13 | private lazyService: LazyDashboardTileService,
14 | private externalService: ExternalDashboardTileService
15 | ) { }
16 |
17 | ngOnInit() {
18 | }
19 |
20 | getData(): [number, number, number] {
21 | return [
22 | Math.round(Math.random() * 100),
23 | Math.round(Math.random() * 100),
24 | Math.round(Math.random() * 100)
25 | ];
26 | }
27 |
28 | addDefault(): void {
29 | this.add('dashboard-tile');
30 | }
31 |
32 | addLazy(): void {
33 | this.lazyService.load().then(_ => {
34 | this.add('lazy-dashboard-tile');
35 | });
36 | }
37 |
38 | addExternal(): void {
39 | this.externalService.load();
40 | this.add('external-dashboard-tile');
41 | }
42 |
43 | add(tileKind: string): void {
44 |
45 | const data = this.getData();
46 |
47 | const tile = document.createElement(tileKind);
48 | tile.setAttribute('class', 'col-lg-4 col-md-3 col-sm-2');
49 | tile.setAttribute('a', '' + data[0]);
50 | tile.setAttribute('b', '' + data[1]);
51 | tile.setAttribute('c', '' + data[2]);
52 |
53 | const content = document.getElementById('content');
54 | content.appendChild(tile);
55 |
56 | }
57 |
58 | }
59 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { DashboardModule } from './dashboard/dashboard.module';
2 | import { FlightCancellingModule } from './flight-cancelling/flight-cancelling.module';
3 | import { APP_ROUTES } from './app.routes';
4 | import { FlightBookingModule } from './flight-booking/flight-booking.module';
5 | import { NavbarComponent } from './navbar/navbar.component';
6 | import { SidebarComponent } from './sidebar/sidebar.component';
7 | import { HttpClientModule } from '@angular/common/http';
8 | import { BrowserModule } from '@angular/platform-browser';
9 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NgModuleFactoryLoader, SystemJsNgModuleLoader } from '@angular/core';
10 | import { FormsModule } from '@angular/forms';
11 | import { AppComponent } from './app.component';
12 | import { HomeComponent } from './home/home.component';
13 | import { RouterModule, PreloadAllModules } from '@angular/router';
14 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
15 | @NgModule({
16 | imports: [
17 | BrowserModule,
18 | FormsModule,
19 | HttpClientModule,
20 | DashboardModule,
21 | BrowserAnimationsModule,
22 |
23 | // FlightCancellingModule,
24 | // FlightBookingModule, // Verweise auf lazy Module entfernen
25 |
26 | RouterModule.forRoot(APP_ROUTES, {
27 | preloadingStrategy: PreloadAllModules
28 | })
29 | ],
30 | declarations: [
31 | AppComponent,
32 | SidebarComponent,
33 | NavbarComponent,
34 | HomeComponent
35 | ],
36 | schemas: [
37 | CUSTOM_ELEMENTS_SCHEMA
38 | ],
39 | providers: [
40 |
41 | ],
42 | bootstrap: [
43 | AppComponent
44 | ]
45 | })
46 | export class AppModule {
47 | }
48 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_tables.scss:
--------------------------------------------------------------------------------
1 | .table{
2 | thead,
3 | tbody,
4 | tfoot{
5 | tr > th,
6 | tr > td{
7 | border-top: 1px solid $table-line-color;
8 | }
9 | }
10 | > thead > tr > th{
11 | border-bottom-width: 0;
12 | font-size: $font-size-h5;
13 | font-weight: $font-weight-light;
14 | }
15 |
16 | .radio,
17 | .checkbox{
18 | margin-top: 0;
19 | margin-bottom: 22px;
20 | padding: 0;
21 | width: 15px;
22 | }
23 | > thead > tr > th,
24 | > tbody > tr > th,
25 | > tfoot > tr > th,
26 | > thead > tr > td,
27 | > tbody > tr > td,
28 | > tfoot > tr > td{
29 | padding: 12px;
30 | vertical-align: middle;
31 | }
32 |
33 | .th-description{
34 | max-width: 150px;
35 | }
36 | .td-price{
37 | font-size: 26px;
38 | font-weight: $font-weight-light;
39 | margin-top: 5px;
40 | text-align: right;
41 | }
42 | .td-total{
43 | font-weight: $font-weight-bold;
44 | font-size: $font-size-h5;
45 | padding-top: 20px;
46 | text-align: right;
47 | }
48 |
49 | .td-actions .btn{
50 |
51 | &.btn-sm,
52 | &.btn-xs{
53 | padding-left: 3px;
54 | padding-right: 3px;
55 | }
56 | }
57 |
58 | > tbody > tr{
59 | position: relative;
60 | }
61 | }
62 | .table-striped{
63 | tbody > tr:nth-of-type(2n+1) {
64 | background-color: #fff;
65 | }
66 | tbody > tr:nth-of-type(2n) {
67 | background-color: $pale-bg;
68 | }
69 | > thead > tr > th,
70 | > tbody > tr > th,
71 | > tfoot > tr > th,
72 | > thead > tr > td,
73 | > tbody > tr > td,
74 | > tfoot > tr > td{
75 | padding: 15px 8px;
76 | }
77 | }
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_buttons.scss:
--------------------------------------------------------------------------------
1 | // Mixin for generating new styles
2 | @mixin btn-styles($btn-color, $btn-states-color) {
3 | border-color: $btn-color;
4 | color: $btn-color;
5 |
6 | &:hover,
7 | &:focus,
8 | &:active,
9 | &.active,
10 | .open > &.dropdown-toggle {
11 | background-color: $btn-color;
12 | color: $fill-font-color;
13 | border-color: $btn-color;
14 | .caret{
15 | border-top-color: $fill-font-color;
16 | }
17 | }
18 |
19 | &.disabled,
20 | &:disabled,
21 | &[disabled],
22 | fieldset[disabled] & {
23 | &,
24 | &:hover,
25 | &:focus,
26 | &.focus,
27 | &:active,
28 | &.active {
29 | background-color: $transparent-bg;
30 | border-color: $btn-color;
31 | }
32 | }
33 |
34 |
35 | &.btn-fill {
36 | color: $white-color;
37 | background-color: $btn-color;
38 | @include opacity(1);
39 |
40 | &:hover,
41 | &:focus,
42 | &:active,
43 | &.active,
44 | .open > &.dropdown-toggle{
45 | background-color: $btn-states-color;
46 | color: $white-color;
47 | border-color: $btn-states-color;
48 | }
49 |
50 | .caret{
51 | border-top-color: $white-color;
52 | }
53 | }
54 |
55 | &.btn-simple {
56 | &:hover,
57 | &:focus,
58 | &:active,
59 | &.active,
60 | .open > &.dropdown-toggle{
61 | background-color: $transparent-bg;
62 | color: $btn-states-color;
63 | }
64 |
65 | .caret{
66 | border-top-color: $white-color;
67 | }
68 | }
69 |
70 | .caret{
71 | border-top-color: $btn-color;
72 | }
73 | }
74 |
75 |
76 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border, $line-height){
77 | font-size: $font-size;
78 | border-radius: $border;
79 | padding: $padding-vertical $padding-horizontal;
80 |
81 | &.btn-simple{
82 | padding: $padding-vertical + 2 $padding-horizontal;
83 | }
84 |
85 | }
--------------------------------------------------------------------------------
/src/app/navbar/navbar.component.html:
--------------------------------------------------------------------------------
1 |
46 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dashboard",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve --project dashboard -o",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e",
11 | "start:ce": "ng serve --project external-dashboard-tile -o",
12 | "build:ce": "npm run bundle:ce && npm run copy:ce",
13 | "copy:ce": "cpr dist/external-dashboard-tile/main.js src/assets/external-dashboard-tile.bundle.js -o",
14 | "bundle:ce": "ng build --project external-dashboard-tile --prod --output-hashing none"
15 | },
16 | "private": true,
17 | "dependencies": {
18 | "@angular/animations": "^7.1.4",
19 | "@angular/common": "^7.1.4",
20 | "@angular/compiler": "^7.1.4",
21 | "@angular/core": "^7.1.4",
22 | "@angular/forms": "^7.1.4",
23 | "@angular/http": "^7.1.4",
24 | "@angular/platform-browser": "^7.1.4",
25 | "@angular/platform-browser-dynamic": "^7.1.4",
26 | "@angular/router": "^7.1.4",
27 | "@swimlane/ngx-charts": "^8.1.0",
28 | "@webcomponents/custom-elements": "^1.1.2",
29 | "application": "^0.1.4",
30 | "core-js": "^2.5.4",
31 | "install": "^0.12.1",
32 | "npm": "^6.5.0",
33 | "rxjs": "^6.3.3",
34 | "zone.js": "^0.8.26"
35 | },
36 | "devDependencies": {
37 | "@angular-devkit/build-angular": "^0.11.4",
38 | "@angular/cli": "~7.1.4",
39 | "@angular/compiler-cli": "^7.1.4",
40 | "@angular/elements": "^7.1.4",
41 | "@angular/language-service": "^7.1.4",
42 | "@types/jasmine": "~2.8.6",
43 | "@types/jasminewd2": "~2.0.3",
44 | "@types/node": "~8.9.4",
45 | "codelyzer": "~4.2.1",
46 | "cpr": "^3.0.1",
47 | "jasmine-core": "~2.99.1",
48 | "jasmine-spec-reporter": "~4.2.1",
49 | "karma": "^3.1.4",
50 | "karma-chrome-launcher": "~2.2.0",
51 | "karma-coverage-istanbul-reporter": "~1.4.2",
52 | "karma-jasmine": "~1.1.1",
53 | "karma-jasmine-html-reporter": "^0.2.2",
54 | "ngx-build-plus": "^1.1.0",
55 | "protractor": "^5.4.2",
56 | "ts-node": "~5.0.1",
57 | "tslint": "~5.9.1",
58 | "typescript": "~3.1.6",
59 | "webpack-dev-server": "^3.1.14"
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/app/flight-booking/flight-search/flight-search.component.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
11 |
55 |
6 | 
7 |
8 | Flight42
9 |
10 |
7 |
2 |
3 |
29 |
30 |
4 |
6 | Flight Search
5 |
7 |
8 |
26 |
27 |
28 |
31 |
39 |
44 |
45 |
71 |
72 |
32 |
38 |
33 |
37 |
73 |
77 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | import 'core-js/es6/symbol';
23 | import 'core-js/es6/object';
24 | import 'core-js/es6/function';
25 | import 'core-js/es6/parse-int';
26 | import 'core-js/es6/parse-float';
27 | import 'core-js/es6/number';
28 | import 'core-js/es6/math';
29 | import 'core-js/es6/string';
30 | import 'core-js/es6/date';
31 | import 'core-js/es6/array';
32 | import 'core-js/es6/regexp';
33 | import 'core-js/es6/map';
34 | import 'core-js/es6/weak-map';
35 | import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** Evergreen browsers require these. **/
41 | import 'core-js/es6/reflect';
42 | import 'core-js/es7/reflect';
43 |
44 |
45 |
46 |
47 | /**
48 | * Required to support Web Animations `@angular/animation`.
49 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
50 | **/
51 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
52 |
53 | /***************************************************************************************************
54 | * Zone JS is required by Angular itself.
55 | */
56 |
57 | import 'zone.js/dist/zone'; // Included with Angular CLI.
58 |
59 |
60 | /***************************************************************************************************
61 | * APPLICATION IMPORTS
62 | */
63 |
64 | /**
65 | * Date, currency, decimal and percent pipes.
66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 | */
68 | // import 'intl'; // Run `npm install --save intl`.
69 | /**
70 | * Need to import at least one locale-data with intl.
71 | */
72 | // import 'intl/locale-data/jsonp/en';
73 |
74 | import '@webcomponents/custom-elements/custom-elements.min';
75 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_misc.scss:
--------------------------------------------------------------------------------
1 | /* General overwrite */
2 | .loader-container{
3 | position: fixed;
4 | width: 100%;
5 | height: 100%;
6 | text-align: center;
7 | }
8 | .loader,
9 | .loader:before,
10 | .loader:after {
11 | border-radius: 50%;
12 | width: 2.5em;
13 | height: 2.5em;
14 | -webkit-animation-fill-mode: both;
15 | animation-fill-mode: both;
16 | -webkit-animation: load7 1.8s infinite ease-in-out;
17 | animation: load7 1.8s infinite ease-in-out;
18 | }
19 | .loader {
20 | color: #9A9A9A;
21 | top: calc(50% - 40px);
22 | left: calc(50% - 10px);
23 | position: relative;
24 | font-size: 10px;
25 | -webkit-animation-delay: -0.16s;
26 | animation-delay: -0.16s;
27 | }
28 | .loader:before,
29 | .loader:after {
30 | content: '';
31 | position: absolute;
32 | top: 0;
33 | }
34 | .loader:before {
35 | left: -3.5em;
36 | -webkit-animation-delay: -0.32s;
37 | animation-delay: -0.32s;
38 | }
39 | .loader:after {
40 | left: 3.5em;
41 | }
42 | @-webkit-keyframes load7 {
43 | 0%,
44 | 80%,
45 | 100% {
46 | box-shadow: 0 2.5em 0 -1.3em;
47 | }
48 | 40% {
49 | box-shadow: 0 2.5em 0 0;
50 | }
51 | }
52 | @keyframes load7 {
53 | 0%,
54 | 80%,
55 | 100% {
56 | box-shadow: 0 2.5em 0 -1.3em;
57 | }
58 | 40% {
59 | box-shadow: 0 2.5em 0 0;
60 | }
61 | }
62 |
63 |
64 | body{
65 | color: $font-color;
66 | font-size: $font-size-base;
67 | font-family: 'Muli', Arial, sans-serif;
68 | .wrapper{
69 | min-height: 100vh;
70 | position: relative;
71 | }
72 | }
73 | a{
74 | color: $info-color;
75 |
76 | &:hover, &:focus{
77 | color: $info-states-color;
78 | text-decoration: none;
79 | }
80 | }
81 |
82 | a:focus, a:active,
83 | button::-moz-focus-inner,
84 | input::-moz-focus-inner,
85 | select::-moz-focus-inner,
86 | input[type="file"] > input[type="button"]::-moz-focus-inner{
87 | outline:0 !important;
88 | }
89 | .ui-slider-handle:focus,
90 | .navbar-toggle,
91 | input:focus,
92 | button:focus {
93 | outline : 0 !important;
94 | }
95 |
96 | /* Animations */
97 | .form-control,
98 | .input-group-addon,
99 | .tagsinput,
100 | .navbar,
101 | .navbar .alert{
102 | @include transition($general-transition-time, $transition-linear);
103 | }
104 |
105 | .sidebar .nav a,
106 | .table > tbody > tr .td-actions .btn{
107 | @include transition($fast-transition-time, $transition-ease-in);
108 | }
109 |
110 | .btn{
111 | @include transition($ultra-fast-transition-time, $transition-ease-in);
112 | }
113 | .fa{
114 | width: 21px;
115 | text-align: center;
116 | }
117 | .fa-base{
118 | font-size: 1.25em !important;
119 | }
120 |
121 | .margin-top{
122 | margin-top: 50px;
123 | }
124 | hr{
125 | border-color: $medium-pale-bg;
126 | }
127 | .wrapper{
128 | position: relative;
129 | top: 0;
130 | height: 100vh;
131 | }
132 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_typography.scss:
--------------------------------------------------------------------------------
1 | h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, a, .td-name, td{
2 | -moz-osx-font-smoothing: grayscale;
3 | -webkit-font-smoothing: antialiased;
4 | font-family: 'Muli', "Helvetica", Arial, sans-serif;
5 | }
6 |
7 | h1, .h1, h2, .h2, h3, .h3, h4, .h4{
8 | font-weight: $font-weight-normal;
9 | margin: $margin-large-vertical 0 $margin-base-vertical;
10 | }
11 |
12 | h1, .h1 {
13 | font-size: $font-size-h1;
14 | }
15 | h2, .h2{
16 | font-size: $font-size-h2;
17 | }
18 | h3, .h3{
19 | font-size: $font-size-h3;
20 | line-height: 1.4;
21 | margin: 20px 0 10px;
22 | }
23 | h4, .h4{
24 | font-size: $font-size-h4;
25 | font-weight: $font-weight-bold;
26 | line-height: 1.2em;
27 | }
28 | h5, .h5 {
29 | font-size: $font-size-h5;
30 | font-weight: $font-weight-normal;
31 | line-height: 1.4em;
32 | margin-bottom: 15px;
33 | }
34 | h6, .h6{
35 | font-size: $font-size-h6;
36 | font-weight: $font-weight-bold;
37 | text-transform: uppercase;
38 | }
39 | p{
40 | font-size: $font-paragraph;
41 | line-height: $line-height-general;
42 | }
43 |
44 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
45 | color: $dark-gray;
46 | font-weight: $font-weight-light;
47 | line-height: $line-height-general;
48 | }
49 |
50 | h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small {
51 | font-size: 60%;
52 | }
53 | .title-uppercase{
54 | text-transform: uppercase;
55 | }
56 | blockquote{
57 | font-style: italic;
58 | }
59 | blockquote small{
60 | font-style: normal;
61 | }
62 | .text-muted{
63 | color: $medium-gray;
64 | }
65 | .text-primary, .text-primary:hover{
66 | color: $primary-states-color;
67 | }
68 | .text-info, .text-info:hover{
69 | color: $info-states-color;
70 | }
71 | .text-success, .text-success:hover{
72 | color: $success-states-color;
73 | }
74 | .text-warning, .text-warning:hover{
75 | color: $warning-states-color;
76 | }
77 | .text-danger, .text-danger:hover{
78 | color: $danger-states-color;
79 | }
80 | .glyphicon{
81 | line-height: 1;
82 | }
83 | strong{
84 | color: $default-states-color;
85 | }
86 | .icon-primary{
87 | color: $primary-color;
88 | }
89 | .icon-info{
90 | color: $info-color;
91 | }
92 | .icon-success{
93 | color: $success-color;
94 | }
95 | .icon-warning{
96 | color: $warning-color;
97 | }
98 | .icon-danger{
99 | color: $danger-color;
100 | }
101 | .chart-legend{
102 | .text-primary, .text-primary:hover{
103 | color: $primary-color;
104 | }
105 | .text-info, .text-info:hover{
106 | color: $info-color;
107 | }
108 | .text-success, .text-success:hover{
109 | color: $success-color;
110 | }
111 | .text-warning, .text-warning:hover{
112 | color: $warning-color;
113 | }
114 | .text-danger, .text-danger:hover{
115 | color: $danger-color;
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/projects/external-dashboard-tile/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 |
43 |
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 |
48 |
49 | /**
50 | * Web Animations `@angular/platform-browser/animations`
51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
53 | **/
54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
55 |
56 | /**
57 | * By default, zone.js will patch all possible macroTask and DomEvents
58 | * user can disable parts of macroTask/DomEvents patch by setting following flags
59 | */
60 |
61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
64 |
65 | /*
66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
68 | */
69 | // (window as any).__Zone_enable_cross_context_check = true;
70 |
71 | /***************************************************************************************************
72 | * Zone JS is required by default for Angular itself.
73 | */
74 | import 'zone.js/dist/zone'; // Included with Angular CLI.
75 |
76 |
77 |
78 | /***************************************************************************************************
79 | * APPLICATION IMPORTS
80 | */
81 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_dropdown.scss:
--------------------------------------------------------------------------------
1 | .dropdown-menu{
2 | background-color: $pale-bg;
3 | border: 0 none;
4 | border-radius: $border-radius-extreme;
5 | display: block;
6 | margin-top: 10px;
7 | padding: 0px;
8 | position: absolute;
9 | visibility: hidden;
10 | z-index: 9000;
11 |
12 | @include opacity(0);
13 | @include box-shadow($dropdown-shadow);
14 |
15 | // the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file
16 | .open &{
17 | @include opacity(1);
18 | visibility: visible;
19 | }
20 |
21 | .divider{
22 | background-color: $medium-pale-bg;
23 | margin: 0px;
24 | }
25 |
26 | .dropdown-header{
27 | color: $dark-gray;
28 | font-size: $font-size-small;
29 | padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
30 | }
31 |
32 | // the style for the dropdown menu that appears under select, it is different from the default one
33 | .select &{
34 | border-radius: $border-radius-bottom;
35 | @include box-shadow(none);
36 | @include transform-origin($select-coordinates);
37 | @include transform-scale(1);
38 | @include transition($fast-transition-time, $transition-linear);
39 | margin-top: -20px;
40 | }
41 | .select.open &{
42 | margin-top: -1px;
43 | }
44 |
45 | > li > a {
46 | color: $font-color;
47 | font-size: $font-size-base;
48 | padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
49 | @include transition-none();
50 |
51 | img{
52 | margin-top: -3px;
53 | }
54 | }
55 | > li > a:focus{
56 | outline: 0 !important;
57 | }
58 |
59 | .btn-group.select &{
60 | min-width: 100%;
61 | }
62 |
63 | > li:first-child > a{
64 | border-top-left-radius: $border-radius-extreme;
65 | border-top-right-radius: $border-radius-extreme;
66 | }
67 |
68 | > li:last-child > a{
69 | border-bottom-left-radius: $border-radius-extreme;
70 | border-bottom-right-radius: $border-radius-extreme;
71 | }
72 |
73 | .select & > li:first-child > a{
74 | border-radius: 0;
75 | border-bottom: 0 none;
76 | }
77 |
78 | > li > a:hover,
79 | > li > a:focus {
80 | background-color: $default-color;
81 | color: $fill-font-color;
82 | opacity: 1;
83 | text-decoration: none;
84 | }
85 |
86 | &.dropdown-primary > li > a:hover,
87 | &.dropdown-primary > li > a:focus{
88 | background-color: $primary-color;
89 | }
90 | &.dropdown-info > li > a:hover,
91 | &.dropdown-info > li > a:focus{
92 | background-color: $info-color;
93 | }
94 | &.dropdown-success > li > a:hover,
95 | &.dropdown-success > li > a:focus{
96 | background-color: $success-color;
97 | }
98 | &.dropdown-warning > li > a:hover,
99 | &.dropdown-warning > li > a:focus{
100 | background-color: $warning-color;
101 | }
102 | &.dropdown-danger > li > a:hover,
103 | &.dropdown-danger > li > a:focus{
104 | background-color: $danger-color;
105 | }
106 |
107 | }
108 |
109 | //fix bug for the select items in btn-group
110 | .btn-group.select{
111 | overflow: hidden;
112 | }
113 | .btn-group.select.open{
114 | overflow: visible;
115 | }
116 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_buttons.scss:
--------------------------------------------------------------------------------
1 | .btn,
2 | .navbar .navbar-nav > li > a.btn{
3 | border-radius: $border-radius-btn-base;
4 | box-sizing: border-box;
5 | border-width: $border-thick;
6 | background-color: $transparent-bg;
7 | font-size: $font-size-base;
8 | font-weight: $font-weight-semi;
9 |
10 | padding: $padding-base-vertical $padding-base-horizontal;
11 |
12 | @include btn-styles($default-color, $default-states-color);
13 | @include transition($fast-transition-time, linear);
14 |
15 | &:hover,
16 | &:focus{
17 | outline: 0 !important;
18 | }
19 | &:active,
20 | &.active,
21 | .open > &.dropdown-toggle {
22 | @include box-shadow(none);
23 | outline: 0 !important;
24 | }
25 |
26 | &.btn-icon{
27 | padding: $padding-base-vertical;
28 | }
29 | }
30 |
31 | .btn-group .btn + .btn,
32 | .btn-group .btn + .btn-group,
33 | .btn-group .btn-group + .btn,
34 | .btn-group .btn-group + .btn-group{
35 | margin-left: -2px;
36 | }
37 |
38 | // Apply the mixin to the buttons
39 | //.btn-default { @include btn-styles($default-color, $default-states-color); }
40 | .navbar .navbar-nav > li > a.btn-primary, .btn-primary { @include btn-styles($primary-color, $primary-states-color); }
41 | .navbar .navbar-nav > li > a.btn-success, .btn-success { @include btn-styles($success-color, $success-states-color); }
42 | .navbar .navbar-nav > li > a.btn-info, .btn-info { @include btn-styles($info-color, $info-states-color); }
43 | .navbar .navbar-nav > li > a.btn-warning, .btn-warning { @include btn-styles($warning-color, $warning-states-color); }
44 | .navbar .navbar-nav > li > a.btn-danger, .btn-danger { @include btn-styles($danger-color, $danger-states-color); }
45 | .btn-neutral {
46 | @include btn-styles($white-color, $white-color);
47 |
48 | &:hover,
49 | &:focus{
50 | color: $default-color;
51 | }
52 |
53 | &:active,
54 | &.active,
55 | .open > &.dropdown-toggle{
56 | background-color: $white-color;
57 | color: $default-color;
58 | }
59 |
60 | &.btn-fill{
61 | color: $default-color;
62 | }
63 | &.btn-fill:hover,
64 | &.btn-fill:focus{
65 | color: $default-states-color;
66 | }
67 |
68 | &.btn-simple:active,
69 | &.btn-simple.active{
70 | background-color: transparent;
71 | }
72 | }
73 |
74 | .btn{
75 | &:disabled,
76 | &[disabled],
77 | &.disabled{
78 | @include opacity(.5);
79 | }
80 | }
81 | .btn-simple{
82 | border: $none;
83 | padding: $padding-base-vertical $padding-base-horizontal;
84 |
85 | &.btn-icon{
86 | padding: $padding-base-vertical;
87 | }
88 | }
89 | .btn-lg{
90 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-btn-large, $line-height-small);
91 | font-weight: $font-weight-normal;
92 | }
93 | .btn-sm{
94 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-btn-small, $line-height-small);
95 | }
96 | .btn-xs {
97 | @include btn-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $border-radius-btn-small, $line-height-small);
98 | }
99 | .btn-wd {
100 | min-width: 140px;
101 | }
102 |
103 | .btn-group.select{
104 | width: 100%;
105 | }
106 | .btn-group.select .btn{
107 | text-align: left;
108 | }
109 | .btn-group.select .caret{
110 | position: absolute;
111 | top: 50%;
112 | margin-top: -1px;
113 | right: 8px;
114 | }
115 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "eofline": true,
15 | "forin": true,
16 | "import-blacklist": [
17 | true
18 | ],
19 | "import-spacing": true,
20 | "indent": [
21 | true,
22 | "spaces"
23 | ],
24 | "interface-over-type-literal": true,
25 | "label-position": true,
26 | "max-line-length": [
27 | true,
28 | 140
29 | ],
30 | "member-access": false,
31 | "member-ordering": [
32 | true,
33 | {
34 | "order": [
35 | "static-field",
36 | "instance-field",
37 | "static-method",
38 | "instance-method"
39 | ]
40 | }
41 | ],
42 | "no-arg": true,
43 | "no-bitwise": true,
44 | "no-console": [
45 | true,
46 | "debug",
47 | "info",
48 | "time",
49 | "timeEnd",
50 | "trace"
51 | ],
52 | "no-construct": true,
53 | "no-debugger": true,
54 | "no-duplicate-super": true,
55 | "no-empty": false,
56 | "no-empty-interface": true,
57 | "no-eval": true,
58 | "no-inferrable-types": [
59 | true,
60 | "ignore-params"
61 | ],
62 | "no-misused-new": true,
63 | "no-non-null-assertion": true,
64 | "no-shadowed-variable": true,
65 | "no-string-literal": false,
66 | "no-string-throw": true,
67 | "no-switch-case-fall-through": true,
68 | "no-trailing-whitespace": true,
69 | "no-unnecessary-initializer": true,
70 | "no-unused-expression": true,
71 | "no-use-before-declare": true,
72 | "no-var-keyword": true,
73 | "object-literal-sort-keys": false,
74 | "one-line": [
75 | true,
76 | "check-open-brace",
77 | "check-catch",
78 | "check-else",
79 | "check-whitespace"
80 | ],
81 | "prefer-const": true,
82 | "quotemark": [
83 | true,
84 | "single"
85 | ],
86 | "radix": true,
87 | "semicolon": [
88 | true,
89 | "always"
90 | ],
91 | "triple-equals": [
92 | true,
93 | "allow-null-check"
94 | ],
95 | "typedef-whitespace": [
96 | true,
97 | {
98 | "call-signature": "nospace",
99 | "index-signature": "nospace",
100 | "parameter": "nospace",
101 | "property-declaration": "nospace",
102 | "variable-declaration": "nospace"
103 | }
104 | ],
105 | "typeof-compare": true,
106 | "unified-signatures": true,
107 | "variable-name": false,
108 | "whitespace": [
109 | true,
110 | "check-branch",
111 | "check-decl",
112 | "check-operator",
113 | "check-separator",
114 | "check-type"
115 | ],
116 | "directive-selector": [
117 | true,
118 | "attribute",
119 | "app",
120 | "camelCase"
121 | ],
122 | "component-selector": [
123 | true,
124 | "element",
125 | "app",
126 | "kebab-case"
127 | ],
128 | "use-input-property-decorator": true,
129 | "use-output-property-decorator": true,
130 | "use-host-property-decorator": true,
131 | "no-input-rename": true,
132 | "no-output-rename": true,
133 | "use-life-cycle-interface": true,
134 | "use-pipe-transform-interface": true,
135 | "component-class-suffix": true,
136 | "directive-class-suffix": true,
137 | "no-access-missing-member": true,
138 | "templates-use-public": true,
139 | "invoke-injectable": true
140 | }
141 | }
--------------------------------------------------------------------------------
/angular.json.bak:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "dashboard": {
7 | "root": "",
8 | "sourceRoot": "src",
9 | "projectType": "application",
10 | "prefix": "app",
11 | "schematics": {},
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "outputPath": "dist/dashboard",
17 | "index": "src/index.html",
18 | "main": "src/main.ts",
19 | "polyfills": "src/polyfills.ts",
20 | "tsConfig": "src/tsconfig.app.json",
21 | "assets": [
22 | "src/favicon.ico",
23 | "src/assets"
24 | ],
25 | "styles": [
26 | "src/styles.css"
27 | ],
28 | "scripts": []
29 | },
30 | "configurations": {
31 | "production": {
32 | "fileReplacements": [
33 | {
34 | "replace": "src/environments/environment.ts",
35 | "with": "src/environments/environment.prod.ts"
36 | }
37 | ],
38 | "optimization": true,
39 | "outputHashing": "all",
40 | "sourceMap": false,
41 | "extractCss": true,
42 | "namedChunks": false,
43 | "aot": true,
44 | "extractLicenses": true,
45 | "vendorChunk": false,
46 | "buildOptimizer": true
47 | }
48 | }
49 | },
50 | "serve": {
51 | "builder": "@angular-devkit/build-angular:dev-server",
52 | "options": {
53 | "browserTarget": "dashboard:build"
54 | },
55 | "configurations": {
56 | "production": {
57 | "browserTarget": "dashboard:build:production"
58 | }
59 | }
60 | },
61 | "extract-i18n": {
62 | "builder": "@angular-devkit/build-angular:extract-i18n",
63 | "options": {
64 | "browserTarget": "dashboard:build"
65 | }
66 | },
67 | "test": {
68 | "builder": "@angular-devkit/build-angular:karma",
69 | "options": {
70 | "main": "src/test.ts",
71 | "polyfills": "src/polyfills.ts",
72 | "tsConfig": "src/tsconfig.spec.json",
73 | "karmaConfig": "src/karma.conf.js",
74 | "styles": [
75 | "styles.css"
76 | ],
77 | "scripts": [],
78 | "assets": [
79 | "src/favicon.ico",
80 | "src/assets"
81 | ]
82 | }
83 | },
84 | "lint": {
85 | "builder": "@angular-devkit/build-angular:tslint",
86 | "options": {
87 | "tsConfig": [
88 | "src/tsconfig.app.json",
89 | "src/tsconfig.spec.json"
90 | ],
91 | "exclude": [
92 | "**/node_modules/**"
93 | ]
94 | }
95 | }
96 | }
97 | },
98 | "dashboard-e2e": {
99 | "root": "e2e/",
100 | "projectType": "application",
101 | "architect": {
102 | "e2e": {
103 | "builder": "@angular-devkit/build-angular:protractor",
104 | "options": {
105 | "protractorConfig": "e2e/protractor.conf.js",
106 | "devServerTarget": "dashboard:serve"
107 | }
108 | },
109 | "lint": {
110 | "builder": "@angular-devkit/build-angular:tslint",
111 | "options": {
112 | "tsConfig": "e2e/tsconfig.e2e.json",
113 | "exclude": [
114 | "**/node_modules/**"
115 | ]
116 | }
117 | }
118 | }
119 | }
120 | },
121 | "defaultProject": "dashboard"
122 | }
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_chartist.scss:
--------------------------------------------------------------------------------
1 | // Scales for responsive SVG containers
2 | $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;
3 | $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;
4 |
5 | // Class names to be used when generating CSS
6 | $ct-class-chart: ct-chart !default;
7 | $ct-class-chart-line: ct-chart-line !default;
8 | $ct-class-chart-bar: ct-chart-bar !default;
9 | $ct-class-horizontal-bars: ct-horizontal-bars !default;
10 | $ct-class-chart-pie: ct-chart-pie !default;
11 | $ct-class-chart-donut: ct-chart-donut !default;
12 | $ct-class-label: ct-label !default;
13 | $ct-class-series: ct-series !default;
14 | $ct-class-line: ct-line !default;
15 | $ct-class-point: ct-point !default;
16 | $ct-class-area: ct-area !default;
17 | $ct-class-bar: ct-bar !default;
18 | $ct-class-slice-pie: ct-slice-pie !default;
19 | $ct-class-slice-donut: ct-slice-donut !default;
20 | $ct-class-grid: ct-grid !default;
21 | $ct-class-vertical: ct-vertical !default;
22 | $ct-class-horizontal: ct-horizontal !default;
23 | $ct-class-start: ct-start !default;
24 | $ct-class-end: ct-end !default;
25 |
26 | // Container ratio
27 | $ct-container-ratio: (1/1.618) !default;
28 |
29 | // Text styles for labels
30 | $ct-text-color: rgba(0, 0, 0, 0.4) !default;
31 | $ct-text-size: 0.9em !default;
32 | $ct-text-align: flex-start !default;
33 | $ct-text-justify: flex-start !default;
34 | $ct-text-line-height: 1;
35 |
36 | // Grid styles
37 | $ct-grid-color: rgba(0, 0, 0, 0.2) !default;
38 | $ct-grid-dasharray: 2px !default;
39 | $ct-grid-width: 1px !default;
40 |
41 | // Line chart properties
42 | $ct-line-width: 4px !default;
43 | $ct-line-dasharray: false !default;
44 | $ct-point-size: 10px !default;
45 | // Line chart point, can be either round or square
46 | $ct-point-shape: round !default;
47 | // Area fill transparency between 0 and 1
48 | $ct-area-opacity: 0.7 !default;
49 |
50 | // Bar chart bar width
51 | $ct-bar-width: 10px !default;
52 |
53 | // Donut width (If donut width is to big it can cause issues where the shape gets distorted)
54 | $ct-donut-width: 60px !default;
55 |
56 | // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
57 | // should set this property to false
58 | $ct-include-classes: true !default;
59 |
60 | // If this is set to true the CSS will contain colored series. You can extend or change the color with the
61 | // properties below
62 | $ct-include-colored-series: $ct-include-classes !default;
63 |
64 | // If set to true this will include all responsive container variations using the scales defined at the top of the script
65 | $ct-include-alternative-responsive-containers: $ct-include-classes !default;
66 |
67 | // Series names and colors. This can be extended or customized as desired. Just add more series and colors.
68 | $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
69 | $ct-series-colors: (
70 | $info-color,
71 | $warning-color,
72 | $danger-color,
73 | $success-color,
74 | $primary-color,
75 | rgba($info-color,.8),
76 | rgba($success-color,.8),
77 | rgba($warning-color,.8),
78 | rgba($danger-color,.8),
79 | rgba($primary-color,.8),
80 | rgba($info-color,.6),
81 | rgba($success-color,.6),
82 | rgba($warning-color,.6),
83 | rgba($danger-color,.6),
84 | rgba($primary-color,.6)
85 |
86 | ) !default;
87 |
88 | // Paper Kit Colors
89 |
90 | .ct-blue{
91 | stroke: $primary-color !important;
92 | }
93 | .ct-azure{
94 | stroke: $info-color !important;
95 | }
96 | .ct-green{
97 | stroke: $success-color !important;
98 | }
99 | .ct-orange{
100 | stroke: $warning-color !important;
101 | }
102 | .ct-red{
103 | stroke: $danger-color !important;
104 | }
--------------------------------------------------------------------------------
/src/assets/sass/paper/_animate.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | // This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | @charset "UTF-8";
37 |
38 | /*
39 | Animate.css - http://daneden.me/animate
40 | Licensed under the MIT license - http://opensource.org/licenses/MIT
41 |
42 | Copyright (c) 2015 Daniel Eden
43 | */
44 |
45 | .animated {
46 | -webkit-animation-duration: 1s;
47 | animation-duration: 1s;
48 | -webkit-animation-fill-mode: both;
49 | animation-fill-mode: both;
50 | }
51 |
52 | .animated.infinite {
53 | -webkit-animation-iteration-count: infinite;
54 | animation-iteration-count: infinite;
55 | }
56 |
57 | .animated.hinge {
58 | -webkit-animation-duration: 2s;
59 | animation-duration: 2s;
60 | }
61 |
62 | .animated.bounceIn,
63 | .animated.bounceOut {
64 | -webkit-animation-duration: .75s;
65 | animation-duration: .75s;
66 | }
67 |
68 | .animated.flipOutX,
69 | .animated.flipOutY {
70 | -webkit-animation-duration: .75s;
71 | animation-duration: .75s;
72 | }
73 |
74 | @-webkit-keyframes shake {
75 | from, to {
76 | -webkit-transform: translate3d(0, 0, 0);
77 | transform: translate3d(0, 0, 0);
78 | }
79 |
80 | 10%, 30%, 50%, 70%, 90% {
81 | -webkit-transform: translate3d(-10px, 0, 0);
82 | transform: translate3d(-10px, 0, 0);
83 | }
84 |
85 | 20%, 40%, 60%, 80% {
86 | -webkit-transform: translate3d(10px, 0, 0);
87 | transform: translate3d(10px, 0, 0);
88 | }
89 | }
90 |
91 | @keyframes shake {
92 | from, to {
93 | -webkit-transform: translate3d(0, 0, 0);
94 | transform: translate3d(0, 0, 0);
95 | }
96 |
97 | 10%, 30%, 50%, 70%, 90% {
98 | -webkit-transform: translate3d(-10px, 0, 0);
99 | transform: translate3d(-10px, 0, 0);
100 | }
101 |
102 | 20%, 40%, 60%, 80% {
103 | -webkit-transform: translate3d(10px, 0, 0);
104 | transform: translate3d(10px, 0, 0);
105 | }
106 | }
107 |
108 | .shake {
109 | -webkit-animation-name: shake;
110 | animation-name: shake;
111 | }
112 |
113 |
114 |
115 | @-webkit-keyframes fadeInDown {
116 | from {
117 | opacity: 0;
118 | -webkit-transform: translate3d(0, -100%, 0);
119 | transform: translate3d(0, -100%, 0);
120 | }
121 |
122 | to {
123 | opacity: 1;
124 | -webkit-transform: none;
125 | transform: none;
126 | }
127 | }
128 |
129 | @keyframes fadeInDown {
130 | from {
131 | opacity: 0;
132 | -webkit-transform: translate3d(0, -100%, 0);
133 | transform: translate3d(0, -100%, 0);
134 | }
135 |
136 | to {
137 | opacity: 1;
138 | -webkit-transform: none;
139 | transform: none;
140 | }
141 | }
142 |
143 | .fadeInDown {
144 | -webkit-animation-name: fadeInDown;
145 | animation-name: fadeInDown;
146 | }
147 |
148 |
149 | @-webkit-keyframes fadeOut {
150 | from {
151 | opacity: 1;
152 | }
153 |
154 | to {
155 | opacity: 0;
156 | }
157 | }
158 |
159 | @keyframes fadeOut {
160 | from {
161 | opacity: 1;
162 | }
163 |
164 | to {
165 | opacity: 0;
166 | }
167 | }
168 |
169 | .fadeOut {
170 | -webkit-animation-name: fadeOut;
171 | animation-name: fadeOut;
172 | }
173 |
174 | @-webkit-keyframes fadeOutDown {
175 | from {
176 | opacity: 1;
177 | }
178 |
179 | to {
180 | opacity: 0;
181 | -webkit-transform: translate3d(0, 100%, 0);
182 | transform: translate3d(0, 100%, 0);
183 | }
184 | }
185 |
186 | @keyframes fadeOutDown {
187 | from {
188 | opacity: 1;
189 | }
190 |
191 | to {
192 | opacity: 0;
193 | -webkit-transform: translate3d(0, 100%, 0);
194 | transform: translate3d(0, 100%, 0);
195 | }
196 | }
197 |
198 | .fadeOutDown {
199 | -webkit-animation-name: fadeOutDown;
200 | animation-name: fadeOutDown;
201 | }
202 |
203 | @-webkit-keyframes fadeOutUp {
204 | from {
205 | opacity: 1;
206 | }
207 |
208 | to {
209 | opacity: 0;
210 | -webkit-transform: translate3d(0, -100%, 0);
211 | transform: translate3d(0, -100%, 0);
212 | }
213 | }
214 |
215 | @keyframes fadeOutUp {
216 | from {
217 | opacity: 1;
218 | }
219 |
220 | to {
221 | opacity: 0;
222 | -webkit-transform: translate3d(0, -100%, 0);
223 | transform: translate3d(0, -100%, 0);
224 | }
225 | }
226 |
227 | .fadeOutUp {
228 | -webkit-animation-name: fadeOutUp;
229 | animation-name: fadeOutUp;
230 | }
231 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_navbars.scss:
--------------------------------------------------------------------------------
1 | .nav {
2 | > li{
3 | > a:hover,
4 | > a:focus{
5 | background-color: transparent;
6 | }
7 | }
8 | }
9 | .navbar{
10 | border: $none;
11 | border-radius: 0;
12 | font-size: $font-size-navbar;
13 |
14 | .navbar-brand{
15 | font-weight: $font-weight-bold;
16 | margin: $navbar-margin-brand;
17 | padding: $navbar-padding-brand;
18 | font-size: $font-size-large-navbar;
19 | }
20 | .navbar-nav{
21 | > li > a {
22 | line-height: 1.42857;
23 | margin: $navbar-margin-a;
24 | padding: $navbar-padding-a;
25 |
26 | i,
27 | p{
28 | display: inline-block;
29 | margin: 0;
30 | }
31 | i{
32 | position: relative;
33 | top: 1px;
34 | }
35 | }
36 | > li > a.btn{
37 | margin: $navbar-margin-a-btn;
38 | padding: $padding-base-vertical $padding-base-horizontal;
39 | }
40 | }
41 | .btn{
42 | margin: $navbar-margin-btn;
43 | font-size: $font-size-base;
44 | }
45 | .btn-simple{
46 | font-size: $font-size-medium;
47 | }
48 | }
49 |
50 | .navbar-nav > li > .dropdown-menu{
51 | border-radius: $border-radius-extreme;
52 | margin-top: -5px;
53 | }
54 |
55 | .navbar-default {
56 | background-color: $bg-nude;
57 | border-bottom: 1px solid $medium-gray;
58 |
59 | .brand{
60 | color: $font-color !important;
61 | }
62 | .navbar-nav{
63 | > li > a:not(.btn){
64 | color: $dark-gray;
65 | }
66 |
67 | > .active > a,
68 | > .active > a:not(.btn):hover,
69 | > .active > a:not(.btn):focus,
70 | > li > a:not(.btn):hover,
71 | > li > a:not(.btn):focus {
72 | background-color: transparent;
73 | border-radius: 3px;
74 | color: $info-color;
75 | @include opacity(1);
76 | }
77 |
78 | > .dropdown > a:hover .caret,
79 | > .dropdown > a:focus .caret {
80 | border-bottom-color: $info-color;
81 | border-top-color: $info-color;
82 |
83 | }
84 |
85 | > .open > a,
86 | > .open > a:hover,
87 | > .open > a:focus{
88 | background-color: transparent;
89 | color: $info-color;
90 | }
91 |
92 | .navbar-toggle:hover,.navbar-toggle:focus {
93 | background-color: transparent;
94 | }
95 |
96 | }
97 |
98 | &:not(.navbar-transparent) .btn-default:hover{
99 | color: $info-color;
100 | border-color: $info-color;
101 | }
102 | &:not(.navbar-transparent) .btn-neutral,
103 | &:not(.navbar-transparent) .btn-neutral:hover,
104 | &:not(.navbar-transparent) .btn-neutral:active{
105 | color: $dark-gray;
106 | }
107 | }
108 |
109 | .navbar-form{
110 | @include box-shadow(none);
111 | .form-control{
112 | @include light-form();
113 | height: 22px;
114 | font-size: $font-size-navbar;
115 | line-height: $line-height-general;
116 | color: $light-gray;
117 | }
118 | .navbar-transparent & .form-control,
119 | [class*="navbar-ct"] & .form-control{
120 | color: $white-color;
121 | border: $none;
122 | border-bottom: 1px solid rgba($white-color,.6);
123 | }
124 |
125 | }
126 |
127 | .navbar-ct-primary{
128 | @include navbar-color($bg-primary);
129 | }
130 | .navbar-ct-info{
131 | @include navbar-color($bg-info);
132 | }
133 | .navbar-ct-success{
134 | @include navbar-color($bg-success);
135 | }
136 | .navbar-ct-warning{
137 | @include navbar-color($bg-warning);
138 | }
139 | .navbar-ct-danger{
140 | @include navbar-color($bg-danger);
141 | }
142 |
143 | .navbar-transparent{
144 | padding-top: 15px;
145 | background-color: transparent;
146 | border-bottom: 1px solid transparent;
147 | }
148 |
149 | .navbar-toggle{
150 | margin-top: 19px;
151 | margin-bottom: 19px;
152 | border: $none;
153 |
154 | .icon-bar {
155 | background-color: $white-color;
156 | }
157 | .navbar-collapse,
158 | .navbar-form {
159 | border-color: transparent;
160 | }
161 |
162 | &.navbar-default .navbar-toggle:hover,
163 | &.navbar-default .navbar-toggle:focus {
164 | background-color: transparent;
165 | }
166 | }
167 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_inputs.scss:
--------------------------------------------------------------------------------
1 | .form-control::-moz-placeholder{
2 | @include placeholder($medium-gray,1);
3 | }
4 | .form-control:-moz-placeholder{
5 | @include placeholder($medium-gray,1);
6 | }
7 | .form-control::-webkit-input-placeholder{
8 | @include placeholder($medium-gray,1);
9 | }
10 | .form-control:-ms-input-placeholder{
11 | @include placeholder($medium-gray,1);
12 | }
13 |
14 | .form-control {
15 | background-color: $gray-input-bg;
16 | border: medium none;
17 | border-radius: $border-radius-base;
18 | color: $font-color;
19 | font-size: $font-size-base;
20 | transition: background-color 0.3s ease 0s;
21 | @include input-size($padding-base-vertical, $padding-base-horizontal, $height-base);
22 | @include box-shadow(none);
23 |
24 | &:focus{
25 | background-color: $white-bg;
26 | @include box-shadow(none);
27 | outline: 0 !important;
28 | }
29 |
30 | .has-success &,
31 | .has-error &,
32 | .has-success &:focus,
33 | .has-error &:focus{
34 | @include box-shadow(none);
35 | }
36 |
37 | .has-success &{
38 | background-color: $success-input-bg;
39 | color: $success-color;
40 | &.border-input{
41 | border: 1px solid $success-color;
42 | }
43 | }
44 | .has-success &:focus{
45 | background-color: $white-bg;
46 | }
47 | .has-error &{
48 | background-color: $danger-input-bg;
49 | color: $danger-color;
50 | &.border-input{
51 | border: 1px solid $danger-color;
52 | }
53 | }
54 | .has-error &:focus{
55 | background-color: $white-bg;
56 | }
57 |
58 | & + .form-control-feedback{
59 | border-radius: $border-radius-large;
60 | font-size: $font-size-base;
61 | margin-top: -7px;
62 | position: absolute;
63 | right: 10px;
64 | top: 50%;
65 | vertical-align: middle;
66 | }
67 | &.border-input{
68 | border: 1px solid $table-line-color;
69 | }
70 | .open &{
71 | border-bottom-color: transparent;
72 | }
73 | }
74 |
75 | .input-lg{
76 | height: 55px;
77 | padding: $padding-large-vertical $padding-large-horizontal;
78 | }
79 |
80 | .has-error{
81 | .form-control-feedback, .control-label{
82 | color: $danger-color;
83 | }
84 | }
85 | .has-success{
86 | .form-control-feedback, .control-label{
87 | color: $success-color;
88 | }
89 | }
90 |
91 |
92 | .input-group-addon {
93 | background-color: $gray-input-bg;
94 | border: medium none;
95 | border-radius: $border-radius-base;
96 |
97 |
98 | .has-success &,
99 | .has-error &{
100 | background-color: $white-color;
101 | }
102 | .has-error .form-control:focus + &{
103 | color: $danger-color;
104 | }
105 | .has-success .form-control:focus + &{
106 | color: $success-color;
107 | }
108 | .form-control:focus + &,
109 | .form-control:focus ~ &{
110 | background-color: $white-color;
111 | }
112 | }
113 | .border-input{
114 | .input-group-addon{
115 | border: solid 1px $table-line-color;
116 | }
117 | }
118 | .input-group{
119 | margin-bottom: 15px;
120 | }
121 | .input-group[disabled]{
122 | .input-group-addon{
123 | background-color: $light-gray;
124 | }
125 | }
126 | .input-group .form-control:first-child,
127 | .input-group-addon:first-child,
128 | .input-group-btn:first-child > .dropdown-toggle,
129 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
130 | border-right: 0 none;
131 | }
132 | .input-group .form-control:last-child,
133 | .input-group-addon:last-child,
134 | .input-group-btn:last-child > .dropdown-toggle,
135 | .input-group-btn:first-child > .btn:not(:first-child) {
136 | border-left: 0 none;
137 | }
138 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
139 | background-color: $light-gray;
140 | cursor: not-allowed;
141 | @include placeholder($dark-gray,1);
142 | }
143 | .form-control[disabled]::-moz-placeholder{
144 | @include placeholder($dark-gray,1);
145 | }
146 | .form-control[disabled]:-moz-placeholder{
147 | @include placeholder($medium-gray,1);
148 | }
149 | .form-control[disabled]::-webkit-input-placeholder{
150 | @include placeholder($medium-gray,1);
151 | }
152 | .form-control[disabled]:-ms-input-placeholder{
153 | @include placeholder($medium-gray,1);
154 | }
155 | .input-group-btn .btn{
156 | border-width: $border-thin;
157 | padding: $padding-round-vertical $padding-base-horizontal;
158 | }
159 | .input-group-btn .btn-default:not(.btn-fill){
160 | border-color: $medium-gray;
161 | }
162 |
163 | .input-group-btn:last-child > .btn{
164 | margin-left: 0;
165 | }
166 | textarea.form-control{
167 | max-width: 100%;
168 | padding: 10px 18px;
169 | resize: none;
170 | }
171 |
172 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_cards.scss:
--------------------------------------------------------------------------------
1 | .card{
2 | border-radius: $border-radius-extreme;
3 | box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
4 | background-color: #FFFFFF;
5 | color: $card-black-color;
6 | margin-bottom: 20px;
7 | position: relative;
8 | z-index: 1;
9 |
10 | .image{
11 | width: 100%;
12 | overflow: hidden;
13 | height: 260px;
14 | border-radius: $border-radius-extreme $border-radius-extreme 0 0;
15 | position: relative;
16 | -webkit-transform-style: preserve-3d;
17 | -moz-transform-style: preserve-3d;
18 | transform-style: preserve-3d;
19 |
20 | img {
21 | width: 100%;
22 | }
23 | }
24 | .content{
25 | padding: 15px 15px 10px 15px;
26 | }
27 | .header{
28 | padding: 20px 20px 0;
29 | }
30 | .description{
31 | font-size: $font-paragraph;
32 | color: $font-color;
33 | }
34 |
35 | h6{
36 | font-size: $font-size-small;
37 | margin: 0;
38 | }
39 | .category,
40 | label{
41 | font-size: $font-size-base;
42 | font-weight: $font-weight-normal;
43 | color: $dark-gray;
44 | margin-bottom: 0px;
45 | i{
46 | font-size: $font-paragraph;
47 | }
48 | }
49 |
50 | label{
51 | font-size: 15px;
52 | margin-bottom: 5px;
53 | }
54 |
55 | .title{
56 | margin: $none;
57 | color: $card-black-color;
58 | font-weight: $font-weight-light;
59 | }
60 | .avatar{
61 | width: 50px;
62 | height: 50px;
63 | overflow: hidden;
64 | border-radius: 50%;
65 | margin-right: 5px;
66 | }
67 | .footer{
68 | padding: 0;
69 | line-height: 30px;
70 |
71 | .legend{
72 | padding: 5px 0;
73 | }
74 |
75 | hr{
76 | margin-top: 5px;
77 | margin-bottom: 5px;
78 | }
79 | }
80 | .stats{
81 | color: #a9a9a9;
82 | font-weight: 300;
83 | i{
84 | margin-right: 2px;
85 | min-width: 15px;
86 | display: inline-block;
87 | }
88 | }
89 | .footer div{
90 | display: inline-block;
91 | }
92 |
93 | .author{
94 | font-size: $font-size-small;
95 | font-weight: $font-weight-bold;
96 | text-transform: uppercase;
97 | }
98 | .author i{
99 | font-size: $font-size-base;
100 | }
101 |
102 | &.card-separator:after{
103 | height: 100%;
104 | right: -15px;
105 | top: 0;
106 | width: 1px;
107 | background-color: $medium-gray;
108 | content: "";
109 | position: absolute;
110 | }
111 |
112 | .ct-chart{
113 | margin: 30px 0 30px;
114 | height: 245px;
115 | }
116 |
117 | .table{
118 | tbody td:first-child,
119 | thead th:first-child{
120 | padding-left: 15px;
121 | }
122 |
123 | tbody td:last-child,
124 | thead th:last-child{
125 | padding-right: 15px;
126 | }
127 | }
128 |
129 | .alert{
130 | border-radius: $border-radius-base;
131 | position: relative;
132 | }
133 | .icon-big{
134 | font-size: 3em;
135 | min-height: 64px;
136 | }
137 | .numbers{
138 | font-size: 2em;
139 | text-align: right;
140 | p{
141 | margin: 0;
142 | }
143 | }
144 | ul.team-members{
145 | li{
146 | padding: 10px 0px;
147 | &:not(:last-child){
148 | border-bottom: 1px solid $medium-pale-bg;
149 | }
150 | }
151 | }
152 | }
153 | .card-user{
154 | .image{
155 | border-radius: 8px 8px 0 0;
156 | height: 150px;
157 | position: relative;
158 | overflow: hidden;
159 |
160 | img{
161 | width: 100%;
162 | }
163 | }
164 | .image-plain{
165 | height: 0;
166 | margin-top: 110px;
167 | }
168 | .author{
169 | text-align: center;
170 | text-transform: none;
171 | margin-top: -65px;
172 | .title{
173 | color: $default-states-color;
174 | small{
175 | color: $card-muted-color;
176 | }
177 | }
178 | }
179 | .avatar{
180 | width: 100px;
181 | height: 100px;
182 | border-radius: 50%;
183 | position: relative;
184 | margin-bottom: 15px;
185 |
186 | &.border-white{
187 | border: 5px solid $white-color;
188 | }
189 | &.border-gray{
190 | border: 5px solid $card-muted-color;
191 | }
192 | }
193 | .title{
194 | font-weight: 600;
195 | line-height: 24px;
196 | }
197 | .description{
198 | margin-top: 10px;
199 | }
200 | .content{
201 | min-height: 200px;
202 | }
203 |
204 | &.card-plain{
205 | .avatar{
206 | height: 190px;
207 | width: 190px;
208 | }
209 | }
210 | }
211 |
212 | .card-map{
213 | .map{
214 | height: 500px;
215 | padding-top: 20px;
216 |
217 | > div{
218 | height: 100%;
219 | }
220 | }
221 | }
222 | .card-user,
223 | .card-price{
224 | .footer{
225 | padding: 5px 15px 10px;
226 | }
227 | hr{
228 | margin: 5px 15px;
229 | }
230 | }
231 | .card-plain{
232 | background-color: transparent;
233 | box-shadow: none;
234 | border-radius: 0;
235 |
236 | .image{
237 | border-radius: 4px;
238 | }
239 | }
240 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_sidebar-and-main-panel.scss:
--------------------------------------------------------------------------------
1 | .sidebar{
2 | position: absolute;
3 | top: 0;
4 | bottom: 0;
5 | left: 0;
6 | z-index: 1;
7 | background-size: cover;
8 | background-position: center center;
9 | .sidebar-wrapper{
10 | position: relative;
11 | max-height: none;
12 | min-height: 100%;
13 | overflow: hidden;
14 | width: 260px;
15 | z-index: 4;
16 | box-shadow: inset -1px 0px 0px 0px $medium-gray;
17 | }
18 | .sidebar-background{
19 | position: absolute;
20 | z-index: 1;
21 | height: 100%;
22 | width: 100%;
23 | display: block;
24 | top: 0;
25 | left: 0;
26 | background-size: cover;
27 | background-position: center center;
28 | }
29 |
30 |
31 | }
32 | .sidebar,
33 | .off-canvas-sidebar{
34 | width: 260px;
35 | display: block;
36 | font-weight: 200;
37 | .logo-img{
38 | width: 42px;
39 | max-height: 42px;
40 |
41 | img{
42 | width: 42px;
43 | top: 16px;
44 | left: 18px;
45 | position: absolute;
46 | }
47 | }
48 | .logo{
49 | padding: 18px 0px;
50 | margin: 0 20px;
51 |
52 | p{
53 | float: left;
54 | font-size: 20px;
55 | margin: 10px 10px;
56 | line-height: 20px;
57 | }
58 |
59 | .simple-text{
60 | text-transform: uppercase;
61 | padding: $padding-small-vertical $padding-zero;
62 | display: block;
63 | font-size: $font-size-large;
64 | text-align: center;
65 | font-weight: $font-weight-normal;
66 | line-height: 30px;
67 | }
68 | }
69 |
70 | .nav{
71 | margin-top: 20px;
72 |
73 | li{
74 | > a{
75 | margin: 10px 0px;
76 | padding-left: 25px;
77 | padding-right: 25px;
78 |
79 | opacity: .7;
80 | }
81 |
82 | &:hover > a{
83 | opacity: 1;
84 | }
85 |
86 | &.active > a{
87 | color: $primary-color;
88 | opacity: 1;
89 |
90 | &:before{
91 | border-right: 17px solid $medium-gray;
92 | border-top: 17px solid transparent;
93 | border-bottom: 17px solid transparent;
94 | content: "";
95 | display: inline-block;
96 | position: absolute;
97 | right: 0;
98 | top: 8px;
99 | }
100 |
101 | &:after{
102 | border-right: 17px solid $bg-nude;
103 | border-top: 17px solid transparent;
104 | border-bottom: 17px solid transparent;
105 | content: "";
106 | display: inline-block;
107 | position: absolute;
108 | right: -1px;
109 | top: 8px;
110 | }
111 | }
112 | }
113 |
114 | p{
115 | margin: 0;
116 | line-height: 30px;
117 | font-size: 12px;
118 | font-weight: 600;
119 | text-transform: uppercase;
120 | }
121 |
122 | i{
123 | font-size: 24px;
124 | float: left;
125 | margin-right: 15px;
126 | line-height: 30px;
127 | width: 30px;
128 | text-align: center;
129 | }
130 | }
131 |
132 | &:after,
133 | &:before{
134 | display: block;
135 | content: "";
136 | position: absolute;
137 | width: 100%;
138 | height: 100%;
139 | top: 0;
140 | left: 0;
141 | z-index: 2;
142 | background: $white-background-color;
143 | }
144 |
145 | &,
146 | &[data-background-color="white"]{
147 | @include sidebar-background-color($white-background-color, $default-color);
148 | }
149 | &[data-background-color="black"]{
150 | @include sidebar-background-color($black-background-color, $white-color);
151 | }
152 |
153 | &[data-active-color="primary"]{
154 | @include sidebar-active-color($primary-color);
155 | }
156 | &[data-active-color="info"]{
157 | @include sidebar-active-color($info-color);
158 | }
159 | &[data-active-color="success"]{
160 | @include sidebar-active-color($success-color);
161 | }
162 | &[data-active-color="warning"]{
163 | @include sidebar-active-color($warning-color);
164 | }
165 | &[data-active-color="danger"]{
166 | @include sidebar-active-color($danger-color);
167 | }
168 |
169 | }
170 |
171 | .main-panel{
172 | background-color: $bg-nude;
173 | position: relative;
174 | z-index: 2;
175 | float: right;
176 | width: $sidebar-width;
177 | min-height: 100%;
178 |
179 | > .content{
180 | padding: 30px 15px;
181 | min-height: calc(100% - 123px);
182 | }
183 |
184 | > .footer{
185 | border-top: 1px solid rgba(0, 0, 0, 0.1);
186 | }
187 |
188 | .navbar{
189 | margin-bottom: 0;
190 | }
191 | }
192 |
193 | .sidebar,
194 | .main-panel{
195 | overflow: auto;
196 | max-height: 100%;
197 | height: 100%;
198 | -webkit-transition-property: top,bottom;
199 | transition-property: top,bottom;
200 | -webkit-transition-duration: .2s,.2s;
201 | transition-duration: .2s,.2s;
202 | -webkit-transition-timing-function: linear,linear;
203 | transition-timing-function: linear,linear;
204 | -webkit-overflow-scrolling: touch;
205 | }
206 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_checkbox-radio.scss:
--------------------------------------------------------------------------------
1 | .checkbox,
2 | .radio {
3 | padding-left: 20px;
4 | margin-bottom: 12px;
5 | }
6 |
7 | .checkbox label {
8 | display: inline-block;
9 | vertical-align: middle;
10 | position: relative;
11 | padding-left: 10px;
12 | }
13 |
14 | .checkbox label::before {
15 | content: "";
16 | display: inline-block;
17 | position: absolute;
18 | width: 19px;
19 | height: 19px;
20 | left: 0;
21 | margin-left: -20px;
22 | border-radius: 3px;
23 | opacity: .50;
24 | background-color: $font-color;
25 | transition: opacity 0.2s linear;
26 | }
27 |
28 | .checkbox label::after {
29 | display: inline-block;
30 | position: absolute;
31 | width: 19px;
32 | height: 19px;
33 | left: 0;
34 | top: -2px;
35 | text-align: center;
36 | margin-left: -20px;
37 | font-size: 16px;
38 | color: $white-color;
39 |
40 | }
41 |
42 | .checkbox input[type="checkbox"],
43 | .radio input[type="radio"] {
44 | opacity: 0;
45 | z-index: 1;
46 | cursor: pointer;
47 | width: 19px;
48 | height: 19px;
49 | top: -2px;
50 | }
51 |
52 | .checkbox input[type="checkbox"]:checked + label::after,
53 | .checkbox input[type="checkbox"]:not(:disabled):hover + label::after{
54 | font-family: 'FontAwesome';
55 | content: "\f00c";
56 | }
57 |
58 | .checkbox input[type="checkbox"]:checked + label::before{
59 | opacity: 1;
60 | }
61 |
62 |
63 | .checkbox input[type="checkbox"]:disabled + label {
64 | color: #cfcfcf;
65 | }
66 |
67 | .checkbox input[type="checkbox"]:disabled + label::before {
68 | background-color: #cfcfcf;
69 | cursor: not-allowed;
70 | }
71 |
72 | .checkbox.checkbox-circle label::before {
73 | border-radius: 50%;
74 | }
75 |
76 | .checkbox.checkbox-inline {
77 | margin-top: 0;
78 | }
79 |
80 | .checkbox-primary input[type="checkbox"]:checked + label::before {
81 | background-color: #428bca;
82 | border-color: #428bca;
83 | }
84 |
85 | .checkbox-primary input[type="checkbox"]:checked + label::after {
86 | color: #fff;
87 | }
88 |
89 | .checkbox-danger input[type="checkbox"]:checked + label::before {
90 | background-color: #d9534f;
91 | border-color: #d9534f;
92 | }
93 |
94 | .checkbox-danger input[type="checkbox"]:checked + label::after {
95 | color: #fff;
96 | }
97 |
98 | .checkbox-info input[type="checkbox"]:checked + label::before {
99 | background-color: #5bc0de;
100 | border-color: #5bc0de;
101 | }
102 |
103 | .checkbox-info input[type="checkbox"]:checked + label::after {
104 | color: #fff;
105 | }
106 |
107 | .checkbox-warning input[type="checkbox"]:checked + label::before {
108 | background-color: #f0ad4e;
109 | border-color: #f0ad4e;
110 | }
111 |
112 | .checkbox-warning input[type="checkbox"]:checked + label::after {
113 | color: #fff;
114 | }
115 |
116 | .checkbox-success input[type="checkbox"]:checked + label::before {
117 | background-color: #5cb85c;
118 | border-color: #5cb85c;
119 | }
120 |
121 | .checkbox-success input[type="checkbox"]:checked + label::after {
122 | color: #fff;
123 | }
124 |
125 | .radio label {
126 | display: inline-block;
127 | vertical-align: middle;
128 | position: relative;
129 | padding-left: 10px;
130 | }
131 |
132 | .radio label::before {
133 | font-family: 'FontAwesome';
134 | content: "\f10c";
135 | font-size: 22px;
136 | -webkit-font-smoothing: antialiased;
137 | -moz-osx-font-smoothing: grayscale;
138 | display: inline-block;
139 | position: absolute;
140 | left: 0;
141 | top: -5px;
142 | color: $font-color;
143 | opacity: .50;
144 | margin-left: -20px;
145 | }
146 |
147 | .radio input[type="radio"]:not(:disabled):hover + label::before{
148 | font-family: 'FontAwesome';
149 | content: "\f192";
150 | color: $font-color;
151 | opacity: .50;
152 | }
153 |
154 | .radio label::after {
155 | display: inline-block;
156 | position: absolute;
157 | font-family: 'FontAwesome';
158 | content: "\f192";
159 | -webkit-font-smoothing: antialiased;
160 | -moz-osx-font-smoothing: grayscale;
161 | opacity: 0;
162 | left: 0px;
163 | top: -5px;
164 | margin-left: -20px;
165 | font-size: 22px;
166 | background-color: transparent;
167 | color: $font-color;
168 | transition: opacity 0.2s linear;
169 | }
170 |
171 | .radio input[type="radio"]:checked + label::after {
172 | opacity: 1;
173 | }
174 |
175 | .radio input[type="radio"]:disabled + label {
176 | color: #cfcfcf;
177 | }
178 |
179 | .radio input[type="radio"]:disabled + label::before,
180 | .radio input[type="radio"]:disabled + label::after {
181 | color: #cfcfcf;
182 | }
183 |
184 | .radio.radio-inline {
185 | margin-top: 0;
186 | }
187 |
188 | .radio-primary input[type="radio"] + label::after {
189 | background-color: #428bca;
190 | }
191 |
192 | .radio-primary input[type="radio"]:checked + label::before {
193 | border-color: #428bca;
194 | }
195 |
196 | .radio-primary input[type="radio"]:checked + label::after {
197 | background-color: #428bca;
198 | }
199 |
200 | .radio-danger input[type="radio"] + label::after {
201 | background-color: #d9534f;
202 | }
203 |
204 | .radio-danger input[type="radio"]:checked + label::before {
205 | border-color: #d9534f;
206 | }
207 |
208 | .radio-danger input[type="radio"]:checked + label::after {
209 | background-color: #d9534f;
210 | }
211 |
212 | .radio-info input[type="radio"] + label::after {
213 | background-color: #5bc0de;
214 | }
215 |
216 | .radio-info input[type="radio"]:checked + label::before {
217 | border-color: #5bc0de;
218 | }
219 |
220 | .radio-info input[type="radio"]:checked + label::after {
221 | background-color: #5bc0de;
222 | }
223 |
224 | .radio-warning input[type="radio"] + label::after {
225 | background-color: #f0ad4e;
226 | }
227 |
228 | .radio-warning input[type="radio"]:checked + label::before {
229 | border-color: #f0ad4e;
230 | }
231 |
232 | .radio-warning input[type="radio"]:checked + label::after {
233 | background-color: #f0ad4e;
234 | }
235 |
236 | .radio-success input[type="radio"] + label::after {
237 | background-color: #5cb85c;
238 | }
239 |
240 | .radio-success input[type="radio"]:checked + label::before {
241 | border-color: #5cb85c;
242 | }
243 |
244 | .radio-success input[type="radio"]:checked + label::after {
245 | background-color: #5cb85c;
246 | }
247 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/plugins/_fixed-plugin.scss:
--------------------------------------------------------------------------------
1 |
2 | /* fixed plugin on the right */
3 | .fixed-plugin li > a,
4 | .fixed-plugin .badge{
5 | transition: all .34s;
6 | -webkit-transition: all .34s;
7 | -moz-transition: all .34s;
8 | }
9 |
10 | .fixed-plugin{
11 | position: absolute;
12 | top: 180px;
13 | right: 0;
14 | width: 64px;
15 | background: rgba(0,0,0,.3);
16 | z-index: 1031;
17 | border-radius: 8px 0 0 8px;
18 | text-align: center;
19 | }
20 | .fixed-plugin .fa-cog{
21 | color: #FFFFFF;
22 | padding: 10px;
23 | border-radius: 0 0 6px 6px;
24 | width: auto;
25 | }
26 | .fixed-plugin .dropdown-menu{
27 | right: 80px;
28 | left: auto;
29 | width: 290px;
30 | border-radius: 10px;
31 | padding: 10px;
32 | }
33 | .fixed-plugin .dropdown-menu:after, .fixed-plugin .dropdown-menu:before{
34 | right: 10px;
35 | margin-left: auto;
36 | left: auto;
37 | }
38 | .fixed-plugin .fa-circle-thin{
39 | color: #FFFFFF;
40 | }
41 | .fixed-plugin .active .fa-circle-thin{
42 | color: #00bbff;
43 | }
44 |
45 | .fixed-plugin .dropdown-menu > .active > a,
46 | .fixed-plugin .dropdown-menu > .active > a:hover,
47 | .fixed-plugin .dropdown-menu > .active > a:focus{
48 | color: #777777;
49 | text-align: center;
50 | }
51 |
52 | .fixed-plugin img{
53 | border-radius: 0;
54 | width: auto;
55 | height: 100px;
56 | transform: translateX(-30%);
57 | -webkit-transform: translateX(-30%);
58 | margin: 0 auto;
59 | }
60 |
61 | .fixed-plugin .badge{
62 | border: 3px solid #FFFFFF;
63 | border-radius: 50%;
64 | cursor: pointer;
65 | display: inline-block;
66 | height: 28px;
67 | margin-right: 5px;
68 | position: relative;
69 | width: 28px;
70 | }
71 |
72 | .fixed-plugin .badge.active,
73 | .fixed-plugin .badge:hover{
74 | border-color: #00bbff;
75 | }
76 |
77 | .fixed-plugin .badge-white{
78 | background-color: #EBEBEB;
79 | }
80 | .fixed-plugin .badge-black{
81 | background-color: #212120;
82 | }
83 | .fixed-plugin .badge-primary{
84 | background-color: #7A9E9F;
85 | }
86 | .fixed-plugin .badge-info{
87 | background-color: #68B3C8;
88 | }
89 | .fixed-plugin .badge-success{
90 | background-color: #7AC29A;
91 | }
92 | .fixed-plugin .badge-warning{
93 | background-color: #F3BB45;
94 | }
95 | .fixed-plugin .badge-danger{
96 | background-color: #DD0330;
97 | }
98 | .fixed-plugin .badge-brown{
99 | background-color: #66615B;
100 | }
101 |
102 | .fixed-plugin h5{
103 | font-size: 14px;
104 | margin: 10px;
105 | }
106 | .fixed-plugin .dropdown-menu li{
107 | display: block;
108 | padding: 10px 5px;
109 | width: 25%;
110 | float: left;
111 | }
112 |
113 | .fixed-plugin li.adjustments-line,
114 | .fixed-plugin li.header-title,
115 | .fixed-plugin li.button-container{
116 | width: 100%;
117 | min-height: inherit;
118 | }
119 |
120 | .fixed-plugin li.button-container{
121 | height: auto;
122 | }
123 | .fixed-plugin li.button-container div{
124 | margin-bottom: 5px;
125 | }
126 |
127 | .fixed-plugin #sharrreTitle{
128 | text-align: center;
129 | padding: 10px 0;
130 | height: 50px;
131 | }
132 |
133 | .fixed-plugin li.header-title{
134 | height: 30px;
135 | line-height: 35px;
136 | font-size: 12px;
137 | font-weight: 600;
138 | text-align: center;
139 | text-transform: uppercase;
140 | }
141 |
142 | .fixed-plugin .adjustments-line p{
143 | float: left;
144 | display: inline-block;
145 | margin-bottom: 0;
146 | font-size: 1em;
147 | }
148 | .fixed-plugin .adjustments-line .switch{
149 | float: right;
150 | }
151 | .fixed-plugin .dropdown-menu > li.adjustments-line > a{
152 | padding-right: 0;
153 | padding-left: 0;
154 | border-bottom: 1px solid #ddd;
155 | margin: 0;
156 | }
157 |
158 | .fixed-plugin .dropdown-menu > li > a.switch-trigger:hover,
159 | .fixed-plugin .dropdown-menu > li > a.switch-trigger:focus{
160 | background-color: transparent;
161 | }
162 |
163 | .fixed-plugin .dropdown-menu > li > a img{
164 | margin-top: auto;
165 | }
166 |
167 | .fixed-plugin .btn-social{
168 | width: 50%;
169 | display: block;
170 | width: 48%;
171 | float: left;
172 | font-weight: 600;
173 | }
174 | .fixed-plugin .btn-social i{
175 | margin-right: 5px;
176 | }
177 | .fixed-plugin .btn-social:first-child{
178 | margin-right: 2%;
179 | }
180 |
181 | .fixed-plugin .dropdown-menu{
182 | background: #FFFFFF;
183 | }
184 |
185 | @media (min-width: 992px){
186 | .fixed-plugin .dropdown .dropdown-menu{
187 | -webkit-transform: translateY(-15%);
188 | -moz-transform: translateY(-15%);
189 | -o-transform: translateY(-15%);
190 | -ms-transform: translateY(-15%);
191 | transform: translateY(-15%);
192 | top: 27px;
193 | opacity: 0;
194 |
195 | transform-origin: 0 0;
196 | }
197 | .fixed-plugin .dropdown.open .dropdown-menu{
198 | opacity: 1;
199 |
200 | -webkit-transform: translateY(-15%);
201 | -moz-transform: translateY(-15%);
202 | -o-transform: translateY(-15%);
203 | -ms-transform: translateY(-15%);
204 | transform: translateY(-15%);
205 |
206 | transform-origin: 0 0;
207 | }
208 |
209 | .fixed-plugin .dropdown-menu:before,
210 | .fixed-plugin .dropdown-menu:after{
211 | content: "";
212 | display: inline-block;
213 | position: absolute;
214 | top: 33px;
215 | width: 16px;
216 | transform: translateY(-50%);
217 | -webkit-transform: translateY(-50%);
218 | -moz-transform: translateY(-50%);
219 |
220 | }
221 | .fixed-plugin .dropdown-menu:before{
222 | border-bottom: 16px solid rgba(0, 0, 0, 0);
223 | border-left: 16px solid #F1EAE0;
224 | border-top: 16px solid rgba(0,0,0,0);
225 | right: -16px;
226 | }
227 |
228 | .fixed-plugin .dropdown-menu:after{
229 | border-bottom: 16px solid rgba(0, 0, 0, 0);
230 | border-left: 16px solid #FFFFFF;
231 | border-top: 16px solid rgba(0,0,0,0);
232 | right: -15px;
233 | }
234 |
235 | .typo-line{
236 | padding-left: 140px;
237 | margin-bottom: 40px;
238 | position: relative;
239 | }
240 |
241 | .typo-line .category{
242 | transform: translateY(-50%);
243 | top: 50%;
244 | left: 0px;
245 | position: absolute;
246 | }
247 |
248 | .fixed-plugin{
249 | top: 120px;
250 | }
251 |
252 | }
253 |
254 | @media (max-width: 991px){
255 | .fixed-plugin .dropdown-menu{
256 | right: 60px;
257 | width: 220px;
258 | }
259 | .fixed-plugin .dropdown-menu li{
260 | width: 50%;
261 | }
262 |
263 | .fixed-plugin li.adjustments-line,
264 | .fixed-plugin li.header-title,
265 | .fixed-plugin li.button-container{
266 | width: 100%;
267 | height: 55px;
268 | min-height: inherit;
269 | }
270 |
271 | .fixed-plugin li.button-container{
272 | height: auto;
273 | }
274 |
275 | .fixed-plugin .adjustments-line .switch{
276 | float: right;
277 | margin: 0 0px;
278 | }
279 |
280 | .fixed-plugin li.header-title{
281 | height: 40px;
282 | }
283 | .fixed-plugin .dropdown .dropdown-menu{
284 | top: -170px;
285 | }
286 |
287 | .fixed-plugin .dropdown-menu:before,
288 | .fixed-plugin .dropdown-menu:after{
289 | display: none;
290 | }
291 | }
292 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_vendor-prefixes.scss:
--------------------------------------------------------------------------------
1 | // User select
2 | // For selecting text on the page
3 |
4 | @mixin user-select($select) {
5 | -webkit-user-select: $select;
6 | -moz-user-select: $select;
7 | -ms-user-select: $select; // IE10+
8 | user-select: $select;
9 | }
10 |
11 | @mixin box-shadow($shadow...) {
12 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
13 | box-shadow: $shadow;
14 | }
15 |
16 | // Box sizing
17 | @mixin box-sizing($boxmodel) {
18 | -webkit-box-sizing: $boxmodel;
19 | -moz-box-sizing: $boxmodel;
20 | box-sizing: $boxmodel;
21 | }
22 |
23 |
24 | @mixin transition($time, $type){
25 | -webkit-transition: all $time $type;
26 | -moz-transition: all $time $type;
27 | -o-transition: all $time $type;
28 | -ms-transition: all $time $type;
29 | transition: all $time $type;
30 | }
31 |
32 | @mixin transition-none(){
33 | -webkit-transition: none;
34 | -moz-transition: none;
35 | -o-transition: none;
36 | -ms-transition: none;
37 | transition: none;
38 | }
39 |
40 | @mixin transform-scale($value){
41 | -webkit-transform: scale($value);
42 | -moz-transform: scale($value);
43 | -o-transform: scale($value);
44 | -ms-transform: scale($value);
45 | transform: scale($value);
46 | }
47 |
48 | @mixin transform-translate-x($value){
49 | -webkit-transform: translate3d($value, 0, 0);
50 | -moz-transform: translate3d($value, 0, 0);
51 | -o-transform: translate3d($value, 0, 0);
52 | -ms-transform: translate3d($value, 0, 0);
53 | transform: translate3d($value, 0, 0);
54 | }
55 |
56 | @mixin transform-origin($coordinates){
57 | -webkit-transform-origin: $coordinates;
58 | -moz-transform-origin: $coordinates;
59 | -o-transform-origin: $coordinates;
60 | -ms-transform-origin: $coordinates;
61 | transform-origin: $coordinates;
62 | }
63 |
64 | @mixin icon-gradient ($top-color, $bottom-color){
65 | background: $top-color;
66 | background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%);
67 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top-color), color-stop(100%,$bottom-color));
68 | background: -webkit-linear-gradient(top, $top-color 0%,$bottom-color 100%);
69 | background: -o-linear-gradient(top, $top-color 0%,$bottom-color 100%);
70 | background: -ms-linear-gradient(top, $top-color 0%,$bottom-color 100%);
71 | background: linear-gradient(to bottom, $top-color 0%,$bottom-color 100%);
72 | background-size: 150% 150%;
73 | }
74 |
75 | @mixin radial-gradient($extern-color, $center-color){
76 | background: $extern-color;
77 | background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
78 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
79 | background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
80 | background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
81 | background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
82 | background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
83 | background-size: 550% 450%;
84 | }
85 |
86 | @mixin vertical-align {
87 | position: relative;
88 | top: 50%;
89 | -webkit-transform: translateY(-50%);
90 | -ms-transform: translateY(-50%);
91 | transform: translateY(-50%);
92 | }
93 |
94 | @mixin rotate-180(){
95 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
96 | -webkit-transform: rotate(180deg);
97 | -ms-transform: rotate(180deg);
98 | transform: rotate(180deg);
99 | }
100 |
101 | @mixin bar-animation($type){
102 | -webkit-animation: $type 500ms linear 0s;
103 | -moz-animation: $type 500ms linear 0s;
104 | animation: $type 500ms 0s;
105 | -webkit-animation-fill-mode: forwards;
106 | -moz-animation-fill-mode: forwards;
107 | animation-fill-mode: forwards;
108 | }
109 |
110 | @mixin topbar-x-rotation(){
111 | @keyframes topbar-x {
112 | 0% {top: 0px; transform: rotate(0deg); }
113 | 45% {top: 6px; transform: rotate(145deg); }
114 | 75% {transform: rotate(130deg); }
115 | 100% {transform: rotate(135deg); }
116 | }
117 | @-webkit-keyframes topbar-x {
118 | 0% {top: 0px; -webkit-transform: rotate(0deg); }
119 | 45% {top: 6px; -webkit-transform: rotate(145deg); }
120 | 75% {-webkit-transform: rotate(130deg); }
121 | 100% { -webkit-transform: rotate(135deg); }
122 | }
123 | @-moz-keyframes topbar-x {
124 | 0% {top: 0px; -moz-transform: rotate(0deg); }
125 | 45% {top: 6px; -moz-transform: rotate(145deg); }
126 | 75% {-moz-transform: rotate(130deg); }
127 | 100% { -moz-transform: rotate(135deg); }
128 | }
129 | }
130 |
131 | @mixin topbar-back-rotation(){
132 | @keyframes topbar-back {
133 | 0% { top: 6px; transform: rotate(135deg); }
134 | 45% { transform: rotate(-10deg); }
135 | 75% { transform: rotate(5deg); }
136 | 100% { top: 0px; transform: rotate(0); }
137 | }
138 |
139 | @-webkit-keyframes topbar-back {
140 | 0% { top: 6px; -webkit-transform: rotate(135deg); }
141 | 45% { -webkit-transform: rotate(-10deg); }
142 | 75% { -webkit-transform: rotate(5deg); }
143 | 100% { top: 0px; -webkit-transform: rotate(0); }
144 | }
145 |
146 | @-moz-keyframes topbar-back {
147 | 0% { top: 6px; -moz-transform: rotate(135deg); }
148 | 45% { -moz-transform: rotate(-10deg); }
149 | 75% { -moz-transform: rotate(5deg); }
150 | 100% { top: 0px; -moz-transform: rotate(0); }
151 | }
152 | }
153 |
154 | @mixin bottombar-x-rotation(){
155 | @keyframes bottombar-x {
156 | 0% {bottom: 0px; transform: rotate(0deg);}
157 | 45% {bottom: 6px; transform: rotate(-145deg);}
158 | 75% {transform: rotate(-130deg);}
159 | 100% {transform: rotate(-135deg);}
160 | }
161 | @-webkit-keyframes bottombar-x {
162 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);}
163 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
164 | 75% {-webkit-transform: rotate(-130deg);}
165 | 100% {-webkit-transform: rotate(-135deg);}
166 | }
167 | @-moz-keyframes bottombar-x {
168 | 0% {bottom: 0px; -moz-transform: rotate(0deg);}
169 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);}
170 | 75% {-moz-transform: rotate(-130deg);}
171 | 100% {-moz-transform: rotate(-135deg);}
172 | }
173 | }
174 |
175 | @mixin bottombar-back-rotation{
176 | @keyframes bottombar-back {
177 | 0% { bottom: 6px;transform: rotate(-135deg);}
178 | 45% { transform: rotate(10deg);}
179 | 75% { transform: rotate(-5deg);}
180 | 100% { bottom: 0px;transform: rotate(0);}
181 | }
182 | @-webkit-keyframes bottombar-back {
183 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
184 | 45% {-webkit-transform: rotate(10deg);}
185 | 75% {-webkit-transform: rotate(-5deg);}
186 | 100% {bottom: 0px;-webkit-transform: rotate(0);}
187 | }
188 | @-moz-keyframes bottombar-back {
189 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);}
190 | 45% {-moz-transform: rotate(10deg);}
191 | 75% {-moz-transform: rotate(-5deg);}
192 | 100% {bottom: 0px;-moz-transform: rotate(0);}
193 | }
194 |
195 | }
196 |
197 |
198 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_chartist.scss:
--------------------------------------------------------------------------------
1 | @mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
2 | display: block;
3 | position: relative;
4 | width: $width;
5 |
6 | &:before {
7 | display: block;
8 | float: left;
9 | content: "";
10 | width: 0;
11 | height: 0;
12 | padding-bottom: $ratio * 100%;
13 | }
14 |
15 | &:after {
16 | content: "";
17 | display: table;
18 | clear: both;
19 | }
20 |
21 | > svg {
22 | display: block;
23 | position: absolute;
24 | top: 0;
25 | left: 0;
26 | }
27 | }
28 |
29 | @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
30 | -webkit-box-align: $ct-text-align;
31 | -webkit-align-items: $ct-text-align;
32 | -ms-flex-align: $ct-text-align;
33 | align-items: $ct-text-align;
34 | -webkit-box-pack: $ct-text-justify;
35 | -webkit-justify-content: $ct-text-justify;
36 | -ms-flex-pack: $ct-text-justify;
37 | justify-content: $ct-text-justify;
38 | // Fallback to text-align for non-flex browsers
39 | @if($ct-text-justify == 'flex-start') {
40 | text-align: left;
41 | } @else if ($ct-text-justify == 'flex-end') {
42 | text-align: right;
43 | } @else {
44 | text-align: center;
45 | }
46 | }
47 |
48 | @mixin ct-flex() {
49 | // Fallback to block
50 | display: block;
51 | display: -webkit-box;
52 | display: -moz-box;
53 | display: -ms-flexbox;
54 | display: -webkit-flex;
55 | display: flex;
56 | }
57 |
58 | @mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
59 | fill: $ct-text-color;
60 | color: $ct-text-color;
61 | font-size: $ct-text-size;
62 | line-height: $ct-text-line-height;
63 | }
64 |
65 | @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
66 | stroke: $ct-grid-color;
67 | stroke-width: $ct-grid-width;
68 |
69 | @if ($ct-grid-dasharray) {
70 | stroke-dasharray: $ct-grid-dasharray;
71 | }
72 | }
73 |
74 | @mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
75 | stroke-width: $ct-point-size;
76 | stroke-linecap: $ct-point-shape;
77 | }
78 |
79 | @mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
80 | fill: none;
81 | stroke-width: $ct-line-width;
82 |
83 | @if ($ct-line-dasharray) {
84 | stroke-dasharray: $ct-line-dasharray;
85 | }
86 | }
87 |
88 | @mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
89 | stroke: none;
90 | fill-opacity: $ct-area-opacity;
91 | }
92 |
93 | @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
94 | fill: none;
95 | stroke-width: $ct-bar-width;
96 | }
97 |
98 | @mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
99 | fill: none;
100 | stroke-width: $ct-donut-width;
101 | }
102 |
103 | @mixin ct-chart-series-color($color) {
104 | .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
105 | stroke: $color;
106 | }
107 |
108 | .#{$ct-class-slice-pie}, .#{$ct-class-area} {
109 | fill: $color;
110 | }
111 | }
112 |
113 | @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) {
114 |
115 | .#{$ct-class-label} {
116 | @include ct-chart-label($ct-text-color, $ct-text-size);
117 | }
118 |
119 | .#{$ct-class-chart-line} .#{$ct-class-label},
120 | .#{$ct-class-chart-bar} .#{$ct-class-label} {
121 | @include ct-flex();
122 | }
123 |
124 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
125 | @include ct-align-justify(flex-end, flex-start);
126 | // Fallback for browsers that don't support foreignObjects
127 | text-anchor: start;
128 | }
129 |
130 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
131 | @include ct-align-justify(flex-start, flex-start);
132 | // Fallback for browsers that don't support foreignObjects
133 | text-anchor: start;
134 | }
135 |
136 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
137 | @include ct-align-justify(flex-end, flex-end);
138 | // Fallback for browsers that don't support foreignObjects
139 | text-anchor: end;
140 | }
141 |
142 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
143 | @include ct-align-justify(flex-end, flex-start);
144 | // Fallback for browsers that don't support foreignObjects
145 | text-anchor: start;
146 | }
147 |
148 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
149 | @include ct-align-justify(flex-end, center);
150 | // Fallback for browsers that don't support foreignObjects
151 | text-anchor: start;
152 | }
153 |
154 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
155 | @include ct-align-justify(flex-start, center);
156 | // Fallback for browsers that don't support foreignObjects
157 | text-anchor: start;
158 | }
159 |
160 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
161 | @include ct-align-justify(flex-end, flex-start);
162 | // Fallback for browsers that don't support foreignObjects
163 | text-anchor: start;
164 | }
165 |
166 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
167 | @include ct-align-justify(flex-start, flex-start);
168 | // Fallback for browsers that don't support foreignObjects
169 | text-anchor: start;
170 | }
171 |
172 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
173 | //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
174 | @include ct-align-justify(center, flex-end);
175 | // Fallback for browsers that don't support foreignObjects
176 | text-anchor: end;
177 | }
178 |
179 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
180 | @include ct-align-justify(center, flex-start);
181 | // Fallback for browsers that don't support foreignObjects
182 | text-anchor: end;
183 | }
184 |
185 | .#{$ct-class-grid} {
186 | @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
187 | }
188 |
189 | .#{$ct-class-point} {
190 | @include ct-chart-point($ct-point-size, $ct-point-shape);
191 | }
192 |
193 | .#{$ct-class-line} {
194 | @include ct-chart-line($ct-line-width);
195 | }
196 |
197 | .#{$ct-class-area} {
198 | @include ct-chart-area();
199 | }
200 |
201 | .#{$ct-class-bar} {
202 | @include ct-chart-bar($ct-bar-width);
203 | }
204 |
205 | .#{$ct-class-slice-donut} {
206 | @include ct-chart-donut($ct-donut-width);
207 | }
208 |
209 | @if $ct-include-colored-series {
210 | @for $i from 0 to length($ct-series-names) {
211 | .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
212 | $color: nth($ct-series-colors, $i + 1);
213 |
214 | @include ct-chart-series-color($color);
215 | }
216 | }
217 | }
218 | }
219 |
220 | @if $ct-include-classes {
221 | @include ct-chart();
222 |
223 | @if $ct-include-alternative-responsive-containers {
224 | @for $i from 0 to length($ct-scales-names) {
225 | .#{nth($ct-scales-names, $i + 1)} {
226 | @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
227 | }
228 | }
229 | }
230 | }
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "dashboard": {
7 | "root": "",
8 | "projectType": "application",
9 | "architect": {
10 | "build": {
11 | "builder": "@angular-devkit/build-angular:browser",
12 | "options": {
13 | "lazyModules": [
14 | "src/app/flight-cancelling/flight-cancelling.module",
15 | "src/app/lazy-dashboard-tile/lazy-dashboard-tile.module"
16 | ],
17 | "outputPath": "dist",
18 | "index": "src/index.html",
19 | "main": "src/main.ts",
20 | "tsConfig": "src/tsconfig.app.json",
21 | "polyfills": "src/polyfills.ts",
22 | "assets": [
23 | {
24 | "glob": "**/*",
25 | "input": "src/assets",
26 | "output": "/assets"
27 | },
28 | {
29 | "glob": "favicon.ico",
30 | "input": "src",
31 | "output": "/"
32 | }
33 | ],
34 | "styles": [
35 | "src/styles.css"
36 | ],
37 | "scripts": [
38 | "node_modules/@webcomponents/custom-elements/src/native-shim.js"
39 | ]
40 | },
41 | "configurations": {
42 | "production": {
43 | "optimization": true,
44 | "outputHashing": "all",
45 | "sourceMap": false,
46 | "extractCss": true,
47 | "namedChunks": false,
48 | "aot": true,
49 | "extractLicenses": true,
50 | "vendorChunk": false,
51 | "buildOptimizer": true,
52 | "fileReplacements": [
53 | {
54 | "replace": "src/environments/environment.ts",
55 | "with": "src/environments/environment.prod.ts"
56 | }
57 | ]
58 | }
59 | }
60 | },
61 | "serve": {
62 | "builder": "@angular-devkit/build-angular:dev-server",
63 | "options": {
64 | "browserTarget": "dashboard:build"
65 | },
66 | "configurations": {
67 | "production": {
68 | "browserTarget": "dashboard:build:production"
69 | }
70 | }
71 | },
72 | "extract-i18n": {
73 | "builder": "@angular-devkit/build-angular:extract-i18n",
74 | "options": {
75 | "browserTarget": "dashboard:build"
76 | }
77 | },
78 | "test": {
79 | "builder": "@angular-devkit/build-angular:karma",
80 | "options": {
81 | "main": "src/test.ts",
82 | "karmaConfig": "./karma.conf.js",
83 | "polyfills": "src/polyfills.ts",
84 | "tsConfig": "src/tsconfig.spec.json",
85 | "scripts": [],
86 | "styles": [
87 | "src/styles.css"
88 | ],
89 | "assets": [
90 | {
91 | "glob": "**/*",
92 | "input": "src/assets",
93 | "output": "/assets"
94 | },
95 | {
96 | "glob": "favicon.ico",
97 | "input": "src",
98 | "output": "/"
99 | }
100 | ]
101 | }
102 | },
103 | "lint": {
104 | "builder": "@angular-devkit/build-angular:tslint",
105 | "options": {
106 | "tsConfig": [
107 | "src/tsconfig.app.json",
108 | "src/tsconfig.spec.json"
109 | ],
110 | "exclude": []
111 | }
112 | }
113 | }
114 | },
115 | "starter-e2e": {
116 | "root": "",
117 | "projectType": "application",
118 | "cli": {},
119 | "schematics": {},
120 | "architect": {
121 | "e2e": {
122 | "builder": "@angular-devkit/build-angular:protractor",
123 | "options": {
124 | "protractorConfig": "./protractor.conf.js",
125 | "devServerTarget": "dashboard:serve"
126 | }
127 | },
128 | "lint": {
129 | "builder": "@angular-devkit/build-angular:tslint",
130 | "options": {
131 | "tsConfig": [
132 | "e2e/tsconfig.e2e.json"
133 | ],
134 | "exclude": []
135 | }
136 | }
137 | }
138 | },
139 | "external-dashboard-tile": {
140 | "root": "projects/external-dashboard-tile/",
141 | "sourceRoot": "projects/external-dashboard-tile/src",
142 | "projectType": "application",
143 | "prefix": "app",
144 | "schematics": {},
145 | "architect": {
146 | "build": {
147 | // "builder": "@angular-devkit/build-angular:browser",
148 | "builder": "ngx-build-plus:build",
149 | "options": {
150 | "outputPath": "dist/external-dashboard-tile",
151 | "index": "projects/external-dashboard-tile/src/index.html",
152 | "main": "projects/external-dashboard-tile/src/main.ts",
153 | "polyfills": "projects/external-dashboard-tile/src/polyfills.ts",
154 | "tsConfig": "projects/external-dashboard-tile/tsconfig.app.json",
155 | "assets": [
156 | "projects/external-dashboard-tile/src/favicon.ico",
157 | "projects/external-dashboard-tile/src/assets"
158 | ],
159 | "styles": [
160 | "projects/external-dashboard-tile/src/styles.css"
161 | ],
162 | "scripts": [
163 | "node_modules/@webcomponents/custom-elements/src/native-shim.js"
164 | ]
165 | },
166 | "configurations": {
167 | "production": {
168 | "fileReplacements": [
169 | {
170 | "replace": "projects/external-dashboard-tile/src/environments/environment.ts",
171 | "with": "projects/external-dashboard-tile/src/environments/environment.prod.ts"
172 | }
173 | ],
174 | "optimization": true,
175 | "outputHashing": "all",
176 | "sourceMap": false,
177 | "extractCss": true,
178 | "namedChunks": false,
179 | "aot": true,
180 | "extractLicenses": true,
181 | "vendorChunk": false,
182 | "buildOptimizer": true
183 | }
184 | }
185 | },
186 | "serve": {
187 | "builder": "@angular-devkit/build-angular:dev-server",
188 | "options": {
189 | "browserTarget": "external-dashboard-tile:build"
190 | },
191 | "configurations": {
192 | "production": {
193 | "browserTarget": "external-dashboard-tile:build:production"
194 | }
195 | }
196 | },
197 | "extract-i18n": {
198 | "builder": "@angular-devkit/build-angular:extract-i18n",
199 | "options": {
200 | "browserTarget": "external-dashboard-tile:build"
201 | }
202 | },
203 | "test": {
204 | "builder": "@angular-devkit/build-angular:karma",
205 | "options": {
206 | "main": "projects/external-dashboard-tile/src/test.ts",
207 | "polyfills": "projects/external-dashboard-tile/src/polyfills.ts",
208 | "tsConfig": "projects/external-dashboard-tile/tsconfig.spec.json",
209 | "karmaConfig": "projects/external-dashboard-tile/karma.conf.js",
210 | "styles": [
211 | "projects/external-dashboard-tile/src/styles.css"
212 | ],
213 | "scripts": [],
214 | "assets": [
215 | "projects/external-dashboard-tile/src/favicon.ico",
216 | "projects/external-dashboard-tile/src/assets"
217 | ]
218 | }
219 | },
220 | "lint": {
221 | "builder": "@angular-devkit/build-angular:tslint",
222 | "options": {
223 | "tsConfig": [
224 | "projects/external-dashboard-tile/tsconfig.app.json",
225 | "projects/external-dashboard-tile/tsconfig.spec.json"
226 | ],
227 | "exclude": [
228 | "**/node_modules/**"
229 | ]
230 | }
231 | }
232 | }
233 | },
234 | "external-dashboard-tile-e2e": {
235 | "root": "projects/external-dashboard-tile-e2e/",
236 | "projectType": "application",
237 | "architect": {
238 | "e2e": {
239 | "builder": "@angular-devkit/build-angular:protractor",
240 | "options": {
241 | "protractorConfig": "projects/external-dashboard-tile-e2e/protractor.conf.js",
242 | "devServerTarget": "external-dashboard-tile:serve"
243 | },
244 | "configurations": {
245 | "production": {
246 | "devServerTarget": "external-dashboard-tile:serve:production"
247 | }
248 | }
249 | },
250 | "lint": {
251 | "builder": "@angular-devkit/build-angular:tslint",
252 | "options": {
253 | "tsConfig": "projects/external-dashboard-tile-e2e/tsconfig.e2e.json",
254 | "exclude": [
255 | "**/node_modules/**"
256 | ]
257 | }
258 | }
259 | }
260 | }
261 | },
262 | "cli": {},
263 | "schematics": {
264 | "@schematics/angular:component": {
265 | "prefix": "app",
266 | "styleext": "css"
267 | },
268 | "@schematics/angular:directive": {
269 | "prefix": "app"
270 | }
271 | }
272 | }
--------------------------------------------------------------------------------
/src/assets/sass/paper/_variables.scss:
--------------------------------------------------------------------------------
1 | $font-color: #66615b !default;
2 | $fill-font-color: rgba(255, 255, 255, 0.7);
3 |
4 | $none: 0 !default;
5 | $border-thin: 1px !default;
6 | $border-thick: 2px !default;
7 |
8 | $white-color: #FFFFFF !default;
9 | $white-bg: #FFFFFF !default;
10 |
11 | $smoke-bg: #F5F5F5 !default;
12 | $pale-bg: #FFFCF5 !default;
13 | $medium-pale-bg: #F1EAE0 !default;
14 |
15 | $table-line-color: #CCC5B9 !default;
16 | $muted-color: #a49e93 !default;
17 |
18 | $black-bg: rgba(30,30,30,.97) !default;
19 |
20 | $black-color: #333333 !default;
21 | $black-hr: #444444 !default;
22 |
23 | $white-background-color: #FFFFFF !default;
24 | $black-background-color: #212120 !default;
25 |
26 | $light-gray: #E3E3E3 !default;
27 | $medium-gray: #DDDDDD !default;
28 | $dark-gray: #9A9A9A !default;
29 |
30 | $gray-input-bg: #fffcf5 !default;
31 | $danger-input-bg: #FFC0A4 !default;
32 | $success-input-bg: #ABF3CB !default;
33 | $other-medium-gray: #A49E93 !default;
34 | $transparent-bg: transparent !default;
35 |
36 | $default-color: #66615B !default;
37 | $default-bg: #66615B !default;
38 | $default-states-color: #403D39 !default;
39 |
40 | $primary-color: #7A9E9F !default;
41 | $primary-bg: #7A9E9F !default;
42 | $primary-states-color: #427C89 !default;
43 |
44 | $success-color: #7AC29A !default;
45 | $success-bg: #7AC29A !default;
46 | $success-states-color: #42A084 !default;
47 |
48 | $info-color: #68B3C8 !default;
49 | $info-bg: #68B3C8 !default;
50 | $info-states-color: #3091B2 !default;
51 |
52 | $warning-color: #F3BB45 !default;
53 | $warning-bg: #F3BB45 !default;
54 | $warning-states-color: #BB992F !default;
55 |
56 |
57 | $danger-color: #DD0330 !default;
58 | $danger-bg: #DD0330 !default;
59 | $danger-states-color: #bf032a !default;
60 |
61 |
62 | $link-disabled-color: #666666 !default;
63 |
64 |
65 | /* light colors - used for select dropdown */
66 |
67 | $light-blue: rgba($primary-color, .2);
68 | $light-azure: rgba($info-color, .2);
69 | $light-green: rgba($success-color, .2);
70 | $light-orange: rgba($warning-color, .2);
71 | $light-red: rgba($danger-color, .2);
72 |
73 |
74 | //== Components
75 | //
76 | $padding-base-vertical: 7px !default;
77 | $padding-base-horizontal: 18px !default;
78 |
79 | $padding-round-vertical: 9px !default;
80 | $padding-round-horizontal: 18px !default;
81 |
82 | $padding-simple-vertical: 10px !default;
83 | $padding-simple-horizontal: 18px !default;
84 |
85 | $padding-large-vertical: 11px !default;
86 | $padding-large-horizontal: 30px !default;
87 |
88 | $padding-small-vertical: 4px !default;
89 | $padding-small-horizontal: 10px !default;
90 |
91 | $padding-xs-vertical: 2px !default;
92 | $padding-xs-horizontal: 5px !default;
93 |
94 | $padding-label-vertical: 2px !default;
95 | $padding-label-horizontal: 12px !default;
96 |
97 | // padding for links inside dropdown menu
98 | $padding-dropdown-vertical: 10px !default;
99 | $padding-dropdown-horizontal: 15px !default;
100 |
101 | $margin-large-vertical: 30px !default;
102 | $margin-base-vertical: 15px !default;
103 |
104 | // border radius for buttons
105 | $border-radius-btn-small: 26px !default;
106 | $border-radius-btn-base: 20px !default;
107 | $border-radius-btn-large: 50px !default;
108 |
109 |
110 | // Cristina: am schimbat aici si s-au modificat inputurile
111 | $margin-bottom: 0 0 10px 0 !default;
112 | $border-radius-small: 3px !default;
113 | $border-radius-base: 4px !default;
114 | $border-radius-large: 6px !default;
115 | $border-radius-extreme: 6px !default;
116 |
117 | $border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
118 | $border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
119 |
120 | $btn-round-radius: 30px !default;
121 |
122 | $height-base: 40px !default;
123 |
124 | $font-size-base: 14px !default;
125 | $font-size-xs: 12px !default;
126 | $font-size-small: 12px !default;
127 | $font-size-medium: 16px !default;
128 | $font-size-large: 18px !default;
129 | $font-size-large-navbar: 20px !default;
130 |
131 | $font-size-h1: 3.2em !default;
132 | $font-size-h2: 2.6em !default;
133 | $font-size-h3: 1.825em !default;
134 | $font-size-h4: 1.5em !default;
135 | $font-size-h5: 1.25em !default;
136 | $font-size-h6: 0.9em !default;
137 | $font-paragraph: 16px !default;
138 | $font-size-navbar: 16px !default;
139 | $font-size-small: 12px !default;
140 |
141 | $font-weight-light: 300 !default;
142 | $font-weight-normal: 400 !default;
143 | $font-weight-semi: 500 !default;
144 | $font-weight-bold: 600 !default;
145 |
146 | $line-height-small: 20px !default;
147 | $line-height-general: 1.4em !default;
148 | $line-height: 36px !default;
149 | $line-height-lg: 54px !default;
150 |
151 |
152 | $border-radius-top: 10px 10px 0 0 !default;
153 | $border-radius-bottom: 0 0 10px 10px !default;
154 |
155 | $dropdown-shadow: 0 2px rgba(17, 16, 15, 0.1), 0 2px 10px rgba(17, 16, 15, 0.1);
156 |
157 | $general-transition-time: 300ms !default;
158 |
159 | $slow-transition-time: 300ms !default;
160 | $dropdown-coordinates: 29px -50px !default;
161 |
162 | $fast-transition-time: 150ms !default;
163 | $select-coordinates: 50% -40px !default;
164 |
165 | $transition-linear: linear !default;
166 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
167 | $transition-ease: ease 0s;
168 |
169 | $navbar-padding-a: 10px 15px;
170 | $navbar-margin-a: 15px 0px;
171 |
172 | $padding-social-a: 10px 5px;
173 |
174 | $navbar-margin-a-btn: 18px 3px;
175 | $navbar-margin-a-btn-round: 19px 3px;
176 |
177 |
178 | $navbar-padding-brand: 20px 15px;
179 | $navbar-margin-brand: 5px 0px;
180 |
181 | $navbar-margin-brand-icons: 12px auto;
182 |
183 | $navbar-margin-btn: 15px 3px;
184 |
185 | $height-icon: 64px !default;
186 | $width-icon: 64px !default;
187 | $padding-icon: 12px !default;
188 | $border-radius-icon: 15px !default;
189 |
190 |
191 | $white-navbar: rgba(#FFFFFF, .96);
192 | $blue-navbar: rgba(#34ACDC, .98);
193 | $azure-navbar: rgba(#5BCAFF, .98);
194 | $green-navbar: rgba(#4CD964, .98);
195 | $orange-navbar: rgba(#FF9500, .98);
196 | $red-navbar: rgba(#FF4C40, .98);
197 |
198 | $bg-nude: #f4f3ef !default;
199 | $bg-primary: #8ECFD5 !default;
200 | $bg-info: #7CE4FE !default;
201 | $bg-success: #8EF3C5 !default;
202 | $bg-warning: #FFE28C !default;
203 | $bg-danger: #FF8F5E !default;
204 |
205 | $topbar-x: topbar-x !default;
206 | $topbar-back: topbar-back !default;
207 | $bottombar-x: bottombar-x !default;
208 | $bottombar-back: bottombar-back !default;
209 |
210 | $transition-linear: linear !default;
211 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
212 | $transition-ease: ease 0s;
213 | $transition-ease-in: ease-in !default;
214 | $transition-ease-out: ease-out !default;
215 |
216 | $general-transition-time: 300ms !default;
217 |
218 | $slow-transition-time: 370ms !default;
219 | $dropdown-coordinates: 29px -50px !default;
220 |
221 | $fast-transition-time: 150ms !default;
222 |
223 | $ultra-fast-transition-time: 100ms !default;
224 |
225 | $select-coordinates: 50% -40px !default;
226 |
227 | $padding-zero: 0px !default;
228 |
229 | $sidebar-width: calc(100% - 260px) !default;
230 | $medium-dark-gray: #AAAAAA !default;
231 |
232 | //variables used in cards
233 | $card-black-color: #252422 !default;
234 | $card-muted-color: #ccc5b9 !default;
235 |
236 |
237 | //variables used for sidebar
238 | $sidebar-background-dark-blue: #506367;
239 |
240 | $sidebar-background-blue: #b8d8d8 !default;
241 | $sidebar-font-blue: #506568 !default;
242 | $sidebar-subtitle-blue: #7a9e9f !default;
243 |
244 | $sidebar-background-green: #d5e5a3 !default;
245 | $sidebar-font-green: #60773d !default;
246 | $sidebar-subtitle-green: #92ac56 !default;
247 |
248 | $sidebar-background-yellow: #ffe28c !default;
249 | $sidebar-font-yellow: #b25825 !default;
250 | $sidebar-subtitle-yellow: #d88715 !default;
251 |
252 | $sidebar-background-brown: #d6c1ab !default;
253 | $sidebar-font-brown: #75442e !default;
254 | $sidebar-subtitle-brown: #a47e65 !default;
255 |
256 | $sidebar-background-purple: #baa9ba !default;
257 | $sidebar-font-purple: #3a283d !default;
258 | $sidebar-subtitle-purple: #5a283d !default;
259 |
260 | $sidebar-background-orange: #ff8f5e !default;
261 | $sidebar-font-orange: #772510 !default;
262 | $sidebar-subtitle-orange: #e95e37 !default;
263 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_responsive.scss:
--------------------------------------------------------------------------------
1 | @media (min-width: 992px){
2 | .navbar{
3 | min-height: 75px;
4 | }
5 | .navbar-form {
6 | margin-top: 21px;
7 | margin-bottom: 21px;
8 | padding-left: 5px;
9 | padding-right: 5px;
10 | }
11 | .navbar-search-form{
12 | display: none;
13 | }
14 | .navbar-nav > li > .dropdown-menu,
15 | .dropdown .dropdown-menu{
16 | transform: translate3d(0px, -40px, 0px);
17 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
18 | }
19 | .navbar-nav > li.open > .dropdown-menu, .dropdown.open .dropdown-menu{
20 | transform: translate3d(0px, 0px, 0px);
21 | }
22 |
23 | .navbar-nav > li > .dropdown-menu:before{
24 | border-bottom: 11px solid $medium-pale-bg;
25 | border-left: 11px solid rgba(0, 0, 0, 0);
26 | border-right: 11px solid rgba(0, 0, 0, 0);
27 | content: "";
28 | display: inline-block;
29 | position: absolute;
30 | right: 12px;
31 | top: -11px;
32 | }
33 | .navbar-nav > li > .dropdown-menu:after {
34 | border-bottom: 11px solid $pale-bg;
35 | border-left: 11px solid rgba(0, 0, 0, 0);
36 | border-right: 11px solid rgba(0, 0, 0, 0);
37 | content: "";
38 | display: inline-block;
39 | position: absolute;
40 | right: 12px;
41 | top: -10px;
42 | }
43 |
44 | .navbar-nav.navbar-left > li > .dropdown-menu:before{
45 | right: auto;
46 | left: 12px;
47 | }
48 |
49 | .navbar-nav.navbar-left > li > .dropdown-menu:after{
50 | right: auto;
51 | left: 12px;
52 | }
53 |
54 | .navbar{
55 | .navbar-header{
56 | margin-left: 10px;
57 | }
58 | }
59 |
60 | .footer:not(.footer-big){
61 | nav > ul{
62 | li:first-child{
63 | margin-left: 0;
64 | }
65 | }
66 | }
67 |
68 | body > .navbar-collapse.collapse{
69 | display: none !important;
70 | }
71 |
72 | .card{
73 | form{
74 | [class*="col-"]{
75 | padding: 6px;
76 | }
77 | [class*="col-"]:first-child{
78 | padding-left: 15px;
79 | }
80 | [class*="col-"]:last-child{
81 | padding-right: 15px;
82 | }
83 | }
84 | }
85 | }
86 |
87 | /* Changes for small display */
88 |
89 | @media (max-width: 991px){
90 | .sidebar{
91 | display: none;
92 | }
93 |
94 | .main-panel{
95 | width: 100%;
96 | }
97 | .navbar-transparent{
98 | padding-top: 15px;
99 | background-color: rgba(0, 0, 0, 0.45);
100 | }
101 | body {
102 | position: relative;
103 | }
104 | h6{
105 | font-size: 1em;
106 | }
107 | .wrapper{
108 | @include transform-translate-x(0px);
109 | @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
110 | left: 0;
111 | background-color: white;
112 | }
113 | .navbar .container{
114 | left: 0;
115 | width: 100%;
116 | @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
117 | position: relative;
118 | }
119 | .navbar .navbar-collapse.collapse,
120 | .navbar .navbar-collapse.collapse.in,
121 | .navbar .navbar-collapse.collapsing{
122 | display: none !important;
123 | }
124 |
125 | .navbar-nav > li{
126 | float: none;
127 | position: relative;
128 | display: block;
129 | }
130 |
131 | .sidebar {
132 | position: fixed;
133 | display: block;
134 | top: 0;
135 | height: 100%;
136 | width: 230px;
137 | right: 0;
138 | left: auto;
139 | z-index: 1032;
140 | visibility: visible;
141 | background-color: #999;
142 | overflow-y: visible;
143 | border-top: none;
144 | text-align: left;
145 | padding-right: 0px;
146 | padding-left: 0;
147 |
148 | @include transform-translate-x(230px);
149 | @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
150 |
151 | .sidebar-wrapper {
152 | position: relative;
153 | z-index: 3;
154 | overflow-y: scroll;
155 | height: 100%;
156 | box-shadow: inset 1px 0px 0px 0px $medium-gray;
157 | }
158 |
159 | .nav{
160 | margin-top: 0;
161 | padding: 10px $margin-base-vertical 0;
162 |
163 | > li{
164 |
165 | > a{
166 | margin: 0px 0px;
167 | color: $default-color;
168 | text-transform: uppercase;
169 | font-weight: 600;
170 | font-size: $font-size-small;
171 | line-height: $line-height-general;
172 | padding: 10px 0;
173 |
174 | &:hover,
175 | &.active{
176 | color: $default-states-color;
177 | }
178 |
179 | p,
180 | .notification,
181 | .caret,
182 | {
183 | display: inline-block;
184 | }
185 |
186 | .caret{
187 | float: right;
188 | position: relative;
189 | top: 12px;
190 | }
191 |
192 | i{
193 | font-size: 18px;
194 | margin-right: 10px;
195 | line-height: 26px;
196 | }
197 | }
198 |
199 | &.active > a{
200 |
201 | &:before{
202 | border-right: none;
203 | border-left: 12px solid $medium-gray;
204 | border-top: 12px solid transparent;
205 | border-bottom: 12px solid transparent;
206 | right: auto;
207 | margin-left: -$margin-base-vertical;
208 | left: 0px;
209 | top: 10px;
210 | }
211 |
212 | &:after{
213 | border-right: none;
214 | border-left: 12px solid $bg-nude;
215 | border-top: 12px solid transparent;
216 | border-bottom: 12px solid transparent;
217 | right: auto;
218 | margin-left: -$margin-base-vertical;
219 | left: -1px;
220 | top: 10px;
221 | }
222 | }
223 |
224 | }
225 |
226 |
227 |
228 | }
229 |
230 | &::after{
231 | top: 0;
232 | left: 0;
233 | height: 100%;
234 | width: 100%;
235 | position: absolute;
236 | background-color: $bg-nude;
237 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(112, 112, 112, 0) 60%, rgba(186, 186, 186, 0.15) 100%);
238 | display: block;
239 | content: "";
240 | z-index: 1;
241 | }
242 | &.has-image::after{
243 | @include black-filter(.8);
244 | }
245 |
246 | .logo{
247 | position: relative;
248 | z-index: 4;
249 | padding-top: 11px;
250 | padding-bottom: 11px;
251 | .logo-img img{
252 | top: 7px;
253 | left: 0px;
254 | }
255 | }
256 |
257 | .divider{
258 | height: 1px;
259 | margin: 10px 0;
260 | }
261 | }
262 | .nav-open .navbar-collapse{
263 | @include transform-translate-x(0px);
264 | }
265 | .nav-open .navbar .container{
266 | left: -230px;
267 | }
268 | .nav-open .wrapper{
269 | left: 0;
270 | @include transform-translate-x(-230px);
271 | }
272 | .navbar-toggle .icon-bar {
273 | display: block;
274 | position: relative;
275 | background: #fff;
276 | width: 24px;
277 | height: 2px;
278 | border-radius: 1px;
279 | margin: 0 auto;
280 | }
281 |
282 | .navbar-header .navbar-toggle {
283 | margin: 10px 15px 10px 0;
284 | width: 40px;
285 | height: 40px;
286 | }
287 | .bar1,
288 | .bar2,
289 | .bar3 {
290 | outline: 1px solid transparent;
291 | }
292 | .bar1 {
293 | top: 0px;
294 | @include bar-animation($topbar-back);
295 | }
296 | .bar2 {
297 | opacity: 1;
298 | }
299 | .bar3 {
300 | bottom: 0px;
301 | @include bar-animation($bottombar-back);
302 | }
303 | .toggled .bar1 {
304 | top: 6px;
305 | @include bar-animation($topbar-x);
306 | }
307 | .toggled .bar2 {
308 | opacity: 0;
309 | }
310 | .toggled .bar3 {
311 | bottom: 6px;
312 | @include bar-animation($bottombar-x);
313 | }
314 |
315 | @include topbar-x-rotation();
316 | @include topbar-back-rotation();
317 | @include bottombar-x-rotation();
318 | @include bottombar-back-rotation();
319 |
320 | @-webkit-keyframes fadeIn {
321 | 0% {opacity: 0;}
322 | 100% {opacity: 1;}
323 | }
324 | @-moz-keyframes fadeIn {
325 | 0% {opacity: 0;}
326 | 100% {opacity: 1;}
327 | }
328 | @keyframes fadeIn {
329 | 0% {opacity: 0;}
330 | 100% {opacity: 1;}
331 | }
332 |
333 | .dropdown-menu .divider{
334 | background-color: rgba(229, 229, 229, 0.15);
335 | }
336 |
337 | .navbar-nav {
338 | margin: 1px 0;
339 | }
340 |
341 | .dropdown-menu {
342 | display: none;
343 |
344 | & > li > a{
345 | &:hover,
346 | &:focus{
347 | background-color: transparent;
348 | }
349 | }
350 | }
351 |
352 | .navbar-fixed-top {
353 | -webkit-backface-visibility: hidden;
354 | }
355 | #bodyClick {
356 | height: 100%;
357 | width: 100%;
358 | position: fixed;
359 | opacity: 0;
360 | top: 0;
361 | left: auto;
362 | right: 230px;
363 | content: "";
364 | z-index: 9999;
365 | overflow-x: hidden;
366 | }
367 | .form-control + .form-control-feedback{
368 | margin-top: -8px;
369 | }
370 | .navbar-toggle:hover,.navbar-toggle:focus {
371 | background-color: transparent !important;
372 | }
373 | .btn.dropdown-toggle{
374 | margin-bottom: 0;
375 | }
376 | .media-post .author{
377 | width: 20%;
378 | float: none !important;
379 | display: block;
380 | margin: 0 auto 10px;
381 | }
382 | .media-post .media-body{
383 | width: 100%;
384 | }
385 |
386 | .navbar-collapse.collapse{
387 | height: 100% !important;
388 | }
389 | .navbar-collapse.collapse.in {
390 | display: block;
391 | }
392 | .navbar-header .collapse, .navbar-toggle {
393 | display:block !important;
394 | }
395 | .navbar-header {
396 | float:none;
397 | }
398 | .navbar-nav .open .dropdown-menu {
399 | position: static;
400 | float: none;
401 | width: auto;
402 | margin-top: 0;
403 | background-color: transparent;
404 | border: 0;
405 | -webkit-box-shadow: none;
406 | box-shadow: none;
407 | }
408 |
409 | .main-panel > .content{
410 | padding-left: 0;
411 | padding-right: 0;
412 | }
413 | .nav .open > a{
414 | &,
415 | &:focus,
416 | &:hover{
417 | background-color: transparent;
418 | }
419 |
420 | }
421 |
422 | .footer .copyright{
423 | padding: 0px 15px;
424 | width: 100%;
425 | }
426 | }
427 |
428 | //overwrite table responsive for 768px screens
429 |
430 | @media (min-width: 992px){
431 | .table-full-width{
432 | margin-left: -15px;
433 | margin-right: -15px;
434 | }
435 | .table-responsive{
436 | overflow: visible;
437 | }
438 |
439 | }
440 |
441 | @media (max-width: 991px){
442 | .table-responsive {
443 | width: 100%;
444 | margin-bottom: 15px;
445 | border: 1px solid #dddddd;
446 | overflow-x: scroll;
447 | overflow-y: hidden;
448 | -ms-overflow-style: -ms-autohiding-scrollbar;
449 | -webkit-overflow-scrolling: touch;
450 | }
451 |
452 | }
453 |
--------------------------------------------------------------------------------
74 |
76 | {{ basket | json }}
75 |